Make each part of the note path clickable.

Author: SiriusXT

src/public/app/widgets/ribbon_widgets/note_paths.ts

@@ -19,15 +19,15 @@ const TPL = /*html*/`
         margin-top: 10px;
     }
 
-    .note-path-list .path-current {
+    .note-path-list .path-current a {
         font-weight: bold;
     }
 
-    .note-path-list .path-archived {
+    .note-path-list .path-archived a {
         color: var(--muted-text-color) !important;
     }
 
-    .note-path-list .path-search {
+    .note-path-list .path-search a {
         font-style: italic;
     }
     </style>
@@ -72,7 +72,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
         this.$notePathList.empty();
 
         if (!this.note || this.noteId === "root") {
-            this.$notePathList.empty().append(await this.getRenderedPath("root"));
+            this.$notePathList.empty().append(await this.getRenderedPath(["root"]));
 
             return;
         }
@@ -88,50 +88,62 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
         const renderedPaths = [];
 
         for (const notePathRecord of sortedNotePaths) {
-            const notePath = notePathRecord.notePath.join("/");
+            const notePath = notePathRecord.notePath;
 
             renderedPaths.push(await this.getRenderedPath(notePath, notePathRecord));
         }
 
         this.$notePathList.empty().append(...renderedPaths);
     }
 
-    async getRenderedPath(notePath: string, notePathRecord: NotePathRecord | null = null) {
-        const title = await treeService.getNotePathTitle(notePath);
-
-        const $noteLink = await linkService.createLink(notePath, { title });
-
-        $noteLink.find("a").addClass("no-tooltip-preview tn-link");
+    async getRenderedPath(notePath: string[], notePathRecord: NotePathRecord | null = null) {
+        const $pathItem = $("<li>");
+        const pathSegments: string[] = [];
+        const lastIndex = notePath.length - 1;
+        
+        for (let i = 0; i < notePath.length; i++) {
+            const noteId = notePath[i];
+            pathSegments.push(noteId);
+            const title = await treeService.getNoteTitle(noteId);
+            const $noteLink = await linkService.createLink(pathSegments.join("/"), { title });
+
+            $noteLink.find("a").addClass("no-tooltip-preview tn-link");
+            $pathItem.append($noteLink);
+            
+            if (i != lastIndex) {
+                $pathItem.append(" / ");
+            }
+        }
 
         const icons = [];
 
-        if (this.notePath === notePath) {
-            $noteLink.addClass("path-current");
+        if (this.notePath === notePath.join("/")) {
+            $pathItem.addClass("path-current");
         }
 
         if (!notePathRecord || notePathRecord.isInHoistedSubTree) {
-            $noteLink.addClass("path-in-hoisted-subtree");
+            $pathItem.addClass("path-in-hoisted-subtree");
         } else {
             icons.push(`<span class="bx bx-trending-up" title="${t("note_paths.outside_hoisted")}"></span>`);
         }
 
         if (notePathRecord?.isArchived) {
-            $noteLink.addClass("path-archived");
+            $pathItem.addClass("path-archived");
 
             icons.push(`<span class="bx bx-archive" title="${t("note_paths.archived")}"></span>`);
         }
 
         if (notePathRecord?.isSearch) {
-            $noteLink.addClass("path-search");
+            $pathItem.addClass("path-search");
 
             icons.push(`<span class="bx bx-search" title="${t("note_paths.search")}"></span>`);
         }
 
         if (icons.length > 0) {
-            $noteLink.append(` ${icons.join(" ")}`);
+            $pathItem.append(` ${icons.join(" ")}`);
         }
 
-        return $("<li>").append($noteLink);
+        return $pathItem;
     }
 
     entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {