cards/apps/web/src/lib/components/marketplace/DiscussionThread.svelte

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

	import {
		hideDiscussion,
		listDiscussions,
		postDiscussion,
		type Discussion,
	} from '$lib/api/marketplace.ts';
	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
	import { toasts } from '$lib/stores/toasts.svelte.ts';

	interface Props {
		deckSlug: string;
		cardContentHash: string;
		ownerUserId?: string;
	}

	const { deckSlug, cardContentHash, ownerUserId }: Props = $props();

	let comments = $state<Discussion[]>([]);
	let loading = $state(true);
	let newBody = $state('');
	let replyToId = $state<string | null>(null);
	let posting = $state(false);

	const myUserId = $derived(devUser.id);
	const canHideAny = $derived(myUserId === ownerUserId);

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

	async function refresh() {
		loading = true;
		try {
			const result = await listDiscussions(cardContentHash);
			comments = result.discussions;
		} catch (e) {
			toasts.error(`Discussions laden fehlgeschlagen: ${(e as Error).message}`);
		} finally {
			loading = false;
		}
	}

	async function onPost(event: SubmitEvent) {
		event.preventDefault();
		if (!newBody.trim() || posting) return;
		posting = true;
		try {
			await postDiscussion(deckSlug, cardContentHash, newBody.trim(), replyToId ?? undefined);
			newBody = '';
			replyToId = null;
			await refresh();
		} catch (e) {
			toasts.error((e as Error).message);
		} finally {
			posting = false;
		}
	}

	async function onHide(id: string) {
		if (!confirm('Comment verstecken?')) return;
		try {
			await hideDiscussion(id);
			await refresh();
		} catch (e) {
			toasts.error((e as Error).message);
		}
	}

	function canHide(comment: Discussion): boolean {
		return canHideAny || comment.author_user_id === myUserId;
	}
</script>

<div class="space-y-3">
	<h4 class="text-sm font-medium">💬 Diskussion zur Karte</h4>

	{#if loading}
		<p class="text-xs text-[hsl(var(--color-muted-foreground))]">Lade…</p>
	{:else if comments.length === 0}
		<p class="text-xs text-[hsl(var(--color-muted-foreground))]">Noch keine Kommentare.</p>
	{:else}
		<ul class="space-y-2">
			{#each comments as comment (comment.id)}
				<li
					class="rounded border border-[hsl(var(--color-border))] p-3 text-sm"
					class:ml-6={comment.parent_id !== null}
				>
					<div class="flex items-start justify-between gap-2">
						<div class="flex-1 whitespace-pre-wrap">{comment.body}</div>
						{#if canHide(comment)}
							<button
								type="button"
								class="text-xs text-[hsl(var(--color-muted-foreground))] hover:text-[hsl(var(--color-error))]"
								onclick={() => onHide(comment.id)}
								title="Verstecken"
							>
								🙈
							</button>
						{/if}
					</div>
					<div class="mt-2 flex items-center gap-2 text-xs text-[hsl(var(--color-muted-foreground))]">
						<span>{new Date(comment.created_at).toLocaleString()}</span>
						{#if myUserId && replyToId !== comment.id}
							<button
								type="button"
								class="hover:text-[hsl(var(--color-primary))]"
								onclick={() => (replyToId = comment.id)}
							>
								Antworten
							</button>
						{/if}
					</div>
				</li>
			{/each}
		</ul>
	{/if}

	{#if myUserId}
		<form class="space-y-2" onsubmit={onPost}>
			{#if replyToId}
				<p class="text-xs text-[hsl(var(--color-muted-foreground))]">
					↪ Antwort auf einen Kommentar.
					<button
						type="button"
						class="hover:underline"
						onclick={() => (replyToId = null)}
					>
						Abbrechen
					</button>
				</p>
			{/if}
			<textarea
				bind:value={newBody}
				rows="2"
				maxlength="2000"
				placeholder="Kommentar / Frage / Korrekturhinweis"
				class="block w-full rounded border bg-[hsl(var(--color-card))] border-[hsl(var(--color-border))] px-3 py-2 text-sm"
			></textarea>
			<button
				type="submit"
				disabled={posting || !newBody.trim()}
				class="rounded bg-[hsl(var(--color-primary))] px-3 py-1 text-xs text-[hsl(var(--color-primary-foreground))] disabled:opacity-50"
			>
				{posting ? 'Posten…' : 'Posten'}
			</button>
		</form>
	{:else}
		<p class="text-xs text-[hsl(var(--color-muted-foreground))]">
			<a href="/" class="text-[hsl(var(--color-primary))] hover:underline">Anmelden</a>, um zu kommentieren.
		</p>
	{/if}
</div>