Phase 9c: Inbox-Banner auf /decks und /study

InboxBanner.svelte zeigt einen klickbaren Hinweis, wenn der User
ein Inbox-Deck hat und es Karten enthält. Linkt aufs Inbox-Deck,
wo die Karten in andere Decks umsortiert werden können.

API-Pfad bleibt schmal: kein neuer Endpunkt — die Komponente
nutzt listDecks() + listCards(inbox.id) und filtert clientseitig
auf name === "Inbox" (der stabile API-Konstantenname). Wenn das
später Hot-Path wird, ist GET /api/v1/inbox/stats ein additiver
Fix.

svelte-check 356 files 0 errors.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-05-08 17:54:19 +02:00
parent 35366ed4f2
commit 47419b3cac
4 changed files with 63 additions and 0 deletions

View file

@ -0,0 +1,30 @@
<script lang="ts">
import { onMount } from 'svelte';
import { loadInboxStats, type InboxStats } from '$lib/api/inbox.ts';
let stats = $state<InboxStats | null>(null);
onMount(async () => {
try {
stats = await loadInboxStats();
} catch {
// Inbox ist optional — Fehler still verschlucken, Banner bleibt weg.
stats = null;
}
});
</script>
{#if stats && stats.deck && stats.cardCount > 0}
<a
href="/decks/{stats.deck.id}"
class="block rounded-lg border border-[var(--color-primary)]/40 bg-[var(--color-primary)]/10 px-4 py-3 text-sm hover:bg-[var(--color-primary)]/15"
>
<span class="font-medium">📥 Inbox</span>
<span class="text-[var(--color-muted)]">·</span>
<span>
{stats.cardCount} eingegangene
{stats.cardCount === 1 ? 'Karte' : 'Karten'} aus anderen Apps
</span>
<span class="ml-1 text-[var(--color-muted)]">— sortieren →</span>
</a>
{/if}