ds-galo/frontend/src/routes/(app)/albums/[id]/+page.svelte

<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"
		>
			<div class="flex min-w-0 items-center gap-1">
				<a
					href="/"
					class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex shrink-0 items-center justify-center rounded-md p-1.5"
					aria-label="Ко всем альбомам"
					title="Ко всем альбомам"
				>
					<Icon name="arrow_back" class="size-5" />
				</a>
				<h1 class="text-text truncate text-sm font-medium">{album?.title ?? ''}</h1>
			</div>
			<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}