From b16893c4d2f5349b94a0e5a7d4ef951ca13622da Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 8 Dec 2025 23:02:04 +0200
Subject: [PATCH] feat(breadcrumb): collapse items if the list is too big

---
 apps/client/src/widgets/Breadcrumb.css |  1 +
 apps/client/src/widgets/Breadcrumb.tsx | 67 +++++++++++++++++++++++---
 2 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/Breadcrumb.css b/apps/client/src/widgets/Breadcrumb.css
index 810d54797..7a78982b2 100644
--- a/apps/client/src/widgets/Breadcrumb.css
+++ b/apps/client/src/widgets/Breadcrumb.css
@@ -50,5 +50,6 @@
         white-space: nowrap;
         overflow: hidden;
         display: block;
+        max-width: 300px;
     }
 }
diff --git a/apps/client/src/widgets/Breadcrumb.tsx b/apps/client/src/widgets/Breadcrumb.tsx
index 1c4f6a4dc..940f62405 100644
--- a/apps/client/src/widgets/Breadcrumb.tsx
+++ b/apps/client/src/widgets/Breadcrumb.tsx
@@ -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 [];