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,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>
|
||||
@@ -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>
|
||||
+7
-34
@@ -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}
|
||||
@@ -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()}
|
||||
|
||||
@@ -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}
|
||||
Reference in New Issue
Block a user