From 61df0f3d3140174a444e571446679b9ee369eda9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 13:16:14 +0200
Subject: [PATCH 01/17] feat(breadcrumb): trim path when hoisted

---
 apps/client/src/widgets/layout/Breadcrumb.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 5f0397c7e..085b92ef7 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -20,7 +20,7 @@ const INITIAL_ITEMS = 2;
 const FINAL_ITEMS = 2;
 
 export default function Breadcrumb({ note, noteContext }: { note: FNote, noteContext: NoteContext }) {
-    const notePath = buildNotePaths(noteContext?.notePathArray);
+    const notePath = buildNotePaths(noteContext);
 
     return (
         <div className="breadcrumb">
@@ -187,14 +187,27 @@ function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteCont
     );
 }
 
-function buildNotePaths(notePathArray: string[] | undefined) {
+function buildNotePaths(noteContext: NoteContext) {
+    const notePathArray = noteContext.notePathArray;
     if (!notePathArray) return [];
 
     let prefix = "";
-    const output: string[] = [];
+    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") {
+        output = output.slice(hoistedNotePos);
+    }
+
     return output;
 }

From 80b61a35a96b02e0941d0cef23ff2654b058d166 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 13:25:21 +0200
Subject: [PATCH 02/17] feat(breadcrumb): display correct icon for first note
 when hoisted

---
 apps/client/src/widgets/layout/Breadcrumb.tsx |   6 +-
 apps/client/src/widgets/react/hooks.tsx       | 104 ++++++++++++------
 2 files changed, 74 insertions(+), 36 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 085b92ef7..7278b403b 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -11,7 +11,7 @@ import froca from "../../services/froca";
 import ActionButton from "../react/ActionButton";
 import Dropdown from "../react/Dropdown";
 import { FormListItem } from "../react/FormList";
-import { useChildNotes, useNoteLabel, useNoteProperty } from "../react/hooks";
+import { useChildNotes, useNote, useNoteLabel, useNoteProperty } from "../react/hooks";
 import Icon from "../react/Icon";
 import NoteLink from "../react/NoteLink";
 
@@ -57,7 +57,7 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon
 }
 
 function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined }) {
-    const note = useMemo(() => froca.getNoteFromCache("root"), []);
+    const note = useNote(noteContext?.hoistedNoteId);
     useNoteLabel(note, "iconClass");
     const title = useNoteProperty(note, "title");
 
@@ -66,7 +66,7 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
             className="root-note"
             icon={note.getIcon()}
             text={title ?? ""}
-            onClick={() => noteContext?.setNote("root")}
+            onClick={() => noteContext?.setNote(note.noteId)}
             onContextMenu={(e) => {
                 e.preventDefault();
                 link_context_menu.openContextMenu(note.noteId, e);
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index 0b9546694..26b699e1e 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -1,29 +1,30 @@
-import { CSSProperties } from "preact/compat";
-import { DragData } from "../note_tree";
 import { FilterLabelsByType, KeyboardActionNames, OptionNames, RelationNames } from "@triliumnext/commons";
-import { MutableRef, useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
-import { NoteContextContext, ParentComponent, refToJQuerySelector } from "./react_utils";
-import { RefObject, VNode } from "preact";
 import { Tooltip } from "bootstrap";
-import { ViewMode, ViewScope } from "../../services/link";
+import Mark from "mark.js";
+import { RefObject, VNode } from "preact";
+import { CSSProperties } from "preact/compat";
+import { MutableRef, useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+
 import appContext, { EventData, EventNames } from "../../components/app_context";
-import attributes from "../../services/attributes";
-import BasicWidget, { ReactWrappedWidget } from "../basic_widget";
 import Component from "../../components/component";
+import NoteContext from "../../components/note_context";
 import FBlob from "../../entities/fblob";
 import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
+import froca from "../../services/froca";
 import keyboard_actions from "../../services/keyboard_actions";
-import Mark from "mark.js";
-import NoteContext from "../../components/note_context";
-import NoteContextAwareWidget from "../note_context_aware_widget";
+import { ViewScope } from "../../services/link";
 import options, { type OptionValue } from "../../services/options";
 import protected_session_holder from "../../services/protected_session_holder";
+import server from "../../services/server";
+import shortcuts, { Handler, removeIndividualBinding } from "../../services/shortcuts";
 import SpacedUpdate from "../../services/spaced_update";
 import toast, { ToastOptions } from "../../services/toast";
 import utils, { escapeRegExp, randomString, reloadFrontendApp } from "../../services/utils";
-import server from "../../services/server";
-import shortcuts, { Handler, removeIndividualBinding } from "../../services/shortcuts";
-import froca from "../../services/froca";
+import BasicWidget, { ReactWrappedWidget } from "../basic_widget";
+import NoteContextAwareWidget from "../note_context_aware_widget";
+import { DragData } from "../note_tree";
+import { NoteContextContext, ParentComponent, refToJQuerySelector } from "./react_utils";
 
 export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
     const parentComponent = useContext(ParentComponent);
@@ -42,7 +43,7 @@ export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler:
         for (const eventName of eventNames) {
             handlers.push({ eventName, callback: (data) => {
                 handler(data, eventName);
-            }})
+            }});
         }
 
         for (const { eventName, callback } of handlers) {
@@ -111,8 +112,8 @@ export function useEditorSpacedUpdate({ note, noteContext, getData, onContentCha
             await server.put(`notes/${note.noteId}/data`, data, parentComponent?.componentId);
 
             dataSaved?.(data);
-        }
-    }, [ note, getData, dataSaved ])
+        };
+    }, [ note, getData, dataSaved ]);
     const spacedUpdate = useSpacedUpdate(callback);
 
     // React to note/blob changes.
