cards/apps/web/src/routes/u/[slug]/+page.svelte

<script lang="ts">
	import { onMount } from 'svelte';

	import { page } from '$app/state';

	import {
		browseDecks,
		followAuthor,
		getAuthor,
		getFollowState,
		unfollowAuthor,
		type DeckListEntry,
		type MarketplaceAuthor,
	} from '$lib/api/marketplace.ts';
	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
	import DeckListGrid from '$lib/components/marketplace/DeckListGrid.svelte';
	import { toasts } from '$lib/stores/toasts.svelte.ts';

	const slug = $derived(page.params.slug ?? '');

	let author = $state<MarketplaceAuthor | null>(null);
	let decks = $state<DeckListEntry[]>([]);
	let following = $state(false);
	let loading = $state(true);
	let busy = $state(false);

	const myUserId = $derived(devUser.id);

	onMount(() => {
		void load();
	});

	async function load() {
		loading = true;
		try {
			const [a, d, follow] = await Promise.all([
				getAuthor(slug),
				browseDecks({ author: slug, sort: 'recent', limit: 50 }),
				myUserId
					? getFollowState(slug).catch(() => ({ following: false }))
					: Promise.resolve({ following: false }),
			]);
			author = a;
			decks = d.items;
			following = follow.following;
		} catch (e) {
			toasts.error(`Author laden fehlgeschlagen: ${(e as Error).message}`);
		} finally {
			loading = false;
		}
	}

	async function toggleFollow() {
		if (!myUserId) {
			toasts.error('Bitte einloggen.');
			return;
		}
		busy = true;
		try {
			if (following) {
				await unfollowAuthor(slug);
				following = false;
			} else {
				await followAuthor(slug);
				following = true;
			}
		} catch (e) {
			toasts.error((e as Error).message);
		} finally {
			busy = false;
		}
	}
</script>

<svelte:head>
	<title>{author?.display_name ?? slug} · Cardecky</title>
</svelte:head>

{#if loading}
	<p class="text-sm text-[hsl(var(--color-muted-foreground))]">Lade…</p>
{:else if !author}
	<p>Author nicht gefunden.</p>
{:else}
	<div class="mx-auto max-w-4xl space-y-8">
		<a href="/explore" class="text-xs text-[hsl(var(--color-muted-foreground))] hover:underline">
			← zurück zur Library
		</a>

		<header class="space-y-2">
			<div class="flex flex-wrap items-center gap-3">
				<h1 class="text-3xl font-semibold">{author.display_name}</h1>
				{#if author.verified_mana}
					<span
						class="rounded bg-[hsl(var(--color-primary))]/15 px-2 py-1 text-xs text-[hsl(var(--color-primary))]"
						title="Vom Verein verifiziert"
					>
						🛡️ Mana Verifiziert
					</span>
				{/if}
				{#if author.verified_community}
					<span
						class="rounded bg-[hsl(var(--color-primary))]/10 px-2 py-1 text-xs"
						title="Aus der Community heraus verifiziert"
					>
						⭐ Community Verifiziert
					</span>
				{/if}
				{#if author.banned}
					<span
						class="rounded bg-[hsl(var(--color-error))]/15 px-2 py-1 text-xs text-[hsl(var(--color-error))]"
					>
						Gesperrt
					</span>
				{/if}
			</div>

			<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
				@{author.slug}
				· seit {new Date(author.joined_at).toLocaleDateString()}
				{#if author.pseudonym}
					· Pseudonym
				{/if}
			</p>

			{#if author.bio}
				<p class="text-sm">{author.bio}</p>
			{/if}

			{#if myUserId}
				<button
					type="button"
					class="rounded border border-[hsl(var(--color-border))] px-3 py-1 text-sm hover:bg-[hsl(var(--color-card))]"
					onclick={toggleFollow}
					disabled={busy}
				>
					{following ? '✓ Folge' : '+ Folgen'}
				</button>
			{/if}
		</header>

		<section>
			<h2 class="mb-3 text-xl font-semibold">Decks ({decks.length})</h2>
			<DeckListGrid items={decks} emptyMessage="Noch keine Decks veröffentlicht." />
		</section>
	</div>
{/if}