From 200fd76929129cb30d0ef687dc6742ba284ae0d0 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 8 Dec 2025 21:52:36 +0200
Subject: [PATCH] feat(breadcrumb): display a checkbox for the current note

---
 apps/client/src/widgets/Breadcrumb.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

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