From 155e9bb1269202b9f8e6a02e4c1c0ac0e425342d Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Mon, 18 May 2026 23:52:16 +0200
Subject: [PATCH] web: single-pointer selection + post-action focus, video
 debounce, tags metadata sidebar

Selection: plain arrow nav now clears prior multi-selection so exactly
one tile is ringed at a time; shift-extend still grows from the anchor.
onApprove / onRestore / onDelete advance focus via focusAfter(ids)
before clearing selection, matching onArchive.

Preview: defer mounting <VideoPlayer> by 250ms so arrow-skim across
video tiles doesn't open and immediately cancel range requests; hard-
abort the underlying <video> on unmount so the connection releases.

Tags drill view: right-sidebar metadata wired in (single-photo
RightSidebar, BulkMetadataSidebar for >=2 selected), resizable edge
mirrors the timeline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/lib/actions/gridKeyNav.ts             |   4 +
 web/src/lib/components/layout/Toolbar.svelte  |   4 +-
 .../components/preview/InlinePreview.svelte   |  56 +++++++--
 .../lib/components/preview/VideoPlayer.svelte |  29 ++++-
 .../components/timeline/BulkActionBar.svelte  |   3 +
 web/src/routes/+page.svelte                   |   5 +
 web/src/routes/tags/+page.svelte              | 109 ++++++++++++++----
 7 files changed, 173 insertions(+), 37 deletions(-)

