feat: add breadcrumbs navigation

Author: openscript

.changeset/fifty-seas-thank.md

@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": patch
+"@quassel/ui": patch
+---
+
+Add export ui

.changeset/many-snails-try.md

@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": patch
+"@quassel/ui": patch
+---
+
+Add content shell

apps/frontend/src/components/Breadcrumbs.tsx

@@ -0,0 +1,29 @@
+import { isMatch, Link, useLocation, useMatches } from "@tanstack/react-router";
+import { Anchor, Breadcrumbs } from "@quassel/ui";
+
+// Inspired by https://github.com/TanStack/router/blob/main/examples/react/kitchen-sink-file-based/src/components/Breadcrumbs.tsx
+export function BreadcrumbsNavigation() {
+  const matches = useMatches();
+  const location = useLocation();
+
+  if (matches.some((match) => match.status === "pending")) return null;
+
+  const matchesWithTitle = matches.filter((match) => isMatch(match, "context.title"));
+  const entries = matchesWithTitle.map((match) => ({ label: match.context.title, to: match.fullPath }));
+  const uniqueEntries = entries.filter((entry, index) => entries.findIndex((e) => e.label === entry.label) === index);
+
+  // Remove the last entry if it's the current page
+  if (uniqueEntries.length > 0 && uniqueEntries[uniqueEntries.length - 1].to.startsWith(location.pathname)) {
+    uniqueEntries.pop();
+  }
+
+  return (
+    <Breadcrumbs>
+      {uniqueEntries.map((e) => (
+        <Anchor key={e.label} renderRoot={(props) => <Link to={e.to} {...props} />}>
+          {e.label}
+        </Anchor>
+      ))}
+    </Breadcrumbs>
+  );
+}

apps/frontend/src/routes/_auth/administration.tsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { $layout } from "../../stores/layout";
 import { i18n } from "../../stores/i18n";
 import { ContentShell } from "@quassel/ui";
+import { BreadcrumbsNavigation } from "../../components/Breadcrumbs";
 
 const messages = i18n("AdministrationRoute", {
   title: "Administration",
@@ -19,7 +20,7 @@ function AdministrationLayout() {
   const actions = matches[matches.length - 1]?.context.actions;
 
   return (
-    <ContentShell title={title || messages.get().title} actions={actions}>
+    <ContentShell title={title || messages.get().title} breadcrumbs={<BreadcrumbsNavigation />} actions={actions}>
       <Outlet />
     </ContentShell>
   );

libs/ui/src/components/ContentShell.tsx

@@ -4,11 +4,13 @@ import { PropsWithChildren, ReactElement } from "react";
 type Props = PropsWithChildren<{
   title: string;
   actions?: ReactElement[];
+  breadcrumbs?: ReactElement;
 }>;
 
-export function ContentShell({ title, actions, children }: Props) {
+export function ContentShell({ title, breadcrumbs, actions, children }: Props) {
   return (
     <>
+      {breadcrumbs}
       <Flex justify="space-between">
         <Title>{title}</Title>
         <div>{actions}</div>

libs/ui/src/index.ts

@@ -52,6 +52,7 @@ export {
   ActionIcon,
   Anchor,
   AppShell,
+  Breadcrumbs,
   Button,
   Checkbox,
   Combobox,