From 85a77b36f20ff2e24fefcdd3ab0a38b59b6b82a4 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 23 Jul 2026 23:08:11 +0700
Subject: [PATCH] fix(map): replace speed-dial FAB with two always-visible pill
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove speed-dial/tap-to-expand pattern — buttons are now always visible
- "Add Spot" — red (#ff0040), white text, same style as before
- "Add Shop" — green (#00cc66), black text, sits above Add Spot
- Both cleared of bottom nav via bottom-[calc(5rem+env(safe-area-inset-bottom))]
- Removed unused fabOpen state

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/pages/MapPage.tsx | 83 +++++++++++++++----------------------------
 1 file changed, 28 insertions(+), 55 deletions(-)

diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index 2407d09..a4cf2a8 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -599,8 +599,7 @@ export default function MapPage() {
   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
@@ -736,8 +735,6 @@ 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)}`);
@@ -1424,63 +1421,39 @@ export default function MapPage() {
                 </div>
               )}
 
-              {/* 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. */}
+              {/* Add Spot + Add Shop FABs — always visible, bottom-left, clear of bottom nav */}
               <div className={cn(
                 "absolute bottom-[calc(5rem+env(safe-area-inset-bottom,0px))] left-3 z-[1001] md:hidden flex flex-col items-start gap-2 transition-all duration-200",
                 mobileFiltersOpen || selectedSpot || sasquatchPanelOpen
                   ? "opacity-0 pointer-events-none scale-90"
                   : "opacity-100 scale-100"
               )}>
-                {/* Expanded options — slide up when fabOpen */}
-                <div className={cn(
-                  "flex flex-col gap-2 transition-all duration-200 origin-bottom",
-                  fabOpen ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-3 pointer-events-none"
-                )}>
-                  {user ? (
-                    <>
-                      <Link to="/create-shop" onClick={() => setFabOpen(false)}>
-                        <button className="flex items-center gap-2 h-11 pl-3 pr-4 rounded-full bg-purple-600 shadow-lg shadow-purple-600/30 border border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap">
-                          <Store className="h-4 w-4 flex-shrink-0" />
-                          Add Shop
-                        </button>
-                      </Link>
-                      <Link to="/create-spot" onClick={() => setFabOpen(false)}>
-                        <button className="flex items-center gap-2 h-11 pl-3 pr-4 rounded-full bg-[#ff0040] shadow-lg shadow-[#ff0040]/30 border border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap">
-                          <MapPin className="h-4 w-4 flex-shrink-0" />
-                          Add Spot
-                        </button>
-                      </Link>
-                    </>
-                  ) : (
-                    <button
-                      onClick={() => {
-                        setFabOpen(false);
-                        document.querySelector<HTMLElement>('[data-login-trigger]')?.click();
-                      }}
-                      className="flex items-center gap-2 h-11 pl-3 pr-4 rounded-full bg-[#ff0040]/80 shadow-lg shadow-[#ff0040]/20 border border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform backdrop-blur whitespace-nowrap"
-                    >
-                      <Plus className="h-4 w-4 flex-shrink-0" />
-                      Log in to add
-                    </button>
-                  )}
-                </div>
-
-                {/* Main FAB trigger */}
-                <button
-                  onClick={() => setFabOpen(v => !v)}
-                  aria-label={fabOpen ? 'Close add menu' : 'Add spot or shop'}
-                  aria-expanded={fabOpen}
-                  className={cn(
-                    "h-12 w-12 rounded-full shadow-xl border-2 border-white/20 flex items-center justify-center transition-all duration-200 active:scale-95 touch-manipulation",
-                    fabOpen
-                      ? "bg-white/15 rotate-45 shadow-white/10"
-                      : "bg-[#ff0040] shadow-[#ff0040]/40"
-                  )}
-                >
-                  <Plus className="h-5 w-5 text-white" />
-                </button>
+                {user ? (
+                  <>
+                    {/* Add Shop — green */}
+                    <Link to="/create-shop">
+                      <button className="flex items-center gap-2 h-12 pl-3 pr-4 rounded-full bg-[#00cc66] shadow-xl shadow-[#00cc66]/35 border-2 border-white/20 text-black font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap touch-manipulation">
+                        <Plus className="h-5 w-5 flex-shrink-0" />
+                        Add Shop
+                      </button>
+                    </Link>
+                    {/* Add Spot — red */}
+                    <Link to="/create-spot">
+                      <button className="flex items-center gap-2 h-12 pl-3 pr-4 rounded-full bg-[#ff0040] shadow-xl shadow-[#ff0040]/40 border-2 border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap touch-manipulation">
+                        <Plus className="h-5 w-5 flex-shrink-0" />
+                        Add Spot
+                      </button>
+                    </Link>
+                  </>
+                ) : (
+                  <button
+                    onClick={() => document.querySelector<HTMLElement>('[data-login-trigger]')?.click()}
+                    className="flex items-center gap-2 h-12 pl-3 pr-4 rounded-full bg-[#ff0040]/80 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform backdrop-blur whitespace-nowrap touch-manipulation"
+                  >
+                    <Plus className="h-5 w-5 flex-shrink-0" />
+                    Add Spot
+                  </button>
+                )}
               </div>
 
               {/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}