iu
2b2b342492
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.
92 lines
2.6 KiB
Svelte
92 lines
2.6 KiB
Svelte
<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}
|