Improve breadcrumbs

Author: hhvrc

src/lib/state/Breadcrumbs.svelte.ts

@@ -0,0 +1,25 @@
+import type { Pathname } from '$app/types';
+import { onMount } from 'svelte';
+
+export interface BreadCrumbEntry {
+  text: string;
+  href: Pathname | null;
+}
+
+let state = $state<BreadCrumbEntry[]>([]);
+
+export const breadcrumbs = {
+  get State() {
+    return state;
+  },
+  push: (text: string, href: Pathname | null = null) => {
+    onMount(() => {
+      const entry = { text, href };
+      state = [...state, entry];
+      return () => {
+        state = state.filter((e) => e.text !== entry.text || e.href !== entry.href);
+      };
+    });
+  },
+  clear: () => state = [],
+};

src/lib/stores/BreadCrumbStore.ts

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Container from '$lib/components/Container.svelte';
+  import { breadcrumbs } from '$lib/state/Breadcrumbs.svelte';
+  breadcrumbs.push('Home', '/home');
 </script>
 
 <Container>Home</Container>

src/routes/(authenticated)/home/+page.svelte

@@ -13,6 +13,7 @@
   import { type Hub, columns } from './columns';
   import DataTableActions from './data-table-actions.svelte';
   import HubCreateDialog from './dialog-hub-create.svelte';
+  import { breadcrumbs } from '$lib/state/Breadcrumbs.svelte';
 
   const isMobile = new IsMobile();
 
@@ -46,6 +47,7 @@
 
   let showAddHubModal = $state<boolean>(false);
 
+  breadcrumbs.push('Hubs', '/hubs');
   onMount(refreshOwnHubs);
 </script>
 

src/routes/(authenticated)/hubs/+page.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import * as Breadcrumb from "$lib/components/ui/breadcrumb";
+  import { breadcrumbs } from "$lib/state/Breadcrumbs.svelte";
+</script>
+
+{#if breadcrumbs.State.length > 0}
+  <Breadcrumb.Root>
+    <Breadcrumb.List>
+      {#each breadcrumbs.State as crumb, index}
+        <Breadcrumb.Item>
+          {#if index < breadcrumbs.State.length - 1}
+            <Breadcrumb.Link href={crumb.href} class="text-gray-600 dark:text-gray-300">
+              {crumb.text}
+            </Breadcrumb.Link>
+            <Breadcrumb.Separator class="text-gray-600 dark:text-gray-300" />
+          {:else}
+            <Breadcrumb.Page class="text-gray-900 dark:text-gray-100">
+              {crumb.text}
+            </Breadcrumb.Page>
+          {/if}
+        </Breadcrumb.Item>
+      {/each}
+    </Breadcrumb.List>
+  </Breadcrumb.Root>
+{/if}

src/routes/Breadcrumb.svelte

@@ -5,13 +5,12 @@
   import LightSwitch from '$lib/components/LightSwitch.svelte';
   import DiscordIcon from '$lib/components/svg/DiscordIcon.svelte';
   import GithubIcon from '$lib/components/svg/GithubIcon.svelte';
-  import * as Breadcrumb from '$lib/components/ui/breadcrumb';
   import { Button } from '$lib/components/ui/button';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import { useSidebar } from '$lib/components/ui/sidebar';
-  import { BreadCrumbStore } from '$lib/stores/BreadCrumbStore';
   import { UserStore } from '$lib/stores/UserStore';
   import { cn } from '$lib/utils';
+  import Breadcrumb from './Breadcrumb.svelte';
   import type { Pathname } from '$app/types';
 
   let sidebar = useSidebar();
@@ -32,26 +31,7 @@
   <Button variant="ghost" class="size-8" title="Open Sidebar" onclick={() => sidebar.toggle()}>
     <PanelLeft size={24} class="m-0 text-gray-600 dark:text-gray-300" />
   </Button>
-  {#if $BreadCrumbStore.length > 0}
-    <Breadcrumb.Root>
-      <Breadcrumb.List>
-        {#each $BreadCrumbStore as crumb, index}
-          <Breadcrumb.Item>
-            {#if index < $BreadCrumbStore.length - 1}
-              <Breadcrumb.Link href={crumb.href} class="text-gray-600 dark:text-gray-300">
-                {crumb.text}
-              </Breadcrumb.Link>
-              <Breadcrumb.Separator class="text-gray-600 dark:text-gray-300" />
-            {:else}
-              <Breadcrumb.Page class="text-gray-900 dark:text-gray-100">
-                {crumb.text}
-              </Breadcrumb.Page>
-            {/if}
-          </Breadcrumb.Item>
-        {/each}
-      </Breadcrumb.List>
-    </Breadcrumb.Root>
-  {/if}
+  <Breadcrumb />
   <div
     class={cn(
       'flex flex-1 flex-row items-center justify-between space-x-2 py-2',