Mangalord/frontend/src/routes/profile/preferences/+page.svelte

<script lang="ts">
    import type { ReaderMode, ReaderPageGap } from '$lib/api/preferences';
    import { preferences } from '$lib/preferences.svelte';
    import { session } from '$lib/session.svelte';
    import { theme, type Theme } from '$lib/theme.svelte';
    import Monitor from '@lucide/svelte/icons/monitor';
    import Sun from '@lucide/svelte/icons/sun';
    import Moon from '@lucide/svelte/icons/moon';
    import FileText from '@lucide/svelte/icons/file-text';
    import ScrollText from '@lucide/svelte/icons/scroll-text';

    const READER_MODES: { value: ReaderMode; label: string }[] = [
        { value: 'single', label: 'Single page' },
        { value: 'continuous', label: 'Continuous (scroll)' }
    ];
    const READER_GAPS: { value: ReaderPageGap; label: string }[] = [
        { value: 'none', label: 'None' },
        { value: 'small', label: 'Small' },
        { value: 'medium', label: 'Medium' },
        { value: 'large', label: 'Large' }
    ];

    function setTheme(next: Theme) {
        theme.set(next);
    }
</script>

<section class="card" aria-label="Appearance">
    <h2>Appearance</h2>
    <fieldset class="picker">
        <legend>Theme</legend>
        <label class="option" class:selected={theme.value === 'system'}>
            <input
                type="radio"
                name="theme"
                value="system"
                checked={theme.value === 'system'}
                onchange={() => setTheme('system')}
                data-testid="theme-radio-system"
            />
            <Monitor size={18} aria-hidden="true" />
            <span>System</span>
        </label>
        <label class="option" class:selected={theme.value === 'light'}>
            <input
                type="radio"
                name="theme"
                value="light"
                checked={theme.value === 'light'}
                onchange={() => setTheme('light')}
                data-testid="theme-radio-light"
            />
            <Sun size={18} aria-hidden="true" />
            <span>Light</span>
        </label>
        <label class="option" class:selected={theme.value === 'dark'}>
            <input
                type="radio"
                name="theme"
                value="dark"
                checked={theme.value === 'dark'}
                onchange={() => setTheme('dark')}
                data-testid="theme-radio-dark"
            />
            <Moon size={18} aria-hidden="true" />
            <span>Dark</span>
        </label>
    </fieldset>
</section>

<section class="card" aria-label="Reader">
    <h2>Reader</h2>
    {#if !session.user}
        <p class="hint" data-testid="reader-prefs-guest-hint">
            Sign in to sync these settings across devices. Until then they live in this browser.
        </p>
    {/if}
    <fieldset class="picker">
        <legend>Layout</legend>
        {#each READER_MODES as opt (opt.value)}
            <label class="option" class:selected={preferences.readerMode === opt.value}>
                <input
                    type="radio"
                    name="reader-mode"
                    value={opt.value}
                    checked={preferences.readerMode === opt.value}
                    onchange={() => preferences.setMode(opt.value)}
                    data-testid={`reader-mode-radio-${opt.value}`}
                />
                {#if opt.value === 'single'}
                    <FileText size={18} aria-hidden="true" />
                {:else}
                    <ScrollText size={18} aria-hidden="true" />
                {/if}
                <span>{opt.label}</span>
            </label>
        {/each}
    </fieldset>

    {#if preferences.readerMode === 'continuous'}
        <fieldset class="picker gap-picker">
            <legend>Page gap</legend>
            {#each READER_GAPS as opt (opt.value)}
                <label class="option" class:selected={preferences.readerPageGap === opt.value}>
                    <input
                        type="radio"
                        name="reader-gap"
                        value={opt.value}
                        checked={preferences.readerPageGap === opt.value}
                        onchange={() => preferences.setGap(opt.value)}
                        data-testid={`reader-gap-radio-${opt.value}`}
                    />
                    <span>{opt.label}</span>
                </label>
            {/each}
        </fieldset>
    {/if}
</section>

<style>
    .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        max-width: 32rem;
        margin-bottom: var(--space-4);
    }

    .hint {
        color: var(--text-muted);
        font-size: var(--font-sm);
    }

    .picker {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        border: none;
        padding: 0;
        margin: 0;
    }

    .gap-picker {
        margin-top: var(--space-3);
    }

    .picker legend {
        font-size: var(--font-sm);
        color: var(--text);
        padding: 0;
        margin-bottom: var(--space-2);
    }

    .option {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface);
        color: var(--text);
        font-size: var(--font-sm);
        cursor: pointer;
        transition:
            background var(--transition),
            border-color var(--transition);
    }

    .option:hover {
        background: var(--surface-elevated);
    }

    .option input[type='radio'] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
    }

    .option.selected {
        background: var(--primary-soft-bg);
        border-color: var(--primary);
        color: var(--text);
    }

    .option:has(input:focus-visible) {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
</style>