From d579e39b40b1e5339f72a38c7ff236de1581a8ed Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 29 Aug 2025 21:17:30 +0300
Subject: [PATCH] feat(react/widgets): port mobile detail menu

---
 apps/client/src/layouts/mobile_layout.tsx     |  4 +-
 .../mobile_widgets/mobile_detail_menu.ts      | 64 -------------------
 .../mobile_widgets/mobile_detail_menu.tsx     | 57 +++++++++++++++++
 3 files changed, 59 insertions(+), 66 deletions(-)
 delete mode 100644 apps/client/src/widgets/mobile_widgets/mobile_detail_menu.ts
 create mode 100644 apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx

diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 4bfddc3a6..a1dd88e17 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 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";
 import NoteListWidget from "../widgets/note_list.js";
@@ -23,6 +22,7 @@ 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";
+import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 
 const MOBILE_CSS = `
 <style>
@@ -141,7 +141,7 @@ export default class MobileLayout {
                                     .css("align-items", "center")
                                     .child(<ToggleSidebarButton />)
                                     .child(<NoteTitleWidget />)
-                                    .child(new MobileDetailMenuWidget(true).contentSized())
+                                    .child(<MobileDetailMenu />)
                             )
                             .child(new SharedInfoWidget())
                             .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
diff --git a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.ts b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.ts
deleted file mode 100644
index 434737641..000000000
--- a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import BasicWidget from "../basic_widget.js";
-import appContext from "../../components/app_context.js";
-import contextMenu from "../../menus/context_menu.js";
-import noteCreateService from "../../services/note_create.js";
-import branchService from "../../services/branches.js";
-import treeService from "../../services/tree.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`<button type="button" class="action-button bx"></button>`;
-
-class MobileDetailMenuWidget extends BasicWidget {
-    private isHorizontalLayout: boolean;
-
-    constructor(isHorizontalLayout: boolean) {
-        super();
-        this.isHorizontalLayout = isHorizontalLayout;
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$widget.addClass(this.isHorizontalLayout ? "bx-dots-vertical-rounded" : "bx-menu");
-
-        this.$widget.on("click", async (e) => {
-            const note = appContext.tabManager.getActiveContextNote();
-
-            contextMenu.show<"insertChildNote" | "delete" | "showRevisions">({
-                x: e.pageX,
-                y: e.pageY,
-                items: [
-                    { title: t("mobile_detail_menu.insert_child_note"), command: "insertChildNote", uiIcon: "bx bx-plus", enabled: note?.type !== "search" },
-                    { title: t("mobile_detail_menu.delete_this_note"), command: "delete", uiIcon: "bx bx-trash", enabled: note?.noteId !== "root" },
-                    { title: "----" },
-                    { title: "Note revisions", command: "showRevisions", uiIcon: "bx bx-history" }
-                ],
-                selectMenuItemHandler: async ({ command }) => {
-                    if (command === "insertChildNote") {
-                        noteCreateService.createNote(appContext.tabManager.getActiveContextNotePath() ?? undefined);
-                    } else if (command === "delete") {
-                        const notePath = appContext.tabManager.getActiveContextNotePath();
-                        if (!notePath) {
-                            throw new Error("Cannot get note path to delete.");
-                        }
-
-                        const branchId = await treeService.getBranchIdFromUrl(notePath);
-
-                        if (!branchId) {
-                            throw new Error(t("mobile_detail_menu.error_cannot_get_branch_id", { notePath }));
-                        }
-
-                        if (await branchService.deleteNotes([branchId])) {
-                            this.triggerCommand("setActiveScreen", { screen: "tree" });
-                        }
-                    } else if (command) {
-                        this.triggerCommand(command);
-                    }
-                },
-                forcePositionOnMobile: true
-            });
-        });
-    }
-}
-
-export default MobileDetailMenuWidget;
diff --git a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
new file mode 100644
index 000000000..596a70300
--- /dev/null
+++ b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
@@ -0,0 +1,57 @@
+import { useContext } from "preact/hooks";
+import appContext from "../../components/app_context";
+import contextMenu from "../../menus/context_menu";
+import branches from "../../services/branches";
+import { t } from "../../services/i18n";
+import note_create from "../../services/note_create";
+import tree from "../../services/tree";
+import ActionButton from "../react/ActionButton";
+import { ParentComponent } from "../react/react_utils";
+
+export default function MobileDetailMenu() {
+    const parentComponent = useContext(ParentComponent);
+
+    return (
+        <ActionButton
+            icon="bx bx-dots-vertical-rounded"
+            text=""
+            onClick={(e) => {
+                const note = appContext.tabManager.getActiveContextNote();
+
+                contextMenu.show<"insertChildNote" | "delete" | "showRevisions">({
+                    x: e.pageX,
+                    y: e.pageY,
+                    items: [
+                        { title: t("mobile_detail_menu.insert_child_note"), command: "insertChildNote", uiIcon: "bx bx-plus", enabled: note?.type !== "search" },
+                        { title: t("mobile_detail_menu.delete_this_note"), command: "delete", uiIcon: "bx bx-trash", enabled: note?.noteId !== "root" },
+                        { title: "----" },
+                        { title: "Note revisions", command: "showRevisions", uiIcon: "bx bx-history" }
+                    ],
+                    selectMenuItemHandler: async ({ command }) => {
+                        if (command === "insertChildNote") {
+                            note_create.createNote(appContext.tabManager.getActiveContextNotePath() ?? undefined);
+                        } else if (command === "delete") {
+                            const notePath = appContext.tabManager.getActiveContextNotePath();
+                            if (!notePath) {
+                                throw new Error("Cannot get note path to delete.");
+                            }
+
+                            const branchId = await tree.getBranchIdFromUrl(notePath);
+
+                            if (!branchId) {
+                                throw new Error(t("mobile_detail_menu.error_cannot_get_branch_id", { notePath }));
+                            }
+
+                            if (await branches.deleteNotes([branchId]) && parentComponent) {
+                                parentComponent.triggerCommand("setActiveScreen", { screen: "tree" });
+                            }
+                        } else if (command && parentComponent) {
+                            parentComponent.triggerCommand(command);
+                        }
+                    },
+                    forcePositionOnMobile: true
+                });
+            }}
+        />
+    )
+}