Update templates/index.html

templates/index.html

@@ -134,9 +134,9 @@
                     data.results.forEach(item => {
                         // Create Card
                         const div = document.createElement('div');
-                        div.className = "bg-slate-800/50 p-4 rounded-lg border border-slate-700 hover:border-indigo-500/50 transition flex flex-col gap-2";
+                        div.className = "bg-slate-800/50 p-4 rounded-lg border border-slate-700 hover:border-indigo-500/50 transition flex flex-col gap-3";
                         
-                        // Header: Title + Score
+                        // 1. Header: Title, Date, Score
                         const header = document.createElement('div');
                         header.className = "flex justify-between items-start";
                         header.innerHTML = `
@@ -144,18 +144,46 @@
                                 <h3 class="font-semibold text-slate-200 text-sm">${item.title}</h3>
                                 <span class="text-xs text-slate-500">${formatDate(item.date)}</span>
                             </div>
-                            <span class="bg-indigo-900/50 text-indigo-300 text-xs px-2 py-1 rounded font-mono">
-                                score: ${item.score}
+                            <span class="bg-indigo-900/50 text-indigo-300 text-xs px-2 py-1 rounded font-mono border border-indigo-500/20">
+                                ${item.score}
                             </span>
                         `;
                         
-                        // Body: Snippet
+                        // 2. Body: Clean Text
                         const body = document.createElement('div');
-                        body.className = "text-xs text-slate-300 snippet-text bg-slate-900/50 p-2 rounded";
-                        body.textContent = item.snippet;
+                        body.className = "text-sm text-slate-300 snippet-text pl-2 border-l-2 border-slate-600";
+                        body.textContent = item.text;
+
+                        // 3. Footer: Tags & Labels
+                        const footer = document.createElement('div');
+                        footer.className = "flex flex-wrap gap-2 mt-1";
+                        
+                        // Render Tags (Green)
+                        if (item.tags && item.tags.length > 0) {
+                            item.tags.forEach(tag => {
+                                const span = document.createElement('span');
+                                span.className = "px-2 py-0.5 rounded text-[10px] uppercase font-bold tracking-wider bg-emerald-900/40 text-emerald-400 border border-emerald-700/50";
+                                span.textContent = tag;
+                                footer.appendChild(span);
+                            });
+                        }
+
+                        // Render Labels (Blue)
+                        if (item.labels && item.labels.length > 0) {
+                            item.labels.forEach(lbl => {
+                                // Filter out generic 'text' label to reduce noise
+                                if(lbl === 'text') return; 
+                                const span = document.createElement('span');
+                                span.className = "px-2 py-0.5 rounded text-[10px] uppercase font-bold tracking-wider bg-sky-900/40 text-sky-400 border border-sky-700/50";
+                                span.textContent = lbl;
+                                footer.appendChild(span);
+                            });
+                        }
 
                         div.appendChild(header);
                         div.appendChild(body);
+                        if (footer.hasChildNodes()) div.appendChild(footer);
+                        
                         resultsArea.appendChild(div);
                     });
                 } else if (data.success) {