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:
@@ -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>
|
||||
Reference in New Issue
Block a user