feat(react/widgets): port left pane toggle

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");

apps/client/src/widgets/buttons/left_pane_toggle.ts

@@ -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();
-    }
-}

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" )}
+        />
+    )
+}

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]);