From c60b3d221f0d0b193e24fd260cb3f4db3ecb2711 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 28 Jul 2026 19:06:17 +0200
Subject: [PATCH] web: update User component

---
 web/src/lib/components/ui/User.stories.svelte | 12 +++--
 web/src/lib/components/ui/User.svelte         | 53 ++++++++++++++-----
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/web/src/lib/components/ui/User.stories.svelte b/web/src/lib/components/ui/User.stories.svelte
index 3c5b54a4..e11fade9 100644
--- a/web/src/lib/components/ui/User.stories.svelte
+++ b/web/src/lib/components/ui/User.stories.svelte
@@ -11,14 +11,14 @@
 			src: { control: "text" },
 			size: {
 				control: { type: "inline-radio" },
-				options: ["sm", "md", "lg"]
+				options: ["header", "large", "regular", "small", "mini"]
 			},
 			showImage: { control: "boolean" },
 			showText: { control: "boolean" }
 		},
 		args: {
 			handle: "user.tld",
-			size: "md",
+			size: "regular",
 			showImage: true,
 			showText: true
 		}
@@ -32,8 +32,10 @@
 
 <Story name="Sizes">
 	<div class="flex flex-col items-start gap-3">
-		<User size="lg" />
-		<User size="md" />
-		<User size="sm" />
+		<User size="header" />
+		<User size="large" />
+		<User size="regular" />
+		<User size="small" />
+		<User size="mini" />
 	</div>
 </Story>
diff --git a/web/src/lib/components/ui/User.svelte b/web/src/lib/components/ui/User.svelte
index cf239e4d..a4dc76ed 100644
--- a/web/src/lib/components/ui/User.svelte
+++ b/web/src/lib/components/ui/User.svelte
@@ -1,37 +1,56 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "tailwind-variants";
+	import type { TypographyVariants } from "./Typography.svelte";
 
 	export const user = tv({
 		slots: {
+			root: "inline-flex items-center",
 			avatar: "",
-			handle: "truncate text-foreground-default"
+			handle: "truncate"
 		},
 		variants: {
 			size: {
-				sm: {
-					avatar: "size-5",
-					handle: "text-xs"
+				header: {
+					root: "gap-2",
+					avatar: "size-[26px]"
 				},
-				md: {
-					avatar: "size-6",
-					handle: "text-sm"
+				large: {
+					root: "gap-1.5",
+					avatar: "size-[26px]"
 				},
-				lg: {
-					avatar: "size-8",
-					handle: "text-base"
+				regular: {
+					root: "gap-1",
+					avatar: "size-[21px]"
+				},
+				small: {
+					root: "gap-1",
+					avatar: "size-[17px]"
+				},
+				mini: {
+					root: "gap-1",
+					avatar: "size-[13px]"
 				}
 			}
 		},
 		defaultVariants: {
-			size: "md"
+			size: "regular"
 		}
 	});
 
 	export type UserVariants = VariantProps<typeof user>;
+
+	const handleVariant = {
+		header: "h4",
+		large: "large",
+		regular: "regular",
+		small: "small",
+		mini: "mini"
+	} as const satisfies Record<NonNullable<UserVariants["size"]>, TypographyVariants["variant"]>;
 </script>
 
 <script lang="ts">
 	import Avatar from "./Avatar.svelte";
+	import { typography } from "./Typography.svelte";
 
 	interface Props {
 		handle?: string;
@@ -45,20 +64,26 @@
 	let {
 		handle,
 		src,
-		size = "md",
+		size = "regular",
 		showImage = true,
 		showText = true,
 		class: className
 	}: Props = $props();
 
 	const slots = $derived(user({ size }));
+	const handleClass = $derived(
+		typography({
+			variant: handleVariant[size ?? "regular"],
+			class: slots.handle()
+		})
+	);
 </script>
 
-<span class={`inline-flex items-center gap-2 ${className ?? ""}`}>
+<span class={slots.root({ class: className })}>
 	{#if showImage}
 		<Avatar {src} {handle} size={slots.avatar()} />
 	{/if}
 	{#if showText && handle}
-		<span class={slots.handle()}>{handle}</span>
+		<span class={handleClass}>{handle}</span>
 	{/if}
 </span>
-- 
2.51.2