From 1cfbae7515af658f5e6c87ba19c9e203ed0fdf8e Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 17 Jul 2026 14:25:03 +0100
Subject: [PATCH] web/lib/components: add vertical variant to Tabs

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/ui/Tabs.svelte | 50 +++++++++++++++++++--------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index fa7c6875..b9e1ed2a 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -18,35 +18,57 @@
 		tabs: TabDef[];
 		active: string;
 		label?: string;
+		vertical?: boolean;
 	}
 
-	let { tabs, active, label }: Props = $props();
+	let { tabs, active, label, vertical = false }: Props = $props();
+
+	const navClass = $derived(
+		vertical
+			? "h-fit divide-y divide-border-default overflow-hidden rounded border border-border-default"
+			: "flex w-full overflow-x-auto overflow-y-hidden pl-4"
+	);
+
+	const itemClass = (isActive: boolean) =>
+		vertical
+			? `flex items-center gap-3 px-3 py-2 text-sm no-underline hover:no-underline ${
+					isActive
+						? "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 px-4 py-1 whitespace-nowrap text-foreground-default no-underline hover:no-underline ${
+					isActive
+						? "-mb-px bg-background-default [-webkit-text-stroke:0.3px_currentColor]"
+						: "hover:bg-background-inset"
+				}`;
 </script>
 
-<nav class="flex w-full overflow-x-auto overflow-y-hidden pl-4" aria-label={label}>
+<nav class={navClass} aria-label={label}>
 	{#each tabs as tab (tab.id)}
 		{@const isActive = active === tab.id}
 		{@const Glyph = tab.icon}
 		<a
 			href={tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href}
 			aria-current={isActive ? "page" : undefined}
-			class={`relative mr-1 flex items-center rounded-t px-4 py-1 whitespace-nowrap text-foreground-default no-underline hover:no-underline ${
-				isActive
-					? "-mb-px bg-background-default [-webkit-text-stroke:0.3px_currentColor]"
-					: "hover:bg-background-inset"
-			}`}
+			class={itemClass(isActive)}
 		>
 			{#if Glyph}
-				<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
+				<Glyph class={vertical ? "size-4 shrink-0" : "mr-2 h-4 w-4"} aria-hidden="true" />
 			{/if}
-			<span class="flex flex-col">
+			{#if vertical}
 				{tab.label}
-				<span aria-hidden="true" class="invisible h-0 overflow-hidden font-medium select-none"
-					>{tab.label}</span
-				>
-			</span>
+			{:else}
+				<span class="flex flex-col">
+					{tab.label}
+					<span aria-hidden="true" class="invisible h-0 overflow-hidden font-medium select-none"
+						>{tab.label}</span
+					>
+				</span>
+			{/if}
 			{#if tab.count}
-				<span class="ml-1 rounded bg-background-inset px-1 text-sm">{tab.count}</span>
+				<span class="rounded bg-background-inset px-1 text-sm {vertical ? 'ml-auto' : 'ml-1'}"
+					>{tab.count}</span
+				>
 			{/if}
 		</a>
 	{/each}
-- 
2.51.2