feat(zen): use dedicated floating button to stop zen mode

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> = {

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() {

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) {

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);
+    }
+
+}

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,