From affe1fdccd127955a4e86fce2d29240ecc00eaf1 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 2 Sep 2026 23:52:40 +0200
Subject: [PATCH] web/ui: give EmptyState an inline size

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/CommitLogView.svelte      |  3 ++-
 web/src/lib/components/repo/FileHistoryView.svelte    |  9 ++++++---
 web/src/lib/components/repo/RepoCreationForm.svelte   |  7 ++++---
 web/src/lib/components/repo/TagCard.svelte            |  2 +-
 .../lib/components/repo/pulls/PullDiscussion.svelte   |  3 ++-
 web/src/lib/components/timeline/RecentsPreview.svelte |  3 ++-
 .../lib/components/timeline/TrendingReposList.svelte  | 11 ++++++-----
 web/src/lib/components/ui/MarkdownEditor.svelte       | 11 ++++++-----
 web/src/routes/[handle]/[repo]/stars/+page.svelte     |  7 ++++---
 9 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/web/src/lib/components/repo/CommitLogView.svelte b/web/src/lib/components/repo/CommitLogView.svelte
index 92461c570..48c32175b 100644
--- a/web/src/lib/components/repo/CommitLogView.svelte
+++ b/web/src/lib/components/repo/CommitLogView.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import Pagination from "$lib/components/ui/Pagination.svelte";
 	import type { CommitStatuses } from "$lib/api/commitStatuses";
 	import CommitRows from "./CommitRows.svelte";
