feat(react/widgets): port close zen button

apps/client/src/widgets/close_zen_button.css

@@ -0,0 +1,26 @@
+:root {
+    --zen-button-size: 32px;
+}
+
+.close-zen-container {
+    width: var(--zen-button-size);
+    height: var(--zen-button-size);
+}
+
+body.zen .close-zen-container {
+    display: block;
+    position: fixed;
+    top: 2px;
+    right: 2px;
+    z-index: 9999;
+    -webkit-app-region: no-drag;
+}
+
+body.zen.mobile .close-zen-container {
+    top: -2px;
+}
+
+body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container {
+    left: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px);
+    right: unset;
+}

apps/client/src/widgets/close_zen_button.ts

@@ -1,54 +0,0 @@
-import BasicWidget from "./basic_widget.js";
-import { t } from "../services/i18n.js";
-import utils from "../services/utils.js";
-
-const TPL = /*html*/`\
-<div class="close-zen-container">
-    <button class="button-widget bx icon-action bxs-yin-yang"
-        data-trigger-command="toggleZenMode"
-        title="${t("zen_mode.button_exit")}"
-    />
-
-    <style>
-    :root {
-        --zen-button-size: 32px;
-    }
-
-    .close-zen-container {
-        display: none;
-        width: var(--zen-button-size);
-        height: var(--zen-button-size);
-    }
-
-    body.zen .close-zen-container {
-        display: block;
-        position: fixed;
-        top: 2px;
-        right: 2px;
-        z-index: 9999;
-        -webkit-app-region: no-drag;
-    }
-
-    body.zen.mobile .close-zen-container {
-        top: -2px;
-    }
-
-    body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container {
-        left: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px);
-        right: unset;
-    }
-    </style>
-</div>
-`;
-
-export default class CloseZenButton extends BasicWidget {
-
-    doRender(): void {
-        this.$widget = $(TPL);
-    }
-
-    zenChangedEvent() {
-        this.toggleInt(true);
-    }
-
-}

apps/client/src/widgets/close_zen_button.tsx

@@ -0,0 +1,25 @@
+import { useState } from "preact/hooks";
+import { t } from "../services/i18n";
+import ActionButton from "./react/ActionButton";
+import { useTriliumEvent } from "./react/hooks";
+import "./close_zen_button.css";
+
+export default function CloseZenModeButton() {
+    const [ zenModeEnabled, setZenModeEnabled ] = useState(false);
+
+    useTriliumEvent("zenModeChanged", ({ isEnabled }) => {
+        setZenModeEnabled(isEnabled);
+    });
+
+    return (
+        <div class={`close-zen-container ${!zenModeEnabled ? "hidden-ext" : ""}`}>
+            {zenModeEnabled && (
+                <ActionButton
+                    icon="bx bxs-yin-yang"
+                    triggerCommand="toggleZenMode"
+                    text={t("zen_mode.button_exit")}
+                />
+            )}
+        </div>
+    )
+}