feat: lightroom-style workspace UI with album covers

Backend:
- expose cover thumbnail URL on album responses (LEFT JOIN + presign)
- auto-assign cover only when empty; FK cover_photo_id -> photos ON DELETE SET NULL
- add photos_count / members_count to album responses; cover repo test

Frontend:
- split layouts into (app) shell (resizable rail + contextual panel) and (public)
- album rail + create-album dialog; album panel with cover picker / make-cover
- photo viewer route with filmstrip, replacing lightbox; share reuses it
- grid density slider, toolbar + drag-and-drop upload, dark graphite default

OpenSpec: add lightroom-workspace-ui change (proposal, design, specs, tasks)
This commit is contained in:
iu
2026-10-10 18:15:13 +03:00
parent b90e6b0267
commit 304cfedb75
47 changed files with 1942 additions and 601 deletions
@@ -0,0 +1,65 @@
<script lang="ts">
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { api } from '$lib/api';
import Icon from '$lib/components/Icon.svelte';
import { auth } from '$lib/stores/auth.svelte';
const token = $derived($page.params.token);
let info = $state<{ album_id: string; role: string; expires_at: string } | null>(null);
let error = $state('');
let busy = $state(false);
$effect(() => {
api<{ invite: typeof info }>(`/invites/${token}`)
.then((data) => (info = data.invite))
.catch((e) => (error = (e as Error).message));
});
async function accept() {
busy = true;
error = '';
try {
const data = await api<{ album_id: string }>(`/invites/${token}/accept`, {
method: 'POST'
});
goto(`/albums/${data.album_id}`);
} catch (e) {
error = (e as Error).message;
} finally {
busy = false;
}
}
</script>
<div class="mx-auto max-w-md py-12 text-center">
<h1 class="mb-4 text-2xl font-bold">Приглашение в альбом</h1>
{#if error}
<p class="text-danger">{error}</p>
{:else if info}
<p class="text-text-muted mb-6">Вас приглашают с ролью <strong>{info.role}</strong>.</p>
{#if auth.isAuthenticated}
<button
type="button"
disabled={busy}
onclick={accept}
class="bg-primary text-primary-fg inline-flex items-center gap-2 rounded-lg px-5 py-2.5 font-medium"
>
<Icon name="check" class="size-5" />
{busy ? 'Принятие…' : 'Принять приглашение'}
</button>
{:else}
<p class="mb-4 text-sm">Войдите или зарегистрируйтесь, чтобы принять приглашение.</p>
<a
href="/login"
class="bg-primary text-primary-fg inline-flex items-center gap-2 rounded-lg px-5 py-2.5 font-medium"
>
<Icon name="login" class="size-5" />
Войти
</a>
{/if}
{:else}
<p class="text-text-muted">Загрузка…</p>
{/if}
</div>