From 6af35c884445cdbfbeb467f040efefdba3eff4fd Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Thu, 17 Sep 2026 10:13:52 +0100
Subject: [PATCH] web/pulls: apply version selection on pick and drop the
 confirm buttons

clicking a version or building a comparison in the pull version
dropdown now navigates straight away, so the "see version" and
"compare versions" buttons are gone. the panel gets a "Versions"
header with a ghost reset button that only shows when something other
than the latest version is on screen.

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../repo/pulls/PullVersionList.stories.svelte |  8 +--
 .../repo/pulls/PullVersionList.svelte         | 63 ++++++++-----------
 2 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte b/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte
index 37cc15e2c..2fa8f38a9 100644
--- a/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte
@@ -32,8 +32,8 @@
 <script lang="ts">
 	import type { Range } from "$lib/components/ui/RangeSelector.svelte";
 
-	// the story is the owner: it holds the viewed range and only moves it when `oncommit` asks.
-	// the trigger tracks the pending selection, so it changes before this does
+	// the story is the owner: it holds the viewed range and moves it when `oncommit` asks,
+	// which happens the moment a row, span or dot is picked
 	let viewed = $state<Range>({ start: 2, end: 2 });
 	let commits = $state(0);
 
@@ -59,8 +59,8 @@
 </Story>
 
 <!-- what a caller seeding from the URL looks like: opens already spanning every version.
-     no owner here, so Compare Versions snaps the label back -- that's the range being
-     declined, not a bug -->
+     no owner here, so a pick snaps the label back -- that's the range being declined, not
+     a bug -->
 <Story name="Seeded" args={{ range: { start: 0, end: 2 } }} />
 
 <!-- one version, so the label can only ever read v0 -->
diff --git a/web/src/lib/components/repo/pulls/PullVersionList.svelte b/web/src/lib/components/repo/pulls/PullVersionList.svelte
index c03f15af3..e7000dfc5 100644
--- a/web/src/lib/components/repo/pulls/PullVersionList.svelte
+++ b/web/src/lib/components/repo/pulls/PullVersionList.svelte
@@ -4,7 +4,6 @@
 	import ChevronDown from "$icon/chevron-down";
 	import ArrowRight from "$icon/arrow-right";
 	import RotateCcw from "$icon/rotate-ccw";
-	import GitCompareArrows from "$icon/git-compare-arrows";
 	import Dropdown from "$lib/components/ui/Dropdown.svelte";
 	import RangeSelector, {
 		type Range,
@@ -13,7 +12,6 @@
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import type { PullSubmission } from "$lib/api";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
-	import Separator from "$lib/components/ui/Separator.svelte";
 
 	interface Props {
 		versions: PullSubmission[];
@@ -23,24 +21,20 @@
 
 	let { versions, range, oncommit }: Props = $props();
 
-	let pending = $state<Range | null>(null);
+	const latest = $derived(versions.length - 1);
+	// nothing to go back to while the newest version is what's on screen
+	const canReset = $derived(range.start !== latest || range.end !== latest);
 
-	const selected = $derived(pending ?? range);
-	const isInterdiff = $derived(selected.start !== selected.end);
-
-	const reset = () => {
-		const latest = versions.length - 1;
-		pending = null;
-		oncommit?.({ start: latest, end: latest });
-	};
+	const menuId = $props.id();
 
-	const compare = () => {
-		const next = selected;
-		pending = null;
+	// picking a row, shift-clicking a span or dragging a dot all land straight on the page.
+	// the menu stays open so the reader can keep stepping through versions
+	const commit = (next: Range) => {
+		if (next.start === range.start && next.end === range.end) return;
 		oncommit?.(next);
 	};
 
-	const menuId = $props.id();
+	const reset = () => commit({ start: latest, end: latest });
 
 	const short = (id: string) => id.slice(0, 8);
 </script>
@@ -69,33 +63,26 @@
 		<ChevronDown class="size-4" />
 	{/snippet}
 	<div class="w-72 bg-background-default p-2">
+		<!-- the header keeps its height when the reset button is away, so the list never jumps -->
+		<div class="mb-2 flex min-h-8 items-center justify-between pl-3">
+			<h3 class="typography-paragraph-small font-medium text-foreground-default">Versions</h3>
+			{#if canReset}
+				<Button
+					variant="ghost"
+					size="small"
+					icon={RotateCcw}
+					title="Back to the latest version"
+					onclick={reset}
+				>
+					Reset
+				</Button>
+			{/if}
+		</div>
 		<RangeSelector
 			items={versions}
 			row={versionRow}
 			mode="select-bottom"
-			bind:range={() => selected, (next) => (pending = next)}
+			bind:range={() => range, commit}
 		/>
-		<div class="flex h-4 items-center">
-			<Separator />
-		</div>
-		<div class="flex gap-2">
-			<Button
-				icon={RotateCcw}
-				onclick={reset}
-				popovertarget={menuId}
-				popovertargetaction="hide"
-			>
-				Reset
-			</Button>
-			<Button
-				class="flex-1"
-				icon={GitCompareArrows}
-				onclick={compare}
-				popovertarget={menuId}
-				popovertargetaction="hide"
-			>
-				{isInterdiff ? "Compare versions" : "See version"}
-			</Button>
-		</div>
 	</div>
 </Dropdown>
-- 
2.51.2