From 94bf19b4e68f09c5d5099a76775c3a9defa059f2 Mon Sep 17 00:00:00 2001
From: loroteber <loroteber@vk.com>
Date: Thu, 20 Aug 2026 18:32:39 +0500
Subject: [PATCH 1/2] feat(apps): enable fullscreen

---
 Web/Presenters/templates/Apps/Play.latte | 81 +++++++++++++++++++++++-
 Web/static/js/options.js                 |  6 ++
 Web/static/js/router.js                  |  2 +
 locales/en.strings                       |  1 +
 locales/ru.strings                       |  1 +
 5 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/Web/Presenters/templates/Apps/Play.latte b/Web/Presenters/templates/Apps/Play.latte
index c268ddeb0..d452c793b 100644
--- a/Web/Presenters/templates/Apps/Play.latte
+++ b/Web/Presenters/templates/Apps/Play.latte
@@ -16,7 +16,7 @@
 
 {block header}
     {$name}
-    <a style="float: right;" onClick="reportApp({$id})" n:if="$canReport ?? false">{_report}</a>
+    <span style="float: right; font-weight: bold;"><a onClick="reportApp({$id})" n:if="$canReport ?? false">[{_report}]</a> <a onClick="showAppSettings({rawurlencode($csrfToken)}, {!$canReport})">[{_menu_settings}]</a> <a class="app_fullscreen">[🗗]</a></span>
 {/block}
 
 {block content}
@@ -43,6 +43,85 @@
         window.appTitle  = {$name};
         window.appPerms  = {$perms};
         window.appOrigin = {$origin};
+        window.fsApps    = JSON.parse(localStorage.getItem("fullscreen_apps") || "[]");
+    </script>
+    
+    <script n:syntax="double">
+        u("head").append(u(`
+            <style>
+                html.app_fullscreen {
+                    overflow-y: hidden !important;
+                }
+                .page_yellowheader.app_fullscreen span {
+                    margin-right: calc(${getComputedStyle(u(".page_yellowheader").nodes[0]).paddingRight} * 2);
+                }
+                body.dimmed .dimmer {
+                    z-index: 1023;
+                }
+                #ajax_audio_player {
+                    z-index: 1020;
+                }
+                .page_yellowheader.app_fullscreen {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    z-index: 1021;
+                }
+                #appFrame.app_fullscreen {
+                    position: fixed;
+                    top: ${u(".page_yellowheader").nodes[0].getBoundingClientRect().height}px;
+                    left: 0;
+                    width: 100%;
+                    height: calc(100% - ${u(".page_yellowheader").nodes[0].getBoundingClientRect().height}px);
+                    z-index: 1021;
+                }
+            </style>
+        `))
+
+        function goFullscreen() {
+            u("html").addClass("app_fullscreen")
+            u(".page_yellowheader").addClass("app_fullscreen")
+            u("#appFrame").addClass("app_fullscreen")
+        }
+
+        if (window.fsApps.includes(window.appId)) { goFullscreen() }
+
+        u("a.app_fullscreen").on("click", (e) => {
+            if (u("html").hasClass("app_fullscreen")) {
+                u("html").removeClass("app_fullscreen")
+                u(".page_yellowheader").removeClass("app_fullscreen")
+                u("#appFrame").removeClass("app_fullscreen")
+            } else {
+                goFullscreen()
+            }
+            if (e.ctrlKey) {
+                u("#appFrame").nodes[0].src = u("#appFrame").nodes[0].src
+            }
+        })
+
+        function showAppSettings(hash, isDev) {
+            MessageBox(
+                tr("menu_settings"),
+                `
+                    <center>
+                        <label><input id="startFullscreen" name="startFullscreen" type="checkbox" ${window.fsApps.includes(window.appId) ? "checked" : ""}>${tr("app_start_fullscreen")}</label>
+                        <hr>
+                        ${isDev ? `<a href="/editapp?app=${window.appId}">${tr("app_edit")}</a><br> ` : ""}
+                        <a href="/apps/uninstall?hash=${hash}&app=${window.appId}">${tr("app_uninstall")}</a>
+                    </center>
+                `,
+                [tr("cancel"), tr("save")],
+                [() => {}, () => {
+                    if (u("#startFullscreen").is(":checked")) {
+                        if (!window.fsApps.includes(window.appId)) { window.fsApps.push(window.appId) }
+                    } else {
+                        if (window.fsApps.includes(window.appId)) { window.fsApps.splice(window.fsApps.indexOf(window.appId), 1) }
+                    }
+                    localStorage.setItem("fullscreen_apps", JSON.stringify(window.fsApps));
+                }]
+            )
+        }
     </script>
 
     {script "js/al_games.js"}
