Add desk scale zoom controls and non-overlapping mobile grid layout

src/components/BottomBar.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import { Shuffle, Grid, LayoutGrid, PenTool, Plus } from 'lucide-react';
+import { Shuffle, Grid, LayoutGrid, PenTool, Plus, ZoomIn } from 'lucide-react';
 
 interface BottomBarProps {
   onShuffle?: () => void;
   onToggleLayout?: () => void;
   onTogglePen?: () => void;
   onAddCard?: () => void;
+  onCycleZoom?: () => void;
   penActive?: boolean;
   isGrid?: boolean;
+  zoomLevel?: number;
 }
 
 export const BottomBar: React.FC<BottomBarProps> = ({
@@ -15,8 +17,10 @@ export const BottomBar: React.FC<BottomBarProps> = ({
   onToggleLayout,
   onTogglePen,
   onAddCard,
+  onCycleZoom,
   penActive = false,
-  isGrid = false
+  isGrid = false,
+  zoomLevel = 1.0
 }) => {
   return (
     <>
@@ -43,13 +47,13 @@ export const BottomBar: React.FC<BottomBarProps> = ({
       </footer>
 
       {/* 2. Mobile: Thumb-friendly floating dock */}
-      <footer className="fixed bottom-3 left-1/2 -translate-x-1/2 z-40 px-3 py-1.5 bg-[#1C1A17]/95 text-neutral-300 rounded-full shadow-2xl border border-neutral-700/80 backdrop-blur-md flex md:hidden items-center gap-3 select-none">
+      <footer className="fixed bottom-3 left-1/2 -translate-x-1/2 z-40 px-3 py-1.5 bg-[#1C1A17]/95 text-neutral-300 rounded-full shadow-2xl border border-neutral-700/80 backdrop-blur-md flex md:hidden items-center gap-2 select-none">
         <button
           onClick={onShuffle}
           className="p-2 rounded-full bg-neutral-800 hover:bg-neutral-700 active:scale-95 text-neutral-200 transition"
           title="Shuffle Desk"
         >
-          <Shuffle size={16} />
+          <Shuffle size={15} />
         </button>
 
         <button
@@ -57,15 +61,24 @@ export const BottomBar: React.FC<BottomBarProps> = ({
           className="p-2 rounded-full bg-neutral-800 hover:bg-neutral-700 active:scale-95 text-neutral-200 transition"
           title="Toggle Grid / Scatter"
         >
-          {isGrid ? <LayoutGrid size={16} className="text-amber-400" /> : <Grid size={16} />}
+          {isGrid ? <LayoutGrid size={15} className="text-amber-400" /> : <Grid size={15} />}
+        </button>
+
+        <button
+          onClick={onCycleZoom}
+          className="px-2 py-1.5 rounded-full bg-neutral-800 hover:bg-neutral-700 active:scale-95 text-neutral-200 transition font-mono text-[11px] flex items-center gap-1 border border-neutral-700"
+          title="Scale Desk (Tap to cycle zoom)"
+        >
+          <ZoomIn size={13} className="text-amber-400" />
+          <span>{Math.round(zoomLevel * 100)}%</span>
         </button>
 
         <button
           onClick={onAddCard}
-          className="p-2.5 rounded-full bg-amber-500 hover:bg-amber-400 active:scale-95 text-neutral-950 font-bold transition shadow-md"
-          title="Add Note"
+          className="p-2 rounded-full bg-amber-500 hover:bg-amber-400 active:scale-95 text-neutral-950 font-bold transition shadow-md"
+          title="Add Note or Photo"
         >
-          <Plus size={18} />
+          <Plus size={17} />
         </button>
 
         <button
@@ -75,7 +88,7 @@ export const BottomBar: React.FC<BottomBarProps> = ({
           }`}
           title="Draw / Pen"
         >
-          <PenTool size={16} />
+          <PenTool size={15} />
         </button>
       </footer>
     </>