feat(layout): integrate note map

apps/client/src/components/root_command_executor.ts

@@ -193,6 +193,22 @@ export default class RootCommandExecutor extends Component {
         appContext.triggerEvent("zenModeChanged", { isEnabled });
     }
 
+    async toggleRibbonTabNoteMapCommand() {
+        const { isExperimentalFeatureEnabled } = await import("../services/experimental_features.js");
+        const isNewLayout = isExperimentalFeatureEnabled("new-layout");
+        if (!isNewLayout) return;
+
+        const activeContext = appContext.tabManager.getActiveContext();
+        if (!activeContext) return;
+
+        const subContexts = activeContext.getSubContexts();
+        appContext.triggerCommand("openNewNoteSplit", {
+            ntxId: subContexts[subContexts.length - 1].ntxId,
+            notePath: activeContext.notePath,
+            viewScope: { viewMode: "note-map" }
+        });
+    }
+
     firstTabCommand() {
         this.#goToTab(1);
     }

apps/client/src/services/link.ts

@@ -27,7 +27,7 @@ async function getLinkIcon(noteId: string, viewMode: ViewMode | undefined) {
     return icon;
 }
 
-export type ViewMode = "default" | "source" | "attachments" | "contextual-help";
+export type ViewMode = "default" | "source" | "attachments" | "contextual-help" | "note-map";
 
 export interface ViewScope {
     /**

apps/client/src/services/utils.ts

@@ -460,7 +460,7 @@ export async function openInAppHelpFromUrl(inAppHelpPage: string) {
             notePath: targetNote,
             hoistedNoteId: "_help",
             viewScope
-        })
+        });
     } else {
         // There is already a help window open, make sure it opens on the right note.
         helpSubcontext.setNote(targetNote, { viewScope });

apps/client/src/translations/en/translation.json

@@ -694,7 +694,8 @@
     "convert_into_attachment_failed": "Converting note '{{title}}' failed.",
     "convert_into_attachment_successful": "Note '{{title}}' has been converted to attachment.",
     "convert_into_attachment_prompt": "Are you sure you want to convert note '{{title}}' into an attachment of the parent note?",
-    "print_pdf": "Export as PDF..."
+    "print_pdf": "Export as PDF...",
+    "note_map": "Note map"
   },
   "onclick_button": {
     "no_click_handler": "Button widget '{{componentId}}' has no defined click handler"

apps/client/src/widgets/NoteDetail.tsx

@@ -299,8 +299,10 @@ async function getWidgetType(note: FNote | null | undefined, noteContext: NoteCo
 
     if (noteContext?.viewScope?.viewMode === "source") {
         resultingType = "readOnlyCode";
-    } else if (noteContext?.viewScope && noteContext.viewScope.viewMode === "attachments") {
+    } else if (noteContext.viewScope?.viewMode === "attachments") {
         resultingType = noteContext.viewScope.attachmentId ? "attachmentDetail" : "attachmentList";
+    } else if (noteContext.viewScope?.viewMode === "note-map") {
+        resultingType = "noteMap";
     } else if (type === "text" && (await noteContext?.isReadOnly())) {
         resultingType = "readOnlyText";
     } else if ((type === "code" || type === "mermaid") && (await noteContext?.isReadOnly())) {

apps/client/src/widgets/ribbon/NoteActions.tsx

@@ -116,6 +116,7 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
             <FormDropdownDivider />
 
             <CommandItem command="showAttachments" icon="bx bx-paperclip" disabled={isInOptionsOrHelp} text={t("note_actions.note_attachments")} />
+            {isNewLayout && <CommandItem command="toggleRibbonTabNoteMap" icon="bx bxs-network-chart" disabled={isInOptionsOrHelp} text={t("note_actions.note_map")} />}
             {glob.isDev && <>
                 <FormDropdownDivider />
                 <DevelopmentActions note={note} noteContext={noteContext} />

apps/client/src/widgets/ribbon/Ribbon.tsx

@@ -67,7 +67,7 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr
     useTriliumEvents(eventsToListenTo, useCallback((e, toggleCommand) => {
         if (!computedTabs) return;
         const correspondingTab = computedTabs.find(tab => tab.toggleCommand === toggleCommand);
-        if (correspondingTab) {
+        if (correspondingTab?.shouldShow) {
             if (activeTabIndex !== correspondingTab.index) {
                 setActiveTabIndex(correspondingTab.index);
             } else {

apps/client/src/widgets/ribbon/RibbonDefinition.ts

@@ -119,7 +119,7 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
         title: t("note_map.title"),
         icon: "bx bxs-network-chart",
         content: NoteMapTab,
-        show: true,
+        show: !isNewLayout,
         toggleCommand: "toggleRibbonTabNoteMap"
     },
     {

apps/client/src/widgets/type_widgets/NoteMap.tsx

@@ -3,12 +3,15 @@ import NoteMapEl from "../note_map/NoteMap";
 import { useRef } from "preact/hooks";
 import "./NoteMap.css";
 
-export default function NoteMap({ note }: TypeWidgetProps) {
+export default function NoteMap({ note, noteContext }: TypeWidgetProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
     return (
         <div ref={containerRef}>
-            <NoteMapEl parentRef={containerRef} note={note} widgetMode="type" />
+            <NoteMapEl
+                parentRef={containerRef}
+                note={note}
+                widgetMode={noteContext?.viewScope?.viewMode === "note-map" ? "ribbon" : "type"} />
         </div>
     );
 }