Move category edit to document page (inline dropdown), revert dashboard to static badges

templates/dashboard.html

@@ -120,16 +120,16 @@
                 {{if .Stats.RecentUploads}}
                 <div class="divide-y divide-gray-100 dark:divide-gray-700">
                     {{range .Stats.RecentUploads}}
-                    <div class="flex items-center px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group">
+                    <a href="/document/{{.ID}}" class="flex items-center px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group">
-                        <a href="/document/{{.ID}}" class="flex-shrink-0 p-2 bg-gray-100 dark:bg-gray-700 rounded-lg mr-4">
+                        <div class="flex-shrink-0 p-2 bg-gray-100 dark:bg-gray-700 rounded-lg mr-4">
                             <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                             </svg>
-                        </a>
+                        </div>
-                        <a href="/document/{{.ID}}" class="flex-1 min-w-0">
+                        <div class="flex-1 min-w-0">
                             <p class="font-medium text-gray-900 dark:text-white truncate group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">{{.Title}}</p>
                             <p class="text-sm text-gray-500 dark:text-gray-400 truncate">{{truncate .Summary 100}}</p>
-                        </a>
+                        </div>
                         <div class="flex-shrink-0 ml-4 text-right">
                             {{if eq .Status "processing"}}
                             <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300" data-processing="{{.ID}}">
@@ -144,18 +144,13 @@
                                 Error
                             </span>
                             {{else}}
-                            <select onchange="updateCategory('{{.ID}}', '{{.Title}}', this.value)" 
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300">
-                                    data-category="{{.Category}}"
+                                {{title .Category}}
-                                    class="text-xs font-medium bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 rounded-full px-2.5 py-0.5 border-0 cursor-pointer hover:bg-brand-200 dark:hover:bg-brand-900/50">
+                            </span>
-                                {{$cat := .Category}}
-                                {{range $.Categories}}
-                                <option value="{{.}}" {{if eq . $cat}}selected{{end}}>{{title .}}</option>
-                                {{end}}
-                            </select>
                             {{end}}
                             <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{formatDateTime .ProcessedAt}}</p>
                         </div>
-                    </div>
+                    </a>
                     {{end}}
                 </div>
                 {{else}}
@@ -397,23 +392,6 @@
         }, 2000);
     }
     
-    async function updateCategory(id, title, newCategory) {
-        try {
-            const res = await fetch('/api/document/' + id, {
-                method: 'PUT',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({title: title, category: newCategory, notes: ''})
-            });
-            if (res.ok) {
-                showToast('Moved to ' + newCategory, 'success');
-            } else {
-                showToast('Failed to update', 'error');
-            }
-        } catch {
-            showToast('Failed to update', 'error');
-        }
-    }
-
     function showToast(message, type = 'info') {
         const colors = {
             success: 'bg-green-500',

templates/document.html

@@ -12,9 +12,12 @@
             </a>
             <div>
                 <div class="flex items-center space-x-3 mb-1">
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300">
+                    <select id="inline-category" onchange="inlineUpdateCategory(this.value)"
-                        {{categoryIcon .Document.Category}} {{title .Document.Category}}
+                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 border-0 cursor-pointer hover:bg-brand-200 dark:hover:bg-brand-900/50">
-                    </span>
+                        {{range .Categories}}
+                        <option value="{{.}}" {{if eq . $.Document.Category}}selected{{end}}>{{categoryIcon .}} {{title .}}</option>
+                        {{end}}
+                    </select>
                     {{if .Document.Type}}
                     <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                         {{title .Document.Type}}
@@ -377,6 +380,21 @@
         document.getElementById('edit-modal').classList.toggle('hidden');
     }
 
+    async function inlineUpdateCategory(newCategory) {
+        const res = await fetch('/api/document/{{.Document.ID}}', {
+            method: 'PUT',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                title: '{{.Document.Title}}',
+                category: newCategory,
+                notes: `{{.Document.Notes}}`
+            })
+        });
+        if (res.ok) {
+            location.reload();
+        }
+    }
+    
     function copyText() {
         const text = document.getElementById('ocr-text').textContent;
         navigator.clipboard.writeText(text);