refactor: simplify app sidebar boundary#88
Open
ALX99 wants to merge 4 commits into
Open
Conversation
5cf571d to
dd748db
Compare
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
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.
Simplification
Inline the single-use
Sidebarcomponent intoAppand removepi-web/src/web/components/sidebar.tsx.Why the current design is overcomplicated
Sidebaronly had one caller:App. It did not own state, effects, memoization, lifecycle behavior, styling logic, data transformation, or an independent public contract. It only unpacked the samestateandactionsobjects fromAppand forwarded their fields to the real sidebar child components.That added an extra ownership boundary and file to inspect without providing a reuse point or isolating behavior. Keeping the sidebar structure directly in
Appmakes the top-level layout visible where the bridge state is read, while preserving the existing specialized child components.Behavioral contract
The following behavior must remain unchanged:
Appstill callsuseBridge()once and uses the samestateandactionsvalues.<aside id="sidebar">with the same children in the same order.ConnectionStatusstill receivesstate.connectedandstate.reconnectAttempt.SessionListstill receives sessions, current path, new-session action, and switch-session action unchanged.ModelPickerstill receives the same models, selected model, search term, search setter, and model setter.ThinkingPickerstill receives the same thinking level, streaming-disabled state, and thinking setter.Chat,Composer, andToastprops and conditional toast rendering are unchanged.Before and after
Before:
AppcalleduseBridge()and passed the wholestateandactionsobjects intoSidebar.Sidebarimmediately unpacked those objects and forwarded individual fields toConnectionStatus,SessionList,ModelPicker, andThinkingPicker.app.tsxandcomponents/sidebar.tsxto see the top-level UI layout.After:
AppcallsuseBridge()and renders the same<aside id="sidebar">directly.Sidebar.pi-web/src/web/components/sidebar.tsxis removed.Specific evidence:
pi-web/src/web/components/sidebar.tsx.Sidebarimport frompi-web/src/web/app.tsx.Validation
Commands run:
git clone --depth 1 https://github.com/ALX99/dotfiles.git /tmp/dotfiles— failed in this environment becausegithub.comcould not be resolved by the shell environment.App/Sidebarboundary.Sidebar— passed; onlyapp.tsx,components/sidebar.tsx, and CSS references were found.Sidebarwas moved intoAppwith the same child order and same prop expressions.pi-web/src/web/app.tsx— passed; confirmed the inlined sidebar structure is present.pi-web/src/web/components/sidebar.tsx— returned 404 as expected after deletion.Because local dependency installation and test execution were unavailable from this runtime, I did not claim
npm run typecheck,npm run build, ornpm testresults.Risk assessment
The behavior-sensitive area is the top-level pi-web layout. The change is safe because it does not alter component implementations, state updates, reducer behavior, WebSocket bridge behavior, command dispatch, protocol guards, CSS selectors, or any persisted/configured data. The same
aside#sidebarelement and the same child components remain, with the same props and callbacks.The main possible risk is an import/typecheck issue from manual editing. This is mitigated by keeping the imported component set exactly aligned with the moved JSX and by deleting only the now-unused pass-through component.
Scope
Intentionally not simplified:
ConnectionStatus,SessionList,ModelPicker, andThinkingPicker; each still owns a distinct UI responsibility and keeping them separate avoids a broader rewrite.Chat,Composer, and toast rendering; they are not part of the sidebar pass-through boundary.aside#sidebaris preserved, so no styling change is needed.