From bd7c3fc28c70dc7c5fbddf2a020c088add27b4c6 Mon Sep 17 00:00:00 2001
From: MechaCat02 <MechaCat02@example.com>
Date: Thu, 25 Jun 2026 19:22:45 +0200
Subject: [PATCH] refactor(catalog): derive desktop sort options from
 SORT_FIELD_LABELS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The desktop sort <select> hard-coded its four <option>s while the mobile
sort sheet rendered them from SORT_FIELD_LABELS. The two happened to match,
but a label rename in mangaSort.ts would have silently diverged the desktop
control. Render the desktop options from the same map so they can't.

No behaviour change (the rendered options are identical), so no version
bump. Adds an e2e guard asserting the desktop select's option values and
labels equal SORT_FIELD_LABELS in order — verified red against the old
hard-coded markup (with a label renamed) and green after.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/e2e/manga-list.spec.ts  | 30 ++++++++++++++++++++++++++++++
 frontend/src/routes/+page.svelte |  9 +++++----
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/frontend/e2e/manga-list.spec.ts b/frontend/e2e/manga-list.spec.ts
index 04bd298..2304ecf 100644
--- a/frontend/e2e/manga-list.spec.ts
+++ b/frontend/e2e/manga-list.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect, type Page } from '@playwright/test';
+import { SORT_FIELD_LABELS } from '../src/lib/mangaSort';
 
 // These E2E tests run against the SvelteKit dev server, which proxies /api
 // to the backend. Playwright starts vite via `webServer` (see
@@ -44,6 +45,35 @@ test('home page renders the Mangalord heading and search input', async ({ page }
     await expect(page.getByTestId('empty')).toContainText('No mangas yet');
 });
 
+// Anti-drift guard: the desktop sort <select> and the mobile sort sheet must
+// both enumerate exactly SORT_FIELD_LABELS, in the same order. The desktop
+// select used to hard-code its <option>s, so a label rename in mangaSort.ts
+// would silently diverge the two surfaces. Comparing the rendered options to
+// the single source of truth makes that divergence fail loudly.
+test('desktop sort options stay in sync with SORT_FIELD_LABELS', async ({ page }) => {
+    await mockAnonymous(page);
+    await page.route('**/api/v1/mangas*', async (route) => {
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(emptyPage)
+        });
+    });
+
+    await page.goto('/');
+    const select = page.getByTestId('sort-select');
+    await expect(select).toBeVisible();
+
+    const options = select.locator('option');
+    const labels = (await options.allTextContents()).map((s) => s.trim());
+    const values = await options.evaluateAll((opts) =>
+        opts.map((o) => (o as HTMLOptionElement).value)
+    );
+
+    expect(values).toEqual(Object.keys(SORT_FIELD_LABELS));
+    expect(labels).toEqual(Object.values(SORT_FIELD_LABELS));
+});
+
 test('search updates the manga list', async ({ page }) => {
     await mockAnonymous(page);
     let lastSearch: string | null = null;
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index a89a384..683dea9 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -538,10 +538,11 @@
         <label class="sort">
             <span>Sort</span>
             <select bind:value={sort} onchange={onSortChange} data-testid="sort-select">
-                <option value="updated">Last updated</option>
-                <option value="created">Date added</option>
-                <option value="title">Title</option>
-                <option value="author">Author</option>
+                <!-- Options derive from SORT_FIELD_LABELS — the same source the
+                     mobile sort sheet uses — so the two surfaces can't drift. -->
+                {#each Object.entries(SORT_FIELD_LABELS) as [value, label] (value)}
+                    <option {value}>{label}</option>
+                {/each}
             </select>
         </label>
         <div class="sort">