From 8d4db7e03088321ef6a89a156f242d75fbe54806 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 4 Aug 2026 15:19:23 +0300
Subject: [PATCH] web/components: make Tabs use tv

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Tabs.svelte | 135 +++++++++++++++++---------
 1 file changed, 88 insertions(+), 47 deletions(-)

diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index c02f8110e..9551ac972 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import type { Component } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export interface TabDef {
 		id: string;
@@ -9,6 +10,83 @@
 		icon?: Component<SvelteHTMLElements["svg"]>;
 		count?: number;
 	}
+
+	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",
+			icon: "size-4",
+			label: "flex flex-col",
+			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",
+					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",
+					icon: "mr-2",
+					count: "ml-1"
+				}
+			},
+			selected: {
+				true: {
+					count: "bg-background-muted"
+				},
+				false: {
+					count: "bg-background-strong"
+				}
+			},
+			ready: { true: { plate: "opacity-100" }, false: { plate: "opacity-0" } },
+			overlapBottom: { true: { nav: "-mb-px" }, false: {} }
+		},
+		compoundVariants: [
+			{
+				vertical: true,
+				selected: true,
+				class: { item: "bg-background-default text-foreground-default dark:bg-background-inset" }
+			},
+			{
+				vertical: true,
+				selected: false,
+				class: {
+					item: "bg-background-inset text-foreground-muted hover:text-foreground-default dark:bg-background-default"
+				}
+			},
+			{
+				vertical: false,
+				selected: true,
+				class: { item: "[-webkit-text-stroke:0.3px_currentColor]" }
+			},
+			{
+				vertical: false,
+				selected: true,
+				ready: false,
+				class: { item: "border-border-default bg-background-default" }
+			},
+			{
+				vertical: false,
+				selected: false,
+				class: { item: "hover:bg-background-muted hover:dark:bg-background-subtle/50" }
+			}
+		],
+		defaultVariants: {
+			vertical: false,
+			selected: false,
+			ready: false,
+			overlapBottom: false
+		}
+	});
+
+	export type TabsVariants = VariantProps<typeof tabs>;
 </script>
 
 <script lang="ts">
@@ -25,19 +103,15 @@
 		overlapBottom?: boolean;
 	}
 
-	let { tabs, active, label, vertical = false, overlapBottom = false }: Props = $props();
+	let { tabs: defs, active, label, vertical = false, overlapBottom = false }: Props = $props();
 
-	// resolved up front so the plate can match hrefs against the destination url
 	const items = $derived(
-		tabs.map((tab) => ({
+		defs.map((tab) => ({
 			...tab,
 			url: (tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href) as ResolvedPathname
 		}))
 	);
 
-	// 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;
@@ -46,8 +120,6 @@
 		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) {
@@ -76,8 +148,6 @@
 		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;
 		const observer = new ResizeObserver(measure);
@@ -86,9 +156,6 @@
 		return () => observer.disconnect();
 	});
 
-	// the first placement lands instantly so the plate never slides in from the
-	// left; 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;
@@ -97,34 +164,14 @@
 		ready = true;
 	});
 
-	const navClass = $derived(
-		vertical
-			? "h-fit divide-y divide-border-default overflow-hidden rounded border border-border-default"
-			: "relative z-10 flex w-full overflow-x-auto overflow-y-hidden pl-4"
-	);
-
-	const itemClass = (isSelected: boolean) =>
-		vertical
-			? `flex items-center gap-3 px-3 py-2 typography-paragraph-small no-underline hover:no-underline ${
-					isSelected
-						? "bg-background-default text-foreground-default dark:bg-background-inset"
-						: "bg-background-inset text-foreground-muted hover:text-foreground-default dark:bg-background-default"
-				}`
-			: `relative mr-1 flex items-center rounded-t border border-b-0 border-transparent px-4 pt-1 pb-[5px] whitespace-nowrap text-foreground-default no-underline hover:no-underline ${
-					isSelected
-						? `[-webkit-text-stroke:0.3px_currentColor] ${ready ? "" : "border-border-default bg-background-default"}`
-						: "hover:bg-background-muted hover:dark:bg-background-subtle/50"
-				}`;
+	const style = $derived(tabs({ vertical, ready, overlapBottom }));
 </script>
 
-<nav class={[navClass, overlapBottom && "-mb-px"]} aria-label={label} bind:this={nav}>
+<nav class={style.nav()} aria-label={label} bind:this={nav}>
 	{#if !vertical}
 		<span
 			aria-hidden="true"
-			class={[
-				"pointer-events-none absolute top-0 left-0 rounded-t border border-b-0 border-border-default bg-background-default",
-				ready ? "opacity-100" : "opacity-0"
-			]}
+			class={style.plate()}
 			style="translate: {plate.current.x}px; width: {plate.current.width}px; height: {box?.height ??
 				0}px"
 		></span>
@@ -136,27 +183,21 @@
 			bind:this={nodes[i]}
 			href={tab.url}
 			aria-current={active === tab.id ? "page" : undefined}
-			class={itemClass(isSelected)}
+			class={style.item({ selected: isSelected })}
 		>
 			{#if Glyph}
-				<Glyph class={vertical ? "size-4 shrink-0" : "mr-2 size-4 "} aria-hidden="true" />
+				<Glyph class={style.icon()} aria-hidden="true" />
 			{/if}
 			{#if vertical}
 				{tab.label}
 			{:else}
-				<span class="flex flex-col">
+				<span class={style.label()}>
 					{tab.label}
-					<span aria-hidden="true" class="invisible h-0 overflow-hidden font-medium select-none"
-						>{tab.label}</span
-					>
+					<span aria-hidden="true" class={style.ghost()}>{tab.label}</span>
 				</span>
 			{/if}
 			{#if tab.count}
-				<span
-					class="rounded-sm bg-background-inset px-1 typography-paragraph-small {vertical
-						? 'ml-auto'
-						: 'ml-1'}">{tab.count}</span
-				>
+				<span class={style.count({ selected: isSelected })}>{tab.count}</span>
 			{/if}
 		</a>
 	{/each}
-- 
2.51.2