From ec646809dd5b349e48d9ec6611845813b5417f71 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 29 Aug 2025 19:39:46 +0300
Subject: [PATCH] feat(react/widgets): port toggle sidebar

---
 apps/client/src/layouts/mobile_layout.tsx      |  4 ++--
 .../src/translations/en/translation.json       |  3 ++-
 .../mobile_widgets/toggle_sidebar_button.ts    | 18 ------------------
 .../mobile_widgets/toggle_sidebar_button.tsx   | 18 ++++++++++++++++++
 4 files changed, 22 insertions(+), 21 deletions(-)
 delete mode 100644 apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.ts
 create mode 100644 apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.tsx

diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index e80c605fe..4bfddc3a6 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -3,7 +3,6 @@ import NoteTitleWidget from "../widgets/note_title.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import ToggleSidebarButtonWidget from "../widgets/mobile_widgets/toggle_sidebar_button.js";
 import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
@@ -23,6 +22,7 @@ import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
 import { useNoteContext } from "../widgets/react/hooks.jsx";
 import FloatingButtons from "../widgets/FloatingButtons.jsx";
 import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
 
 const MOBILE_CSS = `
 <style>
@@ -139,7 +139,7 @@ export default class MobileLayout {
                                     .contentSized()
                                     .css("font-size", "larger")
                                     .css("align-items", "center")
-                                    .child(new ToggleSidebarButtonWidget().contentSized())
+                                    .child(<ToggleSidebarButton />)
                                     .child(<NoteTitleWidget />)
                                     .child(new MobileDetailMenuWidget(true).contentSized())
                             )
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 2162bce24..461baa957 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1682,7 +1682,8 @@
     "hoist-this-note-workspace": "Hoist this note (workspace)",
     "refresh-saved-search-results": "Refresh saved search results",
     "create-child-note": "Create child note",
-    "unhoist": "Unhoist"
+    "unhoist": "Unhoist",
+    "toggle-sidebar": "Toggle sidebar"
   },
   "title_bar_buttons": {
     "window-on-top": "Keep Window on Top"
diff --git a/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.ts b/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.ts
deleted file mode 100644
index b2a8039a1..000000000
--- a/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import BasicWidget from "../basic_widget.js";
-
-const TPL = /*html*/`
-<button type="button" class="action-button bx bx-sidebar"></button>`;
-
-class ToggleSidebarButtonWidget extends BasicWidget {
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$widget.on("click", () =>
-            this.triggerCommand("setActiveScreen", {
-                screen: "tree"
-            })
-        );
-    }
-}
-
-export default ToggleSidebarButtonWidget;
diff --git a/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.tsx b/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.tsx
new file mode 100644
index 000000000..d22f3df8c
--- /dev/null
+++ b/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.tsx
@@ -0,0 +1,18 @@
+import { useContext } from "preact/hooks";
+import ActionButton from "../react/ActionButton";
+import { ParentComponent } from "../react/react_utils";
+import { t } from "../../services/i18n";
+
+export default function ToggleSidebarButton() {
+    const parentComponent = useContext(ParentComponent);
+
+    return (
+        <ActionButton
+            icon="bx bx-sidebar"
+            text={t("note_tree.toggle-sidebar")}
+            onClick={() => parentComponent?.triggerCommand("setActiveScreen", {
+                screen: "tree"                
+            })}
+        />
+    )
+}