[Arch] frontend/src/pages/Settings.tsx is a 988-line monolithic component #59

New issue

Closed

opened 2026-07-01 07:26:55 +02:00 by bullitt · 1 comment

bullitt commented

2026-07-01 07:26:55 +02:00

Owner

Severity: High | Category: Frontend

Settings() spans lines 229-1217: ~40 inline useState hooks, a 155-line handleSave, 7 inline section blocks covering unrelated feature areas. handleSave also calls a raw unchecked fetch() instead of the typed api.ts wrapper.

Recommendation: Extract each section (Notifications, TrackingInbox, Scrapers, Parsers, General, System, About) into frontend/src/pages/settings/*.tsx; keep Settings.tsx as a thin router. Fix the raw fetch to use api.ts and check resp.ok.

Refactoring safety: Add a smoke test (render + save happy path) for at least one section before extracting.

Full detail: docs/architecture-review.md § C + § H.9

**Severity:** High | **Category:** Frontend `Settings()` spans lines 229-1217: ~40 inline `useState` hooks, a 155-line `handleSave`, 7 inline section blocks covering unrelated feature areas. `handleSave` also calls a raw unchecked `fetch()` instead of the typed `api.ts` wrapper. **Recommendation:** Extract each section (Notifications, TrackingInbox, Scrapers, Parsers, General, System, About) into `frontend/src/pages/settings/*.tsx`; keep `Settings.tsx` as a thin router. Fix the raw fetch to use `api.ts` and check `resp.ok`. **Refactoring safety:** Add a smoke test (render + save happy path) for at least one section before extracting. Full detail: `docs/architecture-review.md` § C + § H.9

bullitt added the

arch

label

2026-07-01 07:27:47 +02:00

bullitt commented

2026-07-01 08:43:49 +02:00

Author

Owner

Fixed on branch architecture-rework, commit 482c837: extracted each section into frontend/src/pages/settings/*.tsx; Settings.tsx shrinks from 1,217 to 406 lines. Kept the shared settings state + single handleSave in the parent (matches existing UX — every section's "Save changes" saves the full payload), moved section-local UI state (show-password toggles, test-connection state, parser search) into each section component. Also fixed the raw unchecked fetch("/api/settings", ...) calls by adding fetchSettings()/fetchScrapers()/updateSettings() to lib/api.ts. Verified: tsc, eslint, knip, vite build all pass.

Fixed on branch `architecture-rework`, commit 482c837: extracted each section into `frontend/src/pages/settings/*.tsx`; `Settings.tsx` shrinks from 1,217 to 406 lines. Kept the shared settings state + single `handleSave` in the parent (matches existing UX — every section's "Save changes" saves the full payload), moved section-local UI state (show-password toggles, test-connection state, parser search) into each section component. Also fixed the raw unchecked `fetch("/api/settings", ...)` calls by adding `fetchSettings()`/`fetchScrapers()`/`updateSettings()` to `lib/api.ts`. Verified: `tsc`, `eslint`, `knip`, `vite build` all pass.

bullitt closed this issue

2026-07-01 08:44:01 +02:00

bullitt referenced this issue from a commit

2026-07-01 09:15:22 +02:00

refactor(frontend): split Settings.tsx into per-section components (fixes #59)