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

@@ -17,14 +17,69 @@
         ariaLabel: string;
         testid?: string;
     } = $props();
+
+    // Roving-tabindex refs so arrow keys can move focus across the group.
+    let buttons = $state<HTMLButtonElement[]>([]);
+
+    function select(index: number) {
+        const opt = options[index];
+        if (!opt) return;
+        if (opt.value !== value) onchange(opt.value);
+        // Selection follows focus, per the WAI-ARIA radiogroup pattern.
+        buttons[index]?.focus();
+    }
+
+    // ArrowLeft/Up and ArrowRight/Down move (and wrap) through the options;
+    // Home/End jump to the ends. Without this a control announced as a
+    // `radiogroup` would not respond to the keys AT users expect.
+    function onkeydown(event: KeyboardEvent) {
+        // Navigate relative to the focused button, not the selected `value`:
+        // this control is parent-controlled, so `value` only updates after a
+        // re-render — anchoring on focus keeps rapid keypresses from sticking.
+        // Falls back to `value` when focus is elsewhere (e.g. event delegated
+        // from outside a child, as in unit tests).
+        const focused = buttons.findIndex((b) => b === document.activeElement);
+        const current = focused >= 0 ? focused : options.findIndex((o) => o.value === value);
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                select((current + 1) % options.length);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                select((current - 1 + options.length) % options.length);
+                break;
+            case 'Home':
+                event.preventDefault();
+                select(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                select(options.length - 1);
+                break;
+        }
+    }
 </script>
 
-<div class="segmented" role="radiogroup" aria-label={ariaLabel} data-testid={testid}>
-    {#each options as opt (opt.value)}
+<!-- Keydown is delegated here; focus lives on the child radios via roving
+     tabindex, so the group itself is intentionally not a focus target. -->
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<div
+    class="segmented"
+    role="radiogroup"
+    aria-label={ariaLabel}
+    data-testid={testid}
+    {onkeydown}
+>
+    {#each options as opt, i (opt.value)}
         <button
+            bind:this={buttons[i]}
             type="button"
             role="radio"
             aria-checked={opt.value === value}
+            tabindex={opt.value === value ? 0 : -1}
             class="seg"
             class:active={opt.value === value}
             onclick={() => {