From fe1ce72b1f38f23d31fbcadd7aface79788f5a6a Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 30 Jul 2026 18:47:19 +0200
Subject: [PATCH] web/settings: match SettingsNav to the design system
 navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the DS navigation frame gaps its items by 4px and clips each one so a
long label cannot grow it taller. add both, with a truncating label span
so clipped text ends in an ellipsis instead of vanishing.

figma draws the item 36px tall where this renders 38px, but that 2px is
the CSS border adding to a box whose figma stroke sits inside it, and
Button md carries the same offset — leave it.

add stories too: /settings is auth-gated, so storybook is the only place
these four item states can be reviewed.

Signed-off-by: eti <eti@eti.tf>
---
 .../settings/SettingsNav.stories.svelte       | 54 +++++++++++++++++++
 .../components/settings/SettingsNav.svelte    |  8 +--
 2 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 web/src/lib/components/settings/SettingsNav.stories.svelte

diff --git a/web/src/lib/components/settings/SettingsNav.stories.svelte b/web/src/lib/components/settings/SettingsNav.stories.svelte
new file mode 100644
index 00000000..961fc407
--- /dev/null
+++ b/web/src/lib/components/settings/SettingsNav.stories.svelte
@@ -0,0 +1,54 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import SettingsNav, { type SettingsNavItem } from "./SettingsNav.svelte";
+	import User from "$icon/user-round";
+	import Key from "$icon/key";
+	import Mail from "$icon/mail";
+	import Bell from "$icon/bell";
+	import Volleyball from "$icon/volleyball";
+	import Spool from "$icon/spool";
+	import Globe from "$icon/globe";
+
+	const items: SettingsNavItem[] = [
+		{ id: "profile", label: "Profile", href: "/settings", icon: User },
+		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
+		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
+		{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
+		{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
+		{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
+		{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
+	];
+
+	const { Story } = defineMeta({
+		title: "Settings/SettingsNav",
+		component: SettingsNav,
+		tags: ["autodocs"],
+		args: { items, active: "profile" }
+	});
+</script>
+
+<!-- the frame stretches to its container in the settings layout, so the stories put it
+     in a tall box rather than letting it hug its items -->
+<Story name="Default">
+	{#snippet template(args)}
+		<div class="flex h-[568px] w-44 items-stretch">
+			<SettingsNav {...args} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Active elsewhere" args={{ active: "notifications" }}>
+	{#snippet template(args)}
+		<div class="flex h-[568px] w-44 items-stretch">
+			<SettingsNav {...args} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="No icons" args={{ items: items.map(({ id, label, href }) => ({ id, label, href })) }}>
+	{#snippet template(args)}
+		<div class="flex h-[568px] w-44 items-stretch">
+			<SettingsNav {...args} />
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/settings/SettingsNav.svelte b/web/src/lib/components/settings/SettingsNav.svelte
index e60c3c60..4326760a 100644
--- a/web/src/lib/components/settings/SettingsNav.svelte
+++ b/web/src/lib/components/settings/SettingsNav.svelte
@@ -27,7 +27,7 @@
 	// grows by 1px on hover.
 	const itemClass = (isActive: boolean) =>
 		[
-			"flex min-h-8 w-full items-center gap-1.5 rounded-sm border px-3 py-1.5",
+			"flex min-h-8 w-full items-center gap-1.5 overflow-hidden rounded-sm border px-3 py-1.5",
 			"typography-paragraph-regular text-foreground-default no-underline hover:no-underline",
 			"transition-colors duration-150 ease-in-out",
 			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
@@ -38,7 +38,7 @@
 </script>
 
 <nav
-	class="flex w-full shrink-0 flex-col border-b border-border-default bg-background-navigation-frame p-2 md:w-44 md:self-stretch md:border-r md:border-b-0"
+	class="flex w-full shrink-0 flex-col gap-1 border-b border-border-default bg-background-navigation-frame p-2 md:w-44 md:self-stretch md:border-r md:border-b-0"
 	aria-label={label}
 >
 	{#each items as item (item.id)}
@@ -52,7 +52,9 @@
 			{#if Glyph}
 				<Glyph class="size-3.5 shrink-0" aria-hidden="true" />
 			{/if}
-			{item.label}
+			<!-- Figma clips the item rather than letting a long label wrap it taller; an
+			     ellipsis keeps that height without hiding the label outright -->
+			<span class="min-w-0 truncate">{item.label}</span>
 		</a>
 	{/each}
 </nav>
-- 
2.51.2