feat: table of contents (#783)

apps/ui.immich.app/src/lib/constants.ts

@@ -42,6 +42,7 @@ import {
   mdiDotsVertical,
   mdiDownload,
   mdiFormatHeaderPound,
+  mdiFormatListBulleted,
   mdiFormDropdown,
   mdiFormTextarea,
   mdiFormTextbox,
@@ -195,6 +196,7 @@ export const components: ComponentItem[] = [
   { name: 'Scrollable', icon: mdiPanVertical },
   { name: 'Stack', icon: mdiViewSequentialOutline, activeIcon: mdiViewSequential },
   { name: 'Table', icon: mdiTable },
+  { name: 'TableOfContents', icon: mdiFormatListBulleted },
   { name: 'Text', icon: mdiFormatHeaderPound },
   { name: 'Textarea', icon: mdiFormTextarea },
   { name: 'ThemeSwitcher', icon: mdiThemeLightDark },

apps/ui.immich.app/src/routes/(docs)/components/table-of-contents/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import ComponentExamples from '$lib/components/ComponentExamples.svelte';
+  import ComponentPage from '$lib/components/ComponentPage.svelte';
+  import BasicExample from './BasicExample.svelte';
+  import basicExample from './BasicExample.svelte?raw';
+</script>
+
+<ComponentPage name="TableOfContents" description="Link to the headings on the current page">
+  <ComponentExamples examples={[{ title: 'Basic', code: basicExample, component: BasicExample }]} />
+</ComponentPage>

apps/ui.immich.app/src/routes/(docs)/components/table-of-contents/BasicExample.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { TableOfContents, Text, type TableOfContentsItem } from '@immich/ui';
+
+  const items: TableOfContentsItem[] = [
+    { id: 'installation', text: 'Installation', level: 2 },
+    { id: 'package-managers', text: 'Package managers', level: 3 },
+    { id: 'from-source', text: 'From source', level: 3 },
+    { id: 'configuration', text: 'Configuration', level: 2 },
+    { id: 'troubleshooting', text: 'Troubleshooting', level: 2 },
+  ];
+</script>
+
+<div class="flex gap-12">
+  <Text class="min-w-0 grow">
+    The table of contents is a sticky aside, hidden below the <code>xl</code> breakpoint. Level three headings are indented
+    under level two headings.
+  </Text>
+  <TableOfContents {items} />
+</div>