Mangalord/frontend/src/routes/manga/[id]/upload-chapter/+page.svelte

<script lang="ts">
    import { goto } from '$app/navigation';
    import { ApiError, fileUrl } from '$lib/api/client';
    import { createChapter } from '$lib/api/chapters';
    import { session } from '$lib/session.svelte';
    import ChapterPagesEditor, {
        type PendingPage
    } from '$lib/components/ChapterPagesEditor.svelte';
    import ArrowLeft from '@lucide/svelte/icons/arrow-left';
    import BookImage from '@lucide/svelte/icons/book-image';

    let { data } = $props();
    const manga = $derived(data.manga);

    // svelte-ignore state_referenced_locally
    let number = $state<number | null>(data.defaultNumber);
    let title = $state('');
    let pages = $state<PendingPage[]>([]);
    let submitting = $state(false);
    let error: string | null = $state(null);

    const allPagesValid = $derived(pages.every((p) => !p.error));
    const canSubmit = $derived(
        Boolean(session.user) &&
            number != null &&
            number >= 1 &&
            pages.length > 0 &&
            allPagesValid &&
            !submitting
    );

    async function submit(e: SubmitEvent) {
        e.preventDefault();
        if (!canSubmit || number == null) return;
        submitting = true;
        error = null;
        try {
            const created = await createChapter(
                manga.id,
                { number, title: title.trim() || null },
                pages.map((p) => p.file)
            );
            // Land on the chapter list — the new chapter is at the
            // bottom in chapter-number order; uploader-friendly.
            await goto(`/manga/${manga.id}`);
            void created;
        } catch (e) {
            if (e instanceof ApiError && e.status === 401) {
                await goto(`/login?next=/manga/${manga.id}/upload-chapter`);
                return;
            }
            error = e instanceof Error ? e.message : String(e);
        } finally {
            submitting = false;
        }
    }
</script>

<svelte:head>
    <title>Mangalord | Upload chapter · {manga.title}</title>
</svelte:head>

<nav class="back">
    <a href="/manga/{manga.id}" class="back-link">
        <ArrowLeft size={16} aria-hidden="true" />
        <span>Back to {manga.title}</span>
    </a>
</nav>

<header class="header">
    <div class="cover">
        {#if manga.cover_image_path}
            <img
                src={fileUrl(manga.cover_image_path)}
                alt=""
                class="cover-img"
                loading="lazy"
            />
        {:else}
            <span class="cover-placeholder" aria-hidden="true">
                <BookImage size={22} aria-hidden="true" />
            </span>
        {/if}
    </div>
    <div>
        <h1>Upload chapter</h1>
        <p class="subtitle">to <strong>{manga.title}</strong></p>
    </div>
</header>

{#if !session.loaded}
    <p class="status">Loading…</p>
{:else if !session.user}
    <p class="status">
        <a href="/login?next=/manga/{manga.id}/upload-chapter">Sign in</a>
        to upload chapters.
    </p>
{:else}
    <form
        class="card"
        onsubmit={submit}
        action="javascript:void(0)"
        data-testid="upload-chapter-form"
    >
        <label class="form-field">
            <span>Chapter number <span aria-hidden="true">*</span></span>
            <input
                type="number"
                min="1"
                step="1"
                bind:value={number}
                required
                data-testid="chapter-number"
            />
        </label>
        <label class="form-field">
            <span>Title (optional)</span>
            <input
                type="text"
                bind:value={title}
                maxlength="200"
                data-testid="chapter-title"
            />
        </label>

        <ChapterPagesEditor bind:pages />

        <button
            class="primary"
            type="submit"
            disabled={!canSubmit}
            data-testid="chapter-submit"
        >
            {submitting ? 'Uploading…' : 'Upload chapter'}
        </button>
        {#if error}
            <p role="alert" class="form-error" data-testid="chapter-error">{error}</p>
        {/if}
    </form>
{/if}

<style>
    .back {
        margin-bottom: var(--space-3);
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--text-muted);
        font-size: var(--font-sm);
    }

    .header {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .cover {
        flex-shrink: 0;
    }

    .cover-img {
        width: 48px;
        height: 72px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        background: var(--surface);
    }

    .cover-placeholder {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 72px;
        background: var(--surface);
        color: var(--text-muted);
        border-radius: var(--radius-sm);
    }

    h1 {
        margin: 0 0 var(--space-1);
    }

    .subtitle {
        color: var(--text-muted);
        margin: 0;
    }

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

    .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .primary {
        background: var(--primary);
        color: var(--primary-contrast);
        border-color: var(--primary);
        align-self: flex-start;
    }

    .primary:hover:not(:disabled) {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }

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