feat(web): scope library views to per-user BasePath

PhotoPrism's user entity carries a per-user BasePath; the web app now mirrors that scope client-side so each user sees only their own subtree in the sidebar, timeline, folder counts, and heap-convert target picker. Admin without a BasePath is unchanged. Also removes the redundant "✕ <folder>" pill below the folder tree. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
feat(sidebar): path next to date + ISO date-only inputs
2026-05-18 18:18:39 +02:00 · 2026-05-18 18:18:39 +02:00
11 changed files with 197 additions and 85 deletions
--- a/frontend/src/components/sidebar/BulkTakenAtEditor.tsx
+++ b/frontend/src/components/sidebar/BulkTakenAtEditor.tsx
@@ -64,7 +64,11 @@ export function BulkTakenAtEditor({

  const handleApplyUniform = () => {
    if (!uniformDraft) return
-    const parsed = new Date(uniformDraft)
+    // uniformDraft is "YYYY-MM-DD" from a date input; anchor to local
+    // midnight so the stored ISO matches the day the user picked when
+    // viewed in their own timezone.
+    const [year, month, day] = uniformDraft.split('-').map(Number)
+    const parsed = new Date(year, month - 1, day)
    if (Number.isNaN(parsed.getTime())) return
    onApplyUniform(parsed.toISOString())
  }
@@ -74,7 +78,7 @@ export function BulkTakenAtEditor({
      {/* Apply-one row */}
      <div className="flex items-center gap-1.5">
        <Input
-          type="datetime-local"
+          type="date"
          value={uniformDraft}
          onChange={(e) => setUniformDraft(e.target.value)}
          disabled={disabled}
--- a/frontend/src/components/sidebar/PhotoInfoPanel.tsx
+++ b/frontend/src/components/sidebar/PhotoInfoPanel.tsx
@@ -39,7 +39,7 @@ import {
  COLOR_LABEL_OPTIONS,
  type ColorLabel,
 } from '../../constants/colorLabels'
-import { toDatetimeLocalValue } from '../../lib/guessDateFromPath'
+import { toDateInputValue } from '../../lib/guessDateFromPath'
 import { TagsEditor } from './TagsEditor'
 import { TakenAtEditor } from './TakenAtEditor'

@@ -311,7 +311,7 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
    setFilenameDraft(photo?.filename ?? '')
    setNotesDraft(photo?.user_notes ?? '')
    setTakenAtDraft(
-      photo?.taken_at ? toDatetimeLocalValue(new Date(photo.taken_at)) : ''
+      photo?.taken_at ? toDateInputValue(new Date(photo.taken_at)) : ''
    )
  }, [
    photo?.id,
@@ -353,26 +353,32 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
    updateMutation.mutate({ user_notes: next || null })
  }

-  /** Commit a datetime-local draft back to the server. The backend also
+  /** Commit a date-only draft back to the server. The backend also
   *  rewrites EXIF on disk, so a failure here rolls the draft back to the
   *  server value — we never want the UI to silently disagree with the
   *  file. An empty string is a no-op because the input's `required` is
-   *  off and we don't yet have a "clear date" affordance. */
+   *  off and we don't yet have a "clear date" affordance.
+   *
+   *  Comparison is YYYY-MM-DD vs YYYY-MM-DD (not full ISO) so a blur with
+   *  no edits doesn't clobber the stored time-of-day with a new local
+   *  midnight. */
  const commitTakenAt = (rawValue?: string) => {
    const source = rawValue ?? takenAtDraft
    if (!source) return
-    const parsed = new Date(source)
-    if (Number.isNaN(parsed.getTime())) {
+    const [y, m, d] = source.split('-').map((n) => Number(n))
+    if (!Number.isInteger(y) || !Number.isInteger(m) || !Number.isInteger(d)) {
      toast.error('Invalid date', 'Could not parse the value')
      setTakenAtDraft(
-        photo?.taken_at ? toDatetimeLocalValue(new Date(photo.taken_at)) : ''
+        photo?.taken_at ? toDateInputValue(new Date(photo.taken_at)) : ''
      )
      return
    }
+    const current = photo?.taken_at
+      ? toDateInputValue(new Date(photo.taken_at))
+      : ''
+    if (current === source) return
+    const parsed = new Date(y, m - 1, d)
    const iso = parsed.toISOString()
-    if (photo?.taken_at && new Date(photo.taken_at).toISOString() === iso) {
-      return
-    }
    updateMutation.mutate(
      { taken_at: iso },
      {
@@ -383,7 +389,7 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
          )
          setTakenAtDraft(
            photo?.taken_at
-              ? toDatetimeLocalValue(new Date(photo.taken_at))
+              ? toDateInputValue(new Date(photo.taken_at))
              : ''
          )
        },
@@ -455,22 +461,6 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
              }
            />
          </div>
-          {/* Filepath: full-width mono so it wraps cleanly instead of
-           *  stretching the two-column grid. */}
-          <div className="text-xs">
-            <span className="text-text-muted">Path</span>
-            <p
-              className="mt-0.5 break-all font-mono text-[11px] text-text"
-              title={photo.filepath}
-            >
-              {photo.filepath
-                ? photo.filepath.replace(
-                    /^\/?nextcloud-users\/[^/]+\/files\//,
-                    '…/',
-                  )
-                : '—'}
-            </p>
-          </div>
          {hasGps && (
            <a
              href={`https://www.openstreetmap.org/?mlat=${photo.latitude}&mlon=${photo.longitude}#map=15/${photo.latitude}/${photo.longitude}`}
@@ -513,6 +503,21 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
              />
            </div>

+            <div className="text-xs">
+              <span className="text-text-muted">Path</span>
+              <p
+                className="mt-0.5 break-all font-mono text-[11px] text-text"
+                title={photo.filepath}
+              >
+                {photo.filepath
+                  ? photo.filepath.replace(
+                      /^\/?nextcloud-users\/[^/]+\/files\//,
+                      '…/',
+                    )
+                  : '—'}
+              </p>
+            </div>
+
            <TakenAtEditor
              photo={photo}
              draft={takenAtDraft}
--- a/frontend/src/components/sidebar/TakenAtEditor.tsx
+++ b/frontend/src/components/sidebar/TakenAtEditor.tsx
@@ -3,7 +3,7 @@ import { format } from 'date-fns'
 import { cn } from '@/lib/utils'
 import {
  guessDateFromPath,
-  toDatetimeLocalValue,
+  toDateInputValue,
 } from '../../lib/guessDateFromPath'
 import type { PhotoDetails } from './PhotoInfoPanel'

@@ -78,7 +78,7 @@ export function TakenAtEditor({
      <label className="mb-1 block text-text-muted">Date Taken</label>
      <div className="flex items-center gap-1.5">
        <input
-          type="datetime-local"
+          type="date"
          value={draft}
          onChange={(e) => onDraftChange(e.target.value)}
          onBlur={() => onCommit()}
@@ -88,7 +88,7 @@ export function TakenAtEditor({
            } else if (e.key === 'Escape') {
              onDraftChange(
                photo.taken_at
-                  ? toDatetimeLocalValue(new Date(photo.taken_at))
+                  ? toDateInputValue(new Date(photo.taken_at))
                  : ''
              )
              e.currentTarget.blur()
@@ -108,7 +108,7 @@ export function TakenAtEditor({
      {showSuggestion && guess && (
        <button
          onClick={() => {
-            const next = toDatetimeLocalValue(guess.date)
+            const next = toDateInputValue(guess.date)
            onDraftChange(next)
            onCommit(next)
          }}
--- a/frontend/src/lib/guessDateFromPath.ts
+++ b/frontend/src/lib/guessDateFromPath.ts
@@ -269,11 +269,9 @@ export function guessDateFromPath(filepath: string): DateGuess | null {
  return bestFolder
 }

-/** Format a Date as the `value` of an `<input type="datetime-local">`. */
-export function toDatetimeLocalValue(d: Date): string {
+/** Format a Date as the `value` of an `<input type="date">` — local-time
+ *  YYYY-MM-DD (ISO 8601 date). */
+export function toDateInputValue(d: Date): string {
  const pad = (n: number) => String(n).padStart(2, '0')
-  return (
-    `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}` +
-    `T${pad(d.getHours())}:${pad(d.getMinutes())}`
-  )
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 }
--- a/web/src/lib/components/layout/HeapConvertDialog.svelte
+++ b/web/src/lib/components/layout/HeapConvertDialog.svelte
@@ -24,7 +24,7 @@
 		type PpFolder
 	} from '$lib/services/photoprism';
 	import { filters, setSection } from '$lib/stores/filters.svelte';
-	import { isAuthenticated } from '$lib/stores/session.svelte';
+	import { isAuthenticated, toOriginalsPath } from '$lib/stores/session.svelte';
 	import FolderTree, { buildTree } from './FolderTree.svelte';

 	interface Props {
@@ -95,10 +95,13 @@
 		// pickedPath === '' is the root selection; falsy check would
 		// wrongly block it. Distinguish `null` (nothing picked) from `''`.
 		if (!heap || pickedPath === null) return;
+		// pickedPath is user-relative (listFolders strips BasePath). The
+		// sidecar moves files on disk so it needs a server-absolute path —
+		// translate before submitting.
 		convertMut.mutate({
 			uid: heap.UID,
 			body: {
-				targetFolder: pickedPath,
+				targetFolder: toOriginalsPath(pickedPath),
 				mode,
 				subfolder: subfolder.trim() || null,
 				deleteHeap: mode === 'move' && deleteHeap
--- a/web/src/lib/components/layout/LeftSidebar.svelte
+++ b/web/src/lib/components/layout/LeftSidebar.svelte
@@ -34,7 +34,7 @@
 		setSection,
 		type Section
 	} from '$lib/stores/filters.svelte';
-	import { isAuthenticated, session } from '$lib/stores/session.svelte';
+	import { isAuthenticated, session, userBasePath } from '$lib/stores/session.svelte';
 	import FolderTree, { buildTree } from './FolderTree.svelte';
 	import GeneralSettingsDialog from './GeneralSettingsDialog.svelte';
 	import HeapConvertDialog from './HeapConvertDialog.svelte';
@@ -158,15 +158,24 @@
 	}));
 	const folderCounts = $derived(folderCountsQuery.data ?? {});

-	// Root entry shows the whole library — see applyFolderScope() on /
-	// timeline. PhotoPrism's `count.all` from /api/v1/config is the
-	// authoritative library total (kept in sync server-side), so use it
-	// directly. Earlier this subtracted Σ(folderCounts) from total, which
-	// worked when folderCounts were direct-child only; now that the
-	// sidecar fan-out recurses (see handlers_folders.go), every photo
-	// gets summed once per ancestor — the subtraction would double-count
-	// and drive rootCount to 0.
-	const rootCount = $derived(configQuery.data?.count?.all ?? 0);
+	// 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.
+	const scopedRootCountQuery = createQuery<Record<string, number>>(() => ({
+		queryKey: ['photos', 'root-count', userBasePath()],
+		queryFn: () => listFolderCounts(['']),
+		enabled: isAuthenticated() && userBasePath() !== '',
+		staleTime: 60_000
+	}));
+	const rootCount = $derived(
+		userBasePath() === ''
+			? (configQuery.data?.count?.all ?? 0)
+			: (scopedRootCountQuery.data?.[''] ?? 0)
+	);

 	const createMut = createMutation(() => ({
 		mutationFn: (title: string) => createHeap(title),
@@ -565,18 +574,6 @@
 				counts={folderCounts}
 			/>
 		{/if}
-		{#if filters.folderPath && filters.folderPath !== '/'}
-			<button
-				class="mt-1 flex h-[22px] w-full items-center rounded px-2 text-[11px] leading-tight text-muted-foreground hover:bg-accent hover:text-foreground"
-				onclick={() => {
-					setFolderPath(null);
-					void goto('/', { keepFocus: true, noScroll: true });
-				}}
-				title="Clear folder filter"
-			>
-				<span class="truncate">✕ {filters.folderPath}</span>
-			</button>
-		{/if}
 	</div>

 	<!-- Views — everyday browse entries (section + route mixed) under
--- a/web/src/lib/components/layout/SettingsDialog.svelte
+++ b/web/src/lib/components/layout/SettingsDialog.svelte
@@ -23,6 +23,7 @@
 		type PpLogEntry,
 		type PpSettings
 	} from '$lib/services/photoprism';
+	import { userBasePath } from '$lib/stores/session.svelte';

 	interface Props {
 		open: boolean;
@@ -71,7 +72,16 @@
 	}

 	// ── Index tab ─────────────────────────────────────────────────────────
-	let indexForm = $state<IndexBody>({ path: '/', rescan: false, cleanup: false });
+	// Default the reindex path to the user's BasePath when scoping is on,
+	// so non-admins (and admins-with-BasePath) only rescan their own
+	// subtree. PhotoPrism's /index expects originals-relative paths with
+	// a leading slash; `'/'` means the whole library.
+	const _bp = userBasePath();
+	let indexForm = $state<IndexBody>({
+		path: _bp === '' ? '/' : `/${_bp}`,
+		rescan: false,
+		cleanup: false
+	});
 	const startIndexMut = createMutation(() => ({
 		mutationFn: (b: IndexBody) => startIndex(b),
 		onSuccess: (r) => toast.success(r.message || 'Indexing complete'),
--- a/web/src/lib/services/photoprism.ts
+++ b/web/src/lib/services/photoprism.ts
@@ -1,7 +1,14 @@
 import axios, { AxiosError, type AxiosInstance } from 'axios';
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
-import { adoptSession, clearSession, session } from '$lib/stores/session.svelte';
+import {
+	adoptSession,
+	clearSession,
+	session,
+	toOriginalsPath,
+	toUserPath,
+	userBasePath
+} from '$lib/stores/session.svelte';
 import { primaryFile } from '$lib/types/photoprism';
 import type {
 	PpClientConfig,
@@ -325,13 +332,26 @@ export interface PpFolder {
 * Recursive list of subfolders under originals/. `uncached=true` because
 * PhotoPrism's folder cache lags new folders by a noticeable interval and
 * mule-image's folder tree expects to surface mutations immediately.
+ *
+ * Scoped to the signed-in user's `BasePath` on the way out: server-absolute
+ * `Path` values get rewritten to user-relative (e.g. `users/alice/2024/01`
+ * → `2024/01`) so every downstream consumer (FolderTree, sidebar, heap
+ * convert picker) sees folders relative to the user's root. The BasePath
+ * row itself is dropped — the sidebar synthesises the root entry. When
+ * BasePath is empty (today's admin default) this is a no-op.
 */
 export async function listFolders(): Promise<PpFolder[]> {
 	const { data } = await http.get<{ folders?: PpFolder[] }>(
 		'/folders/originals',
 		{ params: { recursive: true, uncached: true, files: false } }
 	);
-	return data.folders ?? [];
+	const bp = userBasePath();
+	const folders = data.folders ?? [];
+	if (bp === '') return folders;
+	return folders
+		.filter((f) => f.Path === bp || f.Path.startsWith(bp + '/'))
+		.map((f) => ({ ...f, Path: toUserPath(f.Path) }))
+		.filter((f) => f.Path !== '');
 }

 /**
@@ -340,6 +360,11 @@ export async function listFolders(): Promise<PpFolder[]> {
 * `/folders/import`. The endpoint returns the same `PpFolder[]` shape as
 * `/folders/originals`, but the photo counts come from `X-Files` and
 * `X-Folders` response headers since the body only lists subfolders.
+ *
+ * BasePath does NOT apply: `/folders/import` is a separate root from
+ * originals (PhotoPrism's `import.path`, not under originals/), so we
+ * don't filter the result by the signed-in user's BasePath. If/when
+ * per-user inbox isolation is needed, that's a PhotoPrism-side feature.
 */
 export interface ImportInfo {
 	files: number;
@@ -385,11 +410,21 @@ export async function getImportInfo(): Promise<ImportInfo> {
 */
 export async function listFolderCounts(paths: string[]): Promise<Record<string, number>> {
 	if (paths.length === 0) return {};
-	const data = (await sidecar('POST', '/folders/counts', { paths })) as Record<
+	// The sidecar walks the real filesystem and queries PhotoPrism with
+	// server-absolute paths, but callers hand us user-relative paths
+	// (because that's what `listFolders` returns post-scoping). Translate
+	// on the way out, then re-key the response back to user-relative on
+	// the way in so callers' map keys line up with their input array.
+	const serverPaths = paths.map((p) => toOriginalsPath(p));
+	const data = (await sidecar('POST', '/folders/counts', { paths: serverPaths })) as Record<
 		string,
 		number
 	>;
-	return data;
+	const out: Record<string, number> = {};
+	for (let i = 0; i < paths.length; i += 1) {
+		out[paths[i]] = data[serverPaths[i]] ?? 0;
+	}
+	return out;
 }

 // ── Geo ──────────────────────────────────────────────────────────────────────
--- a/web/src/lib/stores/filters.svelte.ts
+++ b/web/src/lib/stores/filters.svelte.ts
@@ -7,6 +7,7 @@
 * filter shape (favorites → `favorite:true`, archive → `archived:true`,
 * etc.), and the search box on top stacks an additional `q` term.
 */
+import { toOriginalsPath, userBasePath } from '$lib/stores/session.svelte';

 export type Section =
 	| 'all-photos'
@@ -93,24 +94,30 @@ export function filtersToQ(f: FilterState = filters): string {
 		default:
 			break;
 	}
-	// `/` is the root-folder sentinel. PhotoPrism's `path:` operator can't
-	// express "exact root match" (path:"" / path:/ both fall back to "no
-	// filter"), so we leave the server query unfiltered and let the
-	// timeline post-filter to `Path === ''` client-side.
+	// `path:` clause. `folderPath` stays user-relative throughout the store
+	// (URLs, sidebar, click handlers); we resolve it to a server-absolute
+	// path here via `toOriginalsPath`, which prefixes the user's BasePath
+	// when one is set.
 	//
-	// For any non-root folder we want EVERY photo under that subtree, not
-	// just photos whose `photo_path` is an exact match. PhotoPrism's
-	// `path:` operator is exact-by-default but supports a trailing `*`
-	// wildcard:
-	//   path:"2024"     →  matches only photos directly at `2024/` (none,
-	//                       if all files live in date-stamped sub-folders)
-	//   path:"2024*"    →  matches `2024`, `2024/01`, `2024/02/...`, etc.
-	//   path:"2024/01*" →  matches `2024/01` plus descendants — still
-	//                       correct for a leaf folder.
-	// Always append `*` so internal tree nodes return the union of all
-	// descendant photos and leaves keep returning their direct contents.
-	if (f.folderPath && f.folderPath !== '/') {
-		parts.push(`path:${quoteIfNeeded(f.folderPath + '*')}`);
+	// Cases:
+	//   bp="",    folderPath="/"        → no `path:` term (whole library)
+	//   bp="",    folderPath="2024"     → path:"2024*"
+	//   bp="u/a", folderPath="/"        → path:"u/a*"           (user's root)
+	//   bp="u/a", folderPath="2024"     → path:"u/a/2024*"
+	//
+	// PhotoPrism's `path:` operator is exact-by-default but accepts a
+	// trailing `*` wildcard. We always append `*` so internal tree nodes
+	// return the union of all descendant photos and leaves keep returning
+	// their direct contents. The pre-BasePath comment about the root
+	// sentinel still applies for admins without BasePath: `/` collapses
+	// to "no filter" so the server returns the full library.
+	const bp = userBasePath();
+	const isRoot = !f.folderPath || f.folderPath === '/';
+	if (!(isRoot && bp === '')) {
+		const serverPath = toOriginalsPath(f.folderPath);
+		if (serverPath) {
+			parts.push(`path:${quoteIfNeeded(serverPath + '*')}`);
+		}
 	}
 	if (f.search) parts.push(quoteIfNeeded(f.search));
 	return parts.join(' ');
--- a/web/src/lib/stores/session.svelte.ts
+++ b/web/src/lib/stores/session.svelte.ts
@@ -147,3 +147,47 @@ export function videoUrl(hash: string, format = 'avc'): string {
 	if (!session.previewToken) return '';
 	return `/api/v1/videos/${hash}/${session.previewToken}/${format}`;
 }
+
+/**
+ * The signed-in user's library root, originals-relative, no leading/trailing
+ * slash. `""` means "whole library" — used today by admin accounts whose
+ * BasePath isn't configured in PhotoPrism. Non-empty values gate every place
+ * that crosses the user↔server seam (sidebar tree, timeline `path:` filter,
+ * folder counts, heap convert) so each user sees only their own subtree.
+ */
+export function userBasePath(): string {
+	return (session.user?.BasePath ?? '').replace(/^\/+|\/+$/g, '');
+}
+
+/**
+ * Translate a user-relative path (what the sidebar and URL deal in) to a
+ * server-absolute, originals-relative path (what PhotoPrism's `path:`
+ * operator and the sidecar's filesystem ops want).
+ *
+ *   "" or "/"          → BasePath                (user's root)
+ *   "2024/01"          → "<basePath>/2024/01"
+ *   null               → "" (caller decides to omit the filter entirely)
+ */
+export function toOriginalsPath(uiPath: string | null): string {
+	if (uiPath === null) return '';
+	const bp = userBasePath();
+	const rel = uiPath.replace(/^\/+|\/+$/g, '');
+	if (rel === '') return bp;
+	return bp === '' ? rel : `${bp}/${rel}`;
+}
+
+/**
+ * Inverse of `toOriginalsPath` — strips the user's BasePath prefix so the
+ * UI can render `2024/01` instead of `users/alice/2024/01`. Paths that
+ * are equal to the BasePath collapse to `""` (the user's root sentinel).
+ * Paths outside the BasePath are returned as-is, but callers should
+ * already have filtered those out via `listFolders`'s post-filter.
+ */
+export function toUserPath(serverPath: string): string {
+	const bp = userBasePath();
+	const sp = serverPath.replace(/^\/+|\/+$/g, '');
+	if (bp === '') return sp;
+	if (sp === bp) return '';
+	if (sp.startsWith(bp + '/')) return sp.slice(bp.length + 1);
+	return sp;
+}
--- a/web/src/lib/types/photoprism.ts
+++ b/web/src/lib/types/photoprism.ts
@@ -11,6 +11,15 @@ export interface PpUser {
 	DisplayName?: string;
 	Email?: string;
 	Role: PpRole;
+	// Per-user library scoping. Originals-relative paths (no leading or
+	// trailing slash). `BasePath === ""` means the user sees the whole
+	// library (today's admin default). Non-empty values drive client-side
+	// scoping of the sidebar tree and timeline `path:` filter so users
+	// only see their own subtree. PhotoPrism's server-side `acl` filter
+	// already scopes non-admins to BasePath; the client mirrors that so
+	// admins-with-a-BasePath behave the same way.
+	BasePath?: string;
+	UploadPath?: string;
 }

 export interface PpClientConfig {