feat(breadcrumb): respect workspace color

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

@@ -7,6 +7,7 @@ import appContext from "../../components/app_context";
 import NoteContext from "../../components/note_context";
 import FNote from "../../entities/fnote";
 import link_context_menu from "../../menus/link_context_menu";
+import { getReadableTextColor } from "../../services/css_class_manager";
 import froca from "../../services/froca";
 import hoisted_note from "../../services/hoisted_note";
 import { t } from "../../services/i18n";
@@ -87,6 +88,7 @@ function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
     const noteIcon = useNoteIcon(note);
     const [ workspace ] = useNoteLabelBoolean(note, "workspace");
     const [ workspaceIconClass ] = useNoteLabel(note, "workspaceIconClass");
+    const [ workspaceColor ] = useNoteLabel(note, "workspaceTabBackgroundColor");
 
     // Hoisted workspace shows both text and icon and a way to exit easily out of the hoisting.
     return (note &&
@@ -97,6 +99,10 @@ function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
                 text={workspace ? t("breadcrumb.workspace_badge") : t("breadcrumb.hoisted_badge")}
                 tooltip={t("breadcrumb.hoisted_badge_title")}
                 onClick={() => hoisted_note.unhoist()}
+                style={workspaceColor ? {
+                    "--color": workspaceColor,
+                    "color": getReadableTextColor(workspaceColor)
+                } : undefined}
             />
             <NoteLink
                 notePath={noteId}

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

@@ -1,7 +1,7 @@
 import "./Badge.css";
 
 import clsx from "clsx";
-import { ComponentChildren, MouseEventHandler } from "preact";
+import { ComponentChildren, HTMLAttributes } from "preact";
 import { useRef } from "preact/hooks";
 
 import Dropdown, { DropdownProps } from "./Dropdown";
@@ -13,12 +13,11 @@ interface SimpleBadgeProps {
     title: ComponentChildren;
 }
 
-interface BadgeProps {
+interface BadgeProps extends Pick<HTMLAttributes<HTMLDivElement>, "onClick" | "style"> {
     text?: string;
     icon?: string;
     className?: string;
     tooltip?: string;
-    onClick?: MouseEventHandler<HTMLDivElement>;
     href?: string;
 }
 
@@ -26,7 +25,7 @@ export default function SimpleBadge({ title, className }: SimpleBadgeProps) {
     return <span class={`badge ${className ?? ""}`}>{title}</span>;
 }
 
-export function Badge({ icon, className, text, tooltip, onClick, href }: BadgeProps) {
+export function Badge({ icon, className, text, tooltip, href, ...containerProps }: BadgeProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     useStaticTooltip(containerRef, {
         placement: "bottom",
@@ -44,8 +43,8 @@ export function Badge({ icon, className, text, tooltip, onClick, href }: BadgePr
     return (
         <div
             ref={containerRef}
-            className={clsx("ext-badge", className, { "clickable": !!onClick })}
+            className={clsx("ext-badge", className, { "clickable": !!containerProps.onClick })}
-            onClick={onClick}
+            {...containerProps}
         >
             {href ? <a href={href}>{content}</a> : <span>{content}</span>}
         </div>