dashboard-ui-build

Delete the hero, color bands, marquee, footer, and scroll animations while keeping the palette and typography. Compose the screen as a compact top bar, a tight 5-stat summary row, and a dense sortable table filling the rest of a 100vh no-scroll shell, modeled on Linear or Stripe Dashboard.

Target 40-48px row height with cell padding around 5px 14px and 12-13px font sizes. Kill two-line cells by hiding description lines in collapsed rows, shrink pills and status chips, and verify 15+ rows are visible on a laptop screen without scrolling.

An expandable `<tr>` rendered outside `<tbody>` renders nothing — the browser drops it from the table model silently. Render the data row and its detail row together inside `<tbody>`, wrapped in one Fragment, and animate the detail with a `grid-template-rows: 0fr → 1fr` wrapper.

Create a typed Prefs interface with DEFAULT_PREFS, loadPrefs/savePrefs using localStorage, and applyPrefs that sets CSS custom properties and data attributes on document.documentElement. A usePrefs hook applies and saves on change, so every visual switch reduces to one update(key, value) call.

A global keydown listener for ArrowRight, Enter, or Escape hijacks typing when an input or textarea is focused. Guard the handler by checking e.target for INPUT, TEXTAREA, or isContentEditable and returning early, while handling Escape before the guard so it still closes the view.

Use an early-return state swap at the top of the root component — `if (active) return <FeaturePage onClose={...} />` — when the feature needs its own dedicated full-screen page with a Back button. Reserve modal overlays only for panels that sit on top of the dashboard.