search pt 2

src/components/SlugInput.astro

@@ -105,32 +105,144 @@ const languages = [
     renderSlugs();
   }
 
-  function renderSlugs() {
+  async function renderSlugs() {
     if (!slugList) return;
     
-    slugList.innerHTML = '';
+    // Show loading state
-    [...slugs].forEach(slug => {
+    slugList.innerHTML = `
-      const div = document.createElement('div');
+      <div class="animate-pulse space-y-2">
-      div.className = 'flex items-center justify-between p-3 bg-primary rounded-lg border border-hover/30';
+        ${[...slugs].map(() => `
+          <div class="flex items-center gap-4 p-3 bg-primary rounded-lg border border-hover/30">
+            <div class="w-12 h-16 bg-hover/30 rounded"></div>
+            <div class="flex-1">
+              <div class="h-5 bg-hover/30 rounded w-3/4 mb-2"></div>
+              <div class="h-4 bg-hover/30 rounded w-1/2"></div>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    `;
 
-      const text = document.createElement('span');
+    const promises = [...slugs].map(async (slug) => {
-      text.textContent = slug;
+      try {
+        // Updated API endpoint to match ComicK's current structure
+        const response = await fetch(`https://api.comick.fun/comic/${encodeURIComponent(slug)}`);
+        if (!response.ok) throw new Error('Comic not found');
         
-      const removeBtn = document.createElement('button');
+        const data = await response.json();
-      removeBtn.className = 'text-red-500 hover:text-red-600 transition-colors';
-      removeBtn.innerHTML = `
-        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M6 18L18 6M6 6l12 12"></path>
-        </svg>
-      `;
-      removeBtn.onclick = () => {
-        slugs.delete(slug);
-        updateSlugs();
-      };
         
-      div.appendChild(text);
+        const div = document.createElement('div');
-      div.appendChild(removeBtn);
+        div.className = 'flex items-center gap-4 p-4 bg-primary rounded-lg border border-hover/30 hover:border-accent/50 transition-all duration-300 group relative';
-      slugList.appendChild(div);
+        
+        // Add a link to the comic
+        const link = document.createElement('a');
+        link.href = `https://comick.io/comic/${slug}`;
+        link.target = '_blank';
+        link.rel = 'noopener noreferrer';
+        link.className = 'flex items-center gap-4 flex-1';
+        
+        // Handle cover image
+        if (data.comic?.md_covers?.[0]?.b2key) {
+          const img = document.createElement('img');
+          img.src = `https://meo.comick.pictures/${data.comic.md_covers[0].b2key}`;
+          img.className = 'w-16 h-24 object-cover rounded shadow-md group-hover:scale-105 transition-transform duration-300';
+          img.alt = data.comic.title || slug;
+          img.onerror = () => {
+            img.src = '/placeholder.png'; // Fallback image
+            img.onerror = null;
+          };
+          link.appendChild(img);
+        } else {
+          // Placeholder if no image
+          const placeholder = document.createElement('div');
+          placeholder.className = 'w-16 h-24 bg-hover/30 rounded flex items-center justify-center text-primary/30';
+          placeholder.innerHTML = '<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>';
+          link.appendChild(placeholder);
+        }
+        
+        const info = document.createElement('div');
+        info.className = 'flex-1 min-w-0';
+        info.innerHTML = `
+          <div class="font-medium text-lg truncate group-hover:text-accent transition-colors">
+            ${data.comic?.title || slug}
+          </div>
+          <div class="text-sm text-primary/60 truncate">${slug}</div>
+          ${data.comic?.last_chapter ? `
+            <div class="text-xs text-accent mt-1">
+              Latest: Chapter ${data.comic.last_chapter}
+            </div>
+          ` : ''}
+        `;
+        
+        link.appendChild(info);
+        div.appendChild(link);
+        
+        const removeBtn = document.createElement('button');
+        removeBtn.className = 'text-red-500 hover:text-red-600 transition-colors p-2 hover:bg-red-500/10 rounded-full flex-shrink-0 relative z-10';
+        removeBtn.innerHTML = `
+          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        `;
+        removeBtn.onclick = (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          div.classList.add('scale-95', 'opacity-0');
+          setTimeout(() => {
+            slugs.delete(slug);
+            updateSlugs();
+          }, 200);
+        };
+        
+        div.appendChild(removeBtn);
+        return div;
+      } catch (error) {
+        console.error(`Failed to fetch comic info for ${slug}:`, error);
+        // Improved error state
+        const div = document.createElement('div');
+        div.className = 'flex items-center justify-between p-4 bg-primary rounded-lg border border-red-500/30 group';
+        div.innerHTML = `
+          <div class="flex items-center gap-4 flex-1">
+            <div class="w-16 h-24 bg-red-500/10 rounded flex items-center justify-center text-red-500/50">
+              <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+              </svg>
+            </div>
+            <div>
+              <div class="text-red-500 font-medium">Failed to load details</div>
+              <div class="text-sm text-primary/60">${slug}</div>
+            </div>
+          </div>
+          <button 
+            class="text-red-500 hover:text-red-600 transition-colors p-2 hover:bg-red-500/10 rounded-full"
+          >
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        `;
+        
+        const removeButton = div.querySelector('button');
+        if (removeButton) {
+          removeButton.onclick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            div.classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+              slugs.delete(slug);
+              updateSlugs();
+            }, 200);
+          };
+        }
+        return div;
+      }
+    });
+    
+    Promise.all(promises).then(elements => {
+      slugList.innerHTML = '';
+      elements.forEach(element => slugList.appendChild(element));
+    }).catch(error => {
+      console.error('Failed to render slugs:', error);
     });
   }