UI overhaul Phase 7a: extract InputSettingsForm from App.tsx - #199
Merged
Conversation
Begin the App.tsx cleanup (the third "all three" target) with the safe, self-contained piece: extract the analysis-settings controls — the ANALYSIS MODE selector plus the pitch/note, MT3, and AI-interpretation toggles — into a stateless InputSettingsForm component. - New components/InputSettingsForm.tsx renders the four sibling controls verbatim. It's fully controlled: every value and change handler is owned by App and passed in (isAnalyzing, analysisMode, the three requested flags + their setters, the config-enabled flags, phase2StatusBadge, phase2HelperCopy). The native <input>/<select> controls keep their exact aria-labels (ANALYSIS MODE / PITCH/NOTE TRANSLATION / MT3 POLYPHONIC TRANSCRIPTION / AI INTERPRETATION) so the Playwright smoke suite's getByLabel + check/uncheck locators keep working. - App.tsx mounts it in place inside the input-panel; all state stays in App. Pure move — no behavior change; the input-panel testid, the phase2-status-inline testid, and the locked input-panel background are untouched. App.tsx: 1515 -> 1406. tsc, lint:style, build, and all 830 unit tests green with zero test changes. (App.tsx hooks — useEstimatePolling / useAnalysisProjection — are separate, riskier refactors left for follow-ups.) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016to3B8Hf9eAGxAbzpQNvku
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Begins the App.tsx cleanup (the third "all three" target) with the safe, self-contained piece: extracts the analysis-settings controls — the ANALYSIS MODE selector plus the pitch/note, MT3, and AI-interpretation toggles — into a stateless
InputSettingsFormcomponent.Changes
components/InputSettingsForm.tsxrenders the four sibling controls verbatim. Fully controlled — every value and change handler is owned by App and passed in (isAnalyzing,analysisMode, the three requested flags + setters, the config-enabled flags,phase2StatusBadge,phase2HelperCopy). The native<input>/<select>controls keep their exact aria-labels (ANALYSIS MODE/PITCH/NOTE TRANSLATION/MT3 POLYPHONIC TRANSCRIPTION/AI INTERPRETATION) so the Playwright smoke suite'sgetByLabel+ check/uncheck locators keep working.App.tsxmounts it in place inside the input-panel; all state stays in App.App.tsx: 1515 → 1406.Chain of custody / contract
Untouched. Pure move — the
input-paneltestid, thephase2-status-inlinetestid, and the lockedinput-panelbackground (rgb 68,68,68) are all preserved. State and handlers stay in App.Verification
npm run lint(tsc) ✅npm run lint:style✅npm run build✅npm run test:unit— 830 passed, zero test changes (pure move)getByLabel) + Chromatic gate in CI.Next
The App.tsx hooks —
useEstimatePollinganduseAnalysisProjection(the latter chain-of-custody critical, must preserve identical signature/deps/try-catch) — are separate, riskier refactors I'll tackle individually as follow-ups.🤖 Generated with Claude Code
https://claude.ai/code/session_016to3B8Hf9eAGxAbzpQNvku
Generated by Claude Code