First pass of the /frontend-design overhaul against the mockups at
F:\Pictures\website\jobtracker\new. Two highest-leverage gaps from the
backlog note ("dark sidebar, KPI cards, exact status colours"):
- AppShell: nav rail is now a fixed dark navy (#0f172a) regardless of
the app's light/dark theme toggle, matching the mockup's signature
look -- selected item gets an indigo-tinted pill + icon accent,
muted slate text for the rest. Kept icon+label rows (mockup's sidebar
is text-only) since the existing collapsed-sidebar mode depends on
icons; that's a deliberate deviation, not an oversight.
- JobbjaktMark: replaced the briefcase glyph with the gradient
checkmark-in-square mark used throughout the mockups (hero, dashboard,
kanban) -- also fixed a latent SVG gradient id collision across
multiple rendered instances via useId().
- KanbanBoard: mockup uses color sparingly (a small dot in the column
header, a 4px accent on the card's left edge) rather than tinting the
whole column/card background as the previous version did. Reworked
to match; also swapped card title/subtitle order (job title bold,
company/location as subtitle) per the mockup.
Remaining for follow-up passes: Dashboard KPI card layout and the job
workspace (candidate-fit ring, AI summary card) -- both structurally
close already but not yet pixel-matched.
Verified: `next build` clean, all 57 frontend tests green, dark
sidebar confirmed live (computed bg #0f172a) against a running dev
server with light content mode forced.
Introduces pipeline.ts (mirrors backend JobPipeline) as the one frontend
source of truth for canonical stages, synonym normalization, tone, and
localized labels. Replaces the status list/logic previously duplicated
across KanbanBoard, JobTable, AddJobModal and EditJobDialog.
- KanbanBoard/AddJobModal/EditJobDialog render from PIPELINE_STATUSES
- JobTable uses shared statusTone + statusLabel (status chips now
localized; NB gets proper labels, English unchanged)
- Edit dialog status dropdown is now localized too
- 5 unit tests; full frontend suite green (19 suites / 41 tests)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
cesnimda
cesnimda