Add desk lock mode, web bookmark card type, sound default, and buried visual effects

src/components/BottomBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Shuffle, Grid, LayoutGrid, PenTool, Plus, ZoomIn } from 'lucide-react';
+import { Shuffle, Grid, LayoutGrid, Plus, ZoomIn, Lock, Unlock } from 'lucide-react';
 import { SyncStatus } from '../types';
 
 interface BottomBarProps {
@@ -8,22 +8,24 @@ interface BottomBarProps {
   onTogglePen?: () => void;
   onAddCard?: () => void;
   onCycleZoom?: () => void;
+  onToggleLock?: () => void;
   penActive?: boolean;
   isGrid?: boolean;
   zoomLevel?: number;
   syncStatus?: SyncStatus;
+  isLocked?: boolean;
 }
 
 export const BottomBar: React.FC<BottomBarProps> = ({
   onShuffle,
   onToggleLayout,
-  onTogglePen,
   onAddCard,
   onCycleZoom,
-  penActive = false,
+  onToggleLock,
   isGrid = false,
   zoomLevel = 1.0,
-  syncStatus = 'synced'
+  syncStatus = 'synced',
+  isLocked = false
 }) => {
   return (
     <>
@@ -48,12 +50,12 @@ export const BottomBar: React.FC<BottomBarProps> = ({
         <span className="text-neutral-600">·</span>
         <span>double-click to edit</span>
         <span className="text-neutral-600">·</span>
+        <span className="text-neutral-300 font-semibold">L</span> {isLocked ? 'unlock' : 'lock'}
+        <span className="text-neutral-600">·</span>
         <span className="text-neutral-300 font-semibold">S</span> shuffle
         <span className="text-neutral-600">·</span>
         <span className="text-neutral-300 font-semibold">G</span> grid
         <span className="text-neutral-600">·</span>
-        <span className="text-neutral-300 font-semibold">P</span> pen
-        <span className="text-neutral-600">·</span>
         <span className="text-neutral-300 font-semibold">N</span> new
         <span className="text-neutral-600">·</span>
         <span className="text-neutral-300 font-semibold">Space</span> scatter
@@ -61,6 +63,18 @@ 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={onToggleLock}
+          className={`p-2 rounded-full transition active:scale-95 ${
+            isLocked
+              ? 'bg-amber-500 text-neutral-950 font-bold border border-amber-400 shadow-md'
+              : 'bg-neutral-800 text-neutral-300 hover:bg-neutral-700'
+          }`}
+          title={isLocked ? 'Desk Locked (Tap to Unlock)' : 'Desk Unlocked (Tap to Lock)'}
+        >
+          {isLocked ? <Lock size={15} /> : <Unlock size={15} />}
+        </button>
+
         <button
           onClick={onShuffle}
           className="p-2 rounded-full bg-neutral-800 hover:bg-neutral-700 active:scale-95 text-neutral-200 transition"
@@ -89,20 +103,10 @@ export const BottomBar: React.FC<BottomBarProps> = ({
         <button
           onClick={onAddCard}
           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"
+          title="Add Note, Photo or Bookmark"
         >
           <Plus size={17} />
         </button>
-
-        <button
-          onClick={onTogglePen}
-          className={`p-2 rounded-full transition active:scale-95 ${
-            penActive ? 'bg-amber-500/20 text-amber-300 border border-amber-500' : 'bg-neutral-800 text-neutral-200'
-          }`}
-          title="Draw / Pen"
-        >
-          <PenTool size={15} />
-        </button>
       </footer>
     </>
   );