gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 02:14:25 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat(breadcrumb): collapse items if the list is too big

Browse Source
This commit is contained in:
Elian Doran 2025-12-08 23:02:04 +02:00
parent a365814aaa
commit b16893c4d2
No known key found for this signature in database
2 changed files with 62 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/widgets/Breadcrumb.css
View File

@ -50,5 +50,6 @@
white-space: nowrap;
overflow: hidden;
display: block;
max-width: 300px;
}
}

67
apps/client/src/widgets/Breadcrumb.tsx
View File

@ -10,22 +10,47 @@ import ActionButton from "./react/ActionButton";
import { useMemo } from "preact/hooks";
import froca from "../services/froca";
const COLLAPSE_THRESHOLD = 5;
const INITIAL_ITEMS = 2;
const FINAL_ITEMS = 2;
export default function Breadcrumb() {
const { note, noteContext } = useNoteContext();
const notePath = buildNotePaths(noteContext?.notePathArray);
return (
<div className="breadcrumb">
{notePath.map((item, index) => (
{notePath.length > COLLAPSE_THRESHOLD ? (
<>
{notePath.slice(0, INITIAL_ITEMS).map((item, index) => (
<Fragment key={item}>
{index === 0 && notePath.length > 1
? <BreadcrumbRoot noteContext={noteContext} />
: <BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} />
? <BreadcrumbRoot noteContext={noteContext} />
: <BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} />
}
{(index < notePath.length - 1 || note?.hasChildren()) &&
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index+1]} noteContext={noteContext} />}
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index+1]} noteContext={noteContext} />
</Fragment>
))}
))}
<BreadcrumbCollapsed items={notePath.slice(INITIAL_ITEMS, -FINAL_ITEMS)} noteContext={noteContext} />
{notePath.slice(-FINAL_ITEMS).map((item, index) => (
<Fragment key={item}>
<BreadcrumbSeparator notePath={notePath[notePath.length - FINAL_ITEMS - (1 - index)]} activeNotePath={item} noteContext={noteContext} />
<BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} />
</Fragment>
))}
</>
) : (
notePath.map((item, index) => (
<Fragment key={item}>
{index === 0 && notePath.length > 1
? <BreadcrumbRoot noteContext={noteContext} />
: <BreadcrumbItem notePath={item} activeNotePath={noteContext?.notePath ?? ""} />
}
{(index < notePath.length - 1 || note?.hasChildren()) &&
<BreadcrumbSeparator notePath={item} activeNotePath={notePath[index+1]} noteContext={noteContext} />}
</Fragment>
))
)}
</div>
)
}
@ -95,6 +120,36 @@ function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNoteP
)
}
function BreadcrumbCollapsed({ items, noteContext }: { items: string[], noteContext: NoteContext | undefined }) {
return (
<Dropdown
text={<Icon icon="bx bx-dots-horizontal-rounded" />}
noSelectButtonStyle
buttonClassName="icon-action"
hideToggleArrow
dropdownOptions={{ popperConfig: { strategy: "fixed" } }}
>
<ul class="breadcrumb-child-list">
{items.map((notePath) => {
const notePathComponents = notePath.split("/");
const noteId = notePathComponents[notePathComponents.length - 1];
const note = froca.getNoteFromCache(noteId);
if (!note) return null;
return <li key={note.noteId}>
<FormListItem
icon={note.getIcon()}
onClick={() => noteContext?.setNote(notePath)}
>
<span>{note.title}</span>
</FormListItem>
</li>
})}
</ul>
</Dropdown>
)
}
function buildNotePaths(notePathArray: string[] | undefined) {
if (!notePathArray) return [];