feat(mangas): per-field sort options + direction toggle on the catalog (0.88.0)

Sort the manga catalog by created / updated / title / author with an
independent asc/desc direction control. An omitted `order` defaults per field
(dates newest-first, text A→Z), matching the UI, so a bare `?sort=<field>`
means the same thing in the browser and over the API; `sort=recent` remains a
back-compat alias for `created`.

- Backend: SortField/SortOrder parsed with validation (structured 422 on bad
  input), per-field default_order, NULLS LAST only on the nullable author key,
  and migration 0033 indexing mangas(updated_at DESC, id) to back the default
  sort and its id tie-break.
- Frontend: catalog sort field + direction (SegmentedControl) on desktop and a
  mobile bottom sheet; pure helpers in $lib/mangaSort; keyboard-accessible
  direction control; visible Direction labels and a sheet "Done" button.
- Tests: backend integration coverage (defaults, alias, invalid input,
  ascending-id tie-break), frontend unit + e2e.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/components/SegmentedControl.svelte.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, screen, cleanup } from '@testing-library/svelte';
+import { render, screen, cleanup, fireEvent } from '@testing-library/svelte';
 import SegmentedControl from './SegmentedControl.svelte';
 
 afterEach(() => cleanup());
@@ -50,4 +50,74 @@ describe('SegmentedControl', () => {
         });
         expect(screen.getByRole('radiogroup', { name: 'Library tab' })).toBeTruthy();
     });
+
+    it('gives the selected option a roving tabindex of 0 and the rest -1', () => {
+        render(SegmentedControl, {
+            props: { options: opts, value: 'collections', onchange: () => {}, ariaLabel: 'Library tab' }
+        });
+        expect(screen.getByRole('radio', { name: 'Collections' }).getAttribute('tabindex')).toBe('0');
+        expect(screen.getByRole('radio', { name: 'Bookmarks' }).getAttribute('tabindex')).toBe('-1');
+        expect(screen.getByRole('radio', { name: 'History' }).getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('selects the next option on ArrowRight/ArrowDown (selection follows focus)', async () => {
+        const onchange = vi.fn();
+        render(SegmentedControl, {
+            props: { options: opts, value: 'bookmarks', onchange, ariaLabel: 'Library tab' }
+        });
+        const group = screen.getByRole('radiogroup', { name: 'Library tab' });
+        const first = screen.getByRole('radio', { name: 'Bookmarks' });
+        first.focus();
+        await fireEvent.keyDown(group, { key: 'ArrowRight' });
+        expect(onchange).toHaveBeenCalledWith('collections');
+        onchange.mockClear();
+        // Re-anchor on the first option to assert ArrowDown behaves the same.
+        first.focus();
+        await fireEvent.keyDown(group, { key: 'ArrowDown' });
+        expect(onchange).toHaveBeenCalledWith('collections');
+    });
+
+    it('wraps from the first option to the last on ArrowLeft', async () => {
+        const onchange = vi.fn();
+        render(SegmentedControl, {
+            props: { options: opts, value: 'bookmarks', onchange, ariaLabel: 'Library tab' }
+        });
+        await fireEvent.keyDown(screen.getByRole('radiogroup', { name: 'Library tab' }), {
+            key: 'ArrowLeft'
+        });
+        expect(onchange).toHaveBeenCalledWith('history');
+    });
+
+    it('jumps to the first/last option with Home/End', async () => {
+        const onchange = vi.fn();
+        render(SegmentedControl, {
+            props: { options: opts, value: 'collections', onchange, ariaLabel: 'Library tab' }
+        });
+        const group = screen.getByRole('radiogroup', { name: 'Library tab' });
+        await fireEvent.keyDown(group, { key: 'Home' });
+        expect(onchange).toHaveBeenCalledWith('bookmarks');
+        onchange.mockClear();
+        await fireEvent.keyDown(group, { key: 'End' });
+        expect(onchange).toHaveBeenCalledWith('history');
+    });
+
+    // Navigation anchors on the focused button, not the (parent-controlled,
+    // lagging) `value` prop: even when `value` never updates, consecutive
+    // ArrowRights fired on the focused child advance step by step. This pins
+    // both the keydown-bubbles-from-child path and the no-stick behavior.
+    it('advances step by step on consecutive ArrowRights, following focus', async () => {
+        const onchange = vi.fn();
+        render(SegmentedControl, {
+            props: { options: opts, value: 'bookmarks', onchange, ariaLabel: 'Library tab' }
+        });
+        screen.getByRole('radio', { name: 'Bookmarks' }).focus();
+        await fireEvent.keyDown(document.activeElement as Element, { key: 'ArrowRight' });
+        expect(onchange).toHaveBeenLastCalledWith('collections');
+        expect((document.activeElement as HTMLElement).textContent?.trim()).toBe('Collections');
+        // `value` is still 'bookmarks' (vi.fn never feeds it back), yet the next
+        // press lands on the third option because it anchors on focus.
+        await fireEvent.keyDown(document.activeElement as Element, { key: 'ArrowRight' });
+        expect(onchange).toHaveBeenLastCalledWith('history');
+        expect((document.activeElement as HTMLElement).textContent?.trim()).toBe('History');
+    });
 });