refactor(penpal): decompose Layout.tsx into focused components - #528
Merged
Conversation
loganj
force-pushed
the
loganj/penpal-19-decompose-layouttsx
branch
from
March 29, 2026 04:23
b7c3c93 to
bf3f9b1
Compare
loganj
marked this pull request as ready for review
March 29, 2026 04:53
loganj
force-pushed
the
loganj/penpal-19-decompose-layouttsx
branch
from
March 29, 2026 14:06
a50e93f to
b7c3c93
Compare
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b7c3c9353c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
loganj
force-pushed
the
loganj/penpal-19-decompose-layouttsx
branch
from
March 29, 2026 14:10
b7c3c93 to
acb2c78
Compare
Extract Topbar, TabBar, HomeSidebar, and ProjectSidebar from the monolithic Layout.tsx into separate component files. Layout.tsx remains the orchestrator managing shared state, SSE, navigation, and context menus while the extracted components handle UI rendering. - Topbar (53 lines): back/forward nav, logo, search, theme toggle - TabBar (37 lines): tab management with activate, close, new tab - HomeSidebar (242 lines): workspace tree, standalone projects, global nav, view options panel - ProjectSidebar (330 lines): breadcrumb, worktree dropdown, source file trees, in-review section Layout.tsx reduced from 1368 to 926 lines (32% reduction). No behavior changes -- pure refactor with all existing tests passing. Closes PENPAL-19 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
loganj
force-pushed
the
loganj/penpal-19-decompose-layouttsx
branch
from
March 29, 2026 14:14
acb2c78 to
931f602
Compare
loganj
added a commit
that referenced
this pull request
Mar 30, 2026
…-file-dis * origin/main: fix(penpal): ensure repo badges are generated when repos are added (#534) fix(penpal): show agent selector dropdown below trigger button (#532) fix(penpal): filter ANCHORS.md from anchors source (#533) fix(penpal): show wave animation in sidebar when run phase is unknown (#531) fix(penpal): anchor stability improvements and code block highlights (#530) refactor(penpal): decompose Layout.tsx into focused components (#528) # Conflicts: # apps/penpal/frontend/src/components/Layout.tsx
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
1 participant
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.
Layout.tsx had grown to 1369 lines, making it difficult to navigate and maintain. This refactor decomposes it into focused modules (926 lines remaining, 32% reduction) with clear responsibilities:
debounce,buildFileTree,flattenTreemoved toutils/useSidebarResize,useActiveProject,useProjectFiles,useInstallToolsextracted tohooks/Topbar,TabBar,HomeSidebar,ProjectSidebarextracted with each owning its own internal state (expansion, dropdowns, search, theme)Layout.tsx remains the orchestrator for SSE, menu events, selection, modals, and link interception.
No behavior changes — all 224 frontend unit tests, 14 Go backend packages, and 23 e2e tests pass (2 pre-existing e2e failures unrelated to this change).
Closes https://linear.app/squareup/issue/PENPAL-19