From 29f7ad70734111baadc60744fb57a2237ff79fa2 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 20 May 2026 15:04:23 +0200
Subject: [PATCH] web: deep-link from RightSidebar to folder/map + anchor-mode
 timeline + fix root count
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

RightSidebar:
- Folder + Location rows gain a small ArrowUpRight icon button that
  deep-links into the timeline / map view focused on the photo. OSM
  external link removed; the in-app map nav covers the same job.

Folder navigation:
- New navigateToFolder(path, { focusUid, focusTakenAt }) helper in the
  filters store; LeftSidebar's pickFolder collapses to a one-liner that
  reuses it.
- One-shot pending-focus stash carries both UID and TakenAt across the
  goto. URL-watch effect on the timeline consumes the stash so even
  same-folder navigations (where the filter doesn't change) get
  picked up.

Anchor-mode timeline query:
- listPhotosAround(q, takenAt, after, before) issues two parallel
  PhotoPrism calls (`after:<day-1>` oldest-first + `before:<day+1>`
  newest-first), merges + dedupes newest-first. Uses PhotoPrism's
  existing date-only DSL clauses — no server changes.
- When a deep-link stashes a TakenAt, page 0 of the photosQuery uses
  the merged window so the target photo is loaded even for photos
  buried past the standard newest-first cursor. Pages 1+ are disabled
  in anchor mode (PhotoPrism's day-precision cursor would infinite-loop
  on dense days; users see 120 around the target, refresh to drop the
  anchor).
- After page 0 lands, the existing scrollToIndex(targetIdx) expands the
  windowed render set + scrolls the tile into view.

Map view:
- /map honors `?lat=&lng=&zoom=&focus=` URL params, jumping to the
  photo's coordinates at zoom 17 instead of fitBounds-ing the full
  library. Params are stripped after first apply so a manual zoom-out
  + reload doesn't snap back.

LeftSidebar root count badge:
- Now matches what Cmd+A selects in the timeline. Old code used
  /config.count.all (library aggregate, includes archived/hidden/
  review). Switched to countPhotos('', { merged: true }) which counts
  the actual photo entries the timeline lists.
- countPhotos gains a `merged` option; with merged=true it returns the
  response body length instead of the X-Count header — PhotoPrism's
  X-Count is always the file-row count regardless of merged, so a
  HEIC + JPG companion pair inflated the badge to 2.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../lib/components/layout/LeftSidebar.svelte  |  43 +++++---
 .../components/sidebar/RightSidebar.svelte    |  61 +++++++----
 .../components/timeline/BulkActionBar.svelte  |  26 +++--
 web/src/lib/services/photoprism.ts            | 102 +++++++++++++++++-
 web/src/lib/stores/filters.svelte.ts          |  53 +++++++++
 web/src/routes/+page.svelte                   | 102 ++++++++++++++++--
 web/src/routes/map/+page.svelte               |  31 ++++++
 7 files changed, 363 insertions(+), 55 deletions(-)

diff --git a/web/src/lib/components/layout/LeftSidebar.svelte b/web/src/lib/components/layout/LeftSidebar.svelte
index 092a789..822cda3 100644
--- a/web/src/lib/components/layout/LeftSidebar.svelte
+++ b/web/src/lib/components/layout/LeftSidebar.svelte
@@ -41,6 +41,7 @@
 	} from '$lib/services/adapters/review';
 	import {
 		filters,
+		navigateToFolder,
 		setFolderPath,
 		setSection,
 		TAG_CATEGORIES,
@@ -223,23 +224,40 @@
 	}));
 	const folderCounts = $derived(folderCountsQuery.data ?? {});
 
