fix(mangas): address review on sort feature — alias, index, validation, a11y
Backend - sort=recent stays a back-compat alias for created (parse_sort); invalid sort/order now return the structured 422 envelope instead of plain-text 400 - per-field default direction on omitted order (dates desc, text asc), matching the frontend so a bare ?sort=<field> reads the same in UI and API - migration 0033: index mangas(updated_at DESC, id) backing the default sort and its id tie-break; NULLS LAST now applied only to the nullable author key - tests: recent alias, per-field default (title+author), invalid-value 422, and a tie-break test that pins ordering by ascending id (mutation-verified) Frontend - pure sort helpers extracted to $lib/mangaSort with unit tests; coerceSort honors the recent alias so pasted/legacy URLs resolve to the same field - SegmentedControl: roving tabindex + arrow/Home/End keyboard nav, anchored on focus so rapid keypresses don't stick - UX: visible "Direction" labels (desktop + mobile), mobile sort-sheet section headings and a "Done" button; README sort/order contract updated Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -81,7 +81,7 @@ Everything is namespaced under `/api/v1/`. `/api/*` outside the version prefix i
|
||||
| Method | Path | Description |
|
||||
| ------ | ------------------------------------------------------- | ------------------------------------------ |
|
||||
| GET | `/api/v1/health` | Liveness probe. |
|
||||
| GET | `/api/v1/mangas?search=&sort=recent|title&limit=&offset=` | List/search mangas. Trigram fuzzy search. |
|
||||
| GET | `/api/v1/mangas?search=&sort=created\|updated\|title\|author&order=asc\|desc&limit=&offset=` | List/search mangas. Trigram fuzzy search. `sort` defaults to `updated`; `order` defaults per field (dates `desc`, text `asc`). `sort=recent` is a back-compat alias for `created`. |
|
||||
| GET | `/api/v1/mangas/{id}` | Single manga. |
|
||||
| GET | `/api/v1/mangas/{id}/chapters` | Paginated chapter list, ordered by number. |
|
||||
| GET | `/api/v1/mangas/{id}/chapters/{n}` | Single chapter. |
|
||||
|
||||
16
backend/migrations/0033_mangas_updated_at_index.sql
Normal file
16
backend/migrations/0033_mangas_updated_at_index.sql
Normal file
@@ -0,0 +1,16 @@
|
||||
-- Back the default catalog ordering. Since 0.88.0 the catalog list defaults to
|
||||
-- `ORDER BY updated_at DESC, id` (the no-filter default path), but the only
|
||||
-- existing updated_at index on mangas is the PARTIAL `mangas_missing_cover_idx`
|
||||
-- (WHERE cover_image_path IS NULL), which Postgres can't use for the unfiltered
|
||||
-- ordering. `created_at` and `lower(title)` already have full indexes from
|
||||
-- 0001; this gives the new default sort column the same treatment.
|
||||
--
|
||||
-- `id` is included as a trailing key so the index also covers the stable
|
||||
-- `, id` tie-break the listing appends for deterministic pagination.
|
||||
--
|
||||
-- Not CONCURRENTLY: sqlx::migrate! wraps each migration in a transaction, and
|
||||
-- CREATE INDEX CONCURRENTLY can't run inside one. The table is small at our
|
||||
-- scale, so a brief lock on an online deploy is acceptable.
|
||||
|
||||
CREATE INDEX IF NOT EXISTS mangas_updated_at_idx
|
||||
ON mangas (updated_at DESC, id);
|
||||
@@ -51,16 +51,58 @@ pub struct ListParams {
|
||||
pub limit: i64,
|
||||
#[serde(default)]
|
||||
pub offset: i64,
|
||||
/// Sort field: `created`, `updated` (default), `title`, or `author`.
|
||||
/// Also accepts the legacy `recent` alias (== `created`). Anything
|
||||
/// else → 422.
|
||||
#[serde(default)]
|
||||
pub sort: repo::manga::SortField,
|
||||
pub sort: Option<String>,
|
||||
/// `asc` or `desc`. Omitted → the field's natural default
|
||||
/// (dates `desc`, text `asc`). Anything else → 422.
|
||||
#[serde(default)]
|
||||
pub order: repo::manga::SortOrder,
|
||||
pub order: Option<String>,
|
||||
}
|
||||
|
||||
fn default_limit() -> i64 {
|
||||
50
|
||||
}
|
||||
|
||||
/// Parse the `sort` wire value into a [`repo::manga::SortField`]. Validation
|
||||
/// and the legacy `recent` alias live here (not in serde) so unknown values
|
||||
/// return the structured 422 envelope rather than axum's plain-text
|
||||
/// `QueryRejection`, matching the rest of this handler's filters.
|
||||
fn parse_sort(raw: Option<&str>) -> AppResult<repo::manga::SortField> {
|
||||
use repo::manga::SortField;
|
||||
match raw.map(str::trim) {
|
||||
None | Some("") | Some("updated") => Ok(SortField::Updated),
|
||||
// `recent` was the pre-0.88 name for "newest created first"; keep it
|
||||
// as an alias so existing bots/scripts don't break.
|
||||
Some("created") | Some("recent") => Ok(SortField::Created),
|
||||
Some("title") => Ok(SortField::Title),
|
||||
Some("author") => Ok(SortField::Author),
|
||||
Some(other) => Err(AppError::ValidationFailed {
|
||||
message: format!(
|
||||
"sort must be one of created, updated, title, author (got {other:?})"
|
||||
),
|
||||
details: json!({ "sort": "invalid" }),
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
/// Parse the `order` wire value. `None` means the client omitted it, so the
|
||||
/// caller applies the field's natural default. An explicit unknown value → 422.
|
||||
fn parse_order(raw: Option<&str>) -> AppResult<Option<repo::manga::SortOrder>> {
|
||||
use repo::manga::SortOrder;
|
||||
match raw.map(str::trim) {
|
||||
None | Some("") => Ok(None),
|
||||
Some("asc") => Ok(Some(SortOrder::Asc)),
|
||||
Some("desc") => Ok(Some(SortOrder::Desc)),
|
||||
Some(other) => Err(AppError::ValidationFailed {
|
||||
message: format!("order must be 'asc' or 'desc' (got {other:?})"),
|
||||
details: json!({ "order": "invalid" }),
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
fn parse_uuid_csv(field: &str, raw: Option<&str>) -> AppResult<Vec<Uuid>> {
|
||||
let Some(raw) = raw else { return Ok(Vec::new()) };
|
||||
let mut out = Vec::new();
|
||||
@@ -96,6 +138,10 @@ async fn list(
|
||||
Some(s.to_string())
|
||||
}
|
||||
};
|
||||
let sort = parse_sort(params.sort.as_deref())?;
|
||||
// Omitted `order` falls back to the field's natural direction, so a bare
|
||||
// `?sort=title` reads A→Z just like the UI shows it.
|
||||
let order = parse_order(params.order.as_deref())?.unwrap_or_else(|| sort.default_order());
|
||||
let q = repo::manga::ListQuery {
|
||||
search: params.search.filter(|s| !s.trim().is_empty()),
|
||||
status,
|
||||
@@ -106,8 +152,8 @@ async fn list(
|
||||
cw_exclude: crate::api::page_tags::parse_warnings_csv(params.cw_exclude.as_deref())?,
|
||||
limit,
|
||||
offset,
|
||||
sort: params.sort,
|
||||
order: params.order,
|
||||
sort,
|
||||
order,
|
||||
};
|
||||
let (items, total) = repo::manga::list_cards(&state.db, &q).await?;
|
||||
Ok(Json(PagedResponse::with_total(items, limit, offset, total)))
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
//! handlers depend only on `sqlx::PgPool`, not on a trait object. Swap to
|
||||
//! a trait + impl if a second backend ever becomes necessary.
|
||||
|
||||
use serde::Deserialize;
|
||||
use sqlx::{PgConnection, PgExecutor, PgPool};
|
||||
use uuid::Uuid;
|
||||
|
||||
@@ -19,9 +18,10 @@ pub const STATUSES: &[&str] = &["ongoing", "completed"];
|
||||
pub const DEFAULT_STATUS: &str = "ongoing";
|
||||
|
||||
/// Which column the listing is ordered by. The direction lives in a separate
|
||||
/// [`SortOrder`] so any field can be sorted either way.
|
||||
#[derive(Debug, Clone, Copy, Default, Deserialize)]
|
||||
#[serde(rename_all = "snake_case")]
|
||||
/// [`SortOrder`] so any field can be sorted either way. Wire values are parsed
|
||||
/// (with validation and the legacy `recent` alias) in `api::mangas`, not via
|
||||
/// serde, so this stays a plain domain enum.
|
||||
#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
|
||||
pub enum SortField {
|
||||
/// Creation time.
|
||||
Created,
|
||||
@@ -35,10 +35,21 @@ pub enum SortField {
|
||||
Author,
|
||||
}
|
||||
|
||||
/// Sort direction. Defaults to descending so the default listing
|
||||
/// (`Updated`/`Desc`) shows the most recently updated mangas first.
|
||||
#[derive(Debug, Clone, Copy, Default, Deserialize)]
|
||||
#[serde(rename_all = "snake_case")]
|
||||
impl SortField {
|
||||
/// The direction applied when the client omits `order`. Dates read
|
||||
/// newest-first (`Desc`); text reads A→Z (`Asc`). This mirrors the
|
||||
/// frontend's `defaultOrderFor` (see `frontend/src/lib/mangaSort.ts`) so a
|
||||
/// bare `?sort=<field>` link means the same thing to the UI and the API.
|
||||
pub fn default_order(self) -> SortOrder {
|
||||
match self {
|
||||
SortField::Created | SortField::Updated => SortOrder::Desc,
|
||||
SortField::Title | SortField::Author => SortOrder::Asc,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Sort direction.
|
||||
#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
|
||||
pub enum SortOrder {
|
||||
Asc,
|
||||
#[default]
|
||||
@@ -148,15 +159,15 @@ const FILTER_WHERE: &str = r#"
|
||||
"#;
|
||||
|
||||
/// Returns the page of mangas matching `query` plus the unfiltered total
|
||||
/// count for the same filter. The trigram GIN indexes (see 0005_search.sql
|
||||
/// and 0009_manga_metadata.sql) keep both queries cheap as the library
|
||||
/// grows.
|
||||
/// count for the same filter. The date/title sort columns are index-backed
|
||||
/// (`mangas_created_at_idx`, `mangas_updated_at_idx`, `mangas_title_lower_idx`)
|
||||
/// and the trigram GIN indexes (0005_search.sql, 0009_manga_metadata.sql) keep
|
||||
/// the search filter cheap as the library grows.
|
||||
pub async fn list(pool: &PgPool, query: &ListQuery) -> AppResult<(Vec<Manga>, i64)> {
|
||||
// Both `col` and `dir` are interpolated from hard-coded enums, never from
|
||||
// request input, so this is not a SQL injection seam. `NULLS LAST` keeps
|
||||
// authorless mangas out of the way in both directions, and the trailing
|
||||
// `id` is a stable tie-break that keeps pagination deterministic across
|
||||
// rows with equal sort keys.
|
||||
// request input, so this is not a SQL injection seam. The trailing `id` is
|
||||
// a stable tie-break that keeps pagination deterministic across rows with
|
||||
// equal sort keys.
|
||||
let col = match query.sort {
|
||||
SortField::Created => "created_at",
|
||||
SortField::Updated => "updated_at",
|
||||
@@ -176,7 +187,14 @@ pub async fn list(pool: &PgPool, query: &ListQuery) -> AppResult<(Vec<Manga>, i6
|
||||
SortOrder::Asc => "ASC",
|
||||
SortOrder::Desc => "DESC",
|
||||
};
|
||||
let order_by = format!("{col} {dir} NULLS LAST, id");
|
||||
// Only the author key can be NULL (authorless mangas); keep those last in
|
||||
// both directions. The date/title columns are NOT NULL, so they need no
|
||||
// NULLS clause — and omitting it lets a reverse index scan satisfy `DESC`.
|
||||
let nulls = match query.sort {
|
||||
SortField::Author => " NULLS LAST",
|
||||
_ => "",
|
||||
};
|
||||
let order_by = format!("{col} {dir}{nulls}, id");
|
||||
|
||||
let search = query.search.as_deref();
|
||||
let status = query.status.as_deref();
|
||||
|
||||
@@ -281,6 +281,178 @@ async fn list_sort_author_orders_by_author_name_nulls_last(pool: PgPool) {
|
||||
assert_eq!(title_list(&body), vec!["Chi", "Akira", "Boku", "NoAuthor"]);
|
||||
}
|
||||
|
||||
#[sqlx::test(migrations = "./migrations")]
|
||||
async fn list_sort_recent_alias_maps_to_created_desc(pool: PgPool) {
|
||||
// `recent` was the pre-0.88 sort value (newest created first). It is kept
|
||||
// as an alias for `created` so existing bots/scripts don't break.
|
||||
let h = common::harness(pool.clone());
|
||||
let (_, cookie) = common::register_user(&h.app).await;
|
||||
|
||||
for title in ["Alpha", "Bravo", "Charlie"] {
|
||||
seed(&h.app, &cookie, title).await;
|
||||
}
|
||||
set_created_at(&pool, "Alpha", "2020-01-01T00:00:00Z").await;
|
||||
set_created_at(&pool, "Bravo", "2023-01-01T00:00:00Z").await;
|
||||
set_created_at(&pool, "Charlie", "2021-01-01T00:00:00Z").await;
|
||||
|
||||
let resp = h
|
||||
.app
|
||||
.oneshot(common::get("/api/v1/mangas?sort=recent"))
|
||||
.await
|
||||
.unwrap();
|
||||
assert_eq!(resp.status(), StatusCode::OK);
|
||||
let body = common::body_json(resp).await;
|
||||
// Same ordering as `sort=created&order=desc`: newest-created first.
|
||||
assert_eq!(title_list(&body), vec!["Bravo", "Charlie", "Alpha"]);
|
||||
}
|
||||
|
||||
#[sqlx::test(migrations = "./migrations")]
|
||||
async fn list_sort_field_defaults_direction_per_field(pool: PgPool) {
|
||||
// When `order` is omitted, the API applies the field's natural direction:
|
||||
// text fields ascend (A→Z), matching the frontend's `defaultOrderFor`, so
|
||||
// a bare `?sort=title` link reads the same in the UI and over the wire.
|
||||
let h = common::harness(pool);
|
||||
let (_, cookie) = common::register_user(&h.app).await;
|
||||
|
||||
for title in ["Vinland Saga", "Berserk", "One Piece"] {
|
||||
seed(&h.app, &cookie, title).await;
|
||||
}
|
||||
|
||||
let resp = h
|
||||
.app
|
||||
.oneshot(common::get("/api/v1/mangas?sort=title"))
|
||||
.await
|
||||
.unwrap();
|
||||
assert_eq!(resp.status(), StatusCode::OK);
|
||||
let body = common::body_json(resp).await;
|
||||
assert_eq!(title_list(&body), vec!["Berserk", "One Piece", "Vinland Saga"]);
|
||||
}
|
||||
|
||||
#[sqlx::test(migrations = "./migrations")]
|
||||
async fn list_sort_author_default_is_ascending_nulls_last(pool: PgPool) {
|
||||
// The other text field: a bare `?sort=author` must default to ascending and
|
||||
// keep authorless mangas last (NULLS LAST), exercising the omitted-order
|
||||
// path through the author subquery — not just `title`.
|
||||
let h = common::harness(pool);
|
||||
let (_, cookie) = common::register_user(&h.app).await;
|
||||
|
||||
for (title, authors) in [
|
||||
("Akira", json!(["Beta Author"])),
|
||||
("Boku", json!(["Alpha Author"])),
|
||||
("NoAuthor", json!([])),
|
||||
] {
|
||||
let _ = h
|
||||
.app
|
||||
.clone()
|
||||
.oneshot(common::post_multipart_with_cookie(
|
||||
"/api/v1/mangas",
|
||||
MultipartBuilder::new()
|
||||
.add_json("metadata", json!({ "title": title, "authors": authors })),
|
||||
&cookie,
|
||||
))
|
||||
.await
|
||||
.unwrap();
|
||||
}
|
||||
|
||||
let resp = h
|
||||
.app
|
||||
.oneshot(common::get("/api/v1/mangas?sort=author"))
|
||||
.await
|
||||
.unwrap();
|
||||
assert_eq!(resp.status(), StatusCode::OK);
|
||||
let body = common::body_json(resp).await;
|
||||
// Alpha Author (Boku) < Beta Author (Akira); authorless sorts last.
|
||||
assert_eq!(title_list(&body), vec!["Boku", "Akira", "NoAuthor"]);
|
||||
}
|
||||
|
||||
#[sqlx::test(migrations = "./migrations")]
|
||||
async fn list_rejects_invalid_sort_and_order_with_envelope(pool: PgPool) {
|
||||
let h = common::harness(pool);
|
||||
|
||||
// Unknown sort field → structured 422, not axum's plain-text 400.
|
||||
let resp = h
|
||||
.app
|
||||
.clone()
|
||||
.oneshot(common::get("/api/v1/mangas?sort=bogus"))
|
||||
.await
|
||||
.unwrap();
|
||||
assert_eq!(resp.status(), StatusCode::UNPROCESSABLE_ENTITY);
|
||||
let body = common::body_json(resp).await;
|
||||
assert_eq!(body["error"]["details"]["sort"], "invalid");
|
||||
|
||||
// Unknown order → same treatment.
|
||||
let resp = h
|
||||
.app
|
||||
.oneshot(common::get("/api/v1/mangas?order=sideways"))
|
||||
.await
|
||||
.unwrap();
|
||||
assert_eq!(resp.status(), StatusCode::UNPROCESSABLE_ENTITY);
|
||||
let body = common::body_json(resp).await;
|
||||
assert_eq!(body["error"]["details"]["order"], "invalid");
|
||||
}
|
||||
|
||||
/// Pin a manga's primary key to an explicit UUID. Safe only for freshly
|
||||
/// seeded mangas with no chapters/authors/tags referencing them.
|
||||
async fn set_id(pool: &PgPool, title: &str, id: &str) {
|
||||
let uuid: uuid::Uuid = id.parse().unwrap();
|
||||
sqlx::query("UPDATE mangas SET id = $1 WHERE title = $2")
|
||||
.bind(uuid)
|
||||
.bind(title)
|
||||
.execute(pool)
|
||||
.await
|
||||
.unwrap();
|
||||
}
|
||||
|
||||
#[sqlx::test(migrations = "./migrations")]
|
||||
async fn list_tie_break_orders_equal_keys_by_ascending_id(pool: PgPool) {
|
||||
// The trailing `, id` in ORDER BY is what keeps pagination stable when the
|
||||
// primary sort key ties. Pin three mangas to the SAME created_at and assign
|
||||
// ids whose ascending order (Bravo < Charlie < Alpha) deliberately differs
|
||||
// from insertion/physical order, so the expected ordering can ONLY come
|
||||
// from the id tie-break.
|
||||
//
|
||||
// We sort by `created` on purpose: `mangas_created_at_idx` is `(created_at
|
||||
// DESC)` with no id, so it does NOT encode the secondary order — unlike the
|
||||
// default `updated` path, whose `mangas_updated_at_idx (updated_at DESC,
|
||||
// id)` would mask a missing clause. Drop `, id` from the query and this
|
||||
// test fails.
|
||||
let h = common::harness(pool.clone());
|
||||
let (_, cookie) = common::register_user(&h.app).await;
|
||||
|
||||
for title in ["Alpha", "Bravo", "Charlie"] {
|
||||
seed(&h.app, &cookie, title).await;
|
||||
set_created_at(&pool, title, "2022-01-01T00:00:00Z").await;
|
||||
}
|
||||
set_id(&pool, "Alpha", "33333333-3333-4333-8333-333333333333").await;
|
||||
set_id(&pool, "Bravo", "11111111-1111-4111-8111-111111111111").await;
|
||||
set_id(&pool, "Charlie", "22222222-2222-4222-8222-222222222222").await;
|
||||
|
||||
let page = |limit: i64, offset: i64| {
|
||||
let app = h.app.clone();
|
||||
async move {
|
||||
let resp = app
|
||||
.oneshot(common::get(&format!(
|
||||
"/api/v1/mangas?sort=created&limit={limit}&offset={offset}"
|
||||
)))
|
||||
.await
|
||||
.unwrap();
|
||||
common::body_json(resp).await
|
||||
}
|
||||
};
|
||||
|
||||
// Single page: tied rows come back in ascending-id order.
|
||||
let full = page(50, 0).await;
|
||||
assert_eq!(title_list(&full), vec!["Bravo", "Charlie", "Alpha"]);
|
||||
|
||||
// Paginating one row at a time reproduces that exact sequence — no overlap,
|
||||
// no gap — which only holds because the id tie-break makes the order total.
|
||||
let paged: Vec<String> = vec![page(1, 0).await, page(1, 1).await, page(1, 2).await]
|
||||
.iter()
|
||||
.map(|b| b["items"][0]["title"].as_str().unwrap().to_string())
|
||||
.collect();
|
||||
assert_eq!(paged, vec!["Bravo", "Charlie", "Alpha"]);
|
||||
}
|
||||
|
||||
#[sqlx::test(migrations = "./migrations")]
|
||||
async fn search_reflects_filtered_total(pool: PgPool) {
|
||||
let h = common::harness(pool);
|
||||
|
||||
@@ -185,5 +185,10 @@ test.describe('mobile catalog chrome', () => {
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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={() => {
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
91
frontend/src/lib/mangaSort.test.ts
Normal file
91
frontend/src/lib/mangaSort.test.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import type { MangaSort, SortOrder } from './api/mangas';
|
||||
import {
|
||||
DEFAULT_SORT,
|
||||
defaultOrderFor,
|
||||
isTextField,
|
||||
dirOptions,
|
||||
dirLabel,
|
||||
sortLabel,
|
||||
coerceSort,
|
||||
coerceOrder,
|
||||
sortUrlParams
|
||||
} from './mangaSort';
|
||||
|
||||
const FIELDS: MangaSort[] = ['created', 'updated', 'title', 'author'];
|
||||
const ORDERS: SortOrder[] = ['asc', 'desc'];
|
||||
|
||||
describe('mangaSort', () => {
|
||||
it('classifies text vs date fields', () => {
|
||||
expect(isTextField('title')).toBe(true);
|
||||
expect(isTextField('author')).toBe(true);
|
||||
expect(isTextField('created')).toBe(false);
|
||||
expect(isTextField('updated')).toBe(false);
|
||||
});
|
||||
|
||||
it('defaults date fields to desc and text fields to asc', () => {
|
||||
expect(defaultOrderFor('created')).toBe('desc');
|
||||
expect(defaultOrderFor('updated')).toBe('desc');
|
||||
expect(defaultOrderFor('title')).toBe('asc');
|
||||
expect(defaultOrderFor('author')).toBe('asc');
|
||||
});
|
||||
|
||||
it('labels the direction toggle per field type', () => {
|
||||
expect(dirOptions('title').map((o) => o.label)).toEqual(['A→Z', 'Z→A']);
|
||||
expect(dirOptions('updated').map((o) => o.label)).toEqual(['Newest', 'Oldest']);
|
||||
});
|
||||
|
||||
it('dirLabel never returns empty for a valid order', () => {
|
||||
for (const f of FIELDS) {
|
||||
for (const o of ORDERS) {
|
||||
expect(dirLabel(f, o)).not.toBe('');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('composes a readable sort label without a dangling separator', () => {
|
||||
expect(sortLabel('updated', 'desc')).toBe('Last updated · Newest');
|
||||
expect(sortLabel('title', 'asc')).toBe('Title · A→Z');
|
||||
expect(sortLabel('author', 'desc')).toBe('Author · Z→A');
|
||||
});
|
||||
|
||||
it('coerceSort accepts valid fields and falls back to the default otherwise', () => {
|
||||
for (const f of FIELDS) expect(coerceSort(f)).toBe(f);
|
||||
expect(coerceSort('bogus')).toBe(DEFAULT_SORT);
|
||||
expect(coerceSort(null)).toBe(DEFAULT_SORT);
|
||||
});
|
||||
|
||||
it('coerceSort honors the legacy `recent` alias (== created), matching the API', () => {
|
||||
// The backend maps sort=recent -> created; the browser must agree so a
|
||||
// pasted/legacy `/?sort=recent` URL resolves to the same field.
|
||||
expect(coerceSort('recent')).toBe('created');
|
||||
});
|
||||
|
||||
it('coerceOrder accepts asc/desc and otherwise uses the field default', () => {
|
||||
expect(coerceOrder('asc', 'title')).toBe('asc');
|
||||
expect(coerceOrder('desc', 'title')).toBe('desc');
|
||||
// Absent/invalid → field's natural default.
|
||||
expect(coerceOrder(null, 'title')).toBe('asc');
|
||||
expect(coerceOrder('sideways', 'updated')).toBe('desc');
|
||||
});
|
||||
|
||||
it('omits sort/order from the URL when they equal the defaults', () => {
|
||||
expect(sortUrlParams('updated', 'desc')).toEqual({});
|
||||
// Title at its natural default (asc) → only the field is persisted.
|
||||
expect(sortUrlParams('title', 'asc')).toEqual({ sort: 'title' });
|
||||
// Non-default direction is persisted explicitly.
|
||||
expect(sortUrlParams('title', 'desc')).toEqual({ sort: 'title', order: 'desc' });
|
||||
expect(sortUrlParams('updated', 'asc')).toEqual({ order: 'asc' });
|
||||
});
|
||||
|
||||
it('round-trips every field/order combo losslessly through the URL', () => {
|
||||
for (const sort of FIELDS) {
|
||||
for (const order of ORDERS) {
|
||||
const params = sortUrlParams(sort, order);
|
||||
const back = coerceSort(params.sort ?? null);
|
||||
const backOrder = coerceOrder(params.order ?? null, back);
|
||||
expect({ sort: back, order: backOrder }).toEqual({ sort, order });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
83
frontend/src/lib/mangaSort.ts
Normal file
83
frontend/src/lib/mangaSort.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import type { MangaSort, SortOrder } from './api/mangas';
|
||||
|
||||
/// The catalog's default sort field. A bare `/?` (no `sort`) means this.
|
||||
export const DEFAULT_SORT: MangaSort = 'updated';
|
||||
|
||||
export const SORT_FIELD_LABELS: Record<MangaSort, string> = {
|
||||
updated: 'Last updated',
|
||||
created: 'Date added',
|
||||
title: 'Title',
|
||||
author: 'Author'
|
||||
};
|
||||
|
||||
/** Text fields sort A→Z by default; date fields newest-first. */
|
||||
export function isTextField(f: MangaSort): boolean {
|
||||
return f === 'title' || f === 'author';
|
||||
}
|
||||
|
||||
/**
|
||||
* The direction applied when `order` is omitted. This mirrors the backend's
|
||||
* `SortField::default_order` (backend/src/repo/manga.rs) on purpose: a bare
|
||||
* `?sort=<field>` link must read the same in the UI and over the wire.
|
||||
*/
|
||||
export function defaultOrderFor(f: MangaSort): SortOrder {
|
||||
return isTextField(f) ? 'asc' : 'desc';
|
||||
}
|
||||
|
||||
/** The asc/desc toggle options, labelled for the field type. */
|
||||
export function dirOptions(f: MangaSort): { label: string; value: SortOrder }[] {
|
||||
return isTextField(f)
|
||||
? [
|
||||
{ label: 'A→Z', value: 'asc' },
|
||||
{ label: 'Z→A', value: 'desc' }
|
||||
]
|
||||
: [
|
||||
{ label: 'Newest', value: 'desc' },
|
||||
{ label: 'Oldest', value: 'asc' }
|
||||
];
|
||||
}
|
||||
|
||||
export function dirLabel(sort: MangaSort, order: SortOrder): string {
|
||||
return dirOptions(sort).find((o) => o.value === order)?.label ?? '';
|
||||
}
|
||||
|
||||
export function sortLabel(sort: MangaSort, order: SortOrder): string {
|
||||
return `${SORT_FIELD_LABELS[sort]} · ${dirLabel(sort, order)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Coerce a raw `sort` query value to a valid field, falling back to default.
|
||||
* `recent` is honored as the same back-compat alias the API exposes (== the
|
||||
* `created` field), so a hand-shared or legacy `/?sort=recent` URL resolves to
|
||||
* the same field in the browser as over the wire.
|
||||
*/
|
||||
export function coerceSort(raw: string | null | undefined): MangaSort {
|
||||
if (raw === 'recent') return 'created';
|
||||
return raw === 'created' || raw === 'updated' || raw === 'title' || raw === 'author'
|
||||
? raw
|
||||
: DEFAULT_SORT;
|
||||
}
|
||||
|
||||
/**
|
||||
* Coerce a raw `order` query value, falling back to the field's natural
|
||||
* default when absent or invalid — mirroring how {@link sortUrlParams} omits it.
|
||||
*/
|
||||
export function coerceOrder(raw: string | null | undefined, sort: MangaSort): SortOrder {
|
||||
return raw === 'asc' || raw === 'desc' ? raw : defaultOrderFor(sort);
|
||||
}
|
||||
|
||||
/**
|
||||
* The `sort`/`order` params to persist in the shareable URL. Defaults are
|
||||
* omitted to keep the common URL clean; because the backend resolves an absent
|
||||
* `order` to {@link defaultOrderFor} too, the omission is unambiguous across
|
||||
* the UI and direct API callers.
|
||||
*/
|
||||
export function sortUrlParams(
|
||||
sort: MangaSort,
|
||||
order: SortOrder
|
||||
): { sort?: MangaSort; order?: SortOrder } {
|
||||
const out: { sort?: MangaSort; order?: SortOrder } = {};
|
||||
if (sort !== DEFAULT_SORT) out.sort = sort;
|
||||
if (order !== defaultOrderFor(sort)) out.order = order;
|
||||
return out;
|
||||
}
|
||||
@@ -12,6 +12,16 @@
|
||||
} from '$lib/api/mangas';
|
||||
import { listGenres, type Genre } from '$lib/api/genres';
|
||||
import { listTags, type Tag } from '$lib/api/tags';
|
||||
import {
|
||||
DEFAULT_SORT,
|
||||
SORT_FIELD_LABELS,
|
||||
defaultOrderFor,
|
||||
dirOptions as dirOptionsFor,
|
||||
coerceSort,
|
||||
coerceOrder,
|
||||
sortLabel as composeSortLabel,
|
||||
sortUrlParams
|
||||
} from '$lib/mangaSort';
|
||||
import Chip from '$lib/components/Chip.svelte';
|
||||
import MangaCard from '$lib/components/MangaCard.svelte';
|
||||
import Pager from '$lib/components/Pager.svelte';
|
||||
@@ -27,8 +37,8 @@
|
||||
|
||||
let mangas: MangaCardData[] = $state([]);
|
||||
let search = $state('');
|
||||
let sort = $state<MangaSort>('updated');
|
||||
let order = $state<SortOrder>('desc');
|
||||
let sort = $state<MangaSort>(DEFAULT_SORT);
|
||||
let order = $state<SortOrder>(defaultOrderFor(DEFAULT_SORT));
|
||||
let statusFilter = $state<'' | MangaStatus>('');
|
||||
let selectedGenres = $state<Genre[]>([]);
|
||||
let selectedTags = $state<Tag[]>([]);
|
||||
@@ -58,37 +68,12 @@
|
||||
(statusFilter ? 1 : 0) + selectedGenres.length + selectedTags.length
|
||||
);
|
||||
|
||||
// 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}`);
|
||||
// Field/direction labelling and defaults live in $lib/mangaSort (unit
|
||||
// tested there). Date fields read newest-first; text fields A→Z. The
|
||||
// direction stays freely togglable — defaultOrderFor only picks the
|
||||
// direction applied when the field changes.
|
||||
const dirOptions = $derived(dirOptionsFor(sort));
|
||||
const sortLabel = $derived(composeSortLabel(sort, order));
|
||||
|
||||
const totalPages = $derived(
|
||||
total != null && total > 0 ? Math.ceil(total / PAGE_SIZE) : 1
|
||||
@@ -126,10 +111,11 @@
|
||||
if (!browser) return;
|
||||
const params = new URLSearchParams();
|
||||
if (search.trim()) params.set('q', search.trim());
|
||||
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);
|
||||
// Defaults are omitted to keep the URL clean; the backend resolves an
|
||||
// absent `sort`/`order` the same way, so the omission is unambiguous.
|
||||
const sp = sortUrlParams(sort, order);
|
||||
if (sp.sort) params.set('sort', sp.sort);
|
||||
if (sp.order) params.set('order', sp.order);
|
||||
if (statusFilter) params.set('status', statusFilter);
|
||||
if (selectedGenres.length)
|
||||
params.set('genres', selectedGenres.map((g) => g.id).join(','));
|
||||
@@ -163,12 +149,10 @@
|
||||
// Genre objects so the chip rows render real labels.
|
||||
const url = new URL($page.url);
|
||||
search = url.searchParams.get('q') ?? '';
|
||||
const s = url.searchParams.get('sort');
|
||||
if (s === 'created' || s === 'updated' || s === 'title' || s === 'author') sort = s;
|
||||
const o = url.searchParams.get('order');
|
||||
sort = coerceSort(url.searchParams.get('sort'));
|
||||
// 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);
|
||||
order = coerceOrder(url.searchParams.get('order'), sort);
|
||||
const st = url.searchParams.get('status');
|
||||
statusFilter = st === 'ongoing' || st === 'completed' ? st : '';
|
||||
const genreIds = (url.searchParams.get('genres') ?? '')
|
||||
@@ -560,13 +544,16 @@
|
||||
<option value="author">Author</option>
|
||||
</select>
|
||||
</label>
|
||||
<SegmentedControl
|
||||
options={dirOptions}
|
||||
value={order}
|
||||
onchange={pickOrder}
|
||||
ariaLabel="Sort direction"
|
||||
testid="sort-order"
|
||||
/>
|
||||
<div class="sort">
|
||||
<span>Direction</span>
|
||||
<SegmentedControl
|
||||
options={dirOptions}
|
||||
value={order}
|
||||
onchange={pickOrder}
|
||||
ariaLabel="Sort direction"
|
||||
testid="sort-order"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -585,7 +572,8 @@
|
||||
onClose={() => (sortSheetOpen = false)}
|
||||
testid="sort-sheet"
|
||||
>
|
||||
<div class="sort-options">
|
||||
<p id="sort-field-heading" class="sort-section-label">Sort by</p>
|
||||
<div class="sort-options" role="radiogroup" aria-labelledby="sort-field-heading">
|
||||
{#each Object.entries(SORT_FIELD_LABELS) as [value, label] (value)}
|
||||
<label>
|
||||
<input
|
||||
@@ -596,11 +584,14 @@
|
||||
checked={sort === value}
|
||||
onchange={() => pickSort(value as MangaSort)}
|
||||
/>
|
||||
<!-- aria-label duplicates the visible span text on purpose so
|
||||
the e2e getByRole('radio', { name }) lookup is stable. -->
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="sort-direction">
|
||||
<p class="sort-section-label">Direction</p>
|
||||
<SegmentedControl
|
||||
options={dirOptions}
|
||||
value={order}
|
||||
@@ -609,6 +600,16 @@
|
||||
testid="sort-order-mobile"
|
||||
/>
|
||||
</div>
|
||||
{#snippet footer()}
|
||||
<button
|
||||
type="button"
|
||||
class="primary"
|
||||
onclick={() => (sortSheetOpen = false)}
|
||||
data-testid="sort-done"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
{/snippet}
|
||||
</Sheet>
|
||||
|
||||
{#if loading}
|
||||
@@ -901,6 +902,26 @@
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Section headings inside the mobile sort sheet ("Sort by" / "Direction")
|
||||
so each group is visibly labelled, mirroring the desktop inline labels. */
|
||||
.sort-section-label {
|
||||
margin: 0 0 var(--space-2);
|
||||
font-size: var(--font-sm);
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.primary {
|
||||
border: 1px solid var(--primary);
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
}
|
||||
|
||||
.primary:hover {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user