From 14b23c9ea5f63debbbbd1c3bcc6ff9ed3737f642 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 5 Aug 2026 15:39:31 +0300
Subject: [PATCH] web/components/pipelines: improve PipelineCard look

Signed-off-by: eti <eti@eti.tf>
---
 .../pipelines/PipelineCard.stories.svelte     |  2 +-
 .../repo/pipelines/PipelineCard.svelte        |  2 +-
 .../repo/pipelines/PipelineCardContent.svelte | 40 +++++--------------
 3 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/web/src/lib/components/repo/pipelines/PipelineCard.stories.svelte b/web/src/lib/components/repo/pipelines/PipelineCard.stories.svelte
index ddde759a4..6e5dec0f3 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCard.stories.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCard.stories.svelte
@@ -33,5 +33,5 @@
 />
 <Story name="Timed out" args={{ pipeline: timedOut }} />
 <Story name="Cancelled" args={{ pipeline: cancelled }} />
-<Story name="Waiting for a spindle" args={{ pipeline: waiting }} />
+<Story name="Waiting" args={{ pipeline: waiting }} />
 <Story name="Plain" args={{ border: false, shadow: false, background: false }} />
diff --git a/web/src/lib/components/repo/pipelines/PipelineCard.svelte b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
index 4f0ec4152..03f706d98 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCard.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
@@ -25,6 +25,6 @@
 	}: Props = $props();
 </script>
 
-<Card {border} {shadow} {background} padding="small">
+<Card {border} {shadow} {background} padding="small" class="pt-5.5 pr-4 pl-2">
 	<PipelineCardContent {ownerHandle} {repoName} {pipeline} {forkLabels} />
 </Card>
diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
index 25db63196..06d4a92fc 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -1,23 +1,20 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "tailwind-variants";
-	import type { TagVariants } from "$lib/components/ui/Tag.svelte";
-	import type { PipelineStatus } from "$lib/components/repo/types";
 
 	export const pipelineCardContent = tv({
 		slots: {
 			// does not wrap: a long branch name wraps inside the trigger group instead, so the
 			// sha stays pinned top-right
 			header: "flex items-start justify-between gap-3 pb-2",
-			trigger: "flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1",
+			trigger: "ml-4 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1",
 			triggerRow: "flex flex-wrap items-center gap-x-1.5 gap-y-1 text-foreground-default",
 			triggerIcon: "size-4 shrink-0 text-foreground-muted",
 			triggerVerb: "text-foreground-muted",
 			triggerRef: "font-semibold",
 			triggerArrow: "size-3 shrink-0 text-foreground-muted",
-			pullLink: "typography-paragraph-small text-foreground-muted no-underline hover:underline",
 			sha: "shrink-0 rounded-sm bg-background-inset px-2 py-0.5 typography-monospace-small text-foreground-default no-underline hover:underline",
 			meta: "flex flex-wrap items-center justify-between text-foreground-muted",
-			metaSub: "flex flex-wrap items-center gap-2",
+			metaSub: "mr-2 flex flex-wrap items-center gap-2",
 			workflows: "ml-1",
 			duration: "inline-flex items-center gap-1",
 			durationIcon: "size-3 shrink-0"
@@ -35,16 +32,6 @@
 	});
 
 	export type PipelineCardContentVariants = VariantProps<typeof pipelineCardContent>;
-
-	/** which Tag colour each status uses */
-	export const STATUS_TAG_COLORS: Record<PipelineStatus, TagVariants["color"]> = {
-		pending: "gray",
-		running: "warning",
-		success: "success",
-		failed: "danger",
-		timeout: "warning",
-		cancelled: "gray"
-	};
 </script>
 
 <script lang="ts">
@@ -56,13 +43,12 @@
 	import GitPullRequest from "$icon/git-pull-request";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import { formatDuration } from "$lib/format";
-	import Tag from "$lib/components/ui/Tag.svelte";
 	import type { PipelineSummary } from "$lib/components/repo/types";
-	import { aggregateStatus, longSummary, STATUS_LABELS, totalDuration } from "./pipeline";
-	import { STATUS_ICONS } from "./PipelineStatusIcon.svelte";
+	import { longSummary, totalDuration } from "./pipeline";
 	import PipelineWorkflows from "./PipelineWorkflows.svelte";
 	import Separator from "$lib/components/ui/Separator.svelte";
 	import Skeleton from "$lib/components/ui/Skeleton.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
 
 	interface Props {
 		ownerHandle: string;
@@ -74,7 +60,6 @@
 
 	let { ownerHandle, repoName, pipeline, forkLabels }: Props = $props();
 
-	const status = $derived(aggregateStatus(pipeline));
 	const duration = $derived(totalDuration(pipeline));
 
 	// links to the first workflow's logs, plain text until a spindle reports one
@@ -135,7 +120,12 @@
 		{/if}
 
 		{#if pipeline.trigger.kind === "pull_request" && pipeline.trigger.pullPath}
-			<a href={resolve(pipeline.trigger.pullPath as "/")} class={classes.pullLink()}> (view PR) </a>
+			<Button
+				href={resolve(pipeline.trigger.pullPath as "/")}
+				icon={GitPullRequest}
+				size="small"
+				variant="ghost">Open PR</Button
+			>
 		{/if}
 	</div>
 
@@ -148,16 +138,8 @@
 
 <div class={classes.meta()}>
 	<span class={classes.metaSub()}>
-		<Tag
-			class="mt-px"
-			iconClass={status === "running" ? "animate-[spin_2s_linear_infinite]" : undefined}
-			size="large"
-			color={STATUS_TAG_COLORS[status]}
-			icon={STATUS_ICONS[status]}>{STATUS_LABELS[status]}</Tag
-		>
-
 		<span class={classes.workflows()} title={longSummary(pipeline) || undefined}>
-			<PipelineWorkflows {ownerHandle} {repoName} {pipeline} />
+			<PipelineWorkflows chevron={true} {ownerHandle} {repoName} {pipeline} />
 		</span>
 	</span>
 
-- 
2.54.0