Breadcrumbs powered by useMatches() (#2531)

* first pass at matches-based breadcrumbs. route config changes required

* kinda fix things in the route config

* use-title.ts -> use-crumbs.ts

* Update import

---------

Co-authored-by: Charlie Park <[email protected]>

app/components/Breadcrumbs.tsx

@@ -0,0 +1,47 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import cn from 'classnames'
+import { Link } from 'react-router-dom'
+
+import { PrevArrow12Icon } from '@oxide/design-system/icons/react'
+
+import { useCrumbs } from '~/hooks/use-crumbs'
+import { Slash } from '~/ui/lib/Slash'
+import { intersperse } from '~/util/array'
+
+export function Breadcrumbs() {
+  const crumbs = useCrumbs()
+  const isTopLevel = crumbs.length <= 1
+  return (
+    <nav
+      className="flex items-center gap-0.5 overflow-clip pr-4 text-sans-md"
+      aria-label="Breadcrumbs"
+    >
+      <PrevArrow12Icon
+        className={cn('mx-1.5 flex-shrink-0 text-quinary', isTopLevel && 'opacity-40')}
+      />
+
+      {intersperse(
+        crumbs.map(({ label, path }, i) => (
+          <Link
+            to={path}
+            className={cn(
+              'whitespace-nowrap text-sans-md hover:text-secondary',
+              // make the last breadcrumb brighter, but only if we're below the top level
+              !isTopLevel && i === crumbs.length - 1 ? 'text-secondary' : 'text-tertiary'
+            )}
+            key={`${label}|${path}`}
+          >
+            {label}
+          </Link>
+        )),
+        <Slash />
+      )}
+    </nav>
+  )
+}

app/hooks/use-title.ts → app/hooks/use-crumbs.ts

@@ -36,15 +36,12 @@ function checkCrumbType(m: MatchWithCrumb): MatchWithCrumb {
   return m
 }
 
-/**
- * non top-level route: Instances / mock-project / Projects / maze-war / Oxide Console
- * top-level route: Oxide Console
- */
-export const useTitle = () =>
+export const useCrumbs = () =>
   useMatches()
     .filter(hasCrumb)
     .map(checkCrumbType)
-    .map((m) => (typeof m.handle.crumb === 'function' ? m.handle.crumb(m) : m.handle.crumb))
-    .reverse()
-    .concat('Oxide Console') // if there are no crumbs, we're still Oxide Console
-    .join(' / ')
+    .map((m) => {
+      const label =
+        typeof m.handle.crumb === 'function' ? m.handle.crumb(m) : m.handle.crumb
+      return { label, path: m.pathname }
+    })

app/layouts/ProjectLayout.tsx

@@ -20,8 +20,8 @@ import {
   Storage16Icon,
 } from '@oxide/design-system/icons/react'
 
+import { Breadcrumbs } from '~/components/Breadcrumbs'
 import { TopBar } from '~/components/TopBar'
-import { TopBarBreadcrumbs } from '~/components/TopBarBreadcrumbs'
 import { SiloSystemPicker } from '~/components/TopBarPicker'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { useQuickActions } from '~/hooks/use-quick-actions'
@@ -79,7 +79,7 @@ export function ProjectLayout({ overrideContentPane }: ProjectLayoutProps) {
     <PageContainer>
       <TopBar>
         <SiloSystemPicker value="silo" />
-        <TopBarBreadcrumbs />
+        <Breadcrumbs />
       </TopBar>
       <Sidebar>
         <Sidebar.Nav>

app/layouts/RootLayout.tsx

@@ -10,7 +10,18 @@ import { Outlet, useNavigation } from 'react-router-dom'
 
 import { MswBanner } from '~/components/MswBanner'
 import { ToastStack } from '~/components/ToastStack'
-import { useTitle } from '~/hooks/use-title'
+import { useCrumbs } from '~/hooks/use-crumbs'
+
+/**
+ * non top-level route: Instances / mock-project / Projects / maze-war / Oxide Console
+ * top-level route: Oxide Console
+ */
+export const useTitle = () =>
+  useCrumbs()
+    .map((c) => c.label)
+    .reverse()
+    .concat('Oxide Console') // if there are no crumbs, we're still Oxide Console
+    .join(' / ')
 
 /**
  * Root layout that applies to the entire app. Modify sparingly. It's rare for

app/layouts/SiloLayout.tsx

@@ -15,9 +15,9 @@ import {
   Metrics16Icon,
 } from '@oxide/design-system/icons/react'
 
+import { Breadcrumbs } from '~/components/Breadcrumbs'
 import { DocsLinkItem, NavLinkItem, Sidebar } from '~/components/Sidebar'
 import { TopBar } from '~/components/TopBar'
-import { TopBarBreadcrumbs } from '~/components/TopBarBreadcrumbs'
 import { SiloSystemPicker } from '~/components/TopBarPicker'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { Divider } from '~/ui/lib/Divider'
@@ -55,7 +55,7 @@ export function SiloLayout() {
     <PageContainer>
       <TopBar>
         <SiloSystemPicker value="silo" />
-        <TopBarBreadcrumbs />
+        <Breadcrumbs />
       </TopBar>
       <Sidebar>
         <Sidebar.Nav>

app/layouts/SystemLayout.tsx

@@ -16,10 +16,10 @@ import {
   Servers16Icon,
 } from '@oxide/design-system/icons/react'
 
+import { Breadcrumbs } from '~/components/Breadcrumbs'
 import { trigger404 } from '~/components/ErrorBoundary'
 import { DocsLinkItem, NavLinkItem, Sidebar } from '~/components/Sidebar'
 import { TopBar } from '~/components/TopBar'
-import { TopBarBreadcrumbs } from '~/components/TopBarBreadcrumbs'
 import { SiloSystemPicker } from '~/components/TopBarPicker'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { Divider } from '~/ui/lib/Divider'
@@ -90,7 +90,7 @@ export function SystemLayout() {
     <PageContainer>
       <TopBar>
         <SiloSystemPicker value="system" />
-        <TopBarBreadcrumbs />
+        <Breadcrumbs />
       </TopBar>
       <Sidebar>
         <Sidebar.Nav>