feat(cards): Phase ε.4 — Card list + discussions on /d/<slug>

- DiscussionService.countsForDeck: bulk count (visible) comments per
  card-content-hash for one deck. Mounted at GET
  /v1/decks/:slug/discussion-counts so the public deck page can
  render comment badges without N+1 fetches.
- <DeckCardList> on /d/<slug>: lists the latest version's cards,
  renders a one-line preview + "💬 N" badge, and expands the
  inline <CardDiscussions> on click. Anonymous visitors see counts;
  posting requires auth (CardDiscussions already gates that).

apps/cards/apps/web/src/lib/api/cards-api.ts

@@ -241,6 +241,11 @@ export const cardsApi = {
 			request<{ ok: true }>(`/v1/pull-requests/${id}/reject`, { method: 'POST' }),
 	},
 	discussions: {
+		countsForDeck: (deckSlug: string) =>
+			request<Record<string, number>>(
+				`/v1/decks/${encodeURIComponent(deckSlug)}/discussion-counts`,
+				{ auth: 'optional' }
+			),
 		listForCard: (contentHash: string) =>
 			request<CardDiscussion[]>(`/v1/cards/${encodeURIComponent(contentHash)}/discussions`, {
 				auth: 'optional',

apps/cards/apps/web/src/lib/components/DeckCardList.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { cardsApi, CardsApiError, type ServerCard } from '$lib/api/cards-api';
+	import CardDiscussions from './CardDiscussions.svelte';
+
+	interface Props {
+		deckSlug: string;
+		semver: string;
+	}
+
+	let { deckSlug, semver }: Props = $props();
+
+	let cards = $state<ServerCard[]>([]);
+	let counts = $state<Record<string, number>>({});
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let openHash = $state<string | null>(null);
+
+	onMount(load);
+
+	async function load() {
+		loading = true;
+		error = null;
+		try {
+			const [version, c] = await Promise.all([
+				cardsApi.subscriptions.version(deckSlug, semver),
+				cardsApi.discussions.countsForDeck(deckSlug),
+			]);
+			cards = version.cards;
+			counts = c;
+		} catch (e) {
+			error = e instanceof CardsApiError ? e.message : (e as Error).message;
+		} finally {
+			loading = false;
+		}
+	}
+
+	function preview(card: ServerCard): string {
+		// Best-effort one-liner: prefer "front" field, then any first non-empty.
+		const front = card.fields.front ?? card.fields.text ?? '';
+		if (front) return stripTags(front).slice(0, 140);
+		const first = Object.values(card.fields).find((v) => v && v.trim());
+		return first ? stripTags(first).slice(0, 140) : `(${card.type})`;
+	}
+
+	function stripTags(s: string): string {
+		return s
+			.replace(/<[^>]+>/g, ' ')
+			.replace(/\s+/g, ' ')
+			.trim();
+	}
+</script>
+
+<section class="mt-10">
+	<header class="mb-3 flex items-center justify-between">
+		<h2 class="text-sm font-semibold uppercase tracking-wide text-neutral-400">
+			Karten {cards.length > 0 ? `(${cards.length})` : ''}
+		</h2>
+		{#if loading}
+			<span class="text-xs text-neutral-600">Lädt…</span>
+		{/if}
+	</header>
+
+	{#if error}
+		<p class="mb-3 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-400">
+			{error}
+		</p>
+	{:else if cards.length === 0 && !loading}
+		<p class="rounded-xl border border-neutral-800 bg-neutral-900 p-4 text-sm text-neutral-500">
+			Diese Version enthält keine Karten.
+		</p>
+	{:else}
+		<ul class="space-y-2">
+			{#each cards as c (c.contentHash)}
+				{@const n = counts[c.contentHash] ?? 0}
+				{@const isOpen = openHash === c.contentHash}
+				<li class="rounded-xl border border-neutral-800 bg-neutral-900 p-3">
+					<button
+						class="flex w-full items-center justify-between gap-3 text-left"
+						onclick={() => (openHash = isOpen ? null : c.contentHash)}
+					>
+						<div class="min-w-0 flex-1">
+							<div class="text-xs uppercase tracking-wide text-neutral-500">
+								#{c.ord + 1} · {c.type}
+							</div>
+							<div class="mt-1 truncate text-sm text-neutral-200">{preview(c)}</div>
+						</div>
+						<div class="shrink-0 text-xs text-neutral-500">
+							{#if n > 0}
+								💬 {n}
+							{:else}
+								💬
+							{/if}
+						</div>
+					</button>
+
+					{#if isOpen}
+						<CardDiscussions contentHash={c.contentHash} {deckSlug} />
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</section>

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

@@ -11,6 +11,7 @@
 	import { isSubscribedLocally, subscribeAndPull, unsubscribe } from '$lib/services/subscribe';
 	import { cardDeckTable } from '$lib/data/database';
 	import PullRequestsSection from '$lib/components/PullRequestsSection.svelte';
+	import DeckCardList from '$lib/components/DeckCardList.svelte';
 
 	const slug = $derived(page.params.slug as string);
 
@@ -204,6 +205,10 @@
 				Veröffentlicht: {new Date(deck.createdAt).toLocaleDateString('de-DE')}
 			</p>
 
+			{#if version}
+				<DeckCardList deckSlug={deck.slug} semver={version.semver} />
+			{/if}
+
 			<PullRequestsSection deckSlug={deck.slug} ownerUserId={deck.ownerUserId} onMerged={load} />
 		</article>
 	{/if}

services/cards-server/src/routes/discussions.ts

@@ -23,6 +23,11 @@ export function createDiscussionRoutes(service: DiscussionService) {
 		return c.json(list);
 	});
 
+	router.get('/decks/:slug/discussion-counts', async (c) => {
+		const counts = await service.countsForDeck(c.req.param('slug'));
+		return c.json(counts);
+	});
+
 	router.post('/cards/:contentHash/discussions', async (c) => {
 		const user = requireUser(c.get('user'));
 		const parsed = postSchema.safeParse(await c.req.json().catch(() => ({})));

services/cards-server/src/services/discussions.ts

@@ -9,7 +9,7 @@
  * if we want full nesting later it's already there.
  */
 
-import { and, asc, eq } from 'drizzle-orm';
+import { and, asc, eq, sql } from 'drizzle-orm';
 import type { Database } from '../db/connection';
 import { cardDiscussions, publicDecks } from '../db/schema';
 import { ForbiddenError, NotFoundError } from '../lib/errors';
@@ -52,6 +52,31 @@ export class DiscussionService {
 		return row;
 	}
 
+	/**
+	 * Bulk count of (visible) comments per card-content-hash for one
+	 * deck — powers the "Karten" overview on the public deck page so
+	 * we don't fan out one request per card.
+	 */
+	async countsForDeck(deckSlug: string): Promise<Record<string, number>> {
+		const deck = await this.db.query.publicDecks.findFirst({
+			where: eq(publicDecks.slug, deckSlug),
+		});
+		if (!deck) throw new NotFoundError('Deck not found');
+
+		const rows = await this.db
+			.select({
+				contentHash: cardDiscussions.cardContentHash,
+				count: sql<number>`count(*)::int`.as('count'),
+			})
+			.from(cardDiscussions)
+			.where(and(eq(cardDiscussions.deckId, deck.id), eq(cardDiscussions.hidden, false)))
+			.groupBy(cardDiscussions.cardContentHash);
+
+		const out: Record<string, number> = {};
+		for (const r of rows) out[r.contentHash] = r.count;
+		return out;
+	}
+
 	async listForCard(cardContentHash: string) {
 		const rows = await this.db
 			.select()