From 2bb33b4b92d46de0b90ac8a0089f6a6f72267e99 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 4 Aug 2026 18:54:57 +0200
Subject: [PATCH] web/components: use tv in Topbar

Move the layout classes into a tv slots recipe with marketing/app and
pending variants, replacing the inline ternary and the divider snippet.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/shell/Topbar.svelte | 152 +++++++++++++--------
 1 file changed, 98 insertions(+), 54 deletions(-)

diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index bd03724a..7dd03204 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -1,3 +1,47 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const topbar = tv({
+		slots: {
+			nav: "h-11.5 w-full px-5",
+			row: "flex h-full items-center justify-between gap-4",
+			brand: "flex shrink-0 items-center gap-2",
+			logo: "flex shrink-0 items-center gap-2 no-underline hover:no-underline",
+			wordmark: "hidden sm:inline-flex",
+			mark: "inline-flex sm:hidden",
+			actions: "flex items-center",
+			action: "flex items-center",
+			divider: "mx-2 hidden h-6 w-px self-center rounded-md bg-background-inset md:block",
+			link: "flex items-center text-foreground-default transition-colors hover:text-foreground-muted",
+			identity: "flex items-center",
+			ball: "size-8 rounded-full bg-background-inset md:size-5",
+			bar: "hidden h-4 w-24 rounded-sm bg-background-inset md:block"
+		},
+		variants: {
+			variant: {
+				marketing: { actions: "gap-3.5" },
+				app: {
+					nav: "border-b border-border-default bg-background-default",
+					actions: "gap-2"
+				}
+			},
+			// The signing-in placeholder wraps a spinner, so its ball gets a border and tighter gap.
+			pending: {
+				true: {
+					identity: "gap-1",
+					ball: "flex items-center justify-center border border-border-default text-foreground-placeholder"
+				},
+				false: { identity: "gap-2" }
+			}
+		},
+		defaultVariants: {
+			pending: false
+		}
+	});
+
+	export type TopbarVariants = VariantProps<typeof topbar>;
+</script>
+
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import Button from "../ui/Button.svelte";
@@ -21,8 +65,7 @@
 	import Separator from "../ui/Separator.svelte";
 
 	interface Props {
-		/** `bare` is the onboarding chrome: the wordmark alone, nothing to click away to */
-		variant: "marketing" | "app" | "bare";
+		variant: NonNullable<TopbarVariants["variant"]>;
 		onSignOut?: () => void | Promise<void>;
 		user: CurrentUser | null;
 		loading?: boolean;
@@ -31,42 +74,28 @@
 	let { variant, onSignOut, user, loading = false }: Props = $props();
 
 	const appPath = (path: string) => resolve(path as "/");
+
+	const style = $derived(topbar({ variant }));
 </script>
 
-{#snippet divider(classes = "")}
-	<div
-		class={["hidden h-6 w-px self-center rounded-md bg-background-inset md:block", classes]}
-	></div>
-{/snippet}
-
-<nav
-	class={`h-11 w-full px-5
-	        ${variant === "app" ? "border-b border-border-default bg-background-default shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]" : ""}
-	      `}
-	aria-label="main"
->
-	<div class="flex h-full items-center justify-between gap-4">
-		<div class="flex shrink-0 items-center gap-2">
-			<a
-				href={resolve("/")}
-				class="flex shrink-0 items-center gap-2 no-underline hover:no-underline"
-			>
-				<span class="hidden sm:inline-flex">
+<nav class={style.nav()} aria-label="main">
+	<div class={style.row()}>
+		<div class={style.brand()}>
+			<a href={resolve("/")} class={style.logo()}>
+				<span class={style.wordmark()}>
 					<Logo wordmark alpha class="h-6.5" />
 				</span>
-				<span class="inline-flex sm:hidden">
+				<span class={style.mark()}>
 					<img src="/logos/dolly.svg" alt="tangled" class="size-8" />
 				</span>
 			</a>
 		</div>
 
-		<div class={variant === "marketing" ? "flex items-center gap-3.5" : "flex items-center gap-4"}>
-			{#if variant === "bare"}
-				<!-- nothing: onboarding has no escape hatches in the bar itself -->
-			{:else if variant === "marketing"}
+		<div class={style.actions()}>
+			{#if variant === "marketing"}
 				<TopbarSearch />
 
-				{@render divider()}
+				<div class={style.divider()}></div>
 
 				<Button variant="ghost" href={resolve("/login")}>Login</Button>
 
@@ -78,12 +107,19 @@
 				</Button>
 			{:else}
 				{#if user || loading}
-					<div class="order-3 flex items-center md:order-1">
+					<div class={style.action({ class: "order-3 hidden sm:block md:order-1" })}>
 						<TopbarSearch />
 					</div>
 
-					<div class="order-1 flex items-center md:order-3">
-						<Dropdown id="new-menu" group="topbar" variant="button" align="right">
+					<div class={style.action({ class: "order-1 md:order-3" })}>
+						<Dropdown
+							insetShadow={true}
+							size="sm"
+							id="new-menu"
+							group="topbar"
+							variant="button"
+							align="right"
+						>
 							{#snippet trigger()}
 								<Plus class="size-3.5" aria-hidden="true" />
 								<span class="hidden md:inline">New</span>
@@ -93,40 +129,48 @@
 						</Dropdown>
 					</div>
 
-					<div class="order-2 flex items-center md:order-4">
-						<a
+					<div class={style.action({ class: "order-2 md:order-4" })}>
+						<Button
+							variant="ghost"
 							href={appPath("/notifications")}
-							class="flex items-center text-foreground-default transition-colors hover:text-foreground-muted"
+							icon={Bell}
+							size="sm"
+							aria-hidden="true"
 							aria-label="Notifications"
-						>
-							<Bell class="size-4" aria-hidden="true" />
-						</a>
+						/>
 					</div>
 
 					<div class="order-3 md:hidden">
-						<a href={appPath("/search")} class="text-foreground-subtle" aria-label="Search">
-							<Search class="size-5" aria-hidden="true" />
-						</a>
+						<Button
+							variant="ghost"
+							href={appPath("/search")}
+							icon={Search}
+							size="sm"
+							aria-hidden="true"
+							aria-label="Search"
+						/>
 					</div>
 
-					{@render divider("md:order-2")}
+					<div class={style.divider({ class: "md:order-2" })}></div>
 				{/if}
 
-				<div class="order-4 flex items-center md:order-5">
+				<div class={style.action({ class: "order-4 md:order-5" })}>
 					{#if loading}
-						<div class="flex items-center gap-1" role="status" aria-label="Signing in">
-							<span
-								class="flex size-8 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-placeholder md:size-5"
-							>
+						<div class={style.identity({ pending: true })} role="status" aria-label="Signing in">
+							<span class={style.ball({ pending: true })}>
 								<Spinner class="size-4" />
 							</span>
-							<span
-								class="hidden h-4 w-24 rounded-sm bg-background-inset md:block"
-								aria-hidden="true"
-							></span>
+							<span class={style.bar()} aria-hidden="true"></span>
 						</div>
 					{:else if user}
-						<Dropdown id="profile-menu" group="topbar" align="right">
+						<Dropdown
+							id="profile-menu"
+							group="topbar"
+							align="right"
+							variant="button"
+							buttonVariant="ghost"
+							size="sm"
+						>
 							{#snippet trigger()}
 								<User did={user.did} handle={user.handle} />
 							{/snippet}
@@ -138,13 +182,13 @@
 								Strings
 							</DropdownItem>
 							<DropdownItem href="/settings" icon={Cog}>Settings</DropdownItem>
-							<Separator/>
+							<Separator />
 							<DropdownItem danger icon={LogOut} onclick={onSignOut}>Logout</DropdownItem>
 						</Dropdown>
 					{:else}
-						<div class="flex items-center gap-2" aria-hidden="true">
-							<span class="size-8 rounded-full bg-background-inset md:size-5"></span>
-							<span class="hidden h-4 w-24 rounded-sm bg-background-inset md:block"></span>
+						<div class={style.identity()} aria-hidden="true">
+							<span class={style.ball()}></span>
+							<span class={style.bar()}></span>
 						</div>
 					{/if}
 				</div>
-- 
2.51.2