feat(breadcrumb): use different approach for displaying workspace icon

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;

apps/client/src/widgets/layout/Breadcrumb.tsx

@@ -57,15 +57,16 @@ 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";
 
+    // Root note is icon only.
+    if (noteId === "root") {
+        const note = froca.getNoteFromCache("root");
         return (note &&
             <ActionButton
                 className="root-note"
                 icon={note.getIcon()}
-            text={title ?? ""}
+                text={""}
                 onClick={() => noteContext?.setNote(note.noteId)}
                 onContextMenu={(e) => {
                     e.preventDefault();
@@ -75,14 +76,17 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
         );
     }
 
-function BreadcrumbLink({ notePath }: { notePath: string }) {
+    // Hoisted workspace shows both text and icon.
     return (
         <NoteLink
-            notePath={notePath}
+            notePath={noteId}
+            showNoteIcon
+            noPreview
         />
     );
 }
 
+
 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 <BreadcrumbLink notePath={notePath} />;
+    return <NoteLink notePath={notePath} />;
 }
 
 function BreadcrumbSeparator({ notePath, noteContext, activeNotePath }: { notePath: string, activeNotePath: string, noteContext: NoteContext | undefined }) {