From 705edf2e9a20115e61d709f4a787d2aa54a92c17 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 15 Jul 2026 16:19:41 +0000
Subject: [PATCH] web/components/ui: add Avatar, Dropdown & Spinner stories

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Avatar.stories.svelte | 30 ++++++++++++++++++++++++++++++
 web/src/lib/components/ui/Dropdown.stories.svelte | 79 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/lib/components/ui/Spinner.stories.svelte | 24 ++++++++++++++++++++++++
 3 file(s) changed, 133 insertion(s)(+), 0 deletion(s)(-)

diff --git a/web/src/lib/components/ui/Avatar.stories.svelte b/web/src/lib/components/ui/Avatar.stories.svelte
new file mode 100644
--- /dev/null
+++ b/web/src/lib/components/ui/Avatar.stories.svelte
@@ -0,0 +1,30 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Avatar from "./Avatar.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Avatar",
+		component: Avatar,
+		tags: ["autodocs"],
+		argTypes: {
+			src: { control: "text" },
+			handle: { control: "text" },
+			size: { control: "text" }
+		},
+		args: {
+			handle: "user.tld"
+		}
+	});
+</script>
+
+<Story name="Fallback" />
+<Story name="With image" args={{ src: "https://avatars.githubusercontent.com/u/1" }} />
+<Story name="Broken image" args={{ src: "https://example.invalid/broken.png" }} />
+
+<Story name="Sizes" asChild>
+	<div class="flex items-center gap-3">
+		<Avatar handle="user.tld" size="size-6" />
+		<Avatar handle="user.tld" size="size-10" />
+		<Avatar handle="user.tld" size="size-16" />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Dropdown.stories.svelte b/web/src/lib/components/ui/Dropdown.stories.svelte
new file mode 100644
--- /dev/null
+++ b/web/src/lib/components/ui/Dropdown.stories.svelte
@@ -0,0 +1,79 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ChevronDown from "$icon/chevron-down";
+	import Pencil from "$icon/pencil";
+	import Settings from "$icon/settings";
+	import LogOut from "$icon/log-out";
+	import Dropdown from "./Dropdown.svelte";
+	import DropdownItem from "./DropdownItem.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Dropdown",
+		component: Dropdown,
+		tags: ["autodocs"]
+	});
+</script>
+
+<!-- Dropdown's `trigger` and `children` are snippet props, so the trigger content is
+	declared once below and passed by reference; every story renders via `asChild` rather
+	than through the args table. Click the trigger in the canvas to open the menu —
+	`open` is internal state, not a prop. -->
+
+{#snippet menuTrigger()}
+	<span>Menu</span>
+	<ChevronDown class="size-4" />
+{/snippet}
+
+{#snippet actionsTrigger()}
+	<span>Actions</span>
+	<ChevronDown class="size-4" />
+{/snippet}
+
+{#snippet firstTrigger()}
+	<span>First</span>
+	<ChevronDown class="size-4" />
+{/snippet}
+
+{#snippet secondTrigger()}
+	<span>Second</span>
+	<ChevronDown class="size-4" />
+{/snippet}
+
+<Story name="Plain trigger" asChild>
+	<Dropdown trigger={menuTrigger} label="Menu">
+		<DropdownItem icon={Pencil}>Edit</DropdownItem>
+		<DropdownItem icon={Settings}>Settings</DropdownItem>
+		<DropdownItem icon={LogOut} danger>Log out</DropdownItem>
+	</Dropdown>
+</Story>
+
+<Story name="Button trigger" asChild>
+	<Dropdown variant="button" trigger={actionsTrigger} label="Actions">
+		<DropdownItem icon={Pencil}>Edit</DropdownItem>
+		<DropdownItem icon={Settings}>Settings</DropdownItem>
+	</Dropdown>
+</Story>
+
+<!-- DropdownItem states: plain text, with icon, as a link (href), and the danger variant. -->
+<Story name="Item states" asChild>
+	<Dropdown trigger={menuTrigger} label="Menu">
+		<DropdownItem>Plain item</DropdownItem>
+		<DropdownItem icon={Settings}>With icon</DropdownItem>
+		<DropdownItem href="/">Link item</DropdownItem>
+		<DropdownItem icon={LogOut} danger>Danger item</DropdownItem>
+	</Dropdown>
+</Story>
+
+<!-- Dropdowns sharing a `group` close their siblings when one opens. -->
+<Story name="Grouped" asChild>
+	<div class="flex gap-3">
+		<Dropdown group="story-group" trigger={firstTrigger} label="First">
+			<DropdownItem>One</DropdownItem>
+			<DropdownItem>Two</DropdownItem>
+		</Dropdown>
+		<Dropdown group="story-group" trigger={secondTrigger} label="Second">
+			<DropdownItem>Three</DropdownItem>
+			<DropdownItem>Four</DropdownItem>
+		</Dropdown>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Spinner.stories.svelte b/web/src/lib/components/ui/Spinner.stories.svelte
new file mode 100644
--- /dev/null
+++ b/web/src/lib/components/ui/Spinner.stories.svelte
@@ -0,0 +1,24 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Spinner from "./Spinner.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Spinner",
+		component: Spinner,
+		tags: ["autodocs"],
+		argTypes: {
+			class: { control: "text" }
+		}
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="Sizes" asChild>
+	<div class="flex items-center gap-3">
+		<Spinner class="size-3" />
+		<Spinner class="size-4" />
+		<Spinner class="size-6" />
+		<Spinner class="size-8" />
+	</div>
+</Story>

--
tangled.sh