feat(breadcrumb): add context menu on last item

apps/client/src/widgets/layout/Breadcrumb.tsx

@@ -4,6 +4,7 @@ import { useContext, useRef, useState } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";
 
 import appContext from "../../components/app_context";
+import Component from "../../components/component";
 import NoteContext from "../../components/note_context";
 import FNote from "../../entities/fnote";
 import contextMenu, { MenuItem } from "../../menus/context_menu";
@@ -33,6 +34,7 @@ const FINAL_ITEMS = 2;
 
 export default function Breadcrumb({ note, noteContext }: { note: FNote, noteContext: NoteContext }) {
     const notePath = buildNotePaths(noteContext);
+    const parentComponent = useContext(ParentComponent);
 
     return (
         <div className="breadcrumb">
@@ -40,7 +42,7 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon
                 <>
                     {notePath.slice(0, INITIAL_ITEMS).map((item, index) => (
                         <Fragment key={item}>
-                            <BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} />
+                            <BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} parentComponent={parentComponent} />
                             <BreadcrumbSeparator notePath={item} activeNotePath={notePath[index + 1]} noteContext={noteContext} />
                         </Fragment>
                     ))}
@@ -48,7 +50,7 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon
                     {notePath.slice(-FINAL_ITEMS).map((item, index) => (
                         <Fragment key={item}>
                             <BreadcrumbSeparator notePath={notePath[notePath.length - FINAL_ITEMS - (1 - index)]} activeNotePath={item} noteContext={noteContext} />
-                            <BreadcrumbItem index={notePath.length - FINAL_ITEMS + index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} />
+                            <BreadcrumbItem index={notePath.length - FINAL_ITEMS + index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} parentComponent={parentComponent} />
                         </Fragment>
                     ))}
                 </>
@@ -57,7 +59,7 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon
                     <Fragment key={item}>
                         {index === 0
                             ? <BreadcrumbRoot noteContext={noteContext} />
-                            : <BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} />
+                            : <BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} parentComponent={parentComponent} />
                         }
                         {(index < notePath.length - 1 || note?.hasChildren()) &&
                             <BreadcrumbSeparator notePath={item} activeNotePath={notePath[index + 1]} noteContext={noteContext} />}
@@ -121,7 +123,7 @@ function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
     );
 }
 
-function BreadcrumbLastItem({ notePath }: { notePath: string }) {
+function BreadcrumbLastItem({ notePath, parentComponent }: { notePath: string, parentComponent: Component | null }) {
     const linkRef = useRef<HTMLAnchorElement>(null);
     const noteId = notePath.split("/").at(-1);
     const [ note ] = useState(() => froca.getNoteFromCache(noteId!));
@@ -143,27 +145,127 @@ function BreadcrumbLastItem({ notePath }: { notePath: string }) {
                 const scrollingContainer = document.querySelector(`[data-ntx-id="${activeNtxId}"] .scrolling-container`);
                 scrollingContainer?.scrollTo({ top: 0, behavior: "smooth" });
             }}
+            onContextMenu={buildContextMenu(notePath, parentComponent)}
         >{title}</a>
     );
 }
 
-function BreadcrumbItem({ index, notePath, noteContext, notePathLength }: { index: number, notePathLength: number, notePath: string, noteContext: NoteContext | undefined }) {
+function BreadcrumbItem({ index, notePath, noteContext, notePathLength, parentComponent }: { index: number, notePathLength: number, notePath: string, noteContext: NoteContext | undefined, parentComponent: Component | null }) {
-    const parentComponent = useContext(ParentComponent);
-
     if (index === 0) {
         return <BreadcrumbRoot noteContext={noteContext} />;
     }
 
     if (index === notePathLength - 1) {
         return <>
-            <BreadcrumbLastItem notePath={notePath} />
+            <BreadcrumbLastItem notePath={notePath} parentComponent={parentComponent} />
         </>;
     }
 
     return <NoteLink
         notePath={notePath}
         noContextMenu
-        onContextMenu={async (e) => {
+        onContextMenu={buildContextMenu(notePath, parentComponent)}
+    />;
+}
+
+function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
+    return (
+        <Dropdown
+            text={<Icon icon="bx bx-chevron-right" />}
+            noSelectButtonStyle
+            buttonClassName="icon-action"
+            hideToggleArrow
+            dropdownOptions={{  popperConfig: { strategy: "fixed", placement: "top" } }}
+        >
+            <BreadcrumbSeparatorDropdownContent notePath={notePath} noteContext={noteContext} activeNotePath={activeNotePath} />
+        </Dropdown>
+    );
+}
+
+function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
+    const notePathComponents = notePath.split("/");
+    const parentNoteId = notePathComponents.at(-1);
+    const childNotes = useChildNotes(parentNoteId);
+
+    return (
+        <ul className="breadcrumb-child-list">
+            {childNotes.map((note) => {
+                if (note.noteId === "_hidden") return;
+
+                const childNotePath = `${notePath}/${note.noteId}`;
+                return <li key={note.noteId}>
+                    <FormListItem
+                        icon={note.getIcon()}
+                        onClick={() => noteContext?.setNote(childNotePath)}
+                    >
+                        {childNotePath !== activeNotePath
+                            ? <span>{note.title}</span>
+                            : <strong>{note.title}</strong>}
+                    </FormListItem>
+                </li>;
+            })}
+        </ul>
+    );
+}
+
+function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteContext: NoteContext | undefined }) {
+    return (
+        <Dropdown
+            text={<Icon icon="bx bx-dots-horizontal-rounded" />}
+            noSelectButtonStyle
+            buttonClassName="icon-action"
+            hideToggleArrow
+            dropdownOptions={{ popperConfig: { strategy: "fixed" } }}
+        >
+            <ul className="breadcrumb-child-list">
+                {items.map((notePath) => {
+                    const notePathComponents = notePath.split("/");
+                    const noteId = notePathComponents[notePathComponents.length - 1];
+                    const note = froca.getNoteFromCache(noteId);
+                    if (!note) return null;
+
+                    return <li key={note.noteId}>
+                        <FormListItem
+                            icon={note.getIcon()}
+                            onClick={() => noteContext?.setNote(notePath)}
+                        >
+                            <span>{note.title}</span>
+                        </FormListItem>
+                    </li>;
+                })}
+            </ul>
+        </Dropdown>
+    );
+}
+
+function buildNotePaths(noteContext: NoteContext) {
+    const notePathArray = noteContext.notePathArray;
+    if (!notePathArray) return [];
+
+    let prefix = "";
+    let output: string[] = [];
+    let pos = 0;
+    let hoistedNotePos = -1;
+    for (const notePath of notePathArray) {
+        if (noteContext.hoistedNoteId !== "root" && notePath === noteContext.hoistedNoteId) {
+            hoistedNotePos = pos;
+        }
+        output.push(`${prefix}${notePath}`);
+        prefix += `${notePath}/`;
+        pos++;
+    }
+
+    // When hoisted, display only the path starting with the hoisted note.
+    if (noteContext.hoistedNoteId !== "root" && hoistedNotePos > -1) {
+        output = output.slice(hoistedNotePos);
+    }
+
+    return output;
+}
+
+//#region Context menu
+function buildContextMenu(notePath: string, parentComponent: Component | null) {
+    return async (e: MouseEvent) => {
         e.preventDefault();
 
         const notePathComponents = notePath.split("/");
@@ -281,101 +383,6 @@ function BreadcrumbItem({ index, notePath, noteContext, notePathLength }: { inde
                 }
             },
         });
