Mangalord/frontend/src/routes/collections/+page.svelte

<script lang="ts">
    import CollectionsGrid from '$lib/components/CollectionsGrid.svelte';

    let { data } = $props();
    const collections = $derived(data.collections);
</script>

<svelte:head>
    <title>Collections — Mangalord</title>
</svelte:head>

<h1>Collections</h1>

{#if !data.authenticated}
    <p class="status">
        <a href="/login">Sign in</a> to see and manage your collections.
    </p>
{:else if data.error}
    <p class="error" role="alert">{data.error}</p>
{:else if collections.length === 0}
    <p class="status" data-testid="collections-empty">
        You don't have any collections yet. Open any manga and use
        <strong>Add to collection</strong> to start one.
    </p>
{:else}
    <CollectionsGrid {collections} />
{/if}

<style>
    .status {
        color: var(--text-muted);
    }

    .error {
        color: var(--danger);
    }
</style>