Tweak note paths (#8055)

apps/client/src/widgets/layout/StatusBar.css

@@ -87,9 +87,62 @@
                 padding: 0.5em;
             }
 
+            .note-path-intro {
+                color: var(--muted-text-color);
+            }
+
             .note-path-list {
-                margin: 1em;
+                margin: 12px 0;
                 padding: 0;
+                list-style: none;
+
+                li {
+                    --border-radius: 6px;
+                    
+                    position: relative;
+                    background: var(--card-background-color);
+                    padding: 8px 20px 8px 25px;
+
+                    &:first-child {
+                        border-radius: var(--border-radius) var(--border-radius) 0 0;
+                    }
+
+                    &:last-child {
+                        border-radius: 0 0 var(--border-radius) var(--border-radius);
+                    }
+
+                    & + li {
+                        margin-top: 2px;
+                    }
+
+                    &.path-current::before {
+                        position: absolute;
+                        display: flex;
+                        justify-content: flex-end;
+                        align-items: center;
+                        content: "\ee8f";
+                        top: 0;
+                        left: 0;
+                        width: 20px;
+                        bottom: 0;
+                        font-family: "boxicons";
+                        font-size: .85em;
+                        color: var(--menu-item-icon-color);
+                    }
+                }
+
+                a {
+                    margin-inline: 2px;
+                    padding-inline: 2px;
+                    color: currentColor;
+                    font-weight: normal;
+                    text-decoration: none;
+
+                    &.basename {
+                        color: var(--muted-text-color);
+                    }
+                }
+
             }
         }
 

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

@@ -1,15 +1,19 @@
 import { ComponentChild } from "preact";
+import { CommandNames } from "../../components/app_context";
 
 interface LinkButtonProps {
-    onClick: () => void;
+    onClick?: () => void;
     text: ComponentChild;
+    triggerCommand?: CommandNames;
 }
 
-export default function LinkButton({ onClick, text }: LinkButtonProps) {
+export default function LinkButton({ onClick, text, triggerCommand }: LinkButtonProps) {
     return (
-        <a class="tn-link" href="javascript:" onClick={(e) => {
+        <a class="tn-link" href="#"
+           data-trigger-command={triggerCommand}
+           onClick={(e) => {
                 e.preventDefault();
-            onClick();
+                onClick?.();
            }}>
             {text}
         </a>

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

@@ -3,11 +3,13 @@ import { useEffect, useMemo, useState } from "preact/hooks";
 import FNote, { NotePathRecord } from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree";
-import Button from "../react/Button";
 import { useTriliumEvent } from "../react/hooks";
 import NoteLink from "../react/NoteLink";
 import { joinElements } from "../react/react_utils";
 import { TabContext } from "./ribbon-interface";
+import LinkButton from "../react/LinkButton";
+import clsx from "clsx";
+
 
 export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) {
     const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId);
@@ -35,9 +37,9 @@ export function NotePathsWidget({ sortedNotePaths, currentNotePath }: {
                     )) : undefined}
                 </ul>
 
-                <Button
+                <LinkButton
-                    triggerCommand="cloneNoteIdsTo"
                     text={t("note_paths.clone_button")}
+                    triggerCommand="cloneNoteIdsTo"
                 />
             </>
         </div>
@@ -108,12 +110,15 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
 
     return (
         <li class={classes}>
-            {joinElements(fullNotePaths.map(notePath => (
+            {joinElements(fullNotePaths.map((notePath, index, arr) => (
-                <NoteLink key={notePath} notePath={notePath} noPreview />
+                <NoteLink key={notePath}
+                          className={clsx({"basename": (index === arr.length - 1)})}
+                          notePath={notePath}
+                          noPreview />
             )), NOTE_PATH_TITLE_SEPARATOR)}
 
             {icons.map(({ icon, title }) => (
-                <span key={title} class={icon} title={title} />
+                <i key={title} class={icon} title={title} />
             ))}
         </li>
     );