feat(sidebar): persist metadata section collapse across photo switches

GPS, Credits & notes, and File sections in the right sidebar now read
and write their expanded state through the view store and persist it
to localStorage. Closed by default; the user's first toggle pins their
choice across subsequent photos and reloads.

Switched from the previous data-driven defaults ("open if this photo
has GPS / IPTC fields") to static defaults: a data-driven default would
change between photos, fire a programmatic `toggle` event on the
<details> element, and silently overwrite the user's persisted choice.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-18 00:03:38 +02:00
parent 79ec511482
commit aa63d4c11d
2 changed files with 56 additions and 8 deletions

View File

@@ -38,6 +38,7 @@
import { isAuthenticated } from '$lib/stores/session.svelte';
import { push as pushUndo } from '$lib/stores/undo.svelte';
import { thumbUrl } from '$lib/stores/session.svelte';
import { getMetadataSectionOpen, setMetadataSection } from '$lib/stores/view.svelte';
import { primaryFile, type PpPhoto } from '$lib/types/photoprism';
interface Props {
@@ -522,8 +523,16 @@
</div>
{/if}
<!-- GPS detail (collapsed by default) -->
<details class="rounded border border-border" open={Boolean(photo.Lat || photo.Lng)}>
<!-- GPS detail. Static default (closed); user's expand/collapse
choice persists across photo switches via the view store.
Avoid data-driven defaults here — they make the `open` attr
change between photos, which fires a programmatic `toggle`
event and would silently overwrite the user's preference. -->
<details
class="rounded border border-border"
open={getMetadataSectionOpen('gps', false)}
ontoggle={(e) => setMetadataSection('gps', e.currentTarget.open)}
>
<summary
class="cursor-pointer px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground"
>
@@ -564,10 +573,11 @@
</div>
</details>
<!-- IPTC credits (collapsed unless something set) -->
<!-- IPTC credits. Static default (closed); user's choice persists. -->
<details
class="rounded border border-border"
open={Boolean(subject || artist || copyright || license || notes)}
open={getMetadataSectionOpen('credits', false)}
ontoggle={(e) => setMetadataSection('credits', e.currentTarget.open)}
>
<summary
class="cursor-pointer px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground"
@@ -623,8 +633,12 @@
</div>
</details>
<!-- File (collapsed by default) -->
<details class="rounded border border-border">
<!-- File metadata. Closed by default; persists once opened. -->
<details
class="rounded border border-border"
open={getMetadataSectionOpen('file', false)}
ontoggle={(e) => setMetadataSection('file', e.currentTarget.open)}
>
<summary
class="cursor-pointer px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground"
>