@@ -137,7 +138,7 @@ export function useEditorSpacedUpdate({ note, noteContext, getData, onContentCha
     useTriliumEvent("beforeNoteContextRemove", async ({ ntxIds }) => {
         if (!noteContext?.ntxId || !ntxIds.includes(noteContext.ntxId)) return;
         await spacedUpdate.updateNowIfNecessary();
-    })
+    });
 
     // Save if needed upon window/browser closing.
     useEffect(() => {
@@ -170,7 +171,7 @@ export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [st
             if (needsRefresh) {
                 reloadFrontendApp(`option change: ${name}`);
             }
-        }
+        };
     }, [ name, needsRefresh ]);
 
     useTriliumEvent("entitiesReloaded", useCallback(({ loadResults }) => {
@@ -178,14 +179,14 @@ export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [st
             const newValue = options.get(name);
             setValue(newValue);
         }
-     }, [ name, setValue ]));
+    }, [ name, setValue ]));
 
     useDebugValue(name);
 
     return [
         value,
         wrappedSetValue
-    ]
+    ];
 }
 
 /**
@@ -266,7 +267,7 @@ export function useTriliumOptions<T extends OptionNames>(...names: T[]) {
  * @returns a name with the given prefix and a random alpanumeric string appended to it.
  */
 export function useUniqueName(prefix?: string) {
-    return useMemo(() => (prefix ? prefix + "-" : "") + utils.randomString(10), [ prefix ]);
+    return useMemo(() => (prefix ? `${prefix  }-` : "") + utils.randomString(10), [ prefix ]);
 }
 
 export function useNoteContext() {
@@ -428,7 +429,7 @@ export function useNoteRelation(note: FNote | undefined | null, relationName: Re
 
     const setter = useCallback((value: string | undefined) => {
         if (note) {
-            attributes.setAttribute(note, "relation", relationName, value)
+            attributes.setAttribute(note, "relation", relationName, value);
         }
     }, [note]);
 
@@ -478,7 +479,7 @@ export function useNoteLabel(note: FNote | undefined | null, labelName: FilterLa
     const setter = useCallback((value: string | null | undefined) => {
         if (note) {
             if (value !== null) {
-                attributes.setLabel(note.noteId, labelName, value)
+                attributes.setLabel(note.noteId, labelName, value);
             } else {
                 attributes.removeOwnedLabelByName(note, labelName);
             }
@@ -537,7 +538,7 @@ export function useNoteLabelInt(note: FNote | undefined | null, labelName: Filte
     return [
         (value ? parseInt(value, 10) : undefined),
         (newValue) => setValue(String(newValue))
-    ]
+    ];
 }
 
 export function useNoteBlob(note: FNote | null | undefined, componentId?: string): FBlob | null | undefined {
@@ -554,7 +555,7 @@ export function useNoteBlob(note: FNote | null | undefined, componentId?: string
         }
     }
 
-    useEffect(() => { refresh() }, [ note?.noteId ]);
+    useEffect(() => { refresh(); }, [ note?.noteId ]);
     useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
         if (!note) return;
 
@@ -616,7 +617,7 @@ export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, {
 
     useDebugValue(widget);
 
-    return [ <div className={containerClassName} style={containerStyle} ref={ref} />, widget ]
+    return [ <div className={containerClassName} style={containerStyle} ref={ref} />, widget ];
 }
 
 /**
@@ -643,7 +644,7 @@ export function useElementSize(ref: RefObject<HTMLElement>) {
         return () => {
             resizeObserver.unobserve(element);
             resizeObserver.disconnect();
-        }
+        };
     }, [ ref ]);
 
     return size;
@@ -703,7 +704,7 @@ export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Toolti
     return { showTooltip, hideTooltip };
 }
 
-let tooltips = new Set<Tooltip>();
+const tooltips = new Set<Tooltip>();
 
 /**
  * Similar to {@link useTooltip}, but doesn't expose methods to imperatively hide or show the tooltip.
@@ -732,7 +733,7 @@ export function useStaticTooltip(elRef: RefObject<Element>, config?: Partial<Too
             // workaround for https://github.com/twbs/bootstrap/issues/37474
             (tooltip as any)._activeTrigger = {};
             (tooltip as any)._element = document.createElement('noscript'); // placeholder with no behavior
-        }
+        };
     }, [ elRef, config ]);
 }
 
@@ -775,7 +776,7 @@ export function useImperativeSearchHighlighlighting(highlightedTokens: string[]
     const highlightRegex = useMemo(() => {
         if (!highlightedTokens?.length) return null;
         const regex = highlightedTokens.map((token) => escapeRegExp(token)).join("|");
-        return new RegExp(regex, "gi")
+        return new RegExp(regex, "gi");
     }, [ highlightedTokens ]);
 
     return (el: HTMLElement | null | undefined) => {
@@ -842,7 +843,7 @@ export function useNoteTreeDrag(containerRef: MutableRef<HTMLElement | null | un
         container.addEventListener("dragenter", onDragEnter);
         container.addEventListener("dragover", onDragOver);
         container.addEventListener("drop", onDrop);
-        container.addEventListener("dragleave", onDragLeave)
+        container.addEventListener("dragleave", onDragLeave);
 
         return () => {
             container.removeEventListener("dragenter", onDragEnter);
@@ -878,7 +879,7 @@ export function useKeyboardShortcuts(scope: "code-detail" | "text-detail", conta
             for (const binding of bindings) {
                 removeIndividualBinding(binding);
             }
-        }
+        };
     }, [ scope, containerRef, parentComponent, ntxId ]);
 }
 
@@ -986,3 +987,40 @@ export function useLauncherVisibility(launchNoteId: string) {
 
     return isVisible;
 }
+
+export function useNote(noteId: string | null | undefined, silentNotFoundError = false) {
+    const [ note, setNote ] = useState(noteId ? froca.getNoteFromCache(noteId) : undefined);
+    const requestIdRef = useRef(0);
+
+    useEffect(() => {
+        if (!noteId) {
+            setNote(undefined);
+            return;
+        }
+
+        if (note?.noteId === noteId) {
+            return;
+        }
+
+        // Try to read from cache.
+        const cachedNote = froca.getNoteFromCache(noteId);
+        if (cachedNote) {
+            setNote(cachedNote);
+            return;
+        }
+
+        // Read it asynchronously.
+        const requestId = ++requestIdRef.current;
+        froca.getNote(noteId, silentNotFoundError).then(readNote => {
+            // Only update if this is the latest request.
+            if (readNote && requestId === requestIdRef.current) {
+                setNote(readNote);
+            }
+        });
+    }, [ note, noteId, silentNotFoundError ]);
+
+    if (note?.noteId === noteId) {
+        return note;
+    }
+    return undefined;
+}

From 441958028d19f2fdcfff40b29808459d2313a3e2 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 14:01:14 +0200
Subject: [PATCH 03/17] feat(breadcrumb): display workspace text

---
 apps/client/src/widgets/layout/Breadcrumb.css |  8 ++++++++
 apps/client/src/widgets/layout/Breadcrumb.tsx |  5 +++--
 apps/client/src/widgets/react/Button.tsx      | 13 ++++++-------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css
index d98b1ed91..55d393f34 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.css
+++ b/apps/client/src/widgets/layout/Breadcrumb.css
@@ -40,6 +40,14 @@
         padding: 0;
     }
 
+    .btn.root-note {
+        box-shadow: unset;
+        background: unset;
+        padding-inline: 0.5em;
+        color: inherit;
+        min-width: unset;
+    }
+
     .dropdown-item span,
     .dropdown-item strong,
     .breadcrumb-last-item {
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 7278b403b..e3d6cf419 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -9,6 +9,7 @@ import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
 import froca from "../../services/froca";
 import ActionButton from "../react/ActionButton";
+import Button from "../react/Button";
 import Dropdown from "../react/Dropdown";
 import { FormListItem } from "../react/FormList";
 import { useChildNotes, useNote, useNoteLabel, useNoteProperty } from "../react/hooks";
@@ -62,10 +63,10 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
     const title = useNoteProperty(note, "title");
 
     return (note &&
-        <ActionButton
+        <Button
             className="root-note"
             icon={note.getIcon()}
-            text={title ?? ""}
+            text={note.noteId !== "root" ? (title ?? "") : ""}
             onClick={() => noteContext?.setNote(note.noteId)}
             onContextMenu={(e) => {
                 e.preventDefault();
diff --git a/apps/client/src/widgets/react/Button.tsx b/apps/client/src/widgets/react/Button.tsx
index 6089f1709..8ba5bd465 100644
--- a/apps/client/src/widgets/react/Button.tsx
+++ b/apps/client/src/widgets/react/Button.tsx
@@ -1,11 +1,11 @@
-import type { ComponentChildren, RefObject } from "preact";
-import type { CSSProperties } from "preact/compat";
-import { useMemo } from "preact/hooks";
+import type { ComponentChildren, HTMLAttributes, RefObject } from "preact";
 import { memo } from "preact/compat";
+import { useMemo } from "preact/hooks";
+
 import { CommandNames } from "../../components/app_context";
 import Icon from "./Icon";
 
-export interface ButtonProps {
+export interface ButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "className" | "style" | "onContextMenu"> {
     name?: string;
     /** Reference to the button element. Mostly useful for requesting focus. */
     buttonRef?: RefObject<HTMLButtonElement>;
@@ -18,7 +18,6 @@ export interface ButtonProps {
     primary?: boolean;
     disabled?: boolean;
     size?: "normal" | "small" | "micro";
-    style?: CSSProperties;
     triggerCommand?: CommandNames;
     title?: string;
 }
@@ -78,7 +77,7 @@ export function ButtonGroup({ children }: { children: ComponentChildren }) {
         <div className="btn-group" role="group">
             {children}
         </div>
-    )
+    );
 }
 
 export function SplitButton({ text, icon, children, ...restProps }: {
@@ -103,7 +102,7 @@ export function SplitButton({ text, icon, children, ...restProps }: {
                 {children}
             </ul>
         </ButtonGroup>
-    )
+    );
 }
 
 export default Button;

From eb99352fff502bf2a4187152ca6c95156b9199b8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 15:29:53 +0200
Subject: [PATCH 04/17] Revert "feat(breadcrumb): display workspace text"

This reverts commit 441958028d19f2fdcfff40b29808459d2313a3e2.
---
 apps/client/src/widgets/layout/Breadcrumb.css |  8 --------
 apps/client/src/widgets/layout/Breadcrumb.tsx |  5 ++---
 apps/client/src/widgets/react/Button.tsx      | 13 +++++++------
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css
index 55d393f34..d98b1ed91 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.css
+++ b/apps/client/src/widgets/layout/Breadcrumb.css
@@ -40,14 +40,6 @@
         padding: 0;
     }
 
-    .btn.root-note {
-        box-shadow: unset;
-        background: unset;
-        padding-inline: 0.5em;
-        color: inherit;
-        min-width: unset;
-    }
-
     .dropdown-item span,
     .dropdown-item strong,
     .breadcrumb-last-item {
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index e3d6cf419..7278b403b 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -9,7 +9,6 @@ import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
 import froca from "../../services/froca";
 import ActionButton from "../react/ActionButton";
-import Button from "../react/Button";
 import Dropdown from "../react/Dropdown";
 import { FormListItem } from "../react/FormList";
 import { useChildNotes, useNote, useNoteLabel, useNoteProperty } from "../react/hooks";
@@ -63,10 +62,10 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
     const title = useNoteProperty(note, "title");
 
     return (note &&
-        <Button
+        <ActionButton
             className="root-note"
             icon={note.getIcon()}
-            text={note.noteId !== "root" ? (title ?? "") : ""}
+            text={title ?? ""}
             onClick={() => noteContext?.setNote(note.noteId)}
             onContextMenu={(e) => {
                 e.preventDefault();
diff --git a/apps/client/src/widgets/react/Button.tsx b/apps/client/src/widgets/react/Button.tsx
index 8ba5bd465..6089f1709 100644
--- a/apps/client/src/widgets/react/Button.tsx
+++ b/apps/client/src/widgets/react/Button.tsx
@@ -1,11 +1,11 @@
-import type { ComponentChildren, HTMLAttributes, RefObject } from "preact";
-import { memo } from "preact/compat";
+import type { ComponentChildren, RefObject } from "preact";
+import type { CSSProperties } from "preact/compat";
 import { useMemo } from "preact/hooks";
-
+import { memo } from "preact/compat";
 import { CommandNames } from "../../components/app_context";
 import Icon from "./Icon";
 
-export interface ButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "className" | "style" | "onContextMenu"> {
+export interface ButtonProps {
     name?: string;
     /** Reference to the button element. Mostly useful for requesting focus. */
     buttonRef?: RefObject<HTMLButtonElement>;
@@ -18,6 +18,7 @@ export interface ButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "cl
     primary?: boolean;
     disabled?: boolean;
     size?: "normal" | "small" | "micro";
+    style?: CSSProperties;
     triggerCommand?: CommandNames;
     title?: string;
 }
@@ -77,7 +78,7 @@ export function ButtonGroup({ children }: { children: ComponentChildren }) {
         <div className="btn-group" role="group">
             {children}
         </div>
-    );
+    )
 }
 
 export function SplitButton({ text, icon, children, ...restProps }: {
@@ -102,7 +103,7 @@ export function SplitButton({ text, icon, children, ...restProps }: {
                 {children}
             </ul>
         </ButtonGroup>
-    );
+    )
 }
 
 export default Button;

From c6854c84b9cac6b0155d8f2a457041cbafce272b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 15:49:43 +0200
Subject: [PATCH 05/17] feat(breadcrumb): use different approach for displaying
 workspace icon

---
 apps/client/src/widgets/layout/Breadcrumb.css |  4 ++
 apps/client/src/widgets/layout/Breadcrumb.tsx | 42 ++++++++++---------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css
index d98b1ed91..16e9ea2bc 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.css
+++ b/apps/client/src/widgets/layout/Breadcrumb.css
@@ -15,6 +15,10 @@
         align-items: center;
         min-width: 0;
 
+        .bx {
+            margin-inline: 6px;
+        }
+
         a {
             color: inherit;
             text-decoration: none;
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 7278b403b..fbda95391 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -57,32 +57,36 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon
 }
 
 function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined }) {
-    const note = useNote(noteContext?.hoistedNoteId);
-    useNoteLabel(note, "iconClass");
-    const title = useNoteProperty(note, "title");
+    const noteId = noteContext?.hoistedNoteId ?? "root";
 
-    return (note &&
-        <ActionButton
-            className="root-note"
-            icon={note.getIcon()}
-            text={title ?? ""}
-            onClick={() => noteContext?.setNote(note.noteId)}
-            onContextMenu={(e) => {
-                e.preventDefault();
-                link_context_menu.openContextMenu(note.noteId, e);
-            }}
-        />
-    );
-}
+    // Root note is icon only.
+    if (noteId === "root") {
+        const note = froca.getNoteFromCache("root");
+        return (note &&
+            <ActionButton
+                className="root-note"
+                icon={note.getIcon()}
+                text={""}
+                onClick={() => noteContext?.setNote(note.noteId)}
+                onContextMenu={(e) => {
+                    e.preventDefault();
+                    link_context_menu.openContextMenu(note.noteId, e);
+                }}
+            />
+        );
+    }
 
-function BreadcrumbLink({ notePath }: { notePath: string }) {
+    // Hoisted workspace shows both text and icon.
     return (
         <NoteLink
-            notePath={notePath}
+            notePath={noteId}
+            showNoteIcon
+            noPreview
         />
     );
 }
 
+
 function BreadcrumbLastItem({ notePath }: { notePath: string }) {
     const noteId = notePath.split("/").at(-1);
     const [ note ] = useState(() => froca.getNoteFromCache(noteId!));
@@ -114,7 +118,7 @@ function BreadcrumbItem({ index, notePath, noteContext, notePathLength }: { inde
         </>;
     }
 
-    return <BreadcrumbLink notePath={notePath} />;
+    return <NoteLink notePath={notePath} />;
 }
 
 function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {

From 83777d7ea0de5428eba833cc9af5271384c2441a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:02:31 +0200
Subject: [PATCH 06/17] feat(breadcrumb): unhoist badge

---
 .../src/translations/en/translation.json      |  4 +++
 apps/client/src/widgets/layout/Breadcrumb.css |  6 ++++
 apps/client/src/widgets/layout/Breadcrumb.tsx | 28 +++++++++++++------
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index e404651e6..2482503f8 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2144,6 +2144,10 @@
     "go-back": "Go back to previous note",
     "go-forward": "Go forward to next note"
   },
+  "breadcrumb": {
+    "hoisted_badge": "Hoisted",
+    "hoisted_badge_title": "Unhoist"
+  },
   "breadcrumb_badges": {
     "read_only_explicit": "Read-only",
     "read_only_explicit_description": "This note has been manually set to read-only.\nClick to edit it temporarily.",
diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css
index 16e9ea2bc..436b9cb0f 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.css
+++ b/apps/client/src/widgets/layout/Breadcrumb.css
@@ -8,6 +8,12 @@
     gap: 0.25em;
     flex-wrap: nowrap;
     overflow: hidden;
+    --badge-radius: 6px;
+
+    .badge-hoisted {
+        --color: var(--input-background-color);
+        color: var(--main-text-color);
+    }
 
     > span,
     > span > span {
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index fbda95391..dfcf2239d 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -1,6 +1,6 @@
 import "./Breadcrumb.css";
 
-import { useMemo, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";
 
 import appContext from "../../components/app_context";
@@ -8,10 +8,13 @@ import NoteContext from "../../components/note_context";
 import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
 import froca from "../../services/froca";
+import hoisted_note from "../../services/hoisted_note";
+import { t } from "../../services/i18n";
 import ActionButton from "../react/ActionButton";
+import { Badge } from "../react/Badge";
 import Dropdown from "../react/Dropdown";
 import { FormListItem } from "../react/FormList";
-import { useChildNotes, useNote, useNoteLabel, useNoteProperty } from "../react/hooks";
+import { useChildNotes, useNoteProperty } from "../react/hooks";
 import Icon from "../react/Icon";
 import NoteLink from "../react/NoteLink";
 
@@ -76,13 +79,22 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
         );
     }
 
-    // Hoisted workspace shows both text and icon.
+    // Hoisted workspace shows both text and icon and a way to exit easily out of the hoisting.
     return (
-        <NoteLink
-            notePath={noteId}
-            showNoteIcon
-            noPreview
-        />
+        <>
+            <Badge
+                className="badge-hoisted"
+                icon="bx bxs-chevrons-up"
+                text={t("breadcrumb.hoisted_badge")}
+                tooltip={t("breadcrumb.hoisted_badge_title")}
+                onClick={() => hoisted_note.unhoist()}
+            />
+            <NoteLink
+                notePath={noteId}
+                showNoteIcon
+                noPreview
+            />
+        </>
     );
 }
 

From af3883fdac99981d6d96ed6471addda018be412e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:20:17 +0200
Subject: [PATCH 07/17] feat(breadcrumb): react to hosted note ID change

---
 apps/client/src/widgets/react/hooks.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index 26b699e1e..0d8b16bbf 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -275,6 +275,7 @@ export function useNoteContext() {
     const [ noteContext, setNoteContext ] = useState<NoteContext | undefined>(noteContextContext ?? undefined);
     const [ notePath, setNotePath ] = useState<string | null | undefined>();
     const [ note, setNote ] = useState<FNote | null | undefined>();
+    const [ hoistedNoteId, setHoistedNoteId ] = useState(noteContext?.hoistedNoteId);
     const [ , setViewScope ] = useState<ViewScope>();
     const [ isReadOnlyTemporarilyDisabled, setIsReadOnlyTemporarilyDisabled ] = useState<boolean | null | undefined>(noteContext?.viewScope?.isReadOnly);
     const [ refreshCounter, setRefreshCounter ] = useState(0);
@@ -282,6 +283,7 @@ export function useNoteContext() {
     useEffect(() => {
         if (!noteContextContext) return;
         setNoteContext(noteContextContext);
+        setHoistedNoteId(noteContextContext.hoistedNoteId);
         setNote(noteContextContext.note);
         setNotePath(noteContextContext.notePath);
         setViewScope(noteContextContext.viewScope);
@@ -295,6 +297,7 @@ export function useNoteContext() {
     useTriliumEvents([ "setNoteContext", "activeContextChanged", "noteSwitchedAndActivated", "noteSwitched" ], ({ noteContext }) => {
         if (noteContextContext) return;
         setNoteContext(noteContext);
+        setHoistedNoteId(noteContext.hoistedNoteId);
         setNotePath(noteContext.notePath);
         setViewScope(noteContext.viewScope);
     });
@@ -312,6 +315,11 @@ export function useNoteContext() {
             setIsReadOnlyTemporarilyDisabled(eventNoteContext?.viewScope?.readOnlyTemporarilyDisabled);
         }
     });
+    useTriliumEvent("hoistedNoteChanged", ({ noteId, ntxId }) => {
+        if (ntxId === noteContext?.ntxId) {
+            setHoistedNoteId(noteId);
+        }
+    });
 
     const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
     useDebugValue(() => `notePath=${notePath}, ntxId=${noteContext?.ntxId}`);
@@ -320,7 +328,7 @@ export function useNoteContext() {
         note,
         noteId: noteContext?.note?.noteId,
         notePath: noteContext?.notePath,
-        hoistedNoteId: noteContext?.hoistedNoteId,
+        hoistedNoteId,
         ntxId: noteContext?.ntxId,
         viewScope: noteContext?.viewScope,
         componentId: parentComponent.componentId,
@@ -339,6 +347,7 @@ export function useActiveNoteContext() {
     const [ notePath, setNotePath ] = useState<string | null | undefined>();
     const [ note, setNote ] = useState<FNote | null | undefined>();
     const [ , setViewScope ] = useState<ViewScope>();
+    const [ hoistedNoteId, setHoistedNoteId ] = useState(noteContext?.hoistedNoteId);
     const [ isReadOnlyTemporarilyDisabled, setIsReadOnlyTemporarilyDisabled ] = useState<boolean | null | undefined>(noteContext?.viewScope?.isReadOnly);
     const [ refreshCounter, setRefreshCounter ] = useState(0);
 
@@ -355,6 +364,7 @@ export function useActiveNoteContext() {
     useTriliumEvents([ "setNoteContext", "activeContextChanged", "noteSwitchedAndActivated", "noteSwitched" ], () => {
         const noteContext = appContext.tabManager.getActiveContext() ?? undefined;
         setNoteContext(noteContext);
+        setHoistedNoteId(noteContext?.hoistedNoteId);
         setNotePath(noteContext?.notePath);
         setViewScope(noteContext?.viewScope);
     });
@@ -371,6 +381,11 @@ export function useActiveNoteContext() {
             setIsReadOnlyTemporarilyDisabled(eventNoteContext?.viewScope?.readOnlyTemporarilyDisabled);
         }
     });
+    useTriliumEvent("hoistedNoteChanged", ({ noteId, ntxId }) => {
+        if (ntxId === noteContext?.ntxId) {
+            setHoistedNoteId(noteId);
+        }
+    });
 
     const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
     useDebugValue(() => `notePath=${notePath}, ntxId=${noteContext?.ntxId}`);
@@ -379,7 +394,7 @@ export function useActiveNoteContext() {
         note,
         noteId: noteContext?.note?.noteId,
         notePath: noteContext?.notePath,
-        hoistedNoteId: noteContext?.hoistedNoteId,
+        hoistedNoteId,
         ntxId: noteContext?.ntxId,
         viewScope: noteContext?.viewScope,
         componentId: parentComponent.componentId,

From e2fac8ab05c19e52a56e12c606d7d22a0aaddb0b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:26:25 +0200
Subject: [PATCH 08/17] feat(breadcrumb): distinguish between workspace and
 hoisted notes

---
 .../src/translations/en/translation.json      |  3 +-
 apps/client/src/widgets/layout/Breadcrumb.tsx | 48 +++++++++++--------
 packages/commons/src/lib/attribute_names.ts   |  2 +
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 2482503f8..ec2d9a57f 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2146,7 +2146,8 @@
   },
   "breadcrumb": {
     "hoisted_badge": "Hoisted",
-    "hoisted_badge_title": "Unhoist"
+    "hoisted_badge_title": "Unhoist",
+    "workspace_badge": "Workspace"
   },
   "breadcrumb_badges": {
     "read_only_explicit": "Read-only",
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index dfcf2239d..0135cbb50 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -14,7 +14,7 @@ import ActionButton from "../react/ActionButton";
 import { Badge } from "../react/Badge";
 import Dropdown from "../react/Dropdown";
 import { FormListItem } from "../react/FormList";
-import { useChildNotes, useNoteProperty } from "../react/hooks";
+import { useChildNotes, useNote, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks";
 import Icon from "../react/Icon";
 import NoteLink from "../react/NoteLink";
 
@@ -61,31 +61,38 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon
 
 function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined }) {
     const noteId = noteContext?.hoistedNoteId ?? "root";
-
-    // Root note is icon only.
-    if (noteId === "root") {
-        const note = froca.getNoteFromCache("root");
-        return (note &&
-            <ActionButton
-                className="root-note"
-                icon={note.getIcon()}
-                text={""}
-                onClick={() => noteContext?.setNote(note.noteId)}
-                onContextMenu={(e) => {
-                    e.preventDefault();
-                    link_context_menu.openContextMenu(note.noteId, e);
-                }}
-            />
-        );
+    if (noteId !== "root") {
+        return <BreadcrumbHoistedNoteRoot noteId={noteId} />;
     }
 
+    // Root note is icon only.
+    const note = froca.getNoteFromCache("root");
+    return (note &&
+        <ActionButton
+            className="root-note"
+            icon={note.getIcon()}
+            text={""}
+            onClick={() => noteContext?.setNote(note.noteId)}
+            onContextMenu={(e) => {
+                e.preventDefault();
+                link_context_menu.openContextMenu(note.noteId, e);
+            }}
+        />
+    );
+
+}
+
+function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
+    const note = useNote(noteId);
+    const [ workspace ] = useNoteLabelBoolean(note, "workspace");
+
     // Hoisted workspace shows both text and icon and a way to exit easily out of the hoisting.
-    return (
+    return (note &&
         <>
             <Badge
                 className="badge-hoisted"
-                icon="bx bxs-chevrons-up"
-                text={t("breadcrumb.hoisted_badge")}
+                icon={workspace ? "bx bx-folder-open" : "bx bxs-chevrons-up"}
+                text={workspace ? t("breadcrumb.workspace_badge") : t("breadcrumb.hoisted_badge")}
                 tooltip={t("breadcrumb.hoisted_badge_title")}
                 onClick={() => hoisted_note.unhoist()}
             />
@@ -98,7 +105,6 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
     );
 }
 
-
 function BreadcrumbLastItem({ notePath }: { notePath: string }) {
     const noteId = notePath.split("/").at(-1);
     const [ note ] = useState(() => froca.getNoteFromCache(noteId!));
diff --git a/packages/commons/src/lib/attribute_names.ts b/packages/commons/src/lib/attribute_names.ts
index db1ffc9f2..afb45fcb3 100644
--- a/packages/commons/src/lib/attribute_names.ts
+++ b/packages/commons/src/lib/attribute_names.ts
@@ -4,6 +4,8 @@
 type Labels = {
     color: string;
     iconClass: string;
+    workspace: boolean;
+    workspaceTabBackgroundColor: string;
     workspaceIconClass: string;
     executeButton: boolean;
     executeDescription: string;

From 6d4e52c928e2841ef8ad5d3b7ee1a0c9ca9ccf51 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:31:43 +0200
Subject: [PATCH 09/17] feat(breadcrumb): prefer workspace icon class

---
 apps/client/src/widgets/layout/Breadcrumb.tsx |  6 ++++--
 apps/client/src/widgets/react/hooks.tsx       | 10 ++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 0135cbb50..11dfafa74 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -14,7 +14,7 @@ import ActionButton from "../react/ActionButton";
 import { Badge } from "../react/Badge";
 import Dropdown from "../react/Dropdown";
 import { FormListItem } from "../react/FormList";
-import { useChildNotes, useNote, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks";
+import { useChildNotes, useNote, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks";
 import Icon from "../react/Icon";
 import NoteLink from "../react/NoteLink";
 
@@ -84,14 +84,16 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
 
 function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
     const note = useNote(noteId);
+    const noteIcon = useNoteIcon(note);
     const [ workspace ] = useNoteLabelBoolean(note, "workspace");
+    const [ workspaceIconClass ] = useNoteLabel(note, "workspaceIconClass");
 
     // Hoisted workspace shows both text and icon and a way to exit easily out of the hoisting.
     return (note &&
         <>
             <Badge
                 className="badge-hoisted"
-                icon={workspace ? "bx bx-folder-open" : "bx bxs-chevrons-up"}
+                icon={workspace ? (workspaceIconClass || noteIcon) : "bx bxs-chevrons-up"}
                 text={workspace ? t("breadcrumb.workspace_badge") : t("breadcrumb.hoisted_badge")}
                 tooltip={t("breadcrumb.hoisted_badge_title")}
                 onClick={() => hoisted_note.unhoist()}
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index 0d8b16bbf..535a797f5 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -1039,3 +1039,13 @@ export function useNote(noteId: string | null | undefined, silentNotFoundError =
     }
     return undefined;
 }
+
+export function useNoteIcon(note: FNote | null | undefined) {
+    const [ icon, setIcon ] = useState(note?.getIcon());
+    const iconClass = useNoteLabel(note, "iconClass");
+    useEffect(() => {
+        setIcon(note?.getIcon());
+    }, [ note, iconClass ]);
+
+    return icon;
+}

From ca8e889e1eb3cc26567b91b05f1fc38cbb7c3a93 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:37:33 +0200
Subject: [PATCH 10/17] feat(breadcrumb): respect workspace color

---
 apps/client/src/widgets/layout/Breadcrumb.tsx |  6 ++++++
 apps/client/src/widgets/react/Badge.tsx       | 11 +++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 11dfafa74..e0f045d97 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -7,6 +7,7 @@ import appContext from "../../components/app_context";
 import NoteContext from "../../components/note_context";
 import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
+import { getReadableTextColor } from "../../services/css_class_manager";
 import froca from "../../services/froca";
 import hoisted_note from "../../services/hoisted_note";
 import { t } from "../../services/i18n";
@@ -87,6 +88,7 @@ function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
     const noteIcon = useNoteIcon(note);
     const [ workspace ] = useNoteLabelBoolean(note, "workspace");
     const [ workspaceIconClass ] = useNoteLabel(note, "workspaceIconClass");
+    const [ workspaceColor ] = useNoteLabel(note, "workspaceTabBackgroundColor");
 
     // Hoisted workspace shows both text and icon and a way to exit easily out of the hoisting.
     return (note &&
@@ -97,6 +99,10 @@ function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
                 text={workspace ? t("breadcrumb.workspace_badge") : t("breadcrumb.hoisted_badge")}
                 tooltip={t("breadcrumb.hoisted_badge_title")}
                 onClick={() => hoisted_note.unhoist()}
+                style={workspaceColor ? {
+                    "--color": workspaceColor,
+                    "color": getReadableTextColor(workspaceColor)
+                } : undefined}
             />
             <NoteLink
                 notePath={noteId}
diff --git a/apps/client/src/widgets/react/Badge.tsx b/apps/client/src/widgets/react/Badge.tsx
index a03e6b5fb..dea4158ca 100644
--- a/apps/client/src/widgets/react/Badge.tsx
+++ b/apps/client/src/widgets/react/Badge.tsx
@@ -1,7 +1,7 @@
 import "./Badge.css";
 
 import clsx from "clsx";
-import { ComponentChildren, MouseEventHandler } from "preact";
+import { ComponentChildren, HTMLAttributes } from "preact";
 import { useRef } from "preact/hooks";
 
 import Dropdown, { DropdownProps } from "./Dropdown";
@@ -13,12 +13,11 @@ interface SimpleBadgeProps {
     title: ComponentChildren;
 }
 
-interface BadgeProps {
+interface BadgeProps extends Pick<HTMLAttributes<HTMLDivElement>, "onClick" | "style"> {
     text?: string;
     icon?: string;
     className?: string;
     tooltip?: string;
-    onClick?: MouseEventHandler<HTMLDivElement>;
     href?: string;
 }
 
@@ -26,7 +25,7 @@ export default function SimpleBadge({ title, className }: SimpleBadgeProps) {
     return <span class={`badge ${className ?? ""}`}>{title}</span>;
 }
 
-export function Badge({ icon, className, text, tooltip, onClick, href }: BadgeProps) {
+export function Badge({ icon, className, text, tooltip, href, ...containerProps }: BadgeProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     useStaticTooltip(containerRef, {
         placement: "bottom",
@@ -44,8 +43,8 @@ export function Badge({ icon, className, text, tooltip, onClick, href }: BadgePr
     return (
         <div
             ref={containerRef}
-            className={clsx("ext-badge", className, { "clickable": !!onClick })}
-            onClick={onClick}
+            className={clsx("ext-badge", className, { "clickable": !!containerProps.onClick })}
+            {...containerProps}
         >
             {href ? <a href={href}>{content}</a> : <span>{content}</span>}
         </div>

From 41b7a295b98b569d5a28707de75afead1916ba27 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:40:36 +0200
Subject: [PATCH 11/17] feat(breadcrumb): add tooltip about jumping to top

---
 apps/client/src/translations/en/translation.json |  3 ++-
 apps/client/src/widgets/layout/Breadcrumb.tsx    | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index ec2d9a57f..991ee6711 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2147,7 +2147,8 @@
   "breadcrumb": {
     "hoisted_badge": "Hoisted",
     "hoisted_badge_title": "Unhoist",
-    "workspace_badge": "Workspace"
+    "workspace_badge": "Workspace",
+    "scroll_to_top_title": "Jump to the beginning of the note"
   },
   "breadcrumb_badges": {
     "read_only_explicit": "Read-only",
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index e0f045d97..511ed2de0 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -1,6 +1,6 @@
 import "./Breadcrumb.css";
 
-import { useState } from "preact/hooks";
+import { useRef, useState } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";
 
 import appContext from "../../components/app_context";
@@ -15,7 +15,7 @@ import ActionButton from "../react/ActionButton";
 import { Badge } from "../react/Badge";
 import Dropdown from "../react/Dropdown";
 import { FormListItem } from "../react/FormList";
-import { useChildNotes, useNote, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks";
+import { useChildNotes, useNote, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useStaticTooltip } from "../react/hooks";
 import Icon from "../react/Icon";
 import NoteLink from "../react/NoteLink";
 
@@ -114,14 +114,20 @@ function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
 }
 
 function BreadcrumbLastItem({ notePath }: { notePath: string }) {
+    const linkRef = useRef<HTMLAnchorElement>(null);
     const noteId = notePath.split("/").at(-1);
     const [ note ] = useState(() => froca.getNoteFromCache(noteId!));
     const title = useNoteProperty(note, "title");
+    useStaticTooltip(linkRef, {
+        placement: "top",
+        title: t("breadcrumb.scroll_to_top_title")
+    });
 
     if (!note) return null;
 
     return (
         <a
+            ref={linkRef}
             href="#"
             className="breadcrumb-last-item tn-link"
             onClick={() => {

From 3c41b7e5a9220d0082778ef14a8a25bae032ff85 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:45:56 +0200
Subject: [PATCH 12/17] feat(note_type_switcher): use singular form

---
 apps/client/src/translations/en/translation.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 991ee6711..c3b621a8a 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1761,9 +1761,9 @@
     "created_on": "Created on <Value />",
     "last_modified": "Last modified on <Value />",
     "note_type_switcher_label": "Switch from {{type}} to:",
-    "note_type_switcher_others": "More note types",
-    "note_type_switcher_templates": "Templates",
-    "note_type_switcher_collection": "Collections",
+    "note_type_switcher_others": "Other note type",
+    "note_type_switcher_templates": "Template",
+    "note_type_switcher_collection": "Collection",
     "edited_notes": "Edited notes"
   },
   "search_result": {

From 71d8588091a152e80feaee1b771604144e54928a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:47:53 +0200
Subject: [PATCH 13/17] feat(note_type_switcher): use arrows next to dropdowns

---
 apps/client/src/widgets/react/Badge.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/react/Badge.tsx b/apps/client/src/widgets/react/Badge.tsx
index dea4158ca..b8aa9c218 100644
--- a/apps/client/src/widgets/react/Badge.tsx
+++ b/apps/client/src/widgets/react/Badge.tsx
@@ -14,7 +14,7 @@ interface SimpleBadgeProps {
 }
 
 interface BadgeProps extends Pick<HTMLAttributes<HTMLDivElement>, "onClick" | "style"> {
-    text?: string;
+    text?: ComponentChildren;
     icon?: string;
     className?: string;
     tooltip?: string;
@@ -51,14 +51,18 @@ export function Badge({ icon, className, text, tooltip, href, ...containerProps
     );
 }
 
-export function BadgeWithDropdown({ children, tooltip, className, dropdownOptions, ...props }: BadgeProps & {
+export function BadgeWithDropdown({ text, children, tooltip, className, dropdownOptions, ...props }: BadgeProps & {
     children: ComponentChildren,
     dropdownOptions?: Partial<DropdownProps>
 }) {
     return (
         <Dropdown
             className={`dropdown-badge dropdown-${className}`}
-            text={<Badge className={className} {...props} />}
+            text={<Badge
+                text={<>{text} <Icon icon="bx bx-chevron-down" /></>}
+                className={className}
+                {...props}
+            />}
             noDropdownListStyle
             noSelectButtonStyle
             hideToggleArrow

From 07c8ff4571045fe5155091a1a301bf5def8202e8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:49:09 +0200
Subject: [PATCH 14/17] chore(note_type_switcher): shorten last modified date

---
 apps/client/src/translations/en/translation.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index c3b621a8a..611f527fd 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1759,7 +1759,7 @@
   "note_title": {
     "placeholder": "type note's title here...",
     "created_on": "Created on <Value />",
-    "last_modified": "Last modified on <Value />",
+    "last_modified": "Modified on <Value />",
     "note_type_switcher_label": "Switch from {{type}} to:",
     "note_type_switcher_others": "Other note type",
     "note_type_switcher_templates": "Template",

From f21ba207fe3d477a836f1babbc9ed56371defc5f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 16:50:26 +0200
Subject: [PATCH 15/17] feat(inline_title): improve fit on small splits

---
 apps/client/src/widgets/layout/InlineTitle.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css
index c39322957..be153dbb0 100644
--- a/apps/client/src/widgets/layout/InlineTitle.css
+++ b/apps/client/src/widgets/layout/InlineTitle.css
@@ -62,6 +62,7 @@ body.prefers-centered-content .inline-title {
     margin-top: 4px;
     list-style-type: none;
     opacity: .5;
+    flex-wrap: wrap;
 
     span.value {
         font-weight: 500;

From 1feeb350ced95b446ff685f17a7ba2a2def32e14 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 17:14:00 +0200
Subject: [PATCH 16/17] chore(client): address requested changes

---
 apps/client/src/widgets/layout/Breadcrumb.tsx | 2 +-
 apps/client/src/widgets/react/hooks.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 511ed2de0..a814fb13a 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -241,7 +241,7 @@ function buildNotePaths(noteContext: NoteContext) {
     }
 
     // When hoisted, display only the path starting with the hoisted note.
-    if (noteContext.hoistedNoteId !== "root") {
+    if (noteContext.hoistedNoteId !== "root" && hoistedNotePos > -1) {
         output = output.slice(hoistedNotePos);
     }
 
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index 535a797f5..d01fb8156 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -267,7 +267,7 @@ export function useTriliumOptions<T extends OptionNames>(...names: T[]) {
  * @returns a name with the given prefix and a random alpanumeric string appended to it.
  */
 export function useUniqueName(prefix?: string) {
-    return useMemo(() => (prefix ? `${prefix  }-` : "") + utils.randomString(10), [ prefix ]);
+    return useMemo(() => (prefix ? `${prefix}-` : "") + utils.randomString(10), [ prefix ]);
 }
 
 export function useNoteContext() {

From c3a6d1bba8c71f9808415555e3ba53957a5652bf Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 17:17:01 +0200
Subject: [PATCH 17/17] feat(badge): bigger dropdown arrow

---
 apps/client/src/widgets/layout/NoteBadges.tsx | 10 ++--------
 apps/client/src/widgets/react/Badge.css       | 10 ++++++++++
 apps/client/src/widgets/react/Badge.tsx       |  2 +-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/layout/NoteBadges.tsx b/apps/client/src/widgets/layout/NoteBadges.tsx
index 0959b773c..b2a51a6a7 100644
--- a/apps/client/src/widgets/layout/NoteBadges.tsx
+++ b/apps/client/src/widgets/layout/NoteBadges.tsx
@@ -1,15 +1,9 @@
 import "./NoteBadges.css";
 
-import clsx from "clsx";
-import { ComponentChildren, MouseEventHandler } from "preact";
-import { useRef } from "preact/hooks";
-
 import { t } from "../../services/i18n";
-import Dropdown, { DropdownProps } from "../react/Dropdown";
-import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean, useStaticTooltip } from "../react/hooks";
-import Icon from "../react/Icon";
-import { useShareInfo } from "../shared_info";
 import { Badge } from "../react/Badge";
+import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
+import { useShareInfo } from "../shared_info";
 
 export default function NoteBadges() {
     return (
diff --git a/apps/client/src/widgets/react/Badge.css b/apps/client/src/widgets/react/Badge.css
index 83f3f05ef..cf8542a11 100644
--- a/apps/client/src/widgets/react/Badge.css
+++ b/apps/client/src/widgets/react/Badge.css
@@ -39,6 +39,16 @@
 
     .ext-badge {
         border-radius: 0;
+
+        .text {
+            display: inline-flex;
+            align-items: center;
+
+            .arrow {
+                font-size: 1.3em;
+                margin-left: 0.25em;
+            }
+        }
     }
 
     .btn {
diff --git a/apps/client/src/widgets/react/Badge.tsx b/apps/client/src/widgets/react/Badge.tsx
index b8aa9c218..f45f377e5 100644
--- a/apps/client/src/widgets/react/Badge.tsx
+++ b/apps/client/src/widgets/react/Badge.tsx
@@ -59,7 +59,7 @@ export function BadgeWithDropdown({ text, children, tooltip, className, dropdown
         <Dropdown
             className={`dropdown-badge dropdown-${className}`}
             text={<Badge
-                text={<>{text} <Icon icon="bx bx-chevron-down" /></>}
+                text={<>{text} <Icon className="arrow" icon="bx bx-chevron-down" /></>}
                 className={className}
                 {...props}
             />}