diff --git a/web/src/lib/actions/gridKeyNav.ts b/web/src/lib/actions/gridKeyNav.ts
index 8d21680..fc3ebbd 100644
--- a/web/src/lib/actions/gridKeyNav.ts
+++ b/web/src/lib/actions/gridKeyNav.ts
@@ -138,6 +138,10 @@ export function gridKeyNav(node: HTMLElement, params: GridKeyNavParams = {}) {
 					: selection.order.length - 1
 				: Math.min(Math.max(0, cur + delta), selection.order.length - 1);
 		const nextUid = selection.order[next];
+		// Plain arrow nav collapses any prior multi-selection down to the
+		// cursor: one ringed tile at a time. Shift-extend keeps `ids`
+		// growing from the anchor (selectRange runs after this).
+		if (!extending) clearSelection();
 		setFocused(nextUid);
 		if (!extending) setAnchor(nextUid);
 		const tile = node.querySelector<HTMLElement>(`[data-uid="${nextUid}"]`);
diff --git a/web/src/lib/components/layout/Toolbar.svelte b/web/src/lib/components/layout/Toolbar.svelte
index 90f16ec..49076a4 100644
--- a/web/src/lib/components/layout/Toolbar.svelte
+++ b/web/src/lib/components/layout/Toolbar.svelte
@@ -24,7 +24,9 @@
 
 	interface Props {
 		/** Render the right-sidebar toggle. Routes without a right panel
-		 *  (map, ratings, colors, tags) leave this off. */
+		 *  (map, ratings, colors) leave this off. /tags toggles it on
+		 *  only while drilled into a category, where the photo grid is
+		 *  showing real photos with metadata. */
 		showRightToggle?: boolean;
 		children?: import('svelte').Snippet;
 		trailing?: import('svelte').Snippet;
diff --git a/web/src/lib/components/preview/InlinePreview.svelte b/web/src/lib/components/preview/InlinePreview.svelte
index 560bc09..ccb7675 100644
--- a/web/src/lib/components/preview/InlinePreview.svelte
+++ b/web/src/lib/components/preview/InlinePreview.svelte
@@ -38,6 +38,31 @@
 
 	const currentIndex = $derived(uid ? order.indexOf(uid) : -1);
 
+	// Debounce window before a focused video actually mounts <VideoPlayer>
+	// and opens an HTTP range request. Short enough that a deliberate
+	// click feels instant; long enough that arrow-skim across video tiles
+	// never opens (and immediately cancels) a stream we'd have thrown
+	// away anyway. The grid's thumbnail traffic is the thing this
+	// protects.
+	const VIDEO_LOAD_DELAY_MS = 250;
+	let armedUid = $state<string | null>(null);
+
+	$effect(() => {
+		// Re-arm on every uid change. Until the timer fires, the template
+		// renders the poster image instead of <VideoPlayer>, so no video
+		// fetch is issued. If uid changes again before the 250 ms is up,
+		// the cleanup clears the pending timer and the new one takes over.
+		const target = uid;
+		if (!target) {
+			armedUid = null;
+			return;
+		}
+		const t = setTimeout(() => {
+			armedUid = target;
+		}, VIDEO_LOAD_DELAY_MS);
+		return () => clearTimeout(t);
+	});
+
 	function focusAt(i: number) {
 		const next = order[i];
 		if (!next) return;
@@ -78,17 +103,28 @@
 
 		{#if isVideo(photoQuery.data)}
 			{@const vf = videoFile(photoQuery.data)}
-			<!-- Key on the video hash so navigating to a new video remounts the
-			     player. Without this the <media-player> element keeps the
-			     previous src bound and `autoplay` doesn't re-fire — clicking
-			     a video tile would leave the pane idle on its poster. -->
-			{#key vf.Hash}
-				<VideoPlayer
-					src={videoUrl(vf.Hash)}
-					poster={thumbUrl(pf.Hash, 'fit_1280')}
-					title={photoQuery.data.OriginalName ?? pf.Name ?? ''}
+			{#if armedUid === uid}
+				<!-- Key on the video hash so navigating to a new video remounts the
+				     player. Without this the <media-player> element keeps the
+				     previous src bound and `autoplay` doesn't re-fire — clicking
+				     a video tile would leave the pane idle on its poster. -->
+				{#key vf.Hash}
+					<VideoPlayer
+						src={videoUrl(vf.Hash)}
+						poster={thumbUrl(pf.Hash, 'fit_1280')}
+						title={photoQuery.data.OriginalName ?? pf.Name ?? ''}
+					/>
+				{/key}
+			{:else}
+				<!-- Debounce window: render the poster only. Matches the
+				     still-photo branch's styling so the pane reads identically
+				     until <VideoPlayer> arms in. -->
+				<img
+					src={thumbUrl(pf.Hash, 'fit_1280')}
+					alt={photoQuery.data.OriginalName ?? pf.Name ?? 'Video'}
+					class="max-h-full max-w-full rounded-md object-contain shadow-2xl"
 				/>
-			{/key}
+			{/if}
 		{:else}
 			<img
 				src={thumbUrl(pf.Hash, 'fit_1280')}
diff --git a/web/src/lib/components/preview/VideoPlayer.svelte b/web/src/lib/components/preview/VideoPlayer.svelte
index ed8938c..f4aa58e 100644
--- a/web/src/lib/components/preview/VideoPlayer.svelte
+++ b/web/src/lib/components/preview/VideoPlayer.svelte
@@ -10,7 +10,7 @@
 	  - the two CSS imports ship the dark theme and video-layout styles
 -->
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import 'vidstack/player/styles/default/theme.css';
 	import 'vidstack/player/styles/default/layouts/video.css';
 
@@ -22,6 +22,10 @@
 	let { src, poster, title }: Props = $props();
 
 	let ready = $state(false);
+	// Whichever branch is currently mounted (fallback <video> or vidstack
+	// <media-player>) binds here. On destroy we reach through this ref to
+	// abort the in-flight range request — see onDestroy below.
+	let host = $state<HTMLElement | undefined>();
 
 	onMount(async () => {
 		// Bundle these into the client chunk only — the modules side-effect
@@ -31,6 +35,27 @@
 		await import('vidstack/player/layouts/default');
 		ready = true;
 	});
+
+	// Hard-abort the underlying <video> on unmount. Detaching the element
+	// alone doesn't reliably release the HTTP range request — the connection
+	// can linger as "Pending" long enough to starve the grid's thumbnail
+	// queue. Explicitly pausing, clearing src, and calling load() tells the
+	// network layer to drop the stream now.
+	onDestroy(() => {
+		if (!host) return;
+		const v =
+			host.tagName.toLowerCase() === 'video'
+				? (host as HTMLVideoElement)
+				: host.querySelector('video');
+		if (!v) return;
+		try {
+			v.pause();
+			v.removeAttribute('src');
+			v.load();
+		} catch {
+			// Element may already be detached / GC'd; ignore.
+		}
+	});
 </script>
 
 {#if ready}
@@ -43,6 +68,7 @@
 		directly, no probe needed.
 	-->
 	<media-player
+		bind:this={host}
 		class="vds-player max-h-full max-w-full rounded-md shadow-2xl"
 		title={title ?? ''}
 		{poster}
@@ -64,6 +90,7 @@
 		 visible so the transition into the full chrome isn't jarring. -->
 	<!-- svelte-ignore a11y_media_has_caption -->
 	<video
+		bind:this={host}
 		{src}
 		{poster}
 		controls
diff --git a/web/src/lib/components/timeline/BulkActionBar.svelte b/web/src/lib/components/timeline/BulkActionBar.svelte
index 7590c1d..faee471 100644
--- a/web/src/lib/components/timeline/BulkActionBar.svelte
+++ b/web/src/lib/components/timeline/BulkActionBar.svelte
@@ -87,6 +87,7 @@
 			} else {
 				toast.success(`Kept ${ids.length}`);
 			}
+			focusAfter(ids);
 			clearSelection();
 		});
 	}
@@ -124,6 +125,7 @@
 		await withBusy(async () => {
 			try {
 				await batchDelete(ids);
+				focusAfter(ids);
 				clearSelection();
 				toast.success(`Deleted ${ids.length}`);
 			} catch (err) {
@@ -142,6 +144,7 @@
 					await batchArchive(ids);
 					void qc.invalidateQueries({ queryKey: ['photos'] });
 				});
+				focusAfter(ids);
 				clearSelection();
 				toast.success(`Restored ${ids.length}`);
 			} catch (err) {
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 886b369..dbd1fbc 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -26,6 +26,7 @@
   import { isAuthenticated } from "$lib/stores/session.svelte";
   import { untrack } from "svelte";
   import {
+    clearSelection,
     isSelected,
     selectRange,
     selection,
@@ -570,6 +571,10 @@
     const destUid = rows[r]?.uids[c];
     if (!destUid) return;
 
+    // Plain arrow nav collapses any prior multi-selection to the cursor
+    // (mirrors gridKeyNav.moveFocus). Shift-extend keeps `ids` growing
+    // from the anchor below.
+    if (!extending) clearSelection();
     setFocused(destUid);
     if (!extending) setAnchor(destUid);
     if (extending && selection.focused) selectRange(destUid);
diff --git a/web/src/routes/tags/+page.svelte b/web/src/routes/tags/+page.svelte
index 7ce079e..00b6bbd 100644
--- a/web/src/routes/tags/+page.svelte
+++ b/web/src/routes/tags/+page.svelte
@@ -6,6 +6,7 @@
 		aggregateKeywords,
 		countPhotos,
 		getAllMarks,
+		getPhoto,
 		listLabels,
 		listPhotos,
 		type AggregatedKeyword,
@@ -13,13 +14,16 @@
 		type PpLabel
 	} from '$lib/services/photoprism';
 	import { isAuthenticated, session, thumbUrl, userBasePath } from '$lib/stores/session.svelte';
-	import { view } from '$lib/stores/view.svelte';
+	import { setRightSidebarWidth, view } from '$lib/stores/view.svelte';
 	import { primaryFile, type PpPhoto } from '$lib/types/photoprism';
 	import { gridKeyNav } from '$lib/actions/gridKeyNav';
+	import { resizable } from '$lib/actions/resizable';
 	import { selection } from '$lib/stores/selection.svelte';
 	import BulkActionBar from '$lib/components/timeline/BulkActionBar.svelte';
+	import BulkMetadataSidebar from '$lib/components/sidebar/BulkMetadataSidebar.svelte';
 	import InlinePreview from '$lib/components/preview/InlinePreview.svelte';
 	import PhotoGrid from '$lib/components/timeline/PhotoGrid.svelte';
+	import RightSidebar from '$lib/components/sidebar/RightSidebar.svelte';
 	import SkeletonGrid from '$lib/components/timeline/SkeletonGrid.svelte';
 	import SplitGrid from '$lib/components/preview/SplitGrid.svelte';
 	import Toolbar from '$lib/components/layout/Toolbar.svelte';
@@ -295,6 +299,17 @@
 			: drillPhotosQuery.data ?? []
 	);
 
+	// Metadata for the focused tile in the drill-in PhotoGrid. Mirrors the
+	// timeline (+page.svelte) and /review wiring so the right sidebar
+	// reads consistently across views.
+	const focusedPhotoQuery = createQuery<PpPhoto | null>(() => ({
+		queryKey: ['photo', selection.focused ?? ''],
+		queryFn: () =>
+			selection.focused ? getPhoto(selection.focused) : Promise.resolve(null),
+		enabled: isAuthenticated() && Boolean(selection.focused),
+		staleTime: 0
+	}));
+
 	function starLabel(rating: number): string {
 		return '★'.repeat(rating);
 	}
@@ -319,7 +334,7 @@
 	const drillCount = $derived<number>(drillPhotos.length);
 </script>
 
-<Toolbar>
+<Toolbar showRightToggle={Boolean(drillKey)}>
 	<span class="rounded-md border border-border px-2 py-0.5 text-[11px] text-muted-foreground">
 		Tags
 	</span>
@@ -392,30 +407,74 @@
 </Toolbar>
 
 {#if drillKey}
-	<SplitGrid>
-		{#snippet preview()}
-			<InlinePreview uid={selection.focused} order={selection.order} />
-		{/snippet}
-		{#snippet grid()}
-			<main
-				class="min-h-0 flex-1 overflow-y-auto p-6 outline-none focus:outline-none"
-				use:gridKeyNav={{}}
+	<div class="flex min-h-0 flex-1">
+		<div class="flex min-w-0 flex-1 flex-col">
+			<SplitGrid>
+				{#snippet preview()}
+					<InlinePreview uid={selection.focused} order={selection.order} />
+				{/snippet}
+				{#snippet grid()}
+					<main
+						class="min-h-0 flex-1 overflow-y-auto p-6 outline-none focus:outline-none"
+						use:gridKeyNav={{}}
+					>
+						<!-- Drill-down photo grid. Reused for all four tabs; the q-DSL
+						     drives labels/keywords while ratings/colors resolve locally
+						     from the marks pool already in cache. -->
+						{#if activeTab !== 'ratings' && activeTab !== 'colors' && drillPhotosQuery.isPending}
+							<SkeletonGrid />
+						{:else if activeTab !== 'ratings' && activeTab !== 'colors' && drillPhotosQuery.isError}
+							<p class="text-sm text-destructive">Failed to load photos.</p>
+						{:else if drillPhotos.length === 0}
+							<p class="text-sm text-muted-foreground">No photos under this tag.</p>
+						{:else}
+							<PhotoGrid photos={drillPhotos} />
+						{/if}
+					</main>
+				{/snippet}
+			</SplitGrid>
+		</div>
+
+		{#if !view.rightSidebarCollapsed}
+			<aside
+				class="relative h-full shrink-0 border-l border-border bg-card/30"
+				style="width: {view.rightSidebarWidth}px;"
 			>
-				<!-- Drill-down photo grid. Reused for all four tabs; the q-DSL
-				     drives labels/keywords while ratings/colors resolve locally
-				     from the marks pool already in cache. -->
-				{#if activeTab !== 'ratings' && activeTab !== 'colors' && drillPhotosQuery.isPending}
-					<SkeletonGrid />
-				{:else if activeTab !== 'ratings' && activeTab !== 'colors' && drillPhotosQuery.isError}
-					<p class="text-sm text-destructive">Failed to load photos.</p>
-				{:else if drillPhotos.length === 0}
-					<p class="text-sm text-muted-foreground">No photos under this tag.</p>
-				{:else}
-					<PhotoGrid photos={drillPhotos} />
-				{/if}
-			</main>
-		{/snippet}
-	</SplitGrid>
+				<div class="h-full overflow-y-auto">
+					{#if selection.ids.size >= 2}
+						<BulkMetadataSidebar ids={Array.from(selection.ids)} />
+					{:else if focusedPhotoQuery.data}
+						<RightSidebar photo={focusedPhotoQuery.data} />
+					{:else if focusedPhotoQuery.isFetching}
+						<p class="px-3 py-2 text-xs text-muted-foreground">Loading…</p>
+					{:else}
+						<div class="space-y-2 p-4 text-center">
+							<div class="text-xl">ⓘ</div>
+							<p class="text-xs text-muted-foreground">
+								Use arrow keys or <kbd class="rounded bg-muted px-1">⌘</kbd>+click
+								on a thumbnail to view its metadata here.
+							</p>
+						</div>
+					{/if}
+				</div>
+				<div
+					class="group absolute -left-1.5 top-0 z-20 h-full w-3 cursor-col-resize"
+					use:resizable={{
+						edge: 'left',
+						getWidth: () => view.rightSidebarWidth,
+						setWidth: setRightSidebarWidth
+					}}
+					role="separator"
+					aria-orientation="vertical"
+					aria-label="Resize info panel"
+				>
+					<div
+						class="ml-1 h-full w-0.5 bg-transparent transition-colors group-hover:bg-primary/40"
+					></div>
+				</div>
+			</aside>
+		{/if}
+	</div>
 {:else}
 <main
 	class="min-h-0 flex-1 overflow-y-auto p-6 outline-none focus:outline-none"