enhanced and fixed reader

README.md

@@ -5,8 +5,8 @@ The official recode repo, its private no one should know about this or have the
 
 | Task | Status | Notes |
 | -----|--------| ------ | 
-| Book Reader | Not Done | N/A |
+| Book Reader | ✅ | N/A |
-| Multi book provider loading | Not Done | N/A | 
+| Multi book provider loading | ✅ | N/A | 
 | Better Code Organization | Not Done |  N/A |
 | Mobile View | Not Done | N/A |
 | Gallery | Not Done |   N/A |

public/book.js

@@ -154,7 +154,7 @@ function renderTable() {
 
     if (filteredChapters.length === 0) {
         tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>';
-        updatePagination(); // Update to hide buttons
+        updatePagination();
         return;
     }
 
@@ -162,7 +162,9 @@ function renderTable() {
     const end = start + itemsPerPage;
     const pageItems = filteredChapters.slice(start, end);
 
-    pageItems.forEach(ch => {
+    pageItems.forEach((ch, idx) => {
+        const realIndex = start + idx;
+
         const row = document.createElement('tr');
 
         row.innerHTML = `
@@ -170,7 +172,7 @@ function renderTable() {
             <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('${bookId}', '${ch.number - 1}', '${ch.provider}')">
+                <button class="read-btn-small" onclick="openReader('${bookId}', '${realIndex}', '${ch.provider}')">
                     Read
                 </button>
             </td>
@@ -206,6 +208,7 @@ function updatePagination() {
 }
 
 function openReader(bookId, chapterId, provider) {
+    localStorage.setItem('reader_prev_url', window.location.href);
     const c = encodeURIComponent(chapterId);
     const p = encodeURIComponent(provider);
     window.location.href = `/read/${bookId}/${c}/${p}`;

public/reader.css

@@ -141,18 +141,41 @@ body {
     height: auto;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
-    transition: transform 0.3s ease;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    cursor: zoom-in;
+    cursor: pointer;
+    display: block;
 }
 
 .page-img:hover {
-    transform: scale(1.01);
+    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
 }
 
 .page-img.zoomed {
+    position: fixed;
+    top: 64px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 100vw;
+    max-height: calc(100vh - 64px);
+    width: auto;
+    height: auto;
+    margin: auto;
+    z-index: 999;
+    cursor: zoom-out;
+    border-radius: 0;
+    object-fit: contain;
+}
+
+.zoom-overlay {
+    position: fixed;
+    top: 64px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.95);
+    z-index: 998;
     cursor: zoom-out;
-    max-width: 100%;
-    position: relative;
 }
 
 .double-container {
@@ -170,12 +193,12 @@ body {
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     object-fit: contain;
-    cursor: zoom-in;
+    cursor: pointer;
-    transition: transform 0.3s ease;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .double-container img:hover {
-    transform: scale(1.02);
+    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
 }
 
 /* ===== LIGHT NOVEL STYLES ===== */
@@ -188,9 +211,6 @@ body {
     font-size: var(--ln-font-size, 18px);
     font-family: var(--ln-font-family, 'Georgia', serif);
     color: var(--ln-text-color, #e5e7eb);
-    background: var(--ln-bg, #14141b);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-lg);
     text-align: var(--ln-text-align, left);
 }
 
@@ -208,19 +228,19 @@ body {
 .settings-panel {
     position: fixed;
     right: 0;
-    top: 64px;
+    top: 0;
     bottom: 0;
     width: 400px;
-    background: var(--bg-surface);
-    border-left: 1px solid var(--border);
     padding: 0;
     z-index: 1001;
     transform: translateX(100%);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: var(--shadow-lg);
     overflow-y: auto;
     display: flex;
     flex-direction: column;
+    background: var(--bg-surface);
+    border-left: 1px solid var(--border);
+    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
 }
 
 .settings-panel.open {
@@ -230,13 +250,13 @@ body {
 .panel-header {
     position: sticky;
     top: 0;
-    background: var(--bg-elevated);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
-    border-bottom: 1px solid var(--border);
     z-index: 10;
+    background: #0a0a0f;
+    border-bottom: 1px solid var(--border);
 }
 
 .panel-header h3 {
@@ -246,23 +266,24 @@ body {
 }
 
 .close-btn {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
     width: 32px;
     height: 32px;
     border-radius: 50%;
     font-size: 1.25rem;
     cursor: pointer;
-    color: var(--text-secondary);
     transition: all 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: var(--bg-elevated);
+    border: none;
+    color: var(--text-secondary);
 }
 
 .close-btn:hover {
-    background: var(--bg-hover);
+    background: var(--accent);
     color: var(--text-primary);
+    transform: rotate(90deg);
 }
 
 .panel-content {
@@ -271,23 +292,34 @@ body {
     overflow-y: auto;
 }
 
-.settings-group {
+.settings-section {
     margin-bottom: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--border);
 }
 
-.settings-group h4 {
+.settings-section:last-child {
-    margin: 0 0 1rem 0;
+    border-bottom: none;
-    color: var(--accent);
+    margin-bottom: 0;
-    font-size: 0.875rem;
+    padding-bottom: 0;
-    text-transform: uppercase;
+}
-    letter-spacing: 0.05em;
+
-    font-weight: 600;
+.settings-section h4 {
+    margin: 0 0 1.25rem 0;
+    color: var(--text-primary);
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
 }
 
 .control {
     margin-bottom: 1.25rem;
 }
 
+.control:last-child {
+    margin-bottom: 0;
+}
+
 .control label {
     display: flex;
     justify-content: space-between;
@@ -308,24 +340,24 @@ body {
 /* Range Inputs */
 input[type="range"] {
     width: 100%;
-    height: 6px;
-    background: var(--bg-elevated);
     border-radius: var(--radius-full);
     outline: none;
     -webkit-appearance: none;
     cursor: pointer;
+    height: 8px;
+    background: var(--bg-hover);
 }
 
 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 18px;
-    height: 18px;
-    background: var(--accent);
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.2s;
     box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
+    width: 20px;
+    height: 20px;
+    background: var(--accent);
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
@@ -347,13 +379,13 @@ input[type="range"]::-moz-range-thumb {
 select, input[type="color"], input[type="number"] {
     width: 100%;
     padding: 0.625rem 0.875rem;
-    background: var(--bg-elevated);
-    border: 1px solid var(--border);
     border-radius: var(--radius-md);
     color: var(--text-primary);
     font-size: 0.875rem;
     transition: all 0.2s;
     cursor: pointer;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
 }
 
 select:hover, input[type="color"]:hover, input[type="number"]:hover {
@@ -364,6 +396,7 @@ select:focus, input[type="color"]:focus, input[type="number"]:focus {
     outline: none;
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-light);
+    transform: translateY(-1px);
 }
 
 input[type="color"] {
@@ -380,22 +413,25 @@ input[type="color"] {
 }
 
 .presets button {
-    padding: 0.75rem;
     background: var(--bg-elevated);
-    border: 1px solid var(--border);
     border-radius: var(--radius-md);
     color: var(--text-primary);
     cursor: pointer;
     transition: all 0.2s;
-    font-weight: 600;
     font-size: 0.875rem;
+    padding: 1rem;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    font-weight: 700;
+    letter-spacing: 0.02em;
 }
 
 .presets button:hover {
+    background: var(--accent);
     background: var(--accent);
     border-color: var(--accent);
     transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
+    box-shadow: 0 4px 15px var(--accent-light);
 }
 
 /* Toggle Switches */
@@ -407,16 +443,17 @@ input[type="color"] {
 
 .toggle-btn {
     flex: 1;
-    padding: 0.5rem 1rem;
     background: var(--bg-elevated);
-    border: 1px solid var(--border);
     border-radius: var(--radius-md);
-    color: var(--text-secondary);
     cursor: pointer;
     transition: all 0.2s;
     font-size: 0.8125rem;
-    font-weight: 500;
     text-align: center;
+    padding: 0.75rem 1rem;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    font-weight: 600;
 }
 
 .toggle-btn:hover {
@@ -427,7 +464,8 @@ input[type="color"] {
 .toggle-btn.active {
     background: var(--accent);
     border-color: var(--accent);
-    color: white;
+    color: var(--text-primary);
+    box-shadow: 0 2px 10px var(--accent-light);
 }
 
 /* Overlay */
@@ -435,7 +473,6 @@ input[type="color"] {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
-    backdrop-filter: blur(4px);
     z-index: 1000;
     opacity: 0;
     pointer-events: none;
@@ -472,13 +509,6 @@ input[type="color"] {
     color: var(--text-secondary);
 }
 
-/* Divider */
-.divider {
-    height: 1px;
-    background: var(--border);
-    margin: 1.5rem 0;
-}
-
 /* Scrollbar */
 .settings-panel::-webkit-scrollbar {
     width: 8px;
@@ -553,3 +583,10 @@ input[type="color"] {
     height: auto !important;
     object-fit: contain !important;
 }
+
+.page-img.longstrip-fit {
+    width: 50%;
+    max-width: 50%;
+    margin: 0 auto;
+    display: block;
+}

public/reader.js

@@ -7,6 +7,8 @@ const chapterLabel = document.getElementById('chapter-label');
 const prevBtn = document.getElementById('prev-chapter');
 const nextBtn = document.getElementById('next-chapter');
 
+const prevUrl = localStorage.getItem('reader_prev_url');
+
 const lnSettings = document.getElementById('ln-settings');
 const mangaSettings = document.getElementById('manga-settings');
 
@@ -25,8 +27,6 @@ const config = {
         mode: 'auto',
         spacing: 16,
         imageFit: 'screen',
-        maxWidth: 900,
-        quality: 'high',
         preloadCount: 3
     }
 };
@@ -86,8 +86,6 @@ function updateUIFromConfig() {
     // Manga
     document.getElementById('display-mode').value = config.manga.mode;
     document.getElementById('image-fit').value = config.manga.imageFit;
-    document.getElementById('manga-max-width').value = config.manga.maxWidth;
-    document.getElementById('manga-max-width-value').textContent = config.manga.maxWidth + 'px';
     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;
@@ -96,11 +94,6 @@ function updateUIFromConfig() {
     document.querySelectorAll('[data-direction]').forEach(btn => {
         btn.classList.toggle('active', btn.dataset.direction === config.manga.direction);
     });
-
-    // Quality buttons
-    document.querySelectorAll('[data-quality]').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.quality === config.manga.quality);
-    });
 }
 
 function applyStyles() {
@@ -110,16 +103,16 @@ function applyStyles() {
         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('--ln-bg', config.ln.bg);
+        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', config.manga.maxWidth + 'px');
+        document.documentElement.style.setProperty('--page-max-width', 900 + 'px');
-        document.documentElement.style.setProperty('--manga-max-width', config.manga.maxWidth + 'px');
+        document.documentElement.style.setProperty('--manga-max-width', 1400 + 'px');
 
-        const viewportHeight = window.innerHeight - 64 - 32; // header + padding
+        const viewportHeight = window.innerHeight - 64 - 32;
         document.documentElement.style.setProperty('--viewport-height', viewportHeight + 'px');
     }
 }
@@ -137,7 +130,6 @@ async function loadChapter() {
         </div>
     `;
 
-
     try {
         const res = await fetch(`/api/book/${bookId}/${chapter}/${provider}`);
         const data = await res.json();
@@ -173,7 +165,7 @@ async function loadChapter() {
     } catch (error) {
         reader.innerHTML = `
             <div class="loading-container">
-                <span style="color: #ef4444;">❌ Error loading chapter: ${error.message}</span>
+                <span style="color: #ef4444;">Error loading chapter: ${error.message}</span>
             </div>
         `;
     }
@@ -188,11 +180,17 @@ function loadManga(pages) {
     const container = document.createElement('div');
     container.className = 'manga-container';
 
-    const isLongStrip = config.manga.mode === 'longstrip' ||
+    let isLongStrip = false;
-        (config.manga.mode === 'auto' && detectLongStrip(pages));
+
+    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 && pages.length > 5);
+        (config.manga.mode === 'auto' && !isLongStrip && shouldUseDoublePage(pages));
 
     if (useDouble) {
         loadDoublePage(container, pages);
@@ -202,24 +200,59 @@ function loadManga(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.url, index);
+        const img = createImageElement(page, index);
         container.appendChild(img);
     });
 }
 
 function loadDoublePage(container, pages) {
-    for (let i = 0; i < pages.length; i += 2) {
+    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(pages[i].url, i);
+            const leftPage = createImageElement(currentPage, i);
 
-        if (pages[i + 1]) {
+            if (nextPage) {
-            const rightPage = createImageElement(pages[i + 1].url, i + 1);
+                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);
@@ -228,32 +261,38 @@ function loadDoublePage(container, pages) {
                         doubleContainer.appendChild(leftPage);
                         doubleContainer.appendChild(rightPage);
                     }
-        } else {
-            doubleContainer.appendChild(leftPage);
-        }
 
                     container.appendChild(doubleContainer);
+                    i += 2;
+                }
+            } else {
+                const singleImg = createImageElement(currentPage, i);
+                container.appendChild(singleImg);
+                i++;
+            }
+        }
     }
 }
 
-function createImageElement(url, index) {
+function createImageElement(page, index) {
     const img = document.createElement('img');
     img.className = 'page-img';
     img.dataset.index = index;
 
-    if (config.manga.imageFit === 'width') {
+    const url = buildProxyUrl(page.url, page.headers);
-        img.classList.add('fit-width');
+
-    } else if (config.manga.imageFit === 'height') {
+    if (config.manga.mode === 'longstrip' && index > 0) {
-        img.classList.add('fit-height');
+        img.classList.add('longstrip-fit');
-    } else if (config.manga.imageFit === 'screen') {
+    } else {
-        img.classList.add('fit-screen');
+        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');
     }
 
-    // Preload o lazy load
     if (index < config.manga.preloadCount) {
-        img.src = buildProxyUrl(url);
+        img.src = url;
     } else {
-        img.dataset.src = buildProxyUrl(url);
+        img.dataset.src = url;
         img.loading = 'lazy';
     }
 
@@ -262,17 +301,24 @@ function createImageElement(url, index) {
     return img;
 }
 
-function buildProxyUrl(url) {
+function buildProxyUrl(url, headers = {}) {
-    return `/api/proxy?url=${encodeURIComponent(url)}&referer=https%3A%2F%2Fmangapark.net`;
+    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 tallPages = pages.filter(p => {
+
-        if (!p.height || !p.width) return false;
+    const relevant = pages.slice(1);
-        return (p.height / p.width) > 2.5;
+    const tall = relevant.filter(p => p.height && p.width && (p.height / p.width) > 2);
-    });
+    return tall.length >= 2 || (tall.length / relevant.length) > 0.3;
-    return tallPages.length >= Math.min(4, pages.length * 0.5);
 }
 
 function setupLazyLoading() {
@@ -303,6 +349,7 @@ function loadLN(html) {
     reader.appendChild(div);
 }
 
+// Event Listeners - Light Novel
 document.getElementById('font-size').addEventListener('input', (e) => {
     config.ln.fontSize = parseInt(e.target.value);
     document.getElementById('font-size-value').textContent = e.target.value + 'px';
@@ -375,6 +422,8 @@ document.querySelectorAll('[data-preset]').forEach(btn => {
     });
 });
 
+// Event Listeners - Manga
+
 document.getElementById('display-mode').addEventListener('change', (e) => {
     config.manga.mode = e.target.value;
     saveConfig();
@@ -387,13 +436,6 @@ document.getElementById('image-fit').addEventListener('change', (e) => {
     loadChapter();
 });
 
-document.getElementById('manga-max-width').addEventListener('input', (e) => {
-    config.manga.maxWidth = parseInt(e.target.value);
-    document.getElementById('manga-max-width-value').textContent = e.target.value + 'px';
-    applyStyles();
-    saveConfig();
-});
-
 document.getElementById('page-spacing').addEventListener('input', (e) => {
     config.manga.spacing = parseInt(e.target.value);
     document.getElementById('page-spacing-value').textContent = e.target.value + 'px';
@@ -417,16 +459,7 @@ document.querySelectorAll('[data-direction]').forEach(btn => {
     });
 });
 
-// Quality
+// Navigation
-document.querySelectorAll('[data-quality]').forEach(btn => {
-    btn.addEventListener('click', () => {
-        document.querySelectorAll('[data-quality]').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        config.manga.quality = btn.dataset.quality;
-        saveConfig();
-    });
-});
-
 prevBtn.addEventListener('click', () => {
     const newChapter = String(parseInt(chapter) - 1);
     updateURL(newChapter);
@@ -448,7 +481,12 @@ function updateURL(newChapter) {
 }
 
 document.getElementById('back-btn').addEventListener('click', () => {
+    const prev = localStorage.getItem('reader_prev_url');
+    if (prev) {
+        window.location.href = prev;
+    } else {
         history.back();
+    }
 });
 
 settingsBtn.addEventListener('click', () => {
@@ -470,30 +508,84 @@ document.addEventListener('keydown', (e) => {
     }
 });
 
-document.addEventListener('keydown', (e) => {
+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;
 
-    switch(e.key) {
+        const index = getCurrentLogicalIndex();
-        case 'ArrowLeft':
+
-            if (config.manga.direction === 'rtl') {
+        if (e.key === 'ArrowLeft') {
-                nextBtn.click();
+            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 {
-                prevBtn.click();
+            scrollToLogical(rtl() ? index - 1 : index + 1);
         }
-            break;
+    });
-        case 'ArrowRight':
+}
-            if (config.manga.direction === 'rtl') {
-                prevBtn.click();
-            } else {
-                nextBtn.click();
-            }
-            break;
-        case 's':
-        case 'S':
-            settingsBtn.click();
-            break;
-    }
-});
 
 let resizeTimer;
 window.addEventListener('resize', () => {
@@ -506,7 +598,7 @@ window.addEventListener('resize', () => {
 if (!bookId || !chapter || !provider) {
     reader.innerHTML = `
         <div class="loading-container">
-            <span style="color: #ef4444;"> Missing required parameters (bookId, chapter, provider)</span>
+            <span style="color: #ef4444;">Missing required parameters (bookId, chapter, provider)</span>
         </div>
     `;
 } else {

views/reader.html

@@ -12,7 +12,7 @@
 <!-- Top Bar -->
 <header class="top-bar">
     <button id="back-btn" class="glass-btn">
-        X
+        ← Back
     </button>
 
     <div class="chapter-info">
@@ -35,8 +35,10 @@
 
     <div class="panel-content">
         <!-- Light Novel Settings -->
-        <div id="ln-settings" class="settings-group hidden">
+        <div id="ln-settings" class="hidden">
-            <h4>Text Settings</h4>
+            <!-- Typography -->
+            <div class="settings-section">
+                <h4>Typography</h4>
 
                 <div class="control">
                     <label>
@@ -82,10 +84,11 @@
                         <button class="toggle-btn" data-align="center">Center</button>
                     </div>
                 </div>
+            </div>
 
-            <div class="divider"></div>
+            <!-- Color Theme -->
-
+            <div class="settings-section">
-            <h4>🎨 Color Theme</h4>
+                <h4>Color Theme</h4>
 
                 <div class="control">
                     <label>Text Color</label>
@@ -104,10 +107,13 @@
                     <button data-preset="amoled">AMOLED</button>
                 </div>
             </div>
+        </div>
 
         <!-- Manga Settings -->
-        <div id="manga-settings" class="settings-group hidden">
+        <div id="manga-settings" class="hidden">
-            <h4>Display Mode</h4>
+            <!-- Display -->
+            <div class="settings-section">
+                <h4>Display</h4>
 
                 <div class="control">
                     <label>Layout Mode</label>
@@ -127,10 +133,6 @@
                     </div>
                 </div>
 
-            <div class="divider"></div>
-
-            <h4>Image Settings</h4>
-
                 <div class="control">
                     <label>Image Fit</label>
                     <select id="image-fit">
@@ -139,15 +141,12 @@
                         <option value="screen" selected>Fit Screen</option>
                     </select>
                 </div>
-
-            <div class="control">
-                <label>
-                    Max Image Width
-                    <span id="manga-max-width-value">900px</span>
-                </label>
-                <input type="range" id="manga-max-width" min="600" max="1600" value="900" step="50">
             </div>
 
+            <!-- Appearance -->
+            <div class="settings-section">
+                <h4>Appearance</h4>
+
                 <div class="control">
                     <label>
                         Page Spacing
@@ -155,25 +154,19 @@
                     </label>
                     <input type="range" id="page-spacing" min="0" max="60" value="16" step="4">
                 </div>
-
-            <div class="divider"></div>
-
-            <h4>⚡ Performance</h4>
-
-            <div class="control">
-                <label>Image Quality</label>
-                <div class="toggle-group">
-                    <button class="toggle-btn" data-quality="low">Low</button>
-                    <button class="toggle-btn active" data-quality="high">High</button>
-                </div>
             </div>
 
+            <!-- Performance -->
+            <div class="settings-section">
+                <h4>Performance</h4>
+
                 <div class="control">
                     <label>Preload Pages</label>
                     <input type="number" id="preload-count" min="0" max="10" value="3">
                 </div>
             </div>
         </div>
+    </div>
 </aside>
 
 <div id="overlay" class="overlay"></div>