From a4938db059932a7dd9de892f6b366ce004dcb55f Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Sat, 19 Sep 2026 03:05:31 +0200
Subject: [PATCH] web/tickets: rescale ticket and issue views

Signed-off-by: eti <eti@eti.tf>
---
 .../components/repo/issues/IssueForm.svelte   | 27 +++---
 .../repo/issues/IssueThreadView.svelte        |  8 +-
 .../lib/components/repo/tickets/Ticket.svelte | 10 +--
 .../repo/tickets/TicketCard.stories.svelte    |  2 +-
 .../components/repo/tickets/TicketCard.svelte |  6 +-
 .../repo/tickets/TicketCardContent.svelte     |  6 +-
 .../components/repo/tickets/TicketForm.svelte |  6 +-
 .../repo/tickets/TicketInfoBar.svelte         | 12 ++-
 .../components/repo/tickets/TicketList.svelte | 16 +++-
 .../repo/tickets/TicketSearch.stories.svelte  |  4 +-
 .../repo/tickets/TicketSearch.svelte          |  3 +-
 .../repo/tickets/TicketStatePill.svelte       |  6 +-
 .../repo/tickets/TicketToolbar.svelte         | 90 ++++++++++---------
 13 files changed, 103 insertions(+), 93 deletions(-)

diff --git a/web/src/lib/components/repo/issues/IssueForm.svelte b/web/src/lib/components/repo/issues/IssueForm.svelte
index 5205b62fa..be87165e4 100644
--- a/web/src/lib/components/repo/issues/IssueForm.svelte
+++ b/web/src/lib/components/repo/issues/IssueForm.svelte
@@ -15,6 +15,7 @@
 	import AccountSelector from "$lib/components/auth/AccountSelector.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Field from "$lib/components/ui/Field.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
 	import MarkdownEditor from "$lib/components/ui/MarkdownEditor.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
@@ -114,17 +115,19 @@
 	const canSubmit = $derived(title.trim() !== "" && !save.loading);
 </script>
 
-<form onsubmit={save.run} class="flex flex-col gap-4">
-	<div class="flex flex-col gap-1.5">
-		<label for="issue-title" class="typography-paragraph-small text-foreground-default"
-			>Title</label
-		>
-		<Input id="issue-title" name="title" required bind:value={title} disabled={save.loading} />
-	</div>
-
-	<div class="flex flex-col gap-1.5">
-		<span class="typography-paragraph-small text-foreground-default">Body</span>
+<form onsubmit={save.run} class="flex flex-col gap-md">
+	<Field label="Title" for="issue-title" required>
+		<Input
+			id="issue-title"
+			name="title"
+			required
+			placeholder="One-line summary of your issue."
+			bind:value={title}
+			disabled={save.loading}
+		/>
+	</Field>
 
+	<Field label="Body" for="issue-body">
 		<MarkdownEditor
 			id="issue-body"
 			name="body"
@@ -134,11 +137,11 @@
 			bind:value={body}
 			disabled={save.loading}
 		/>
-	</div>
+	</Field>
 
 	<ErrorAlert label={save.error} />
 
