Phase 6: Template System

- Added 8 pre-designed templates across 8 categories
- Templates: Team Sport, Band Merch, Minimal Quote, Funny Cat,
  Gradient Vibes, Vintage Badge, Nature Lover, Tech Geek
- Templates tab with category filter pills
- Template preview cards with 2-column grid
- One-click template application to canvas

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

client/src/components/sidebar/TemplatesTab.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { TEMPLATES, TEMPLATE_CATEGORIES } from '../../constants/templates';
+
+export function TemplatesTab({ onApplyTemplate }) {
+  const [selectedCategory, setSelectedCategory] = useState('All');
+
+  const filteredTemplates =
+    selectedCategory === 'All'
+      ? TEMPLATES
+      : TEMPLATES.filter((t) => t.category === selectedCategory);
+
+  return (
+    <div className="templates-tab">
+      <h3>Templates</h3>
+      <div className="category-pills">
+        {TEMPLATE_CATEGORIES.map((cat) => (
+          <button
+            key={cat}
+            className={`category-pill ${selectedCategory === cat ? 'active' : ''}`}
+            onClick={() => setSelectedCategory(cat)}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+      <div className="templates-grid">
+        {filteredTemplates.map((template) => (
+          <button
+            key={template.id}
+            className="template-card"
+            onClick={() => onApplyTemplate(template)}
+          >
+            <div className="template-preview">
+              {template.elements.slice(0, 3).map((el, i) => (
+                <span
+                  key={i}
+                  className="template-preview-element"
+                  style={{
+                    fontSize: el.type === 'text' && el.text.length === 1 ? '16px' : '8px',
+                    color: el.fill,
+                  }}
+                >
+                  {el.text}
+                </span>
+              ))}
+            </div>
+            <div className="template-info">
+              <span className="template-name">{template.name}</span>
+              <span className="template-category">{template.category}</span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}