iu
1b4906648d
- backend: users.preferences jsonb (migration 000004), Me returns preferences, PATCH /auth/me/preferences with validation (visible list + labels) - frontend: gear in info section opens PhotoInfoSettingsDialog; base attribute set shown by default, remaining under ellipsis; per-attribute visibility and custom labels persisted to the profile; reset clears settings from the profile - frontend: dialog has select-all/deselect-all icon buttons (no 'show all'); EXIF constants extracted to lib/exif.ts - fix: render modal overlays via portal to document.body so they center in the viewport despite transformed panel/rail ancestors - openspec: sync lightroom-workspace-ui artifacts (spec/design/proposal/tasks 9.8)
53 lines
1.3 KiB
Svelte
53 lines
1.3 KiB
Svelte
<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;
|
|
actions?: Snippet;
|
|
children: Snippet;
|
|
}
|
|
|
|
let { id, title, open = true, actions, 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">
|
|
<div class="flex items-center">
|
|
<button
|
|
type="button"
|
|
class="text-text-muted hover:text-text flex flex-1 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 actions}
|
|
<div class="flex items-center pr-3">{@render actions()}</div>
|
|
{/if}
|
|
</div>
|
|
{#if isOpen}
|
|
<div class="px-4 pb-4">{@render children()}</div>
|
|
{/if}
|
|
</section>
|