Phase 3: Sidebar & Properties Panel

- Three-column layout (sidebar/canvas/properties)
- Sidebar with tabs: Upload, Stickers, Text
- Upload tab with drag-and-drop and click-to-upload
- Stickers tab with 6 categories (40+ emojis)
- Text tab with font selector, size slider, color picker
- Properties panel with position, size, rotation controls
- Delete button for selected element
- Responsive layout for mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/components/sidebar/Sidebar.jsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { UploadTab } from './UploadTab';
+import { StickersTab } from './StickersTab';
+import { TextTab } from './TextTab';
+
+const TABS = [
+  { id: 'upload', label: 'Upload', icon: '📁' },
+  { id: 'stickers', label: 'Stickers', icon: '😊' },
+  { id: 'text', label: 'Text', icon: 'T' },
+];
+
+export function Sidebar({ onElementAdd, onUpload }) {
+  const [activeTab, setActiveTab] = useState('upload');
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'upload':
+        return <UploadTab onUpload={onUpload} />;
+      case 'stickers':
+        return <StickersTab onAddSticker={onElementAdd} />;
+      case 'text':
+        return <TextTab onAddText={onElementAdd} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="sidebar">
+      <div className="sidebar-tabs">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            className={`sidebar-tab ${activeTab === tab.id ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.id)}
+            title={tab.label}
+          >
+            <span className="tab-icon">{tab.icon}</span>
+            <span className="tab-label">{tab.label}</span>
+          </button>
+        ))}
+      </div>
+      <div className="sidebar-content">{renderTabContent()}</div>
+    </div>
+  );
+}