feat: implement shared-album multi-user photo album

Backend (Go/Gin/pgx): env config, pgx pool with retries, Garage S3 client (path-style, region garage), embedded golang-migrate migrations, JWT auth with refresh rotation, albums CRUD, members/roles/invites with no-escalation matrix, photo upload + async imaging/goexif WebP variants, cursor pagination, presigned URLs, likes/comments, SSE hub (album + personal), notifications, share links. Frontend (SvelteKit 2 + Svelte 5 + Tailwind v4): API wrapper with 401 refresh, auth store, all screens, Uploader/PhotoGrid/Lightbox/Comments, SSE client with reconnect + REST catch-up, three themes + system via data-theme. Deploy without Docker: Makefile builds the frontend into backend/static and embeds it (go:embed) into a single statically linked binary; systemd unit and nginx SSE example included. Use gen2brain/webp (-tags nodynamic) instead of cgo kolesa-team/go-webp to keep CGO_ENABLED=0 static builds; design.md/proposal.md updated accordingly.
2026-10-10 12:50:33 +03:00
commit 2b2b342492
105 changed files with 12494 additions and 0 deletions
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { api } from '$lib/api';
+	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 rounded-lg px-5 py-2.5 font-medium">Войти</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 rounded-lg px-4 py-2 text-sm" type="submit"
+				>Создать</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}
+		<p class="text-text-muted">Альбомов пока нет. Создайте первый.</p>
+	{: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 text-4xl">🖼️</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}