-        }}
+    };
-    />;
-}
-
-function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
-    return (
-        <Dropdown
-            text={<Icon icon="bx bx-chevron-right" />}
-            noSelectButtonStyle
-            buttonClassName="icon-action"
-            hideToggleArrow
-            dropdownOptions={{  popperConfig: { strategy: "fixed", placement: "top" } }}
-        >
-            <BreadcrumbSeparatorDropdownContent notePath={notePath} noteContext={noteContext} activeNotePath={activeNotePath} />
-        </Dropdown>
-    );
-}
-
-function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
-    const notePathComponents = notePath.split("/");
-    const parentNoteId = notePathComponents.at(-1);
-    const childNotes = useChildNotes(parentNoteId);
-
-    return (
-        <ul className="breadcrumb-child-list">
-            {childNotes.map((note) => {
-                if (note.noteId === "_hidden") return;
-
-                const childNotePath = `${notePath}/${note.noteId}`;
-                return <li key={note.noteId}>
-                    <FormListItem
-                        icon={note.getIcon()}
-                        onClick={() => noteContext?.setNote(childNotePath)}
-                    >
-                        {childNotePath !== activeNotePath
-                            ? <span>{note.title}</span>
-                            : <strong>{note.title}</strong>}
-                    </FormListItem>
-                </li>;
-            })}
-        </ul>
-    );
-}
-
-function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteContext: NoteContext | undefined }) {
-    return (
-        <Dropdown
-            text={<Icon icon="bx bx-dots-horizontal-rounded" />}
-            noSelectButtonStyle
-            buttonClassName="icon-action"
-            hideToggleArrow
-            dropdownOptions={{ popperConfig: { strategy: "fixed" } }}
-        >
-            <ul className="breadcrumb-child-list">
-                {items.map((notePath) => {
-                    const notePathComponents = notePath.split("/");
-                    const noteId = notePathComponents[notePathComponents.length - 1];
-                    const note = froca.getNoteFromCache(noteId);
-                    if (!note) return null;
-
-                    return <li key={note.noteId}>
-                        <FormListItem
-                            icon={note.getIcon()}
-                            onClick={() => noteContext?.setNote(notePath)}
-                        >
-                            <span>{note.title}</span>
-                        </FormListItem>
-                    </li>;
-                })}
-            </ul>
-        </Dropdown>
-    );
-}
-
-function buildNotePaths(noteContext: NoteContext) {
-    const notePathArray = noteContext.notePathArray;
-    if (!notePathArray) return [];
-
-    let prefix = "";
-    let output: string[] = [];
-    let pos = 0;
-    let hoistedNotePos = -1;
-    for (const notePath of notePathArray) {
-        if (noteContext.hoistedNoteId !== "root" && notePath === noteContext.hoistedNoteId) {
-            hoistedNotePos = pos;
-        }
-        output.push(`${prefix}${notePath}`);
-        prefix += `${notePath}/`;
-        pos++;
-    }
-
-    // When hoisted, display only the path starting with the hoisted note.
-    if (noteContext.hoistedNoteId !== "root" && hoistedNotePos > -1) {
-        output = output.slice(hoistedNotePos);
-    }
-
-    return output;
 }
+//#endregion