From 09b12052f0e0ee2f3748c63ba4b0b640484811d5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 9 Aug 2025 18:45:06 +0300
Subject: [PATCH] feat(react/bulk_actions): port move note

---
 .../widgets/bulk_actions/note/move_note.ts    | 64 -------------------
 .../widgets/bulk_actions/note/move_note.tsx   | 52 +++++++++++++++
 2 files changed, 52 insertions(+), 64 deletions(-)
 delete mode 100644 apps/client/src/widgets/bulk_actions/note/move_note.ts
 create mode 100644 apps/client/src/widgets/bulk_actions/note/move_note.tsx

diff --git a/apps/client/src/widgets/bulk_actions/note/move_note.ts b/apps/client/src/widgets/bulk_actions/note/move_note.ts
deleted file mode 100644
index 9a75dbb53..000000000
--- a/apps/client/src/widgets/bulk_actions/note/move_note.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { t } from "../../../services/i18n.js";
-import SpacedUpdate from "../../../services/spaced_update.js";
-import AbstractBulkAction from "../abstract_bulk_action.js";
-import noteAutocompleteService from "../../../services/note_autocomplete.js";
-
-const TPL = /*html*/`
-<tr>
-    <td colspan="2">
-        <div style="display: flex; align-items: center">
-            <div style="margin-right: 10px;" class="text-nowrap">${t("move_note.move_note")}</div>
-
-            <div style="margin-right: 10px;" class="text-nowrap">${t("move_note.to")}</div>
-
-            <div class="input-group">
-                <input type="text" class="form-control target-parent-note" placeholder="${t("move_note.target_parent_note")}"/>
-            </div>
-        </div>
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-            <div class="dropdown-menu dropdown-menu-right p-4">
-                <p>${t("move_note.on_all_matched_notes")}:</p>
-
-                <ul style="margin-bottom: 0;">
-                    <li>${t("move_note.move_note_new_parent")}</li>
-                    <li>${t("move_note.clone_note_new_parent")}</li>
-                    <li>${t("move_note.nothing_will_happen")}</li>
-                </ul>
-            </div>
-        </div>
-
-        <span class="bx bx-x icon-action action-conf-del"></span>
-    </td>
-</tr>`;
-
-export default class MoveNoteBulkAction extends AbstractBulkAction {
-    static get actionName() {
-        return "moveNote";
-    }
-    static get actionTitle() {
-        return t("move_note.move_note");
-    }
-
-    doRender() {
-        const $action = $(TPL);
-
-        const $targetParentNote = $action.find(".target-parent-note");
-        noteAutocompleteService.initNoteAutocomplete($targetParentNote);
-        $targetParentNote.setNote(this.actionDef.targetParentNoteId);
-
-        $targetParentNote.on("autocomplete:closed", () => spacedUpdate.scheduleUpdate());
-
-        const spacedUpdate = new SpacedUpdate(async () => {
-            await this.saveAction({
-                targetParentNoteId: $targetParentNote.getSelectedNoteId()
-            });
-        }, 1000);
-
-        $targetParentNote.on("input", () => spacedUpdate.scheduleUpdate());
-
-        return $action;
-    }
-}
diff --git a/apps/client/src/widgets/bulk_actions/note/move_note.tsx b/apps/client/src/widgets/bulk_actions/note/move_note.tsx
new file mode 100644
index 000000000..677680bbc
--- /dev/null
+++ b/apps/client/src/widgets/bulk_actions/note/move_note.tsx
@@ -0,0 +1,52 @@
+import { t } from "../../../services/i18n.js";
+import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
+import BulkAction, { BulkActionText } from "../BulkAction.jsx";
+import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";
+import { useEffect, useState } from "preact/hooks";
+import { useSpacedUpdate } from "../../react/hooks.jsx";
+import { Suggestion } from "../../../services/note_autocomplete.js";
+
+function MoveNoteBulkActionComponent({ bulkAction, actionDef }: { bulkAction: AbstractBulkAction, actionDef: ActionDefinition }) {
+    const [ suggestion, setSuggestion ] = useState<Suggestion>();
+    const spacedUpdate = useSpacedUpdate(() => {
+        const noteId = suggestion?.notePath?.split("/")?.at(-1);
+        return bulkAction.saveAction({ targetParentNoteId: noteId })
+    });
+    useEffect(() => spacedUpdate.scheduleUpdate(), [ suggestion ]);
+
+    return (
+        <BulkAction
+            bulkAction={bulkAction}
+            label={t("move_note.move_note")}
+            helpText={<>
+                <p>${t("move_note.on_all_matched_notes")}:</p>
+
+                <ul style="margin-bottom: 0;">
+                    <li>${t("move_note.move_note_new_parent")}</li>
+                    <li>${t("move_note.clone_note_new_parent")}</li>
+                    <li>${t("move_note.nothing_will_happen")}</li>
+                </ul>
+            </>}
+        >
+            <BulkActionText text={t("move_note.to")} />
+
+            <NoteAutocomplete
+                placeholder={t("move_note.target_parent_note")}
+                onChange={setSuggestion}
+            />
+        </BulkAction>
+    )
+}
+
+export default class MoveNoteBulkAction extends AbstractBulkAction {
+    static get actionName() {
+        return "moveNote";
+    }
+    static get actionTitle() {
+        return t("move_note.move_note");
+    }
+
+    doRender() {
+        return <MoveNoteBulkActionComponent bulkAction={this} actionDef={this.actionDef} />
+    }
+}