MangaCircus/docs/settings-navigation.md

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.

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.

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; Windows uses 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.