From 6c83df1a1cdabe22eddd66abab74d51ed6bd4db3 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 4 Aug 2026 18:59:05 +0200
Subject: [PATCH] web/components: make the settings sidebar a vertical Tabs

The vertical variant now looks like the old SettingsNav and slides the
same plate the horizontal tabs do, so the current section animates as you
move between pages. SettingsNav keeps only the phone picker, which is now
a Select.

This also restores the tv refactor in Tabs.svelte, which c54416b2 undid by
accident.

Signed-off-by: eti <eti@eti.tf>
---
 .../components/settings/SettingsNav.svelte    |  87 +++-----------
 web/src/lib/components/ui/Tabs.stories.svelte |  17 +++
 web/src/lib/components/ui/Tabs.svelte         | 107 +++++++++++-------
 3 files changed, 100 insertions(+), 111 deletions(-)

diff --git a/web/src/lib/components/settings/SettingsNav.svelte b/web/src/lib/components/settings/SettingsNav.svelte
index 38a2e4fd..de642ad5 100644
--- a/web/src/lib/components/settings/SettingsNav.svelte
+++ b/web/src/lib/components/settings/SettingsNav.svelte
@@ -1,19 +1,14 @@
 <script module lang="ts">
-	import type { Component } from "svelte";
-	import type { SvelteHTMLElements } from "svelte/elements";
+	import type { TabDef } from "$lib/components/ui/Tabs.svelte";
 
