feat(react/widgets): port title bar buttons

apps/client/src/layouts/desktop_layout.tsx

@@ -1,6 +1,5 @@
 import FlexContainer from "../widgets/containers/flex_container.js";
 import TabRowWidget from "../widgets/tab_row.js";
-import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
 import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import NoteTitleWidget from "../widgets/note_title.jsx";
@@ -42,6 +41,7 @@ import SearchResult from "../widgets/search_result.jsx";
 import GlobalMenu from "../widgets/buttons/global_menu.jsx";
 import SqlResults from "../widgets/sql_result.js";
 import SqlTableSchemas from "../widgets/sql_table_schemas.js";
+import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
 
 export default class DesktopLayout {
 
@@ -78,7 +78,7 @@ export default class DesktopLayout {
                     .child(new FlexContainer("row").id("tab-row-left-spacer"))
                     .optChild(launcherPaneIsHorizontal, new LeftPaneToggleWidget(true))
                     .child(new TabRowWidget().class("full-width"))
-                    .optChild(customTitleBarButtons, new TitleBarButtonsWidget())
+                    .optChild(customTitleBarButtons, <TitleBarButtons />)
                     .css("height", "40px")
                     .css("background-color", "var(--launcher-pane-background-color)")
                     .setParent(appContext)
@@ -99,7 +99,7 @@ export default class DesktopLayout {
                         new FlexContainer("column")
                             .id("rest-pane")
                             .css("flex-grow", "1")
-                            .optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, new TitleBarButtonsWidget()).css("height", "40px"))
+                            .optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, <TitleBarButtons />).css("height", "40px"))
                             .child(
                                 new FlexContainer("row")
                                     .filling()

apps/client/src/widgets/title_bar_buttons.css

@@ -0,0 +1,30 @@
+.component.title-bar-buttons {
+    flex-shrink: 0;
+    contain: none;
+}
+
+.title-bar-buttons div button {
+    border: none !important;
+    border-radius: 0;
+    background: none !important;
+    font-size: 150%;
+    height: 40px;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.title-bar-buttons div:hover button {
+    background-color: var(--accented-background-color) !important;
+}
+
+.title-bar-buttons div {
+    display: inline-block;
+    height: 40px;
+    width: 40px;
+}
+
+.title-bar-buttons .btn.focus, .title-bar-buttons .btn:focus {
+    box-shadow: none;
+}

apps/client/src/widgets/title_bar_buttons.ts

@@ -1,82 +0,0 @@
-import BasicWidget from "./basic_widget.js";
-import options from "../services/options.js";
-import utils from "../services/utils.js";
-
-const TPL = /*html*/`
-<div class="title-bar-buttons">
-    <style>
-    .title-bar-buttons {
-        flex-shrink: 0;
-    }
-
-    .title-bar-buttons div button {
-        border: none !important;
-        border-radius: 0;
-        background: none !important;
-        font-size: 150%;
-        height: 40px;
-        width: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .title-bar-buttons div:hover button {
-        background-color: var(--accented-background-color) !important;
-    }
-
-    .title-bar-buttons div {
-        display: inline-block;
-        height: 40px;
-        width: 40px;
-    }
-
-    .title-bar-buttons .btn.focus, .title-bar-buttons .btn:focus {
-        box-shadow: none;
-    }
-    </style>
-
-    <!-- divs act as a hitbox for the buttons, making them clickable on corners -->
-    <div class="minimize-btn"><button class="btn bx bx-minus"></button></div>
-    <div class="maximize-btn"><button class="btn bx bx-checkbox"></button></div>
-    <div class="close-btn"><button class="btn bx bx-x"></button></div>
-</div>`;
-
-export default class TitleBarButtonsWidget extends BasicWidget {
-    doRender() {
-        if (!utils.isElectron() || options.is("nativeTitleBarVisible")) {
-            return (this.$widget = $("<div>"));
-        }
-
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        const $minimizeBtn = this.$widget.find(".minimize-btn");
-        const $maximizeBtn = this.$widget.find(".maximize-btn");
-        const $closeBtn = this.$widget.find(".close-btn");
-
-        $minimizeBtn.on("click", () => {
-            $minimizeBtn.trigger("blur");
-            const remote = utils.dynamicRequire("@electron/remote");
-            remote.BrowserWindow.getFocusedWindow().minimize();
-        });
-
-        $maximizeBtn.on("click", () => {
-            $maximizeBtn.trigger("blur");
-            const remote = utils.dynamicRequire("@electron/remote");
-            const focusedWindow = remote.BrowserWindow.getFocusedWindow();
-
-            if (focusedWindow.isMaximized()) {
-                focusedWindow.unmaximize();
-            } else {
-                focusedWindow.maximize();
-            }
-        });
-
-        $closeBtn.on("click", () => {
-            $closeBtn.trigger("blur");
-            const remote = utils.dynamicRequire("@electron/remote");
-            remote.BrowserWindow.getFocusedWindow().close();
-        });
-    }
-}

apps/client/src/widgets/title_bar_buttons.tsx

@@ -0,0 +1,63 @@
+import { dynamicRequire, isElectron } from "../services/utils";
+import { useTriliumOption } from "./react/hooks";
+import "./title_bar_buttons.css";
+import type { BrowserWindow } from "electron";
+
+interface TitleBarButtonProps {
+    className: string;
+    icon: string;
+    onClick: (context: {
+        window: BrowserWindow
+    }) => void;
+}
+
+export default function TitleBarButtons() {
+    const [ nativeTitleBarVisible ] = useTriliumOption("nativeTitleBarVisible");
+    const isEnabled = (isElectron() && nativeTitleBarVisible);
+
+    return (
+        <div className="title-bar-buttons">
+            {isEnabled && (
+                <>
+                    <TitleBarButton
+                        className="minimize-btn"
+                        icon="bx bx-minus"
+                        onClick={({ window }) => window.minimize()}
+                    />
+
+                    <TitleBarButton
+                        className="maximize-btn"
+                        icon="bx bx-checkbox"
+                        onClick={({ window }) => {
+                            if (window.isMaximized()) {
+                                window.unmaximize();
+                            } else {
+                                window.maximize();
+                            }
+                        }}
+                    />
+
+                    <TitleBarButton
+                        className="close-btn"
+                        icon="bx bx-x"
+                        onClick={({ window }) => window.close()}
+                    />
+                </>
+            )}
+        </div>
+    )
+}
+
+function TitleBarButton({ className, icon, onClick }: TitleBarButtonProps) {
+    // divs act as a hitbox for the buttons, making them clickable on corners
+    return (
+        <div className={className}>
+            <button className={`btn ${icon}`} onClick={() => {
+                const remote = dynamicRequire("@electron/remote");
+                const focusedWindow = remote.BrowserWindow.getFocusedWindow();
+                if (!focusedWindow) return;
+                onClick({ window: focusedWindow });
+            }} />
+        </div>
+    );
+}