From 6033425ba79b5b3d9c935245bf53683e6604f656 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 10 Sep 2026 00:20:01 +0200
Subject: [PATCH] web/components/repo: open the label pickers from their pen

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/LabelPanel.svelte | 116 +++++++++---------
 1 file changed, 60 insertions(+), 56 deletions(-)

diff --git a/web/src/lib/components/repo/LabelPanel.svelte b/web/src/lib/components/repo/LabelPanel.svelte
index 08a488747..be7bbcb6a 100644
--- a/web/src/lib/components/repo/LabelPanel.svelte
+++ b/web/src/lib/components/repo/LabelPanel.svelte
@@ -53,15 +53,14 @@
 		onAssigneeChange
 	}: Props = $props();
 
-	let editingLabels = $state(false);
-	let editingAssignee = $state(false);
-
 	const pickedLabels = $derived(labels.map((label) => label.name));
 
 	const labelOptions = $derived<SelectOption[]>(
 		allLabels.map((label) => ({ value: label.name, label: label.name }))
 	);
 
+	const labelColors = $derived(new Map(allLabels.map((label) => [label.name, label.color])));
+
 	const assigneeChoices = $derived<SelectOption[]>(
 		assigneeOptions
 			.filter((person) => person.did !== undefined)
@@ -99,37 +98,44 @@
 			<div class="group flex w-full items-center justify-between">
 				{@render sectionHeading(labelsHeadingId, "Labels")}
 				{#if canEdit}
-					<div
-						class="opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
+					<Combobox
+						multiple
+						options={labelOptions}
+						values={pickedLabels}
+						onToggle={(name) =>
+							onLabelsChange?.(
+								pickedLabels.includes(name)
+									? pickedLabels.filter((picked) => picked !== name)
+									: [...pickedLabels, name]
+							)}
+						label="Labels"
+						placeholder="Select labels"
+						searchPlaceholder="Filter labels…"
+						emptyLabel="No labels"
+						class="w-auto"
 					>
-						<Button
-							variant="ghost"
-							size="mini"
-							icon={Pencil}
-							aria-label="Edit labels"
-							aria-expanded={editingLabels}
-							onclick={() => (editingLabels = !editingLabels)}
-						/>
-					</div>
+						{#snippet trigger({ props })}
+							<div
+								class="opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
+							>
+								<Button
+									{...props}
+									variant="ghost"
+									size="mini"
+									icon={Pencil}
+									aria-label="Edit labels"
+								/>
+							</div>
+						{/snippet}
+						{#snippet option(choice)}
+							<ColorBall color={labelColors.get(choice.value) ?? ""} size="small" />
+							<span class="min-w-0 flex-1 truncate"
+								>{choice.label ?? choice.value}</span
+							>
+						{/snippet}
+					</Combobox>
 				{/if}
 			</div>
-			{#if canEdit && editingLabels}
-				<Combobox
-					multiple
-					options={labelOptions}
-					values={pickedLabels}
-					onToggle={(name) =>
-						onLabelsChange?.(
-							pickedLabels.includes(name)
-								? pickedLabels.filter((picked) => picked !== name)
-								: [...pickedLabels, name]
-						)}
-					label="Labels"
-					placeholder="Select labels"
-					searchPlaceholder="Filter labels…"
-					emptyLabel="No labels"
-				/>
-			{/if}
 			<ul aria-labelledby={labelsHeadingId} class="flex w-full flex-wrap gap-2">
 				{#each labels as label (label.name)}
 					<li class="flex">
@@ -158,34 +164,32 @@
 				<div class="flex w-full items-center justify-between">
 					{@render sectionHeading(assigneeHeadingId, "Assignee")}
 					{#if canEdit}
-						<div
-							class="opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
+						<Combobox
+							options={assigneeChoices}
+							value={assignee?.did ?? ""}
+							onSelect={(did) => onAssigneeChange?.(did)}
+							label="Assignee"
+							placeholder="Select an assignee"
+							searchPlaceholder="Filter people…"
+							emptyLabel="No people"
+							class="w-auto"
 						>
-							<Button
-								variant="ghost"
-								size="mini"
-								icon={Pencil}
-								aria-label="Change assignee"
-								aria-expanded={editingAssignee}
-								onclick={() => (editingAssignee = !editingAssignee)}
-							/>
-						</div>
+							{#snippet trigger({ props })}
+								<div
+									class="opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
+								>
+									<Button
+										{...props}
+										variant="ghost"
+										size="mini"
+										icon={Pencil}
+										aria-label="Change assignee"
+									/>
+								</div>
+							{/snippet}
+						</Combobox>
 					{/if}
 				</div>
-				{#if canEdit && editingAssignee}
-					<Combobox
-						options={assigneeChoices}
-						value={assignee?.did ?? ""}
-						onSelect={(did) => {
-							editingAssignee = false;
-							onAssigneeChange?.(did);
-						}}
-						label="Assignee"
-						placeholder="Select an assignee"
-						searchPlaceholder="Filter people…"
-						emptyLabel="No people"
-					/>
-				{/if}
 				<ul aria-labelledby={assigneeHeadingId} class="flex w-full flex-col gap-2">
 					{#if assignee}
 						<li
-- 
2.54.0