README.md updated

README.md

@@ -4,12 +4,15 @@
 
 <img src="public/banner.png" alt="WaifuBoard Hero" width="100%"/>
 <div align="center">
+<br>
 
 [![Windows](https://img.shields.io/badge/Windows-SUPPORTED-0078D6?style=for-the-badge&logo=windows&logoColor=white)](https://waifuboard.app)
 [![Latest](https://img.shields.io/gitea/v/release/ItsSkaiya/WaifuBoard?gitea_url=https://git.waifuboard.app&style=for-the-badge)](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)
+![Downloads](https://img.shields.io/endpoint?url=https://waifuboard.jaiet7.workers.dev&style=for-the-badge)
 [![Extensions](https://img.shields.io/badge/Extensions-Repository-8257e5?style=for-the-badge)](https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions)
+[![Discord](https://img.shields.io/badge/Discord-JOIN-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/BVdGSCXxrm)
 
-**[Website](https://waifuboard.app)** • **[Documentation](https://waifuboard.app/docs)** •  **[Download Latest](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)** • **[Discord (soon)](#)**
+**[Website](https://waifuboard.app)** • **[Documentation](https://waifuboard.app/docs)** •  **[Download Latest](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)** 
 
 </div>
 
@@ -29,11 +32,12 @@
 
 ## 🖥️ Download & Platform Support
 
-| Platform   | Status          | Link                                                      |
+| Platform | Status          | Link                                                      |
-|------------|-----------------|-----------------------------------------------------------|
+|----------|-----------------|-----------------------------------------------------------|
-| Windows    | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
+| Windows  | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
-| Linux      | ⏳ Coming soon   | —                                                         |
+| Linux    | ⏳ Coming soon   | —                                                         |
-| macOS      | ⏳ Coming soon   | —                                                         |
+| macOS    | ⏳ Coming soon   | —                                                         |
+| Android  | ⏳ Coming soon   | —                                                         |
 
 ## 📦 Extensions & Marketplace
 

src/content/image-handler.js

@@ -1,12 +1,20 @@
-let masonryTimer = null;
+let masonryFrameRunning = false;
 function scheduleMasonryRelayout(grid) {
-    clearTimeout(masonryTimer);
+    if (masonryFrameRunning) return;
-    masonryTimer = setTimeout(() => {
+    masonryFrameRunning = true;
+
+    requestAnimationFrame(() => {
         relayoutMasonry(grid);
-    }, 50);
+        masonryFrameRunning = false;
+    });
 }
 
-export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options = {}) {
+export function triggerMasonryRelayout(gallery) {
+    if (!gallery) return;
+    setTimeout(() => relayoutMasonry(gallery), 350);
+}
+
+export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {}) {
     const {
         showMessage,
         showTagModal,
@@ -16,7 +24,7 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
     const card = document.createElement('div');
     card.className = 'image-entry loading newly-added';
     card.dataset.id = id;
-    card.dataset.type = type;
+    card.dataset.type = 'image';
     card.title = tags.join(', ');
 
     const img = document.createElement('img');
@@ -28,10 +36,10 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
         img.classList.add('loaded');
         card.classList.remove('loading');
 
-        if (type !== 'book') {
+        setTimeout(() => {
-            setTimeout(() => resizeMasonryItem(card), 20);
+            resizeMasonryItem(card);
             scheduleMasonryRelayout(card.parentElement);
-        }
+        }, 100);
 
         setTimeout(() => {
             card.classList.remove('newly-added');
@@ -45,23 +53,75 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
 
     card.appendChild(img);
 
-    if (type === 'book') {
+    const buttonsOverlay = createButtonsOverlay(
-        const readOverlay = document.createElement('div');
+        id, imageUrl, thumbnailUrl, tags,
-        readOverlay.className = 'book-read-overlay';
+        card, favoriteIds, showMessage, showTagModal, options
-        readOverlay.innerHTML = `
+    );
-            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    card.appendChild(buttonsOverlay);
-                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
-                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
-            </svg>
-            <span>Click To Read</span>
-        `;
-        card.appendChild(readOverlay);
-        return card;
-    }
 
+    return card;
+}
+
+export function createBookCard(id, tags, imageUrl, thumbnailUrl, title, options = {}) {
+    const card = document.createElement('div');
+    card.className = 'image-entry loading newly-added';
+    card.dataset.id = id;
+    card.dataset.type = 'book';
+    card.dataset.title = title || 'Unknown';
+    card.title = tags.join(', ');
+
+    const img = document.createElement('img');
+    img.src = thumbnailUrl || imageUrl;
+    img.loading = 'lazy';
+    img.alt = title || tags.join(' ');
+
+    img.onload = () => {
+        img.classList.add('loaded');
+        card.classList.remove('loading');
+
+        setTimeout(() => card.classList.remove('newly-added'), 400);
+    };
+
+    img.onerror = () => {
+        card.classList.remove('loading');
+        img.classList.add('loaded');
+    };
+
+    card.appendChild(img);
+
+    const readOverlay = document.createElement('div');
+    readOverlay.className = 'book-read-overlay';
+    readOverlay.innerHTML = `
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+        </svg>
+        <span>Click To Read</span>
+    `;
+    card.appendChild(readOverlay);
+
+    return card;
+}
+
+function createButtonsOverlay(id, imageUrl, thumbnailUrl, tags, card, favoriteIds, showMessage, showTagModal, options) {
     const buttonsOverlay = document.createElement('div');
     buttonsOverlay.className = 'image-buttons';
 
+    const tagBtn = document.createElement('button');
+    tagBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>`;
+    tagBtn.title = "View Tags";
+    tagBtn.onclick = e => {
+        e.stopPropagation();
+        showTagModal(tags);
+    };
+    const favBtn = createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteIds, showMessage, options);
+    buttonsOverlay.appendChild(tagBtn);
+    buttonsOverlay.appendChild(favBtn);
+
+    return buttonsOverlay;
+}
+
+function createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteIds, showMessage, options) {
     const favBtn = document.createElement('button');
     favBtn.className = 'heart-button';
     favBtn.dataset.id = id;
@@ -69,7 +129,7 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
     const isFavorited = favoriteIds.has(String(id));
     updateHeartIcon(favBtn, isFavorited);
 
-    favBtn.onclick = async (e) => {
+    favBtn.onclick = async e => {
         e.stopPropagation();
         e.preventDefault();
 
@@ -87,81 +147,80 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
                         options.applyLayoutToGallery(options.favoritesGallery, options.currentLayout);
                     }
                 }
-            } else {
+            } else showMessage('Failed to remove favorite', 'error');
-                showMessage('Failed to remove favorite', 'error');
-            }
         } else {
             const favoriteData = {
                 id: String(id),
                 image_url: imageUrl,
                 thumbnail_url: thumbnailUrl,
                 tags: tags.join(','),
-                title: card.title || 'Unknown'
+                title: card.title || card.dataset.title || 'Unknown'
             };
             const success = await window.api.addFavorite(favoriteData);
             if (success) {
                 favoriteIds.add(String(id));
                 updateHeartIcon(favBtn, true);
                 showMessage('Added to favorites', 'success');
-            } else {
+            } else showMessage('Failed to save favorite', 'error');
-                showMessage('Failed to save favorite', 'error');
-            }
         }
     };
 
-    const tagBtn = document.createElement('button');
+    return favBtn;
-    tagBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>`;
+}
-    tagBtn.title = "View Tags";
-    tagBtn.onclick = (e) => {
-        e.stopPropagation();
-        showTagModal(tags);
-    };
 
-    buttonsOverlay.appendChild(tagBtn);
+function updateHeartIcon(btn, isFavorited) {
-    buttonsOverlay.appendChild(favBtn);
+    btn.innerHTML = isFavorited
-    card.appendChild(buttonsOverlay);
+        ? `<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`
+        : `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
+    btn.title = isFavorited ? "Remove from Favorites" : "Add to Favorites";
+}
 
-    return card;
+
+function getSidebarClosedWidth() {
+    const s = document.querySelector('.sidebar');
+    if (!s) return 0;
+
+    return parseFloat(
+        getComputedStyle(document.documentElement)
+            .getPropertyValue('--sidebar-width-collapsed')
+    );
 }
 
 function resizeMasonryItem(item) {
     if (item.dataset.type === 'book') return;
 
     const grid = item.parentElement;
-    const rowHeight = parseInt(getComputedStyle(grid).gridAutoRows);
+    if (!grid) return;
-    const rowGap = parseInt(getComputedStyle(grid).gap);
-
     const img = item.querySelector("img");
+    if (!img || !img.complete || img.naturalWidth === 0) return;
 
-    if (!img) return;
+    const gridCurrent = grid.getBoundingClientRect().width;
+    const sidebar = document.querySelector(".sidebar");
+    const sidebarExpanded = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sidebar-width-expanded"));
+    const sidebarCollapsed = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sidebar-width-collapsed"));
 
-    if (!img.complete || img.naturalWidth === 0) {
+    const gridClosedWidth = gridCurrent - (sidebarExpanded - sidebarCollapsed);
-        return;
-    }
 
-    const width = img.clientWidth;
+    const currentItemWidth = item.getBoundingClientRect().width;
-    const imageHeight = (img.naturalHeight / img.naturalWidth) * width;
+    const simulatedWidth = (currentItemWidth / gridCurrent) * gridClosedWidth;
 
-    const extra = 2;
+    const gridStyles = getComputedStyle(grid);
-    const totalHeight = imageHeight + extra;
+    const rowHeight = parseInt(gridStyles.gridAutoRows);
+    const rowGap = parseInt(gridStyles.gap);
+
+    const imageHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
+    const totalHeight = imageHeight;
     const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap));
-    item.style.gridRowEnd = "span " + rowSpan;
 
-    item.style.height = totalHeight + "px";
+    item.style.gridRowEnd = `span ${rowSpan}`;
+    item.style.height = "auto";
 }
 
-function updateHeartIcon(btn, isFavorited) {
+
-    if (isFavorited) {
-        btn.innerHTML = `<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
-        btn.title = "Remove from Favorites";
-    } else {
-        btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
-        btn.title = "Add to Favorites";
-    }
-}
 
 function relayoutMasonry(grid) {
-    const items = grid.querySelectorAll('.image-entry:not([data-type="book"])');
+    if (!grid) return;
+    const items = grid.querySelectorAll('.image-entry[data-type="image"]');
     items.forEach(item => resizeMasonryItem(item));
 }
 
@@ -176,4 +235,4 @@ export function populateTagModal(container, tags) {
         span.textContent = tag;
         container.appendChild(span);
     });
-}
+}

src/renderer.js

@@ -2,7 +2,7 @@ import { populateSources } from './extensions/load-extensions.js';
 import { setupGlobalKeybinds } from './utils/keybinds.js';
 import { getDomElements } from './utils/dom-loader.js';
 import { performSearch, loadMoreResults } from './modules/search-handler.js';
-import { createImageCard, populateTagModal } from './content/image-handler.js';
+import { createImageCard, createBookCard, populateTagModal, triggerMasonryRelayout } from './content/image-handler.js';
 import { showMessage as uiShowMessage } from './modules/ui-utils.js';
 import { applyLayoutToGallery } from './modules/layout-manager.js';
 
@@ -23,12 +23,38 @@ document.addEventListener('DOMContentLoaded', async () => {
         }
     } catch (e) { console.error(e); }
 
-    function showMessage(msg, type = 'success') { if (domRefs.messageBar) uiShowMessage(domRefs.messageBar, msg, type); }
+    function showMessage(msg, type = 'success') {
-    function showTagModal(tags) { if (domRefs.tagInfoContent) { populateTagModal(domRefs.tagInfoContent, tags); domRefs.tagInfoModal.classList.remove('hidden'); } }
+        if (domRefs.messageBar) uiShowMessage(domRefs.messageBar, msg, type);
-    function localCreateImageCard(id, tags, img, thumb, type) {
+    }
-        return createImageCard(id, tags, img, thumb, type, { currentLayout, showMessage, showTagModal, applyLayoutToGallery, favoritesGallery: document.getElementById('favorites-gallery'), favoriteIds });
+
+    function showTagModal(tags) {
+        if (domRefs.tagInfoContent) {
+            populateTagModal(domRefs.tagInfoContent, tags);
+            domRefs.tagInfoModal.classList.remove('hidden');
+        }
+    }
+
+    function localCreateImageCard(id, tags, img, thumb, type) {
+        const sharedOptions = {
+            currentLayout,
+            showMessage,
+            showTagModal,
+            applyLayoutToGallery,
+            favoritesGallery: document.getElementById('favorites-gallery'),
+            favoriteIds
+        };
+
+        if (type === 'book') {
+            const title = tags[0] || 'Unknown';
+            return createBookCard(id, tags, img, thumb, title, sharedOptions);
+        } else {
+            return createImageCard(id, tags, img, thumb, sharedOptions);
+        }
+    }
+
+    function updateHeader() {
+        if (domRefs.headerContext) domRefs.headerContext.classList.add('hidden');
     }
-    function updateHeader() { if (domRefs.headerContext) domRefs.headerContext.classList.add('hidden'); }
 
     const callbacks = { showMessage, applyLayoutToGallery, updateHeader, createImageCard: localCreateImageCard };
 
@@ -290,13 +316,16 @@ document.addEventListener('DOMContentLoaded', async () => {
         const favGallery = document.getElementById('favorites-gallery');
         const rawFavorites = await window.api.getFavorites();
         favGallery.innerHTML = '';
-        if (!rawFavorites || rawFavorites.length === 0) favGallery.innerHTML = '<div class="loading-state"><p>No favorites found.</p></div>';
+        if (!rawFavorites || rawFavorites.length === 0) {
-        else {
+            favGallery.innerHTML = '<div class="loading-state"><p>No favorites found.</p></div>';
+        } else {
             rawFavorites.forEach(row => {
                 let tags = [];
                 if (typeof row.tags === 'string') tags = row.tags.split(',').filter(t=>t);
                 else if (Array.isArray(row.tags)) tags = row.tags;
-                const card = localCreateImageCard(row.id, tags, row.image_url, row.thumbnail_url, 'image');
+
+                const cardType = row.type || 'image';
+                const card = localCreateImageCard(row.id, tags, row.image_url, row.thumbnail_url, cardType);
                 card.dataset.title = row.title;
                 favGallery.appendChild(card);
             });

views/styles/books.css

@@ -401,4 +401,44 @@
         grid-template-columns: 320px 1fr;
         gap: 2.5rem;
     }
-}
+}
+
+#pagination-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+#pagination-controls .page-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.4rem 0.8rem;
+}
+.image-entry[data-type="book"] {
+    position: relative;
+}
+
+.image-entry[data-type="book"] .book-read-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    pointer-events: none;
+
+    color: #9b5cff;
+    font-weight: 600;
+    text-shadow: 0 0 6px rgba(0,0,0,0.6);
+    opacity: 0;
+    transition: opacity .25s ease;
+}
+
+.image-entry[data-type="book"]:hover .book-read-overlay {
+    opacity: 1;
+}