Files
the-daily-epub/docs/plans/briefs/web-dashboard-v2/03-dashboard-restyle.md
T

2.7 KiB

Step 3 — dashboard restyle on the Tailwind system

Worktree and branch: given in your launch prompt. Read 00-shared.md (design language, "Dashboard" and "Controls" paragraphs) and handoff-step2.md (what the design system provides: tokens, .btn, .badge, .kv, .scroll-x, .prose-body, table and form defaults in src/web/tailwind.css). Step 2 deliberately left src/web/templates/dashboard/* unstyled; you restyle every one of them with Tailwind utilities plus those components, then rebuild src/web/static/app.css (npm run css) and commit it.

Templates: overview, runs, run, articles, article, ratings, profile, stats, settings, settings_history, jobs, job, users, _pager, _sparkline, and the shared partials _candidate_row.html, _signals_table.html, _pagination.html (the reader-side _rating_widget.html is styled already; the dashboard variant with the note field must look right inside tables and on the article page).

Rules of the road:

  • Keep every handler field, form action/name/id, data-* hook and the SVG classes the sparkline/funnel code emits (.spark, .s0.s5, .line, .funnel). Read src/web/static/app.js before touching anything it queries.
  • Old CSS class names that tests assert on (grep tests/ and the #[cfg(test)] modules under src/web/dashboard/ for class= and for names like badge, num, muted, card, superseded) may stay as harmless extra classes or be updated together with the test — never leave a test asserting a class the template no longer emits.
  • Page header pattern on every page: title, one-line description, actions (buttons/links) right-aligned, then filters, then content. Stat tiles on the overview and stats pages. Tables per the shared brief; long text cells (message, editor_why) wrap with overflow-wrap:anywhere; numeric columns right-aligned tabular-nums; sticky thead on bg-paper.
  • Settings: grouped cards with monospace section keys, a two-column setting row (label + help left, control right) collapsing on phones, locked (env-overridden) fields visibly disabled with a small lock note, the sticky save bar, danger actions in text-down. Profile: editor/preview split that stacks on phones. Jobs: cards with a status badge, last run, and the start form; the job page's journal in a scrolling monospace block. Users: a simple table.
  • Both themes, desktop and mobile (390px), every page: screenshot as admin with the seeded dev server and look before finishing.

Finish: npm run css + npm run css:check, cargo fmt, clippy -D warnings, cargo test; write handoff-step3.md; commit once: Web dashboard v2 step 3: dashboard restyle.