Organized the differences between server and docker versions.

We are launching a docker version (server version) today so we want to just organize the repo
so its easier to navigate.

desktop/src/scripts/books/book.js

@@ -0,0 +1,342 @@
+let bookData = null;
+let extensionName = null;
+let bookId = null;
+let bookSlug = null;
+
+let allChapters = [];
+let filteredChapters = [];
+
+const chapterPagination = Object.create(PaginationManager);
+chapterPagination.init(12, () => renderChapterTable());
+
+document.addEventListener('DOMContentLoaded', () => {
+    init();
+    setupModalClickOutside();
+});
+
+async function init() {
+    try {
+
+        const urlData = URLUtils.parseEntityPath('book');
+        if (!urlData) {
+            showError("Book Not Found");
+            return;
+        }
+
+        extensionName = urlData.extensionName;
+        bookId = urlData.entityId;
+        bookSlug = urlData.slug;
+
+        await loadBookMetadata();
+
+        await loadChapters();
+
+        await setupAddToListButton();
+
+    } catch (err) {
+        console.error("Metadata Error:", err);
+        showError("Error loading book");
+    }
+}
+
+async function loadBookMetadata() {
+    const source = extensionName || 'anilist';
+    const fetchUrl = `/api/book/${bookId}?source=${source}`;
+
+    const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
+    const data = await res.json();
+
+    if (data.error || !data) {
+        showError("Book Not Found");
+        return;
+    }
+
+    const raw = Array.isArray(data) ? data[0] : data;
+    bookData = raw;
+
+    const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
+
+    updatePageTitle(metadata.title);
+    updateMetadata(metadata);
+    updateExtensionPill();
+}
+
+function updatePageTitle(title) {
+    document.title = `${title} | WaifuBoard Books`;
+    const titleEl = document.getElementById('title');
+    if (titleEl) titleEl.innerText = title;
+}
+
+function updateMetadata(metadata) {
+
+    const descEl = document.getElementById('description');
+    if (descEl) descEl.innerHTML = metadata.description;
+
+    const scoreEl = document.getElementById('score');
+    if (scoreEl) {
+        scoreEl.innerText = extensionName
+            ? `${metadata.score}`
+            : `${metadata.score}% Score`;
+    }
+
+    const pubEl = document.getElementById('published-date');
+    if (pubEl) pubEl.innerText = metadata.year;
+
+    const statusEl = document.getElementById('status');
+    if (statusEl) statusEl.innerText = metadata.status;
+
+    const formatEl = document.getElementById('format');
+    if (formatEl) formatEl.innerText = metadata.format;
+
+    const chaptersEl = document.getElementById('chapters');
+    if (chaptersEl) chaptersEl.innerText = metadata.chapters;
+
+    const genresEl = document.getElementById('genres');
+    if (genresEl) genresEl.innerText = metadata.genres;
+
+    const posterEl = document.getElementById('poster');
+    if (posterEl) posterEl.src = metadata.poster;
+
+    const heroBgEl = document.getElementById('hero-bg');
+    if (heroBgEl) heroBgEl.src = metadata.banner;
+}
+
+function updateExtensionPill() {
+    const pill = document.getElementById('extension-pill');
+    if (!pill) return;
+
+    if (extensionName) {
+        pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
+        pill.style.display = 'inline-flex';
+    } else {
+        pill.style.display = 'none';
+    }
+}
+
+async function setupAddToListButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (!btn || !bookData) return;
+
+    ListModalManager.currentData = bookData;
+    const entryType = ListModalManager.getEntryType(bookData);
+    const idForCheck = extensionName ? bookSlug : bookId;
+
+    await ListModalManager.checkIfInList(
+        idForCheck,
+        extensionName || 'anilist',
+        entryType
+    );
+
+    updateCustomAddButton();
+
+    btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
+}
+
+function updateCustomAddButton() {
+    const btn = document.getElementById('add-to-list-btn');
+    if (!btn) return;
+
+    if (ListModalManager.isInList) {
+        btn.innerHTML = `
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            </svg>
+            In Your Library
+        `;
+        btn.style.background = 'rgba(34, 197, 94, 0.2)';
+        btn.style.color = '#22c55e';
+        btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
+    } else {
+        btn.innerHTML = '+ Add to Library';
+        btn.style.background = null;
+        btn.style.color = null;
+        btn.style.borderColor = null;
+    }
+}
+
+async function loadChapters() {
+    const tbody = document.getElementById('chapters-body');
+    if (!tbody) return;
+
+    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extensions for chapters...</td></tr>';
+
+    try {
+        const source = extensionName || 'anilist';
+        const fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
+
+        const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
+        const data = await res.json();
+
+        allChapters = data.chapters || [];
+        filteredChapters = [...allChapters];
+
+        applyChapterFilter();
+
+        const totalEl = document.getElementById('total-chapters');
+
+        if (allChapters.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found on loaded extensions.</td></tr>';
+            if (totalEl) totalEl.innerText = "0 Found";
+            return;
+        }
+
+        if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
+
+        setupProviderFilter();
+
+        setupReadButton();
+
+        chapterPagination.setTotalItems(filteredChapters.length);
+        renderChapterTable();
+
+    } catch (err) {
+        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; color: #ef4444;">Error loading chapters.</td></tr>';
+        console.error(err);
+    }
+}
+
+function applyChapterFilter() {
+    const chapterParam = URLUtils.getQueryParam('chapter');
+    if (!chapterParam) return;
+
+    const chapterNumber = parseFloat(chapterParam);
+    if (isNaN(chapterNumber)) return;
+
+    filteredChapters = allChapters.filter(
+        ch => parseFloat(ch.number) === chapterNumber
+    );
+
+    chapterPagination.reset();
+}
+
+function setupProviderFilter() {
+    const select = document.getElementById('provider-filter');
+    if (!select) return;
+
+    const providers = [...new Set(allChapters.map(ch => ch.provider))];
+
+    if (providers.length === 0) return;
+
+    select.style.display = 'inline-block';
+    select.innerHTML = '<option value="all">All Providers</option>';
+
+    providers.forEach(prov => {
+        const opt = document.createElement('option');
+        opt.value = prov;
+        opt.innerText = prov;
+        select.appendChild(opt);
+    });
+
+    if (extensionName) {
+        const extensionProvider = providers.find(
+            p => p.toLowerCase() === extensionName.toLowerCase()
+        );
+
+        if (extensionProvider) {
+            select.value = extensionProvider;
+            filteredChapters = allChapters.filter(ch => ch.provider === extensionProvider);
+        }
+    }
+
+    select.onchange = (e) => {
+        const selected = e.target.value;
+        if (selected === 'all') {
+            filteredChapters = [...allChapters];
+        } else {
+            filteredChapters = allChapters.filter(ch => ch.provider === selected);
+        }
+
+        chapterPagination.reset();
+        chapterPagination.setTotalItems(filteredChapters.length);
+        renderChapterTable();
+    };
+}
+
+function setupReadButton() {
+    const readBtn = document.getElementById('read-start-btn');
+    if (!readBtn || filteredChapters.length === 0) return;
+
+    const firstChapter = filteredChapters[0];
+    readBtn.onclick = () => openReader(0, firstChapter.provider);
+}
+
+function renderChapterTable() {
+    const tbody = document.getElementById('chapters-body');
+    if (!tbody) return;
+
+    tbody.innerHTML = '';
+
+    if (filteredChapters.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>';
+        chapterPagination.renderControls(
+            'pagination',
+            'page-info',
+            'prev-page',
+            'next-page'
+        );
+        return;
+    }
+
+    const pageItems = chapterPagination.getCurrentPageItems(filteredChapters);
+
+    pageItems.forEach((ch) => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${ch.number}</td>
+            <td>${ch.title || 'Chapter ' + ch.number}</td>
+            <td><span class="pill" style="font-size:0.75rem;">${ch.provider}</span></td>
+            <td>
+                <button class="read-btn-small" onclick="openReader('${ch.index}', '${ch.provider}')">
+                    Read
+                </button>
+            </td>
+        `;
+        tbody.appendChild(row);
+    });
+
+    chapterPagination.renderControls(
+        'pagination',
+        'page-info',
+        'prev-page',
+        'next-page'
+    );
+}
+
+function openReader(chapterId, provider) {
+    window.location.href = URLUtils.buildReadUrl(bookId, chapterId, provider, extensionName);
+}
+
+function setupModalClickOutside() {
+    const modal = document.getElementById('add-list-modal');
+    if (!modal) return;
+
+    modal.addEventListener('click', (e) => {
+        if (e.target.id === 'add-list-modal') {
+            ListModalManager.close();
+        }
+    });
+}
+
+function showError(message) {
+    const titleEl = document.getElementById('title');
+    if (titleEl) titleEl.innerText = message;
+}
+
+function saveToList() {
+    const idToSave = extensionName ? bookSlug : bookId;
+    ListModalManager.save(idToSave, extensionName || 'anilist');
+}
+
+function deleteFromList() {
+    const idToDelete = extensionName ? bookSlug : bookId;
+    ListModalManager.delete(idToDelete, extensionName || 'anilist');
+}
+
+function closeAddToListModal() {
+    ListModalManager.close();
+}
+
+window.openReader = openReader;
+window.saveToList = saveToList;
+window.deleteFromList = deleteFromList;
+window.closeAddToListModal = closeAddToListModal;

desktop/src/scripts/books/books.js

@@ -0,0 +1,134 @@
+let trendingBooks = [];
+let currentHeroIndex = 0;
+let heroInterval;
+
+document.addEventListener('DOMContentLoaded', () => {
+    SearchManager.init('#search-input', '#search-results', 'book');
+    ContinueWatchingManager.load('my-status-books', 'reading', 'MANGA');
+    init();
+});
+
+window.addEventListener('scroll', () => {
+    const nav = document.getElementById('navbar');
+    if (window.scrollY > 50) nav.classList.add('scrolled');
+    else nav.classList.remove('scrolled');
+});
+
+function scrollCarousel(id, direction) {
+    const container = document.getElementById(id);
+    if(container) {
+        const scrollAmount = container.clientWidth * 0.75;
+        container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
+    }
+}
+
+async function init() {
+    try {
+        const res = await fetch('/api/books/trending');
+        const data = await res.json();
+
+        if (data.results && data.results.length > 0) {
+            trendingBooks = data.results;
+            updateHeroUI(trendingBooks[0]);
+            renderList('trending', trendingBooks);
+            startHeroCycle();
+        }
+
+        const resPop = await fetch('/api/books/popular');
+        const dataPop = await resPop.json();
+        if (dataPop.results) renderList('popular', dataPop.results);
+
+    } catch (e) {
+        console.error("Books Error:", e);
+    }
+}
+
+function startHeroCycle() {
+    if(heroInterval) clearInterval(heroInterval);
+    heroInterval = setInterval(() => {
+        if(trendingBooks.length > 0) {
+            currentHeroIndex = (currentHeroIndex + 1) % trendingBooks.length;
+            updateHeroUI(trendingBooks[currentHeroIndex]);
+        }
+    }, 8000);
+}
+
+async function updateHeroUI(book) {
+    if(!book) return;
+
+    const title = book.title.english || book.title.romaji;
+    const desc = book.description || "No description available.";
+    const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';
+    const banner = book.bannerImage || poster;
+
+    document.getElementById('hero-title').innerText = title;
+    document.getElementById('hero-desc').innerHTML = desc;
+    document.getElementById('hero-score').innerText = (book.averageScore || '?') + '% Score';
+    document.getElementById('hero-year').innerText = (book.startDate && book.startDate.year) ? book.startDate.year : '????';
+    document.getElementById('hero-type').innerText = book.format || 'MANGA';
+
+    const heroPoster = document.getElementById('hero-poster');
+    if(heroPoster) heroPoster.src = poster;
+
+    const bg = document.getElementById('hero-bg-media');
+    if(bg) bg.src = banner;
+
+    const readBtn = document.getElementById('read-btn');
+    if (readBtn) {
+        readBtn.onclick = () => window.location.href = `/book/${book.id}`;
+    }
+
+    const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
+    if(addToListBtn) {
+        ListModalManager.currentData = book;
+        const entryType = ListModalManager.getEntryType(book);
+
+        await ListModalManager.checkIfInList(book.id, 'anilist', entryType);
+        ListModalManager.updateButton();
+
+        addToListBtn.onclick = () => ListModalManager.open(book, 'anilist');
+    }
+}
+
+function renderList(id, list) {
+    const container = document.getElementById(id);
+    container.innerHTML = '';
+
+    list.forEach(book => {
+        const title = book.title.english || book.title.romaji;
+        const cover = book.coverImage ? book.coverImage.large : '';
+        const score = book.averageScore || '--';
+        const type = book.format || 'Book';
+
+        const el = document.createElement('div');
+        el.className = 'card';
+
+        el.onclick = () => {
+            window.location.href = `/book/${book.id}`;
+        };
+        el.innerHTML = `
+            <div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
+            <div class="card-content">
+                <h3>${title}</h3>
+                <p>${score}% • ${type}</p>
+            </div>
+        `;
+        container.appendChild(el);
+    });
+}
+
+function saveToList() {
+    const bookId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
+    if (!bookId) return;
+    ListModalManager.save(bookId, 'anilist');
+}
+
+function deleteFromList() {
+    const bookId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
+    if (!bookId) return;
+    ListModalManager.delete(bookId, 'anilist');
+}
+
+function closeAddToListModal() {
+    ListModalManager.close();
+}

desktop/src/scripts/books/reader.js

@@ -0,0 +1,695 @@
+const reader = document.getElementById('reader');
+const panel = document.getElementById('settings-panel');
+const overlay = document.getElementById('overlay');
+const settingsBtn = document.getElementById('settings-btn');
+const closePanel = document.getElementById('close-panel');
+const chapterLabel = document.getElementById('chapter-label');
+const prevBtn = document.getElementById('prev-chapter');
+const nextBtn = document.getElementById('next-chapter');
+
+const lnSettings = document.getElementById('ln-settings');
+const mangaSettings = document.getElementById('manga-settings');
+
+const config = {
+    ln: {
+        fontSize: 18,
+        lineHeight: 1.8,
+        maxWidth: 750,
+        fontFamily: '"Georgia", serif',
+        textColor: '#e5e7eb',
+        bg: '#14141b',
+        textAlign: 'justify'
+    },
+    manga: {
+        direction: 'rtl',
+        mode: 'auto',
+        spacing: 16,
+        imageFit: 'screen',
+        preloadCount: 3
+    }
+};
+
+let currentType = null;
+let currentPages = [];
+let observer = null;
+
+const parts = window.location.pathname.split('/');
+
+const bookId = parts[4];
+let chapter = parts[3];
+let provider = parts[2];
+
+function loadConfig() {
+    try {
+        const saved = localStorage.getItem('readerConfig');
+        if (saved) {
+            const parsed = JSON.parse(saved);
+            Object.assign(config.ln, parsed.ln || {});
+            Object.assign(config.manga, parsed.manga || {});
+        }
+    } catch (e) {
+        console.error('Error loading config:', e);
+    }
+    updateUIFromConfig();
+}
+
+function saveConfig() {
+    try {
+        localStorage.setItem('readerConfig', JSON.stringify(config));
+    } catch (e) {
+        console.error('Error saving config:', e);
+    }
+}
+
+function updateUIFromConfig() {
+    document.getElementById('font-size').value = config.ln.fontSize;
+    document.getElementById('font-size-value').textContent = config.ln.fontSize + 'px';
+
+    document.getElementById('line-height').value = config.ln.lineHeight;
+    document.getElementById('line-height-value').textContent = config.ln.lineHeight;
+
+    document.getElementById('max-width').value = config.ln.maxWidth;
+    document.getElementById('max-width-value').textContent = config.ln.maxWidth + 'px';
+
+    document.getElementById('font-family').value = config.ln.fontFamily;
+    document.getElementById('text-color').value = config.ln.textColor;
+    document.getElementById('bg-color').value = config.ln.bg;
+
+    document.querySelectorAll('[data-align]').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.align === config.ln.textAlign);
+    });
+
+    document.getElementById('display-mode').value = config.manga.mode;
+    document.getElementById('image-fit').value = config.manga.imageFit;
+    document.getElementById('page-spacing').value = config.manga.spacing;
+    document.getElementById('page-spacing-value').textContent = config.manga.spacing + 'px';
+    document.getElementById('preload-count').value = config.manga.preloadCount;
+
+    document.querySelectorAll('[data-direction]').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.direction === config.manga.direction);
+    });
+}
+
+function applyStyles() {
+    if (currentType === 'ln') {
+        document.documentElement.style.setProperty('--ln-font-size', config.ln.fontSize + 'px');
+        document.documentElement.style.setProperty('--ln-line-height', config.ln.lineHeight);
+        document.documentElement.style.setProperty('--ln-max-width', config.ln.maxWidth + 'px');
+        document.documentElement.style.setProperty('--ln-font-family', config.ln.fontFamily);
+        document.documentElement.style.setProperty('--ln-text-color', config.ln.textColor);
+        document.documentElement.style.setProperty('--bg-base', config.ln.bg);
+        document.documentElement.style.setProperty('--ln-text-align', config.ln.textAlign);
+    }
+
+    if (currentType === 'manga') {
+        document.documentElement.style.setProperty('--page-spacing', config.manga.spacing + 'px');
+        document.documentElement.style.setProperty('--page-max-width', 900 + 'px');
+        document.documentElement.style.setProperty('--manga-max-width', 1400 + 'px');
+
+        const viewportHeight = window.innerHeight - 64 - 32;
+        document.documentElement.style.setProperty('--viewport-height', viewportHeight + 'px');
+    }
+}
+
+function updateSettingsVisibility() {
+    lnSettings.classList.toggle('hidden', currentType !== 'ln');
+    mangaSettings.classList.toggle('hidden', currentType !== 'manga');
+}
+
+async function loadChapter() {
+    reader.innerHTML = `
+        <div class="loading-container">
+            <div class="loading-spinner"></div>
+            <span>Loading chapter...</span>
+        </div>
+    `;
+
+    const urlParams = new URLSearchParams(window.location.search);
+    let source = urlParams.get('source');
+    if (!source) {
+        source = 'anilist';
+    }
+    const newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
+
+    try {
+        const res = await fetch(newEndpoint);
+        const data = await res.json();
+
+        if (data.title) {
+            chapterLabel.textContent = data.title;
+            document.title = data.title;
+        } else {
+            chapterLabel.textContent = `Chapter ${chapter}`;
+            document.title = `Chapter ${chapter}`;
+        }
+
+        setupProgressTracking(data, source);
+
+        const res2 = await fetch(`/api/book/${bookId}?source=${source}`);
+        const data2 = await res2.json();
+
+        fetch("/api/rpc", {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({
+                details: data2.title.romaji ?? data2.title,
+                state: `Chapter ${data.title}`,
+                mode: "reading"
+            })
+        });
+        if (data.error) {
+            reader.innerHTML = `
+                <div class="loading-container">
+                    <span style="color: #ef4444;">Error: ${data.error}</span>
+                </div>
+            `;
+            return;
+        }
+
+        currentType = data.type;
+        updateSettingsVisibility();
+        applyStyles();
+        reader.innerHTML = '';
+
+        if (data.type === 'manga') {
+            currentPages = data.pages || [];
+            loadManga(currentPages);
+        } else if (data.type === 'ln') {
+            loadLN(data.content);
+        }
+    } catch (error) {
+        reader.innerHTML = `
+            <div class="loading-container">
+                <span style="color: #ef4444;">Error loading chapter: ${error.message}</span>
+            </div>
+        `;
+    }
+}
+
+function loadManga(pages) {
+    if (!pages || pages.length === 0) {
+        reader.innerHTML = '<div class="loading-container"><span>No pages found</span></div>';
+        return;
+    }
+
+    const container = document.createElement('div');
+    container.className = 'manga-container';
+
+    let isLongStrip = false;
+
+    if (config.manga.mode === 'longstrip') {
+        isLongStrip = true;
+    } else if (config.manga.mode === 'auto' && detectLongStrip(pages)) {
+        isLongStrip = true;
+    }
+
+    const useDouble = config.manga.mode === 'double' ||
+        (config.manga.mode === 'auto' && !isLongStrip && shouldUseDoublePage(pages));
+
+    if (useDouble) {
+        loadDoublePage(container, pages);
+    } else {
+        loadSinglePage(container, pages);
+    }
+
+    reader.appendChild(container);
+    setupLazyLoading();
+    enableMangaPageNavigation();
+}
+
+function shouldUseDoublePage(pages) {
+    if (pages.length <= 5) return false;
+
+    const widePages = pages.filter(p => {
+        if (!p.height || !p.width) return false;
+        const ratio = p.width / p.height;
+        return ratio > 1.3;
+    });
+
+    if (widePages.length > pages.length * 0.3) return false;
+
+    return true;
+}
+
+function loadSinglePage(container, pages) {
+    pages.forEach((page, index) => {
+        const img = createImageElement(page, index);
+        container.appendChild(img);
+    });
+}
+
+function loadDoublePage(container, pages) {
+    let i = 0;
+    while (i < pages.length) {
+        const currentPage = pages[i];
+        const nextPage = pages[i + 1];
+
+        const isWide = currentPage.width && currentPage.height &&
+            (currentPage.width / currentPage.height) > 1.1;
+
+        if (isWide) {
+            const img = createImageElement(currentPage, i);
+            container.appendChild(img);
+            i++;
+        } else {
+            const doubleContainer = document.createElement('div');
+            doubleContainer.className = 'double-container';
+
+            const leftPage = createImageElement(currentPage, i);
+
+            if (nextPage) {
+                const nextIsWide = nextPage.width && nextPage.height &&
+                    (nextPage.width / nextPage.height) > 1.3;
+
+                if (nextIsWide) {
+                    const singleImg = createImageElement(currentPage, i);
+                    container.appendChild(singleImg);
+                    i++;
+                } else {
+                    const rightPage = createImageElement(nextPage, i + 1);
+
+                    if (config.manga.direction === 'rtl') {
+                        doubleContainer.appendChild(rightPage);
+                        doubleContainer.appendChild(leftPage);
+                    } else {
+                        doubleContainer.appendChild(leftPage);
+                        doubleContainer.appendChild(rightPage);
+                    }
+
+                    container.appendChild(doubleContainer);
+                    i += 2;
+                }
+            } else {
+                const singleImg = createImageElement(currentPage, i);
+                container.appendChild(singleImg);
+                i++;
+            }
+        }
+    }
+}
+
+function createImageElement(page, index) {
+    const img = document.createElement('img');
+    img.className = 'page-img';
+    img.dataset.index = index;
+
+    const url = buildProxyUrl(page.url, page.headers);
+    const placeholder = "/public/assets/placeholder.svg";
+
+    img.onerror = () => {
+        if (img.src !== placeholder) {
+            img.src = placeholder;
+        }
+    };
+
+    if (config.manga.mode === 'longstrip' && index > 0) {
+        img.classList.add('longstrip-fit');
+    } else {
+        if (config.manga.imageFit === 'width') img.classList.add('fit-width');
+        else if (config.manga.imageFit === 'height') img.classList.add('fit-height');
+        else if (config.manga.imageFit === 'screen') img.classList.add('fit-screen');
+    }
+
+    if (index < config.manga.preloadCount) {
+        img.src = url;
+    } else {
+        img.dataset.src = url;
+        img.loading = 'lazy';
+    }
+
+    img.alt = `Page ${index + 1}`;
+
+    return img;
+}
+
+function buildProxyUrl(url, headers = {}) {
+    const params = new URLSearchParams({
+        url
+    });
+
+    if (headers.referer) params.append('referer', headers.referer);
+    if (headers['user-agent']) params.append('ua', headers['user-agent']);
+    if (headers.cookie) params.append('cookie', headers.cookie);
+
+    return `/api/proxy?${params.toString()}`;
+}
+
+function detectLongStrip(pages) {
+    if (!pages || pages.length === 0) return false;
+
+    const relevant = pages.slice(1);
+    const tall = relevant.filter(p => p.height && p.width && (p.height / p.width) > 2);
+    return tall.length >= 2 || (tall.length / relevant.length) > 0.3;
+}
+
+function setupLazyLoading() {
+    if (observer) observer.disconnect();
+
+    observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const img = entry.target;
+                if (img.dataset.src) {
+                    img.src = img.dataset.src;
+                    delete img.dataset.src;
+                    observer.unobserve(img);
+                }
+            }
+        });
+    }, {
+        rootMargin: '200px'
+    });
+
+    document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
+}
+
+function loadLN(html) {
+    const div = document.createElement('div');
+    div.className = 'ln-content';
+    div.innerHTML = html;
+    reader.appendChild(div);
+}
+
+document.getElementById('font-size').addEventListener('input', (e) => {
+    config.ln.fontSize = parseInt(e.target.value);
+    document.getElementById('font-size-value').textContent = e.target.value + 'px';
+    applyStyles();
+    saveConfig();
+});
+
+document.getElementById('line-height').addEventListener('input', (e) => {
+    config.ln.lineHeight = parseFloat(e.target.value);
+    document.getElementById('line-height-value').textContent = e.target.value;
+    applyStyles();
+    saveConfig();
+});
+
+document.getElementById('max-width').addEventListener('input', (e) => {
+    config.ln.maxWidth = parseInt(e.target.value);
+    document.getElementById('max-width-value').textContent = e.target.value + 'px';
+    applyStyles();
+    saveConfig();
+});
+
+document.getElementById('font-family').addEventListener('change', (e) => {
+    config.ln.fontFamily = e.target.value;
+    applyStyles();
+    saveConfig();
+});
+
+document.getElementById('text-color').addEventListener('change', (e) => {
+    config.ln.textColor = e.target.value;
+    applyStyles();
+    saveConfig();
+});
+
+document.getElementById('bg-color').addEventListener('change', (e) => {
+    config.ln.bg = e.target.value;
+    applyStyles();
+    saveConfig();
+});
+
+document.querySelectorAll('[data-align]').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        config.ln.textAlign = btn.dataset.align;
+        applyStyles();
+        saveConfig();
+    });
+});
+
+document.querySelectorAll('[data-preset]').forEach(btn => {
+    btn.addEventListener('click', () => {
+        const preset = btn.dataset.preset;
+
+        const presets = {
+            dark: { bg: '#14141b', textColor: '#e5e7eb' },
+            sepia: { bg: '#f4ecd8', textColor: '#5c472d' },
+            light: { bg: '#fafafa', textColor: '#1f2937' },
+            amoled: { bg: '#000000', textColor: '#ffffff' }
+        };
+
+        if (presets[preset]) {
+            Object.assign(config.ln, presets[preset]);
+            document.getElementById('bg-color').value = config.ln.bg;
+            document.getElementById('text-color').value = config.ln.textColor;
+            applyStyles();
+            saveConfig();
+        }
+    });
+});
+
+document.getElementById('display-mode').addEventListener('change', (e) => {
+    config.manga.mode = e.target.value;
+    saveConfig();
+    loadChapter();
+});
+
+document.getElementById('image-fit').addEventListener('change', (e) => {
+    config.manga.imageFit = e.target.value;
+    saveConfig();
+    loadChapter();
+});
+
+document.getElementById('page-spacing').addEventListener('input', (e) => {
+    config.manga.spacing = parseInt(e.target.value);
+    document.getElementById('page-spacing-value').textContent = e.target.value + 'px';
+    applyStyles();
+    saveConfig();
+});
+
+document.getElementById('preload-count').addEventListener('change', (e) => {
+    config.manga.preloadCount = parseInt(e.target.value);
+    saveConfig();
+});
+
+document.querySelectorAll('[data-direction]').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        config.manga.direction = btn.dataset.direction;
+        saveConfig();
+        loadChapter();
+    });
+});
+
+prevBtn.addEventListener('click', () => {
+    const current = parseInt(chapter);
+    if (current <= 0) return;
+
+    const newChapter = String(current - 1);
+    updateURL(newChapter);
+    window.scrollTo(0, 0);
+    loadChapter();
+});
+
+nextBtn.addEventListener('click', () => {
+    const newChapter = String(parseInt(chapter) + 1);
+    updateURL(newChapter);
+    window.scrollTo(0, 0);
+    loadChapter();
+});
+
+function updateURL(newChapter) {
+    chapter = newChapter;
+    const urlParams = new URLSearchParams(window.location.search);
+    let source = urlParams.get('source');
+
+    let src;
+    if (source === 'anilist') {
+        src= "?source=anilist"
+    } else {
+        src= `?source=${source}`
+    }
+    const newUrl = `/read/${provider}/${chapter}/${bookId}${src}`;
+    window.history.pushState({}, '', newUrl);
+}
+
+document.getElementById('back-btn').addEventListener('click', () => {
+    const parts = window.location.pathname.split('/');
+    const mangaId = parts[4];
+
+    const urlParams = new URLSearchParams(window.location.search);
+    let source = urlParams.get('source');
+
+    if (source === 'anilist') {
+        window.location.href = `/book/${mangaId}`;
+    } else {
+        window.location.href = `/book/${source}/${mangaId}`;
+    }
+});
+
+settingsBtn.addEventListener('click', () => {
+    panel.classList.add('open');
+    overlay.classList.add('active');
+});
+
+closePanel.addEventListener('click', closeSettings);
+overlay.addEventListener('click', closeSettings);
+
+function closeSettings() {
+    panel.classList.remove('open');
+    overlay.classList.remove('active');
+}
+
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && panel.classList.contains('open')) {
+        closeSettings();
+    }
+});
+
+function enableMangaPageNavigation() {
+    if (currentType !== 'manga') return;
+    const logicalPages = [];
+
+    document.querySelectorAll('.manga-container > *').forEach(el => {
+        if (el.classList.contains('double-container')) {
+            logicalPages.push(el);
+        } else if (el.tagName === 'IMG') {
+            logicalPages.push(el);
+        }
+    });
+
+    if (logicalPages.length === 0) return;
+
+    function scrollToLogical(index) {
+        if (index < 0 || index >= logicalPages.length) return;
+
+        const topBar = document.querySelector('.top-bar');
+        const offset = topBar ? -topBar.offsetHeight : 0;
+
+        const y = logicalPages[index].getBoundingClientRect().top
+            + window.pageYOffset
+            + offset;
+
+        window.scrollTo({
+            top: y,
+            behavior: 'smooth'
+        });
+    }
+
+    function getCurrentLogicalIndex() {
+        let closest = 0;
+        let minDist = Infinity;
+
+        logicalPages.forEach((el, i) => {
+            const rect = el.getBoundingClientRect();
+            const dist = Math.abs(rect.top);
+            if (dist < minDist) {
+                minDist = dist;
+                closest = i;
+            }
+        });
+
+        return closest;
+    }
+
+    const rtl = () => config.manga.direction === 'rtl';
+
+    document.addEventListener('keydown', (e) => {
+        if (currentType !== 'manga') return;
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
+
+        const index = getCurrentLogicalIndex();
+
+        if (e.key === 'ArrowLeft') {
+            scrollToLogical(rtl() ? index + 1 : index - 1);
+        }
+        if (e.key === 'ArrowRight') {
+            scrollToLogical(rtl() ? index - 1 : index + 1);
+        }
+    });
+
+    reader.addEventListener('click', (e) => {
+        if (currentType !== 'manga') return;
+
+        const bounds = reader.getBoundingClientRect();
+        const x = e.clientX - bounds.left;
+        const half = bounds.width / 2;
+
+        const index = getCurrentLogicalIndex();
+
+        if (x < half) {
+            scrollToLogical(rtl() ? index + 1 : index - 1);
+        } else {
+            scrollToLogical(rtl() ? index - 1 : index + 1);
+        }
+    });
+}
+
+let resizeTimer;
+window.addEventListener('resize', () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+        applyStyles();
+    }, 250);
+});
+
+let progressSaved = false;
+
+function setupProgressTracking(data, source) {
+    progressSaved = false;
+
+    async function sendProgress(chapterNumber) {
+        const token = localStorage.getItem('token');
+        if (!token) return;
+
+        const body = {
+            entry_id: bookId,
+            source: source,
+            entry_type: data.type === 'manga' ? 'MANGA' : 'NOVEL',
+            status: 'CURRENT',
+            progress: source === 'anilist'
+                ? Math.floor(chapterNumber)
+
+                : chapterNumber
+
+        };
+
+        try {
+            await fetch('/api/list/entry', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify(body)
+            });
+        } catch (err) {
+            console.error('Error updating progress:', err);
+        }
+    }
+
+    function checkProgress() {
+        const scrollTop = window.scrollY;
+        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+        const percent = scrollHeight > 0 ? scrollTop / scrollHeight : 0;
+
+        if (percent >= 0.8 && !progressSaved) {
+            progressSaved = true;
+
+            const chapterNumber = (typeof data.number !== 'undefined' && data.number !== null)
+                ? data.number
+                : Number(chapter);
+
+            sendProgress(chapterNumber);
+
+            window.removeEventListener('scroll', checkProgress);
+        }
+    }
+
+    window.removeEventListener('scroll', checkProgress);
+    window.addEventListener('scroll', checkProgress);
+}
+
+if (!bookId || !chapter || !provider) {
+    reader.innerHTML = `
+        <div class="loading-container">
+            <span style="color: #ef4444;">Missing required parameters (bookId, chapter, provider)</span>
+        </div>
+    `;
+} else {
+    loadConfig();
+    loadChapter();
+}