Flatted and issues fixed with Claude Desktop.

src/components/sidebar/StickersTab.jsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { STICKERS, STICKER_CATEGORIES } from '../../constants/stickers';
+
+export function StickersTab({ onAddSticker }) {
+  const [activeCategory, setActiveCategory] = useState('all');
+
+  const filteredStickers = activeCategory === 'all'
+    ? STICKERS
+    : STICKERS.filter(s => s.category === activeCategory);
+
+  const handleAddSticker = (emoji) => {
+    const canvas = document.createElement('canvas');
+    const size = 100;
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    ctx.font = `${size * 0.8}px Arial`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(emoji, size / 2, size / 2);
+
+    onAddSticker({
+      type: 'image',
+      x: 125, y: 125, width: 80, height: 80, rotation: 0,
+      src: canvas.toDataURL('image/png'),
+      emoji,
+    });
+  };
+
+  return (
+    <div>
+      <h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>Stickers</h3>
+      <div style={{ display: 'flex', gap: '6px', marginBottom: '1rem', flexWrap: 'wrap' }}>
+        {STICKER_CATEGORIES.map((cat) => (
+          <button key={cat} onClick={() => setActiveCategory(cat)}
+            style={{
+              padding: '6px 12px', border: `1px solid ${activeCategory === cat ? 'var(--accent)' : 'var(--border)'}`,
+              borderRadius: 'var(--radius-xl)', background: activeCategory === cat ? 'var(--accent)' : 'var(--bg-primary)',
+              color: activeCategory === cat ? '#fff' : 'var(--text-secondary)', fontSize: '11px', cursor: 'pointer', textTransform: 'capitalize',
+            }}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '8px' }}>
+        {filteredStickers.map((sticker, index) => (
+          <button key={index} onClick={() => handleAddSticker(sticker.emoji)}
+            style={{ aspectRatio: '1', border: 'none', borderRadius: 'var(--radius-md)', background: 'var(--bg-primary)', fontSize: '28px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+          >
+            {sticker.emoji}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}