# App.css reduction plan

This document tracks the work to retire the legacy `frontend/src/App.css`
in favour of the redesign's design tokens (`styles/design.css`),
shared utilities (`styles/page-shared.css`, `styles/clip-grid.css`),
and per-page CSS files (`styles/persons-page.css`,
`styles/download-page.css`).

## Where we are now

| Snapshot | Lines | Notes |
|---|---|---|
| Pre-redesign baseline (main) | 6,401 | Single mega-file with mixed concerns. |
| After first orphan sweep (`09c416c`) | 5,892 | Removed 78 classes tied to deleted UI (.tab-bar-*, .results-*, .grid-*, etc.). |
| After deeper sweep (`1c47412`) | 4,695 | 145 more classes (details-panel cluster, frame thumbnails, batch forms, etc.). |
| After persons extraction (`be7f4cd`) | 3,828 | 144 rule blocks moved to `styles/persons-page.css`. |
| After download extraction (`3ef5161`) | 2,183 | 303 rule blocks moved to `styles/download-page.css`. |
| After iterative orphan scrub (`497e72c`) | **2,161** | **Current.** Eight passes of comma-orphan removal until stable. |

Net reduction so far: **6,401 → 2,161 lines (−66 %)**.

Other CSS files at the same date:

| File | Lines | Purpose |
|---|---|---|
| `App.css` | 2,161 | Mostly legacy, see breakdown below. |
| `styles/design.css` | 342 | Tokens, topbar, layout, buttons, status pills, frame gradients. |
| `styles/clip-grid.css` | 421 | Search clip grid + inline player + Open Subtitles modal. |
| `styles/page-shared.css` | 109 | page-shell, page-head, card-section, settings rows, error banner. |
| `styles/persons-page.css` | 878 | All PersonsPage-only chrome. |
| `styles/download-page.css` | 1,625 | All DownloadPage-only chrome. |

## What's left in App.css

Roughly 83 unique base classes remain, falling into four buckets:

### 1. Legacy SearchPage controls (~28 classes, ~580 lines)
Used only by `SearchPage.jsx`'s in-page Search Mode / Sort By /
Filters strip. The redesign already lifted the search input,
language picker, and method toggle into the topbar; the page-local
controls below it still ride on these legacy class names:

`.search-controls`, `.controls-row`, `.control-group`, `.control-label`,
`.control-select`, `.search-input`, `.filter-toggle-button`,
`.filter-panel`, `.filter-row`, `.filter-group`, `.filter-group-wide`,
`.filter-label`, `.filter-date-inputs`, `.filter-duration-inputs`,
`.filter-input`, `.filter-separator`, `.filter-select`, `.filter-hint`,
`.filter-actions`, `.filter-clear-button`, `.image-drop-overlay`,
`.smart-search-info` (+ children), `.scripture-input` (+ children).

### 2. Legacy SearchPage face / image / scripture / save-person panels (~18 classes, ~350 lines)
Used by the empty-state panels rendered when the corresponding
search method is selected. Most of these moved into
`components/FaceSearchPanel`, `ImageUploadPanel`,
`ScriptureSearchPanel`, `SavePersonBanner` during the panel
extraction, but their CSS still lives in `App.css`:

`.face-drop-zone`, `.face-drop-hint`, `.face-search-controls`,
`.face-search-divider`, `.face-search-hint`, `.face-quick-actions`,
`.drop-indicator`, `.upload-image-button`, `.scripture-search-form`,
`.scripture-search-button`, `.scripture-hint`, `.scripture-colon`,
`.scripture-inputs`, `.save-person-banner`, `.save-person-form`,
`.save-person-input`, `.save-person-confirm`, `.save-person-cancel`,
`.save-person-text`, `.save-person-button`, `.person-select`,
`.empty-state.face-drop-zone.dragging`.

### 3. Truly shared utilities (~5 classes, ~60 lines)
Consumed by more than one page or component:

