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:
@@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { authApi } from '$lib/api';
|
||||
import { auth } from '$lib/stores/auth.svelte';
|
||||
|
||||
let mode = $state<'login' | 'register'>('login');
|
||||
let email = $state('');
|
||||
let password = $state('');
|
||||
let name = $state('');
|
||||
let error = $state('');
|
||||
let busy = $state(false);
|
||||
|
||||
async function submit(ev: Event) {
|
||||
ev.preventDefault();
|
||||
error = '';
|
||||
busy = true;
|
||||
try {
|
||||
const data =
|
||||
mode === 'login'
|
||||
? await authApi.login(email, password)
|
||||
: await authApi.register(email, password, name);
|
||||
auth.setTokens(data.tokens);
|
||||
auth.setUser(data.user);
|
||||
goto('/');
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-sm py-10">
|
||||
<h1 class="mb-6 text-2xl font-bold">{mode === 'login' ? 'Вход' : 'Регистрация'}</h1>
|
||||
|
||||
<form class="space-y-4" onsubmit={submit}>
|
||||
{#if mode === 'register'}
|
||||
<label class="block">
|
||||
<span class="text-text-muted mb-1 block text-sm">Имя</span>
|
||||
<input
|
||||
bind:value={name}
|
||||
required
|
||||
class="border-border bg-bg-elevated text-text w-full rounded-lg border px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
{/if}
|
||||
<label class="block">
|
||||
<span class="text-text-muted mb-1 block text-sm">Email</span>
|
||||
<input
|
||||
bind:value={email}
|
||||
type="email"
|
||||
required
|
||||
class="border-border bg-bg-elevated text-text w-full rounded-lg border px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-text-muted mb-1 block text-sm">Пароль</span>
|
||||
<input
|
||||
bind:value={password}
|
||||
type="password"
|
||||
required
|
||||
minlength="8"
|
||||
class="border-border bg-bg-elevated text-text w-full rounded-lg border px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{#if error}<p class="text-danger text-sm">{error}</p>{/if}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
class="bg-primary text-primary-fg w-full rounded-lg px-4 py-2.5 font-medium disabled:opacity-50"
|
||||
>
|
||||
{busy ? 'Подождите…' : mode === 'login' ? 'Войти' : 'Зарегистрироваться'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="text-primary mt-4 text-sm"
|
||||
onclick={() => (mode = mode === 'login' ? 'register' : 'login')}
|
||||
>
|
||||
{mode === 'login' ? 'Нет аккаунта? Зарегистрироваться' : 'Уже есть аккаунт? Войти'}
|
||||
</button>
|
||||
</div>
|
||||
Reference in New Issue
Block a user