From 9256a5cbfde75d819f2ca85c2178bd9c4e888a82 Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Mon, 14 Sep 2026 03:18:42 +0300
Subject: [PATCH] web/repo: extract FileCardHeader from DiffFileHeader

Signed-off-by: dawn <dawn@tangled.org>
---
 .../lib/components/repo/DiffFileHeader.svelte | 65 +++++-------------
 .../repo/FileCardHeader.stories.svelte        | 48 +++++++++++++
 .../lib/components/repo/FileCardHeader.svelte | 67 +++++++++++++++++++
 3 files changed, 133 insertions(+), 47 deletions(-)
 create mode 100644 web/src/lib/components/repo/FileCardHeader.stories.svelte
 create mode 100644 web/src/lib/components/repo/FileCardHeader.svelte

diff --git a/web/src/lib/components/repo/DiffFileHeader.svelte b/web/src/lib/components/repo/DiffFileHeader.svelte
index 4e5b9b0f1..44f7a83ee 100644
--- a/web/src/lib/components/repo/DiffFileHeader.svelte
+++ b/web/src/lib/components/repo/DiffFileHeader.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import ArrowRight from "$icon/arrow-right";
-	import ChevronDown from "$icon/chevron-down";
-	import ChevronRight from "$icon/chevron-right";
 	import Eye from "$icon/eye";
 	import type { SvelteMap } from "svelte/reactivity";
 	import Button from "$lib/components/ui/Button.svelte";
 	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
+	import FileCardHeader from "$lib/components/repo/FileCardHeader.svelte";
 	import type { CodeViewFile } from "$lib/components/repo/DiffCodeView.svelte";
 
 	interface Props {
@@ -29,25 +28,10 @@
 	const liveNote = $derived(
 		note ?? noteState?.get(file.key) ?? (empty ? "no changes to the file itself" : undefined)
 	);
-
-	const titleClass =
-		"flex min-w-0 flex-1 items-center gap-2 overflow-x-auto px-2.5 py-2 text-left select-none";
 </script>
 
-<div
-	class={[
-		"flex justify-between rounded-t-sm border border-border-default bg-background-default transition-colors duration-150 hover:bg-background-subtle",
-		!open && "rounded-b-sm"
-	]}
->
-	{#snippet titleContent()}
-		{#if empty}
-			<span class="size-3.5 shrink-0" aria-hidden="true"></span>
-		{:else if open}
-			<ChevronDown class="size-3.5 shrink-0" aria-hidden="true" />
-		{:else}
-			<ChevronRight class="size-3.5 shrink-0" aria-hidden="true" />
-		{/if}
+<FileCardHeader {open} collapsible={!empty && onToggle != null} spacer={empty} {onToggle}>
+	{#snippet title()}
 		<DiffStatPill stat={file.stat} size="small" />
 		<div class="flex items-center gap-2 overflow-x-auto">
 			{#if renamed}
@@ -63,31 +47,18 @@
 		{/if}
 	{/snippet}
 
-	{#if empty || !onToggle}
-		<div class={titleClass}>
-			{@render titleContent()}
-		</div>
-	{:else}
-		<button type="button" class={[titleClass, "cursor-pointer"]} onclick={() => onToggle?.()}>
-			{@render titleContent()}
-		</button>
-	{/if}
-
-	{#if blobUrl || headerActions}
-		<div class="flex shrink-0 items-center pr-1">
-			{#if blobUrl}
-				<Button
-					href={blobUrl as "/"}
-					variant="ghost"
-					size="small"
-					icon={Eye}
-					class="hidden md:inline-flex"
-					onclick={(event) => event.stopPropagation()}
-				>
-					View file
-				</Button>
-			{/if}
-			{@render headerActions?.(file.key)}
-		</div>
-	{/if}
-</div>
+	{#snippet actions()}
+		{#if blobUrl}
+			<Button
+				href={blobUrl as "/"}
+				variant="ghost"
+				size="small"
+				icon={Eye}
+				class="hidden md:inline-flex"
+			>
+				View file
+			</Button>
+		{/if}
+		{@render headerActions?.(file.key)}
+	{/snippet}
+</FileCardHeader>
diff --git a/web/src/lib/components/repo/FileCardHeader.stories.svelte b/web/src/lib/components/repo/FileCardHeader.stories.svelte
new file mode 100644
index 000000000..f5b385b81
--- /dev/null
+++ b/web/src/lib/components/repo/FileCardHeader.stories.svelte
@@ -0,0 +1,48 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Eye from "$icon/eye";
+	import FileCardHeader from "$lib/components/repo/FileCardHeader.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/FileCardHeader",
+		component: FileCardHeader,
+		tags: ["autodocs"]
+	});
+</script>
+
+{#snippet openTitle()}
+	<span class="typography-monospace-small">src/index.ts</span>
+{/snippet}
+
+{#snippet sampleActions()}
+	<Button variant="ghost" size="small" icon={Eye}>View file</Button>
+{/snippet}
+
+<Story
+	name="Collapsible Open"
+	args={{
+		open: true,
+		collapsible: true,
+		title: openTitle,
+		actions: sampleActions
+	}}
+/>
+
+<Story
+	name="Collapsible Closed"
+	args={{
+		open: false,
+		collapsible: true,
+		title: openTitle
+	}}
+/>
+
+<Story
+	name="Static Non-Collapsible"
+	args={{
+		open: true,
+		collapsible: false,
+		title: openTitle
+	}}
+/>
diff --git a/web/src/lib/components/repo/FileCardHeader.svelte b/web/src/lib/components/repo/FileCardHeader.svelte
new file mode 100644
index 000000000..d325177ad
--- /dev/null
+++ b/web/src/lib/components/repo/FileCardHeader.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import ChevronDown from "$icon/chevron-down";
+	import ChevronRight from "$icon/chevron-right";
+
+	interface Props {
+		open?: boolean;
+		collapsible?: boolean;
+		spacer?: boolean;
+		onToggle?: () => void;
+		class?: string;
+		title: Snippet;
+		actions?: Snippet;
+	}
+
+	let {
+		open = true,
+		collapsible = true,
+		spacer = false,
+		onToggle,
+		class: className = "",
+		title,
+		actions
+	}: Props = $props();
+
+	const isInteractive = $derived(collapsible && onToggle != null);
+	const titleClass =
+		"flex min-w-0 flex-1 items-center gap-2 overflow-x-auto px-2.5 py-2 text-left select-none";
+</script>
+
+<div
+	class={[
+		"flex justify-between rounded-t-sm border border-border-default bg-background-default transition-colors duration-150",
+		isInteractive && "hover:bg-background-subtle",
+		(!open || !collapsible) && "rounded-b-sm",
+		className
+	]}
+>
+	{#if isInteractive}
+		<button
+			type="button"
+			class={[titleClass, "cursor-pointer"]}
+			onclick={onToggle}
+			aria-expanded={open}
+		>
+			{#if open}
+				<ChevronDown class="size-3.5 shrink-0 text-foreground-subtle" aria-hidden="true" />
+			{:else}
+				<ChevronRight class="size-3.5 shrink-0 text-foreground-subtle" aria-hidden="true" />
+			{/if}
+			{@render title()}
+		</button>
+	{:else}
+		<div class={titleClass}>
+			{#if spacer}
+				<span class="size-3.5 shrink-0" aria-hidden="true"></span>
+			{/if}
+			{@render title()}
+		</div>
+	{/if}
+
+	{#if actions}
+		<div class="flex shrink-0 items-center gap-2 pr-1.5">
+			{@render actions()}
+		</div>
+	{/if}
+</div>
-- 
2.51.2