# Settings workspace

The settings page has two menu levels: ownership (User/Admin), then a focused
section. Only one section is shown at a time. Scraper tabs are local controls,
not a third global menu level.

```text
Settings
  User
    Reading
    Reading time & privacy
    Notifications
    Account
  Admin
    Scraper
      [Activity | Queue | Updates | Sources]
    Server & library
    Users & access
    Collections & metadata
    Service health
```

Desktop uses a sticky sidebar; mobile uses a wrapping menu above the content.
Active sections have a visual marker and `aria-current`. Navigation uses real
links, supports keyboard use and browser back/forward, and focuses the section
heading when switching within Settings.

## Routes and ownership

Personal routes: `settings.html#user/reading`, `#user/reading-time`,
`#user/notifications`, `#user/account`.

Admin routes: `settings.html#admin/scraper`, `#admin/library`, `#admin/users`.
Scraper deep links append `/activity`, `/queue`, `/updates` or `/sources`.
The old `/hosters` link opens Sources. The scraper default is Activity.
Existing `collections.html` and `health.html` retain their URLs but share the
same menu. `#admin/collections` and `#admin/health` redirect to those pages.
Unknown routes default to Reading. Non-admin accounts never render the Admin menu
or load admin data from Settings; admin hash routes normalize to Reading.
Server-side authorization remains authoritative and still rejects non-admin API calls.

`public/settings-nav.js` defines the shared menu and route model. `settings.js`
preserves personal form nodes across section changes and loads admin sections lazily.
Scraper polling runs only while its section is active. Draft inputs survive polling
and tab switches; successful commands reload state. Command failures are visible
without deleting the user's draft. Source chips filter the four scraper views
without changing queue ownership or per-source pacing.
The Add manga, Completed downloads and Recent check activity disclosure boxes
also retain their open/closed state across polling and command redraws; a page
reload still starts them collapsed.

Activity shows active jobs, source attention, and the next queued items. Queue
keeps reorder/inspect/confirm/remove controls, scopes, and an Add manga form;
completed jobs are collapsed by default. **Clear completed downloads** removes
only inactive, successful download job rows, optionally limited to the selected
source. It never deletes library content, checkpoints, history or other statuses.
Updates shows the nightly schedule, per-manga switches, the latest check and
download times by manga/source, and a collapsed recent-check log. Successful
no-change nightly checks update this summary and leave the queue. Sources owns
the per-hoster request and chapter delay settings.

Service health also holds the **Backups** card: built-in backup status (last run,
size, duration, error), **Back up now**, and the daily schedule and retention form,
whose draft survives the page's polling. See [backup.md](backup.md).

Reading-time collection controls, export and deletion live under Reading time &
privacy; reader layout controls stay under Reading. Rescan controls and user
administration are separate. Server & library describes existing maintenance,
not an editor for Docker environment variables or an unrestricted restart console.

## Verification

`npm test` covers route defaults, deep links, ownership and existing service/API
behavior. `node tools/test-compose.js --settings-ui` adds optional Playwright
headless browser QA against the disposable Compose fixture, never the real user
database or queue. Make Playwright available on the development machine; on Windows it
uses the installed headless Edge by default, overridable with `QA_BROWSER_CHANNEL`.
The application itself remains dependency-free.

The UI check verifies desktop and 390×844 mobile navigation, form saves, draft
retention, tab visibility, back/forward, stopping hidden scraper polling, shared
collections/health navigation, non-admin denial and horizontal overflow.
`--queue-ui` additionally checks the source filter, edition confirmation, add form,
completed cleanup and mobile layout. Screenshots are generated under ignored
`data/qa/settings/` and `data/qa/queue/`. No image sources are contacted.