feat(breadcrumb): display workspace text

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

@@ -40,6 +40,14 @@
         padding: 0;
     }
 
+    .btn.root-note {
+        box-shadow: unset;
+        background: unset;
+        padding-inline: 0.5em;
+        color: inherit;
+        min-width: unset;
+    }
+
     .dropdown-item span,
     .dropdown-item strong,
     .breadcrumb-last-item {

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

@@ -9,6 +9,7 @@ import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
 import froca from "../../services/froca";
 import ActionButton from "../react/ActionButton";
+import Button from "../react/Button";
 import Dropdown from "../react/Dropdown";
 import { FormListItem } from "../react/FormList";
 import { useChildNotes, useNote, useNoteLabel, useNoteProperty } from "../react/hooks";
@@ -62,10 +63,10 @@ function BreadcrumbRoot({ noteContext }: { noteContext: NoteContext | undefined
     const title = useNoteProperty(note, "title");
 
     return (note &&
-        <ActionButton
+        <Button
             className="root-note"
             icon={note.getIcon()}
-            text={title ?? ""}
+            text={note.noteId !== "root" ? (title ?? "") : ""}
             onClick={() => noteContext?.setNote(note.noteId)}
             onContextMenu={(e) => {
                 e.preventDefault();

apps/client/src/widgets/react/Button.tsx

@@ -1,11 +1,11 @@
-import type { ComponentChildren, RefObject } from "preact";
-import type { CSSProperties } from "preact/compat";
-import { useMemo } from "preact/hooks";
+import type { ComponentChildren, HTMLAttributes, RefObject } from "preact";
 import { memo } from "preact/compat";
+import { useMemo } from "preact/hooks";
+
 import { CommandNames } from "../../components/app_context";
 import Icon from "./Icon";
 
-export interface ButtonProps {
+export interface ButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "className" | "style" | "onContextMenu"> {
     name?: string;
     /** Reference to the button element. Mostly useful for requesting focus. */
     buttonRef?: RefObject<HTMLButtonElement>;
@@ -18,7 +18,6 @@ export interface ButtonProps {
     primary?: boolean;
     disabled?: boolean;
     size?: "normal" | "small" | "micro";
-    style?: CSSProperties;
     triggerCommand?: CommandNames;
     title?: string;
 }
@@ -78,7 +77,7 @@ export function ButtonGroup({ children }: { children: ComponentChildren }) {
         <div className="btn-group" role="group">
             {children}
         </div>
-    )
+    );
 }
 
 export function SplitButton({ text, icon, children, ...restProps }: {
@@ -103,7 +102,7 @@ export function SplitButton({ text, icon, children, ...restProps }: {
                 {children}
             </ul>
         </ButtonGroup>
-    )
+    );
 }
 
 export default Button;