From 2c80607bfd27aa0b81ff74dadfbb19eebf14375a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 14 Feb 2025 18:18:28 +0200
Subject: [PATCH] feat(zen): use dedicated floating button to stop zen mode

---
 src/public/app/components/app_context.ts      |  1 +
 .../app/components/root_command_executor.ts   |  5 ++-
 src/public/app/layouts/desktop_layout.js      |  4 +-
 src/public/app/widgets/close_zen_button.ts    | 43 +++++++++++++++++++
 src/public/stylesheets/style.css              |  2 +-
 5 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 src/public/app/widgets/close_zen_button.ts

diff --git a/src/public/app/components/app_context.ts b/src/public/app/components/app_context.ts
index d6c7b8cc1..f54fd88fa 100644
--- a/src/public/app/components/app_context.ts
+++ b/src/public/app/components/app_context.ts
@@ -327,6 +327,7 @@ type EventMappings = {
     };
     scrollToEnd: { ntxId: string };
     noteTypeMimeChanged: { noteId: string };
+    zenModeChanged: { isEnabled: boolean };
 };
 
 export type EventListener<T extends EventNames> = {
diff --git a/src/public/app/components/root_command_executor.ts b/src/public/app/components/root_command_executor.ts
index 5f15ebe52..eb46e3139 100644
--- a/src/public/app/components/root_command_executor.ts
+++ b/src/public/app/components/root_command_executor.ts
@@ -179,7 +179,10 @@ export default class RootCommandExecutor extends Component {
     }
 
     toggleZenModeCommand() {
-        $("body").toggleClass("zen");
+        const $body = $("body");
+        $body.toggleClass("zen");
+        const isEnabled = $body.hasClass("zen");
+        appContext.triggerEvent("zenModeChanged", { isEnabled });
     }
 
     firstTabCommand() {
diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index e0f695803..1ece1c156 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -87,6 +87,7 @@ import options from "../services/options.js";
 import utils from "../services/utils.js";
 import GeoMapButtons from "../widgets/floating_buttons/geo_map_button.js";
 import ContextualHelpButton from "../widgets/floating_buttons/help_button.js";
+import CloseZenButton from "../widgets/close_zen_button.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -262,7 +263,8 @@ export default class DesktopLayout {
             .child(new DeleteNotesDialog())
             .child(new InfoDialog())
             .child(new ConfirmDialog())
-            .child(new PromptDialog());
+            .child(new PromptDialog())
+            .child(new CloseZenButton())
     }
 
     #buildLauncherPane(isHorizontal) {
diff --git a/src/public/app/widgets/close_zen_button.ts b/src/public/app/widgets/close_zen_button.ts
new file mode 100644
index 000000000..035104ebe
--- /dev/null
+++ b/src/public/app/widgets/close_zen_button.ts
@@ -0,0 +1,43 @@
+import BasicWidget from "./basic_widget.js";
+
+const TPL = `\
+<div class="close-zen-container">
+    <a class="button-widget bx icon-action bxs-yin-yang"
+        data-trigger-command="toggleZenMode" />
+
+    <style>
+    .close-zen-container {
+        display: none;
+        --size: 32px;
+        width: var(--size);
+        height: var(--size);
+    }
+
+    body.zen .close-zen-container {
+        display: block;
+        position: fixed;
+        top: 0;
+        right: 0;
+        z-index: 9999;
+    }
+
+    body.zen.electron:not(.native-titlebar) .close-zen-container {
+        --size: 32px;
+        left: calc(env(titlebar-area-width) - var(--size));
+        right: unset;
+    }
+    </style>
+</div>
+`;
+
+export default class CloseZenButton extends BasicWidget {
+
+    doRender(): void {
+        this.$widget = $(TPL);
+    }
+
+    zenChangedEvent() {
+        this.toggleInt(true);
+    }
+
+}
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 9301d116c..3e5d78899 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1651,7 +1651,7 @@ body.zen {
 
 body.zen .gutter,
 body.zen #launcher-container,
-body.zen #launcher-pane > :not(.global-menu),
+body.zen #launcher-pane,
 body.zen #left-pane,
 body.zen #right-pane,
 body.zen .tab-row-container,