Flatted and issues fixed with Claude Desktop.

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';
+import { TemplatesTab } from './TemplatesTab';
+
+const TABS = [
+  { id: 'upload', label: 'Upload', icon: '📁' },
+  { id: 'stickers', label: 'Stickers', icon: '🎨' },
+  { id: 'text', label: 'Text', icon: '📝' },
+  { id: 'templates', label: 'Templates', icon: '📋' },
+];
+
+export function Sidebar({ onAddImage, onAddSticker, onAddText, onAddTemplate, onSlotImageUpload }) {
+  const [activeTab, setActiveTab] = useState('upload');
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'upload': return <UploadTab onAddImage={onAddImage} />;
+      case 'stickers': return <StickersTab onAddSticker={onAddSticker} />;
+      case 'text': return <TextTab onAddText={onAddText} />;
+      case 'templates': return <TemplatesTab onAddTemplate={onAddTemplate} onSlotImageUpload={onSlotImageUpload} />;
+      default: return null;
+    }
+  };
+
+  return (
+    <div className="sidebar">
+      <div style={{ display: 'flex', borderBottom: '1px solid var(--border)', background: 'var(--bg-primary)' }}>
+        {TABS.map((tab) => (
+          <button key={tab.id} onClick={() => setActiveTab(tab.id)}
+            style={{
+              flex: 1, padding: '12px 8px', border: 'none', background: 'transparent', cursor: 'pointer',
+              fontSize: '11px', fontWeight: activeTab === tab.id ? '600' : '400',
+              color: activeTab === tab.id ? 'var(--accent)' : 'var(--text-secondary)',
+              borderBottom: activeTab === tab.id ? '2px solid var(--accent)' : '2px solid transparent',
+            }}>
+            <div style={{ fontSize: '16px', marginBottom: '2px' }}>{tab.icon}</div>
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div style={{ flex: 1, overflow: 'auto', padding: '1rem' }}>{renderTabContent()}</div>
+    </div>
+  );
+}