feat(breadcrumb): get breadcrumb to render

apps/client/src/layouts/desktop_layout.tsx

@@ -44,6 +44,7 @@ import NoteDetail from "../widgets/NoteDetail.jsx";
 import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import Breadcrumb from "../widgets/Breadcrumb.jsx";
 
 export default class DesktopLayout {
 
@@ -122,6 +123,7 @@ export default class DesktopLayout {
                                                                 .css("min-height", "30px")
                                                                 .css("align-items", "center")
                                                                 .cssBlock(".breadcrumb-row > * { margin: 5px; }")
+                                                                .child(<Breadcrumb />)
                                                                 .child(<SpacerWidget baseSize={0} growthFactor={1} />)
                                                                 .child(<MovePaneButton direction="left" />)
                                                                 .child(<MovePaneButton direction="right" />)

apps/client/src/widgets/Breadcrumb.css

@@ -0,0 +1,4 @@
+.component.breadcrumb {
+    contain: none;
+    margin: 0 10px;
+}

apps/client/src/widgets/Breadcrumb.tsx

@@ -0,0 +1,36 @@
+import "./Breadcrumb.css";
+import { useNoteContext } from "./react/hooks";
+import NoteLink from "./react/NoteLink";
+import { joinElements } from "./react/react_utils";
+
+export default function Breadcrumb() {
+    const { noteContext } = useNoteContext();
+    const notePath = buildNotePaths(noteContext?.notePathArray);
+    console.log("Render with ", notePath);
+
+    return (
+        <div className="breadcrumb">
+            {joinElements(notePath.map(item => (
+                <BreadcrumbItem key={item} notePath={item} />
+            )), <>&nbsp;›&nbsp;</>)}
+        </div>
+    )
+}
+
+function BreadcrumbItem({ notePath }: { notePath: string }) {
+    return (
+        <NoteLink notePath={notePath} />
+    )
+}
+
+function buildNotePaths(notePathArray: string[] | undefined) {
+    if (!notePathArray) return [];
+
+    let prefix = "";
+    const output: string[] = [];
+    for (const notePath of notePathArray) {
+        output.push(`${prefix}${notePath}`);
+        prefix += `${notePath}/`;
+    }
+    return output;
+}

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

@@ -44,7 +44,7 @@ export function disposeReactWidget(container: Element) {
     render(null, container);
 }
 
-export function joinElements(components: ComponentChild[] | undefined, separator = ", ") {
+export function joinElements(components: ComponentChild[] | undefined, separator: ComponentChild = ", ") {
     if (!components) return <></>;
 
     const joinedComponents: ComponentChild[] = [];