Make checklists editable and expose workspaces and settings in mobile top and bottom bars

src/components/BottomBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Shuffle, Grid, LayoutGrid, Plus, ZoomIn, Lock, Unlock } from 'lucide-react';
+import { Shuffle, Grid, LayoutGrid, Plus, ZoomIn, Lock, Unlock, SlidersHorizontal } from 'lucide-react';
 import { SyncStatus } from '../types';
 
 interface BottomBarProps {
@@ -9,6 +9,7 @@ interface BottomBarProps {
   onAddCard?: () => void;
   onCycleZoom?: () => void;
   onToggleLock?: () => void;
+  onOpenSettings?: () => void;
   penActive?: boolean;
   isGrid?: boolean;
   zoomLevel?: number;
@@ -22,6 +23,7 @@ export const BottomBar: React.FC<BottomBarProps> = ({
   onAddCard,
   onCycleZoom,
   onToggleLock,
+  onOpenSettings,
   isGrid = false,
   zoomLevel = 1.0,
   syncStatus = 'synced',
@@ -63,6 +65,14 @@ export const BottomBar: React.FC<BottomBarProps> = ({
 
       {/* 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-2 select-none">
+        <button
+          onClick={onOpenSettings}
+          className="p-2 rounded-full bg-neutral-800 hover:bg-neutral-700 active:scale-95 text-amber-400 transition border border-neutral-700/60"
+          title="Workspaces & Settings"
+        >
+          <SlidersHorizontal size={15} />
+        </button>
+
         <button
           onClick={onToggleLock}
           className={`p-2 rounded-full transition active:scale-95 ${