From 2500b549f5659024a3277c9a055010cc41767121 Mon Sep 17 00:00:00 2001 From: "shakespeare.diy" Date: Thu, 23 Jul 2026 23:05:30 +0700 Subject: [PATCH] fix(map): speed-dial FAB + location help dialog MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit FAB (Add Spot / Add Shop): - Removed old bottom-left "Add Spot" pill that sat on top of the bottom nav - New speed-dial FAB in bottom-left, positioned at bottom-[calc(5rem+env(safe-area-inset-bottom,0px))] — always clears the iOS/Android safe area + bottom nav height - Tap the red + button to expand upward: "Add Spot" (red/MapPin) and "Add Shop" (purple/Store) pill buttons slide in with animation - + button rotates 45° when open (becomes ×), closes on map tap - Logged-out state shows "Log in to add" prompt instead - Tapping either option closes the speed-dial before navigating Right-side filter pills: - Bumped from bottom-20 to bottom-[calc(5rem+env(safe-area-inset-bottom))] so they're consistently safe-area aware on devices with home indicator Near Me — location denied fix: - PERMISSION_DENIED no longer shows a toast (which was useless — user can't act on a disappearing toast) - Tapping the red LocateOff button now opens a bottom-sheet help dialog with per-platform instructions (Android Chrome, iOS Safari, desktop Chrome, Firefox) on how to re-enable location permission - "Got it" dismisses and resets the error state so the button returns to normal for a fresh attempt - handleNearMe still fires normally on first tap (not denied state) Co-authored-by: shakespeare.diy --- src/pages/MapPage.tsx | 135 +++++++++++++++++++++++++++++++++--------- 1 file changed, 108 insertions(+), 27 deletions(-) diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx index 6351cf7..2407d09 100644 --- a/src/pages/MapPage.tsx +++ b/src/pages/MapPage.tsx @@ -68,6 +68,8 @@ import { MapPin, LocateFixed, LocateOff, + Store, + Info, } from 'lucide-react'; import { CameraCapture } from '@/components/CameraCapture'; import { useUploadFile } from '@/hooks/useUploadFile'; @@ -595,6 +597,10 @@ export default function MapPage() { const [flyTo, setFlyTo] = useState<{ lat: number; lng: number; zoom?: number } | null>(null); const [nearMeLoading, setNearMeLoading] = useState(false); const [nearMeError, setNearMeError] = useState<'denied' | 'unavailable' | 'timeout' | null>(null); + const [showLocationHelp, setShowLocationHelp] = useState(false); + + // Speed-dial FAB open state + const [fabOpen, setFabOpen] = useState(false); const handleNearMe = () => { // Clear previous error @@ -623,11 +629,7 @@ export default function MapPage() { setNearMeLoading(false); if (err.code === err.PERMISSION_DENIED) { setNearMeError('denied'); - toast({ - title: 'Location access denied', - description: 'To find spots near you, allow location access in your browser settings, then try again.', - variant: 'destructive', - }); + setShowLocationHelp(true); } else if (err.code === err.TIMEOUT) { setNearMeError('timeout'); toast({ @@ -734,6 +736,8 @@ export default function MapPage() { ); const handleMapClick = (lat: number, lng: number) => { + // Close speed-dial FAB if open + setFabOpen(false); if (!user) return; // Navigate to create spot with coordinates pre-filled navigate(`/create-spot?lat=${lat.toFixed(6)}&lng=${lng.toFixed(6)}`); @@ -1420,31 +1424,63 @@ export default function MapPage() { )} - {/* Add Spot FAB — primary CTA, bottom-left. - Hidden when Sasquatch panel is open (user is in chat mode). - Hidden when mobile filters or spot sheet is open. */} + {/* Speed-dial FAB — bottom-right, above filter pills, clear of bottom nav. + Tap the + button to expand into Add Spot + Add Shop options. + Hidden when overlays open. Desktop gets a different layout so md:hidden. */}
- {user ? ( - - + + setFabOpen(false)}> + + + + ) : ( + - - ) : ( - - )} + )} +
+ + {/* Main FAB trigger */} + {/* Near Me button + attribution — floating top-right, hidden when any overlay is open */} @@ -1453,7 +1489,7 @@ export default function MapPage() { mobileFiltersOpen ? "opacity-0 pointer-events-none" : "opacity-100" )}> + + + )} + {/* Right-side control column — filter pills + Quick Snap (mobile only, hidden when overlays open) */}
{/* Layer filter pills — compact icon-only */}