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

Replace the two-option `ListSort` enum with an orthogonal sort field
(created/updated/title/author, default updated) and direction
(asc/desc, default desc). The catalog now defaults to last-updated-first
and lets the user order by any field in either direction.

Backend builds ORDER BY from the enums only (no injection seam), with a
NULLS-LAST author subquery and a stable id tie-break. Frontend adds a
direction toggle with per-field defaults (dates desc, text asc) and
labels (Newest/Oldest vs A->Z/Z->A), reusing SegmentedControl; URL state
omits the per-field defaults and validates on hydrate.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/routes/+page.svelte

@@ -7,6 +7,7 @@
         listMangas,
         type MangaCard as MangaCardData,
         type MangaSort,
+        type SortOrder,
         type MangaStatus
     } from '$lib/api/mangas';
     import { listGenres, type Genre } from '$lib/api/genres';
@@ -14,6 +15,7 @@
     import Chip from '$lib/components/Chip.svelte';
     import MangaCard from '$lib/components/MangaCard.svelte';
     import Pager from '$lib/components/Pager.svelte';
+    import SegmentedControl from '$lib/components/SegmentedControl.svelte';
     import Sheet from '$lib/components/Sheet.svelte';
     import Search from '@lucide/svelte/icons/search';
     import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
@@ -25,7 +27,8 @@
 
     let mangas: MangaCardData[] = $state([]);
     let search = $state('');
-    let sort = $state<MangaSort>('recent');
+    let sort = $state<MangaSort>('updated');
+    let order = $state<SortOrder>('desc');
     let statusFilter = $state<'' | MangaStatus>('');
     let selectedGenres = $state<Genre[]>([]);
     let selectedTags = $state<Tag[]>([]);
@@ -55,7 +58,37 @@
         (statusFilter ? 1 : 0) + selectedGenres.length + selectedTags.length
     );
 
-    const sortLabel = $derived(sort === 'title' ? 'Title (A→Z)' : 'Recent');
+    // Date fields read most-useful newest-first; text fields A→Z. The
+    // direction stays freely togglable — this only picks the default applied
+    // when the field changes, and labels the toggle so "descending" reads as
+    // "Newest" for dates and "Z→A" for text.
+    const isTextField = (f: MangaSort) => f === 'title' || f === 'author';
+    const defaultOrderFor = (f: MangaSort): SortOrder => (isTextField(f) ? 'asc' : 'desc');
+
+    const SORT_FIELD_LABELS: Record<MangaSort, string> = {
+        updated: 'Last updated',
+        created: 'Date added',
+        title: 'Title',
+        author: 'Author'
+    };
+
+    const dirOptions = $derived<{ label: string; value: SortOrder }[]>(
+        isTextField(sort)
+            ? [
+                  { label: 'A→Z', value: 'asc' },
+                  { label: 'Z→A', value: 'desc' }
+              ]
+            : [
+                  { label: 'Newest', value: 'desc' },
+                  { label: 'Oldest', value: 'asc' }
+              ]
+    );
+
+    const dirLabel = $derived(
+        dirOptions.find((o) => o.value === order)?.label ?? ''
+    );
+
+    const sortLabel = $derived(`${SORT_FIELD_LABELS[sort]} · ${dirLabel}`);
 
     const totalPages = $derived(
         total != null && total > 0 ? Math.ceil(total / PAGE_SIZE) : 1
@@ -76,6 +109,7 @@
                 genreIds: selectedGenres.map((g) => g.id),
                 tagIds: selectedTags.map((t) => t.id),
                 sort,
+                order,
                 limit: PAGE_SIZE,
                 offset: (currentPage - 1) * PAGE_SIZE
             });
@@ -92,7 +126,10 @@
         if (!browser) return;
         const params = new URLSearchParams();
         if (search.trim()) params.set('q', search.trim());
-        if (sort !== 'recent') params.set('sort', sort);
+        if (sort !== 'updated') params.set('sort', sort);
+        // Only persist `order` when it deviates from the field's natural
+        // default, so the common case keeps a clean URL.
+        if (order !== defaultOrderFor(sort)) params.set('order', order);
         if (statusFilter) params.set('status', statusFilter);
         if (selectedGenres.length)
             params.set('genres', selectedGenres.map((g) => g.id).join(','));
