From 254484a35485d65221027dbb67e2ca8489798a25 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Fri, 24 Jul 2026 01:51:18 +0700
Subject: [PATCH] fix: add Add Spot (red) + Add Shop (green) back into right
 control strip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Both + buttons are 36px circles matching the strip visual system
- Add Spot = red circle (bottom of layer toggles section)
- Add Shop = green circle (right below Add Spot)
- Removed redundant left-side FAB entirely — everything is now in one column on the right

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

diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index 3c19e25..e45b9d1 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -1424,27 +1424,7 @@ export default function MapPage() {
                 </div>
               )}
 
-              {/* Add Spot + Add Shop FABs — single pill button, bottom-left */}
-              {user && (
-                <div
-                  className={cn(
-                    "fixed left-3 z-[1001] md:hidden transition-all duration-200",
-                    mobileFiltersOpen || selectedSpot || sasquatchPanelOpen
-                      ? "opacity-0 pointer-events-none translate-y-2"
-                      : "opacity-100 translate-y-0"
-                  )}
-                  style={{ bottom: 'calc(3.5rem + env(safe-area-inset-bottom, 0px) + 0.75rem)' }}
-                >
-                  {/* Single "+" FAB — opens a mini menu via state */}
-                  <Link to="/create-spot" aria-label="Add a skate spot">
-                    <button
-                      className="h-12 w-12 rounded-full bg-gradient-to-br from-[#ff0040] to-[#ff6600] shadow-xl shadow-[#ff0040]/30 border border-white/20 flex items-center justify-center active:scale-90 transition-transform touch-manipulation"
-                    >
-                      <Plus className="h-5 w-5 text-white" strokeWidth={2.5} />
-                    </button>
-                  </Link>
-                </div>
-              )}
+
 
               {/* Map attribution — bottom-left corner, minimal */}
               <div className="absolute bottom-2 left-2 z-[999] pointer-events-none">
@@ -1557,10 +1537,30 @@ export default function MapPage() {
                   </button>
                 ))}
 
-                {/* Divider + Quick Snap */}
+                {/* Divider + Add actions + Quick Snap */}
                 {user && (
                   <>
                     <div className="w-4 h-px bg-white/10" />
+                    {/* Add Spot */}
+                    <Link to="/create-spot" aria-label="Add a skate spot">
+                      <button
+                        className="h-9 w-9 rounded-full bg-[#ff0040]/90 border border-[#ff0040]/50 flex items-center justify-center shadow-lg shadow-[#ff0040]/20 touch-manipulation active:scale-90 transition-all"
+                        aria-label="Add spot"
+                      >
+                        <Plus className="h-4 w-4 text-white" strokeWidth={2.5} />
+                      </button>
+                    </Link>
+                    {/* Add Shop */}
+                    <Link to="/create-shop" aria-label="Add a skate shop">
+                      <button
+                        className="h-9 w-9 rounded-full bg-[#00cc66]/90 border border-[#00cc66]/50 flex items-center justify-center shadow-lg shadow-[#00cc66]/20 touch-manipulation active:scale-90 transition-all"
+                        aria-label="Add shop"
+                      >
+                        <Plus className="h-4 w-4 text-black" strokeWidth={2.5} />
+                      </button>
+                    </Link>
+                    <div className="w-4 h-px bg-white/10" />
+                    {/* Quick Snap */}
                     <button
                       onClick={() => setShowQuickCamera(true)}
                       className="h-9 w-9 rounded-full bg-black/70 border border-white/15 flex items-center justify-center shadow-lg touch-manipulation active:scale-90 hover:border-[#ff0040]/50 hover:bg-[#ff0040]/10 transition-all"