From 2e32605948f9d1321a86f08e819f5018197c0a38 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 23 Jul 2026 20:10:24 +0700
Subject: [PATCH] =?UTF-8?q?map:=20consolidate=20right-side=20controls=20in?=
 =?UTF-8?q?to=20single=20column=20(pills=20=E2=86=92=20divider=20=E2=86=92?=
 =?UTF-8?q?=20Quick=20Snap)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index 2f40cf6..bc3cd26 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -1249,30 +1249,6 @@ export default function MapPage() {
                 </div>
               )}
 
-              {/* Floating layer filter pills — bottom-left above attribution */}
-              <div className="absolute bottom-8 left-3 z-[1000] flex gap-1.5 flex-wrap max-w-[calc(100%-1.5rem)]">
-                {[
-                  { key: 'spots', label: '🛹', active: showSpots, toggle: () => setShowSpots(v => !v), color: 'bg-red-500' },
-                  { key: 'shops', label: '🏪', active: showShops, toggle: () => setShowShops(v => !v), color: 'bg-purple-600' },
-                  { key: 'gear', label: '🛒', active: showGear, toggle: () => setShowGear(v => !v), color: 'bg-orange-500' },
-                  { key: 'tours', label: '🗺️', active: showTours, toggle: () => setShowTours(v => !v), color: 'bg-cyan-500' },
-                ].map(({ key, label, active, toggle, color }) => (
-                  <button
-                    key={key}
-                    onClick={toggle}
-                    className={cn(
-                      'h-8 w-8 rounded-full text-sm flex items-center justify-center shadow-lg border transition-all backdrop-blur',
-                      active
-                        ? `${color} border-white/30 shadow-black/40`
-                        : 'bg-black/70 border-white/10 opacity-50'
-                    )}
-                    title={key}
-                  >
-                    {label}
-                  </button>
-                ))}
-              </div>
-
               {/* Near Me button + attribution — floating top-right */}
               <div className="absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5">
                 <Button
@@ -1300,21 +1276,48 @@ export default function MapPage() {
                 </div>
               </div>
 
-              {/* Quick Capture FAB - only show for logged in users on mobile */}
-              {user && (
-                <div className="absolute bottom-24 right-4 z-[1000] md:hidden flex flex-col items-center gap-2">
-                  <Button
-                    onClick={() => setShowQuickCamera(true)}
-                    className="h-14 w-14 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20"
+              {/* Right-side control column — filter pills + Quick Snap (mobile only) */}
+              <div className="absolute bottom-24 right-4 z-[1000] md:hidden flex flex-col items-center gap-2">
+                {/* Layer filter pills */}
+                {[
+                  { key: 'spots', label: '🛹', active: showSpots, toggle: () => setShowSpots(v => !v), color: 'bg-red-500' },
+                  { key: 'shops', label: '🏪', active: showShops, toggle: () => setShowShops(v => !v), color: 'bg-purple-600' },
+                  { key: 'gear', label: '🛒', active: showGear, toggle: () => setShowGear(v => !v), color: 'bg-orange-500' },
+                  { key: 'tours', label: '🗺️', active: showTours, toggle: () => setShowTours(v => !v), color: 'bg-cyan-500' },
+                ].map(({ key, label, active, toggle, color }) => (
+                  <button
+                    key={key}
+                    onClick={toggle}
+                    className={cn(
+                      'h-9 w-9 rounded-full text-sm flex items-center justify-center shadow-lg border transition-all backdrop-blur',
+                      active
+                        ? `${color} border-white/30`
+                        : 'bg-black/70 border-white/10 opacity-40'
+                    )}
+                    title={key}
                   >
-                    <Camera className="h-6 w-6" />
-                  </Button>
-                  <span className="text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
-                    Quick Snap
-                  </span>
+                    {label}
+                  </button>
+                ))}
 
-                </div>
-              )}
+                {/* Divider */}
+                {user && <div className="w-5 h-px bg-white/20" />}
+
+                {/* Quick Snap */}
+                {user && (
+                  <>
+                    <Button
+                      onClick={() => setShowQuickCamera(true)}
+                      className="h-14 w-14 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20"
+                    >
+                      <Camera className="h-6 w-6" />
+                    </Button>
+                    <span className="text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
+                      Quick Snap
+                    </span>
+                  </>
+                )}
+              </div>
             </>
           ) : (
             <div className="h-full overflow-auto">