Files
ds-galo/frontend/src/lib/components/CreateAlbumDialog.svelte
T
iu 1b4906648d feat(preferences): configurable photo info attributes stored in user profile
- 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)
2026-10-10 21:04:08 +03:00

91 lines
2.2 KiB
Svelte

<script lang="ts">
import Icon from './Icon.svelte';
import { portal } from '$lib/actions/portal';
import { albums } from '$lib/stores/albums.svelte';
import type { Album } from '$lib/types';
interface Props {
onClose: () => void;
onCreated?: (album: Album) => void;
}
let { onClose, onCreated }: Props = $props();
let title = $state('');
let busy = $state(false);
let error = $state('');
async function submit(ev: Event) {
ev.preventDefault();
if (!title.trim() || busy) return;
busy = true;
error = '';
try {
const album = await albums.create(title.trim());
onCreated?.(album);
onClose();
} catch (e) {
error = (e as Error).message;
} finally {
busy = false;
}
}
function onKey(ev: KeyboardEvent) {
if (ev.key === 'Escape') onClose();
}
function autofocus(node: HTMLInputElement) {
node.focus();
}
</script>
<svelte:window onkeydown={onKey} />
<div
use:portal
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
role="dialog"
aria-modal="true"
aria-label="Новый альбом"
tabindex="-1"
onclick={(e) => {
if (e.target === e.currentTarget) onClose();
}}
onkeydown={onKey}
>
<form
class="border-border bg-bg-elevated w-full max-w-sm space-y-4 rounded-xl border p-5"
onsubmit={submit}
>
<h2 class="text-lg font-semibold">Новый альбом</h2>
<label class="block">
<span class="text-text-muted mb-1 block text-sm">Название</span>
<input
bind:value={title}
use:autofocus
class="border-border bg-bg text-text w-full rounded-lg border px-3 py-2"
placeholder="Например, Отпуск"
/>
</label>
{#if error}<p class="text-danger text-sm">{error}</p>{/if}
<div class="flex justify-end gap-2">
<button
type="button"
class="border-border text-text rounded-lg border px-4 py-2 text-sm"
onclick={onClose}
>
Отмена
</button>
<button
type="submit"
disabled={busy || !title.trim()}
class="bg-primary text-primary-fg inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm disabled:opacity-50"
>
<Icon name="add" class="size-4" />
{busy ? 'Создание…' : 'Создать'}
</button>
</div>
</form>
</div>