-	// Root entry shows "the user's library" — for admins without a
-	// BasePath that's still the whole library, served cheaply from
-	// /api/v1/config's `count.all`. For any user with a non-empty
-	// BasePath the precomputed total is wrong (it's library-wide), so we
-	// ask the sidecar for a recursive count rooted at the user's
-	// BasePath — listFolderCounts maps `""` through toOriginalsPath, which
-	// resolves to the BasePath itself, and the sidecar fan-out recurses.
+	// Root entry shows "the user's library" using the same filter the
+	// timeline applies at folderPath=='/' — empty q, which PhotoPrism
+	// resolves to the visible listing (no archived / hidden / review).
+	// Earlier this used /config's `count.all`, but that aggregate
+	// includes those buckets and didn't match what the user can actually
+	// click "select all" on; the discrepancy was confusing
+	// (LeftSidebar said 357, the action bar said ~329).
+	//
+	// `scopedRootCountQuery` retains the sidecar fan-out for users with
+	// a BasePath — `listFolderCounts(['''])` resolves `''` through
+	// `toOriginalsPath` to the user's BasePath and recurses, so it picks
+	// up the same subset PhotoPrism would. Empty BasePath admins use the
+	// PhotoPrism count-via-X-Count path so both surfaces agree.
 	const scopedRootCountQuery = createQuery<Record<string, number>>(() => ({
 		queryKey: ['photos', 'root-count', userBasePath()],
 		queryFn: () => listFolderCounts(['']),
 		enabled: isAuthenticated() && userBasePath() !== '',
 		staleTime: 60_000
 	}));
+	const visibleRootCountQuery = createQuery<number>(() => ({
+		queryKey: ['photos', 'visible-root-count', userBasePath()],
+		// `merged: true` so the count matches the timeline's photo entries
+		// (one per logical photo) rather than its file-row total. Without
+		// it, sidecar/companion files inflate the badge — e.g. a HEIC + JPG
+		// pair counts twice — and "select all" in the timeline never
+		// reaches the badge's number.
+		queryFn: () => countPhotos(scoped(''), { merged: true }),
+		enabled: isAuthenticated() && userBasePath() === '' && isAdminUser,
+		staleTime: 60_000
+	}));
 	const rootCount = $derived(
 		userBasePath() === ''
 			? isAdminUser
-				? (configQuery.data?.count?.all ?? 0)
+				? (visibleRootCountQuery.data ?? 0)
 				: 0
 			: (scopedRootCountQuery.data?.[''] ?? 0)
 	);