`.empty-state` (Search/Download/Persons + 3 panel components),
`.error-message` (Search/Download/Persons), `.toast` and `.toast-message`
(DownloadPage Toast + PersonsPage toast renderer). `.app` and
`.main-content` are wrappers used by the mockup-viewer branch in
`App.jsx`.

(`.face-crop-container` was previously listed here but already lives
in `styles/persons-page.css` — only PersonsPage references it.)

### 4. Genuinely orphan / dead (~30 classes, ~350 lines)
Rules with no current consumer; survived prior sweeps because their
last selector was paired with a still-active class via comma list.
Includes `.add-person-button`, `.assign-button` and several
`.appearance-thumbnail*` modifiers that were superseded by
persons-page.css equivalents.

## Sweep order for the rest

Each step is its own atomic commit, each verified with a 3-agent QC
panel (completeness + cross-page safety + runtime regression).

### Step 1 — Move SearchPage in-page controls into a new `styles/search-page.css`
Bucket #1 above. The SearchPage component is finally under the
600-line cap and its inner JSX is stable, so an extraction now is
low-risk. Expected impact: App.css ≈ **−320 lines** → ~1,840 (the
controls cluster spans App.css:22–283 plus the scripture sub-cluster
near 1011–1037 plus the small drag-overlay rule near 1484).

### Step 2 — Move SearchPage panel-specific styles into the panel components
Bucket #2 above. Each empty-state panel component
(FaceSearchPanel.jsx, ImageUploadPanel.jsx, ScriptureSearchPanel.jsx,
SavePersonBanner.jsx) gains its own `.css` sibling and CSS module
import. Expected impact: ≈ **−200 lines** → ~1,640 (the face-drop /
save-person / image-upload clusters span roughly App.css:858–1037).

### Step 3 — Promote the `.toast`, `.error-message`, `.empty-state` rules into `styles/page-shared.css`
Bucket #3. These are the truly shared utilities. Once they're in
the shared file, App.css can drop them. Expected impact: ≈ **−60
lines** → ~1,580.

### Step 4 — Sweep the remaining orphans
Bucket #4. Confirm with a per-class JSX grep that every selector in
the file has a current consumer before deleting. Expected impact:
≈ **−350 lines** → ~1,230.

### Step 5 — Audit what remains
Whatever survives Step 4 is genuinely shared between the redesign
and a legacy page that hasn't been refactored yet. Decide for each
remaining rule whether it (a) graduates into design tokens, (b)
stays in App.css as a temporary holding area, or (c) is dead and
removable.

## Ground rules during the sweep

- **Never delete the last selector of a multi-selector list without
  also moving its rule body somewhere.** The bug pattern that
  reviewer #1 caught on 3ef5161 (orphan trailing-comma silently
  extending into the next rule) is real — every extraction that
  touches a comma-list must move both the relevant selectors AND the
  rule body in one operation.
- **Run the iterative orphan-comma sweep after every extraction.**
  Sweeping once isn't always enough — removing a trailing-comma
  orphan can leave the line above it freshly orphaned.
- **Each commit must pass a three-reviewer QC panel** (completeness
  + cross-page safety + runtime regression check) before the next
  step starts.

## Final target

`App.css` removed entirely; everything lives in:

- `styles/design.css` — tokens + global resets + topbar + buttons
- `styles/clip-grid.css` — search results layout
- `styles/page-shared.css` — page-head, card-section, error-banner,
  toast, empty-state
- `styles/persons-page.css` — PersonsPage chrome
- `styles/download-page.css` — DownloadPage chrome
- `styles/search-page.css` — SearchPage chrome (created in Step 1)
- `components/<Panel>.css` — panel-specific styles (created in Step 2)

Estimated final state: **App.css = 0 lines (file deleted)**.
Cumulative deltas across Steps 1-4: ≈ −930 lines, leaving ~1,230
lines that need a Step 5 audit before the file can be removed
entirely.