feat: continuous reader mode with persisted preference
Add a vertical-scroll continuous mode to the reader alongside the existing single-page mode. A segmented toggle in the reader top bar switches between them; in continuous mode a gap selector (None/Small/Medium/Large → 0/12/32/64px) controls the spacing between stacked pages. Settings page mirrors the same controls. Backend: new user_preferences table (one row per user, lazily inserted, ON DELETE CASCADE) and GET/PATCH /api/v1/auth/me/preferences gated by the existing CurrentUser extractor. Allowed values are enforced both by API validation and table-level CHECK constraints. Eight integration tests cover defaults, persistence, partial updates, validation errors, auth, per-user isolation, and cascade. Frontend: a new preferences store mirrors the theme-store pattern with a localStorage shadow so anonymous browsers get a consistent experience and logged-in users don't flash defaults while the server response is in flight. Server values that the frontend doesn't recognize (forward-compat) are ignored rather than poisoning the UI; non-401 PATCH errors revert the optimistic local update; logout clears the shadow so user A's settings don't follow user B on a shared browser. In continuous mode native scrolling handles Space/PageDown/arrows; Home/End remain wired and call scrollIntoView() so jumping to chapter bounds stays one keystroke. Single-page mode (chevrons, arrow-key pagination, next-page preload) is unchanged. Versions bumped 0.13.0 → 0.14.0 in lockstep. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -2,6 +2,7 @@
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { logout } from '$lib/api/auth';
|
||||
import { preferences } from '$lib/preferences.svelte';
|
||||
import { session } from '$lib/session.svelte';
|
||||
import { theme } from '$lib/theme.svelte';
|
||||
import Upload from '@lucide/svelte/icons/upload';
|
||||
@@ -15,9 +16,17 @@
|
||||
|
||||
onMount(() => {
|
||||
theme.init();
|
||||
preferences.init();
|
||||
if (!session.loaded) session.refresh();
|
||||
});
|
||||
|
||||
// Pull fresh server preferences whenever the user changes (login,
|
||||
// logout, account switch). The store's seq guard keeps the most recent
|
||||
// response authoritative.
|
||||
$effect(() => {
|
||||
if (session.user) preferences.refresh();
|
||||
});
|
||||
|
||||
onDestroy(() => theme.destroy());
|
||||
|
||||
async function handleLogout() {
|
||||
@@ -26,6 +35,10 @@
|
||||
await logout();
|
||||
} finally {
|
||||
session.setUser(null);
|
||||
// Don't let user A's reader preferences linger for the next
|
||||
// person who uses this browser (or as guest state for the
|
||||
// same user). Resets state + localStorage.
|
||||
preferences.clearForLogout();
|
||||
loggingOut = false;
|
||||
goto('/login');
|
||||
}
|
||||
|
||||
@@ -1,16 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { fileUrl } from '$lib/api/client';
|
||||
import { GAP_PX, type ReaderPageGap } from '$lib/api/preferences';
|
||||
import { preferences } from '$lib/preferences.svelte';
|
||||
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
|
||||
import BookImage from '@lucide/svelte/icons/book-image';
|
||||
import FileText from '@lucide/svelte/icons/file-text';
|
||||
import ScrollText from '@lucide/svelte/icons/scroll-text';
|
||||
|
||||
let { data } = $props();
|
||||
const manga = $derived(data.manga);
|
||||
const chapter = $derived(data.chapter);
|
||||
const pages = $derived(data.pages);
|
||||
|
||||
const mode = $derived(preferences.readerMode);
|
||||
const gapPx = $derived(GAP_PX[preferences.readerPageGap]);
|
||||
|
||||
const pageTitle = $derived(
|
||||
chapter.title
|
||||
? `${manga.title} — Ch. ${chapter.number}: ${chapter.title}`
|
||||
@@ -18,6 +25,7 @@
|
||||
);
|
||||
|
||||
let index = $state(0);
|
||||
let continuousPageEls: HTMLImageElement[] = $state([]);
|
||||
|
||||
function next() {
|
||||
if (index < pages.length - 1) index += 1;
|
||||
@@ -36,6 +44,21 @@
|
||||
// Don't hijack keys while the user is typing in an input.
|
||||
const target = e.target as HTMLElement | null;
|
||||
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) return;
|
||||
// In continuous mode, native scrolling handles Space/PageDown/arrows;
|
||||
// we still wire Home/End to scrollIntoView so jumping to the chapter
|
||||
// bounds stays a one-keypress action.
|
||||
if (mode === 'continuous') {
|
||||
if (e.key === 'Home') {
|
||||
e.preventDefault();
|
||||
continuousPageEls[0]?.scrollIntoView({ block: 'start' });
|
||||
} else if (e.key === 'End') {
|
||||
e.preventDefault();
|
||||
continuousPageEls[continuousPageEls.length - 1]?.scrollIntoView({
|
||||
block: 'end'
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
// Space is deliberately *not* bound — on viewports where a page
|
||||
// image overflows (portrait phones, narrow desktop windows),
|
||||
// users expect Space to scroll the page, and stealing it for
|
||||
@@ -90,14 +113,65 @@
|
||||
{/if}
|
||||
<span class="back-text">{manga.title}</span>
|
||||
</a>
|
||||
|
||||
<div class="controls" role="group" aria-label="reader options">
|
||||
<div class="mode-toggle" role="radiogroup" aria-label="layout">
|
||||
<button
|
||||
type="button"
|
||||
class="seg"
|
||||
class:active={mode === 'single'}
|
||||
onclick={() => preferences.setMode('single')}
|
||||
aria-pressed={mode === 'single'}
|
||||
title="Single page"
|
||||
data-testid="reader-mode-single"
|
||||
>
|
||||
<FileText size={16} aria-hidden="true" />
|
||||
<span>Single</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="seg"
|
||||
class:active={mode === 'continuous'}
|
||||
onclick={() => preferences.setMode('continuous')}
|
||||
aria-pressed={mode === 'continuous'}
|
||||
title="Continuous (scroll)"
|
||||
data-testid="reader-mode-continuous"
|
||||
>
|
||||
<ScrollText size={16} aria-hidden="true" />
|
||||
<span>Continuous</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if mode === 'continuous'}
|
||||
<label class="gap-field">
|
||||
<span class="visually-hidden">Page gap</span>
|
||||
<select
|
||||
value={preferences.readerPageGap}
|
||||
onchange={(e) =>
|
||||
preferences.setGap((e.currentTarget as HTMLSelectElement).value as ReaderPageGap)}
|
||||
data-testid="reader-gap"
|
||||
>
|
||||
<option value="none">No gap</option>
|
||||
<option value="small">Small gap</option>
|
||||
<option value="medium">Medium gap</option>
|
||||
<option value="large">Large gap</option>
|
||||
</select>
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<span class="indicator" data-testid="page-indicator">
|
||||
Page {index + 1} / {pages.length}
|
||||
{#if mode === 'single'}
|
||||
Page {index + 1} / {pages.length}
|
||||
{:else}
|
||||
{pages.length} {pages.length === 1 ? 'page' : 'pages'}
|
||||
{/if}
|
||||
</span>
|
||||
</nav>
|
||||
|
||||
{#if pages.length === 0}
|
||||
<p class="empty" data-testid="reader-empty">This chapter has no pages yet.</p>
|
||||
{:else}
|
||||
{:else if mode === 'single'}
|
||||
<div class="page-wrap">
|
||||
<button
|
||||
type="button"
|
||||
@@ -142,6 +216,19 @@
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="continuous" style:gap="{gapPx}px" data-testid="reader-continuous">
|
||||
{#each pages as p, i (p.id)}
|
||||
<img
|
||||
src={fileUrl(p.storage_key)}
|
||||
alt={`${manga.title} chapter ${chapter.number} page ${i + 1}`}
|
||||
class="page-image"
|
||||
loading={i < 2 ? 'eager' : 'lazy'}
|
||||
data-testid={`reader-page-${i + 1}`}
|
||||
bind:this={continuousPageEls[i]}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
@@ -153,6 +240,7 @@
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: var(--space-3);
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.back {
|
||||
@@ -191,6 +279,76 @@
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mode-toggle {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.seg {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border: none;
|
||||
font-size: var(--font-sm);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background var(--transition),
|
||||
color var(--transition);
|
||||
}
|
||||
|
||||
.seg + .seg {
|
||||
border-left: 1px solid var(--border-strong);
|
||||
}
|
||||
|
||||
.seg:hover:not(.active) {
|
||||
background: var(--surface-elevated);
|
||||
}
|
||||
|
||||
.seg.active {
|
||||
background: var(--primary-soft-bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.seg:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.gap-field select {
|
||||
height: 32px;
|
||||
padding: 0 var(--space-2);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
@@ -208,6 +366,12 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.continuous {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-image {
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
@@ -216,6 +380,13 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.continuous .page-image {
|
||||
/* In continuous mode the user is scrolling — let each page take
|
||||
its natural height instead of capping at viewport height, so
|
||||
there are no scroll dead-zones inside a single page. */
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -255,5 +426,8 @@
|
||||
grid-column: 1;
|
||||
justify-self: center;
|
||||
}
|
||||
.seg span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,11 +2,26 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { changePassword } from '$lib/api/auth';
|
||||
import { ApiError } from '$lib/api/client';
|
||||
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);
|
||||
@@ -108,6 +123,55 @@
|
||||
</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="theme-picker">
|
||||
<legend>Layout</legend>
|
||||
{#each READER_MODES as opt (opt.value)}
|
||||
<label class="theme-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="theme-picker gap-picker">
|
||||
<legend>Page gap</legend>
|
||||
{#each READER_GAPS as opt (opt.value)}
|
||||
<label class="theme-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>
|
||||
|
||||
{#if !session.loaded}
|
||||
<p class="status" data-testid="settings-loading">Loading…</p>
|
||||
{:else if !session.user}
|
||||
@@ -238,6 +302,10 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gap-picker {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.theme-picker legend {
|
||||
font-size: var(--font-sm);
|
||||
color: var(--text);
|
||||
|
||||
Reference in New Issue
Block a user