@@ -490,14 +508,7 @@
 	}
 
 	async function pickFolder(folderPath: string) {
-		// Folder selection works on top of the All Photos section; clearing
-		// the heap/section context mirrors mule-image's "drill into folder"
-		// behaviour. The URL sync $effect on the timeline picks this up.
-		setSection('all-photos');
-		setFolderPath(folderPath);
-		const params = new URLSearchParams();
-		params.set('folder', folderPath);
-		await goto(`/?${params.toString()}`, { keepFocus: true, noScroll: true });
+		await navigateToFolder(folderPath);
 	}
 
 	function onCreateHeap() {
diff --git a/web/src/lib/components/sidebar/RightSidebar.svelte b/web/src/lib/components/sidebar/RightSidebar.svelte
index 23699d5..fa1a805 100644
--- a/web/src/lib/components/sidebar/RightSidebar.svelte
+++ b/web/src/lib/components/sidebar/RightSidebar.svelte
@@ -6,18 +6,20 @@
 	PUT (Details fields need the full body).
 -->
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
 	import { toast } from 'svelte-sonner';
 	import {
 		Aperture,
+		ArrowUpRight,
 		Calendar,
-		ExternalLink,
 		File,
 		Folder,
 		HardDrive,
 		ImageIcon,
 		Loader2,
+		Map as MapIcon,
 		MapPin,
 		Star,
 		Tag,
@@ -39,6 +41,7 @@
 	import { push as pushUndo } from '$lib/stores/undo.svelte';
 	import { getMetadataSectionOpen, setMetadataSection } from '$lib/stores/view.svelte';
 	import { photoNameAndDir, primaryFile, type PpPhoto } from '$lib/types/photoprism';
+	import { navigateToFolder } from '$lib/stores/filters.svelte';
 	import { COLOR_SWATCHES } from '$lib/utils/tagGroups';
 	import { suggestDateFromPath } from '$lib/utils/suggestDateFromPath';
 
@@ -282,12 +285,6 @@
 				? photo.Country.toUpperCase()
 				: ''
 	);
-	const mapsHref = $derived(
-		photo.Lat && photo.Lng
-			? `https://www.openstreetmap.org/?mlat=${photo.Lat}&mlon=${photo.Lng}&zoom=15`
-			: ''
-	);
-
 	function formatCameraLens(c?: { Make?: string; Model?: string; Name?: string }): string {
 		if (!c) return '';
 		const make = c.Make ?? '';
@@ -377,16 +374,31 @@
 			</div>
 		{/if}
 
-		<!-- Folder (read-only). The `px-1 py-0.5` mirrors the input
-		     padding on filename / date so the read-only text starts at the
-		     same x-offset as the editable rows above — otherwise spans
-		     hug the icon while inputs sit 4px in. Root-level files render
-		     as `/` so the row never disappears and the layout stays stable. -->
+		<!-- Folder (read-only label + open-in-timeline icon). The `px-1 py-0.5`
+		     mirrors the input padding on filename / date so the read-only
+		     text starts at the same x-offset as the editable rows above —
+		     otherwise spans hug the icon while inputs sit 4px in. Root-level
+		     files render as `/` so the row never disappears. The arrow-up-
+		     right icon navigates to the timeline filtered by this folder
+		     with the photo pre-focused. -->
 		<div class="flex items-center gap-2">
 			<Folder class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
 			<span class="min-w-0 flex-1 truncate px-1 py-0.5 text-muted-foreground" title={folderLabel}>
 				{folderLabel}
 			</span>
+			<button
+				type="button"
+				class="text-muted-foreground hover:text-foreground"
+				onclick={() =>
+					void navigateToFolder(dirPath || '/', {
+						focusUid: photo.UID,
+						focusTakenAt: photo.TakenAt ?? null
+					})}
+				title="Open folder in timeline"
+				aria-label="Open folder in timeline"
+			>
+				<ArrowUpRight class="h-3 w-3" />
+			</button>
 		</div>
 
 		<!-- Dimensions -->
@@ -405,22 +417,29 @@
 			</span>
 		</div>
 
-		<!-- Location -->
+		<!-- Location (read-only label + open-on-map icon). The arrow-up-
+		     right icon flies the in-app map to the photo's coordinates at
+		     zoom 17 (close enough for the photo's marker to be its own,
+		     out of any cluster). Hidden when the photo has no
+		     coordinates. -->
 		<div class="flex items-center gap-2">
 			<MapPin class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
 			<span class="min-w-0 flex-1 truncate px-1 py-0.5 text-muted-foreground">
 				{placeLabel || 'No location'}
 			</span>
-			{#if mapsHref}
-				<a
-					href={mapsHref}
-					target="_blank"
-					rel="noopener"
+			{#if photo.Lat && photo.Lng}
+				<button
+					type="button"
 					class="text-muted-foreground hover:text-foreground"
-					title="Open in OpenStreetMap"
+					onclick={() =>
+						void goto(
+							`/map?lat=${photo.Lat}&lng=${photo.Lng}&zoom=17&focus=${photo.UID}`
+						)}
+					title="Open on map"
+					aria-label="Open on map"
 				>
-					<ExternalLink class="h-3 w-3" />
-				</a>
+					<MapIcon class="h-3 w-3" />
+				</button>
 			{/if}
 		</div>
 	</dl>
diff --git a/web/src/lib/components/timeline/BulkActionBar.svelte b/web/src/lib/components/timeline/BulkActionBar.svelte
index 9929d9b..02809c5 100644
--- a/web/src/lib/components/timeline/BulkActionBar.svelte
+++ b/web/src/lib/components/timeline/BulkActionBar.svelte
@@ -54,6 +54,14 @@
 		selection.ids.size > 0 ? selection.ids.size : selection.focused ? 1 : 0
 	);
 	const isBulk = $derived(selection.ids.size > 0);
+	// Filename for the single-focus label. Re-derives whenever
+	// selection.focused flips — cachedPhoto reads from the same query
+	// cache that drives the visible tiles, so the name resolves on the
+	// same tick the tile renders.
+	const focusedPhoto = $derived(selection.focused ? cachedPhoto(selection.focused) : undefined);
+	const focusedName = $derived(
+		focusedPhoto ? photoNameAndDir(focusedPhoto).fileName : ''
+	);
 	// Review section uses a two-button decision flow (Keep / Archive) —
 	// every other action is hidden so the choice can't be confused with
 	// heap-adding / restoring. The S keybinding is rerouted to approve
@@ -248,13 +256,19 @@
 	<div
 		class="flex min-h-9 shrink-0 items-center gap-2 border-t border-border bg-background px-3 py-1"
 	>
-		<span class="shrink-0 text-[11px] font-medium text-foreground">
-			{#if isBulk}
+		{#if isBulk}
+			<span class="shrink-0 text-[11px] font-medium text-foreground">
 				{targetCount} selected
-			{:else}
-				Focused photo
-			{/if}
-		</span>
+			</span>
+		{:else}
+			<span class="shrink-0 text-[11px] font-medium text-muted-foreground">Focused</span>
+			<span
+				class="min-w-0 truncate text-[11px] font-medium text-foreground"
+				title={focusedName || undefined}
+			>
+				{focusedName || 'photo'}
+			</span>
+		{/if}
 
 		<!--
 			`overflow-x-auto` would clip the heap-picker dropdown — CSS
diff --git a/web/src/lib/services/photoprism.ts b/web/src/lib/services/photoprism.ts
index 419ca55..653c391 100644
--- a/web/src/lib/services/photoprism.ts
+++ b/web/src/lib/services/photoprism.ts
@@ -156,6 +156,95 @@ export async function listPhotos(params: ListPhotosParams = {}): Promise<PpPhoto
 	return data;
 }
 
+/**
+ * Fetch a page of photos *anchored at* a specific TakenAt — `before`
+ * older photos preceded by `after` newer ones, merged newest-first.
+ * Uses PhotoPrism's `before:`/`after:` DSL clauses so the anchor's
+ * neighbours can be loaded without paging through the whole filter.
+ *
+ * Used by the timeline's deep-link focus mode: an in-app navigation
+ * stashes `{uid, takenAt}`, the timeline calls this with the anchor's
+ * date for page 0, and the target photo lands ~`afterCount` tiles
+ * down with `~beforeCount` older neighbours below it.
+ *
+ * Subsequent infinite-scroll pages use plain `listPhotos` with the
+ * standard offset cursor — the anchor mode only matters for page 0.
+ */
+export interface AroundParams {
+	/** Base DSL filter (e.g. `path:"2024/02*"`). Anchor clauses are appended. */
+	q?: string;
+	/** Anchor's TakenAt as ISO string (e.g. `'2026-01-31T18:26:40Z'`). */
+	takenAt: string;
+	/** How many photos newer than the anchor to fetch. */
+	afterCount?: number;
+	/** How many photos at-or-older-than the anchor to fetch (includes the anchor itself). */
+	beforeCount?: number;
+	merged?: boolean;
+}
+
+export async function listPhotosAround(p: AroundParams): Promise<PpPhoto[]> {
+	const afterCount = p.afterCount ?? 30;
+	const beforeCount = p.beforeCount ?? 90;
+	const baseQ = p.q?.trim() ?? '';
+	// PhotoPrism's `before:`/`after:` operators take ISO timestamps.
+	// `+1s` / `-1s` makes the bounds inclusive of the anchor itself in
+	// the `before:` half (so the target tile is in the merged result).
+	const anchorDate = new Date(p.takenAt);
+	if (Number.isNaN(anchorDate.getTime())) {
+		// Date parse failed — fall back to a plain newest-first page.
+		return listPhotos({ q: baseQ, count: afterCount + beforeCount, order: 'newest', merged: p.merged });
+	}
+	// PhotoPrism's DSL accepts date-only bounds (`YYYY-MM-DD`). Round
+	// up/down by a day so the anchor's own day is included in the
+	// `before:` half — the bounds are inclusive day boundaries, so a
+	// timestamp-precision anchor lands inside the `[beforeBound,
+	// afterBound]` window.
+	function ymd(d: Date): string {
+		const y = d.getUTCFullYear();
+		const m = String(d.getUTCMonth() + 1).padStart(2, '0');
+		const dd = String(d.getUTCDate()).padStart(2, '0');
+		return `${y}-${m}-${dd}`;
+	}
+	const dayMs = 86_400_000;
+	const beforeBound = ymd(new Date(anchorDate.getTime() + dayMs));
+	const afterBound = ymd(new Date(anchorDate.getTime() - dayMs));
+	const newerQ = `${baseQ} after:${afterBound}`.trim();
+	const olderQ = `${baseQ} before:${beforeBound}`.trim();
+
+	const [newerOldestFirst, older] = await Promise.all([
+		listPhotos({
+			q: newerQ,
+			count: afterCount,
+			order: 'oldest',
+			merged: p.merged ?? true
+		}),
+		listPhotos({
+			q: olderQ,
+			count: beforeCount,
+			order: 'newest',
+			merged: p.merged ?? true
+		})
+	]);
+	// `newerOldestFirst` is oldest→newest; reverse so it reads newest-first
+	// to match the standard timeline order, then concat the older window.
+	// Dedupe by UID in case the anchor itself shows up in both halves.
+	const merged: PpPhoto[] = [];
+	const seen = new Set<string>();
+	for (const p of newerOldestFirst.slice().reverse()) {
+		if (!seen.has(p.UID)) {
+			merged.push(p);
+			seen.add(p.UID);
+		}
+	}
+	for (const p of older) {
+		if (!seen.has(p.UID)) {
+			merged.push(p);
+			seen.add(p.UID);
+		}
+	}
+	return merged;
+}
+
 /**
  * Count photos matching a DSL query, scoped to whatever the caller's
  * session ACL allows. PhotoPrism doesn't expose a dedicated "count
@@ -169,10 +258,17 @@ export async function listPhotos(params: ListPhotosParams = {}): Promise<PpPhoto
  * the signed-in user actually sees, not the global library aggregate
  * exposed by `/config.count`.
  */
-export async function countPhotos(q: string): Promise<number> {
-	const resp = await http.get('/photos', {
-		params: { count: 10000, offset: 0, merged: false, q }
+export async function countPhotos(q: string, opts: { merged?: boolean } = {}): Promise<number> {
+	const merged = opts.merged ?? false;
+	const resp = await http.get<PpPhoto[]>('/photos', {
+		params: { count: 10000, offset: 0, merged, q }
 	});
+	// PhotoPrism's `X-Count` header counts SQL file rows (one row per
+	// `Files[]` entry), regardless of `merged`. With `merged: true` the
+	// response body is one entry per logical photo — so the body length
+	// is the canonical photo count when callers need to match what the
+	// timeline displays (e.g. the LeftSidebar root badge vs `Cmd+A`).
+	if (merged) return Array.isArray(resp.data) ? resp.data.length : 0;
 	const header = resp.headers['x-count'];
 	const n = typeof header === 'string' ? parseInt(header, 10) : NaN;
 	return Number.isFinite(n) ? n : 0;
diff --git a/web/src/lib/stores/filters.svelte.ts b/web/src/lib/stores/filters.svelte.ts
index 2d326cd..33a8dbb 100644
--- a/web/src/lib/stores/filters.svelte.ts
+++ b/web/src/lib/stores/filters.svelte.ts
@@ -86,6 +86,59 @@ export function setTagFilter(
 	filters.tagValue = value;
 }
 
+/**
+ * One-shot focus hand-off between an in-app navigation source (e.g. the
+ * RightSidebar's Folder open icon) and the timeline. We deliberately
+ * avoid encoding this in the URL — the store→URL effect on the
+ * timeline strips any param that `filtersToUrlParams` doesn't emit, so
+ * a `?focus=` param wouldn't survive the round-trip. A module-level
+ * stash that's consumed once on the next pageCount=1 landing is the
+ * simplest contract: not shareable, not replayed on refresh, but
+ * matches the "deep-link click" UX we want.
+ *
+ * `takenAt` (when known) lets the timeline anchor its first-page
+ * query around the target's date via PhotoPrism's `before:`/`after:`
+ * DSL — so deep-link focus works even for photos that aren't in the
+ * newest-120 page of the destination filter. Caller passes `null` if
+ * the date isn't readily available; the timeline can still attempt a
+ * page-1 match.
+ */
+export interface PendingFocus {
+	uid: string;
+	takenAt: string | null;
+}
+let pendingFocus: PendingFocus | null = null;
+export function setPendingFocus(uid: string, takenAt: string | null = null): void {
+	pendingFocus = { uid, takenAt };
+}
+export function consumePendingFocus(): PendingFocus | null {
+	const v = pendingFocus;
+	pendingFocus = null;
+	return v;
+}
+
+/**
+ * Drill into a folder on the timeline. Mirrors the LeftSidebar tree's
+ * click handler: clear heap/section context so the folder filter
+ * applies on top of "all photos", then navigate. When `focusUid` is
+ * provided, the timeline's focus effect consumes the pending-focus
+ * stash on its first-page landing and pre-selects + scrolls to that
+ * photo instead of snapping to `photos[0]`. `focusTakenAt` enables
+ * the anchor-mode query so the photo can be found even when it would
+ * otherwise be past page 1.
+ */
+export async function navigateToFolder(
+	folderPath: string,
+	opts: { focusUid?: string; focusTakenAt?: string | null } = {}
+): Promise<void> {
+	setSection('all-photos');
+	setFolderPath(folderPath);
+	if (opts.focusUid) setPendingFocus(opts.focusUid, opts.focusTakenAt ?? null);
+	const params = new URLSearchParams();
+	params.set('folder', folderPath);
+	await goto(`/?${params.toString()}`, { keepFocus: true, noScroll: true });
+}
+
 /**
  * Navigate to a tag-category browse URL. Path-segment shape
  * (`/tags/labels/sunset`) keeps the URL readable and lets SvelteKit's
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 72c0735..14af278 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -13,15 +13,18 @@
     getPhoto,
     listHeaps,
     listPhotos,
+    listPhotosAround,
     type PpAlbum,
   } from "$lib/services/photoprism";
   import {
+    consumePendingFocus,
     filters,
     filtersToQ,
     filtersToUrlParams,
     parseUrlParams,
     setSearch,
     setSection,
+    type PendingFocus,
   } from "$lib/stores/filters.svelte";
   import { isAuthenticated } from "$lib/stores/session.svelte";
   import { untrack } from "svelte";
@@ -137,24 +140,90 @@
   // SQL rows, well below PhotoPrism's 1000-row server cap. Pages flatten
   // downstream into a single `photos` array consumers iterate.
   const PHOTOS_PAGE_SIZE = 120;
+
+  // Anchor mode: when an in-app deep link stashes a pending focus with a
+  // TakenAt, the first page is fetched as a window around that date via
+  // PhotoPrism's `before:`/`after:` DSL — so the target photo is in the
+  // loaded page even when it would otherwise be hundreds of entries past
+  // the newest-first cursor. Subsequent pages continue chronologically
+  // with a `before:<oldest-loaded-TakenAt>` cursor instead of the
+  // standard offset, so the listing stays in newest-first order without
+  // jumping around the library. Cleared when the filter changes — a new
+  // filter is a fresh listing, possibly with its own anchor.
+  let anchor = $state<PendingFocus | null>(null);
+  let lastFilterQ: string | null = null;
+  // Watch every URL change so we catch pending-focus stashes even when the
+  // filter didn't change (e.g. user clicks the open-folder icon for a photo
+  // in the folder they're already on — the goto sets the same URL but the
+  // user still expects to land on THAT photo). Pure filter changes with
+  // no pending stash clear any stale anchor so a subsequent refetch
+  // doesn't keep the old window.
+  $effect(() => {
+    if (!browser) return;
+    void page.url.search;
+    untrack(() => {
+      const pending = consumePendingFocus();
+      if (pending) {
+        anchor = pending;
+        lastFilterQ = filtersToQ(filters);
+        return;
+      }
+      const q = filtersToQ(filters);
+      if (q !== lastFilterQ) {
+        anchor = null;
+        lastFilterQ = q;
+      }
+    });
+  });
+
   const photosQuery = createInfiniteQuery<PpPhoto[]>(() => ({
-    queryKey: ["photos", "q", filtersToQ(filters), { count: PHOTOS_PAGE_SIZE }],
-    queryFn: ({ pageParam }) =>
-      listPhotos({
-        q: filtersToQ(filters),
+    queryKey: [
+      "photos",
+      "q",
+      filtersToQ(filters),
+      { count: PHOTOS_PAGE_SIZE, anchor: anchor?.takenAt ?? null },
+    ],
+    queryFn: ({ pageParam }) => {
+      const offset = pageParam as number;
+      const baseQ = filtersToQ(filters);
+      // Page 0 + anchor → load a window around the anchor's date.
+      // Subsequent pages aren't reachable in anchor mode (see
+      // getNextPageParam).
+      if (offset === 0 && anchor?.takenAt) {
+        return listPhotosAround({
+          q: baseQ,
+          takenAt: anchor.takenAt,
+          afterCount: 30,
+          beforeCount: 90,
+          merged: true,
+        });
+      }
+      return listPhotos({
+        q: baseQ,
         count: PHOTOS_PAGE_SIZE,
-        offset: pageParam as number,
+        offset,
         order: "newest",
         merged: true,
-      }),
+      });
+    },
     initialPageParam: 0,
     // PhotoPrism's `count` limits SQL rows; with `merged=true` each
     // photo expands into its file rows, so a "full" page of count=120
     // typically returns ~60 photo entries. The only reliable end-of-
     // pagination signal is an empty page. Costs one extra fetch at the
     // tail (cheap; the empty response is small).
-    getNextPageParam: (last, pages) =>
-      last.length === 0 ? undefined : pages.length * PHOTOS_PAGE_SIZE,
+    getNextPageParam: (last, pages) => {
+      if (last.length === 0) return undefined;
+      // Anchor mode terminates after page 0 — the user sees the 120-
+      // photo window around the deep-linked photo. PhotoPrism's
+      // `before:` cursor is day-precision, so paginating further
+      // chronologically risks dense-day infinite loops (same-day
+      // photos exceeding the page size keep the cursor at the same
+      // value). To "see more," the user clears the anchor by
+      // navigating fresh.
+      if (anchor?.takenAt) return undefined;
+      return pages.length * PHOTOS_PAGE_SIZE;
+    },
     enabled: isAuthenticated(),
   }));
 
@@ -237,7 +306,22 @@
       // Only re-anchor focus on the very first page; later pages
       // must not pull focus back to photo[0].
       if (pages !== 1) return;
-      setFocused(photos[0].UID);
+      // Anchor (from an in-app deep link) takes precedence — its UID is
+      // guaranteed in `photos` because page 0 was fetched as a window
+      // around its TakenAt. Plain navigations leave anchor null and we
+      // snap to photos[0] as before. `scrollToIndex` expands the
+      // windowed render set + scrolls the tile into view (with sticky-
+      // header peek) — same helper gridKeyNav uses for arrow nav.
+      const targetIdx =
+        anchor?.uid != null
+          ? photos.findIndex((p) => p.UID === anchor!.uid)
+          : -1;
+      if (targetIdx >= 0) {
+        setFocused(photos[targetIdx].UID);
+        void scrollToIndex(targetIdx);
+      } else {
+        setFocused(photos[0].UID);
+      }
     });
   });
 
diff --git a/web/src/routes/map/+page.svelte b/web/src/routes/map/+page.svelte
index 874ad92..ef08f1d 100644
--- a/web/src/routes/map/+page.svelte
+++ b/web/src/routes/map/+page.svelte
@@ -299,6 +299,37 @@
 		markersOnScreen.clear();
 		markers.clear();
 
+		// Deep-link from the RightSidebar's location open icon: `?lat=&lng=`
+		// (+ optional `zoom`, `focus`) flies the map directly to the photo
+		// rather than fitting to the full library extent. Strip the params
+		// afterwards so a manual zoom-out + reload doesn't snap back. Falls
+		// through to the default fitBounds when the params aren't present.
+		const sp = new URL(window.location.href).searchParams;
+		const latParam = Number(sp.get('lat'));
+		const lngParam = Number(sp.get('lng'));
+		if (
+			(data.features?.length ?? 0) > 0 &&
+			Number.isFinite(latParam) &&
+			Number.isFinite(lngParam) &&
+			sp.has('lat') &&
+			sp.has('lng')
+		) {
+			const zoom = Number(sp.get('zoom')) || 17;
+			map.jumpTo({ center: [lngParam, latParam], zoom });
+			const stripped = new URL(window.location.href);
+			stripped.searchParams.delete('lat');
+			stripped.searchParams.delete('lng');
+			stripped.searchParams.delete('zoom');
+			stripped.searchParams.delete('focus');
+			const qs = stripped.searchParams.toString();
+			void goto(`/map${qs ? `?${qs}` : ''}`, {
+				replaceState: true,
+				keepFocus: true,
+				noScroll: true
+			});
+			return;
+		}
+
 		// Fit to data extent on the first non-empty load — prefer the
 		// server-provided bbox (PhotoPrism returns one), else compute from
 		// the features.