Skip to content

feat: implement swipe back gesture with visual indicator - #19

Merged
EduTiyo merged 1 commit into
mainfrom
feat/swipe-back-gesture
Sep 20, 2026
Merged

EduTiyo merged 1 commit into
mainfrom
feat/swipe-back-gesture

Conversation

@EduTiyo

@EduTiyo EduTiyo commented Sep 20, 2026

Copy link
Copy Markdown
Owner

Summary

Adds native-feeling trackpad back gesture navigation (similar to Safari and Chrome on macOS), allowing users to return from the project editor to the project list via a two-finger horizontal swipe.

Changes

  • useTrackpadBack hook:
    • Detects two-finger horizontal swipes (wheel with negative deltaX) on macOS trackpads.
    • Seamlessly integrates with the existing isDirty state and confirmation dialog (UnsavedChangesDialog) before discarding unsaved edits.
    • Prevents conflict with horizontally scrollable inner elements (isInsideHorizontallyScrollable) and ignores vertical scrolling.
    • Adds browser shortcut companions: ⌘ + [ (macOS), Alt + ← (cross-platform), and mouse button 4 (auxclick).
    • Includes a momentum cooldown and state reset lifecycle to ensure the gesture can be triggered reliably and repeatedly across sessions.
  • SwipeBackIndicator component:
    • Unified concentric SVG geometry with circular progress tracking ((24, 24) center coordinates).
    • Smoothly slides out from the left screen edge and visually tracks gesture progress from 0% to 100%.
    • Highlights upon threshold completion with a brief confirmation pause (~110ms) before committing navigation.
  • index.css:
    • Adds overscroll-behavior-x: none; on html, body, #root to prevent WKWebView horizontal rubber-band elastic bounce.

Verification

  • Open any project in the editor and swipe right with two fingers on trackpad -> smoothly transitions back to project list.
  • Modify a field without saving and swipe right -> triggers UnsavedChangesDialog properly.
  • Open and navigate back repeatedly across multiple projects without restarting the app.
  • Verified build passes with zero errors: npm run build.

@EduTiyo EduTiyo self-assigned this Sep 20, 2026
@EduTiyo
EduTiyo merged commit 34b66c3 into main Sep 20, 2026
1 check passed
@EduTiyo
EduTiyo deleted the feat/swipe-back-gesture branch September 20, 2026 18:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant