Adds breadcrumbs to global navigation

src/lib/components/MainLayout.svelte

@@ -7,15 +7,14 @@
 
   import Button from "./common/Button.svelte";
   import Flex from "./common/Flex.svelte";
-  import Logo from "./common/Logo.svelte";
   import SignedIn from "./common/SignedIn.svelte";
   import UserMenu from "./accounts/UserMenu.svelte";
   import OrgMenu from "./accounts/OrgMenu.svelte";
 
   import { SIGN_IN_URL } from "@/config/config";
+  import Breadcrumbs from "./common/Breadcrumbs.svelte";
 
   export let modal: boolean = false;
-  export let basement: "left" | "right" | null = null;
 
   let panel: "navigation" | "action" | null = null;
 
@@ -29,18 +28,13 @@
     };
   }
 
-  function closeBasement() {
-    if (basement !== null) {
-      basement = null;
-    }
-  }
-
   function closeModal() {
     modal = false;
   }
 
   const me = getContext<Writable<User>>("me");
   const org = getContext<Writable<Org>>("org");
+  const breadcrumbs = getContext<any[]>("breadcrumbs") ?? [];
 </script>
 
 <div class="container">
@@ -52,8 +46,7 @@
         </Button>
       </div>
     {/if}
-    <a href="/" class="logo"><Logo /></a>
-    <div class="breadcrumbs"></div>
+    <Breadcrumbs trail={breadcrumbs} />
     <SignedIn>
       <Flex>
         <OrgMenu org={$org} />
@@ -166,16 +159,6 @@
     overflow-y: auto;
   }
 
-  .logo {
-    height: 1.5rem;
-    width: auto;
-    padding: 0 0.5rem;
-  }
-
-  .breadcrumbs {
-    flex: 1 0 0;
-  }
-
   .navigation {
     border-right: 1px solid var(--gray-2, #d8dee2);
   }

src/lib/components/common/Breadcrumbs.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { TriangleRight16 } from "svelte-octicons";
+  import Logo from "./Logo.svelte";
+  import Flex from "./Flex.svelte";
+
+  interface Breadcrumb {
+    title: string;
+    href?: string;
+  }
+
+  export let trail: Breadcrumb[] = [];
+</script>
+
+<div class="breadcrumbs">
+  <Flex gap={0.375} align="center">
+    <slot name="root">
+      <a href="/" class="logo crumb"><Logo /></a>
+    </slot>
+    {#each trail as { href, title }}
+      <TriangleRight16 fill="var(--gray-3)" />
+      {#if href}
+        <a class="crumb" {href} {title}>{title}</a>
+      {:else}
+        <span {title} class="crumb">{title}</span>
+      {/if}
+    {/each}
+  </Flex>
+</div>
+
+<style>
+  .breadcrumbs {
+    flex: 1 0 0;
+    max-width: 100%;
+  }
+
+  .crumb {
+    flex: 0 1 auto;
+    font-size: var(--font-l);
+    text-decoration: none;
+    color: var(--gray-4);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .crumb:last-child {
+    color: inherit;
+    flex: 0 0 auto;
+  }
+
+  a.crumb:hover {
+    background: var(--gray-1);
+  }
+
+  .logo {
+    flex: 0 0 auto;
+    height: 1.5rem;
+    width: auto;
+    box-sizing: content-box;
+  }
+</style>

src/lib/components/common/stories/Breadcrumbs.stories.svelte

@@ -0,0 +1,64 @@
+<script context="module" lang="ts">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Breadcrumbs from "../Breadcrumbs.svelte";
+
+  export const meta = {
+    title: "Components / Common / Breadcrumbs",
+    component: Breadcrumbs,
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="Root">
+  <Breadcrumbs />
+</Story>
+
+<Story name="One Crumb">
+  <Breadcrumbs trail={[{ href: "/documents", title: "Documents" }]} />
+</Story>
+
+<Story name="Two Crumbs">
+  <Breadcrumbs
+    trail={[
+      { href: "/documents", title: "Documents" },
+      { href: "/documents/[id]", title: "The Santa Anas" },
+    ]}
+  />
+</Story>
+
+<Story name="Three Crumbs">
+  <Breadcrumbs
+    trail={[
+      { title: "Documents" },
+      { href: "/documents/[id]", title: "The Santa Anas" },
+      { href: "/documents/[id]/organize", title: "Organize" },
+    ]}
+  />
+</Story>
+
+<Story name="Long Crumb">
+  <div style="width: 48rem;">
+    <Breadcrumbs
+      trail={[
+        { title: "Documents" },
+        {
+          href: "/documents/[id]",
+          title: "BADFILENAME__TOOLONG__FINAL FINAL DRAFT 2.pdf",
+        },
+        { href: "/documents/[id]/organize", title: "Organize" },
+      ]}
+    />
+  </div>
+</Story>
+
+<Story name="Custom Root">
+  <Breadcrumbs
+    trail={[
+      { href: "/documents", title: "Documents" },
+      { href: "/documents/[id]", title: "The Santa Anas" },
+      { href: "/documents/[id]/organize", title: "Organize" },
+    ]}
+  >
+    <p slot="root">DocumentCloud</p>
+  </Breadcrumbs>
+</Story>

src/routes/+layout.svelte

@@ -17,6 +17,7 @@
   // update context so other components can access and update
   setContext("me", me);
   setContext("org", org);
+  setContext("breadcrumbs", []);
 </script>
 
 <slot />

src/routes/app/+layout.svelte

@@ -13,10 +13,13 @@
   import AddOns from "./sidebar/AddOns.svelte";
   import Documents from "./sidebar/Documents.svelte";
   import Projects from "./sidebar/Projects.svelte";
+  import { setContext } from "svelte";
 
   export let data: {
     pinnedAddons: Promise<Page<AddOnListItem>>;
   };
+
+  setContext("breadcrumbs", [{ href: "/app", label: "Documents" }]);
 </script>
 
 <svelte:head>

src/routes/app/add-ons/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+
+  setContext("breadcrumbs", [{ href: "/app/add-ons", label: "Add-Ons" }]);
+</script>
+
+<slot />

src/routes/app/sidebar/AddOns.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Book16, Hourglass24, Pin24, Plug16 } from "svelte-octicons";
   import type { Page } from "@/api/types";
-  import type { AddOnListItem } from "$lib/api/types";
+  import type { AddOnListItem } from "@/addons/types";
   import Action from "$lib/components/common/Action.svelte";
   import Empty from "$lib/components/common/Empty.svelte";
   import Flex from "$lib/components/common/Flex.svelte";

src/routes/documents/[id]-[slug]/+layout.svelte

@@ -17,12 +17,18 @@
   import { embedUrl } from "@/api/embed";
   import { pageImageUrl } from "@/api/viewer.js";
   import { canonicalUrl } from "@/lib/api/documents";
+  import { setContext } from "svelte";
 
   export let data;
 
   $: document = data.document;
   $: projects = document.projects as Project[];
   $: canonical_url = canonicalUrl(document).toString();
+
+  setContext("breadcrumbs", [
+    { href: "/app", label: "Documents" },
+    { label: document.title },
+  ]);
 </script>
 
 <svelte:head>