feat(react): port add_link

apps/client/src/widgets/react/Button.tsx

@@ -3,7 +3,7 @@ import { useRef } from "preact/hooks";
 
 interface ButtonProps {
     /** Reference to the button element. Mostly useful for requesting focus. */
-    buttonRef: RefObject<HTMLButtonElement>;
+    buttonRef?: RefObject<HTMLButtonElement>;
     text: string;
     className?: string;
     keyboardShortcut?: string;

apps/client/src/widgets/react/Modal.tsx

@@ -37,7 +37,7 @@ export default function Modal({ children, className, size, title, footer, onShow
                 }
             }
         });
-    }
+    }    
 
     const style: CSSProperties = {};
     if (maxWidth) {
@@ -51,7 +51,7 @@ export default function Modal({ children, className, size, title, footer, onShow
                     <div className="modal-header">
                         <h5 className="modal-title">{title}</h5>
                         {helpPageId && (
-                            <button className="help-button" type="button" data-in-app-help={helpPageId} title={t("branch_prefix.help_on_tree_prefix")}>?</button>
+                            <button className="help-button" type="button" data-in-app-help={helpPageId} title={t("modal.help_title")}>?</button>
                         )}
                         <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label={t("modal.close")}></button>
                     </div>

apps/client/src/widgets/react/NoteAutocomplete.tsx

@@ -0,0 +1,48 @@
+import { useRef } from "preact/hooks";
+import { t } from "../../services/i18n";
+import { use, useEffect } from "react";
+import note_autocomplete, { type Suggestion } from "../../services/note_autocomplete";
+
+interface NoteAutocompleteProps {    
+    text?: string;
+    allowExternalLinks?: boolean;
+    allowCreatingNotes?: boolean;
+    onChange?: (suggestion: Suggestion) => void;
+}
+
+export default function NoteAutocomplete({ text, allowCreatingNotes, allowExternalLinks, onChange }: NoteAutocompleteProps) {
+    const ref = useRef<HTMLInputElement>(null);
+    
+    useEffect(() => {
+        if (!ref.current) return;
+        const $autoComplete = $(ref.current);
+
+        note_autocomplete.initNoteAutocomplete($autoComplete, {
+            allowExternalLinks,
+            allowCreatingNotes
+        });
+        if (onChange) {
+            $autoComplete.on("autocomplete:noteselected", (_e, suggestion) => onChange(suggestion));
+            $autoComplete.on("autocomplete:externallinkselected", (_e, suggestion) => onChange(suggestion));
+        }        
+    }, [allowExternalLinks, allowCreatingNotes]);
+
+    useEffect(() => {
+        if (!ref.current) return;
+        if (text) {
+            const $autoComplete = $(ref.current);
+            note_autocomplete.setText($autoComplete, text);
+        } else {
+            ref.current.value = "";
+        }
+    }, [text]);
+
+    return (
+        <div className="input-group">
+            <input
+                ref={ref}
+                className="note-autocomplete form-control"
+                placeholder={t("add_link.search_note")} />
+        </div>
+    );
+}