From 6ba2b3943797d8b45e220ac53babbc6dd35290d2 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 1 Sep 2026 10:47:34 +0200
Subject: [PATCH] web/pipelines: fold the step rail into the active
 WorkflowSidebar card

Signed-off-by: eti <eti@eti.tf>
---
 .../pipelines/WorkflowSidebar.stories.svelte  | 25 ++++++-
 .../repo/pipelines/WorkflowSidebar.svelte     | 70 ++++++++++++++++---
 2 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/repo/pipelines/WorkflowSidebar.stories.svelte b/web/src/lib/components/repo/pipelines/WorkflowSidebar.stories.svelte
index 4b4d7f226..162f9c50b 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowSidebar.stories.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowSidebar.stories.svelte
@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import WorkflowSidebar from "./WorkflowSidebar.svelte";
-	import { pipelines, runningWorkflowLog } from "$fixtures/pipelines";
+	import { pipelines, runningWorkflowLog, workflowLog } from "$fixtures/pipelines";
 
 	const run = pipelines[0];
 
@@ -30,7 +30,8 @@
 	name="Mixed outcomes"
 	args={{ workflows: pipelines[1].workflows, active: "test", createdAt: pipelines[1].createdAt }}
 />
-<!-- the step rail nests inside the active card, below its divider, at the width of the real column -->
+<!-- the step rail nests inside the active card, below its divider, at the width of the real column.
+     a running workflow shows it straight away -->
 <Story name="With steps">
 	{#snippet template(args)}
 		<div class="w-60">
@@ -42,3 +43,23 @@
 		</div>
 	{/snippet}
 </Story>
+<!-- a run that was already over folds its rail away, and the card unfolds it when pressed -->
+<Story
+	name="Finished, folded"
+	args={{
+		workflows: pipelines[2].workflows,
+		pipelineId: pipelines[2].id,
+		active: "test",
+		createdAt: pipelines[2].createdAt
+	}}
+>
+	{#snippet template(args)}
+		<div class="w-60">
+			<WorkflowSidebar {...args}>
+				{#snippet activeExtra()}
+					<WorkflowSteps steps={workflowLog} workflowStatus="success" />
+				{/snippet}
+			</WorkflowSidebar>
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
index b6d738136..755f1225b 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
@@ -10,11 +10,11 @@
 			list: "flex flex-col gap-2",
 			// the whole card is the link to the workflow
 			card: "flex flex-col gap-1.5 rounded-sm border px-3 py-2.5 no-underline transition-colors hover:no-underline",
-			// the step rows are buttons, and a button can't nest inside the <a> that used
-			// to be the whole card, so the active card's chrome moves to this wrapper and
-			// the <a> shrinks down to just its header area
+			// the step rows are buttons, and a button can't nest inside the card element
+			// itself, so the active card's chrome moves to this wrapper and the header
+			// shrinks down to just its own area
 			wrapper: `overflow-hidden rounded-sm border ${ACTIVE_CHROME}`,
-			link: "flex flex-col gap-1.5 px-3 py-2.5 no-underline transition-colors hover:no-underline",
+			header: "flex w-full cursor-pointer flex-col gap-1.5 px-3 py-2.5 text-left no-underline transition-colors hover:no-underline",
 			divider: "border-t border-border-default dark:border-border-disabled",
 			top: "flex items-center justify-between gap-3",
 			name: "truncate font-medium text-foreground-default",
@@ -40,12 +40,13 @@
 </script>
 
 <script lang="ts">
-	import type { Snippet } from "svelte";
+	import { untrack, type Snippet } from "svelte";
 	import { resolve } from "$app/paths";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import { formatDuration } from "$lib/format";
 	import type { WorkflowSummary } from "$lib/components/repo/types";
-	import { STATUS_LABELS } from "./pipeline";
+	import { CROSSFADE_DURATION, CROSSFADE_EASING } from "$lib/motion/spring";
+	import { isLive, STATUS_LABELS } from "./pipeline";
 	import PipelineStatusIcon from "./PipelineStatusIcon.svelte";
 
 	interface Props {
@@ -71,6 +72,18 @@
 		resolve(
 			`/${ownerHandle}/${repoName}/pipelines/${pipelineId}/workflow/${encodeURIComponent(name)}` as "/"
 		);
+
+	const railId = $props.id();
+
+	// a run still going is news, so its steps are already open. a run you came to read
+	// after the fact opens on the header alone and unfolds when you ask. settled once,
+	// at mount: a run that finishes while you watch has no business folding itself shut
+	let expanded = $state(
+		untrack(() => {
+			const current = workflows.find((workflow) => workflow.name === active);
+			return current !== undefined && isLive(current.status);
+		})
+	);
 </script>
 
 {#snippet cardBody(workflow: WorkflowSummary)}
@@ -96,11 +109,30 @@
 	{#each workflows as workflow (workflow.name)}
 		{#if workflow.name === active && activeExtra}
 			<div class={classes().wrapper()}>
-				<a href={href(workflow.name)} class={classes().link()} aria-current="page">
+				<!-- already the workflow on screen, so the card has nowhere to go: pressing it
+				     folds the rail instead. reaching it from another card is the navigation,
+				     and the fold only comes into play once you are here -->
+				<button
+					type="button"
+					class={classes().header()}
+					aria-expanded={expanded}
+					aria-controls={railId}
+					onclick={() => (expanded = !expanded)}
+				>
 					{@render cardBody(workflow)}
-				</a>
-				<div class={classes().divider()}></div>
-				<div class={classes().extra()}>{@render activeExtra()}</div>
+				</button>
+				<div
+					id={railId}
+					class="rail"
+					class:open={expanded}
+					style:--rail-duration="{CROSSFADE_DURATION}ms"
+					style:--rail-easing={CROSSFADE_EASING}
+				>
+					<div class="min-h-0 overflow-hidden" inert={!expanded}>
+						<div class={classes().divider()}></div>
+						<div class={classes().extra()}>{@render activeExtra()}</div>
+					</div>
+				</div>
 			</div>
 		{:else}
 			{@const slots = classes({ active: workflow.name === active })}
@@ -114,3 +146,21 @@
 		{/if}
 	{/each}
 </div>
+
+<style>
+	.rail {
+		display: grid;
+		grid-template-rows: 0fr;
+		transition: grid-template-rows var(--rail-duration) var(--rail-easing);
+	}
+
+	.rail.open {
+		grid-template-rows: 1fr;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.rail {
+			transition: none;
+		}
+	}
+</style>
-- 
2.51.2