From d358672a216188fdea20137e26a2ed42f2b3b9be Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 3 Sep 2026 15:27:42 +0200
Subject: [PATCH] web/tickets: improve ReactionPicker styles and show Ticket
 action row conditionally

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/reaction/Reaction.svelte   | 38 +++++--------
 .../components/reaction/ReactionPicker.svelte | 23 +++-----
 .../lib/components/repo/tickets/Ticket.svelte | 53 +++++++++++--------
 3 files changed, 50 insertions(+), 64 deletions(-)

diff --git a/web/src/lib/components/reaction/Reaction.svelte b/web/src/lib/components/reaction/Reaction.svelte
index 567e0ae6b..560c77731 100644
--- a/web/src/lib/components/reaction/Reaction.svelte
+++ b/web/src/lib/components/reaction/Reaction.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ReactionGroup } from "$lib/components/reaction/reactions";
 	import { formatCount } from "$lib/format";
+	import Button from "$lib/components/ui/Button.svelte";
 
 	interface Props {
 		reaction: ReactionGroup;
@@ -17,31 +18,16 @@
 		const names = shown.join(", ");
 		return more > 0 ? `${names}, and ${more} more` : names;
 	});
-
-	const chipClass = $derived(
-		`flex min-h-6 items-center justify-center gap-1.5 rounded border px-2 typography-paragraph-mini leading-4 text-foreground-default ${
-			reaction.isReacted
-				? "border-border-strong bg-background-info-subtle"
-				: "border-border-default"
-		}`
-	);
 </script>
 
-{#if ontoggle}
-	<button
-		type="button"
-		{title}
-		disabled={pending}
-		aria-pressed={reaction.isReacted}
-		onclick={ontoggle}
-		class={`${chipClass} cursor-pointer transition hover:border-border-strong disabled:opacity-50`}
-	>
-		<span>{reaction.kind}</span>
-		<span>{formatCount(reaction.count)}</span>
-	</button>
-{:else}
-	<span {title} class={chipClass}>
-		<span>{reaction.kind}</span>
-		<span>{formatCount(reaction.count)}</span>
-	</span>
-{/if}
+<Button
+	size="small"
+	{title}
+	disabled={pending}
+	aria-pressed={reaction.isReacted}
+	onclick={ontoggle}
+	class={reaction.isReacted && "border-background-info-emphasis/10 bg-background-info-subtle hover:bg-background-info-subtle-hover"}
+>
+	<span>{reaction.kind}</span>
+	<span>{formatCount(reaction.count)}</span>
+</Button>
diff --git a/web/src/lib/components/reaction/ReactionPicker.svelte b/web/src/lib/components/reaction/ReactionPicker.svelte
index 49d4c866f..c7c873624 100644
--- a/web/src/lib/components/reaction/ReactionPicker.svelte
+++ b/web/src/lib/components/reaction/ReactionPicker.svelte
@@ -7,6 +7,7 @@
 	import type { ReactionRecord } from "$lib/api/reaction";
 	import Button from "$lib/components/ui/Button.svelte";
 	import { ORDERED_REACTION_KINDS, type ReactionKind } from "$lib/components/reaction/reactions";
+	import Dropdown from "../ui/Dropdown.svelte";
 
 	interface Props {
 		subjectUri: string;
@@ -53,23 +54,11 @@
 	};
 </script>
 
-<button
-	type="button"
-	popovertarget={popoverId}
-	style={`anchor-name: ${anchorName}`}
-	aria-label="Add reaction"
-	class="flex cursor-pointer items-center justify-center rounded-sm py-2 text-foreground-subtle transition hover:text-foreground-default"
->
-	<SmilePlus class="size-3.5" />
-</button>
+<Dropdown variant="button" buttonVariant="ghost" size="small" label="React" title="React" menuClass="w-fit">
+	{#snippet trigger()}
+		<SmilePlus class="size-3.5" />
+	{/snippet}
 
-<div
-	bind:this={panel}
-	id={popoverId}
-	popover="auto"
-	style={`position-anchor: ${anchorName}`}
-	class="inset-auto mt-1 h-fit w-max popover-transition rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular [position-area:bottom_center]"
->
 	<div class="grid grid-cols-4 p-1">
 		{#each ORDERED_REACTION_KINDS as kind (kind)}
 			<Button
@@ -83,4 +72,4 @@
 			</Button>
 		{/each}
 	</div>
-</div>
+</Dropdown>
diff --git a/web/src/lib/components/repo/tickets/Ticket.svelte b/web/src/lib/components/repo/tickets/Ticket.svelte
index e3ee90aed..036b129ff 100644
--- a/web/src/lib/components/repo/tickets/Ticket.svelte
+++ b/web/src/lib/components/repo/tickets/Ticket.svelte
@@ -61,6 +61,11 @@
 	const reporting = createReporting();
 	const isAuthor = $derived(auth.currentDid === ticket.author.did);
 	const isPull = $derived(ticket.targetBranch !== undefined);
+	const showActionRow = $derived(
+		reactions.length > 0 ||
+			(reactionsAlwaysShow && auth.currentUser !== null) ||
+			reporting.canReport(ticket.author.did)
+	);
 
 	let editing = $state(false);
 
@@ -85,7 +90,7 @@
 		oncancel={() => (editing = false)}
 	/>
 {:else}
-	<div class="space-y-5">
+	<div class="flex flex-col gap-4">
 		<header>
 			<div class="mb-2 flex flex-wrap items-center">
 				<h1 class="typography-paragraph-large">
@@ -126,27 +131,33 @@
 				{extraInfo}
 			/>
 		</header>
-		<div class="space-y-2">
+		<div class="flex flex-col gap-4">
 			<TicketBody body={ticket.body} bodyHtml={ticket.bodyHtml} />
-			<div class="flex items-center gap-2">
-				<Reactions {reactions} subjectUri={ticket.uri} alwaysShow={reactionsAlwaysShow} />
-				{#if reporting.canReport(ticket.author.did)}
-					<MoreMenu
-						class="ml-auto"
-						label={isPull
-							? "More actions for this pull request"
-							: "More actions for this issue"}
-					>
-						<ReportItems
-							subjectUri={ticket.uri}
-							subjectCid={ticket.cid}
-							subjectNoun={isPull ? "pull request" : "issue"}
-							authorDid={ticket.author.did}
-							authorHandle={ticket.author.handle ?? ticket.author.did}
-						/>
-					</MoreMenu>
-				{/if}
-			</div>
+			{#if showActionRow}
+				<div class="flex items-center gap-2">
+					<Reactions
+						{reactions}
+						subjectUri={ticket.uri}
+						alwaysShow={reactionsAlwaysShow}
+					/>
+					{#if reporting.canReport(ticket.author.did)}
+						<MoreMenu
+							class="ml-auto"
+							label={isPull
+								? "More actions for this pull request"
+								: "More actions for this issue"}
+						>
+							<ReportItems
+								subjectUri={ticket.uri}
+								subjectCid={ticket.cid}
+								subjectNoun={isPull ? "pull request" : "issue"}
+								authorDid={ticket.author.did}
+								authorHandle={ticket.author.handle ?? ticket.author.did}
+							/>
+						</MoreMenu>
+					{/if}
+				</div>
+			{/if}
 		</div>
 		<ErrorAlert label={remove.error} />
 	</div>
-- 
2.51.2