novelly/docs/plans/web/frontend-modernization_plan.md

Frontend Modernization Plan

Design direction

Drop warm-paper/serif "manuscript" look — reads dated, low-contrast, single dull accent. New identity: phase-driven color. Novelly already models a novel's lifecycle as phases (Brainstorming → Outlining → Drafting → Revising → Final, see novelPhases, StatusBadge tones). Make that real data drive the whole app's mood instead of hiding in a badge — the active novel's phase sets an accent hue across nav, buttons, focus rings, charts. Writer sees at a glance "I'm in draft mode" vs "polishing." Distinctive, grounded in the product's own model, not decoration.

Tokens

Color (base neutrals, dark-first):

• --ink: #14121a / --ink-muted: #8b859a
• --surface: #1b1825 (panel/card) / --surface-sunken: #100e17
• --canvas: #0c0a12 (app background)
• --line: #2c2838
• Light mode mirrors with --canvas:#f7f6fb, --surface:#ffffff, --ink:#14121a

Phase accents (used for --accent + --accent-soft, swapped by novel.phase):

• Brainstorming — #7c5cff violet
• Outlining — #2f8fe0 blue
• Drafting — #ff7a45 coral
• Revising — #14b88a teal
• Final — #d9a404 gold

Type:

• Display (headlines, dashboard hero, page titles): Fraunces — variable serif w/ real character, used large/sparingly
• UI (nav, buttons, body chrome): Inter
• Prose editing (chapter/beat text, agent transcript): keep a serif for long-form reading — Source Serif 4 replaces Iowan/Palatino (renders consistently, not Mac-only)
• Utility/data (counts, timestamps, mono bits): JetBrains Mono

Layout: left sidebar nav (persistent, icon+label, collapsible), agent as a right-docked slide-out panel triggered from anywhere (sidebar icon, always visible), main content full-bleed under a slim top bar (breadcrumb + phase pill + user menu — no more "← Novels" link floating left of the title).

Signature element: the phase-accent system itself — nav active states, primary buttons, focus rings, and the dashboard's activity graph all recolor together when phase changes. Nothing else in the app competes for boldness; everything else stays a disciplined dark neutral.

Chunks (each independently buildable/committable)

1. Design tokens + primitives — rewrite index.css theme (colors, fonts incl. @font-face/Google Fonts imports, spacing), update ui.tsx primitives (btn, card, input, StatusBadge) to new tokens. No layout changes yet — existing pages just reskin. Fastest way to see the new palette/type everywhere at once.
2. App shell: sidebar nav — replace NovelLayout's header+tab-bar with left sidebar (novel switcher, section nav, phase pill), slim top bar. Fixes the back-link-left-of-title complaint structurally. Agent gets a nav icon but no panel yet (still routes to /agent page).
3. Dashboard rebuild — make it the true home: recent activity + work history (already there) alongside prominent "start new work" actions (new chapter, new character, continue last chapter) above the fold. This is the biggest content/layout change, isolated to one page.
4. Global agent panel — extract AgentPage's chat UI into a slide-out panel mounted at the app shell level (outside <Outlet>), triggered from the sidebar on any route, passes current route/entity as context. Retire the standalone /agent route once panel covers it.
5. Polish pass — motion (panel slide, nav active-state transitions, dashboard load-in), empty states, focus-visible/reduced-motion audit, remaining pages (Characters/Chapters/Tags/Locations/Settings) get spacing/type touch-ups to match new primitives from chunk 1.

Suggest reviewing after each chunk before starting the next — chunk 2 and 4 both touch navigation/shell so seeing 1–2 landed first will make it obvious if the sidebar direction is right before the agent panel builds on top of it.