diff --git a/Web/static/js/options.js b/Web/static/js/options.js
index 2e9e85df7..4da0d6a04 100644
--- a/Web/static/js/options.js
+++ b/Web/static/js/options.js
@@ -181,6 +181,12 @@ window.tweaks = [
         `)
         u("#appFrame").closest("center").addClass("app_block")
     }),
+    new TweakOption("apps.fullscreen_show_notifications", function () {
+        this.customCSS(`html.app_fullscreen .notifications_global_wrap {z-index: 1022;}`)
+    }),
+    new TweakOption("apps.fullscreen_show_ajax_player", function () {
+        this.customCSS(`html.app_fullscreen #ajax_audio_player {z-index: 1025;}`)
+    }),
     new TweakOption("wall.hide_edit_mark", function () {
         this.customCSS(`.editedMark {display: none;}`)
     }),
diff --git a/Web/static/js/router.js b/Web/static/js/router.js
index 454b805b3..a95566ff3 100644
--- a/Web/static/js/router.js
+++ b/Web/static/js/router.js
@@ -160,6 +160,8 @@ window.router = new class {
             await window.player._handlePageTransition()
         }
 
+        if (u("html").hasClass("app_fullscreen")) { u("html").removeClass("app_fullscreen") }
+
         this.applyTweaks()
 
         /*window.document.dispatchEvent(new Event("DOMContentLoaded", {
diff --git a/locales/en.strings b/locales/en.strings
index 2ec5d4533..2e3588034 100644
--- a/locales/en.strings
+++ b/locales/en.strings
@@ -1339,6 +1339,7 @@
 "app_err_note_desc" = "Make sure the link is correct and the note belongs to you.";
 "app_delete_modal_desc" = "Are you sure you want to delete the app? This action cannot be undone.";
 "app_delete_succ" = "The app has been deleted";
+"app_start_fullscreen" = "Start app in fullscreen mode automatically";
 
 "learn_more" = "Learn more";
 
diff --git a/locales/ru.strings b/locales/ru.strings
index 5682b6954..46a16751b 100644
--- a/locales/ru.strings
+++ b/locales/ru.strings
@@ -1272,6 +1272,7 @@
 "app_err_note_desc" = "Убедитесь, что ссылка правильная и заметка принадлежит Вам.";
 "app_delete_modal_desc" = "Вы уверены, что хотите удалить приложение? Это действие нельзя отменить.";
 "app_delete_succ" = "Приложение удалено";
+"app_start_fullscreen" = "Автоматически запускать приложение в полноэкранном режиме";
 
 "learn_more" = "Подробнее";
 

From 7b489109f62b1f5a19db87defa7fad21cfbbbea2 Mon Sep 17 00:00:00 2001
From: loroteber <loroteber@vk.com>
Date: Sun, 30 Aug 2026 21:32:59 +0500
Subject: [PATCH 2/2] feat(apps): enable fullscreen

---
 Web/Presenters/templates/Apps/Play.latte | 42 +++---------------------
 Web/static/css/main.css                  | 42 ++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/Web/Presenters/templates/Apps/Play.latte b/Web/Presenters/templates/Apps/Play.latte
index d452c793b..d0143d231 100644
--- a/Web/Presenters/templates/Apps/Play.latte
+++ b/Web/Presenters/templates/Apps/Play.latte
@@ -16,7 +16,7 @@
 
 {block header}
     {$name}
-    <span style="float: right; font-weight: bold;"><a onClick="reportApp({$id})" n:if="$canReport ?? false">[{_report}]</a> <a onClick="showAppSettings({rawurlencode($csrfToken)}, {!$canReport})">[{_menu_settings}]</a> <a class="app_fullscreen">[🗗]</a></span>
+    <span style="float: right; font-weight: bold; padding: 0;"><a onClick="reportApp({$id})" n:if="$canReport ?? false">[{_report}]</a> <a onClick="showAppSettings({rawurlencode($csrfToken)}, {!$canReport})">[{_menu_settings}]</a> <a class="app_fullscreen">[🗗]</a></span>
 {/block}
 
 {block content}
@@ -47,42 +47,10 @@
     </script>
     
     <script n:syntax="double">
-        u("head").append(u(`
-            <style>
-                html.app_fullscreen {
-                    overflow-y: hidden !important;
-                }
-                .page_yellowheader.app_fullscreen span {
-                    margin-right: calc(${getComputedStyle(u(".page_yellowheader").nodes[0]).paddingRight} * 2);
-                }
-                body.dimmed .dimmer {
-                    z-index: 1023;
-                }
-                #ajax_audio_player {
-                    z-index: 1020;
-                }
-                .page_yellowheader.app_fullscreen {
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    z-index: 1021;
-                }
-                #appFrame.app_fullscreen {
-                    position: fixed;
-                    top: ${u(".page_yellowheader").nodes[0].getBoundingClientRect().height}px;
-                    left: 0;
-                    width: 100%;
-                    height: calc(100% - ${u(".page_yellowheader").nodes[0].getBoundingClientRect().height}px);
-                    z-index: 1021;
-                }
-            </style>
-        `))
-
         function goFullscreen() {
             u("html").addClass("app_fullscreen")
-            u(".page_yellowheader").addClass("app_fullscreen")
-            u("#appFrame").addClass("app_fullscreen")
+            u("#appFrame").parent().addClass("app_fullscreen")
+            u("#appFrame").parent().prepend(u(".page_yellowheader"))
         }
 
         if (window.fsApps.includes(window.appId)) { goFullscreen() }
@@ -90,8 +58,8 @@
         u("a.app_fullscreen").on("click", (e) => {
             if (u("html").hasClass("app_fullscreen")) {
                 u("html").removeClass("app_fullscreen")
-                u(".page_yellowheader").removeClass("app_fullscreen")
-                u("#appFrame").removeClass("app_fullscreen")
+                u("#appFrame").parent().removeClass("app_fullscreen")
+                u("#appFrame").parent().children(".page_yellowheader").remove() 
             } else {
                 goFullscreen()
             }
diff --git a/Web/static/css/main.css b/Web/static/css/main.css
index 39ea4f1b1..6731d1076 100644
--- a/Web/static/css/main.css
+++ b/Web/static/css/main.css
@@ -4828,3 +4828,45 @@ hr {
         white-space: nowrap;
     }
 }
+
+html.app_fullscreen {
+    overflow-y: hidden !important;
+}
+
+html.app_fullscreen .page_header {
+    z-index: 0;
+}
+
+html.app_fullscreen #app_dev {
+    display: none;
+}
+
+body.dimmed .dimmer {
+    z-index: 1023;
+}
+
+#ajax_audio_player {
+    z-index: 1020;
+}
+
+center.app_fullscreen {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    height: 100vh;
+    text-align: left;
+    top: 0;
+    left: 0;
+}
+
+.app_fullscreen #appFrame, .app_fullscreen .page_yellowheader {
+    z-index: 1021;
+}
+
+.app_fullscreen #appFrame {
+    position: relative;
+    width: 100% !important;
+    height: auto !important;
+    flex: 1;
+}
\ No newline at end of file