Implement persistent backend with Docker storage, photo uploads, and real-time SSE sync

src/components/BottomBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Shuffle, Grid, LayoutGrid, PenTool, Plus, ZoomIn } from 'lucide-react';
+import { SyncStatus } from '../types';
 
 interface BottomBarProps {
   onShuffle?: () => void;
@@ -10,6 +11,7 @@ interface BottomBarProps {
   penActive?: boolean;
   isGrid?: boolean;
   zoomLevel?: number;
+  syncStatus?: SyncStatus;
 }
 
 export const BottomBar: React.FC<BottomBarProps> = ({
@@ -20,17 +22,28 @@ export const BottomBar: React.FC<BottomBarProps> = ({
   onCycleZoom,
   penActive = false,
   isGrid = false,
-  zoomLevel = 1.0
+  zoomLevel = 1.0,
+  syncStatus = 'synced'
 }) => {
   return (
     <>
       {/* 1. Desktop: Keyboard hints */}
       <footer className="fixed bottom-2 left-1/2 -translate-x-1/2 z-40 px-3.5 py-1 bg-black/60 text-neutral-400 rounded-full text-[11px] font-mono backdrop-blur-sm pointer-events-none select-none border border-white/5 hidden md:flex items-center gap-2 shadow-lg">
         <span className="flex items-center gap-1.5">
-          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block" />
-          <span>drag anything</span>
+          <span
+            className={`w-1.5 h-1.5 rounded-full inline-block ${
+              syncStatus === 'synced'
+                ? 'bg-emerald-400'
+                : syncStatus === 'syncing'
+                ? 'bg-amber-400 animate-pulse'
+                : 'bg-neutral-500'
+            }`}
+          />
+          <span className="capitalize">{syncStatus}</span>
         </span>
         <span className="text-neutral-600">·</span>
+        <span>drag anything</span>
+        <span className="text-neutral-600">·</span>
         <span>flick to throw</span>
         <span className="text-neutral-600">·</span>
         <span>double-click to edit</span>