Merge pull request 'Mobile UI Fixes' (#3 ) from dev into main

Reviewed-on: #3
2025-11-25 01:35:21 +01:00
4 changed files with 80 additions and 212 deletions
--- a/README.md
+++ b/README.md
@@ -4,15 +4,12 @@

 <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)** 
+**[Website](https://waifuboard.app)** • **[Documentation](https://waifuboard.app/docs)** •  **[Download Latest](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)** • **[Discord (soon)](#)**

 </div>

@@ -32,12 +29,11 @@

 ## 🖥️ Download & Platform Support

-| Platform | Status          | Link                                                      |
-|----------|-----------------|-----------------------------------------------------------|
-| Windows  | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
-| Linux    | ⏳ Coming soon   | —                                                         |
-| macOS    | ⏳ Coming soon   | —                                                         |
-| Android  | ⏳ Coming soon   | —                                                         |
+| Platform   | Status          | Link                                                      |
+|------------|-----------------|-----------------------------------------------------------|
+| Windows    | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
+| Linux      | ⏳ Coming soon   | —                                                         |
+| macOS      | ⏳ Coming soon   | —                                                         |

 ## 📦 Extensions & Marketplace

--- a/src/content/image-handler.js
+++ b/src/content/image-handler.js
@@ -1,20 +1,12 @@
-let masonryFrameRunning = false;
+let masonryTimer = null;
 function scheduleMasonryRelayout(grid) {
-    if (masonryFrameRunning) return;
-    masonryFrameRunning = true;
-
-    requestAnimationFrame(() => {
+    clearTimeout(masonryTimer);
+    masonryTimer = setTimeout(() => {
        relayoutMasonry(grid);
-        masonryFrameRunning = false;
-    });
+    }, 50);
 }

-export function triggerMasonryRelayout(gallery) {
-    if (!gallery) return;
-    setTimeout(() => relayoutMasonry(gallery), 350);
-}
-
-export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {}) {
+export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options = {}) {
    const {
        showMessage,
        showTagModal,
@@ -24,7 +16,7 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {})
    const card = document.createElement('div');
    card.className = 'image-entry loading newly-added';
    card.dataset.id = id;
-    card.dataset.type = 'image';
+    card.dataset.type = type;
    card.title = tags.join(', ');

    const img = document.createElement('img');
@@ -36,10 +28,10 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {})
        img.classList.add('loaded');
        card.classList.remove('loading');

-        setTimeout(() => {
-            resizeMasonryItem(card);
+        if (type !== 'book') {
+            setTimeout(() => resizeMasonryItem(card), 20);
            scheduleMasonryRelayout(card.parentElement);
-        }, 100);
+        }

        setTimeout(() => {
            card.classList.remove('newly-added');
@@ -53,75 +45,23 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {})

    card.appendChild(img);

-    const buttonsOverlay = createButtonsOverlay(
-        id, imageUrl, thumbnailUrl, tags,
-        card, favoriteIds, showMessage, showTagModal, options
-    );
-    card.appendChild(buttonsOverlay);
+    if (type === 'book') {
+        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;
+    }

-    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;
@@ -129,7 +69,7 @@ function createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteId
    const isFavorited = favoriteIds.has(String(id));
    updateHeartIcon(favBtn, isFavorited);

-    favBtn.onclick = async e => {
+    favBtn.onclick = async (e) => {
        e.stopPropagation();
        e.preventDefault();

@@ -147,80 +87,81 @@ function createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteId
                        options.applyLayoutToGallery(options.favoritesGallery, options.currentLayout);
                    }
                }
-            } else showMessage('Failed to remove favorite', 'error');
+            } else {
+                showMessage('Failed to remove favorite', 'error');
+            }
        } else {
            const favoriteData = {
                id: String(id),
                image_url: imageUrl,
                thumbnail_url: thumbnailUrl,
                tags: tags.join(','),
-                title: card.title || card.dataset.title || 'Unknown'
+                title: card.title || 'Unknown'
            };
            const success = await window.api.addFavorite(favoriteData);
            if (success) {
                favoriteIds.add(String(id));
                updateHeartIcon(favBtn, true);
                showMessage('Added to favorites', 'success');
-            } else showMessage('Failed to save favorite', 'error');
+            } else {
+                showMessage('Failed to save favorite', 'error');
+            }
        }
    };

-    return favBtn;
-}
+    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);
+    };

