From 3c8c546543a2a7e7a09b43c8308f1e92edccf540 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 5 Aug 2026 14:56:05 +0300
Subject: [PATCH] web/components/pipelines: let the workflows trigger be
 clickable

The trigger snippet wrapped its content in a Button, but Dropdown already
renders one, so the markup was a button inside a button. The HTML parser
splits those apart, which leaves the visible label next to the element that
carries popovertarget instead of inside it: with no JS the menu never opens,
and either way the control is two tab stops.

Dropdown can render the ghost button itself, so use that and keep only the
layout span in the snippet. Same look, same box, one button.

This also carries the in-progress chevron/icon props that were sitting
uncommitted in the working tree.

Signed-off-by: eti <eti@eti.tf>
---
 .../repo/pipelines/PipelineWorkflows.svelte   | 48 ++++++++++++++-----
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
index 9326eac2..2b9da6ae 100644
--- a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
@@ -4,7 +4,7 @@
 	export const pipelineWorkflows = tv({
 		slots: {
 			waiting: "inline-flex items-center gap-1",
-			trigger: "flex items-center gap-1 text-foreground-muted hover:underline",
+			trigger: "flex items-center gap-2",
 			icon: "size-3 shrink-0",
 			symbol: "",
 			// Button hugs its children, so stretch that span to get a two-column row
@@ -13,12 +13,12 @@
 			name: "flex min-w-0 items-center gap-1.5",
 			label: "truncate",
 			outcome: "shrink-0 text-foreground-muted",
-			status: "mt-0.5"
+			status: ""
 		},
 		variants: {
 			variant: {
 				// "2/3 workflows" with a chevron, for a card that has room to spell it out
-				count: { waiting: "italic", symbol: "size-3" },
+				count: { symbol: "size-3" },
 				// the appview's pipelineSymbol: a status ring plus a bare tally
 				symbol: { trigger: "gap-1.5" }
 			}
@@ -41,6 +41,9 @@
 	import PipelineStatusIcon from "./PipelineStatusIcon.svelte";
 	import PipelineSymbol from "./PipelineSymbol.svelte";
 	import ShimmerText from "$lib/components/ui/ShimmerText.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import type { Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
 
 	interface Props {
 		ownerHandle: string;
@@ -50,15 +53,28 @@
 		variant?: PipelineWorkflowsVariants["variant"];
 		/** symbol variant only: "2/3" against the full "2/3 passed, 1/3 failed" breakdown */
 		summary?: "short" | "long";
+		chevron?: boolean;
+		icon?: Component<SvelteHTMLElements["svg"]>;
+		iconClass?: string;
 	}
 
-	let { ownerHandle, repoName, pipeline, variant = "count", summary = "short" }: Props = $props();
+	let {
+		ownerHandle,
+		repoName,
+		pipeline,
+		variant = "count",
+		summary = "short",
+		chevron = false,
+		icon,
+		iconClass
+	}: Props = $props();
 
 	const count = $derived(pipeline.workflows.length);
 	const finished = $derived(finishedCount(pipeline));
 	const noun = $derived(count === 1 ? "workflow" : "workflows");
 	// show the ratio only while something is still running
 	const label = $derived(finished === count ? `${count} ${noun}` : `${finished}/${count} ${noun}`);
+	const Icon = $derived(icon);
 
 	const classes = $derived(pipelineWorkflows({ variant }));
 </script>
@@ -66,7 +82,9 @@
 {#if count === 0}
 	<!-- no workflows yet, so nothing to open -->
 	<ShimmerText color="inherit" duration={3} delay={0}>
-		<span
+		<Button
+			variant="ghost"
+			disabled
 			class={classes.waiting()}
 			title={variant === "symbol" ? "Waiting for a spindle" : undefined}
 		>
@@ -74,11 +92,16 @@
 			{#if variant === "count"}
 				<span class={classes.status()}>Waiting for a spindle…</span>
 			{/if}
-		</span>
+		</Button>
 	</ShimmerText>
 {:else}
+	<!-- the ghost button is Dropdown's own trigger: a Button inside the trigger
+	     snippet nests a <button> in a <button>, which the parser unnests, leaving
+	     the visible content outside the element that carries popovertarget -->
 	<Dropdown
 		group="pipeline-workflows"
+		variant="button"
+		buttonVariant="ghost"
 		align="left"
 		menuClass="w-72"
 		label={longSummary(pipeline)}
@@ -86,16 +109,19 @@
 	>
 		{#snippet trigger()}
 			<span class={classes.trigger()}>
-				{#if variant === "symbol"}
-					<PipelineSymbol {pipeline} class={classes.symbol()} />
+				{#if chevron}
+					{#if Icon}
+						<Icon class="size-3 {iconClass}" aria-hidden="true" />
+					{/if}
 					<span class={classes.status()}>
-						{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
+						{label}
 					</span>
+					<ChevronDown class={classes.icon()} aria-hidden="true" />
 				{:else}
+					<PipelineSymbol {pipeline} class={classes.symbol()} />
 					<span class={classes.status()}>
-						{label}
+						{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
 					</span>
-					<ChevronDown class={classes.icon()} aria-hidden="true" />
 				{/if}
 			</span>
 		{/snippet}
-- 
2.51.2