[Gap-Audit] 028 Enhanced Geolocation: address search + mobile GPS + click-to-set + accuracy viz + IP fallback

[TortoiseWolfe]

Summary

Only the consent gate exists. The full enhanced-geolocation experience (multi-strategy: address search, mobile GPS, click-to-set, IP fallback) is not started. Depends on feature 021 (Geolocation Map).

What's shipped

• src/components/map/GeolocationConsent/ consent gate

Gaps

• Desktop address search with autocomplete
• Mobile GPS with real-time accuracy indicator
• Click-to-set map interaction
• Accuracy radius visualization
• IP fallback with city-level indication
• Per-fork env var configuration (depends on 021)

Reference

• Spec: features/polish/028-enhanced-geolocation/spec.md
• Depends on: 021-geolocation-map

[TortoiseWolfe]

Next-session primer

Goal: implement the multi-strategy enhanced geolocation: address search autocomplete, mobile GPS with accuracy indicator, click-to-set, accuracy radius visualization, IP fallback.

Effort: large (~2-3 days) — five distinct sub-features
Blocked on: nothing — but P3 (no users blocked)

What's already shipped

• src/components/map/GeolocationConsent/ — consent gate
• src/app/map/page.tsx — map route
• Leaflet integration with built-in keyboard nav ([Gap-Audit] 021 Geolocation Map: keyboard navigation + accuracy radius + popup variability #33 closed in batch 5 verifying this works)

The five sub-features

A. Address search with autocomplete

• Use a free service (Nominatim is OpenStreetMap's; rate-limited but free)
• New src/components/molecular/AddressSearchInput/ (5-file)
• Debounced (~300ms) input → fetch → render typeahead → select pans map

B. Mobile GPS with real-time accuracy

• navigator.geolocation.watchPosition() (vs. one-shot getCurrentPosition())
• Display accuracy circle radius from coords.accuracy
• Update marker on every position event

C. Click-to-set map interaction

• Leaflet has built-in map.on('click', e => setLocation(e.latlng))
• New marker drops where user clicks; emits an event the page can listen to

D. Accuracy radius visualization

• Leaflet L.circle(latlng, { radius: accuracyMeters })
• Renders alongside the position marker; styled by theme

E. IP fallback with city-level indication

• When navigator.geolocation unavailable or denied: fetch from a free IP geo service (ipapi.co, ip-api.com)
• Render with a "city-level approximation" label so user knows it's not GPS
• Per-fork env var for service URL (see [Gap-Audit] 030 Calendar Integration: per-fork env vars + 32-DaisyUI-theme mapping #39 calendar pattern for env var setup)

Files

• src/app/map/page.tsx — orchestrate the strategies (which to use depends on platform + permission state)
• src/components/map/AddressSearchInput/ (new)
• src/components/map/AccuracyCircle/ (new)
• src/lib/geolocation/strategies.ts (new) — strategy selector
• src/lib/geolocation/ip-fallback.ts (new)

Watch-outs

• Privacy: each strategy needs separate consent (especially IP fallback — it sends user IP to third party)
• Nominatim free tier is rate-limited; bake in client-side rate limiting and a fallback to a different service
• Mobile GPS drains battery; stop watching when component unmounts (cleanup in useEffect)