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
+11 -5
View File
@@ -15,22 +15,26 @@
--primary-fg: 0 0% 100%;
--danger: 0 84% 60%;
--success: 142 71% 45%;
--chrome: 0 0% 98%;
--canvas: 0 0% 100%;
--shadow: 0 0% 0% / 0.08;
}
/* Тёмная */
/* Тёмная (графит Lightroom) */
[data-theme='dark'] {
--bg: 0 0% 7%;
--bg-elevated: 0 0% 11%;
--bg-muted: 0 0% 16%;
--bg: 0 0% 9%;
--bg-elevated: 0 0% 15%;
--bg-muted: 0 0% 18%;
--border: 0 0% 22%;
--text: 0 0% 96%;
--text: 0 0% 92%;
--text-muted: 0 0% 65%;
--text-subtle: 0 0% 45%;
--primary: 217 91% 60%;
--primary-fg: 0 0% 100%;
--danger: 0 84% 65%;
--success: 142 65% 50%;
--chrome: 0 0% 13%;
--canvas: 0 0% 9%;
--shadow: 0 0% 0% / 0.4;
}
@@ -47,6 +51,8 @@
--primary-fg: 0 0% 100%;
--danger: 0 72% 55%;
--success: 142 55% 42%;
--chrome: 40 22% 92%;
--canvas: 40 20% 96%;
--shadow: 30 20% 20% / 0.12;
}
+2 -2
View File
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="ru" data-theme="light">
<html lang="ru" data-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -7,7 +7,7 @@
<script>
(function () {
try {
var stored = localStorage.getItem('theme') || 'system';
var stored = localStorage.getItem('theme') || 'dark';
var resolved = stored;
if (stored === 'system') {
resolved = window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -0,0 +1,165 @@
<script lang="ts">
import { page } from '$app/stores';
import { api } from '$lib/api';
import Icon from './Icon.svelte';
import CoverPicker from './CoverPicker.svelte';
import Comments from './Comments.svelte';
import { albums } from '$lib/stores/albums.svelte';
import type { Album, Photo } from '$lib/types';
const albumId = $derived($page.params.id ?? '');
const photoId = $derived($page.params.photoId ?? '');
let album = $state<Album | null>(null);
let role = $state('');
let error = $state('');
let picking = $state(false);
let photo = $state<Photo | null>(null);
const canEdit = $derived(role === 'owner' || role === 'admin');
$effect(() => {
const id = albumId;
error = '';
if (!id || photoId) {
if (!id) {
album = null;
role = '';
}
return;
}
api<{ album: Album; role: string }>(`/albums/${id}`)
.then((data) => {
album = data.album;
role = data.role;
albums.upsert(data.album);
})
.catch((e) => (error = (e as Error).message));
});
$effect(() => {
const id = photoId;
if (!id) {
photo = null;
return;
}
api<{ photo: Photo }>(`/photos/${id}`)
.then((data) => (photo = data.photo))
.catch((e) => (error = (e as Error).message));
});
async function resetCover() {
if (!album) return;
try {
album = await albums.setCover(album.id, null);
} catch (e) {
error = (e as Error).message;
}
}
const navLink =
'text-text-muted hover:bg-bg-muted hover:text-text flex items-center gap-2 rounded-md px-2 py-1.5 text-sm';
const metaRow = 'text-text-muted flex justify-between gap-2 py-0.5 text-xs';
</script>
{#if photoId}
{#if photo}
<div class="space-y-4 p-4">
<h2 class="text-text truncate text-sm font-semibold" title={photo.original_filename}>
{photo.original_filename}
</h2>
<div>
<div class={metaRow}><span>Автор</span><span class="text-text">{photo.uploader.name}</span></div>
{#if photo.taken_at}
<div class={metaRow}>
<span>Снято</span>
<span class="text-text">{new Date(photo.taken_at).toLocaleString()}</span>
</div>
{/if}
<div class={metaRow}>
<span>Размер</span>
<span class="text-text">{photo.width}×{photo.height}</span>
</div>
</div>
<div>
<span class="text-text-muted mb-1 block text-xs font-semibold tracking-wide uppercase">
Комментарии
</span>
<Comments photoId={photo.id} />
</div>
</div>
{/if}
{:else if album}
<div class="space-y-5 p-4">
<div>
<span class="text-text-muted mb-2 block text-xs font-semibold tracking-wide uppercase">
Обложка
</span>
<div class="bg-bg-muted border-border aspect-video overflow-hidden rounded-lg border">
{#if album.cover_thumb_url}
<img src={album.cover_thumb_url} alt="" class="h-full w-full object-cover" />
{:else}
<span class="flex h-full w-full items-center justify-center">
<Icon name="image" class="size-10 text-text-subtle" />
</span>
{/if}
</div>
{#if canEdit}
<div class="mt-2 flex flex-wrap gap-2">
<button
type="button"
class="border-border text-text hover:bg-bg-muted inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm"
onclick={() => (picking = true)}
>
<Icon name="wallpaper" class="size-4" />
Выбрать обложку
</button>
{#if album.cover_photo_id}
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center rounded-lg px-3 py-1.5 text-sm"
onclick={resetCover}
>
Сбросить
</button>
{/if}
</div>
{/if}
</div>
<div>
<h2 class="text-text text-lg font-semibold">{album.title}</h2>
{#if album.description}<p class="text-text-muted text-sm">{album.description}</p>{/if}
<p class="text-text-subtle mt-1 text-xs">
{album.photos_count ?? 0} фото · {album.members_count ?? 0} участников
</p>
{#if error}<p class="text-danger mt-2 text-sm">{error}</p>{/if}
</div>
<nav class="space-y-0.5" aria-label="Навигация по альбому">
<a class={navLink} href="/albums/{album.id}/members">
<Icon name="group" class="size-4" />
Участники
</a>
{#if canEdit}
<a class={navLink} href="/albums/{album.id}/settings">
<Icon name="settings" class="size-4" />
Настройки
</a>
<a class={navLink} href="/albums/{album.id}/settings#share">
<Icon name="add_link" class="size-4" />
Ссылки для просмотра
</a>
{/if}
</nav>
</div>
{#if picking}
<CoverPicker
albumId={album.id}
onClose={() => (picking = false)}
onSelected={(updated) => (album = updated)}
/>
{/if}
{/if}
@@ -0,0 +1,78 @@
<script lang="ts">
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import Icon from './Icon.svelte';
import CreateAlbumDialog from './CreateAlbumDialog.svelte';
import { albums } from '$lib/stores/albums.svelte';
import { auth } from '$lib/stores/auth.svelte';
const activeId = $derived($page.params.id ?? '');
let creating = $state(false);
$effect(() => {
if (auth.isAuthenticated && !albums.loaded) albums.load();
});
</script>
<div class="flex h-full flex-col">
<div class="border-border flex items-center justify-between border-b px-3 py-2">
<span class="text-text-muted text-xs font-semibold tracking-wide uppercase">Альбомы</span>
{#if auth.isAuthenticated}
<button
type="button"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
aria-label="Новый альбом"
title="Новый альбом"
onclick={() => (creating = true)}
>
<Icon name="add" class="size-4" />
</button>
{/if}
</div>
{#if !auth.isAuthenticated}
<p class="text-text-subtle p-3 text-sm">Войдите, чтобы видеть альбомы.</p>
{:else if albums.loading && albums.list.length === 0}
<p class="text-text-subtle p-3 text-sm">Загрузка…</p>
{:else if albums.list.length === 0}
<p class="text-text-subtle p-3 text-sm">Альбомов пока нет.</p>
{:else}
<ul class="flex-1 space-y-0.5 overflow-y-auto p-2">
{#each albums.list as album (album.id)}
<li>
<a
href="/albums/{album.id}"
class="flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors {album.id ===
activeId
? 'bg-bg-muted text-text'
: 'text-text-muted hover:bg-bg-muted hover:text-text'}"
aria-current={album.id === activeId ? 'page' : undefined}
>
<span
class="bg-bg-muted border-border flex size-9 shrink-0 items-center justify-center overflow-hidden rounded border"
>
{#if album.cover_thumb_url}
<img
src={album.cover_thumb_url}
alt=""
class="h-full w-full object-cover"
loading="lazy"
/>
{:else}
<Icon name="image" class="size-4 text-text-subtle" />
{/if}
</span>
<span class="truncate">{album.title}</span>
</a>
</li>
{/each}
</ul>
{/if}
{#if creating}
<CreateAlbumDialog
onClose={() => (creating = false)}
onCreated={(album) => goto(`/albums/${album.id}`)}
/>
{/if}
</div>
+200
View File
@@ -0,0 +1,200 @@
<script lang="ts">
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { authApi } from '$lib/api';
import Icon from './Icon.svelte';
import ThemeSwitcher from './ThemeSwitcher.svelte';
import { auth } from '$lib/stores/auth.svelte';
import type { Snippet } from 'svelte';
interface Props {
children: Snippet;
rail?: Snippet;
panel?: Snippet;
}
let { children, rail, panel }: Props = $props();
let railOpen = $state(false);
let panelOpen = $state(false);
const RAIL = { min: 176, max: 480, key: 'rail-width', def: 240 };
const PANEL = { min: 220, max: 560, key: 'panel-width', def: 288 };
let railWidth = $state(RAIL.def);
let panelWidth = $state(PANEL.def);
onMount(() => {
const r = parseInt(localStorage.getItem(RAIL.key) ?? '', 10);
if (r >= RAIL.min && r <= RAIL.max) railWidth = r;
const p = parseInt(localStorage.getItem(PANEL.key) ?? '', 10);
if (p >= PANEL.min && p <= PANEL.max) panelWidth = p;
});
function startResize(side: 'left' | 'right', ev: PointerEvent) {
ev.preventDefault();
const cfg = side === 'left' ? RAIL : PANEL;
const startX = ev.clientX;
const startW = side === 'left' ? railWidth : panelWidth;
const prevCursor = document.body.style.cursor;
const prevSelect = document.body.style.userSelect;
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
const move = (e: PointerEvent) => {
const dx = e.clientX - startX;
const raw = side === 'left' ? startW + dx : startW - dx;
const v = Math.min(cfg.max, Math.max(cfg.min, raw));
if (side === 'left') railWidth = v;
else panelWidth = v;
};
const up = () => {
window.removeEventListener('pointermove', move);
window.removeEventListener('pointerup', up);
document.body.style.cursor = prevCursor;
document.body.style.userSelect = prevSelect;
localStorage.setItem(cfg.key, String(side === 'left' ? railWidth : panelWidth));
};
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', up);
}
function nudge(side: 'left' | 'right', ev: KeyboardEvent) {
const cfg = side === 'left' ? RAIL : PANEL;
let delta = 0;
if (ev.key === 'ArrowLeft') delta = side === 'left' ? -16 : 16;
else if (ev.key === 'ArrowRight') delta = side === 'left' ? 16 : -16;
else return;
ev.preventDefault();
if (side === 'left') railWidth = Math.min(cfg.max, Math.max(cfg.min, railWidth + delta));
else panelWidth = Math.min(cfg.max, Math.max(cfg.min, panelWidth + delta));
localStorage.setItem(cfg.key, String(side === 'left' ? railWidth : panelWidth));
}
const handle =
'bg-transparent hover:bg-primary/40 focus-visible:bg-primary/40 hidden w-1 shrink-0 cursor-col-resize p-0 transition-colors outline-none';
async function logout() {
if (auth.refresh) {
await authApi.logout(auth.refresh).catch(() => {});
}
auth.clear();
goto('/login');
}
</script>
<div class="bg-canvas text-text flex h-screen flex-col overflow-hidden">
<header
class="border-border bg-chrome flex shrink-0 items-center justify-between gap-3 border-b px-3 py-2.5 sm:px-4"
>
<div class="flex min-w-0 items-center gap-2">
<button
type="button"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5 lg:hidden"
aria-label="Альбомы"
title="Альбомы"
onclick={() => (railOpen = true)}
>
<Icon name="menu" />
</button>
<a href="/" class="inline-flex items-center gap-2 truncate text-lg font-semibold">
<Icon name="photo_camera" />
Galo
</a>
</div>
<div class="flex items-center gap-2 sm:gap-3">
{#if panel}
<button
type="button"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5 xl:hidden"
aria-label="Панель"
title="Панель"
onclick={() => (panelOpen = true)}
>
<Icon name="wallpaper" />
</button>
{/if}
{#if auth.isAuthenticated}
<span class="text-text-muted hidden text-sm sm:inline">{auth.user?.name ?? ''}</span>
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center gap-1.5 text-sm"
onclick={logout}
>
<Icon name="logout" class="size-4" />
<span class="hidden sm:inline">Выйти</span>
</button>
{:else}
<a
href="/login"
class="text-text-muted hover:text-text inline-flex items-center gap-1.5 text-sm"
>
<Icon name="login" class="size-4" />
<span class="hidden sm:inline">Войти</span>
</a>
{/if}
<ThemeSwitcher />
</div>
</header>
<div class="relative flex min-h-0 flex-1">
{#if railOpen}
<button
type="button"
class="fixed inset-0 z-30 bg-black/50 lg:hidden"
aria-label="Закрыть панель альбомов"
onclick={() => (railOpen = false)}
></button>
{/if}
<aside
class="border-border bg-chrome absolute inset-y-0 left-0 z-40 w-60 -translate-x-full overflow-y-auto border-r transition-transform lg:static lg:z-auto lg:w-[var(--rail-w)] lg:translate-x-0 {railOpen
? 'translate-x-0'
: ''}"
style="--rail-w: {railWidth}px"
aria-label="Альбомы"
>
{#if rail}{@render rail()}{/if}
</aside>
<button
type="button"
class="{handle} lg:block"
aria-label="Изменить ширину панели альбомов"
title="Потяните, чтобы изменить ширину"
onpointerdown={(e) => startResize('left', e)}
onkeydown={(e) => nudge('left', e)}
></button>
<main class="bg-canvas min-h-0 flex-1 overflow-y-auto">
{@render children()}
</main>
{#if panel}
{#if panelOpen}
<button
type="button"
class="fixed inset-0 z-30 bg-black/50 xl:hidden"
aria-label="Закрыть панель"
onclick={() => (panelOpen = false)}
></button>
{/if}
<button
type="button"
class="{handle} xl:block"
aria-label="Изменить ширину боковой панели"
title="Потяните, чтобы изменить ширину"
onpointerdown={(e) => startResize('right', e)}
onkeydown={(e) => nudge('right', e)}
></button>
<aside
class="border-border bg-chrome absolute inset-y-0 right-0 z-40 w-72 translate-x-full overflow-y-auto border-l transition-transform xl:static xl:z-auto xl:w-[var(--panel-w)] xl:translate-x-0 {panelOpen
? 'translate-x-0'
: ''}"
style="--panel-w: {panelWidth}px"
aria-label="Панель"
>
{@render panel()}
</aside>
{/if}
</div>
</div>
+6 -4
View File
@@ -75,18 +75,20 @@
{/each}
{#if auth.isAuthenticated}
<form class="mt-2 flex gap-2" onsubmit={submit}>
<form class="relative mt-2" onsubmit={submit}>
<input
bind:value={text}
placeholder="Комментарий…"
class="border-border bg-bg text-text flex-1 rounded-lg border px-3 py-1.5 text-sm"
class="border-border bg-bg text-text w-full rounded-lg border py-1.5 pr-10 pl-3 text-sm"
/>
<button
class="bg-primary text-primary-fg inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm"
class="text-primary hover:bg-bg-muted absolute top-1/2 right-1 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1.5 disabled:opacity-50"
type="submit"
aria-label="Отправить"
title="Отправить"
disabled={!text.trim()}
>
<Icon name="send" class="size-4" />
Отправить
</button>
</form>
{/if}
@@ -0,0 +1,112 @@
<script lang="ts">
import { api } from '$lib/api';
import Icon from './Icon.svelte';
import { albums } from '$lib/stores/albums.svelte';
import type { Album, Photo } from '$lib/types';
interface Props {
albumId: string;
onClose: () => void;
onSelected?: (album: Album) => void;
}
let { albumId, onClose, onSelected }: Props = $props();
let photos = $state<Photo[]>([]);
let loading = $state(true);
let error = $state('');
let busy = $state(false);
$effect(() => {
const id = albumId;
loading = true;
error = '';
api<{ photos: Photo[] }>(`/albums/${id}/photos?limit=100`)
.then((data) => (photos = data.photos))
.catch((e) => (error = (e as Error).message))
.finally(() => (loading = false));
});
async function choose(photo: Photo) {
if (busy) return;
busy = true;
error = '';
try {
const album = await albums.setCover(albumId, photo.id);
onSelected?.(album);
onClose();
} catch (e) {
error = (e as Error).message;
} finally {
busy = false;
}
}
function onKey(ev: KeyboardEvent) {
if (ev.key === 'Escape') onClose();
}
</script>
<svelte:window onkeydown={onKey} />
<div
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}
>
<div class="border-border bg-bg-elevated flex max-h-[85vh] w-full max-w-2xl flex-col rounded-xl border">
<div class="border-border flex items-center justify-between border-b px-4 py-3">
<h2 class="font-semibold">Выбрать обложку</h2>
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
aria-label="Закрыть"
title="Закрыть"
onclick={onClose}
>
<Icon name="close" />
</button>
</div>
<div class="min-h-0 flex-1 overflow-y-auto p-4">
{#if error}<p class="text-danger mb-3 text-sm">{error}</p>{/if}
{#if loading}
<p class="text-text-muted text-sm">Загрузка…</p>
{:else if photos.length === 0}
<p class="text-text-muted text-sm">В альбоме нет фотографий.</p>
{:else}
<ul class="grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5">
{#each photos as photo (photo.id)}
<li>
<button
type="button"
disabled={busy}
class="border-border bg-bg-muted block aspect-square w-full overflow-hidden rounded-lg border hover:border-primary disabled:opacity-50"
onclick={() => choose(photo)}
>
{#if photo.thumb_url}
<img
src={photo.thumb_url}
alt={photo.original_filename}
class="h-full w-full object-cover"
loading="lazy"
/>
{:else}
<span class="text-text-subtle flex h-full w-full items-center justify-center text-xs">
обработка…
</span>
{/if}
</button>
</li>
{/each}
</ul>
{/if}
</div>
</div>
</div>
@@ -0,0 +1,88 @@
<script lang="ts">
import Icon from './Icon.svelte';
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
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>
@@ -0,0 +1,19 @@
<script lang="ts">
import Icon from './Icon.svelte';
import { density } from '$lib/stores/density.svelte';
</script>
<div class="flex items-center gap-2">
<Icon name="grid_view" class="text-text-subtle size-4" />
<input
type="range"
min="2"
max="8"
step="1"
value={density.cols}
oninput={(e) => density.set(Number(e.currentTarget.value))}
class="accent-primary h-1 w-24 cursor-pointer"
aria-label="Размер миниатюр"
title="Размер миниатюр"
/>
</div>
-131
View File
@@ -1,131 +0,0 @@
<script lang="ts">
import { api } from '$lib/api';
import type { Photo } from '$lib/types';
import Comments from './Comments.svelte';
import Icon from './Icon.svelte';
interface Props {
photos: Photo[];
index: number;
onClose: () => void;
onIndexChange: (index: number) => void;
}
let { photos, index, onClose, onIndexChange }: Props = $props();
let fresh = $state<Photo | null>(null);
let touchX = 0;
const current = $derived(photos[index]);
$effect(() => {
const id = current?.id;
fresh = null;
if (!id) return;
api<{ photo: Photo }>(`/photos/${id}`)
.then((data) => (fresh = data.photo))
.catch(() => {});
});
function prev() {
if (index > 0) onIndexChange(index - 1);
}
function next() {
if (index < photos.length - 1) onIndexChange(index + 1);
}
function onKey(ev: KeyboardEvent) {
if (ev.key === 'Escape') onClose();
if (ev.key === 'ArrowLeft') prev();
if (ev.key === 'ArrowRight') next();
}
function onTouchStart(ev: TouchEvent) {
touchX = ev.changedTouches[0].clientX;
}
function onTouchEnd(ev: TouchEvent) {
const dx = ev.changedTouches[0].clientX - touchX;
if (dx > 50) prev();
else if (dx < -50) next();
}
</script>
<svelte:window onkeydown={onKey} />
<div
class="bg-bg/95 fixed inset-0 z-50 flex flex-col"
role="dialog"
aria-modal="true"
tabindex="-1"
onclick={(e) => {
if (e.target === e.currentTarget) onClose();
}}
onkeydown={onKey}
ontouchstart={onTouchStart}
ontouchend={onTouchEnd}
>
<div class="flex items-center justify-between p-3">
<span class="text-text-muted text-sm">{index + 1} / {photos.length}</span>
<div class="flex gap-2">
{#if fresh?.download_url}
<a
href={fresh.download_url}
class="border-border text-text inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm"
target="_blank"
rel="noreferrer"
>
<Icon name="download" class="size-4" />
Скачать
</a>
{/if}
<button
type="button"
onclick={onClose}
aria-label="Закрыть"
title="Закрыть"
class="border-border text-text inline-flex items-center justify-center rounded-lg border px-2 py-1.5"
>
<Icon name="close" />
</button>
</div>
</div>
<div class="flex flex-1 items-center justify-center overflow-hidden px-2 pb-2">
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center px-2"
aria-label="Предыдущее фото"
title="Предыдущее фото"
onclick={prev}
disabled={index === 0}
>
<Icon name="chevron_left" class="size-8" />
</button>
{#if current}
<img
src={fresh?.preview_url ?? fresh?.original_url ?? current.preview_url ?? current.original_url}
alt={current.original_filename}
class="max-h-[75vh] max-w-full rounded-lg object-contain"
/>
{/if}
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center px-2"
aria-label="Следующее фото"
title="Следующее фото"
onclick={next}
disabled={index === photos.length - 1}
>
<Icon name="chevron_right" class="size-8" />
</button>
</div>
{#if current}
<div class="border-border bg-bg-elevated max-h-56 overflow-y-auto border-t p-3">
<p class="text-text text-sm">
{current.uploader.name} · {current.original_filename}
</p>
<Comments photoId={current.id} />
</div>
{/if}
</div>
+5 -1
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import Icon from './Icon.svelte';
import { density } from '$lib/stores/density.svelte';
import type { Photo } from '$lib/types';
interface Props {
@@ -13,7 +14,10 @@
{#if photos.length === 0}
<p class="text-text-muted p-8 text-center">Пока нет фотографий.</p>
{:else}
<ul class="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
<ul
class="grid gap-2"
style="grid-template-columns: repeat({density.cols}, minmax(0, 1fr));"
>
{#each photos as photo, i (photo.id)}
<li>
<button
+40 -64
View File
@@ -1,6 +1,5 @@
<script lang="ts">
import { auth } from '$lib/stores/auth.svelte';
import Icon from './Icon.svelte';
import type { Photo } from '$lib/types';
interface Props {
@@ -10,39 +9,23 @@
let { albumId, onUploaded }: Props = $props();
let dragging = $state(false);
let progress = $state(0);
let fileInput: HTMLInputElement | undefined = $state();
let busy = $state(false);
let progress = $state(0);
let error = $state('');
function pick() {
export function pick() {
fileInput?.click();
}
let fileInput: HTMLInputElement | undefined = $state();
function onDrop(ev: DragEvent) {
ev.preventDefault();
dragging = false;
if (ev.dataTransfer?.files?.length) {
upload(ev.dataTransfer.files);
}
}
function onChange(ev: Event) {
const target = ev.target as HTMLInputElement;
if (target.files?.length) upload(target.files);
target.value = '';
}
function upload(files: FileList) {
export function upload(files: FileList | File[]) {
const list = Array.from(files);
if (list.length === 0) return;
error = '';
busy = true;
progress = 0;
const form = new FormData();
for (const file of Array.from(files)) {
form.append('files', file);
}
for (const file of list) form.append('files', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', `/api/albums/${albumId}/photos`);
@@ -53,6 +36,7 @@
xhr.onload = () => {
busy = false;
if (xhr.status >= 200 && xhr.status < 300) {
progress = 0;
try {
const data = JSON.parse(xhr.responseText);
onUploaded?.(data.photos ?? []);
@@ -73,48 +57,40 @@
};
xhr.send(form);
}
function onChange(ev: Event) {
const input = ev.target as HTMLInputElement;
if (input.files?.length) upload(input.files);
input.value = '';
}
</script>
<div
class="border-border rounded-xl border-2 border-dashed p-6 text-center transition-colors {dragging
? 'bg-bg-muted border-primary'
: 'bg-bg-elevated'}"
ondragover={(e) => {
e.preventDefault();
dragging = true;
}}
ondragleave={() => (dragging = false)}
ondrop={onDrop}
ondragenter={(e) => e.preventDefault()}
role="region"
aria-label="Загрузка фотографий"
>
<input
bind:this={fileInput}
type="file"
accept="image/*"
multiple
class="hidden"
onchange={onChange}
/>
<Icon name="cloud_upload" class="text-text-subtle mx-auto mb-3 size-10" />
<p class="text-text mb-3 text-sm">Перетащите фото сюда или</p>
<button
type="button"
onclick={pick}
disabled={busy}
class="bg-primary text-primary-fg inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50"
>
<Icon name="add_photo_alternate" class="size-4" />
{busy ? 'Загрузка…' : 'Выбрать файлы'}
</button>
<input
bind:this={fileInput}
type="file"
accept="image/*"
multiple
class="hidden"
onchange={onChange}
/>
{#if busy}
<div class="bg-bg-muted mt-4 h-2 w-full overflow-hidden rounded">
{#if busy}
<div
class="bg-bg-elevated border-border fixed right-4 bottom-4 z-50 w-64 rounded-lg border p-3 shadow-lg"
role="status"
aria-live="polite"
>
<p class="text-text mb-2 text-sm">Загрузка… {progress}%</p>
<div class="bg-bg-muted h-1.5 w-full overflow-hidden rounded">
<div class="bg-primary h-full transition-all" style="width: {progress}%"></div>
</div>
{/if}
{#if error}
<p class="text-danger mt-3 text-sm">{error}</p>
{/if}
</div>
</div>
{/if}
{#if error}
<div
class="bg-bg-elevated border-danger text-danger fixed right-4 bottom-4 z-50 rounded-lg border p-3 text-sm"
role="alert"
>
{error}
</div>
{/if}
+149
View File
@@ -0,0 +1,149 @@
<script lang="ts">
import { api } from '$lib/api';
import Icon from './Icon.svelte';
import type { Photo } from '$lib/types';
interface Props {
photos: Photo[];
index: number;
canEdit?: boolean;
onClose: () => void;
onIndexChange: (index: number) => void;
onMakeCover?: (photo: Photo) => void;
}
let { photos, index, canEdit = false, onClose, onIndexChange, onMakeCover }: Props = $props();
let fresh = $state<Photo | null>(null);
let touchX = 0;
const current = $derived(photos[index]);
$effect(() => {
const id = current?.id;
fresh = null;
if (!id) return;
api<{ photo: Photo }>(`/photos/${id}`)
.then((data) => (fresh = data.photo))
.catch(() => {});
});
function prev() {
if (index > 0) onIndexChange(index - 1);
}
function next() {
if (index < photos.length - 1) onIndexChange(index + 1);
}
function onKey(ev: KeyboardEvent) {
if (ev.key === 'Escape') onClose();
else if (ev.key === 'ArrowLeft') prev();
else if (ev.key === 'ArrowRight') next();
}
function onTouchStart(ev: TouchEvent) {
touchX = ev.changedTouches[0].clientX;
}
function onTouchEnd(ev: TouchEvent) {
const dx = ev.changedTouches[0].clientX - touchX;
if (dx > 50) prev();
else if (dx < -50) next();
}
const btn =
'border-border text-text hover:bg-bg-muted inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm';
</script>
<svelte:window onkeydown={onKey} />
<div class="flex h-full flex-col">
<div class="border-border flex shrink-0 items-center justify-between gap-2 border-b px-3 py-2">
<span class="text-text-muted text-sm">{index + 1} / {photos.length}</span>
<div class="flex items-center gap-2">
{#if canEdit}
<button
type="button"
class={btn}
title="Сделать обложкой"
onclick={() => current && onMakeCover?.(current)}
>
<Icon name="wallpaper" class="size-4" />
<span class="hidden sm:inline">Обложка</span>
</button>
{/if}
{#if fresh?.download_url}
<a href={fresh.download_url} class={btn} target="_blank" rel="noreferrer">
<Icon name="download" class="size-4" />
<span class="hidden sm:inline">Скачать</span>
</a>
{/if}
<button type="button" class={btn} aria-label="Закрыть" title="Закрыть" onclick={onClose}>
<Icon name="close" />
</button>
</div>
</div>
<div
class="bg-canvas flex min-h-0 flex-1 items-center justify-center overflow-hidden px-2 py-2"
role="group"
aria-label="Просмотр фото"
ontouchstart={onTouchStart}
ontouchend={onTouchEnd}
>
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center px-1 disabled:opacity-30"
aria-label="Предыдущее фото"
title="Предыдущее фото"
onclick={prev}
disabled={index === 0}
>
<Icon name="chevron_left" class="size-8" />
</button>
{#if current}
<img
src={fresh?.preview_url ??
fresh?.original_url ??
current.preview_url ??
current.original_url}
alt={current.original_filename}
class="max-h-full max-w-full rounded-lg object-contain"
/>
{/if}
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center px-1 disabled:opacity-30"
aria-label="Следующее фото"
title="Следующее фото"
onclick={next}
disabled={index === photos.length - 1}
>
<Icon name="chevron_right" class="size-8" />
</button>
</div>
<div class="border-border flex shrink-0 gap-2 overflow-x-auto border-t p-2" aria-label="Лента миниатюр">
{#each photos as photo, i (photo.id)}
<button
type="button"
class="h-16 w-16 shrink-0 overflow-hidden rounded border {i === index
? 'border-primary'
: 'border-border'}"
onclick={() => onIndexChange(i)}
aria-label="Фото {i + 1}"
aria-current={i === index ? 'true' : undefined}
>
{#if photo.thumb_url}
<img
src={photo.thumb_url}
alt=""
class="h-full w-full object-cover"
loading="lazy"
/>
{:else}
<span class="bg-bg-muted block h-full w-full"></span>
{/if}
</button>
{/each}
</div>
</div>
+4 -1
View File
@@ -40,7 +40,10 @@ export const icons = {
link_off: { path: '<path fill="currentColor" d="m19.25 16.45l-1.5-1.55q1-.275 1.625-1.063T20 12q0-1.25-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12q0 1.425-.737 2.625T19.25 16.45M15.85 13l-2-2H16v2zm3.95 9.6L1.4 4.2l1.4-1.4l18.4 18.4zM11 17H7q-2.075 0-3.537-1.463T2 12q0-1.725 1.05-3.075t2.7-1.775L7.6 9H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h1.625l1.975 2z"/>' },
delete_forever: { path: '<path fill="currentColor" d="m9.4 16.5l2.6-2.6l2.6 2.6l1.4-1.4l-2.6-2.6L16 9.9l-1.4-1.4l-2.6 2.6l-2.6-2.6L8 9.9l2.6 2.6L8 15.1zM7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21z"/>' },
content_copy: { path: '<path fill="currentColor" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V6h2v14h11v2z"/>' },
check: { path: '<path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>' }
check: { path: '<path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>' },
menu: { path: '<path fill="currentColor" d="M3 18v-2h18v2zm0-5v-2h18v2zm0-5V6h18v2z"/>' },
grid_view: { path: '<path fill="currentColor" d="M3 3v8h8V3zm10 0v8h8V3zM3 13v8h8v-8zm10 0v8h8v-8z"/>' },
wallpaper: { path: '<path fill="currentColor" d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2zm6 9l-4 5h12l-3-4l-2.03 2.71zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5M20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2m0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4z"/>' }
} satisfies Record<string, IconDef>;
export type IconName = keyof typeof icons;
+62
View File
@@ -0,0 +1,62 @@
import { api } from '$lib/api';
import type { Album } from '$lib/types';
import { auth } from './auth.svelte';
class AlbumsStore {
list = $state<Album[]>([]);
loading = $state(false);
loaded = $state(false);
error = $state('');
async load() {
if (!auth.isAuthenticated) {
this.list = [];
this.loaded = true;
return;
}
this.loading = true;
this.error = '';
try {
const data = await api<{ albums: Album[] }>('/albums');
this.list = data.albums;
this.loaded = true;
} catch (e) {
this.error = (e as Error).message;
} finally {
this.loading = false;
}
}
async create(title: string): Promise<Album> {
const data = await api<{ album: Album }>('/albums', { method: 'POST', body: { title } });
this.list = [data.album, ...this.list];
return data.album;
}
async setCover(albumId: string, coverPhotoId: string | null): Promise<Album> {
const body = coverPhotoId ? { cover_photo_id: coverPhotoId } : { clear_cover: true };
const data = await api<{ album: Album }>(`/albums/${albumId}`, { method: 'PATCH', body });
this.upsert(data.album);
return data.album;
}
upsert(album: Album) {
const i = this.list.findIndex((a) => a.id === album.id);
if (i === -1) {
this.list = [album, ...this.list];
} else {
this.list = this.list.map((a) => (a.id === album.id ? album : a));
}
}
remove(id: string) {
this.list = this.list.filter((a) => a.id !== id);
}
reset() {
this.list = [];
this.loaded = false;
}
}
export const albums = new AlbumsStore();
+20
View File
@@ -0,0 +1,20 @@
const KEY = 'grid-cols';
const MIN = 2;
const MAX = 8;
class DensityStore {
cols = $state(5);
init() {
if (typeof window === 'undefined') return;
const v = parseInt(localStorage.getItem(KEY) ?? '', 10);
if (v >= MIN && v <= MAX) this.cols = v;
}
set(value: number) {
this.cols = Math.min(MAX, Math.max(MIN, Math.round(value)));
if (typeof window !== 'undefined') localStorage.setItem(KEY, String(this.cols));
}
}
export const density = new DensityStore();
+3 -3
View File
@@ -14,13 +14,13 @@ function resolve(theme: Theme): Resolved {
}
class ThemeStore {
current = $state<Theme>('system');
resolved = $state<Resolved>('light');
current = $state<Theme>('dark');
resolved = $state<Resolved>('dark');
private media: MediaQueryList | null = null;
init() {
if (typeof window === 'undefined') return;
const stored = (localStorage.getItem(KEY) as Theme | null) ?? 'system';
const stored = (localStorage.getItem(KEY) as Theme | null) ?? 'dark';
this.current = stored;
this.apply();
this.media = window.matchMedia('(prefers-color-scheme: dark)');
+3
View File
@@ -11,6 +11,9 @@ export interface Album {
title: string;
description: string;
cover_photo_id?: string | null;
cover_thumb_url?: string;
photos_count?: number;
members_count?: number;
created_at: string;
updated_at: string;
}
+17
View File
@@ -0,0 +1,17 @@
<script lang="ts">
import AppShell from '$lib/components/AppShell.svelte';
import AlbumRail from '$lib/components/AlbumRail.svelte';
import AlbumPanel from '$lib/components/AlbumPanel.svelte';
let { children } = $props();
</script>
<AppShell>
{#snippet rail()}
<AlbumRail />
{/snippet}
{#snippet panel()}
<AlbumPanel />
{/snippet}
{@render children()}
</AppShell>
+73
View File
@@ -0,0 +1,73 @@
<script lang="ts">
import Icon from '$lib/components/Icon.svelte';
import DensityControl from '$lib/components/DensityControl.svelte';
import { albums } from '$lib/stores/albums.svelte';
import { density } from '$lib/stores/density.svelte';
import { auth } from '$lib/stores/auth.svelte';
$effect(() => {
if (auth.isAuthenticated && !albums.loaded) albums.load();
});
</script>
{#if !auth.isAuthenticated}
<div class="py-16 text-center">
<h1 class="mb-2 text-2xl font-bold">Общие фотоальбомы</h1>
<p class="text-text-muted mb-6">Войдите, чтобы создавать альбомы и делиться фотографиями.</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>
</div>
{:else}
<div class="p-4 sm:p-6">
<div class="mb-4 flex items-center justify-between gap-4">
<h1 class="text-xl font-semibold">Мои альбомы</h1>
<DensityControl />
</div>
{#if albums.loading && albums.list.length === 0}
<p class="text-text-muted">Загрузка…</p>
{:else if albums.list.length === 0}
<div class="text-text-muted flex flex-col items-center gap-3 py-16">
<Icon name="photo_library" class="size-16 text-text-subtle" />
<p>Альбомов пока нет. Создайте первый кнопкой <span class="text-text">+</span> в панели альбомов.</p>
</div>
{:else}
<ul
class="grid gap-3"
style="grid-template-columns: repeat({density.cols}, minmax(0, 1fr));"
>
{#each albums.list as album (album.id)}
<li>
<a href="/albums/{album.id}" class="group block">
<div
class="bg-bg-muted border-border aspect-square overflow-hidden rounded-lg border"
>
{#if album.cover_thumb_url}
<img
src={album.cover_thumb_url}
alt=""
class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
loading="lazy"
/>
{:else}
<span class="flex h-full w-full items-center justify-center">
<Icon name="image" class="size-12 text-text-subtle" />
</span>
{/if}
</div>
<div class="mt-2">
<h2 class="text-text truncate text-sm font-medium">{album.title}</h2>
<p class="text-text-subtle text-xs">{album.photos_count ?? 0} фото</p>
</div>
</a>
</li>
{/each}
</ul>
{/if}
</div>
{/if}
@@ -0,0 +1,230 @@
<script lang="ts">
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { api } from '$lib/api';
import PhotoGrid from '$lib/components/PhotoGrid.svelte';
import Uploader from '$lib/components/Uploader.svelte';
import DensityControl from '$lib/components/DensityControl.svelte';
import Icon from '$lib/components/Icon.svelte';
import { auth } from '$lib/stores/auth.svelte';
import { albums } from '$lib/stores/albums.svelte';
import { SSEClient, type SSEEvent } from '$lib/sse';
import type { Album, Photo } from '$lib/types';
const albumId = $derived($page.params.id ?? '');
let album = $state<Album | null>(null);
let role = $state('');
let photos = $state<Photo[]>([]);
let nextCursor = $state('');
let loading = $state(true);
let error = $state('');
let dragging = $state(false);
let uploader = $state<{ pick: () => void; upload: (files: FileList | File[]) => void }>();
let canUpload = $derived(['owner', 'admin', 'editor', 'member'].includes(role));
async function loadAlbum() {
const data = await api<{ album: Album; role: string }>(`/albums/${albumId}`);
album = data.album;
role = data.role;
albums.upsert(data.album);
}
async function loadPhotos() {
const data = await api<{ photos: Photo[]; next_cursor: string }>(
`/albums/${albumId}/photos`
);
photos = data.photos;
nextCursor = data.next_cursor;
}
async function loadMore() {
if (!nextCursor) return;
const data = await api<{ photos: Photo[]; next_cursor: string }>(
`/albums/${albumId}/photos?cursor=${encodeURIComponent(nextCursor)}`
);
photos = [...photos, ...data.photos];
nextCursor = data.next_cursor;
}
$effect(() => {
const id = albumId;
loading = true;
error = '';
Promise.all([loadAlbum(), loadPhotos()])
.catch((e) => (error = (e as Error).message))
.finally(() => (loading = false));
});
let client: SSEClient | null = null;
$effect(() => {
const id = albumId;
if (!auth.access) return;
client = new SSEClient({
path: `/api/sse/albums/${id}`,
onEvent: handleEvent,
onReconnect: () => loadPhotos()
});
client.connect(auth.access);
return () => {
client?.close();
client = null;
};
});
function handleEvent(ev: SSEEvent) {
const data = ev.data as Record<string, unknown>;
switch (ev.type) {
case 'photo.created': {
const photo = data as unknown as Photo;
if (photos.some((p) => p.id === photo.id)) {
photos = photos.map((p) => (p.id === photo.id ? photo : p));
} else {
photos = [photo, ...photos];
}
break;
}
case 'photo.deleted': {
photos = photos.filter((p) => p.id !== data.id);
break;
}
case 'like.added': {
photos = photos.map((p) =>
p.id === data.photo_id
? {
...p,
likes_count: p.likes_count + 1,
liked_by_me: data.user_id === auth.user?.id || p.liked_by_me
}
: p
);
break;
}
case 'like.removed': {
photos = photos.map((p) =>
p.id === data.photo_id
? { ...p, likes_count: Math.max(0, p.likes_count - 1), liked_by_me: false }
: p
);
break;
}
case 'comment.created': {
const comment = data as unknown as { photo_id: string };
photos = photos.map((p) =>
p.id === comment.photo_id ? { ...p, comments_count: p.comments_count + 1 } : p
);
break;
}
case 'album.updated': {
loadAlbum().catch(() => {});
break;
}
}
}
function onDrop(ev: DragEvent) {
ev.preventDefault();
dragging = false;
if (canUpload && ev.dataTransfer?.files?.length) {
uploader?.upload(ev.dataTransfer.files);
}
}
</script>
{#if loading}
<p class="text-text-muted p-4">Загрузка…</p>
{:else if error}
<p class="text-danger p-4">{error}</p>
{:else}
<div
class="relative flex min-h-full flex-col"
role="region"
aria-label="Альбом"
ondragover={(e) => {
if (!canUpload) return;
e.preventDefault();
dragging = true;
}}
ondragleave={(e) => {
if (!e.currentTarget.contains(e.relatedTarget as Node)) dragging = false;
}}
ondrop={onDrop}
>
<div
class="border-border bg-chrome sticky top-0 z-10 flex items-center justify-between gap-3 border-b px-3 py-2"
>
<h1 class="text-text truncate text-sm font-medium">{album?.title ?? ''}</h1>
<div class="flex items-center gap-3">
<DensityControl />
{#if canUpload}
<button
type="button"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5"
aria-label="Загрузить фото"
title="Загрузить фото"
onclick={() => uploader?.pick()}
>
<Icon name="cloud_upload" />
</button>
{/if}
</div>
</div>
<div class="flex-1 p-3 sm:p-4">
{#if canUpload && photos.length === 0}
<button
type="button"
class="border-border text-text-muted hover:border-primary flex w-full flex-col items-center gap-3 rounded-xl border-2 border-dashed p-12 text-center"
onclick={() => uploader?.pick()}
>
<Icon name="cloud_upload" class="size-10 text-text-subtle" />
<span>Перетащите фото сюда или выберите файлы</span>
</button>
{:else}
<PhotoGrid
{photos}
onOpen={(i) => {
const p = photos[i];
if (p) goto(`/albums/${albumId}/photos/${p.id}`);
}}
/>
{/if}
{#if nextCursor}
<div class="mt-6 text-center">
<button
type="button"
class="border-border text-text hover:bg-bg-muted inline-flex items-center gap-1.5 rounded-lg border px-4 py-2 text-sm"
onclick={loadMore}
>
<Icon name="expand_more" class="size-4" />
Показать ещё
</button>
</div>
{/if}
</div>
{#if dragging}
<div
class="bg-bg/80 border-primary pointer-events-none fixed inset-3 z-40 flex items-center justify-center rounded-xl border-2 border-dashed"
>
<span class="text-text inline-flex items-center gap-2 text-lg">
<Icon name="cloud_upload" class="size-6" />
Отпустите, чтобы загрузить
</span>
</div>
{/if}
<Uploader
bind:this={uploader}
{albumId}
onUploaded={(created) => {
for (const p of created) {
if (!photos.some((x) => x.id === p.id)) photos = [p, ...photos];
}
}}
/>
</div>
{/if}
@@ -0,0 +1,83 @@
<script lang="ts">
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { api } from '$lib/api';
import Viewer from '$lib/components/Viewer.svelte';
import { albums } from '$lib/stores/albums.svelte';
import type { Album, Photo } from '$lib/types';
const albumId = $derived($page.params.id ?? '');
const photoId = $derived($page.params.photoId ?? '');
let photos = $state<Photo[]>([]);
let role = $state('');
let loading = $state(true);
let error = $state('');
let saved = $state(false);
const canEdit = $derived(role === 'owner' || role === 'admin');
const index = $derived(photos.findIndex((p) => p.id === photoId));
$effect(() => {
const id = albumId;
loading = true;
error = '';
Promise.all([
api<{ photos: Photo[] }>(`/albums/${id}/photos?limit=100`),
api<{ album: Album; role: string }>(`/albums/${id}`)
])
.then(([p, a]) => {
photos = p.photos;
role = a.role;
})
.catch((e) => (error = (e as Error).message))
.finally(() => (loading = false));
});
function close() {
goto(`/albums/${albumId}`);
}
function change(i: number) {
const p = photos[i];
if (p) goto(`/albums/${albumId}/photos/${p.id}`, { replaceState: true, noScroll: true });
}
async function makeCover(photo: Photo) {
if (!canEdit) return;
try {
await albums.setCover(albumId, photo.id);
saved = true;
setTimeout(() => (saved = false), 2000);
} catch (e) {
error = (e as Error).message;
}
}
</script>
{#if loading}
<p class="text-text-muted p-4">Загрузка…</p>
{:else if error}
<p class="text-danger p-4">{error}</p>
{:else if index < 0}
<div class="text-text-muted p-6 text-center">
<p class="mb-3">Фото не найдено.</p>
<a href="/albums/{albumId}" class="text-primary">К альбому</a>
</div>
{:else}
<div class="flex h-full flex-col">
{#if saved}
<p class="bg-success/10 text-success px-3 py-1 text-center text-xs">Обложка обновлена</p>
{/if}
<div class="min-h-0 flex-1">
<Viewer
{photos}
{index}
{canEdit}
onClose={close}
onIndexChange={change}
onMakeCover={makeCover}
/>
</div>
</div>
{/if}
@@ -0,0 +1,21 @@
<script lang="ts">
import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
import Icon from '$lib/components/Icon.svelte';
let { children } = $props();
</script>
<div class="bg-canvas text-text min-h-screen">
<header class="border-border bg-chrome border-b">
<div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
<a href="/" class="inline-flex items-center gap-2 text-lg font-semibold">
<Icon name="photo_camera" />
Galo
</a>
<ThemeSwitcher />
</div>
</header>
<main class="mx-auto max-w-6xl px-4 py-6">
{@render children()}
</main>
</div>
@@ -3,6 +3,7 @@
import { api } from '$lib/api';
import Icon from '$lib/components/Icon.svelte';
import PhotoGrid from '$lib/components/PhotoGrid.svelte';
import Viewer from '$lib/components/Viewer.svelte';
import type { Album, Photo } from '$lib/types';
const token = $derived($page.params.token);
@@ -65,41 +66,13 @@
{/if}
{#if active >= 0}
<div
class="bg-bg/95 fixed inset-0 z-50 flex items-center justify-center"
role="dialog"
tabindex="-1"
onkeydown={(e) => {
if (e.key === 'Escape') active = -1;
}}
onclick={() => (active = -1)}
>
<img
src={photos[active].preview_url ?? photos[active].original_url}
alt={photos[active].original_filename}
class="max-h-[90vh] max-w-full object-contain"
<div class="bg-canvas fixed inset-0 z-50" role="dialog" aria-modal="true" aria-label="Просмотр">
<Viewer
{photos}
index={active}
onClose={() => (active = -1)}
onIndexChange={(i) => (active = i)}
/>
<div class="absolute top-4 right-4 flex gap-2">
<a
href={photos[active].download_url}
target="_blank"
rel="noreferrer"
class="border-border bg-bg-elevated text-text inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm"
onclick={(e) => e.stopPropagation()}
>
<Icon name="download" class="size-4" />
Скачать
</a>
<button
type="button"
aria-label="Закрыть"
title="Закрыть"
class="border-border bg-bg-elevated text-text inline-flex items-center justify-center rounded-lg border px-2 py-1.5"
onclick={() => (active = -1)}
>
<Icon name="close" />
</button>
</div>
</div>
{/if}
{:else}
+3 -46
View File
@@ -1,18 +1,17 @@
<script lang="ts">
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import '../app.css';
import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
import Icon from '$lib/components/Icon.svelte';
import IconSprite from '$lib/components/IconSprite.svelte';
import { auth } from '$lib/stores/auth.svelte';
import { theme } from '$lib/stores/theme.svelte';
import { density } from '$lib/stores/density.svelte';
import { authApi } from '$lib/api';
let { children } = $props();
onMount(() => {
theme.init();
density.init();
if (auth.isAuthenticated && !auth.user) {
authApi
.me()
@@ -20,49 +19,7 @@
.catch(() => {});
}
});
async function logout() {
if (auth.refresh) {
await authApi.logout(auth.refresh).catch(() => {});
}
auth.clear();
goto('/login');
}
</script>
<IconSprite />
<div class="bg-bg text-text min-h-screen">
<header class="border-border bg-bg-elevated border-b">
<div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
<a href="/" class="inline-flex items-center gap-2 text-lg font-semibold">
<Icon name="photo_camera" />
Galo
</a>
<div class="flex items-center gap-3">
{#if auth.isAuthenticated}
<span class="text-text-muted hidden text-sm sm:inline">{auth.user?.name ?? ''}</span>
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center gap-1.5 text-sm"
onclick={logout}
>
<Icon name="logout" class="size-4" />
Выйти
</button>
{:else}
<a
href="/login"
class="text-text-muted hover:text-text inline-flex items-center gap-1.5 text-sm"
>
<Icon name="login" class="size-4" />
Войти
</a>
{/if}
<ThemeSwitcher />
</div>
</div>
</header>
<main class="mx-auto max-w-6xl px-4 py-6">
{@render children()}
</main>
</div>
{@render children()}
-107
View File
@@ -1,107 +0,0 @@
<script lang="ts">
import { api } from '$lib/api';
import Icon from '$lib/components/Icon.svelte';
import { auth } from '$lib/stores/auth.svelte';
import type { Album } from '$lib/types';
let albums = $state<Album[]>([]);
let loading = $state(true);
let title = $state('');
let error = $state('');
async function load() {
if (!auth.isAuthenticated) {
loading = false;
return;
}
try {
const data = await api<{ albums: Album[] }>('/albums');
albums = data.albums;
} catch (e) {
error = (e as Error).message;
} finally {
loading = false;
}
}
$effect(() => {
load();
});
async function create(ev: Event) {
ev.preventDefault();
if (!title.trim()) return;
try {
const data = await api<{ album: Album }>('/albums', {
method: 'POST',
body: { title }
});
albums = [data.album, ...albums];
title = '';
} catch (e) {
error = (e as Error).message;
}
}
</script>
{#if !auth.isAuthenticated}
<div class="py-16 text-center">
<h1 class="mb-2 text-2xl font-bold">Общие фотоальбомы</h1>
<p class="text-text-muted mb-6">Войдите, чтобы создавать альбомы и делиться фотографиями.</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>
</div>
{:else}
<div class="mb-6 flex items-center justify-between gap-4">
<h1 class="text-2xl font-bold">Мои альбомы</h1>
<form class="flex gap-2" onsubmit={create}>
<input
bind:value={title}
placeholder="Название альбома"
class="border-border bg-bg-elevated text-text rounded-lg border px-3 py-2 text-sm"
/>
<button
class="bg-primary text-primary-fg inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm"
type="submit"
>
<Icon name="add" class="size-4" />
Создать
</button>
</form>
</div>
{#if error}<p class="text-danger mb-4 text-sm">{error}</p>{/if}
{#if loading}
<p class="text-text-muted">Загрузка…</p>
{:else if albums.length === 0}
<div class="text-text-muted flex flex-col items-center gap-3 py-12">
<Icon name="photo_library" class="size-16 text-text-subtle" />
<p>Альбомов пока нет. Создайте первый.</p>
</div>
{:else}
<ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{#each albums as album (album.id)}
<li>
<a
href="/albums/{album.id}"
class="border-border bg-bg-elevated hover:border-primary block overflow-hidden rounded-xl border transition-colors"
>
<div class="bg-bg-muted flex aspect-video items-center justify-center">
<Icon name="image" class="size-16 text-text-subtle" />
</div>
<div class="p-4">
<h2 class="text-text font-semibold">{album.title}</h2>
<p class="text-text-muted line-clamp-2 text-sm">{album.description}</p>
</div>
</a>
</li>
{/each}
</ul>
{/if}
{/if}
@@ -1,186 +0,0 @@
<script lang="ts">
import { page } from '$app/stores';
import { api } from '$lib/api';
import PhotoGrid from '$lib/components/PhotoGrid.svelte';
import Lightbox from '$lib/components/Lightbox.svelte';
import Uploader from '$lib/components/Uploader.svelte';
import Icon from '$lib/components/Icon.svelte';
import { auth } from '$lib/stores/auth.svelte';
import { SSEClient, type SSEEvent } from '$lib/sse';
import type { Album, Photo } from '$lib/types';
const albumId = $derived($page.params.id ?? '');
let album = $state<Album | null>(null);
let role = $state('');
let photos = $state<Photo[]>([]);
let nextCursor = $state('');
let loading = $state(true);
let error = $state('');
let lightboxIndex = $state(-1);
let canUpload = $derived(['owner', 'admin', 'editor', 'member'].includes(role));
async function loadAlbum() {
const data = await api<{ album: Album; role: string }>(`/albums/${albumId}`);
album = data.album;
role = data.role;
}
async function loadPhotos() {
const data = await api<{ photos: Photo[]; next_cursor: string }>(
`/albums/${albumId}/photos`
);
photos = data.photos;
nextCursor = data.next_cursor;
}
async function loadMore() {
if (!nextCursor) return;
const data = await api<{ photos: Photo[]; next_cursor: string }>(
`/albums/${albumId}/photos?cursor=${encodeURIComponent(nextCursor)}`
);
photos = [...photos, ...data.photos];
nextCursor = data.next_cursor;
}
$effect(() => {
const id = albumId;
loading = true;
error = '';
Promise.all([loadAlbum(), loadPhotos()])
.catch((e) => (error = (e as Error).message))
.finally(() => (loading = false));
});
let client: SSEClient | null = null;
$effect(() => {
const id = albumId;
if (!auth.access) return;
client = new SSEClient({
path: `/api/sse/albums/${id}`,
onEvent: handleEvent,
onReconnect: () => loadPhotos()
});
client.connect(auth.access);
return () => {
client?.close();
client = null;
};
});
function handleEvent(ev: SSEEvent) {
const data = ev.data as Record<string, unknown>;
switch (ev.type) {
case 'photo.created': {
const photo = data as unknown as Photo;
if (photos.some((p) => p.id === photo.id)) {
photos = photos.map((p) => (p.id === photo.id ? photo : p));
} else {
photos = [photo, ...photos];
}
break;
}
case 'photo.deleted': {
photos = photos.filter((p) => p.id !== data.id);
break;
}
case 'like.added': {
photos = photos.map((p) =>
p.id === data.photo_id
? { ...p, likes_count: p.likes_count + 1, liked_by_me: data.user_id === auth.user?.id || p.liked_by_me }
: p
);
break;
}
case 'like.removed': {
photos = photos.map((p) =>
p.id === data.photo_id
? { ...p, likes_count: Math.max(0, p.likes_count - 1), liked_by_me: false }
: p
);
break;
}
case 'comment.created': {
const comment = data as unknown as { photo_id: string };
photos = photos.map((p) =>
p.id === comment.photo_id ? { ...p, comments_count: p.comments_count + 1 } : p
);
break;
}
case 'album.updated': {
loadAlbum().catch(() => {});
break;
}
}
}
</script>
{#if loading}
<p class="text-text-muted">Загрузка…</p>
{:else if error}
<p class="text-danger">{error}</p>
{:else if album}
<div class="mb-6 flex items-start justify-between gap-4">
<div>
<h1 class="text-2xl font-bold">{album.title}</h1>
<p class="text-text-muted">{album.description}</p>
</div>
<div class="flex gap-2">
<a
href="/albums/{albumId}/members"
class="border-border text-text inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm"
>
<Icon name="group" class="size-4" />
Участники
</a>
{#if role === 'owner' || role === 'admin'}
<a
href="/albums/{albumId}/settings"
class="border-border text-text inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm"
>
<Icon name="settings" class="size-4" />
Настройки
</a>
{/if}
</div>
</div>
{#if canUpload}
<div class="mb-6">
<Uploader
{albumId}
onUploaded={(created) => {
for (const p of created) {
if (!photos.some((x) => x.id === p.id)) photos = [p, ...photos];
}
}}
/>
</div>
{/if}
<PhotoGrid {photos} onOpen={(i) => (lightboxIndex = i)} />
{#if nextCursor}
<div class="mt-6 text-center">
<button
type="button"
class="border-border text-text inline-flex items-center gap-1.5 rounded-lg border px-4 py-2 text-sm"
onclick={loadMore}
>
<Icon name="expand_more" class="size-4" />
Показать ещё
</button>
</div>
{/if}
{#if lightboxIndex >= 0}
<Lightbox
{photos}
index={lightboxIndex}
onClose={() => (lightboxIndex = -1)}
onIndexChange={(i) => (lightboxIndex = i)}
/>
{/if}
{/if}
+2
View File
@@ -11,6 +11,8 @@ export default {
muted: 'hsl(var(--bg-muted) / <alpha-value>)'
},
border: 'hsl(var(--border) / <alpha-value>)',
chrome: 'hsl(var(--chrome) / <alpha-value>)',
canvas: 'hsl(var(--canvas) / <alpha-value>)',
text: {
DEFAULT: 'hsl(var(--text) / <alpha-value>)',
muted: 'hsl(var(--text-muted) / <alpha-value>)',