-	export interface SettingsNavItem {
-		id: string;
-		label: string;
-		href: string;
-		icon?: Component<SvelteHTMLElements["svg"]>;
-	}
+	export type SettingsNavItem = TabDef;
 </script>
 
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
-	import ChevronDown from "$icon/chevron-down";
+	import Select from "$lib/components/ui/Select.svelte";
+	import Tabs from "$lib/components/ui/Tabs.svelte";
 
 	interface Props {
 		items: SettingsNavItem[];
@@ -23,78 +18,28 @@
 
 	let { items, active, label = "Settings" }: Props = $props();
 
+	const options = $derived(items.map((item) => ({ value: item.id, label: item.label })));
 	const ActiveGlyph = $derived(items.find((i) => i.id === active)?.icon);
 
-	const jump = (event: Event) => {
-		const item = items.find((i) => i.id === (event.currentTarget as HTMLSelectElement).value);
+	const jump = (id: string) => {
+		const item = items.find((i) => i.id === id);
 		if (item) void goto(resolve(item.href as "/"));
 	};
-
-	// Figma DS "Navigation / Button" (1009:2662) has four states across Active ×
-	// Hovered. Inactive/resting is the only one with no fill and no border, so the
-	// hover borders have to be added rather than recoloured — otherwise the item
-	// grows by 1px on hover.
-	const itemClass = (isActive: boolean) =>
-		[
-			"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",
-			isActive
-				? "border-border-navigation-item-active bg-background-navigation-item hover:border-border-strong hover:bg-background-muted"
-				: "border-transparent hover:border-border-strong hover:bg-background-inset"
-		].join(" ");
 </script>
 
 <!-- Below md the panel is only as wide as the phone, so the sidebar collapses into
      a native picker rather than seven rows that push the page content off-screen.
      The hairline under it stands in for the sidebar's edge. -->
 <div class="flex w-full flex-col gap-4 md:hidden">
-	<div class="relative w-full">
-		{#if ActiveGlyph}
-			<ActiveGlyph
-				class="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-foreground-default"
-				aria-hidden="true"
-			/>
-		{/if}
-		<select
-			aria-label={label}
-			value={active}
-			onchange={jump}
-			class="h-8 w-full appearance-none rounded-sm border border-border-default bg-background-default pr-8 typography-paragraph-regular text-foreground-default outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus {ActiveGlyph
-				? 'pl-7'
-				: 'pl-2'}"
-		>
-			{#each items as item (item.id)}
-				<option value={item.id}>{item.label}</option>
-			{/each}
-		</select>
-		<ChevronDown
-			class="pointer-events-none absolute top-1/2 right-2 size-3.5 -translate-y-1/2 text-foreground-default"
-			aria-hidden="true"
-		/>
-	</div>
+	<!-- the active tab lives in the url, so navigation is what updates it: no two way binding -->
+	<Select {options} value={active} onSelect={jump} {label} icon={ActiveGlyph} />
 	<hr class="w-full border-0 border-t border-border-default" />
 </div>
 
-<nav
-	class="hidden w-full shrink-0 flex-col gap-1 bg-background-navigation-frame p-2 md:flex md:w-44 md:self-stretch md:border-r md:border-border-default"
-	aria-label={label}
->
-	{#each items as item (item.id)}
-		{@const isActive = active === item.id}
-		{@const Glyph = item.icon}
-		<a
-			href={resolve(item.href as "/")}
-			aria-current={isActive ? "page" : undefined}
-			class={itemClass(isActive)}
-		>
-			{#if Glyph}
-				<Glyph class="size-3.5 shrink-0" aria-hidden="true" />
-			{/if}
-			<!-- 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>
+<Tabs
+	tabs={items}
+	{active}
+	{label}
+	vertical
+	class="hidden shrink-0 md:flex md:w-44 md:self-stretch md:border-r md:border-border-default"
+/>
diff --git a/web/src/lib/components/ui/Tabs.stories.svelte b/web/src/lib/components/ui/Tabs.stories.svelte
index 8f4e83aa..11de46a3 100644
--- a/web/src/lib/components/ui/Tabs.stories.svelte
+++ b/web/src/lib/components/ui/Tabs.stories.svelte
@@ -30,3 +30,20 @@
 <Story name="Default" />
 <Story name="SecondActive" args={{ active: "repos" }} />
 <Story name="WithoutIcons" args={{ tabs: plainTabs, active: "open" }} />
+<!-- the vertical variant is the settings sidebar shape: it stretches to its container
+     rather than hugging its items, so the stories give it a tall narrow box -->
+<Story name="Vertical" args={{ vertical: true }}>
+	{#snippet template(args)}
+		<div class="flex h-80 w-44 items-stretch">
+			<Tabs {...args} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="VerticalSecondActive" args={{ vertical: true, active: "repos" }}>
+	{#snippet template(args)}
+		<div class="flex h-80 w-44 items-stretch">
+			<Tabs {...args} />
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index 9551ac97..e1983a97 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -14,26 +14,32 @@
 	export const tabs = tv({
 		slots: {
 			nav: "",
-			plate:
-				"pointer-events-none absolute top-0 left-0 rounded-t border border-b-0 border-border-default bg-background-default",
-			item: "flex items-center no-underline hover:no-underline",
+			plate: "pointer-events-none absolute top-0 left-0",
+			item: "relative flex items-center no-underline hover:no-underline",
 			icon: "size-4",
-			label: "flex flex-col",
+			label: "",
 			ghost: "invisible h-0 overflow-hidden font-medium select-none",
 			count: "rounded-sm px-1 typography-paragraph-small"
 		},
 		variants: {
 			vertical: {
 				true: {
-					nav: "h-fit divide-y divide-border-default overflow-hidden rounded-sm border border-border-default",
-					item: "gap-3 px-3 py-2 typography-paragraph-small",
-					icon: "shrink-0",
+					nav: "relative flex w-full flex-col gap-1 bg-background-navigation-frame p-2",
+					plate:
+						"rounded-sm border border-border-navigation-item-active bg-background-navigation-item",
+					item: "min-h-8 w-full gap-1.5 overflow-hidden rounded-sm border border-transparent px-3 py-1.5 typography-paragraph-regular text-foreground-default transition-colors duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+					icon: "size-3.5 shrink-0",
+					// Figma clips the item rather than letting a long label wrap it taller; an
+					// ellipsis keeps that height without hiding the label outright
+					label: "min-w-0 truncate",
 					count: "ml-auto"
 				},
 				false: {
 					nav: "relative z-10 flex w-full overflow-x-auto overflow-y-hidden pl-4",
-					item: "relative mr-1 rounded-t border border-b-0 border-transparent px-4 pt-1 pb-1.25 whitespace-nowrap text-foreground-default",
+					plate: "rounded-t border border-b-0 border-border-default bg-background-default",
+					item: "mr-1 rounded-t border border-b-0 border-transparent px-4 pt-1 pb-1.25 whitespace-nowrap text-foreground-default",
 					icon: "mr-2",
+					label: "flex flex-col",
 					count: "ml-1"
 				}
 			},
@@ -52,19 +58,15 @@
 			{
 				vertical: true,
 				selected: true,
-				class: { item: "bg-background-default text-foreground-default dark:bg-background-inset" }
-			},
-			{
-				vertical: true,
-				selected: false,
+				ready: false,
 				class: {
-					item: "bg-background-inset text-foreground-muted hover:text-foreground-default dark:bg-background-default"
+					item: "border-border-navigation-item-active bg-background-navigation-item"
 				}
 			},
 			{
-				vertical: false,
-				selected: true,
-				class: { item: "[-webkit-text-stroke:0.3px_currentColor]" }
+				vertical: true,
+				selected: false,
+				class: { item: "hover:bg-background-inset" }
 			},
 			{
 				vertical: false,
@@ -101,10 +103,19 @@
 		label?: string;
 		vertical?: boolean;
 		overlapBottom?: boolean;
+		class?: string;
 	}
 
-	let { tabs: defs, active, label, vertical = false, overlapBottom = false }: Props = $props();
+	let {
+		tabs: defs,
+		active,
+		label,
+		vertical = false,
+		overlapBottom = false,
+		class: navClass
+	}: Props = $props();
 
+	// resolved up front so the plate can match hrefs against the destination url
 	const items = $derived(
 		defs.map((tab) => ({
 			...tab,
@@ -112,6 +123,9 @@
 		}))
 	);
 
+	// the plate follows where we're heading rather than where we are, so it leaves
+	// the moment you click instead of waiting on the route's load; aria-current
+	// stays behind on the page that's still on screen
 	const selected = $derived.by(() => {
 		const dest = navigating.to?.url;
 		if (!dest) return active;
@@ -120,6 +134,8 @@
 		let bestLength = -1;
 		for (const item of items) {
 			if (item.url === dest.pathname + dest.search) return item.id;
+			// a plain path also owns everything nested under it, so an issue page
+			// keeps the issues tab lit; a query-scoped tab only matches exactly
 			if (item.url.includes("?")) continue;
 			const owns = dest.pathname === item.url || dest.pathname.startsWith(`${item.url}/`);
 			if (owns && item.url.length > bestLength) {
@@ -132,50 +148,63 @@
 
 	let nav = $state<HTMLElement>();
 	let nodes = $state<(HTMLElement | undefined)[]>([]);
-	let box = $state<{ x: number; width: number; height: number }>();
+	let box = $state<{ top: number; left: number; width: number; height: number }>();
 	let ready = $state(false);
 
-	const plate = new Spring({ x: 0, width: 0 }, { stiffness: 0.145, damping: 0.65, precision: 0.1 });
+	const plate = new Spring(
+		{ pos: 0, size: 0 },
+		{ stiffness: 0.145, damping: 0.65, precision: 0.1 }
+	);
 
 	const measure = () => {
 		const node = nodes[items.findIndex((item) => item.id === selected)];
-		if (!node) return;
-		box = { x: node.offsetLeft, width: node.offsetWidth, height: node.offsetHeight };
+		if (!node?.offsetParent) return;
+		box = {
+			top: node.offsetTop,
+			left: node.offsetLeft,
+			width: node.offsetWidth,
+			height: node.offsetHeight
+		};
 	};
 
 	$effect(() => {
-		if (vertical) return;
 		measure();
 	});
 
+	// watch every tab, not just the row: a preceding tab changing width (a count
+	// arriving, a webfont landing) shifts the plate without resizing the row
 	$effect(() => {
-		if (vertical || !nav) return;
+		if (!nav) return;
 		const observer = new ResizeObserver(measure);
 		observer.observe(nav);
 		for (const node of nodes) if (node) observer.observe(node);
 		return () => observer.disconnect();
 	});
 
+	// the first placement lands instantly so the plate never slides in from nowhere;
+	// until it happens the selected tab wears the chrome itself, which is also what
+	// server-rendered and script-less pages get
 	let placed = false;
 	$effect(() => {
 		if (!box) return;
-		plate.set({ x: box.x, width: box.width }, { instant: !placed || prefersReducedMotion.current });
+		plate.set(vertical ? { pos: box.top, size: box.height } : { pos: box.left, size: box.width }, {
+			instant: !placed || prefersReducedMotion.current
+		});
 		placed = true;
 		ready = true;
 	});
 
 	const style = $derived(tabs({ vertical, ready, overlapBottom }));
+
+	const plateStyle = $derived(
+		vertical
+			? `translate: ${box?.left ?? 0}px ${plate.current.pos}px; width: ${box?.width ?? 0}px; height: ${plate.current.size}px`
+			: `translate: ${plate.current.pos}px; width: ${plate.current.size}px; height: ${box?.height ?? 0}px`
+	);
 </script>
 
-<nav class={style.nav()} aria-label={label} bind:this={nav}>
-	{#if !vertical}
-		<span
-			aria-hidden="true"
-			class={style.plate()}
-			style="translate: {plate.current.x}px; width: {plate.current.width}px; height: {box?.height ??
-				0}px"
-		></span>
-	{/if}
+<nav class={style.nav({ class: navClass })} aria-label={label} bind:this={nav}>
+	<span aria-hidden="true" class={style.plate()} style={plateStyle}></span>
 	{#each items as tab, i (tab.id)}
 		{@const isSelected = selected === tab.id}
 		{@const Glyph = tab.icon}
@@ -188,14 +217,12 @@
 			{#if Glyph}
 				<Glyph class={style.icon()} aria-hidden="true" />
 			{/if}
-			{#if vertical}
+			<span class={style.label()}>
 				{tab.label}
-			{:else}
-				<span class={style.label()}>
-					{tab.label}
+				{#if !vertical}
 					<span aria-hidden="true" class={style.ghost()}>{tab.label}</span>
-				</span>
-			{/if}
+				{/if}
+			</span>
 			{#if tab.count}
 				<span class={style.count({ selected: isSelected })}>{tab.count}</span>
 			{/if}
-- 
2.51.2