gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-20 22:34:23 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

fix(breadcrumb): not reacting to changes in note path

Browse Source
This commit is contained in:
Elian Doran 2025-12-16 12:42:50 +02:00
parent ec22fd9e99
commit c9025f2304
No known key found for this signature in database
3 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
apps/client/src/widgets/layout/Breadcrumb.tsx
View File

@ -6,7 +6,6 @@ import { Fragment } from "preact/jsx-runtime";
import appContext from "../../components/app_context"; import appContext from "../../components/app_context";
import Component from "../../components/component"; import Component from "../../components/component";
import NoteContext from "../../components/note_context"; import NoteContext from "../../components/note_context";
import FNote from "../../entities/fnote";
import contextMenu, { MenuItem } from "../../menus/context_menu"; import contextMenu, { MenuItem } from "../../menus/context_menu";
import NoteColorPicker from "../../menus/custom-items/NoteColorPicker"; import NoteColorPicker from "../../menus/custom-items/NoteColorPicker";
import link_context_menu from "../../menus/link_context_menu"; import link_context_menu from "../../menus/link_context_menu";
@ -24,7 +23,7 @@ import ActionButton from "../react/ActionButton";
import { Badge } from "../react/Badge"; import { Badge } from "../react/Badge";
import Dropdown from "../react/Dropdown"; import Dropdown from "../react/Dropdown";
import { FormListItem } from "../react/FormList"; import { FormListItem } from "../react/FormList";
import { useChildNotes, useNote, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useStaticTooltip } from "../react/hooks"; import { useActiveNoteContext, useChildNotes, useNote, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useStaticTooltip } from "../react/hooks";
import Icon from "../react/Icon"; import Icon from "../react/Icon";
import NoteLink from "../react/NoteLink"; import NoteLink from "../react/NoteLink";
import { ParentComponent } from "../react/react_utils"; import { ParentComponent } from "../react/react_utils";
@ -33,37 +32,37 @@ const COLLAPSE_THRESHOLD = 5;
const INITIAL_ITEMS = 2; const INITIAL_ITEMS = 2;
const FINAL_ITEMS = 2; const FINAL_ITEMS = 2;
export default function Breadcrumb({ note, noteContext }: { note: FNote, noteContext: NoteContext }) { export default function Breadcrumb() {
const notePath = buildNotePaths(noteContext); const { note, notePaths, noteContext } = useNotePaths();
const parentComponent = useContext(ParentComponent); const parentComponent = useContext(ParentComponent);
return ( return (
<div className="breadcrumb"> <div className="breadcrumb">
{notePath.length > COLLAPSE_THRESHOLD ? ( {notePaths.length > COLLAPSE_THRESHOLD ? (
<> <>
{notePath.slice(0, INITIAL_ITEMS).map((item, index) => ( {notePaths.slice(0, INITIAL_ITEMS).map((item, index) => (
<Fragment key={item}> <Fragment key={item}>
<BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} parentComponent={parentComponent} /> <BreadcrumbItem index={index} notePath={item} notePathLength={notePaths.length} noteContext={noteContext} parentComponent={parentComponent} />
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index + 1]} noteContext={noteContext} /> <BreadcrumbSeparator notePath={item} activeNotePath={notePaths[index + 1]} noteContext={noteContext} />
</Fragment> </Fragment>
))} ))}
<BreadcrumbCollapsed items={notePath.slice(INITIAL_ITEMS, -FINAL_ITEMS)} noteContext={noteContext} /> <BreadcrumbCollapsed items={notePaths.slice(INITIAL_ITEMS, -FINAL_ITEMS)} noteContext={noteContext} />
{notePath.slice(-FINAL_ITEMS).map((item, index) => ( {notePaths.slice(-FINAL_ITEMS).map((item, index) => (
<Fragment key={item}> <Fragment key={item}>
<BreadcrumbSeparator notePath={notePath[notePath.length - FINAL_ITEMS - (1 - index)]} activeNotePath={item} noteContext={noteContext} /> <BreadcrumbSeparator notePath={notePaths[notePaths.length - FINAL_ITEMS - (1 - index)]} activeNotePath={item} noteContext={noteContext} />
<BreadcrumbItem index={notePath.length - FINAL_ITEMS + index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} parentComponent={parentComponent} /> <BreadcrumbItem index={notePaths.length - FINAL_ITEMS + index} notePath={item} notePathLength={notePaths.length} noteContext={noteContext} parentComponent={parentComponent} />
</Fragment> </Fragment>
))} ))}
</> </>
) : ( ) : (
notePath.map((item, index) => ( notePaths.map((item, index) => (
<Fragment key={item}> <Fragment key={item}>
{index === 0 {index === 0
? <BreadcrumbRoot noteContext={noteContext} /> ? <BreadcrumbRoot noteContext={noteContext} />
: <BreadcrumbItem index={index} notePath={item} notePathLength={notePath.length} noteContext={noteContext} parentComponent={parentComponent} /> : <BreadcrumbItem index={index} notePath={item} notePathLength={notePaths.length} noteContext={noteContext} parentComponent={parentComponent} />
} }
{(index < notePath.length - 1 || note?.hasChildren()) && {(index < notePaths.length - 1 || note?.hasChildren()) &&
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index + 1]} noteContext={noteContext} />} <BreadcrumbSeparator notePath={item} activeNotePath={notePaths[index + 1]} noteContext={noteContext} />}
</Fragment> </Fragment>
)) ))
)} )}
@ -239,16 +238,16 @@ function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteCont
); );
} }
function buildNotePaths(noteContext: NoteContext) { function useNotePaths() {
const notePathArray = noteContext.notePathArray; const { note, notePath, hoistedNoteId, noteContext } = useActiveNoteContext();
if (!notePathArray) return []; const notePathArray = (notePath ?? "").split("/");
let prefix = ""; let prefix = "";
let output: string[] = []; let output: string[] = [];
let pos = 0; let pos = 0;
let hoistedNotePos = -1; let hoistedNotePos = -1;
for (const notePath of notePathArray) { for (const notePath of notePathArray) {
if (noteContext.hoistedNoteId !== "root" && notePath === noteContext.hoistedNoteId) { if (hoistedNoteId !== "root" && notePath === hoistedNoteId) {
hoistedNotePos = pos; hoistedNotePos = pos;
} }
output.push(`${prefix}${notePath}`); output.push(`${prefix}${notePath}`);
@ -257,11 +256,15 @@ function buildNotePaths(noteContext: NoteContext) {
} }
// When hoisted, display only the path starting with the hoisted note. // When hoisted, display only the path starting with the hoisted note.
if (noteContext.hoistedNoteId !== "root" && hoistedNotePos > -1) { if (hoistedNoteId !== "root" && hoistedNotePos > -1) {
output = output.slice(hoistedNotePos); output = output.slice(hoistedNotePos);
} }
return output; return {
note,
notePaths: output,
noteContext
};
} }
//#region Context menu //#region Context menu

2
apps/client/src/widgets/layout/StatusBar.tsx
View File

@ -64,7 +64,7 @@ export default function StatusBar() {
<div className="status-bar-main-row"> <div className="status-bar-main-row">
{context && attributesContext && noteInfoContext && <> {context && attributesContext && noteInfoContext && <>
<Breadcrumb {...context} /> <Breadcrumb />
<div className="actions-row"> <div className="actions-row">
<CodeNoteSwitcher {...context} /> <CodeNoteSwitcher {...context} />

14
apps/client/src/widgets/react/hooks.tsx
View File

@ -20,6 +20,7 @@ import server from "../../services/server";
import shortcuts, { Handler, removeIndividualBinding } from "../../services/shortcuts"; import shortcuts, { Handler, removeIndividualBinding } from "../../services/shortcuts";
import SpacedUpdate from "../../services/spaced_update"; import SpacedUpdate from "../../services/spaced_update";
import toast, { ToastOptions } from "../../services/toast"; import toast, { ToastOptions } from "../../services/toast";
import tree from "../../services/tree";
import utils, { escapeRegExp, randomString, reloadFrontendApp } from "../../services/utils"; import utils, { escapeRegExp, randomString, reloadFrontendApp } from "../../services/utils";
import BasicWidget, { ReactWrappedWidget } from "../basic_widget"; import BasicWidget, { ReactWrappedWidget } from "../basic_widget";
import NoteContextAwareWidget from "../note_context_aware_widget"; import NoteContextAwareWidget from "../note_context_aware_widget";
@ -386,6 +387,16 @@ export function useActiveNoteContext() {
setHoistedNoteId(noteId); setHoistedNoteId(noteId);
} }
}); });
/**
* Note context doesn't actually refresh at all if the active note is moved around (e.g. the note path changes).
* Address that by listening to note changes.
*/
useTriliumEvent("entitiesReloaded", async ({ loadResults }) => {
if (note && notePath && loadResults.getBranchRows().some(b => b.noteId === note.noteId)) {
const resolvedNotePath = await tree.resolveNotePath(notePath, hoistedNoteId);
setNotePath(resolvedNotePath);
}
});
const parentComponent = useContext(ParentComponent) as ReactWrappedWidget; const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
useDebugValue(() => `notePath=${notePath}, ntxId=${noteContext?.ntxId}`); useDebugValue(() => `notePath=${notePath}, ntxId=${noteContext?.ntxId}`);
@ -393,7 +404,8 @@ export function useActiveNoteContext() {
return { return {
note, note,
noteId: noteContext?.note?.noteId, noteId: noteContext?.note?.noteId,
notePath: noteContext?.notePath, /** The note path of the note context. Unlike `noteContext.notePath`, this one actually reacts to the active note being moved around. */
notePath,
hoistedNoteId, hoistedNoteId,
ntxId: noteContext?.ntxId, ntxId: noteContext?.ntxId,
viewScope: noteContext?.viewScope, viewScope: noteContext?.viewScope,