feat: implement tap & hold to select shelf items

[masonfox]

Summary

Implements tap & hold gesture to enter select mode on shelf items, eliminating the need to scroll to the top to press the "Select" button.

Key Features:

• Long-press (500ms) on book card body enters select mode and auto-selects the item
• Separate touch targets: drag handle (200ms) vs card body (500ms) to avoid conflicts
• 10px movement tolerance to prevent activation during scrolling
• Mobile-focused UX improvement

Resolves: #414

---

Changes

New Files

• hooks/useLongPress.ts - Reusable long-press detection hook
  • Configurable delay (default 500ms)
  • Touch and mouse event support
  • Movement tolerance to distinguish from scrolling

Modified Files

• hooks/useBookListView.ts - Added enterSelectModeWithSelection(bookId) function
• components/Books/BookListItem.tsx - Integrated long-press handlers on card body
• components/Books/DraggableBookList.tsx - Passes long-press handler to items
• app/shelves/[id]/page.tsx - Wires up new functionality on mobile list views

---

Technical Details

Touch Target Separation

• Drag Handle (left side): Long-press 200ms → Triggers drag-and-drop
• Book Card Body: Long-press 500ms → Enters select mode + selects item

This eliminates timing conflicts between drag and select gestures.

Behavior

1. User long-presses on book card (NOT in select mode)
2. After 500ms: enters select mode + selects that book
3. BulkActionBar appears at bottom
4. User can tap other books to select/deselect
5. Existing "Select" button still works

Safeguards

• Long-press handlers only active when NOT already in select mode
• 10px movement tolerance cancels long-press (allows smooth scrolling)
• Drag handles unchanged (keep existing 200ms drag behavior)
• Desktop tables unchanged (not needed for desktop UX)

---

Testing

✅ All 4013 tests pass

Manual Testing Checklist

• Long-press on book card body enters select mode + selects item
• Long-press on drag handle still triggers drag-and-drop
• Quick tap on book card still navigates to detail page
• Scrolling doesn't accidentally trigger selection (10px tolerance)
• In select mode, long-press is disabled (tap to select/deselect)
• BulkActionBar appears/works correctly
• Desktop tables unaffected

---

Mobile UX Benefits

Before: User must scroll to top → press "Select" button → scroll back down → select items

After: User long-presses on any item → immediately in select mode with that item selected → continue selecting

Much faster and more intuitive, especially on mobile devices.

[codecov]

Codecov Report

❌ Patch coverage is 97.82609% with 1 line in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
hooks/useLongPress.ts	97.82%	0 Missing and 1 partial ⚠️

@@             Coverage Diff             @@
##           develop     #415      +/-   ##
===========================================
+ Coverage    78.67%   78.79%   +0.11%     
===========================================
  Files          167      168       +1     
  Lines         7559     7605      +46     
  Branches      1850     1860      +10     
===========================================
+ Hits          5947     5992      +45     
  Misses        1127     1127              
- Partials       485      486       +1     

Flag	Coverage Δ
unittests	78.79% <97.82%> (+0.11%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
hooks/useLongPress.ts	97.82% <97.82%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[masonfox]

@copilot review this PR

[Copilot]

@copilot review this PR

Reviewed the PR. The implementation is clean and well-structured. Two issues found and fixed in commit f623bb4:

Bug fix — missing onTouchCancel handler (hooks/useLongPress.ts)
When the browser cancels a touch gesture (e.g., OS notification, scroll handoff), touchcancel fires instead of touchend. The hook wasn't handling this, leaving orphaned setTimeout callbacks. Added onTouchCancel that calls cancel() and wired it into the returned handlers. Test coverage added.

Accessibility fix — Enter key not activating selection (components/Books/BookListItem.tsx)
The handleKeyDown only handled the Space key, but per the ARIA spec, elements with role="button" must respond to both Space and Enter. Updated the handler and the aria-label accordingly.

Everything else looks solid — movement tolerance, cleanup on unmount, prop drilling pattern, conditional handler spreading, and memo comparison all look correct. CodeQL scan and code review both came back clean.