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
2026-05-17 13:15:03 +02:00
parent 567d56bfa1
commit 60cc7712fa
18 changed files with 1287 additions and 6 deletions

View File

@@ -0,0 +1,98 @@
import {
describe,
it,
expect,
vi,
beforeEach,
afterEach,
type MockInstance
} from 'vitest';
import { getPreferences, updatePreferences, GAP_PX } from './preferences';
function ok(body: unknown, status = 200): Response {
return new Response(JSON.stringify(body), {
status,
headers: { 'content-type': 'application/json' }
});
}
function envelope(status: number, code: string, message: string): Response {
return new Response(JSON.stringify({ error: { code, message } }), {
status,
headers: { 'content-type': 'application/json' }
});
}
const prefsFixture = {
reader_mode: 'continuous' as const,
reader_page_gap: 'medium' as const,
updated_at: '2026-05-17T12:00:00Z'
};
describe('preferences api client', () => {
let fetchSpy: MockInstance<typeof globalThis.fetch>;
beforeEach(() => {
fetchSpy = vi.spyOn(globalThis, 'fetch');
});
afterEach(() => {
vi.restoreAllMocks();
});
it('GAP_PX exposes the four named options with increasing values', () => {
expect(GAP_PX.none).toBe(0);
expect(GAP_PX.small).toBeGreaterThan(GAP_PX.none);
expect(GAP_PX.medium).toBeGreaterThan(GAP_PX.small);
expect(GAP_PX.large).toBeGreaterThan(GAP_PX.medium);
});
it('getPreferences GETs /v1/auth/me/preferences and returns the row', async () => {
fetchSpy.mockResolvedValueOnce(ok(prefsFixture));
await expect(getPreferences()).resolves.toEqual(prefsFixture);
const url = fetchSpy.mock.calls[0][0] as string;
expect(url).toMatch(/\/v1\/auth\/me\/preferences$/);
});
it('getPreferences returns null on 401 (anonymous browsing)', async () => {
fetchSpy.mockResolvedValueOnce(envelope(401, 'unauthenticated', 'unauthenticated'));
await expect(getPreferences()).resolves.toBeNull();
});
it('getPreferences re-throws non-401 errors', async () => {
fetchSpy.mockResolvedValueOnce(envelope(500, 'internal_error', 'boom'));
await expect(getPreferences()).rejects.toMatchObject({ status: 500 });
});
it('updatePreferences PATCHes JSON and returns the new row', async () => {
fetchSpy.mockResolvedValueOnce(ok(prefsFixture));
const r = await updatePreferences({
reader_mode: 'continuous',
reader_page_gap: 'medium'
});
expect(r).toEqual(prefsFixture);
const url = fetchSpy.mock.calls[0][0] as string;
expect(url).toMatch(/\/v1\/auth\/me\/preferences$/);
const init = fetchSpy.mock.calls[0][1] as RequestInit;
expect(init.method).toBe('PATCH');
expect(JSON.parse(init.body as string)).toEqual({
reader_mode: 'continuous',
reader_page_gap: 'medium'
});
});
it('updatePreferences sends only the keys it was given (partial)', async () => {
fetchSpy.mockResolvedValueOnce(ok(prefsFixture));
await updatePreferences({ reader_mode: 'single' });
const init = fetchSpy.mock.calls[0][1] as RequestInit;
expect(JSON.parse(init.body as string)).toEqual({ reader_mode: 'single' });
});
it('updatePreferences surfaces 400 invalid_input via ApiError', async () => {
fetchSpy.mockResolvedValueOnce(
envelope(400, 'invalid_input', 'reader_mode must be one of ...')
);
await expect(
updatePreferences({ reader_mode: 'continuous' })
).rejects.toMatchObject({ status: 400, code: 'invalid_input' });
});
});

View File

@@ -0,0 +1,50 @@
import { ApiError, request } from './client';
export type ReaderMode = 'single' | 'continuous';
export type ReaderPageGap = 'none' | 'small' | 'medium' | 'large';
export type Preferences = {
reader_mode: ReaderMode;
reader_page_gap: ReaderPageGap;
updated_at: string;
};
/**
* Maps a named gap option to a CSS pixel value. Centralised here so the
* settings UI, the reader, and any future surfaces all show the same
* spacing.
*/
export const GAP_PX: Record<ReaderPageGap, number> = {
none: 0,
small: 12,
medium: 32,
large: 64
};
/**
* Returns the current user's stored reader preferences, or `null` if there
* is no valid session. Anything other than 401 is re-thrown so the caller
* can surface real errors.
*/
export async function getPreferences(): Promise<Preferences | null> {
try {
return await request<Preferences>('/v1/auth/me/preferences');
} catch (e) {
if (e instanceof ApiError && e.status === 401) return null;
throw e;
}
}
/**
* Partially updates the user's reader preferences. Unspecified fields are
* left unchanged on the server.
*/
export async function updatePreferences(
patch: Partial<Pick<Preferences, 'reader_mode' | 'reader_page_gap'>>
): Promise<Preferences> {
return request<Preferences>('/v1/auth/me/preferences', {
method: 'PATCH',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(patch)
});
}