diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css index d98b1ed91..16e9ea2bc 100644 --- a/apps/client/src/widgets/layout/Breadcrumb.css +++ b/apps/client/src/widgets/layout/Breadcrumb.css @@ -15,6 +15,10 @@ align-items: center; min-width: 0; + .bx { + margin-inline: 6px; + } + a { color: inherit; text-decoration: none; diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx index 7278b403b..fbda95391 100644 --- a/apps/client/src/widgets/layout/Breadcrumb.tsx +++ b/apps/client/src/widgets/layout/Breadcrumb.tsx @@ -57,32 +57,36 @@ export default function Breadcrumb({ note, noteContext }: { note: FNote, noteCon } function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined }) { - const note = useNote(noteContext?.hoistedNoteId); - useNoteLabel(note, "iconClass"); - const title = useNoteProperty(note, "title"); + const noteId = noteContext?.hoistedNoteId ?? "root"; - return (note && - noteContext?.setNote(note.noteId)} - onContextMenu={(e) => { - e.preventDefault(); - link_context_menu.openContextMenu(note.noteId, e); - }} - /> - ); -} + // Root note is icon only. + if (noteId === "root") { + const note = froca.getNoteFromCache("root"); + return (note && + noteContext?.setNote(note.noteId)} + onContextMenu={(e) => { + e.preventDefault(); + link_context_menu.openContextMenu(note.noteId, e); + }} + /> + ); + } -function BreadcrumbLink({ notePath }: { notePath: string }) { + // Hoisted workspace shows both text and icon. return ( ); } + function BreadcrumbLastItem({ notePath }: { notePath: string }) { const noteId = notePath.split("/").at(-1); const [ note ] = useState(() => froca.getNoteFromCache(noteId!)); @@ -114,7 +118,7 @@ function BreadcrumbItem({ index, notePath, noteContext, notePathLength }: { inde ; } - return ; + return ; } function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {