From 15cdb6e57b76c10e3ec2cf3109a4dc0ae8b193be Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 2 Sep 2026 10:50:44 +0200
Subject: [PATCH] web/ui: give EmptyState a size and a class

Signed-off-by: eti <eti@eti.tf>
---
 .../components/ui/EmptyState.stories.svelte   |  2 +
 web/src/lib/components/ui/EmptyState.svelte   | 39 +++++++++++++------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/ui/EmptyState.stories.svelte b/web/src/lib/components/ui/EmptyState.stories.svelte
index 39b324e1f..16b9da158 100644
--- a/web/src/lib/components/ui/EmptyState.stories.svelte
+++ b/web/src/lib/components/ui/EmptyState.stories.svelte
@@ -27,3 +27,5 @@
 	name="Card"
 	args={{ message: "No issues yet.", icon: Inbox, shadow: true, background: true }}
 />
+
+<Story name="Inline" args={{ size: "inline", message: "No comments yet." }} />
diff --git a/web/src/lib/components/ui/EmptyState.svelte b/web/src/lib/components/ui/EmptyState.svelte
index 3fc381dff..f49062267 100644
--- a/web/src/lib/components/ui/EmptyState.svelte
+++ b/web/src/lib/components/ui/EmptyState.svelte
@@ -9,6 +9,8 @@
 		border?: CardVariants["border"];
 		shadow?: CardVariants["shadow"];
 		background?: CardVariants["background"];
+		size?: "default" | "inline";
+		class?: string;
 		children?: Snippet;
 	}
 
@@ -18,21 +20,34 @@
 		border = true,
 		shadow = false,
 		background = false,
+		size = "default",
+		class: className,
 		children
 	}: Props = $props();
 
 	const Icon = $derived(icon);
 </script>
 
-<Card
-	{border}
-	{shadow}
-	{background}
-	padding="none"
-	class="flex flex-col items-center justify-center gap-6 p-12 typography-paragraph-large text-foreground-subtle"
->
-	{#if Icon}
-		<Icon class="size-16 text-foreground-disabled" aria-hidden="true" />
-	{/if}
-	<span class="flex items-center gap-2">{message}{@render children?.()}</span>
-</Card>
+{#if size === "inline"}
+	<p
+		class={[
+			"flex items-center gap-2 typography-paragraph-regular text-foreground-muted",
+			className
+		]}
+	>
+		{message}{@render children?.()}
+	</p>
+{:else}
+	<Card
+		{border}
+		{shadow}
+		{background}
+		padding="none"
+		class="flex flex-col items-center justify-center gap-6 p-12 typography-paragraph-large text-foreground-subtle"
+	>
+		{#if Icon}
+			<Icon class="size-16 text-foreground-disabled" aria-hidden="true" />
+		{/if}
+		<span class="flex items-center gap-2">{message}{@render children?.()}</span>
+	</Card>
+{/if}
-- 
2.54.0