feat(gotjunk): Ergonomic map controls for one-handed thumb operation

[Foundup]

Summary

Repositioned all map UI controls to the bottom 1/3 of screen for optimal one-handed thumb accessibility, following Occam's Razor for simplest ergonomic design.

Changes

Control Positioning (Before → After)

Close Button (×):

• Before: top-0 right-0 (top-right corner) ❌ Hard to reach
• After: bottom-36 left-4 (bottom-left thumb zone) ✓ Easy thumb access

Zoom Controls (+/−/📍):

• Before: top-24 right-4 (top-right below header) ❌ Hard to reach
• After: bottom-36 right-4 (bottom-right thumb zone) ✓ Natural right thumb position

Info/Legend Button (ℹ️):

• Before: top-20 left-4 (top-left) ❌ Hard to reach
• After: bottom-52 left-4 (bottom-left above close button) ✓ Easy thumb access

Button Size:

• Before: w-10 h-10 (40x40px) ❌ Small target
• After: w-12 h-12 (48x48px) ✓ Better thumb hit area

New Layout

┌─────────────────────────────────────┐
│  🗺️ GotJunk Map (centered header)  │
│                                      │
│                                      │
│         [MAP INTERACTION]            │
│         [CLEAR CENTER AREA]          │
│                                      │
│                                      │
│  [ℹ️]                       [+]      │  bottom-52/36
│  [×]                        [−]      │  bottom-36
│                             [📍]     │  bottom-36
│                                      │
│  [Nav Bar]                           │  bottom-0
└─────────────────────────────────────┘

Left side (bottom-left):   Right side (bottom-right):
  - Info button (ℹ️)         - Zoom in (+)
  - Close button (×)         - Zoom out (−)
                              - Center location (📍)

Ergonomic Benefits

✓ Thumb Zone Compliance: All controls in bottom 1/3 of screen (natural thumb arc)
✓ One-Handed Operation: No stretching to top corners
✓ Clear Map Center: Interaction area remains unobstructed
✓ Logical Grouping: Related controls stacked vertically
✓ Bigger Targets: 48x48px buttons easier to tap
✓ Occam's Razor: Simplest possible thumb-accessible layout

Mobile UX Best Practices

• ✅ Follows iOS/Android thumb zone guidelines
• ✅ Avoids "death zones" (top corners hardest to reach)
• ✅ Supports left/right-handed use (symmetric bottom positioning)
• ✅ No accidental taps (controls separated from nav bar)
• ✅ Maintains visual hierarchy (header at top, controls at bottom)

Implementation Details

File: PigeonMapView.tsx

Changes:

• Lines 93-113: Header simplified, close button extracted
• Lines 102-113: Close button repositioned to bottom-left
• Lines 115-152: Zoom controls moved to bottom-right with larger size
• Lines 262-271: Info button moved to bottom-left above close

Positioning Values:

Close button:  bottom-36 left-4  = 144px from bottom, 16px from left
Zoom controls: bottom-36 right-4 = 144px from bottom, 16px from right
Info button:   bottom-52 left-4  = 208px from bottom, 16px from left

Testing

• ✅ Build successful: 417.52 KB (gzipped: 131.00 kB) in 3.09s
• ✅ TypeScript compilation passed
• Manual testing required: Verify thumb reach on iPhone 11-16

Screenshots Needed

Test on device with user screenshot showing:

1. ✓ Close button reachable with left thumb
2. ✓ Zoom controls reachable with right thumb
3. ✓ Info button reachable with left thumb
4. ✓ No overlap with bottom nav bar
5. ✓ Clear center map area

Files Modified

• PigeonMapView.tsx

🤖 Generated with Claude Code