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