preview: keep metadata sidebar mounted across photo changes
Previously the modal's aside was gated on `focusedPhotoQuery.data`, so each arrow-skim unmounted the sidebar until the next photo's metadata arrived — which reflowed the preview pane sideways. Now the aside is always mounted while the modal is open; its contents swap between the metadata panel and a small InlineLoader the same way the timeline's right-aside does. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -33,6 +33,7 @@
|
|||||||
import PreviewCarousel from './PreviewCarousel.svelte';
|
import PreviewCarousel from './PreviewCarousel.svelte';
|
||||||
import RightSidebar from '$lib/components/sidebar/RightSidebar.svelte';
|
import RightSidebar from '$lib/components/sidebar/RightSidebar.svelte';
|
||||||
import BulkActionBar from '$lib/components/timeline/BulkActionBar.svelte';
|
import BulkActionBar from '$lib/components/timeline/BulkActionBar.svelte';
|
||||||
|
import { InlineLoader } from '$lib/components/feedback';
|
||||||
|
|
||||||
const focusedUid = $derived(selection.focused);
|
const focusedUid = $derived(selection.focused);
|
||||||
|
|
||||||
@@ -155,13 +156,19 @@
|
|||||||
<!-- Action toolbar (acts on selection.ids; falls back to focused). -->
|
<!-- Action toolbar (acts on selection.ids; falls back to focused). -->
|
||||||
<BulkActionBar />
|
<BulkActionBar />
|
||||||
</div>
|
</div>
|
||||||
{#if focusedPhotoQuery.data}
|
<!-- Sidebar stays mounted across photo changes so the preview
|
||||||
<aside
|
pane doesn't reflow on arrow-skim; contents swap between
|
||||||
class="w-[300px] shrink-0 overflow-y-auto border-l border-border bg-card"
|
the metadata panel and a small loader the same way the
|
||||||
>
|
timeline's right-aside does. -->
|
||||||
|
<aside
|
||||||
|
class="w-[300px] shrink-0 overflow-y-auto border-l border-border bg-card"
|
||||||
|
>
|
||||||
|
{#if focusedPhotoQuery.data}
|
||||||
<RightSidebar photo={focusedPhotoQuery.data} />
|
<RightSidebar photo={focusedPhotoQuery.data} />
|
||||||
</aside>
|
{:else if focusedPhotoQuery.isFetching}
|
||||||
{/if}
|
<InlineLoader size="sm" label="Loading metadata…" />
|
||||||
|
{/if}
|
||||||
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bottom filmstrip across selection.order. -->
|
<!-- Bottom filmstrip across selection.order. -->
|
||||||
|
|||||||
Reference in New Issue
Block a user