feat(frontend): collapsible right-panel sections with photo info

- add PanelSection with persisted collapse state
- restructure album and photo panels into sections
- add "Информация" section with EXIF/metadata (size, type, resolution, taken, coords)
This commit is contained in:
iu
2026-10-10 19:15:39 +03:00
parent aa396bdb85
commit b901544dc5
2 changed files with 155 additions and 82 deletions
@@ -0,0 +1,46 @@
<script lang="ts">
import { onMount } from 'svelte';
import Icon from './Icon.svelte';
import type { Snippet } from 'svelte';
interface Props {
id: string;
title: string;
open?: boolean;
children: Snippet;
}
let { id, title, open = true, children }: Props = $props();
// svelte-ignore state_referenced_locally
let isOpen = $state(open);
onMount(() => {
const v = localStorage.getItem(`panel-section-${id}`);
if (v === '0') isOpen = false;
else if (v === '1') isOpen = true;
});
function toggle() {
isOpen = !isOpen;
localStorage.setItem(`panel-section-${id}`, isOpen ? '1' : '0');
}
</script>
<section class="border-border border-b">
<button
type="button"
class="text-text-muted hover:text-text flex w-full items-center justify-between gap-2 px-4 py-2.5 text-left"
aria-expanded={isOpen}
onclick={toggle}
>
<span class="text-xs font-semibold tracking-wide uppercase">{title}</span>
<Icon
name="expand_more"
class="size-4 shrink-0 transition-transform {isOpen ? 'rotate-180' : ''}"
/>
</button>
{#if isOpen}
<div class="px-4 pb-4">{@render children()}</div>
{/if}
</section>