feat(file-browser): open compact drawer from edge swipe - #304
Open
DrJsPBs wants to merge 4 commits into
Open
Conversation
Add a compact-layout left-edge touch swipe opener for the file explorer drawer while preserving the existing button toggle and file-tree long-press behavior. Also cover the new gesture with hook and App-level tests.
Stabilize the compact drawer swipe open callback and simplify the swipe hook to avoid root-level rerenders on pointer moves. Also ignore secondary touches during an active swipe and cover that behavior in the hook tests.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughEdge-swipe-to-open for the compact file browser was added: a new Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant App
participant useEdgeSwipeToOpen
participant FileBrowserState
User->>App: pointerDown at left edge (touch)
App->>useEdgeSwipeToOpen: onPointerDown(event)
useEdgeSwipeToOpen->>useEdgeSwipeToOpen: capture pointer, record start coords
User->>App: pointerMove (predominantly horizontal)
App->>useEdgeSwipeToOpen: onPointerMove(event)
useEdgeSwipeToOpen->>useEdgeSwipeToOpen: compute deltas, check vertical drift
alt horizontal threshold reached
useEdgeSwipeToOpen->>App: invoke onOpen()
App->>FileBrowserState: set fileBrowserCollapsed = false
FileBrowserState->>App: render file-tree-panel
else vertical drift exceeded
useEdgeSwipeToOpen->>useEdgeSwipeToOpen: abort gesture, release capture
end
User->>App: pointerUp/pointerCancel
App->>useEdgeSwipeToOpen: onPointerUp/Cancel(event)
useEdgeSwipeToOpen->>useEdgeSwipeToOpen: reset gesture state
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/App.tsx`:
- Around line 1061-1072: The transparent fixed overlay (rendered when
compactFileBrowserSwipeEnabled) blocks taps on underlying compact controls;
instead move the pointer event listeners off that z-20 div and attach them to a
top-level container that already spans the viewport (e.g., app shell/root
container) in the capture phase using the same handlers
(compactFileBrowserSwipe.bind.onPointerDown/onPointerMove/onPointerUp/onPointerCancel),
and keep the hook’s internal clientX <= EDGE_SWIPE_ZONE_PX guard so only
edge-originating gestures start the swipe; alternatively, if you must keep an
element, ensure it does not intercept normal taps (e.g., pointer-events: none by
default and enable only when a pointerdown originates inside EDGE_SWIPE_ZONE_PX)
to avoid blocking underlying buttons.
In `@src/features/file-browser/hooks/useEdgeSwipeToOpen.ts`:
- Around line 31-80: The reset() helper currently clears pointerIdRef and
startRef but never releases any active pointer capture; update reset() to, if
pointerIdRef.current is non-null, attempt
eventTarget.releasePointerCapture(pointerIdRef.current) on the element that had
capture (wrap in try/catch because capture may be unavailable) before nulling
refs, and ensure onPointerDown stores the currentTarget (or otherwise can locate
the element) so reset can release on the same element; additionally add a
useEffect watching enabled that when enabled flips to false calls reset() (and
run reset() on unmount) to clear gesture state mid-stream; reference
functions/refs: reset, onPointerDown, pointerIdRef, startRef, onPointerMove,
onPointerUp, onPointerCancel, and add the useEffect for enabled cleanup.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3e890d5d-556a-4b61-bb04-160fbec71b6d
📒 Files selected for processing (4)
src/App.test.tsxsrc/App.tsxsrc/features/file-browser/hooks/useEdgeSwipeToOpen.test.tssrc/features/file-browser/hooks/useEdgeSwipeToOpen.ts
Move compact drawer swipe detection onto the app shell capture path so the edge gesture no longer overlays or blocks existing controls. Also release pointer capture and reset gesture state when the hook is disabled or unmounted.
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.
What
Add a compact-layout left-edge touch swipe gesture that opens the file explorer drawer.
Why
This gives touchscreen users a second way to open the compact file browser without removing or changing the existing button-based toggle.
How
useEdgeSwipeToOpenhook insrc/features/file-browser/hooks/to detect a narrow left-edge touch swipe and call the drawer opener only after a deliberate horizontal thresholdsrc/App.tsx, where compact layout and drawer visibility already live, and render a compact-only swipe zone when the drawer is collapsedType of Change
Checklist
npm run lintpassesnpm run build && npm run build:serversucceedsnpm test -- --runpassesScreenshots
Not included. The change is a touch gesture opener and was verified through automated tests and live service validation.
Test Evidence
npm run lintnpm run buildnpm run build:servernpm test -- --runFull test result from the latest run:
139test files passed1814tests passedNotes:
act(...)warnings still appear in the suite, but the run exits successfully.Summary by CodeRabbit
New Features
Tests