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,86 @@
+<script lang="ts">
+	import { api } from '$lib/api';
+	import { auth } from '$lib/stores/auth.svelte';
+	import type { Comment } from '$lib/types';
+
+	interface Props {
+		photoId: string;
+	}
+
+	let { photoId }: Props = $props();
+
+	let comments = $state<Comment[]>([]);
+	let text = $state('');
+	let error = $state('');
+
+	async function load() {
+		try {
+			const data = await api<{ comments: Comment[] }>(`/photos/${photoId}/comments`);
+			comments = data.comments;
+		} catch (e) {
+			error = (e as Error).message;
+		}
+	}
+
+	$effect(() => {
+		photoId;
+		load();
+	});
+
+	async function submit(ev: Event) {
+		ev.preventDefault();
+		if (!text.trim()) return;
+		try {
+			const data = await api<{ comment: Comment }>(`/photos/${photoId}/comments`, {
+				method: 'POST',
+				body: { text }
+			});
+			comments = [...comments, data.comment];
+			text = '';
+		} catch (e) {
+			error = (e as Error).message;
+		}
+	}
+
+	async function remove(id: string) {
+		try {
+			await api(`/comments/${id}`, { method: 'DELETE' });
+			comments = comments.filter((c) => c.id !== id);
+		} catch (e) {
+			error = (e as Error).message;
+		}
+	}
+</script>
+
+<div class="mt-2">
+	{#each comments as comment (comment.id)}
+		<div class="border-border mb-1 flex items-start justify-between gap-2 border-b py-1 text-sm">
+			<span class="text-text">
+				<strong>{comment.user.name}</strong>: {comment.text}
+			</span>
+			{#if auth.user?.id === comment.user_id}
+				<button
+					type="button"
+					class="text-text-subtle hover:text-danger text-xs"
+					onclick={() => remove(comment.id)}>удалить</button
+				>
+			{/if}
+		</div>
+	{/each}
+
+	{#if auth.isAuthenticated}
+		<form class="mt-2 flex gap-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"
+			/>
+			<button class="bg-primary text-primary-fg rounded-lg px-3 py-1.5 text-sm" type="submit"
+				>Отправить</button
+			>
+		</form>
+	{/if}
+	{#if error}
+		<p class="text-danger mt-1 text-xs">{error}</p>
+	{/if}
+</div>