File size: 7,516 Bytes
7ea1851 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | # 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.
|