refactor(admin): split email-templates page.tsx into colocated components

Extract tabs nav, templates grid, editor split view, settings form,
logs table, and data-loading/actions hook into _components/ and
_hooks/. page.tsx reduced from 816 to 88 LOC.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

admin-compliance/app/sdk/email-templates/_components/TemplatesTab.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { CATEGORIES, EmailTemplate } from '../_types'
+import { TemplateCard } from './TemplateCard'
+
+interface TemplatesTabProps {
+  templates: EmailTemplate[]
+  loading: boolean
+  selectedCategory: string | null
+  onCategoryChange: (cat: string | null) => void
+  onEdit: (t: EmailTemplate) => void
+  onInitialize: () => void
+}
+
+export function TemplatesTab({
+  templates, loading, selectedCategory, onCategoryChange, onEdit, onInitialize,
+}: TemplatesTabProps) {
+  return (
+    <div className="space-y-4">
+      {/* Category Pills */}
+      <div className="flex flex-wrap gap-2">
+        <button
+          onClick={() => onCategoryChange(null)}
+          className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
+            !selectedCategory ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+          }`}
+        >
+          Alle
+        </button>
+        {Object.entries(CATEGORIES).map(([key, cat]) => (
+          <button
+            key={key}
+            onClick={() => onCategoryChange(key)}
+            className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
+              selectedCategory === key ? 'bg-purple-600 text-white' : `${cat.bgColor} ${cat.color} hover:opacity-80`
+            }`}
+          >
+            {cat.label}
+          </button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="text-center py-12 text-gray-500">Lade Templates...</div>
+      ) : templates.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-gray-500 mb-4">Keine Templates vorhanden.</p>
+          <button
+            onClick={onInitialize}
+            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+          >
+            Standard-Templates erstellen
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {templates.map(t => (
+            <TemplateCard key={t.id} template={t} onEdit={() => onEdit(t)} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}