Improve touch device handling and remove Capacitor-specific sheet logic

[2witstudios]

Summary

This PR improves touch device detection and interaction handling across the application by introducing a new useTouchDevice hook and removing Capacitor-specific sheet auto-close logic that was causing issues with sidebar navigation.

Key Changes

• New useTouchDevice hook: Created a reliable touch device detection mechanism using media queries (pointer: coarse) instead of event-based detection. Uses useSyncExternalStore for proper SSR support.

• Removed Capacitor-specific sheet logic: Deleted the useEffect in Layout.tsx that was auto-closing sheets on navigation for Capacitor apps. This was causing sheets to close unexpectedly when navigating via sidebar items.

• Enhanced DriveList touch handling:

  • Integrated useTouchDevice hook to conditionally apply hover effects
  • Disabled onMouseEnter/onMouseLeave handlers on touch devices
  • Made action buttons always visible on touch devices (opacity-100)

• Enhanced PageTreeItem touch handling:

  • Applied same touch-aware hover logic to page tree items
  • Prevents unintended hover states on touch devices
  • Added "Add child page" context menu option

• Cleanup: Removed unused imports (usePathname, isCapacitorApp) from Layout.tsx

Implementation Details

The new useTouchDevice hook uses the CSS media query (pointer: coarse) which is more reliable than checking for touch events, as it properly detects touch-capable devices including hybrid devices. The hook properly handles SSR with getServerSnapshot returning false and subscribes to media query changes for real-time updates.

Touch-aware components now skip hover state updates on touch devices, improving UX by preventing hover effects from interfering with touch interactions while keeping action buttons visible for accessibility.

https://claude.ai/code/session_0161mxvPnF8VSAZKVzkGCKi4

Summary by CodeRabbit

• New Features

  • Added "Add child page" option to the page tree context menu.

• Improvements

  • Better touch-device support: hover-based controls now adapt to touch input.
  • Action buttons are more reliably visible on touch-enabled devices.
  • New touch-detection logic used across layout and lists for consistent behavior.

• Bug Fixes

  • Removed automatic sheet-closing behavior that could interrupt navigation on mobile.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[coderabbitai]

📝 Walkthrough

Walkthrough

Removed Capacitor-specific navigation auto-close from Layout; added a new client-side useTouchDevice hook and integrated it into DriveList and PageTreeItem to disable hover interactions on touch devices and add an "Add child page" context menu item.

Changes

Cohort / File(s)	Summary
Layout cleanup apps/web/src/components/layout/Layout.tsx	Removed usePathname import/usage and Capacitor-specific useEffect that auto-closed left/right sheets on navigation; simplified imports to useRouter.
Touch-device detection hook apps/web/src/hooks/useTouchDevice.ts	Added new client-side hook using useSyncExternalStore with media query (pointer: coarse) to expose isTouchDevice (server snapshot returns false).
Drive list touch integration apps/web/src/components/layout/left-sidebar/DriveList.tsx	Imported and used useTouchDevice; passed isTouchDevice into DriveListItem instances; gated hover handlers and adjusted action-button opacity behavior for touch devices.
Page tree touch & context menu apps/web/src/components/layout/left-sidebar/page-tree/PageTreeItem.tsx	Added useTouchDevice to disable hover-based UI on touch devices; imported FolderPlus icon and added a new "Add child page" context-menu item (non-trash view).

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix(ios): improve mobile keyboard UX and touch interactions #250 — Related changes to touch/interaction handling in PageTreeItem and similar components.
• fix(ui): fix Activity and History buttons not opening sheet on mobile #273 — Related work touching sheet open/close logic and Layout sheet state handling.

Poem

🐰 I nibble bugs and hop through code,
Detecting touches on the road.
No hover when thumbs arrive,
New hooks help the UI thrive.
Child pages sprout—Hoppity, go! 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes both main changes: introducing touch device handling and removing Capacitor-specific sheet logic, which are the core objectives of this PR.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/mobile-sidebar-touch-menu-4ZOPU

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@apps/web/src/hooks/useTouchDevice.ts`:
- Around line 12-22: The subscribe function currently uses
mediaQueryList.addEventListener/removeEventListener which breaks in Safari <14;
update subscribe to feature-detect and use addEventListener/removeEventListener
when available and fall back to
mediaQueryList.addListener/mediaQueryList.removeListener otherwise (use a single
variable for the listener) so the same callback is registered/unregistered;
reference the TOUCH_QUERY constant and the mediaQueryList variable inside
subscribe to locate where to change the code.