support for novels and lot of formats for books

docker/src/scripts/local-library-books.js

@@ -26,21 +26,37 @@ async function loadLocalEntries() {
     grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(6);
 
     try {
-        // Cambiado a endpoint de libros
-        const response = await fetch('/api/library/manga');
-        const entries = await response.json();
-        localEntries = entries;
+        const [mangaRes, novelRes] = await Promise.all([
+            fetch('/api/library/manga'),
+            fetch('/api/library/novels')
+        ]);
 
-        if (entries.length === 0) {
-            grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 3rem;">No books found in your local library.</p>';
+        const [manga, novel] = await Promise.all([
+            mangaRes.json(),
+            novelRes.json()
+        ]);
+
+        localEntries = [
+            ...manga.map(e => ({ ...e, type: 'manga' })),
+            ...novel.map(e => ({ ...e, type: 'novel' }))
+        ];
+
+        if (localEntries.length === 0) {
+            grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;padding:3rem;">No books found.</p>';
             return;
         }
-        renderLocalEntries(entries);
-    } catch (err) {
-        grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-danger); padding: 3rem;">Error loading local books.</p>';
+
+        renderLocalEntries(localEntries);
+    } catch {
+        grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;color:var(--color-danger);padding:3rem;">Error loading library.</p>';
     }
 }
 
+function filterLocal(type) {
+    if (type === 'all') renderLocalEntries(localEntries);
+    else renderLocalEntries(localEntries.filter(e => e.type === type));
+}
+
 function renderLocalEntries(entries) {
     const grid = document.getElementById('local-entries-grid');
     grid.innerHTML = entries.map(entry => {
@@ -58,6 +74,7 @@ function renderLocalEntries(entries) {
                     <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
                         ${chapters} Chapters
                     </p>
+                    <div class="badge">${entry.type}</div>
                     <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
                         ${entry.matched ? '● Linked' : '○ Unlinked'}
                     </div>