-function updateHeartIcon(btn, isFavorited) {
-    btn.innerHTML = isFavorited
-        ? `<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";
-}
+    buttonsOverlay.appendChild(tagBtn);
+    buttonsOverlay.appendChild(favBtn);
+    card.appendChild(buttonsOverlay);

-
-function getSidebarClosedWidth() {
-    const s = document.querySelector('.sidebar');
-    if (!s) return 0;
-
-    return parseFloat(
-        getComputedStyle(document.documentElement)
-            .getPropertyValue('--sidebar-width-collapsed')
-    );
+    return card;
 }

 function resizeMasonryItem(item) {
    if (item.dataset.type === 'book') return;

    const grid = item.parentElement;
-    if (!grid) return;
+    const rowHeight = parseInt(getComputedStyle(grid).gridAutoRows);
+    const rowGap = parseInt(getComputedStyle(grid).gap);
+
    const img = item.querySelector("img");
-    if (!img || !img.complete || img.naturalWidth === 0) 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) return;

-    const gridClosedWidth = gridCurrent - (sidebarExpanded - sidebarCollapsed);
+    if (!img.complete || img.naturalWidth === 0) {
+        return;
+    }

-    const currentItemWidth = item.getBoundingClientRect().width;
-    const simulatedWidth = (currentItemWidth / gridCurrent) * gridClosedWidth;
+    const width = img.clientWidth;
+    const imageHeight = (img.naturalHeight / img.naturalWidth) * width;

-    const gridStyles = getComputedStyle(grid);
-    const rowHeight = parseInt(gridStyles.gridAutoRows);
-    const rowGap = parseInt(gridStyles.gap);
-
-    const imageHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
-    const totalHeight = imageHeight;
+    const extra = 2;
+    const totalHeight = imageHeight + extra;
    const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap));
+    item.style.gridRowEnd = "span " + rowSpan;

-    item.style.gridRowEnd = `span ${rowSpan}`;
-    item.style.height = "auto";
+    item.style.height = totalHeight + "px";
 }

-
+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) {
-    if (!grid) return;
-    const items = grid.querySelectorAll('.image-entry[data-type="image"]');
+    const items = grid.querySelectorAll('.image-entry:not([data-type="book"])');
    items.forEach(item => resizeMasonryItem(item));
 }

--- a/src/renderer.js
+++ b/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, createBookCard, populateTagModal, triggerMasonryRelayout } from './content/image-handler.js';
+import { createImageCard, populateTagModal } from './content/image-handler.js';
 import { showMessage as uiShowMessage } from './modules/ui-utils.js';
 import { applyLayoutToGallery } from './modules/layout-manager.js';

@@ -23,38 +23,12 @@ document.addEventListener('DOMContentLoaded', async () => {
        }
    } catch (e) { console.error(e); }

-    function showMessage(msg, type = 'success') {
-        if (domRefs.messageBar) uiShowMessage(domRefs.messageBar, msg, type);
-    }
-
-    function showTagModal(tags) {
-        if (domRefs.tagInfoContent) {
-            populateTagModal(domRefs.tagInfoContent, tags);
-            domRefs.tagInfoModal.classList.remove('hidden');
-        }
-    }
-
+    function showMessage(msg, type = 'success') { if (domRefs.messageBar) uiShowMessage(domRefs.messageBar, msg, type); }
+    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');
+        return createImageCard(id, tags, img, thumb, type, { currentLayout, showMessage, showTagModal, applyLayoutToGallery, favoritesGallery: document.getElementById('favorites-gallery'), favoriteIds });
    }
+    function updateHeader() { if (domRefs.headerContext) domRefs.headerContext.classList.add('hidden'); }

    const callbacks = { showMessage, applyLayoutToGallery, updateHeader, createImageCard: localCreateImageCard };

@@ -316,16 +290,13 @@ 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>';
-        } else {
+        if (!rawFavorites || rawFavorites.length === 0) 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 cardType = row.type || 'image';
-                const card = localCreateImageCard(row.id, tags, row.image_url, row.thumbnail_url, cardType);
+                const card = localCreateImageCard(row.id, tags, row.image_url, row.thumbnail_url, 'image');
                card.dataset.title = row.title;
                favGallery.appendChild(card);
            });
--- a/views/styles/books.css
+++ b/views/styles/books.css
@@ -402,43 +402,3 @@
        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;
-}