From 7c64d5ba27ae9fcb8fc9c74cae6282ff218c46cf Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 3 Sep 2026 17:31:52 +0200
Subject: [PATCH] web/pulls: add animation and limit conflict results to 10

Signed-off-by: eti <eti@eti.tf>
---
 .../[version]/[[range]]/PullViewPage.svelte   | 106 +++++++++++-------
 1 file changed, 64 insertions(+), 42 deletions(-)

diff --git a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
index c763fba3c..a2bcd5274 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
@@ -4,8 +4,8 @@
 	import { now as tidNow } from "@atcute/tid";
 	import BellPlus from "$icon/bell-plus";
 	import BellMinus from "$icon/bell-minus";
-	import ChevronDown from "$icon/chevron-down";
-	import ChevronRight from "$icon/chevron-right";
+	import ChevronUp from "$icon/chevron-up";
+	import ArrowDown from "$icon/arrow-down";
 	import IterationCcw from "$icon/iteration-ccw";
 	import PanelRightClose from "$icon/panel-right-close";
 	import MessagesSquare from "$icon/messages-square";
@@ -60,6 +60,7 @@
 	import TicketInfoBar from "$lib/components/repo/tickets/TicketInfoBar.svelte";
 	import type { PageData } from "./$types";
 	import Separator from "$lib/components/ui/Separator.svelte";
+	import { CROSSFADE_DURATION, CROSSFADE_EASING } from "$lib/motion/spring";
 
 	type PullViewData = PageData &
 		Exclude<Awaited<PageData["page"]>, { redirectTo: string }> & {
@@ -184,23 +185,15 @@
 		});
 	});
 
-	const conflictLabels: Record<string, string> = {
-		"content conflict": "Edited",
-		"modify/delete conflict": "Edited & deleted",
-		"add/add conflict": "Added",
-		"rename conflict": "Renamed"
-	};
+	const CONFLICT_PREVIEW_COUNT = 10;
 
-	const conflictGroups = $derived.by(() => {
-		const groups: { label: string; filenames: string[] }[] = [];
-		for (const conflict of check.data?.conflicts ?? []) {
-			const label = conflictLabels[conflict.reason] ?? conflict.reason;
-			const group = groups.find((candidate) => candidate.label === label);
-			if (group) group.filenames.push(conflict.filename);
-			else groups.push({ label, filenames: [conflict.filename] });
-		}
-		return groups;
-	});
+	let allConflictsShown = $state(false);
+
+	const conflicts = $derived(check.data?.conflicts ?? []);
+	const shownConflicts = $derived(
+		allConflictsShown ? conflicts : conflicts.slice(0, CONFLICT_PREVIEW_COUNT)
+	);
+	const hiddenConflictCount = $derived(conflicts.length - shownConflicts.length);
 
 	const short = (hash: string) => hash.slice(0, 8);
 
@@ -646,10 +639,7 @@
 						</div>
 					</header>
 
-					<div
-						class="min-h-0 flex-1 overflow-y-auto"
-						style="margin-bottom: {formHeight}px"
-					>
+					<div class="min-h-0 flex-1 overflow-y-auto">
 						<PullDiscussion
 							markup={data.markup}
 							currentVersion={view.version}
@@ -659,6 +649,7 @@
 							filter={view.mode === "diff" ? inCommitRange : undefined}
 							onUpdateComment={updateComment}
 						/>
+						<div aria-hidden="true" style:height="{formHeight}px"></div>
 					</div>
 				</div>
 			</aside>
@@ -668,33 +659,31 @@
 				style={discussionWidth ? `width: ${discussionWidth}px` : ""}
 				class="fixed right-0 bottom-0 w-[max(20vw,21rem)] space-y-2 border-l border-border-default bg-background-default p-2"
 			>
-				{#if check.data?.conflicts?.length}
+				{#if conflicts.length}
 					<details
 						open
-						class="group flex max-h-96 flex-col overflow-y-scroll rounded-sm border border-border-default"
+						class="conflicts group flex flex-col overflow-hidden rounded-sm border border-border-default bg-background-default"
+						style:--rail-duration="{CROSSFADE_DURATION}ms"
+						style:--rail-easing={CROSSFADE_EASING}
 					>
 						<summary
-							class="transition-color sticky top-0 z-10 flex flex-1 cursor-pointer flex-row items-center justify-between border-border-default bg-background-default p-2 font-medium duration-150 select-none group-open:border-b hover:bg-background-inset"
+							class="order-1 flex cursor-pointer flex-row items-center justify-between bg-background-warning-subtle p-2 font-medium text-foreground-warning transition-colors duration-150 select-none hover:bg-background-warning-subtle-hover"
 						>
 							<span class="flex flex-row items-center gap-2 px-0.5">
-								<ChevronDown class="hidden size-4 group-open:inline" />
-								<ChevronRight class="size-4 group-open:hidden" />
+								<ChevronUp
+									class="size-4 transition-transform duration-150 group-open:rotate-180"
+								/>
 								Conflicts
 							</span>
-							<span
-								class="typography-monospace-regular font-normal text-foreground-muted"
-								>{check.data?.conflicts.length}</span
+							<span class="typography-monospace-regular font-normal"
+								>{conflicts.length}</span
 							>
 						</summary>
-						<div class="flex flex-col gap-1">
-							{#each conflictGroups as group (group.label)}
-								<span
-									class="sticky top-9.75 flex-1 border-b border-border-default bg-background-default px-2 py-1 font-medium not-first:-translate-y-px not-first:border-t"
-									>{group.label}</span
-								>
-								<div class="flex flex-col gap-2 pb-2">
-									{#each group.filenames as filename (filename)}
-										{@const anchor = conflictAnchor(filename)}
+						<div class="min-h-0 overflow-hidden">
+							<div class="max-h-76 overflow-y-auto">
+								<div class="flex flex-col gap-2 py-2">
+									{#each shownConflicts as conflict (conflict.filename)}
+										{@const anchor = conflictAnchor(conflict.filename)}
 										<svelte:element
 											this={anchor ? "a" : "span"}
 											href={anchor}
@@ -702,13 +691,25 @@
 												"truncate px-2 typography-monospace-regular",
 												anchor && "hover:underline"
 											]}
-											title={filename}
+											title={conflict.filename}
 										>
-											{filename}
+											{conflict.filename}
 										</svelte:element>
 									{/each}
+									{#if hiddenConflictCount > 0}
+										<div class="w-full flex-1 px-2">
+											<Button
+												onclick={() => (allConflictsShown = true)}
+												class="w-full"
+												icon={ArrowDown}
+											>
+												Load {hiddenConflictCount} more conflicts
+											</Button>
+										</div>
+									{/if}
 								</div>
-							{/each}
+							</div>
+							<div class="border-t border-border-default"></div>
 						</div>
 					</details>
 					<Separator />
@@ -734,3 +735,24 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.conflicts::details-content {
+		display: grid;
+		grid-template-rows: 0fr;
+		overflow: clip;
+		transition:
+			grid-template-rows var(--rail-duration) var(--rail-easing),
+			content-visibility var(--rail-duration) allow-discrete;
+	}
+
+	.conflicts[open]::details-content {
+		grid-template-rows: 1fr;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.conflicts::details-content {
+			transition: none;
+		}
+	}
+</style>
-- 
2.51.2