chore(desktop): extract useAutoCollapse hook, tidy sidebar logic#1652
Merged
Conversation
Follow-up to #1585. The responsive sidebar logic was split across six refs (autoSideCollapsedRef / autoCtxCollapsedRef / suppressSide... / suppressCtx... / sideCollapsedRef / ctxCollapsedRef) and a 70-line useEffect that did everything inline. Each panel's "is this collapsed because the user asked, or because the layout forced it" state was encoded across two of those refs; the resize logic had to spell out all 6 stage-transition combinations by hand. Extracted the per-panel collapse into useAutoCollapse(persistKey): - collapsed: the boolean for CSS - toggle: user-driven flip; persists to localStorage - requireCollapsed: layout asks for collapsed — claims as auto if the panel wasn't already collapsed - releaseCollapsed: layout asks for expanded — restores only if WE collapsed it (manual collapses stay) The resize effect drops to one branch per stage: WIDE → release both COMPACT → require ctx (only when entering from wider — coming from narrow we preserve a user's manual ctx-open); release side NARROW → require both Also: fixed the one-line CSS indent slip on .app[data-side-collapsed]. Behavior is unchanged — same five stage-transition outcomes that #1585 hand-coded, just expressed declaratively.
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.
What
Refactor of #1585's responsive sidebar logic. Same behavior, fewer moving parts.
Why
The merged version split each panel's "is this collapsed because the user asked, or because the layout forced it" across six refs:
```
autoSideCollapsedRef autoCtxCollapsedRef
suppressSidePersistRef suppressCtxPersistRef
sideCollapsedRef ctxCollapsedRef
```
Plus a 70-line resize `useEffect` that hand-coded all six stage-transition combinations. Hard to scan; easy to break a corner case (e.g. NARROW → COMPACT preserving the user's manual ctx-open) without noticing.
How
Extracted per-panel collapse into a hook:
```ts
const {
collapsed, toggle,
requireCollapsed, releaseCollapsed,
} = useAutoCollapse(persistKey);
```
The resize effect drops to one branch per stage:
```
WIDE → release both
COMPACT → require ctx (only when entering from WIDE — coming from NARROW we preserve a user's manual ctx-open); release side
NARROW → require both
```
Also fixed the one-line CSS indent slip on `.app[data-side-collapsed]`.
Behavior matrix (unchanged from #1585)
Diff stats
```
desktop/src/App.tsx | 140 +++++++++++--------------------------------------
desktop/src/styles.css | 2 +-
desktop/src/ui/useAutoCollapse.ts (new) | 47 +++++++++++
```
Net: -33 lines, hook isolated, fewer refs to keep in your head.
Checklist