feat: redesign spintax dicts + patterns pages (6/17 complete)

src/pages/admin/collections/cartesian-patterns.astro

@@ -1,13 +1,75 @@
 ---
 import AdminLayout from '../../../layouts/AdminLayout.astro';
-import CollectionTable from '../../../components/admin/CollectionTable';
+import PageHeader from '../../../components/admin/PageHeader.astro';
+import StatCard from '../../../components/admin/StatCard.astro';
+
+const endpoint = '/api/collections/spintax_patterns';
+const columns = ['name', 'category', 'created_at'];
 ---
 
-<AdminLayout title="Spintax Patterns">
+<AdminLayout title="Cartesian Patterns">
-  <CollectionTable
+  <PageHeader 
-    endpoint="/api/collections/spintax_patterns"
+    icon="🎨"
-    columns={['name', 'category', 'created_at']}
     title="Cartesian Patterns"
-    client:load
+    description="Manage spintax patterns and content templates"
   />
+
+  <div class="grid grid-cols-3 gap-6 mb-8">
+    <StatCard icon="✏️" label="Total Patterns" value="0" />
+    <StatCard icon="🔄" label="Variations" value="0" color="blue" />
+    <StatCard icon="⚡" label="Active" value="0" color="green" />
+  </div>
+
+  <div class="bg-titanium border border-edge-normal rounded-xl overflow-hidden">
+    <div class="p-6 border-b border-edge-subtle">
+      <div class="flex items-center justify-between">
+        <h2 class="text-xl font-semibold text-white">All Patterns</h2>
+        <button class="px-4 py-2 bg-gold-500 text-black rounded-lg font-medium hover:bg-gold-400">
+          + New Pattern
+        </button>
+      </div>
+    </div>
+    
+    <table class="w-full">
+      <thead class="bg-graphite border-b border-edge-subtle">
+        <tr>
+          {columns.map(col => (
+            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300 uppercase">{col.replace(/_/g, ' ')}</th>
+          ))}
+          <th class="px-6 py-4 text-right text-sm font-semibold text-gray-300 uppercase">Actions</th>
+        </tr>
+      </thead>
+      <tbody id="table-body" class="divide-y divide-edge-subtle">
+        <tr><td colspan={columns.length + 1} class="px-6 py-12 text-center text-gray-400">Loading...</td></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <script define:vars={{ endpoint, columns }}>
+    async function loadData() {
+      try {
+        const token = localStorage.getItem('godToken') || 'jmQXoeyxWoBsB7eHzG7FmnH90f22JtaYBxXHoorhfZ-v4tT3VNEr9vvmwHqYHCDoWXHSU4DeZXApCP-Gha-YdA';
+        const response = await fetch(endpoint, { headers: { 'X-God-Token': token } });
+        if (!response.ok) throw new Error('Failed to fetch');
+        
+        const result = await response.json();
+        const data = result.data || [];
+        
+        const tbody = document.getElementById('table-body');
+        tbody.innerHTML = data.length === 0 
+          ? `<tr><td colspan="${columns.length + 1}" class="px-6 py-12 text-center text-gray-400">No patterns yet</td></tr>`
+          : data.map(item => `
+              <tr class="hover:bg-graphite/50 transition-colors">
+                ${columns.map(col => `<td class="px-6 py-4 text-sm text-gray-200">${item[col] || '-'}</td>`).join('')}
+                <td class="px-6 py-4 text-right">
+                  <button class="text-gold-500 hover:text-gold-400 text-sm font-medium">Edit</button>
+                </td>
+              </tr>
+            `).join('');
+      } catch (err) {
+        document.getElementById('table-body').innerHTML = `<tr><td colspan="${columns.length + 1}" class="px-6 py-12 text-center text-red-400">Error: ${err.message}</td></tr>`;
+      }
+    }
+    loadData();
+  </script>
 </AdminLayout>

src/pages/admin/collections/spintax-dictionaries.astro

@@ -1,13 +1,75 @@
 ---
 import AdminLayout from '../../../layouts/AdminLayout.astro';
-import CollectionTable from '../../../components/admin/CollectionTable';
+import PageHeader from '../../../components/admin/PageHeader.astro';
+import StatCard from '../../../components/admin/StatCard.astro';
+
+const endpoint = '/api/collections/spintax_dictionaries';
+const columns = ['name', 'category', 'created_at'];
 ---
 
 <AdminLayout title="Spintax Dictionaries">
-  <CollectionTable
+  <PageHeader 
-    endpoint="/api/collections/spintax_dictionaries"
+    icon="📚"
-    columns={['name', 'category', 'created_at']}
     title="Spintax Dictionaries"
-    client:load
+    description="Manage word lists and variation dictionaries for content spinning"
   />
+
+  <div class="grid grid-cols-3 gap-6 mb-8">
+    <StatCard icon="📖" label="Total Dictionaries" value="0" />
+    <StatCard icon="💬" label="Total Words" value="0" color="blue" />
+    <StatCard icon="🎯" label="Active" value="0" color="green" />
+  </div>
+
+  <div class="bg-titanium border border-edge-normal rounded-xl overflow-hidden">
+    <div class="p-6 border-b border-edge-subtle">
+      <div class="flex items-center justify-between">
+        <h2 class="text-xl font-semibold text-white">All Dictionaries</h2>
+        <button class="px-4 py-2 bg-gold-500 text-black rounded-lg font-medium hover:bg-gold-400">
+          + New Dictionary
+        </button>
+      </div>
+    </div>
+    
+    <table class="w-full">
+      <thead class="bg-graphite border-b border-edge-subtle">
+        <tr>
+          {columns.map(col => (
+            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300 uppercase">{col.replace(/_/g, ' ')}</th>
+          ))}
+          <th class="px-6 py-4 text-right text-sm font-semibold text-gray-300 uppercase">Actions</th>
+        </tr>
+      </thead>
+      <tbody id="table-body" class="divide-y divide-edge-subtle">
+        <tr><td colspan={columns.length + 1} class="px-6 py-12 text-center text-gray-400">Loading...</td></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <script define:vars={{ endpoint, columns }}>
+    async function loadData() {
+      try {
+        const token = localStorage.getItem('godToken') || 'jmQXoeyxWoBsB7eHzG7FmnH90f22JtaYBxXHoorhfZ-v4tT3VNEr9vvmwHqYHCDoWXHSU4DeZXApCP-Gha-YdA';
+        const response = await fetch(endpoint, { headers: { 'X-God-Token': token } });
+        if (!response.ok) throw new Error('Failed to fetch');
+        
+        const result = await response.json();
+        const data = result.data || [];
+        
+        const tbody = document.getElementById('table-body');
+        tbody.innerHTML = data.length === 0 
+          ? `<tr><td colspan="${columns.length + 1}" class="px-6 py-12 text-center text-gray-400">No dictionaries yet</td></tr>`
+          : data.map(item => `
+              <tr class="hover:bg-graphite/50 transition-colors">
+                ${columns.map(col => `<td class="px-6 py-4 text-sm text-gray-200">${item[col] || '-'}</td>`).join('')}
+                <td class="px-6 py-4 text-right">
+                  <button class="text-gold-500 hover:text-gold-400 text-sm font-medium">Edit</button>
+                </td>
+              </tr>
+            `).join('');
+      } catch (err) {
+        document.getElementById('table-body').innerHTML = `<tr><td colspan="${columns.length + 1}" class="px-6 py-12 text-center text-red-400">Error: ${err.message}</td></tr>`;
+      }
+    }
+    loadData();
+  </script>
 </AdminLayout>