-	<div class="flex items-center justify-end gap-2">
+	<div class="flex items-center justify-end gap-xs">
 		{#if mode === "create"}
 			<AccountSelector
 				{accounts}
diff --git a/web/src/lib/components/repo/issues/IssueThreadView.svelte b/web/src/lib/components/repo/issues/IssueThreadView.svelte
index 26436da2b..e54e23613 100644
--- a/web/src/lib/components/repo/issues/IssueThreadView.svelte
+++ b/web/src/lib/components/repo/issues/IssueThreadView.svelte
@@ -40,7 +40,7 @@
 	import type { RepoInfo } from "$lib/components/repo/types";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import { renderMarkup } from "$lib/markup";
 	import type { MarkupContext } from "$lib/markup/paths";
 	import type { Did } from "@atcute/lexicons/syntax";
@@ -192,7 +192,7 @@
 </svelte:head>
 
 <div>
-	<TabPanel class="space-y-5">
+	<Card class="space-y-lg">
 		<Ticket
 			ticket={{
 				uri: issue.uri,
@@ -241,13 +241,13 @@
 			canEdit
 			onLabelsChange={(names) => (mockLabelNames = names)}
 		/>
-	</TabPanel>
+	</Card>
 
 	<CommentSection
 		bind:threads={comments}
 		subjectUri={issue.uri}
 		subjectCid={issue.cid}
 		markup={props.markup}
-		class="mt-4"
+		class="mt-md"
 	/>
 </div>
diff --git a/web/src/lib/components/repo/tickets/Ticket.svelte b/web/src/lib/components/repo/tickets/Ticket.svelte
index 5d0581158..77646816b 100644
--- a/web/src/lib/components/repo/tickets/Ticket.svelte
+++ b/web/src/lib/components/repo/tickets/Ticket.svelte
@@ -102,18 +102,18 @@
 		oncancel={() => (editing = false)}
 	/>
 {:else}
-	<div class="flex flex-col gap-6">
-		<header class="flex flex-col gap-3">
-			<div class="flex flex-wrap items-center gap-2">
+	<div class="flex flex-col gap-xl">
+		<header class="flex flex-col gap-sm">
+			<div class="flex flex-wrap items-center gap-xs">
 				<h1 class="flex-1 typography-paragraph-large">
 					<span class="font-medium">{ticket.title}</span>
 					<span class="typography-monospace-large text-foreground-muted"
 						>#{ticket.rkey}</span
 					>
 				</h1>
-				<div class="ml-auto flex items-center gap-2 self-start">
+				<div class="ml-auto flex items-center gap-xs self-start">
 					{#if extraActions}
-						<div class="flex items-center gap-2">
+						<div class="flex items-center gap-xs">
 							{@render extraActions()}
 						</div>
 					{/if}
diff --git a/web/src/lib/components/repo/tickets/TicketCard.stories.svelte b/web/src/lib/components/repo/tickets/TicketCard.stories.svelte
index 0a241a6f8..6a89f7b7f 100644
--- a/web/src/lib/components/repo/tickets/TicketCard.stories.svelte
+++ b/web/src/lib/components/repo/tickets/TicketCard.stories.svelte
@@ -40,7 +40,7 @@
 <Story name="Issue Open" />
 <Story name="Issue Closed" args={{ ticket: { ...issue, state: "closed" } }} />
 <Story name="Issue No comments" args={{ ticket: { ...issue, commentCount: 0 } }} />
-<Story name="Issue Plain" args={{ border: false, shadow: false, background: false }} />
+<Story name="Issue Plain" args={{ border: false, background: false }} />
 <Story name="Pull Open" args={{ ticket: pull, isPull: true }} />
 <Story name="Pull Merged" args={{ ticket: { ...pull, state: "merged" }, isPull: true }} />
 <Story name="Pull Closed" args={{ ticket: { ...pull, state: "closed" }, isPull: true }} />
diff --git a/web/src/lib/components/repo/tickets/TicketCard.svelte b/web/src/lib/components/repo/tickets/TicketCard.svelte
index 1c86d42cc..43e9adb3c 100644
--- a/web/src/lib/components/repo/tickets/TicketCard.svelte
+++ b/web/src/lib/components/repo/tickets/TicketCard.svelte
@@ -8,8 +8,8 @@
 		repoName: string;
 		ticket: IssueSummary | PullSummary;
 		isPull?: boolean;
+		rounded?: CardVariants["rounded"];
 		border?: CardVariants["border"];
-		shadow?: CardVariants["shadow"];
 		background?: CardVariants["background"];
 	}
 
@@ -18,12 +18,12 @@
 		repoName,
 		ticket,
 		isPull = false,
+		rounded = true,
 		border = true,
-		shadow = false,
 		background = true
 	}: Props = $props();
 </script>
 
-<Card {border} {shadow} {background}>
+<Card {rounded} {border} {background}>
 	<TicketCardContent {ownerHandle} {repoName} {ticket} {isPull} />
 </Card>
diff --git a/web/src/lib/components/repo/tickets/TicketCardContent.svelte b/web/src/lib/components/repo/tickets/TicketCardContent.svelte
index 5eb9a2b0a..f115e66bf 100644
--- a/web/src/lib/components/repo/tickets/TicketCardContent.svelte
+++ b/web/src/lib/components/repo/tickets/TicketCardContent.svelte
@@ -22,7 +22,7 @@
 	);
 </script>
 
-<div class="pb-2">
+<div class="pb-xs">
 	<a {href} class="text-foreground-default hover:underline">
 		<span>{ticket.title}</span>
 		<span class="text-foreground-muted">#{ticket.rkey}</span>
@@ -38,9 +38,9 @@
 >
 	{#snippet extraInfo()}
 		<Separator variant="dot" />
-		<a {href} class="text-foreground-muted no-underline hover:underline">
+		<span class="text-foreground-muted">
 			{formatCount(ticket.commentCount)}
 			{ticket.commentCount === 1 ? "comment" : "comments"}
-		</a>
+		</span>
 	{/snippet}
 </TicketInfoBar>
diff --git a/web/src/lib/components/repo/tickets/TicketForm.svelte b/web/src/lib/components/repo/tickets/TicketForm.svelte
index b9d1a7101..bcdbe700a 100644
--- a/web/src/lib/components/repo/tickets/TicketForm.svelte
+++ b/web/src/lib/components/repo/tickets/TicketForm.svelte
@@ -49,7 +49,7 @@
 	const canSubmit = $derived(title.trim() !== "" && !save.loading);
 </script>
 
-<form onsubmit={save.run} class="flex flex-col gap-4">
+<form onsubmit={save.run} class="flex flex-col gap-md">
 	<div class="flex flex-col gap-1.5">
 		<label>
 			<span class="typograph-paragraph-small text-foreground-default">Title</span>
@@ -64,7 +64,7 @@
 	</div>
 
 	{#if targetBranch}
-		<div class="p-2 debug-border">todo: target branch selector</div>
+		<div class="p-xs debug-border">todo: target branch selector</div>
 	{/if}
 
 	<div class="flex flex-col gap-1.5">
@@ -83,7 +83,7 @@
 
 	<ErrorAlert label={save.error} />
 
-	<div class="flex items-center justify-end gap-2">
+	<div class="flex items-center justify-end gap-xs">
 		<Button type="button" variant="default" icon={X} disabled={save.loading} onclick={oncancel}>
 			Cancel
 		</Button>
diff --git a/web/src/lib/components/repo/tickets/TicketInfoBar.svelte b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
index a33b21054..32eab1aed 100644
--- a/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
+++ b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
@@ -87,9 +87,7 @@
 		class="w-auto"
 	>
 		{#snippet trigger({ props })}
-			<div
-				class="opacity-0 transition group-hover/assignee:opacity-100 focus-within:opacity-100"
-			>
+			<div class="transition focus-within:opacity-100">
 				<Button
 					{...props}
 					variant="ghost"
@@ -102,10 +100,10 @@
 	</Combobox>
 {/snippet}
 
-<div class="flex flex-wrap items-center gap-x-2 gap-y-1.5 text-foreground-muted">
+<div class="flex flex-wrap items-center gap-x-xs gap-y-1.5 text-foreground-muted">
 	<TicketStatePill {isPull} {state} />
 
-	<span class="group/assignee ml-1 flex items-center gap-1.5">
+	<span class="ml-2xs flex items-center gap-1.5">
 		{#if openedBy}
 			{assignee && assignedToAuthor ? "opened by and assigned to" : "opened by"}
 		{/if}
@@ -117,7 +115,7 @@
 
 	{#if assignee && !assignedToAuthor}
 		<Separator variant="dot" />
-		<span class="group/assignee flex items-center gap-1.5">
+		<span class="flex items-center gap-1.5">
 			assigned to
 			{@render person(assignee)}
 			{#if canEditAssignee}
@@ -131,7 +129,7 @@
 
 	{#if targetBranch}
 		<Separator variant="dot" />
-		<span class="ml-1">
+		<span class="ml-2xs">
 			targeting
 			{#if targetBranchHref}
 				<Link href={targetBranchHref} variant="inherit"><Tag>{targetBranch}</Tag></Link>
diff --git a/web/src/lib/components/repo/tickets/TicketList.svelte b/web/src/lib/components/repo/tickets/TicketList.svelte
index 519040c51..1ee7ad149 100644
--- a/web/src/lib/components/repo/tickets/TicketList.svelte
+++ b/web/src/lib/components/repo/tickets/TicketList.svelte
@@ -2,6 +2,7 @@
 	import Inbox from "$icon/inbox";
 	import GitPullRequest from "$icon/git-pull-request";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import { listRows } from "$lib/components/ui/ListPanel.svelte";
 	import TicketCard from "$lib/components/repo/tickets/TicketCard.svelte";
 	import type { IssueSummary, PullSummary } from "$lib/components/repo/types";
 
@@ -19,13 +20,20 @@
 	<EmptyState
 		message={isPull ? "No PRs yet." : "No issues yet."}
 		icon={isPull ? GitPullRequest : Inbox}
-		shadow
-		background
+		border={false}
 	/>
 {:else}
-	<div class="flex flex-col gap-2">
+	<div class={listRows}>
 		{#each tickets as ticket (ticket.rkey)}
-			<TicketCard {ownerHandle} {repoName} {ticket} {isPull} />
+			<TicketCard
+				{ownerHandle}
+				{repoName}
+				{ticket}
+				{isPull}
+				rounded={false}
+				border={false}
+				background={false}
+			/>
 		{/each}
 	</div>
 {/if}
diff --git a/web/src/lib/components/repo/tickets/TicketSearch.stories.svelte b/web/src/lib/components/repo/tickets/TicketSearch.stories.svelte
index 841bef5da..cd60ad613 100644
--- a/web/src/lib/components/repo/tickets/TicketSearch.stories.svelte
+++ b/web/src/lib/components/repo/tickets/TicketSearch.stories.svelte
@@ -13,13 +13,13 @@
 </script>
 
 <Story name="Issues">
-	<div class="max-w-sm">
+	<div class="max-w-96">
 		<TicketSearch />
 	</div>
 </Story>
 
 <Story name="Pulls">
-	<div class="max-w-sm">
+	<div class="max-w-96">
 		<TicketSearch isPull />
 	</div>
 </Story>
diff --git a/web/src/lib/components/repo/tickets/TicketSearch.svelte b/web/src/lib/components/repo/tickets/TicketSearch.svelte
index 4f42b3a2d..3de90bd66 100644
--- a/web/src/lib/components/repo/tickets/TicketSearch.svelte
+++ b/web/src/lib/components/repo/tickets/TicketSearch.svelte
@@ -31,13 +31,12 @@
 			placeholder="{label}..."
 			aria-label={label}
 			iconLeft={Search}
-			class={value ? "w-full pr-9" : "w-full"}
+			class={value ? "h-full w-full pr-9" : "h-full w-full"}
 		/>
 		{#if value}
 			<Button
 				type="button"
 				variant="ghost"
-				size="small"
 				icon={X}
 				onclick={clear}
 				aria-label="Clear search"
diff --git a/web/src/lib/components/repo/tickets/TicketStatePill.svelte b/web/src/lib/components/repo/tickets/TicketStatePill.svelte
index 2ae8330c5..dac748226 100644
--- a/web/src/lib/components/repo/tickets/TicketStatePill.svelte
+++ b/web/src/lib/components/repo/tickets/TicketStatePill.svelte
@@ -9,7 +9,7 @@
 
 	export const statePill = tv({
 		slots: {
-			base: "inline-flex items-center gap-1 rounded-sm py-0.5 text-foreground-on-emphasis select-none",
+			base: "inline-flex items-center gap-2xs rounded-sm py-3xs text-foreground-on-emphasis select-none",
 			icon: "shrink-0"
 		},
 		variants: {
@@ -21,9 +21,9 @@
 			size: {
 				small: {
 					base: "px-1.5 typography-paragraph-small",
-					icon: "size-3"
+					icon: "size-3.5"
 				},
-				regular: { base: "px-2 typography-paragraph-regular", icon: "size-3.5" }
+				regular: { base: "px-xs typography-paragraph-regular", icon: "size-3.5" }
 			}
 		},
 		defaultVariants: {
diff --git a/web/src/lib/components/repo/tickets/TicketToolbar.svelte b/web/src/lib/components/repo/tickets/TicketToolbar.svelte
index 085fda20a..42f608b18 100644
--- a/web/src/lib/components/repo/tickets/TicketToolbar.svelte
+++ b/web/src/lib/components/repo/tickets/TicketToolbar.svelte
@@ -8,6 +8,7 @@
 	import Plus from "$icon/plus";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import ListToolbar from "$lib/components/ui/ListToolbar.svelte";
 	import TicketSearch from "$lib/components/repo/tickets/TicketSearch.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
@@ -37,59 +38,60 @@
 	const base = $derived(`/${ownerHandle}/${repoName}/${isPull ? "pulls" : "issues"}`);
 </script>
 
-<div class="grid grid-cols-[auto_1fr_auto] gap-2">
-	<div class="col-span-3 sm:col-span-1 sm:col-start-2">
+<ListToolbar>
+	{#snippet search()}
 		<TicketSearch {isPull} />
-	</div>
+	{/snippet}
 
-	<ButtonGroup class="sm:row-start-1">
-		<Button
-			href={resolve(`${base}?state=open` as "/")}
-			{...segmentProps(state === "open")}
-			size="small"
-			icon={isPull ? GitPullRequest : CircleDot}
-		>
-			<span>
-				<span class="hidden sm:inline">{@render pendingCount(openCount)}</span>
-				Open
-			</span>
-		</Button>
-		{#if isPull}
+	{#snippet filters()}
+		<ButtonGroup>
 			<Button
-				href={resolve(`${base}?state=merged` as "/")}
-				{...segmentProps(state === "merged")}
-				size="small"
-				icon={GitMerge}
+				href={resolve(`${base}?state=open` as "/")}
+				{...segmentProps(state === "open")}
+				icon={isPull ? GitPullRequest : CircleDot}
 			>
 				<span>
-					<span class="hidden sm:inline">{@render pendingCount(mergedCount ?? 0)}</span>
-					Merged
+					<span class="hidden sm:inline">{@render pendingCount(openCount)}</span>
+					Open
 				</span>
 			</Button>
-		{/if}
+			{#if isPull}
+				<Button
+					href={resolve(`${base}?state=merged` as "/")}
+					{...segmentProps(state === "merged")}
+					icon={GitMerge}
+				>
+					<span>
+						<span class="hidden sm:inline"
+							>{@render pendingCount(mergedCount ?? 0)}</span
+						>
+						Merged
+					</span>
+				</Button>
+			{/if}
+			<Button
+				href={resolve(`${base}?state=closed` as "/")}
+				{...segmentProps(state === "closed")}
+				icon={isPull ? GitPullRequestClosed : Ban}
+			>
+				<span>
+					<span class="hidden sm:inline">{@render pendingCount(closedCount)}</span>
+					Closed
+				</span>
+			</Button>
+		</ButtonGroup>
+	{/snippet}
+
+	{#snippet trailing()}
 		<Button
-			href={resolve(`${base}?state=closed` as "/")}
-			{...segmentProps(state === "closed")}
-			size="small"
-			icon={isPull ? GitPullRequestClosed : Ban}
+			href={resolve(`${base}/new` as "/")}
+			variant="primary"
+			insetShadow
+			icon={Plus}
+			class="h-full">New</Button
 		>
-			<span>
-				<span class="hidden sm:inline">{@render pendingCount(closedCount)}</span>
-				Closed
-			</span>
-		</Button>
-	</ButtonGroup>
-
-	<Button
-		href={resolve(`${base}/new` as "/")}
-		variant="primary"
-		size="small"
-		icon={Plus}
-		class="col-start-3 row-start-2 sm:row-start-1"
-	>
-		New
-	</Button>
-</div>
+	{/snippet}
+</ListToolbar>
 
 {#snippet pendingCount(value: number | Promise<number>)}
 	<Pending>
-- 
2.51.2