feat(sidebar): collapsible Projects section#132
Merged
johannesjo merged 2 commits intoMay 21, 2026
Merged
Conversation
Add a collapse/expand toggle to the sidebar Projects section header. Collapsing hides the project list and reclaims the space for the tasks section; a chevron on the header reflects the state. The collapsed flag (`projectsCollapsed`) persists via the existing settings persistence so it survives app restarts. Closes johannesjo#130 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Address review feedback on the collapsible Projects section: - Animate the Projects list collapse via a CSS grid-rows transition so the state change no longer snaps. Adds an outer `.projects-collapser` and an intermediate `.projects-clip` so the inner scroll container keeps its own `overflow-y: auto`. Honours `prefers-reduced-motion`. - Skip "project mode" in `navigateRow` while collapsed and drop `sidebarFocusedProjectId` on collapse so arrow keys don't walk through invisible items. - Give the header toggle a hover background and `:focus-visible` ring via `.projects-toggle` so the row reads as clickable. - Update the openspec change: tasks now match the shipped helper name and add a navigation scenario; persistence + ui tests harden the invalid-value guard and cover the focus-clear behaviour.
Contributor
Author
|
@johannesjo to review, whenever was time for it. |
Owner
|
Thank you very much @VitorRibeiroCustodio ! <3 |
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
Makes the sidebar Projects section collapsible. The section is currently always expanded and always occupies a capped slice of vertical space (
40vh, ormin(24vh, 180px)when dense). Users who keep many projects but spend most of their time in the tasks list pay that fixed space even when not switching projects.What changed
projectsCollapsedflag — no backend/IPC change, rides the existing persisted-state file);aria-expanded/aria-controlsfor accessibility;Implementation
src/components/Sidebar.tsx— header<label>→ toggle<button>with chevron; project list wrapped in<Show when={!projectsCollapsed}>;src/store/— persistedprojectsCollapsedflag wired throughtypes,core,autosave,persistence;setProjectsCollapsedsetter inui.ts;openspec/changes/add-collapsible-projects-section/— proposal, spec, tasks;Testing
npm run lint— passnpm test— 1007 passed (4 new tests cover the persisted flag)npm run typecheck— passopenspec validate --type change add-collapsible-projects-section --strict— passDemo
Screen.Recording.2026-05-21.at.09.35.16.mov