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>
This commit is contained in:
MechaCat02
2026-06-25 07:15:51 +02:00
parent 93b7e451bf
commit dee53fa212
16 changed files with 936 additions and 75 deletions

View File

@@ -149,14 +149,16 @@ test.describe('mobile catalog chrome', () => {
await expect(page).toHaveURL((url) => !url.search.includes('genres='));
});
test('phone viewport: Sort sheet swaps the sort and dismisses on pick', async ({
test('phone viewport: Sort sheet swaps field + direction, staying open', async ({
page
}) => {
let lastSortParam: string | null = null;
let lastOrderParam: string | null = null;
await mockAnonymous(page);
await mockCatalog(page, {
capture: (url) => {
lastSortParam = url.searchParams.get('sort');
lastOrderParam = url.searchParams.get('order');
}
});
await page.setViewportSize(MOBILE);
@@ -166,13 +168,27 @@ test.describe('mobile catalog chrome', () => {
await page.getByTestId('sort-chip').click();
await expect(page.getByTestId('sort-sheet')).toBeVisible();
// Use click(), not check(): the onchange handler closes the sheet
// synchronously so the radio is gone before check() can verify the
// `checked` state.
await page.getByTestId('sort-sheet').getByRole('radio', { name: /Title/ }).click();
await expect(page.getByTestId('sort-sheet')).toBeHidden();
// Picking a field reloads but keeps the sheet open so the direction
// can be adjusted in the same interaction.
await page.getByTestId('sort-sheet').getByRole('radio', { name: /^Title$/ }).click();
await expect(page.getByTestId('sort-sheet')).toBeVisible();
await expect(page).toHaveURL(/sort=title/);
expect(lastSortParam).toBe('title');
// The API call always carries an explicit direction; Title's natural
// default is A→Z (asc)...
expect(lastOrderParam).toBe('asc');
// ...but the browser URL omits it since it's the default.
await expect(page).not.toHaveURL(/order=/);
// Flipping the direction to Z→A surfaces an explicit order param both
// on the wire and in the URL.
await page.getByTestId('sort-order-mobile-desc').click();
await expect(page).toHaveURL(/order=desc/);
expect(lastOrderParam).toBe('desc');
// The Done button gives an explicit dismissal affordance once the
// field + direction are set.
await page.getByTestId('sort-done').click();
await expect(page.getByTestId('sort-sheet')).toBeHidden();
});
});