From 86365ebd448b5f9d22c28c0ae0ecfb298cb9de26 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 30 Aug 2025 10:29:03 +0300
Subject: [PATCH] feat(react/widgets): port left pane toggle

---
 apps/client/src/layouts/desktop_layout.tsx    |  5 ++-
 .../src/widgets/buttons/left_pane_toggle.ts   | 43 -------------------
 .../src/widgets/buttons/left_pane_toggle.tsx  | 29 +++++++++++++
 .../client/src/widgets/react/ActionButton.tsx |  2 +-
 4 files changed, 33 insertions(+), 46 deletions(-)
 delete mode 100644 apps/client/src/widgets/buttons/left_pane_toggle.ts
 create mode 100644 apps/client/src/widgets/buttons/left_pane_toggle.tsx

diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index 8ff8fc6d5..fd2d6a5c4 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -42,6 +42,7 @@ 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";
+import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
 
 export default class DesktopLayout {
 
@@ -76,7 +77,7 @@ export default class DesktopLayout {
                 new FlexContainer("row")
                     .class("tab-row-container")
                     .child(new FlexContainer("row").id("tab-row-left-spacer"))
-                    .optChild(launcherPaneIsHorizontal, new LeftPaneToggleWidget(true))
+                    .optChild(launcherPaneIsHorizontal, <LeftPaneToggle isHorizontalLayout={true} />)
                     .child(new TabRowWidget().class("full-width"))
                     .optChild(customTitleBarButtons, <TitleBarButtons />)
                     .css("height", "40px")
@@ -187,7 +188,7 @@ export default class DesktopLayout {
                 .class("vertical")
                 .child(<GlobalMenu isHorizontalLayout={false} />)
                 .child(new LauncherContainer(false))
-                .child(new LeftPaneToggleWidget(false));
+                .child(<LeftPaneToggle isHorizontalLayout={false} />);
         }
 
         launcherPane.id("launcher-pane");
diff --git a/apps/client/src/widgets/buttons/left_pane_toggle.ts b/apps/client/src/widgets/buttons/left_pane_toggle.ts
deleted file mode 100644
index 22a902622..000000000
--- a/apps/client/src/widgets/buttons/left_pane_toggle.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import options from "../../services/options.js";
-import splitService from "../../services/resizer.js";
-import CommandButtonWidget from "./command_button.js";
-import { t } from "../../services/i18n.js";
-import type { EventData } from "../../components/app_context.js";
-
-export default class LeftPaneToggleWidget extends CommandButtonWidget {
-    private currentLeftPaneVisible: boolean;
-
-    constructor(isHorizontalLayout: boolean) {
-        super();
-
-        this.currentLeftPaneVisible = options.is("leftPaneVisible");
-
-        this.class(isHorizontalLayout ? "toggle-button" : "launcher-button");
-
-        this.settings.icon = () => {
-            if (options.get("layoutOrientation") === "horizontal") {
-                return "bx-sidebar";
-            }
-
-            return this.currentLeftPaneVisible ? "bx-chevrons-left" : "bx-chevrons-right";
-        };
-
-        this.settings.title = () => (this.currentLeftPaneVisible ? t("left_pane_toggle.hide_panel") : t("left_pane_toggle.show_panel"));
-
-        this.settings.command = () => (this.currentLeftPaneVisible ? "hideLeftPane" : "showLeftPane");
-
-        if (isHorizontalLayout) {
-            this.settings.titlePlacement = "bottom";
-        }
-    }
-
-    refreshIcon() {
-        super.refreshIcon();
-        splitService.setupLeftPaneResizer(this.currentLeftPaneVisible);
-    }
-    
-    setLeftPaneVisibilityEvent({ leftPaneVisible }: EventData<"setLeftPaneVisibility">) {
-        this.currentLeftPaneVisible = leftPaneVisible ?? !this.currentLeftPaneVisible;
-        this.refreshIcon();
-    }
-}
diff --git a/apps/client/src/widgets/buttons/left_pane_toggle.tsx b/apps/client/src/widgets/buttons/left_pane_toggle.tsx
new file mode 100644
index 000000000..f6c4b3ab8
--- /dev/null
+++ b/apps/client/src/widgets/buttons/left_pane_toggle.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "preact/hooks";
+import ActionButton from "../react/ActionButton";
+import options from "../../services/options";
+import { t } from "../../services/i18n";
+import { useTriliumEvent } from "../react/hooks";
+import resizer from "../../services/resizer";
+
+export default function LeftPaneToggle({ isHorizontalLayout }: { isHorizontalLayout: boolean }) {
+    const [ currentLeftPaneVisible, setCurrentLeftPaneVisible ] = useState(options.is("leftPaneVisible"));
+
+    useTriliumEvent("setLeftPaneVisibility", ({ leftPaneVisible }) => {
+        setCurrentLeftPaneVisible(leftPaneVisible ?? !currentLeftPaneVisible);
+    });
+
+    useEffect(() => {
+        resizer.setupLeftPaneResizer(currentLeftPaneVisible);
+    }, [ currentLeftPaneVisible ]);
+
+    return (
+        <ActionButton
+            className={`${isHorizontalLayout ? "toggle-button" : "launcher-button"}`}
+            text={currentLeftPaneVisible ? t("left_pane_toggle.hide_panel") : t("left_pane_toggle.show_panel")}
+            triggerCommand={currentLeftPaneVisible ? "hideLeftPane" : "showLeftPane"}
+            icon={isHorizontalLayout
+                ? "bx bx-sidebar"
+                : (currentLeftPaneVisible ? "bx bx-chevrons-left" : "bx bx-chevrons-right" )}
+        />
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx
index f12d6b286..5e6f3266b 100644
--- a/apps/client/src/widgets/react/ActionButton.tsx
+++ b/apps/client/src/widgets/react/ActionButton.tsx
@@ -25,7 +25,7 @@ export default function ActionButton({ text, icon, className, onClick, triggerCo
     
     useEffect(() => {
         if (triggerCommand) {
-            keyboard_actions.getAction(triggerCommand).then(action => setKeyboardShortcut(action?.effectiveShortcuts));
+            keyboard_actions.getAction(triggerCommand, true).then(action => setKeyboardShortcut(action?.effectiveShortcuts));
         }
     }, [triggerCommand]);