refactor(spa): split DetailPage/ListPage into focused modules (#657)#662
Merged
Merged
Conversation
Behavior-preserving refactor. Move DetailPage's inner components into one-per-file modules under apps/web/src/pages/detail/ and lift ListPage's pure helpers into apps/web/src/pages/list/helpers.ts. The page components keep their original paths and named exports; no runtime behavior, props, or rendered output changed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
Summary
Behavior-preserving refactor of the two largest SPA page files (#657). Move-and-import only — no runtime behavior, props, hook order, or rendered output changed.
DetailPage.tsx(1100 LOC) defined 9 components inline;ListPage.tsx(886 LOC) carried two pure helpers at the bottom. The inner pieces now live in sibling modules so each file is focused and navigable. The public page components (DetailPage,ListPage) keep their original paths and named exports, so no importer (App.tsx, tests) changed.What was extracted
apps/web/src/pages/DetailPage.tsx→apps/web/src/pages/detail/:DetailValue.tsxFieldsetSection.tsxObjectActionButton.tsxEditForm.tsx(incl.SaveActiontype,EditFormProps,initialValueFor)CustomViewsMenu.tsxDeleteButton.tsxCollapsedEmptyInline.tsxInlineSection.tsxapps/web/src/pages/ListPage.tsx→apps/web/src/pages/list/helpers.ts:capitalize,emptyLabelEach newly-exported component/helper carries a
/**JSDoc; noany; named exports throughout (matches repo style). Every type, prop interface, hook call order, and JSX block was moved verbatim.Before / after LOC
DetailPage.tsx: 1100 → 323ListPage.tsx: 886 → 874Verification (all green, from
frontend/)pnpm lint:js✅pnpm lint:css✅pnpm typecheck✅ (all 13 workspace projects)pnpm test✅ (222 tests, 31 files)pnpm build✅ (vite build, 1847 modules)The passing test + typecheck + build are the proof the refactor preserved behavior.
Notes
No version bump, no release. Untracked
examples/*/migrations/*.pyleft unstaged; build-emitted static assets reverted so only source moves are committed.Closes #657
🤖 Generated with Claude Code