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

feat(breadcrumb): display a checkbox for the current note

Browse Source
This commit is contained in:
Elian Doran 2025-12-08 21:52:36 +02:00
parent c5c4ecd6e6
commit 200fd76929
No known key found for this signature in database
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,10 +13,10 @@ export default function Breadcrumb() {
return ( return (
<div className="breadcrumb"> <div className="breadcrumb">
{notePath.map(item => ( {notePath.map((item, index) => (
<Fragment key={item}> <Fragment key={item}>
<BreadcrumbItem notePath={item} /> <BreadcrumbItem notePath={item} />
<BreadcrumbSeparator notePath={item} noteContext={noteContext} /> <BreadcrumbSeparator notePath={item} activeNotePath={notePath[index+1]} noteContext={noteContext} />
</Fragment> </Fragment>
))} ))}
</div> </div>
@ -35,7 +35,7 @@ function BreadcrumbItem({ notePath }: { notePath: string }) {
) )
} }
function BreadcrumbSeparator({ notePath, noteContext }: { notePath: string, noteContext: NoteContext | undefined }) { function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
return ( return (
<Dropdown <Dropdown
text={<Icon icon="bx bx-chevron-right" />} text={<Icon icon="bx bx-chevron-right" />}
@ -43,27 +43,29 @@ function BreadcrumbSeparator({ notePath, noteContext }: { notePath: string, note
buttonClassName="icon-action" buttonClassName="icon-action"
hideToggleArrow hideToggleArrow
> >
<BreadcrumbSeparatorDropdownContent notePath={notePath} noteContext={noteContext} /> <BreadcrumbSeparatorDropdownContent notePath={notePath} noteContext={noteContext} activeNotePath={activeNotePath} />
</Dropdown> </Dropdown>
) )
} }
function BreadcrumbSeparatorDropdownContent({ notePath, noteContext }: { notePath: string, noteContext: NoteContext | undefined }) { function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {
const notePathComponents = notePath.split("/"); const notePathComponents = notePath.split("/");
const notePathPrefix = notePathComponents.join("/"); // last item was removed already.
const parentNoteId = notePathComponents.length > 1 ? notePathComponents.pop() : "root"; const parentNoteId = notePathComponents.length > 1 ? notePathComponents.pop() : "root";
const childNotes = useChildNotes(parentNoteId); const childNotes = useChildNotes(parentNoteId);
const notePathPrefix = notePathComponents.join("/"); // last item was removed already.
return ( return (
<ul class="breadcrumb-child-list"> <ul class="breadcrumb-child-list">
{childNotes.map((note) => ( {childNotes.map((note) => {
<li key={note.noteId}> const childNotePath = `${notePathPrefix}/${note.noteId}`
return <li key={note.noteId}>
<FormListItem <FormListItem
icon={note.getIcon()} icon={note.getIcon()}
onClick={() => noteContext?.setNote(`${notePathPrefix}/${note.noteId}`)} onClick={() => noteContext?.setNote(childNotePath)}
checked={childNotePath === activeNotePath}
>{note.title}</FormListItem> >{note.title}</FormListItem>
</li> </li>
))} })}
</ul> </ul>
) )
} }