Update scripts/ui.js

scripts/ui.js

@@ -1,22 +1,33 @@
-// in scripts/ui.js
+// The complete ui.js file with the correct worker URL.
+
+// Define the backend URL as a constant for easy access.
+const BACKEND_URL = 'https://stream-ai-backend.smplushypermedia.workers.dev';
 
 async function loadRecommendations() {
     const container = document.getElementById('recommendations-container');
     if (!container) return;
 
     try {
-        const response = await fetch('https://stream-ai-backend.smplushypermedia.workers.dev/api/recommendations');
+        // Fetch recommendations from your live backend.
+        const response = await fetch(`${BACKEND_URL}/api/recommendations`);
+        
+        if (!response.ok) {
+            throw new Error(`Network response was not ok. Status: ${response.status}`);
+        }
+
         const listings = await response.json();
 
         container.innerHTML = ''; // Clear previous listings
+        if (listings.length === 0) {
+            container.innerHTML = `<p class="text-center col-span-full text-gray-500">No recommendations available yet. Be the first to add one!</p>`;
+            return;
+        }
+
         listings.forEach(item => {
             const card = document.createElement('div');
-            // Add a subtle border if the item is pinned
-            const pinnedClass = item.is_pinned ? 'border-2 border-indigo-400' : '';
-            
-            card.className = `stream-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 p-4 relative ${pinnedClass}`;
+            const pinnedClass = item.is_pinned ? 'border-2 border-indigo-400' : 'shadow-md';
+            card.className = `stream-card bg-white rounded-lg overflow-hidden hover:shadow-xl transition duration-300 p-4 relative ${pinnedClass}`;
             
-            // The card's content, now including the source_name
             card.innerHTML = `
                 ${item.is_pinned ? '<div class="absolute top-2 right-2 text-xs bg-indigo-500 text-white px-2 py-1 rounded-full animate-pulse"><i class="fas fa-thumbtack mr-1"></i> Pinned</div>' : ''}
                 <div class="mb-3">
@@ -25,9 +36,9 @@ async function loadRecommendations() {
                         From: <span class="font-semibold text-indigo-600">${item.source_name}</span>
                     </div>
                 </div>
-                <p class="text-gray-700 text-sm mb-4">${item.description}</p>
-                <div class="flex justify-between items-center">
-                    <span class="text-xs font-bold uppercase text-gray-400">${item.category.replace('_', ' ')}</span>
+                <p class="text-gray-700 text-sm mb-4">${item.description || ''}</p>
+                <div class="flex justify-between items-center mt-auto">
+                    <span class="text-xs font-bold uppercase text-gray-400">${(item.category || '').replace('_', ' ')}</span>
                     <a href="${item.url}" target="_blank" rel="noopener noreferrer" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-full text-xs font-medium transition">
                         Visit Site
                     </a>
@@ -36,11 +47,14 @@ async function loadRecommendations() {
             container.appendChild(card);
         });
     } catch (error) {
-        container.innerHTML = `<p class="text-center text-red-500">Could not load recommendations.</p>`;
+        console.error("Failed to load recommendations:", error);
+        if (container) {
+            container.innerHTML = `<p class="text-center col-span-full text-red-500">Could not load recommendations. Please ensure the backend is running and the URL is correct.</p>`;
+        }
     }
 }
 
 export function initUI() {
-    // This will run our function on page load
+    // This will run our function on page load to populate the recommendations.
     loadRecommendations();
 }