@@ -127,7 +164,11 @@
         const url = new URL($page.url);
         search = url.searchParams.get('q') ?? '';
         const s = url.searchParams.get('sort');
-        if (s === 'title' || s === 'recent') sort = s;
+        if (s === 'created' || s === 'updated' || s === 'title' || s === 'author') sort = s;
+        const o = url.searchParams.get('order');
+        // Fall back to the field's natural default when `order` is absent or
+        // invalid, mirroring how syncUrl omits the default.
+        order = o === 'asc' || o === 'desc' ? o : defaultOrderFor(sort);
         const st = url.searchParams.get('status');
         statusFilter = st === 'ongoing' || st === 'completed' ? st : '';
         const genreIds = (url.searchParams.get('genres') ?? '')
@@ -166,6 +207,15 @@
     }
 
     function onSortChange() {
+        // Changing the field snaps the direction back to that field's natural
+        // default (dates → Newest, text → A→Z); the user can flip afterwards.
+        order = defaultOrderFor(sort);
+        resetAndReload();
+    }
+
+    function pickOrder(next: SortOrder) {
+        if (next === order) return;
+        order = next;
         resetAndReload();
     }
 
@@ -249,12 +299,12 @@
     }
 
     function pickSort(next: MangaSort) {
-        if (next === sort) {
-            sortSheetOpen = false;
-            return;
-        }
+        if (next === sort) return;
         sort = next;
-        sortSheetOpen = false;
+        // Match desktop: snap to the field's natural direction. The sheet
+        // stays open so the user can also adjust the direction before
+        // dismissing it.
+        order = defaultOrderFor(sort);
         resetAndReload();
     }
 
@@ -504,10 +554,19 @@
         <label class="sort">
             <span>Sort</span>
             <select bind:value={sort} onchange={onSortChange} data-testid="sort-select">
-                <option value="recent">Recent</option>
-                <option value="title">Title (A→Z)</option>
+                <option value="updated">Last updated</option>
+                <option value="created">Date added</option>
+                <option value="title">Title</option>
+                <option value="author">Author</option>
             </select>
         </label>
+        <SegmentedControl
+            options={dirOptions}
+            value={order}
+            onchange={pickOrder}
+            ariaLabel="Sort direction"
+            testid="sort-order"
+        />
     </div>
 </form>
 
@@ -527,28 +586,28 @@
     testid="sort-sheet"
 >
     <div class="sort-options">
-        <label>
-            <input
-                type="radio"
-                name="sort-mobile"
-                value="recent"
-                aria-label="Recent"
-                checked={sort === 'recent'}
-                onchange={() => pickSort('recent')}
-            />
-            <span>Recent</span>
-        </label>
-        <label>
-            <input
-                type="radio"
-                name="sort-mobile"
-                value="title"
-                aria-label="Title (A→Z)"
-                checked={sort === 'title'}
-                onchange={() => pickSort('title')}
-            />
-            <span>Title (A→Z)</span>
-        </label>
+        {#each Object.entries(SORT_FIELD_LABELS) as [value, label] (value)}
+            <label>
+                <input
+                    type="radio"
+                    name="sort-mobile"
+                    {value}
+                    aria-label={label}
+                    checked={sort === value}
+                    onchange={() => pickSort(value as MangaSort)}
+                />
+                <span>{label}</span>
+            </label>
+        {/each}
+    </div>
+    <div class="sort-direction">
+        <SegmentedControl
+            options={dirOptions}
+            value={order}
+            onchange={pickOrder}
+            ariaLabel="Sort direction"
+            testid="sort-order-mobile"
+        />
     </div>
 </Sheet>
 
@@ -836,6 +895,12 @@
         cursor: pointer;
     }
 
+    .sort-direction {
+        margin-top: var(--space-3);
+        padding-top: var(--space-3);
+        border-top: 1px solid var(--border);
+    }
+
     .icon-btn {
         display: inline-flex;
         align-items: center;