@@ -34,7 +35,7 @@
 
 <TabPanel padded={false}>
 	{#if commits.length === 0}
-		<p class="py-6 text-center text-foreground-subtle">No commits at {ref}.</p>
+		<EmptyState size="inline" message="No commits at {ref}." class="justify-center py-6" />
 	{:else}
 		<h2 class="flex flex-wrap items-center gap-2 p-4 typography-paragraph-regular font-medium">
 			<GitCommitVertical class="size-4 shrink-0" aria-hidden="true" />
diff --git a/web/src/lib/components/repo/FileHistoryView.svelte b/web/src/lib/components/repo/FileHistoryView.svelte
index 1b05299e2..feda98f84 100644
--- a/web/src/lib/components/repo/FileHistoryView.svelte
+++ b/web/src/lib/components/repo/FileHistoryView.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import History from "$icon/history";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import Pagination from "$lib/components/ui/Pagination.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import CommitRows from "./CommitRows.svelte";
@@ -62,9 +63,11 @@
 	</h2>
 
 	{#if commits.length === 0}
-		<p class="px-4 pb-8 text-center text-foreground-muted">
-			No commits touch this file at {ref}.
-		</p>
+		<EmptyState
+			size="inline"
+			message="No commits touch this file at {ref}."
+			class="justify-center px-4 pb-8"
+		/>
 	{:else}
 		<div class="flex flex-col gap-8 md:gap-6">
 			{#each groups as group (group.commits[0].hash)}
diff --git a/web/src/lib/components/repo/RepoCreationForm.svelte b/web/src/lib/components/repo/RepoCreationForm.svelte
index d347f10b5..7da01ab3c 100644
--- a/web/src/lib/components/repo/RepoCreationForm.svelte
+++ b/web/src/lib/components/repo/RepoCreationForm.svelte
@@ -228,9 +228,10 @@
 									</Radio>
 								</div>
 							{:else}
-								<p class="typography-paragraph-small text-foreground-subtle">
-									No knots are available for repository creation.
-								</p>
+								<EmptyState
+									size="inline"
+									message="No knots are available for repository creation."
+								/>
 							{/each}
 						{/if}
 					</div>
diff --git a/web/src/lib/components/repo/TagCard.svelte b/web/src/lib/components/repo/TagCard.svelte
index a66e8323f..b958496c1 100644
--- a/web/src/lib/components/repo/TagCard.svelte
+++ b/web/src/lib/components/repo/TagCard.svelte
@@ -83,7 +83,7 @@
 				<p class="cursor-text py-2 whitespace-pre-wrap">{messageParts[1]}</p>
 			{/if}
 		{:else}
-			<p class="text-foreground-muted italic">No message</p>
+			<EmptyState size="inline" message="No message" class="italic" />
 		{/if}
 	</div>
 </div>
diff --git a/web/src/lib/components/repo/pulls/PullDiscussion.svelte b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
index a1b46fa0c..0bf390bf3 100644
--- a/web/src/lib/components/repo/pulls/PullDiscussion.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
@@ -6,6 +6,7 @@
 	} from "$lib/components/comment/comments";
 	import ArrowRight from "$icon/arrow-right";
 	import type { CommitSummary } from "$lib/components/repo/types";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import type { MarkupContext } from "$lib/markup";
 	import PullReviewComment from "./PullReviewComment.svelte";
@@ -48,7 +49,7 @@
 
 <div class="space-y-4 px-2 pt-2 pb-80">
 	{#if !visible.length}
-		<p class="p-2 text-foreground-subtle">No comments yet.</p>
+		<EmptyState size="inline" message="No comments yet." class="p-2" />
 	{:else}
 		{#each groups as group (group.version ?? "pre")}
 			{#if group.version && group.version > 0}
diff --git a/web/src/lib/components/timeline/RecentsPreview.svelte b/web/src/lib/components/timeline/RecentsPreview.svelte
index 21b2b5989..a1a74c247 100644
--- a/web/src/lib/components/timeline/RecentsPreview.svelte
+++ b/web/src/lib/components/timeline/RecentsPreview.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import History from "$icon/history";
 	import Route from "$icon/route";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import PreviewCard from "./PreviewCard.svelte";
 	import PreviewEmpty from "./PreviewEmpty.svelte";
 	import RecentItem, { recentPath } from "./RecentItem.svelte";
@@ -20,7 +21,7 @@
 		</div>
 	{:else}
 		<PreviewEmpty icon={Route}>
-			<p class="text-foreground-subtle">No recent pages yet.</p>
+			<EmptyState size="inline" message="No recent pages yet." class="justify-center" />
 		</PreviewEmpty>
 	{/if}
 </PreviewCard>
diff --git a/web/src/lib/components/timeline/TrendingReposList.svelte b/web/src/lib/components/timeline/TrendingReposList.svelte
index 7baf97e11..360d5c875 100644
--- a/web/src/lib/components/timeline/TrendingReposList.svelte
+++ b/web/src/lib/components/timeline/TrendingReposList.svelte
@@ -3,6 +3,7 @@
 	import Star from "$icon/star";
 	import { formatCount } from "$lib/format";
 	import { repoKey, type RepoCardData } from "$lib/components/profile/types";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 
 	let { repos }: { repos: RepoCardData[] } = $props();
 </script>
@@ -38,9 +39,9 @@
 		{/each}
 	</div>
 {:else}
-	<p
-		class="rounded-b bg-background-canvas p-6 text-center typography-paragraph-small text-foreground-subtle"
-	>
-		No trending repositories this week
-	</p>
+	<EmptyState
+		size="inline"
+		message="No trending repositories this week"
+		class="justify-center rounded-b bg-background-canvas p-6"
+	/>
 {/if}
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index a567ceb20..fbfce8b1b 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -4,6 +4,7 @@
 	import Pencil from "$icon/pencil";
 	import Button from "./Button.svelte";
 	import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
+	import EmptyState from "./EmptyState.svelte";
 	import Pending from "./Pending.svelte";
 	import Textarea, { textareaMinHeight } from "./Textarea.svelte";
 	import { renderMarkup, type MarkupContext } from "$lib/markup";
@@ -125,11 +126,11 @@
 					{@html html}
 				</div>
 			{:else}
-				<div
-					class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}
-				>
-					Nothing to preview.
-				</div>
+				<EmptyState
+					size="inline"
+					message="Nothing to preview."
+					class={`justify-center italic ${pane} ${surface}`}
+				/>
 			{/if}
 		</Pending>
 	{/if}
diff --git a/web/src/routes/[handle]/[repo]/stars/+page.svelte b/web/src/routes/[handle]/[repo]/stars/+page.svelte
index 71ee84f41..f6c945d72 100644
--- a/web/src/routes/[handle]/[repo]/stars/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/stars/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import StarredBy from "$lib/components/repo/StarredBy.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
-	import starredByList from "$lib/bones/repo-starredbylist--skeleton-fixture.bones.json";
+	import bonesStarredBySkeletonFixture from "$lib/bones/bones-starredby--skeleton-fixture.bones.json";
 
 	let { data } = $props();
 </script>
@@ -13,11 +14,11 @@
 
 	<Pending>
 		{#snippet skeleton()}
-			<Bones capture={starredByList} />
+			<Bones capture={bonesStarredBySkeletonFixture} />
 		{/snippet}
 		{@const starrers = await data.starrers}
 		{#if starrers.length === 0}
-			<p class="text-foreground-muted">No stars yet.</p>
+			<EmptyState size="inline" message="No stars yet." />
 		{:else}
 			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
 				{#each starrers as starrer (starrer.did)}
-- 
2.51.2