fixed sidebar on emulator.html and fixed UI bugs on imageboards

no more exiting the instance just to constantly reupload your extension to see if it works.
write many times, test once. :)

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /dist
 .env
+/public/banner.png

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>
 
@@ -30,10 +33,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   | —                                                         |
 
 ## 📦 Extensions & Marketplace
 

main.js

@@ -68,6 +68,7 @@ function createWindow() {
 
   mainWindow.loadFile('views/index.html');
   mainWindow.setMenu(null);
+  mainWindow.on('closed', () => { headlessBrowser.forceKill(); });
 }
 
 app.whenReady().then(() => {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "waifu-board",
-  "version": "v1.2.0",
+  "version": "v1.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "waifu-board",
-      "version": "v1.2.0",
+      "version": "v1.6.2",
       "license": "ISC",
       "dependencies": {
         "@ryuziii/discord-rpc": "^1.0.1-rc.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "waifu-board",
-  "version": "v1.6.2",
+  "version": "v1.6.4",
   "description": "An image board app to store and browse your favorite waifus!",
   "main": "main.js",
   "scripts": {

src/content/image-handler.js

@@ -1,4 +1,26 @@
-export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options = {}) {
+const gallery = document.getElementById('content-gallery');
+
+if (gallery) {
+    const ro = new ResizeObserver(() => {
+        const items = gallery.querySelectorAll('.image-entry[data-type="image"]');
+        items.forEach(item => resizeMasonryItem(item));
+        relayoutMasonry(gallery);
+    });
+    ro.observe(gallery);
+}
+
+let masonryFrameRunning = false;
+function scheduleMasonryRelayout(grid) {
+    if (masonryFrameRunning) return;
+    masonryFrameRunning = true;
+
+    requestAnimationFrame(() => {
+        relayoutMasonry(grid);
+        masonryFrameRunning = false;
+    });
+}
+
+export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {}) {
     const {
         showMessage,
         showTagModal,
@@ -6,20 +28,73 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
     } = options;
 
     const card = document.createElement('div');
-    card.className = 'image-entry';
+    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');
     img.src = thumbnailUrl || imageUrl;
     img.loading = 'lazy';
     img.alt = tags.join(' ');
-    img.onload = () => img.classList.add('loaded');
+
+    img.onload = () => {
+        img.classList.add('loaded');
+        card.classList.remove('loading');
+
+        setTimeout(() => {
+            resizeMasonryItem(card);
+            scheduleMasonryRelayout(card.parentElement);
+        }, 100);
+
+        setTimeout(() => {
+            card.classList.remove('newly-added');
+        }, 400);
+    };
+
+    img.onerror = () => {
+        card.classList.remove('loading');
+        img.classList.add('loaded');
+    };
+
+    card.appendChild(img);
+
+    const buttonsOverlay = createButtonsOverlay(
+        id, imageUrl, thumbnailUrl, tags,
+        card, favoriteIds, showMessage, showTagModal, options
+    );
+    card.appendChild(buttonsOverlay);
+
+    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);
 
-    if (type === 'book') {
     const readOverlay = document.createElement('div');
     readOverlay.className = 'book-read-overlay';
     readOverlay.innerHTML = `
@@ -34,9 +109,25 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
     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;
@@ -44,7 +135,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();
 
@@ -62,51 +153,59 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options
                         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 || '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 {
-                showMessage('Failed to save favorite', 'error');
-            }
+            } else showMessage('Failed to save favorite', 'error');
         }
     };
 
-    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);
-    };
-
-    buttonsOverlay.appendChild(tagBtn);
-    buttonsOverlay.appendChild(favBtn);
-    card.appendChild(buttonsOverlay);
-
-    return card;
+    return favBtn;
 }
 
 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";
+    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";
 }
+
+function resizeMasonryItem(item) {
+    if (item.dataset.type === 'book') return;
+
+    const grid = item.parentElement;
+    if (!grid) return;
+    const img = item.querySelector("img");
+    if (!img || !img.complete || img.naturalWidth === 0) return;
+
+    const simulatedWidth = item.getBoundingClientRect().width;
+
+    const gridStyles = getComputedStyle(grid);
+    const rowHeight = parseInt(gridStyles.gridAutoRows);
+    const rowGap = parseInt(gridStyles.gap);
+
+    const totalHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
+    const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap));
+
+    item.style.gridRowEnd = `span ${rowSpan}`;
+    item.style.height = "auto";
+}
+
+function relayoutMasonry(grid) {
+    if (!grid) return;
+    const items = grid.querySelectorAll('.image-entry[data-type="image"]');
+    items.forEach(item => resizeMasonryItem(item));
 }
 
 export function populateTagModal(container, tags) {

src/emulator/emulator.js

@@ -0,0 +1,306 @@
+const CheerioShim = {
+    load: (html) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        const $ = (selector, context) => {
+            let elements;
+            if (selector && selector.nodeType) {
+                elements = [selector];
+            } else if (Array.isArray(selector)) {
+                elements = selector;
+            } else {
+                const root = (context && context[0]) ? context[0] : (context || doc);
+                elements = Array.from(root.querySelectorAll ? root.querySelectorAll(selector) : []);
+            }
+            return createWrapper(elements);
+        };
+
+        function createWrapper(elements) {
+            elements.forEach((el, i) => elements[i] = el);
+            
+            elements.attr = (name) => {
+                if (elements.length === 0) return undefined;
+                return elements[0].getAttribute ? elements[0].getAttribute(name) : null;
+            };
+
+            elements.text = () => {
+                return elements.map(el => el.textContent).join('');
+            };
+
+            elements.find = (selector) => {
+                let found = [];
+                elements.forEach(el => {
+                    if (el.querySelectorAll) {
+                        found = found.concat(Array.from(el.querySelectorAll(selector)));
+                    }
+                });
+                return createWrapper(found);
+            };
+
+            elements.each = (callback) => {
+                elements.forEach((el, i) => {
+                    callback(i, el);
+                });
+                return elements;
+            };
+
+            elements.map = (callback) => {
+                const results = elements.map((el, i) => callback(i, el));
+                return createWrapper(results.filter(r => r !== null && r !== undefined));
+            };
+
+            elements.get = () => Array.from(elements);
+
+            elements.filter = (selectorOrFn) => {
+                if (typeof selectorOrFn === 'function') {
+                    return createWrapper(elements.filter(selectorOrFn));
+                }
+                return createWrapper(elements.filter(el => el.matches && el.matches(selectorOrFn)));
+            };
+
+            elements.first = () => createWrapper(elements.length ? [elements[0]] : []);
+            elements.last = () => createWrapper(elements.length ? [elements[elements.length - 1]] : []);
+            elements.eq = (i) => createWrapper(elements.length > i ? [elements[i]] : []);
+
+            return elements;
+        }
+
+        return $;
+    }
+};
+
+window.require = (moduleName) => {
+    if (moduleName === 'cheerio') return CheerioShim;
+    
+    if (moduleName === 'node-fetch' || moduleName === 'fetch') return window.fetch.bind(window);
+    
+    return {}; 
+};
+
+window.module = { exports: {} };
+
+class MockBrowser {
+    constructor() {
+    }
+
+    async scrape(url, pageFn, options = {}) {
+        emulatorLog(`[Browser] Scraping: ${url}`, 'info');
+        
+        try {
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const html = await response.text();
+
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, "text/html");
+
+            return await this.executePageFn(pageFn, doc);
+
+        } catch (error) {
+            emulatorLog(`[Browser] Error: ${error.message}`, 'error');
+            if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
+                emulatorLog('Tip: This looks like a CORS error. Ensure you have a "Allow CORS" extension enabled in your browser for testing.', 'warn');
+            }
+            throw error;
+        }
+    }
+
+    async executePageFn(pageFn, virtualDoc) {
+        const fnString = pageFn.toString();
+        const wrapper = new Function("document", `return (${fnString})();`);
+        return wrapper(virtualDoc);
+    }
+}
+
+const codeInput = document.getElementById('code-input');
+const runBtn = document.getElementById('run-btn');
+const outputVisual = document.getElementById('visual-container');
+const outputJson = document.getElementById('json-content');
+const outputConsole = document.getElementById('console-content');
+
+const originalConsoleLog = console.log;
+const originalConsoleError = console.error;
+const originalConsoleWarn = console.warn;
+
+function captureLogs() {
+    console.log = (...args) => {
+        originalConsoleLog(...args);
+        emulatorLog(args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' '), 'info');
+    };
+    console.error = (...args) => {
+        originalConsoleError(...args);
+        emulatorLog(args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' '), 'error');
+    };
+    console.warn = (...args) => {
+        originalConsoleWarn(...args);
+        emulatorLog(args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' '), 'warn');
+    };
+}
+
+function emulatorLog(msg, type = 'info') {
+    const div = document.createElement('div');
+    div.className = `log-entry log-${type}`;
+    div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
+    outputConsole.appendChild(div);
+    outputConsole.scrollTop = outputConsole.scrollHeight;
+}
+
+window.switchTab = (tabName) => {
+    ['visual', 'json', 'console'].forEach(t => {
+        document.getElementById(`output-${t}`).classList.add('hidden');
+    });
+    document.getElementById(`output-${tabName}`).classList.remove('hidden');
+    
+    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+    if (event && event.target) event.target.classList.add('active');
+};
+
+runBtn.addEventListener('click', async () => {
+    outputVisual.innerHTML = '';
+    outputJson.textContent = '';
+    outputConsole.innerHTML = '';
+    window.module.exports = {}; 
+    captureLogs();  
+
+    const code = codeInput.value;
+    const functionName = document.getElementById('func-select').value;
+    const argInput = document.getElementById('arg-input').value;
+    const pageInput = parseInt(document.getElementById('page-input').value) || 1;
+
+    if (!code.trim()) {
+        alert("Please paste extension code first.");
+        return;
+    }
+
+    emulatorLog("--- Starting Execution ---");
+
+    try {
+        try {
+            new Function(code)();
+        } catch (e) {
+            throw new Error(`Syntax/Runtime Error in Extension Code: ${e.message}`);
+        }
+
+        const exports = window.module.exports;
+        const keys = Object.keys(exports);
+        if (keys.length === 0) throw new Error("No class found in module.exports. Did you add 'module.exports = { ClassName };'?");
+        
+        const ExtensionClass = exports[keys[0]];
+        emulatorLog(`Loaded Class: ${keys[0]}`, 'info');
+
+        const browserInstance = new MockBrowser();
+        const extension = new ExtensionClass('node-fetch', 'cheerio', browserInstance);
+
+        if (typeof extension[functionName] !== 'function') {
+            throw new Error(`Function '${functionName}' not found in class '${keys[0]}'.`);
+        }
+
+        emulatorLog(`Calling ${functionName}('${argInput}', ${pageInput})...`);
+        
+        document.querySelector('.loading-state').classList.remove('hidden');
+        
+        let result;
+        if (functionName === 'fetchSearchResult') {
+            result = await extension.fetchSearchResult(argInput, pageInput);
+        } else if (functionName === 'fetchInfo') {
+            result = await extension.fetchInfo(argInput);
+        } else if (functionName === 'findChapters') {
+            result = await extension.findChapters(argInput);
+        } else if (functionName === 'findChapterPages') {
+            result = await extension.findChapterPages(argInput);
+        }
+
+        document.querySelector('.loading-state').classList.add('hidden');
+
+        emulatorLog("Data received. Rendering...", 'info');
+        renderJson(result);
+        renderVisuals(result, functionName);
+        
+        if (result) switchTab('visual');
+
+    } catch (err) {
+        document.querySelector('.loading-state').classList.add('hidden');
+        emulatorLog(err.message, 'error');
+        console.error(err); 
+    }
+});
+
+function renderJson(data) {
+    outputJson.textContent = JSON.stringify(data, null, 2);
+}
+
+function renderVisuals(data, type) {
+    outputVisual.innerHTML = '';
+
+    if (!data) {
+        outputVisual.innerHTML = '<div style="padding:1rem; color: #a1a1aa;">No data returned (null/undefined). Check Console for errors.</div>';
+        return;
+    }
+
+    if (type === 'fetchSearchResult') {
+        if (data.results && Array.isArray(data.results) && data.results.length > 0) {
+            data.results.forEach(item => {
+                const card = document.createElement('div');
+                card.className = 'visual-card';
+                
+                const imgSrc = item.image || item.cover || item.sampleImageUrl || '';
+                
+                card.innerHTML = `
+                    <img src="${imgSrc}" onerror="this.onerror=null;this.src='https://via.placeholder.com/150?text=Error';">
+                    <div class="title" title="${item.title || item.id}">
+                        ${item.title || ('ID: ' + item.id)}
+                    </div>
+                `;
+                outputVisual.appendChild(card);
+            });
+        } else {
+            outputVisual.innerHTML = '<div style="padding:1rem">No results found in "results" array.</div>';
+        }
+    }
+    else if (type === 'findChapters') {
+         if (data.chapters && Array.isArray(data.chapters)) {
+            const list = document.createElement('div');
+            list.style.cssText = 'display: flex; flex-direction: column; width: 100%; gap: 5px;';
+            
+            data.chapters.forEach(chap => {
+                const row = document.createElement('div');
+                row.className = 'visual-chapter';
+                row.style.cssText = 'padding: 10px; background: var(--bg-surface); border-radius: 4px;';
+                row.innerHTML = `<span style="color: var(--accent);">Ch. ${chap.chapter}</span> - ${chap.title} <br><small style="color:#666">${chap.id}</small>`;
+                list.appendChild(row);
+            });
+            outputVisual.appendChild(list);
+         } else {
+             outputVisual.innerHTML = '<div>No chapters found. Check JSON.</div>';
+         }
+    }
+    else if (type === 'findChapterPages') {
+        if (Array.isArray(data)) {
+            data.forEach(page => {
+                if(page.type === 'text') {
+                     const div = document.createElement('div');
+                     div.innerHTML = page.content;
+                     div.style.cssText = 'background: #fff; color: #000; padding: 20px; border-radius: 8px; margin-bottom: 20px;';
+                     outputVisual.appendChild(div);
+                } else {
+                    const img = document.createElement('img');
+                    img.src = page.url;
+                    img.style.cssText = 'max-width: 100%; margin-bottom: 10px; border-radius: 4px;';
+                    outputVisual.appendChild(img);
+                }
+            });
+        } else {
+            outputVisual.innerHTML = '<div>No pages array returned.</div>';
+        }
+    }
+    else if (type === 'fetchInfo') {
+        const container = document.createElement('div');
+        container.style.padding = '1rem';
+        if (data.fullImage) {
+            container.innerHTML += `<img src="${data.fullImage}" style="max-height: 300px; display: block; margin-bottom: 1rem;">`;
+        }
+        container.innerHTML += `<pre>${JSON.stringify(data, null, 2)}</pre>`;
+        outputVisual.appendChild(container);
+    }
+}

src/hamburger.js

@@ -0,0 +1,19 @@
+const btn = document.getElementById("hamburger-btn");
+const sidebar = document.querySelector(".sidebar");
+
+btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    sidebar.classList.toggle("active");
+    btn.textContent = sidebar.classList.contains("active") ? "✕" : "☰";
+});
+
+document.addEventListener("click", (e) => {
+    if (window.innerWidth <= 767) {
+        const outsideSidebar = !sidebar.contains(e.target);
+        const outsideBtn = !btn.contains(e.target);
+        if (outsideSidebar && outsideBtn) {
+            sidebar.classList.remove("active");
+            btn.textContent = "☰";
+        }
+    }
+});

src/ipc/db-handlers.js

@@ -19,7 +19,7 @@ module.exports = function (db) {
           'INSERT INTO favorites (id, title, image_url, thumbnail_url, tags) VALUES (?, ?, ?, ?, ?)';
         db.run(
           stmt,
-          [fav.id, fav.title, fav.imageUrl, fav.thumbnailUrl, fav.tags],
+          [fav.id, fav.title, fav.image_url, fav.thumbnail_url, fav.tags],
           function (err) {
             if (err) {
               if (err.code.includes('SQLITE_CONSTRAINT')) {

src/marketplace.js

@@ -1,24 +1,25 @@
+const GITEA_INSTANCE = 'https://git.waifuboard.app';
 const REPO_OWNER = 'ItsSkaiya';
 const REPO_NAME = 'WaifuBoard-Extensions';
-const API_URL = `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents/extensions?ref=main`;
+
+let DETECTED_BRANCH = 'main'; 
+
+const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
 
 document.addEventListener('DOMContentLoaded', async () => {
     const browseGrid = document.getElementById('marketplace-grid');
     const installedGrid = document.getElementById('installed-grid');
-
     const statTotal = document.getElementById('stat-total');
     const statInstalled = document.getElementById('stat-installed');
-
     const tabBrowse = document.getElementById('tab-browse');
     const tabInstalled = document.getElementById('tab-installed');
     const viewBrowse = document.getElementById('view-browse');
     const viewInstalled = document.getElementById('view-installed');
+    const messageBar = document.getElementById('message-bar');
 
     let allRemoteExtensions = [];
     let installedExtensionsList = []; 
 
-    const messageBar = document.getElementById('message-bar');
-
     function showMessage(msg, type = 'success') {
         if (!messageBar) return;
         messageBar.textContent = msg;
@@ -34,56 +35,17 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     function showRestartToast() {
         if (document.getElementById('restart-toast')) return;
-
         const toast = document.createElement('div');
         toast.id = 'restart-toast';
-        toast.style.cssText = `
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            background: #1f2937;
-            border: 1px solid var(--accent);
-            border-radius: 12px;
-            padding: 1rem 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-            z-index: 2000;
-            animation: slideUp 0.3s ease-out;
-        `;
-
-        toast.innerHTML = `
-            <div style="display:flex; flex-direction:column;">
-                <span style="color:#fff; font-weight:600;">Restart Required</span>
-                <span style="color:#9ca3af; font-size:0.8rem;">Changes will apply after restart.</span>
-            </div>
-            <button id="btn-restart-now" style="
-                background: var(--accent);
-                color: white;
-                border: none;
-                padding: 0.5rem 1rem;
-                border-radius: 8px;
-                cursor: pointer;
-                font-weight: 700;
-                font-size: 0.85rem;
-                transition: 0.2s;
-            ">Restart Now</button>
-        `;
-
+        toast.style.cssText = `position: fixed; bottom: 20px; right: 20px; background: #1f2937; border: 1px solid var(--accent); border-radius: 12px; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 2000; animation: slideUp 0.3s ease-out;`;
+        toast.innerHTML = `<div style="display:flex; flex-direction:column;"><span style="color:#fff; font-weight:600;">Restart Required</span><span style="color:#9ca3af; font-size:0.8rem;">Changes will apply after restart.</span></div><button id="btn-restart-now" style="background: var(--accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.85rem; transition: 0.2s;">Restart Now</button>`;
         document.body.appendChild(toast);
-
         const btn = document.getElementById('btn-restart-now');
         btn.onmouseover = () => btn.style.opacity = '0.9';
         btn.onmouseout = () => btn.style.opacity = '1';
-
         btn.onclick = () => {
-            if (window.api && typeof window.api.restartApp === 'function') {
-                window.api.restartApp();
-            } else {
-                console.error("Restart API not found in window.api");
-                alert("Please close and reopen the application manually.");
-            }
+            if (window.api && typeof window.api.restartApp === 'function') window.api.restartApp();
+            else alert("Please close and reopen the application manually.");
         };
     }
 
@@ -117,44 +79,67 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     async function fetchRemoteExtensions() {
         try {
-            const res = await fetch(API_URL);
-            if (!res.ok) throw new Error(`GitHub API Error: ${res.status}`);
+            let res = await fetch(API_URL_BASE);
+            
+            if (res.status === 404) {
+                console.warn("Default branch failed, trying 'main'...");
+                DETECTED_BRANCH = 'main';
+                res = await fetch(`${API_URL_BASE}?ref=main`);
+            }
+            if (res.status === 404) {
+                console.warn("Main branch failed, trying 'master'...");
+                DETECTED_BRANCH = 'master';
+                res = await fetch(`${API_URL_BASE}?ref=master`);
+            }
+
+            if (!res.ok) throw new Error(`Gitea API Error: ${res.status}`);
+
             const data = await res.json();
             
+            if (Array.isArray(data)) {
                 allRemoteExtensions = data.filter(item => item.name.endsWith('.js'));
                 renderBrowseGrid(allRemoteExtensions);
                 updateStats();
+            } else {
+                throw new Error("Invalid API response format");
+            }
+
         } catch (e) {
+            console.error(e);
             if(browseGrid) browseGrid.innerHTML = `<div class="loading-state"><p style="color:#ef4444">Failed to load marketplace.<br>${e.message}</p></div>`;
         }
     }
 
+    function getRawUrl(filename) {
+        return `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
+    }
+
     async function getExtensionDetails(url) {
         try {
             const res = await fetch(url);
+            if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
             const text = await res.text();
             
-            const baseUrlMatch = text.match(/baseUrl\s*=\s*["']([^"']+)["']/);
-            let baseUrl = baseUrlMatch ? baseUrlMatch[1] : null;
+            const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
+            const match = text.match(regex);
             
-            if (baseUrl) {
+            let finalHostname = null;
+            if (match && match[2]) {
+                let rawUrl = match[2].trim();
+                if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
                 try {
-                    const urlObj = new URL(baseUrl);
-                    baseUrl = urlObj.hostname;
-                } catch(e) {
-                    console.warn("Invalid URL in extension:", baseUrl);
-                }
+                    const urlObj = new URL(rawUrl);
+                    finalHostname = urlObj.hostname;
+                } catch(e) {}
             }
 
             const classMatch = text.match(/class\s+(\w+)/);
             const name = classMatch ? classMatch[1] : null;
 
             let type = 'Image';
-            if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) {
-                type = 'Book';
-            }
+            if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';
 
-            return { baseUrl, name, type };
+            return { baseUrl: finalHostname, name, type };
         } catch (e) {
             return { baseUrl: null, name: null, type: 'Unknown' };
         }
@@ -163,29 +148,32 @@ document.addEventListener('DOMContentLoaded', async () => {
     async function createCard(item, isLocalOnly = false) {
         const isInstalled = installedExtensionsList.includes(item.name);
         
-        const downloadUrl = item.download_url || null; 
-        let sizeKB = item.size ? (item.size / 1024).toFixed(1) + ' KB' : 'Local';
+        const downloadUrl = getRawUrl(item.name);
 
+        let sizeKB = item.size ? (item.size / 1024).toFixed(1) + ' KB' : 'Local';
         let iconUrl = '';
         let displayName = item.name.replace('.js', '');
         let typeLabel = 'Extension';
         let typeClass = 'type-image';
         
-        if (downloadUrl) {
+        const fallbackIcon = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22gray%22 stroke-width=%222%22><rect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/></svg>`;
+
+        if (!isLocalOnly) {
             const details = await getExtensionDetails(downloadUrl);
             displayName = details.name || displayName;
-            const domain = details.baseUrl || 'github.com';
-            iconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
+            
+            if (details.baseUrl) {
+                iconUrl = `https://www.google.com/s2/favicons?domain=${details.baseUrl}&sz=128`;
+            } else {
+                iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
+            }
 
             if (details.type === 'Book') {
                 typeLabel = 'Book Board';
                 typeClass = 'type-book';
-            } else {
-                typeLabel = 'Image Board';
-                typeClass = 'type-image';
             }
         } else {
-            iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=18181b&color=fff&length=1`;
+            iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
         }
 
         const card = document.createElement('div');
@@ -199,16 +187,14 @@ document.addEventListener('DOMContentLoaded', async () => {
         const renderInner = (installed) => `
             <div class="card-header-row">
                 <div class="ext-icon-box">
-                    <img src="${iconUrl}" class="ext-icon" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22gray%22 stroke-width=%222%22><rect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/></svg>'">
+                    <img src="${iconUrl}" class="ext-icon" onerror="this.onerror=null; this.src='${fallbackIcon}'">
                 </div>
                 <span class="type-badge ${typeClass}">${typeLabel}</span>
             </div>
-
             <div class="ext-info">
                 <h3 class="ext-name">${displayName}</h3>
                 <div class="ext-filename">${item.name}</div>
             </div>
-            
             <div class="card-footer">
                 <div class="ext-status-group">${installed ? `<span class="status-badge status-installed">${checkIcon} Installed</span>` : ''}
                     <span class="ext-size-badge">${sizeKB}</span>
@@ -233,12 +219,9 @@ document.addEventListener('DOMContentLoaded', async () => {
                     installedExtensionsList = installedExtensionsList.filter(n => n !== item.name);
                     card.innerHTML = renderInner(false);
                     updateStats();
-                    
                     if (tabInstalled.classList.contains('active')) {
                         card.remove();
-                        if (installedGrid.children.length === 0) {
-                            installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
-                        }
+                        if (installedGrid.children.length === 0) installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
                     }
                     showRestartToast();
                 } else {
@@ -250,6 +233,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                 btn.innerHTML = '<svg class="spinner" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle></svg>';
                 
                 const success = await window.api.installExtension(item.name, downloadUrl);
+                
                 if (success) {
                     installedExtensionsList.push(item.name);
                     card.innerHTML = renderInner(true);
@@ -258,6 +242,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                     showRestartToast();
                 } else {
                     showMessage('Failed to install', 'error');
+                    console.error("Install failed for URL:", downloadUrl);
                     btn.innerHTML = originalHTML;
                 }
             }
@@ -284,7 +269,6 @@ document.addEventListener('DOMContentLoaded', async () => {
             installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
             return;
         }
-
         for (const filename of installedExtensionsList) {
             const remoteData = allRemoteExtensions.find(r => r.name === filename);
             const item = remoteData || { name: filename, download_url: null, size: 0 };

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 } from './content/image-handler.js';
 import { showMessage as uiShowMessage } from './modules/ui-utils.js';
 import { applyLayoutToGallery } from './modules/layout-manager.js';
 
@@ -14,6 +14,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     let currentPage = 1;
     let isFetching = false;
     const favoriteIds = new Set();
+    const isBooksPage = window.location.pathname.includes('books.html');
 
     try {
         if (window.api && window.api.getFavorites) {
@@ -22,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 showTagModal(tags) { if (domRefs.tagInfoContent) { populateTagModal(domRefs.tagInfoContent, tags); domRefs.tagInfoModal.classList.remove('hidden'); } }
-  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 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');
     }
-  function updateHeader() { if (domRefs.headerContext) domRefs.headerContext.classList.add('hidden'); }
 
     const callbacks = { showMessage, applyLayoutToGallery, updateHeader, createImageCard: localCreateImageCard };
 
@@ -137,7 +164,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
         try {
             const response = await window.api.getChapters(currentSource, id);
-          currentChapters = response.success ? response.data : [];
+            currentChapters = response.success ? response.data.chapters : [];
             currentChapterPage = 1;
 
             if (!highResCover && response.extra && response.extra.cover) {
@@ -220,9 +247,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     }
 
     if (domRefs.sourceList) {
-      if (domRefs.contentGallery) applyLayoutToGallery(domRefs.contentGallery, currentLayout);
+        if (domRefs.contentGallery) {
+            applyLayoutToGallery(domRefs.contentGallery, currentLayout);
+        }
 
-      const isBooksPage = window.location.pathname.includes('books.html');
         const contentType = isBooksPage ? 'book-board' : 'image-board';
 
         let initialSource = await populateSources(domRefs.sourceList, contentType);
@@ -237,6 +265,12 @@ document.addEventListener('DOMContentLoaded', async () => {
                 currentSource = button.dataset.source;
                 updateHeader();
                 currentPage = 1;
+
+                // Apply books-only class when searching on books page
+                if (isBooksPage && domRefs.contentGallery) {
+                    domRefs.contentGallery.classList.add('books-only');
+                }
+
                 if (domRefs.searchInput?.value.trim()) performSearch(currentSource, domRefs.searchInput, currentLayout, domRefs, callbacks);
                 else if (domRefs.searchInput) performSearch(currentSource, { value: "" }, currentLayout, domRefs, callbacks);
             }
@@ -282,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>';
-      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 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);
             });

src/updateNotification.js

@@ -1,6 +1,6 @@
-const GITHUB_OWNER = 'ItsSkaiya'; 
-const GITHUB_REPO = 'WaifuBoard'; 
-const CURRENT_VERSION = 'v1.6.2'; 
+const Gitea_OWNER = 'ItsSkaiya'; 
+const Gitea_REPO = 'WaifuBoard'; 
+const CURRENT_VERSION = 'v1.6.4'; 
 const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000; 
 
 let currentVersionDisplay;
@@ -58,20 +58,36 @@ function isVersionOutdated(versionA, versionB) {
 }
 
 async function checkForUpdates() {
-    console.log(`Checking for updates for ${GITHUB_OWNER}/${GITHUB_REPO}...`);
-    const apiUrl = `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/releases/latest`;
+    console.log(`Checking for updates for ${Gitea_OWNER}/${Gitea_REPO}...`);
+    
+    const apiUrl = `https://git.waifuboard.app/api/v1/repos/${Gitea_OWNER}/${Gitea_REPO}/releases/latest`;
 
     try {
-        const response = await fetch(apiUrl);
+        const response = await fetch(apiUrl, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json'
+            }
+        });
 
         if (!response.ok) {
-            throw new Error(`GitHub API error: ${response.statusText}`);
+            if (response.status === 404) {
+                console.info('No releases found for this repository.');
+                return;
+            }
+            throw new Error(`Gitea API error: ${response.status} ${response.statusText}`);
         }
 
         const data = await response.json();
         
         const latestVersion = data.tag_name; 
-        console.log(`Latest GitHub Release: ${latestVersion}`);
+        
+        if (!latestVersion) {
+            console.warn("Release found but no tag_name present");
+            return;
+        }
+
+        console.log(`Latest Gitea Release: ${latestVersion}`);
 
         if (isVersionOutdated(CURRENT_VERSION, latestVersion)) {
             console.warn('Update available!');
@@ -82,6 +98,6 @@ async function checkForUpdates() {
         }
 
     } catch (error) {
-        console.error('Failed to fetch GitHub release:', error);
+        console.error('Failed to fetch Gitea release:', error);
     }
 }

src/utils/headless-browser.js

@@ -176,6 +176,22 @@ class HeadlessBrowser {
     `;
     await win.webContents.executeJavaScript(script);
   }
+
+  forceKill() {
+    try {
+      if (this.win && !this.win.isDestroyed()) {
+        const wc = this.win.webContents;
+
+        try { wc.stop(); } catch (_) {}
+        try { wc.close(); } catch (_) {}
+        try { wc.destroy(); } catch (_) {}
+
+        this.win.destroy();
+      }
+    } catch (_) {}
+
+    this.win = null;
+  }
 }
 
 module.exports = new HeadlessBrowser();

views/books.html

@@ -40,6 +40,10 @@
         </nav>
 
         <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+            <a href="emulator.html" class="nav-button" title="Emulator">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+                <span>Emulator</span>
+            </a>
             <a href="marketplace.html" class="nav-button" title="Marketplace">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
                 <span>Marketplace</span>
@@ -56,7 +60,8 @@
 
     <div class="main-wrapper">
         <header class="top-header">
-            <div style="position: relative;">
+            <button id="hamburger-btn" class="hamburger">☰</button>
+            <div style="position: relative;margin-left: 50px">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);">
                     <circle cx="11" cy="11" r="8"></circle>
                     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
@@ -126,5 +131,6 @@
             });
         }
     </script>
+    <script src="../src/hamburger.js"></script>
 </body>
 </html>

views/emulator.html

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WaifuBoard Extension Emulator</title>
+    <link rel="stylesheet" href="styles/home.css">
+    <link rel="stylesheet" href="styles/emulator.css">
+</head>
+
+<body>
+
+<aside class="sidebar">
+    <a href="index.html" class="nav-button" title="Image Boards">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="7" height="7"></rect>
+            <rect x="14" y="3" width="7" height="7"></rect>
+            <rect x="14" y="14" width="7" height="7"></rect>
+            <rect x="3" y="14" width="7" height="7"></rect>
+        </svg>
+        <span>Back To Home</span>
+    </a>
+
+    <button class="nav-button active" title="Emulator">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+        <span>Emulator</span>
+    </button>
+    <button class="nav-button" title="Reset" onclick="window.location.reload()">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+        <span>Reset</span>
+    </button>
+</aside>
+
+<div class="main-wrapper">
+    <header class="top-header">
+        <button id="hamburger-btn" class="hamburger">☰</button>
+        <h3>Extension Emulator</h3>
+    </header>
+
+    <div class="emulator-container">
+        <div class="editor-pane">
+            <div class="control-bar" style="background: transparent; border: none; padding: 0;">
+                <h4 style="margin:0">Extension Code</h4>
+                <span style="font-size: 0.8rem; color: var(--text-tertiary); margin-left: auto;">
+                        Paste your .js file here
+                    </span>
+            </div>
+            <textarea id="code-input" class="code-editor" spellcheck="false"
+                      placeholder="// Paste your extension class here..."></textarea>
+        </div>
+
+        <div class="preview-pane">
+
+            <div class="control-bar" id="main-control-bar">
+                <button id="mobile-controls-toggle" class="btn-run mobile-only">
+                    Options
+                </button>
+
+                <div id="desktop-controls" class="control-group-wrapper">
+                    <div class="control-group">
+                        <label>Function</label>
+                        <select id="func-select" class="control-input">
+                            <option value="fetchSearchResult">fetchSearchResult (Search)</option>
+                            <option value="fetchInfo">fetchInfo (Image Details)</option>
+                            <option value="findChapters">findChapters (Manga/Novel)</option>
+                            <option value="findChapterPages">findChapterPages (Read)</option>
+                        </select>
+                    </div>
+
+                    <div class="control-group">
+                        <label>Query / ID / URL</label>
+                        <input type="text" id="arg-input" class="control-input" value=""
+                               placeholder="Search query or ID">
+                    </div>
+
+                    <div class="control-group" style="max-width: 80px;">
+                        <label>Page</label>
+                        <input type="number" id="page-input" class="control-input" value="1" min="1">
+                    </div>
+
+                    <button class="btn-run" id="run-btn">Run</button>
+                </div>
+            </div>
+
+            <div style="display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative;">
+                <div class="tabs">
+                    <button class="tab-btn active" onclick="switchTab('visual')">Visual</button>
+                    <button class="tab-btn" onclick="switchTab('json')">JSON</button>
+                    <button class="tab-btn" onclick="switchTab('console')">Console</button>
+                </div>
+
+                <div id="output-visual" class="output-area">
+                    <div class="loading-state hidden">Loading...</div>
+                    <div id="visual-container"></div>
+                </div>
+                <div id="output-json" class="output-area hidden">
+                    <pre id="json-content"></pre>
+                </div>
+                <div id="output-console" class="output-area hidden">
+                    <div id="console-content"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="mobile-controls-overlay"></div>
+<div id="mobile-controls-drawer">
+    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
+        <h4 style="margin:0; color:var(--text-primary);">Run Options</h4>
+        <button id="close-drawer-btn" style="background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--text-secondary);">
+            X
+        </button>
+    </div>
+
+    <div class="control-group-wrapper">
+        <div class="control-group">
+            <label>Function</label>
+            <select id="func-select-mobile" class="control-input">
+                <option value="fetchSearchResult">fetchSearchResult (Search)</option>
+                <option value="fetchInfo">fetchInfo (Image Details)</option>
+                <option value="findChapters">findChapters (Manga/Novel)</option>
+                <option value="findChapterPages">findChapterPages (Read)</option>
+            </select>
+        </div>
+
+        <div class="control-group">
+            <label>Query / ID / URL</label>
+            <input type="text" id="arg-input-mobile" class="control-input" placeholder="Search query or ID">
+        </div>
+
+        <div class="control-group">
+            <label>Page</label>
+            <input type="number" id="page-input-mobile" class="control-input" value="1" min="1">
+        </div>
+
+        <button class="btn-run" id="run-btn-mobile">Run</button>
+    </div>
+</div>
+
+<script src="../src/emulator/emulator.js"></script>
+<script src="../src/hamburger.js"></script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const toggleBtn     = document.getElementById('mobile-controls-toggle');
+        const drawer        = document.getElementById('mobile-controls-drawer');
+        const overlay       = document.getElementById('mobile-controls-overlay');
+        const closeBtn      = document.getElementById('close-drawer-btn');
+
+        const funcSelect    = document.getElementById('func-select');
+        const argInput      = document.getElementById('arg-input');
+        const pageInput     = document.getElementById('page-input');
+        const runBtn        = document.getElementById('run-btn');
+
+        const funcMobile    = document.getElementById('func-select-mobile');
+        const argMobile     = document.getElementById('arg-input-mobile');
+        const pageMobile    = document.getElementById('page-input-mobile');
+        const runMobile     = document.getElementById('run-btn-mobile');
+
+        const syncDesktopToMobile = () => {
+            funcMobile.value  = funcSelect.value;
+            argMobile.value   = argInput.value;
+            pageMobile.value  = pageInput.value;
+        };
+
+        const syncMobileToDesktop = () => {
+            funcSelect.value  = funcMobile.value;
+            argInput.value    = argMobile.value;
+            pageInput.value   = pageMobile.value;
+        };
+
+        toggleBtn?.addEventListener('click', () => {
+            syncDesktopToMobile();
+            drawer.classList.add('open');
+            overlay.classList.add('open');
+        });
+
+        const closeDrawer = () => {
+            syncMobileToDesktop();
+            drawer.classList.remove('open');
+            overlay.classList.remove('open');
+        };
+
+        closeBtn?.addEventListener('click', closeDrawer);
+        overlay?.addEventListener('click', closeDrawer);
+
+        document.addEventListener('keydown', e => {
+            if (e.key === 'Escape') closeDrawer();
+        });
+
+        runMobile?.addEventListener('click', () => {
+            syncMobileToDesktop();
+            closeDrawer();
+            runBtn.click();
+        });
+    });
+</script>
+</body>
+</html>

views/favorites.html

@@ -39,6 +39,10 @@
         </nav>
 
         <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+            <a href="emulator.html" class="nav-button" title="Emulator">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+                <span>Emulator</span>
+            </a>
             <a href="marketplace.html" class="nav-button" title="Marketplace">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
                 <span>Marketplace</span>
@@ -55,7 +59,8 @@
 
     <div class="main-wrapper">
         <header class="top-header">
-            <div style="position: relative;">
+            <button id="hamburger-btn" class="hamburger">☰</button>
+            <div style="position: relative;margin-left: 50px">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);">
                     <circle cx="11" cy="11" r="8"></circle>
                     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
@@ -102,5 +107,6 @@
             });
         }
     </script>
+    <script src="../src/hamburger.js"></script>
 </body>
 </html>

views/index.html

@@ -43,6 +43,10 @@
         </nav>
 
         <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+            <a href="emulator.html" class="nav-button" title="Emulator">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+                <span>Emulator</span>
+            </a>
             <a href="marketplace.html" class="nav-button" title="Marketplace">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
                 <span>Marketplace</span>
@@ -61,7 +65,8 @@
 
     <div class="main-wrapper">
         <header class="top-header">
-            <div style="position: relative;">
+            <button id="hamburger-btn" class="hamburger">☰</button>
+            <div style="position: relative;margin-left: 50px">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                     style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);">
                     <circle cx="11" cy="11" r="8"></circle>
@@ -129,7 +134,6 @@
     </div>
 
     <script type="module" src="../src/renderer.js"></script>
-    <script type="module" src="../scripts/main.js"></script>
     <script src="../src/updateNotification.js"></script>
     <script>
         const searchInput = document.getElementById('search-input');
@@ -140,6 +144,7 @@
             });
         }
     </script>
+    <script src="../src/hamburger.js"></script>
 </body>
 
 </html>

views/marketplace.html

@@ -40,6 +40,10 @@
     </nav>
 
     <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+        <a href="emulator.html" class="nav-button" title="Emulator">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+            <span>Emulator</span>
+        </a>
         <a href="marketplace.html" class="nav-button active" title="Marketplace">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
             <span>Marketplace</span>
@@ -57,6 +61,11 @@
 </aside>
 
 <div class="main-wrapper">
+    <header class="top-header">
+        <button id="hamburger-btn" class="hamburger">☰</button>
+        <h3>Marketplace</h3>
+    </header>
+
     <div class="content-view">
         <div id="marketplace-page">
 
@@ -110,5 +119,6 @@
 <div id="message-bar" class="toast hidden">Message</div>
 
 <script type="module" src="../src/marketplace.js"></script>
+<script src="../src/hamburger.js"></script>
 </body>
 </html>

views/settings.html

@@ -39,6 +39,10 @@
         </nav>
 
         <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+            <a href="emulator.html" class="nav-button" title="Emulator">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+                <span>Emulator</span>
+            </a>
             <a href="marketplace.html" class="nav-button" title="Marketplace">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
                 <span>Marketplace</span>
@@ -55,7 +59,8 @@
 
     <div class="main-wrapper">
         <header class="top-header">
-            <div style="position: relative;">
+            <button id="hamburger-btn" class="hamburger">☰</button>
+            <div style="position: relative;margin-left: 50px;">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);">
                     <circle cx="11" cy="11" r="8"></circle>
                     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
@@ -99,5 +104,6 @@
             });
         }
     </script>
+    <script src="../src/hamburger.js"></script>
 </body>
 </html>

views/styles/books.css

@@ -1,209 +1,3 @@
-#book-details-view {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    padding-bottom: 4rem;
-    max-width: 1400px;
-    margin: 0 auto;
-    width: 100%;
-}
-
-.book-top-nav {
-    display: flex;
-    align-items: center;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid var(--border);
-}
-
-.back-btn-large {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: var(--text-secondary);
-    cursor: pointer;
-    transition: 0.2s;
-    padding: 0.5rem 1rem;
-    border-radius: var(--radius-md);
-}
-.back-btn-large:hover {
-    color: var(--text-primary);
-    background: var(--bg-surface-hover);
-}
-
-.book-layout-grid {
-    display: grid;
-    grid-template-columns: 300px 1fr; 
-    gap: 3rem;
-    align-items: start;
-}
-
-.book-left-col {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    position: sticky;
-    top: 20px; 
-}
-
-.book-poster-large {
-    width: 100%;
-    border-radius: var(--radius-lg);
-    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
-    aspect-ratio: 2/3;
-    object-fit: cover; 
-    border: 1px solid var(--border);
-    background: #111; 
-}
-
-.book-title-sidebar {
-    font-size: 1.5rem; 
-    font-weight: 700;
-    line-height: 1.3;
-    margin: 0;
-    color: var(--text-primary);
-    text-align: center; 
-    word-wrap: break-word;
-}
-
-.book-chapters-column {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    min-width: 0;
-}
-
-.chapter-table-container {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-}
-
-.chapter-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--border);
-    cursor: pointer;
-    transition: background 0.2s;
-}
-.chapter-row:last-child { border-bottom: none; }
-.chapter-row:hover { background: var(--bg-surface-hover); }
-
-.chapter-main-text { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
-.chapter-sub-text { font-size: 0.9rem; color: var(--text-tertiary); }
-
-.pagination-bar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1.5rem;
-    margin-top: 1rem;
-    padding-top: 1rem;
-}
-.page-btn {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    color: var(--text-primary);
-    padding: 0.5rem 1.5rem;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    font-weight: 500;
-    transition: 0.2s;
-}
-.page-btn:hover:not(:disabled) { background: var(--bg-surface-hover); border-color: var(--accent); }
-.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-
-#reader-view {
-    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
-    z-index: 200; background: #0d0d0d; overflow-y: auto;
-    display: flex; flex-direction: column; align-items: center; padding-top: 60px;
-}
-
-.reader-page-img { max-width: 100%; width: auto; display: block; margin-bottom: 0; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
-
-.reader-text-content {
-    max-width: 900px;
-    width: 95%;
-    color: #e4e4e7;
-    font-size: 1.1rem;
-    line-height: 1.8;
-    padding: 2rem;
-    background: #18181b; 
-    margin-bottom: 4rem;
-    border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-}
-.reader-text-content p {
-    margin-bottom: 1.5rem;
-}
-
-.reader-close-btn {
-    position: fixed; top: 20px; left: 20px; z-index: 210;
-    background: rgba(0,0,0,0.8); color: white; border: 1px solid rgba(255,255,255,0.2);
-    padding: 10px 20px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; backdrop-filter: blur(4px);
-}
-.reader-close-btn:hover { background: var(--accent); border-color: var(--accent); }
-
-.loading-state { text-align: center; padding: 4rem; color: var(--text-tertiary); }
-
-.image-entry[data-type="book"] {
-    aspect-ratio: 2/3;       
-    background: #1a1a1a;     
-    display: block;          
-    position: relative;
-    cursor: pointer;
-    overflow: hidden; 
-}
-
-.image-entry[data-type="book"] img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;       
-    object-position: center top; 
-    transition: filter 0.3s ease, transform 0.3s ease;
-}
-
-.image-entry[data-type="book"]:hover img {
-    filter: blur(4px) brightness(0.7);
-    transform: scale(1.05);
-}
-
-.book-read-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    pointer-events: none; 
-    color: white;
-    z-index: 10;
-}
-
-.image-entry[data-type="book"]:hover .book-read-overlay {
-    opacity: 1;
-}
-
-.book-read-overlay span {
-    font-weight: 700;
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
-}
-
-.book-read-overlay svg {
-    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
-    color: var(--accent);
-}
-
 .image-entry[data-type="book"]::after {
     content: "";
     position: absolute;
@@ -212,3 +6,439 @@
     border-radius: inherit;
     pointer-events: none;
 }
+
+.gallery-masonry .image-entry[data-type="book"] {
+    grid-row-end: span 1 !important;
+    aspect-ratio: 2 / 3 !important;
+    position: relative !important;
+    contain: layout style !important;
+}
+
+.gallery-masonry .image-entry[data-type="book"]::before {
+    content: "";
+    display: block;
+    padding-top: 150% !important;
+}
+
+.gallery-masonry .image-entry[data-type="book"] img {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
+}
+.gallery-masonry:has(.image-entry[data-type="book"]) {
+    grid-auto-rows: 1fr !important;
+}
+
+.gallery-masonry.books-only .image-entry[data-type="book"],
+.gallery-masonry .image-entry[data-type="book"] {
+    aspect-ratio: 2 / 3;
+    height: auto;
+    grid-row-end: span 1 !important;
+    contain: layout style;
+    background: var(--bg-surface);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.gallery-masonry .image-entry[data-type="book"]::before {
+    content: "";
+    display: block;
+    padding-top: 150%;
+}
+
+.gallery-masonry .image-entry[data-type="book"] img {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center top;
+    transition: all 0.3s ease;
+}
+
+.gallery-masonry .image-entry[data-type="book"] img:not(.loaded) {
+    background: linear-gradient(90deg, #18181b 0%, #27272a 50%, #18181b 100%);
+    background-size: 200% 100%;
+    animation: shimmer 1.8s infinite;
+    opacity: 1;
+}
+
+.gallery-masonry .image-entry[data-type="book"]:hover img {
+    filter: brightness(0.7) blur(2px);
+    transform: scale(1.08);
+}
+
+.gallery-masonry .image-entry[data-type="book"]:hover .book-read-overlay {
+    opacity: 1;
+}
+
+.book-top-nav {
+    margin-bottom: 2rem;
+}
+
+.back-btn-large {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: 0.2s;
+    font-weight: 500;
+}
+
+.back-btn-large:hover {
+    background: var(--bg-surface-hover);
+    border-color: var(--accent);
+}
+
+.back-btn-large svg {
+    flex-shrink: 0;
+}
+
+.book-layout-grid {
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    gap: 2rem;
+    align-items: start;
+}
+
+.book-left-col {
+    position: sticky;
+    top: 2rem;
+}
+
+.book-poster-large {
+    width: 100%;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    margin-bottom: 1.5rem;
+}
+
+.book-title-sidebar {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin: 0;
+    line-height: 1.3;
+}
+
+.book-chapters-column {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.chapter-table-container {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+.chapter-row {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border);
+    cursor: pointer;
+    transition: 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.chapter-row:last-child {
+    border-bottom: none;
+}
+
+.chapter-row:hover {
+    background: var(--bg-surface-hover);
+}
+
+.chapter-main-text {
+    font-weight: 500;
+    color: var(--text-primary);
+    font-size: 0.95rem;
+}
+
+.pagination-bar {
+    display: flex;
+    justify-content: center;
+}
+
+.page-btn {
+    padding: 0.5rem 1rem;
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: 0.2s;
+    font-weight: 500;
+}
+
+.page-btn:hover:not(:disabled) {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+.page-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+#reader-view {
+    position: fixed;
+    inset: 0;
+    background: #000;
+    z-index: 100;
+    overflow-y: auto;
+    padding: 4rem 0 2rem 0;
+}
+
+.reader-close-btn {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 0.75rem 1.25rem;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+    z-index: 101;
+    transition: 0.2s;
+}
+
+.reader-close-btn:hover {
+    background: rgba(139, 92, 246, 0.9);
+    border-color: var(--accent);
+}
+
+#reader-content {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+.reader-page-img {
+    width: 100%;
+    height: auto;
+    display: block;
+    margin-bottom: 0;
+    border-radius: 4px;
+}
+
+.reader-text-content {
+    background: #1a1a1a;
+    color: #e5e5e5;
+    padding: 3rem;
+    border-radius: var(--radius-lg);
+    line-height: 1.8;
+    font-size: 1.05rem;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.reader-text-content p {
+    margin-bottom: 1.5rem;
+}
+
+.reader-text-content h1,
+.reader-text-content h2,
+.reader-text-content h3 {
+    color: var(--accent);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+}
+
+@media (max-width: 767px) {
+    /* Book Cards */
+    .gallery-masonry.books-only {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 1rem;
+    }
+
+    .image-entry[data-type="book"] img {
+        height: 200px;
+    }
+
+    .image-entry[data-type="book"]:hover {
+        transform: none;
+    }
+
+    .image-entry[data-type="book"] .image-buttons {
+        padding: 0.5rem;
+        gap: 0.4rem;
+        opacity: 0.9;
+    }
+
+    .image-entry[data-type="book"] .image-buttons button {
+        width: 32px;
+        height: 32px;
+    }
+
+    /* Book Details */
+    .book-layout-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    .book-left-col {
+        position: relative;
+        top: 0;
+        display: grid;
+        grid-template-columns: 140px 1fr;
+        gap: 1rem;
+        align-items: start;
+    }
+
+    .book-poster-large {
+        width: 100%;
+        margin-bottom: 0;
+    }
+
+    .book-title-sidebar {
+        font-size: 1.2rem;
+        align-self: center;
+    }
+
+    .back-btn-large {
+        padding: 0.6rem 1rem;
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+    }
+
+    /* Chapter List */
+    .chapter-row {
+        padding: 0.85rem 1rem;
+    }
+
+    .chapter-main-text {
+        font-size: 0.9rem;
+    }
+
+    .pagination-bar {
+        flex-wrap: wrap;
+        gap: 0.75rem;
+        padding: 0.75rem;
+    }
+
+    .page-btn {
+        padding: 0.5rem 0.85rem;
+        font-size: 0.85rem;
+    }
+
+    #reader-view {
+        padding: 3.5rem 0 1rem 0;
+    }
+
+    .reader-close-btn {
+        top: 0.75rem;
+        right: 0.75rem;
+        padding: 0.6rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    #reader-content {
+        padding: 0 0.75rem;
+    }
+
+    .reader-text-content {
+        padding: 1.5rem;
+        font-size: 1rem;
+        line-height: 1.7;
+    }
+
+    .reader-page-img {
+        border-radius: 2px;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+    .gallery-masonry.books-only {
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    }
+
+    .book-layout-grid {
+        grid-template-columns: 240px 1fr;
+        gap: 1.5rem;
+    }
+
+    .image-entry[data-type="book"] img {
+        height: 280px;
+    }
+
+    .book-left-col {
+        position: sticky;
+        top: 1rem;
+    }
+}
+
+@media (min-width: 1400px) {
+    .gallery-masonry.books-only {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+
+    .image-entry[data-type="book"] img {
+        height: 340px;
+    }
+
+    .book-layout-grid {
+        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;
+}

views/styles/emulator.css

@@ -0,0 +1,492 @@
+.emulator-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    height: calc(100vh - var(--header-height));
+    padding: 1rem 2rem 2rem;
+    overflow: hidden;
+}
+
+.editor-pane,
+.preview-pane {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: 100%;
+    overflow: hidden;
+}
+
+.code-editor {
+    flex: 1;
+    background: var(--bg-sidebar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: #d4d4d8;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 14px;
+    padding: 1rem;
+    resize: none;
+    line-height: 1.5;
+    tab-size: 4;
+}
+
+.code-editor:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent-glow);
+}
+
+.control-bar {
+    display: flex;
+    gap: 0.5rem;
+    background: var(--bg-surface);
+    padding: 1rem;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border);
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    flex: 1;
+    min-width: 120px;
+}
+
+.control-group label {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+.control-input {
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+    padding: 0.5rem;
+    border-radius: var(--radius-md);
+    font-size: 0.9rem;
+    width: 100%;
+}
+
+.btn-run {
+    background: var(--accent);
+    color: white;
+    border: none;
+    padding: 0.6rem 1.5rem;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    cursor: pointer;
+    height: 40px;
+    align-self: flex-end;
+    transition: 0.2s;
+}
+
+.btn-run:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.tabs {
+    display: flex;
+    gap: 0.5rem;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 0.5rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+    display: none;
+}
+
+.tab-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: 0.2s;
+}
+
+.tab-btn.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+.output-area {
+    flex: 1;
+    background: var(--bg-sidebar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    overflow: auto;
+    padding: 1rem;
+    position: relative;
+}
+
+pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    color: #a5b4fc;
+}
+
+.visual-card {
+    display: inline-flex;
+    flex-direction: column;
+    width: 150px;
+    margin: 0.5rem;
+    background: var(--bg-surface);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    border: 1px solid var(--border);
+    vertical-align: top;
+}
+
+.visual-card img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    background: #27272a;
+}
+
+.visual-card .title {
+    padding: 0.5rem;
+    font-size: 0.8rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.visual-chapter {
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--border);
+    cursor: pointer;
+}
+
+.visual-chapter:hover {
+    background: var(--bg-surface-hover);
+}
+
+.log-entry {
+    font-family: monospace;
+    border-bottom: 1px solid var(--border);
+    padding: 2px 0;
+}
+
+.log-info {
+    color: #60a5fa;
+}
+
+.log-warn {
+    color: #facc15;
+}
+
+.log-error {
+    color: #f87171;
+}
+
+.loading-state {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--text-secondary);
+}
+
+.loading-state.hidden {
+    display: none;
+}
+
+@media (max-width: 767px) {
+    .emulator-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(220px, 35vh) 1fr;
+        gap: 1rem;
+        padding: 0.75rem;
+        height: auto;
+        min-height: calc(100vh - var(--header-height));
+        overflow: visible;
+    }
+
+    #mobile-controls-toggle {
+        display: block !important;
+        width: 100%;
+    }
+
+    #desktop-controls {
+        display: none;
+    }
+
+    .control-bar {
+        padding: 0.75rem;
+        justify-content: center;
+    }
+
+    .tabs {
+        flex-shrink: 0;
+    }
+
+    #visual-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: 0.75rem;
+        padding: 0.5rem 0;
+    }
+
+    .visual-card {
+        width: calc(50% - 0.375rem);
+        max-width: 180px;
+        margin: 0;
+    }
+
+    .visual-card img {
+        height: 220px;
+    }
+
+    .visual-card .title {
+        font-size: 0.8rem;
+        padding: 0.45rem;
+    }
+
+    .visual-chapter {
+        padding: 0.85rem 0.75rem;
+        font-size: 0.95rem;
+    }
+
+    #console-content,
+    #json-content pre {
+        font-size: 0.82rem;
+        line-height: 1.4;
+    }
+
+    .loading-state {
+        font-size: 1rem;
+    }
+
+    .editor-pane,
+    .preview-pane {
+        gap: 0.75rem;
+        height: auto;
+        min-height: 0;
+        overflow: visible;
+    }
+
+    .editor-pane {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .preview-pane {
+        display: flex;
+        flex-direction: column;
+        height: auto;
+        min-height: 0;
+    }
+
+    .preview-pane > div:nth-child(2) {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .code-editor {
+        min-height: 200px;
+        max-height: 40vh;
+        font-size: 13px;
+        padding: 0.75rem;
+    }
+
+    .control-bar {
+        padding: 0.75rem;
+        gap: 0.5rem;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .control-bar[style*="background: transparent"] {
+        flex-direction: row !important;
+        padding: 0 !important;
+    }
+
+    .control-group {
+        flex: unset;
+        width: 100%;
+        min-width: 0;
+    }
+
+    .control-group:has(label:contains("Page")) {
+        max-width: none;
+    }
+
+    .control-input {
+        font-size: 0.85rem;
+        padding: 0.6rem;
+    }
+
+    .btn-run {
+        width: 100%;
+        height: auto;
+        padding: 0.75rem;
+        align-self: stretch;
+        margin-top: 0.25rem;
+    }
+
+    .tabs {
+        gap: 0.25rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .tab-btn {
+        padding: 0.6rem 0.75rem;
+        font-size: 0.85rem;
+        flex: 1;
+        text-align: center;
+    }
+
+    .output-area {
+        flex: 1;
+        overflow-y: auto !important;
+        min-height: 300px;
+        padding: 0.75rem;
+    }
+
+    .visual-card {
+        width: 130px;
+        margin: 0.35rem;
+    }
+
+    .visual-card img {
+        height: 170px;
+    }
+
+    .visual-card .title {
+        font-size: 0.75rem;
+        padding: 0.4rem;
+    }
+
+    .visual-chapter {
+        padding: 0.6rem 0.5rem;
+        font-size: 0.9rem;
+    }
+
+    pre {
+        font-size: 0.8rem;
+    }
+
+    .log-entry {
+        font-size: 0.8rem;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+    .emulator-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+        gap: 1.25rem;
+        padding: 1rem 1.5rem;
+    }
+
+    .editor-pane {
+        max-height: 35vh;
+    }
+
+    .preview-pane {
+        min-height: 45vh;
+    }
+
+    .code-editor {
+        font-size: 13px;
+    }
+
+    .control-bar {
+        flex-wrap: wrap;
+    }
+
+    .control-group {
+        min-width: 140px;
+    }
+
+    .btn-run {
+        width: auto;
+        min-width: 100px;
+    }
+}
+
+@media (min-width: 1024px) and (max-width: 1279px) {
+    .emulator-container {
+        gap: 1.25rem;
+    }
+
+    .visual-card {
+        width: 140px;
+    }
+
+    .visual-card img {
+        height: 180px;
+    }
+}
+
+.control-group-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    align-items: end;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+#mobile-controls-drawer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--bg-surface);
+    border-top: 1px solid var(--border);
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    padding: 1rem;
+    transform: translateY(100%);
+    transition: transform 0.25s ease;
+    z-index: 1000;
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
+}
+
+#mobile-controls-drawer.open {
+    transform: translateY(0);
+}
+
+#mobile-controls-drawer .control-group-wrapper {
+    flex-direction: column;
+    gap: 1rem;
+}
+
+#mobile-controls-drawer .control-group {
+    min-width: 0;
+}
+
+#mobile-controls-drawer .btn-run {
+    width: 100%;
+    margin-top: 0.5rem;
+}
+
+#mobile-controls-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s;
+    z-index: 999;
+}
+
+#mobile-controls-overlay.open {
+    opacity: 1;
+    pointer-events: auto;
+}

views/styles/home.css

@@ -1,28 +1,19 @@
 :root {
     --bg-base: #09090b;
-
     --bg-sidebar: #101012;
-
     --bg-surface: #18181b;
-
     --bg-surface-hover: #27272a;
-
     --accent: #8b5cf6;
-
     --accent-glow: rgba(139, 92, 246, 0.3);
     --accent-gradient: linear-gradient(135deg, #8b5cf6, #6366f1);
-
     --text-primary: #f4f4f5;
     --text-secondary: #a1a1aa;
     --text-tertiary: #52525b;
-
     --border: #27272a;
     --border-hover: #3f3f46;
-
     --radius-md: 8px;
     --radius-lg: 16px;
     --radius-full: 9999px;
-
     --sidebar-width-collapsed: 72px;
     --sidebar-width-expanded: 240px;
     --header-height: 70px;
@@ -40,13 +31,12 @@ body {
     padding: 0;
     background-color: var(--bg-base);
     color: var(--text-primary);
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     height: 100vh;
     display: flex;
     overflow: hidden;
 }
 
-
 .sidebar {
     width: var(--sidebar-width-collapsed);
     background: var(--bg-sidebar);
@@ -70,9 +60,9 @@ body {
     flex-direction: column;
     height: 100%;
     position: relative;
+    min-width: 0;
 }
 
-
 .brand-logo {
     height: 48px;
     display: flex;
@@ -102,7 +92,6 @@ body {
 }
 
 .nav-button {
-
     display: flex;
     align-items: center;
     padding: 0.85rem;
@@ -128,7 +117,6 @@ body {
     color: var(--accent);
 }
 
-
 .nav-button svg {
     min-width: 24px;
     width: 24px;
@@ -136,7 +124,10 @@ body {
     margin-right: 1rem;
 }
 
-a, a:visited, a:hover, a:active {
+a,
+a:visited,
+a:hover,
+a:active {
     text-decoration: none;
 }
 
@@ -151,7 +142,6 @@ a, a:visited, a:hover, a:active {
     transform: translateX(0);
 }
 
-
 .top-header {
     height: var(--header-height);
     display: flex;
@@ -163,12 +153,10 @@ a, a:visited, a:hover, a:active {
     z-index: 40;
 }
 
-
 .search-box {
     display: contents;
 }
 
-
 #search-input {
     background: var(--bg-surface);
     border: 1px solid var(--border);
@@ -185,7 +173,6 @@ a, a:visited, a:hover, a:active {
     box-shadow: 0 0 0 2px var(--accent-glow);
 }
 
-
 .content-view {
     flex: 1;
     overflow-y: auto;
@@ -193,7 +180,6 @@ a, a:visited, a:hover, a:active {
 }
 
 .page {
-
     max-width: 1600px;
     margin: 0 auto;
     animation: fadeIn 0.3s ease-out;
@@ -204,56 +190,58 @@ a, a:visited, a:hover, a:active {
         opacity: 0;
         transform: translateY(10px);
     }
-
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
-
-
-
 #source-list {
     display: flex;
     gap: 1rem;
-    overflow-x: auto;
     padding-bottom: 1rem;
     scrollbar-width: none;
-
     align-items: center;
     flex-direction: row;
-
+    scroll-behavior: smooth;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
 }
 
 #source-list::-webkit-scrollbar {
-    display: none;
+    height: 6px;
+}
+
+#source-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+#source-list::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 3px;
+}
+
+#source-list::-webkit-scrollbar-thumb:hover {
+    background: var(--border-hover);
 }
 
 .source-button {
     background: var(--bg-surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
-
-
     display: flex;
     align-items: center;
     gap: 1rem;
-
-
     padding: 0.75rem 1rem;
     min-width: 200px;
-
     width: auto;
-
     height: auto;
-
-
     cursor: pointer;
     transition: all 0.2s;
     position: relative;
     overflow: hidden;
     text-align: left;
+    flex-shrink: 0;
 }
 
 .source-button:hover {
@@ -269,7 +257,6 @@ a, a:visited, a:hover, a:active {
     color: var(--text-primary);
 }
 
-
 .source-button img,
 .source-button .brand-icon {
     width: 32px;
@@ -277,10 +264,8 @@ a, a:visited, a:hover, a:active {
     border-radius: 6px;
     object-fit: cover;
     flex-shrink: 0;
-
 }
 
-
 .source-text-wrapper {
     display: flex;
     flex-direction: column;
@@ -301,51 +286,34 @@ a, a:visited, a:hover, a:active {
 .source-url {
     font-size: 0.75rem;
     color: var(--text-tertiary);
-
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-
 .gallery-masonry {
-    column-count: 2;
-    column-gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 1rem;
 }
 
-@media (min-width: 768px) {
-    .gallery-masonry {
-        column-count: 3;
-    }
+.gallery-masonry:not(.books-only) {
+    grid-auto-rows: 8px;
 }
 
-@media (min-width: 1024px) {
-    .gallery-masonry {
-        column-count: 4;
-    }
-}
-
-@media (min-width: 1400px) {
-    .gallery-masonry {
-        column-count: 5;
-    }
-}
-
-.image-entry {
-    margin-bottom: 1rem;
+.image-entry:not([data-type="book"]) {
+    margin-bottom: 0;
     border-radius: var(--radius-md);
     overflow: hidden;
     position: relative;
-    background: var(--bg-surface);
     break-inside: avoid;
     transition: transform 0.2s;
     cursor: zoom-in;
-    display: inline-block;
+    display: block;
     width: 100%;
-
 }
 
-.image-entry:hover {
+.image-entry:not([data-type="book"]):hover {
     transform: scale(1.02);
     z-index: 2;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
@@ -355,46 +323,53 @@ a, a:visited, a:hover, a:active {
     width: 100%;
     height: auto;
     display: block;
-    opacity: 0;
-    transition: opacity 0.3s;
+    aspect-ratio: auto;
 }
 
 .image-entry img.loaded {
     opacity: 1;
+    transition: opacity 0.3s ease-in;
+    min-height: unset;
 }
 
-
-.image-entry img:not(.loaded) {
-    opacity: 1;
+.image-entry::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+    z-index: 1;
+    border-radius: var(--radius-md);
 }
 
-
-
 .image-buttons {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: 2rem 1rem 1rem 1rem;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
+    bottom: 0.75rem;
+    right: 0.75rem;
+    left: auto;
     display: flex;
-    justify-content: flex-end;
     gap: 0.5rem;
+    z-index: 2;
     opacity: 0;
-    transition: 0.2s;
-    top: auto;
+    transition: opacity 0.25s ease;
+    pointer-events: none;
+}
 
-    right: auto;
-
-    flex-direction: row;
+.image-buttons button {
+    pointer-events: all;
+}
 
+.image-entry:hover::before,
+.image-entry:hover .image-buttons {
+    opacity: 1;
 }
 
 .image-entry:hover .image-buttons {
     opacity: 1;
 }
 
-
 .image-buttons button {
     width: 32px;
     height: 32px;
@@ -409,7 +384,6 @@ a, a:visited, a:hover, a:active {
     cursor: pointer;
     transition: 0.2s;
     padding: 0;
-
 }
 
 .image-buttons button:hover {
@@ -422,7 +396,6 @@ a, a:visited, a:hover, a:active {
     height: 16px;
 }
 
-
 .settings-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -443,7 +416,6 @@ a, a:visited, a:hover, a:active {
     color: var(--text-primary);
 }
 
-
 fieldset {
     border: none;
     padding: 0;
@@ -473,7 +445,6 @@ input[type="radio"] {
     height: 1.2em;
 }
 
-
 .hidden {
     display: none !important;
 }
@@ -488,8 +459,6 @@ input[type="radio"] {
     gap: 1rem;
 }
 
-
-
 #tag-info-modal {
     position: fixed;
     inset: 0;
@@ -499,6 +468,7 @@ input[type="radio"] {
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 1rem;
 }
 
 #tag-info-modal.hidden {
@@ -506,7 +476,6 @@ input[type="radio"] {
 }
 
 #tag-info-modal>div {
-
     background: var(--bg-surface);
     border: 1px solid var(--border);
     padding: 2rem;
@@ -515,6 +484,8 @@ input[type="radio"] {
     max-width: 500px;
     position: relative;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+    max-height: 80vh;
+    overflow-y: auto;
 }
 
 #tag-info-close-button {
@@ -525,6 +496,12 @@ input[type="radio"] {
     border: none;
     color: var(--text-tertiary);
     cursor: pointer;
+    font-size: 1.5rem;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .tag-cloud {
@@ -534,7 +511,6 @@ input[type="radio"] {
     margin-top: 1rem;
 }
 
-
 #tag-info-content span {
     background: var(--bg-surface-hover);
     border: 1px solid var(--border);
@@ -544,7 +520,6 @@ input[type="radio"] {
     font-size: 0.8rem;
 }
 
-
 .toast {
     position: fixed;
     bottom: 2rem;
@@ -561,6 +536,7 @@ input[type="radio"] {
     opacity: 0;
     pointer-events: none;
     transition: 0.3s;
+    max-width: calc(100vw - 4rem);
 }
 
 .toast:not(.hidden) {
@@ -574,3 +550,299 @@ input[type="radio"] {
     opacity: 1;
     pointer-events: all;
 }
+
+#gallery-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 4rem 1rem;
+    break-inside: avoid;
+    column-span: all;
+    grid-column: 1 / -1;
+}
+
+#gallery-placeholder p {
+    max-width: 300px;
+    text-align: center;
+    white-space: normal;
+    margin: 0;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.image-entry.newly-added {
+    animation: fadeInUp 0.4s ease-out;
+}
+
+.hamburger {
+    display: none;
+    width: 42px;
+    height: 42px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    font-size: 1.8rem;
+    font-weight: bold;
+    cursor: pointer;
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: background 0.2s, border-color 0.2s;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+}
+
+.hamburger:hover {
+    background: var(--bg-surface-hover);
+    border-color: var(--accent);
+}
+
+@media (min-width: 1400px) {
+    .gallery-masonry {
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    }
+}
+
+@media (min-width: 1024px) and (max-width: 1399px) {
+    .gallery-masonry {
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+    .content-view {
+        padding: 0 1.5rem 2rem 1.5rem;
+    }
+
+    .top-header {
+        padding: 0 1.5rem;
+    }
+
+    .gallery-masonry {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+
+    #search-input {
+        width: 280px;
+    }
+
+    .source-button {
+        min-width: 180px;
+    }
+
+    .settings-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 767px) {
+    html {
+        font-size: 16px;
+    }
+
+    body {
+        zoom: 1;
+    }
+
+    .content-view {
+        overflow-x: hidden !important;
+        padding: 0 1rem 2rem 1rem;
+    }
+
+    .top-header {
+        height: 70px;
+        padding: 0 1rem;
+        justify-content: flex-start;
+    }
+
+    .hamburger {
+        display: flex;
+        position: static;
+        transform: none;
+        margin-right: auto;
+    }
+
+    #search-input {
+        width: 100%;
+        max-width: none;
+        font-size: 1rem;
+        padding: 0.6rem 1rem;
+    }
+
+    .sidebar {
+        position: fixed;
+        left: -100%;
+        top: 0;
+        width: 280px;
+        height: 100%;
+        background: var(--bg-sidebar);
+        transition: left 0.3s ease;
+        z-index: 300;
+        padding: 1.5rem 1rem;
+        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
+    }
+
+    .sidebar.active {
+        left: 0;
+    }
+
+    .sidebar:hover {
+        width: 280px;
+    }
+
+    .main-wrapper {
+        margin-left: 0 !important;
+        width: 100%;
+    }
+
+    .sidebar .nav-button span {
+        opacity: 1 !important;
+        transform: translateX(0) !important;
+    }
+
+    .sidebar nav {
+        gap: 0.75rem !important;
+    }
+
+    .nav-button {
+        padding: 1rem 1.25rem !important;
+        font-size: 1rem !important;
+    }
+
+    .nav-button span {
+        font-size: 1rem !important;
+    }
+
+    .nav-button svg {
+        width: 24px !important;
+        height: 24px !important;
+        stroke-width: 2 !important;
+        margin-right: 0.75rem !important;
+    }
+
+    .gallery-masonry {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 0.85rem;
+    }
+
+    .image-entry:not([data-type="book"]):hover {
+        transform: none;
+    }
+
+    .image-buttons {
+        opacity: 1 !important;
+        bottom: 8%;
+        right: 10px;
+        left: 10px;
+        justify-content: flex-end;
+        gap: 10px;
+        pointer-events: all;
+    }
+
+    .image-buttons button {
+        width: 44px;
+        height: 44px;
+        background: rgba(0, 0, 0, 0.7);
+        border-width: 2px;
+    }
+
+    .image-buttons button svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .image-buttons button:active {
+        transform: scale(0.95);
+        background: var(--accent);
+    }
+
+    #source-list {
+        gap: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
+
+    .source-button {
+        min-width: 160px;
+        padding: 0.6rem 0.85rem;
+        gap: 0.75rem;
+    }
+
+    .source-button img,
+    .source-button .brand-icon {
+        width: 28px;
+        height: 28px;
+    }
+
+    .source-name {
+        font-size: 0.9rem;
+    }
+
+    .source-url {
+        font-size: 0.7rem;
+    }
+
+    .source-button:hover {
+        transform: none;
+    }
+
+    .toast {
+        bottom: 1rem;
+        right: 1rem;
+        left: 1rem;
+        max-width: none;
+        padding: 0.85rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    .loading-state {
+        padding: 2rem 1rem;
+    }
+
+    #tag-info-modal>div {
+        padding: 1.5rem;
+        width: 95%;
+    }
+
+    .settings-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .settings-card {
+        padding: 1.25rem;
+    }
+
+    h1, h2, h3 {
+        font-size: 1.25rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .gallery-masonry {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 0.6rem;
+    }
+
+    .source-button {
+        min-width: 140px;
+        padding: 0.5rem 0.75rem;
+    }
+
+    .source-name {
+        font-size: 0.85rem;
+    }
+}

views/styles/marketplace.css

@@ -32,7 +32,7 @@
 
 .hero-content {
     z-index: 1;
-    max-width: 60%;
+    max-width: 100%;
 }
 
 .hero-title {
@@ -42,6 +42,7 @@
     background: linear-gradient(to right, #fff, #a5b4fc);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .hero-subtitle {
@@ -53,7 +54,8 @@
 
 .hero-stats {
     display: flex;
-    gap: 2rem;
+    gap: 1.5rem;
+    flex-wrap: wrap;
 }
 
 .stat-box {
@@ -65,7 +67,7 @@
 }
 
 .stat-value {
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     font-weight: 700;
     color: #fff;
     display: block;
@@ -120,6 +122,7 @@
 
 .section-icon {
     color: var(--accent);
+    flex-shrink: 0;
 }
 
 .section-title {
@@ -156,6 +159,7 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+    gap: 0.75rem;
 }
 
 .ext-icon-box {
@@ -168,6 +172,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
 }
 
 .ext-icon {
@@ -255,3 +260,147 @@
 
 .hidden { display: none !important; }
 .loading-state { text-align: center; padding: 4rem; color: var(--text-tertiary); }
+
+.main-wrapper .top-header {
+    display: none;
+}
+
+@media (max-width: 767px) {
+    .main-wrapper .top-header {
+        display: flex;
+    }
+    #marketplace-page {
+        gap: 1.5rem;
+        padding-bottom: 2rem;
+    }
+
+    .marketplace-hero {
+        padding: 1.5rem;
+        border-radius: 12px;
+    }
+
+    .marketplace-hero::before {
+        width: 250px;
+        height: 250px;
+        right: -20%;
+        top: -30%;
+    }
+
+    .hero-title {
+        font-size: 1.8rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .hero-subtitle {
+        font-size: 0.9rem;
+        margin-bottom: 1.25rem;
+        line-height: 1.4;
+    }
+
+    .hero-stats {
+        gap: 1rem;
+    }
+
+    .stat-box {
+        padding: 0.6rem 1rem;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .stat-value {
+        font-size: 1.3rem;
+    }
+
+    .stat-label {
+        font-size: 0.7rem;
+    }
+
+    .marketplace-tabs {
+        width: 100%;
+        justify-content: stretch;
+        gap: 0.5rem;
+        padding: 0.4rem;
+    }
+
+    .tab-btn {
+        flex: 1;
+        padding: 0.7rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    .section-header {
+        margin-bottom: 1rem;
+    }
+
+    .section-title {
+        font-size: 1rem;
+    }
+
+    .section-icon {
+        width: 18px;
+        height: 18px;
+    }
+
+    .marketplace-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .extension-card {
+        padding: 1.25rem;
+        gap: 0.75rem;
+    }
+
+    .extension-card:hover {
+        transform: none;
+    }
+
+    .ext-icon-box {
+        width: 48px;
+        height: 48px;
+    }
+
+    .ext-name {
+        font-size: 1rem;
+    }
+
+    .ext-meta {
+        font-size: 0.75rem;
+    }
+
+    .type-badge {
+        font-size: 0.6rem;
+        padding: 3px 7px;
+    }
+
+    .card-footer {
+        padding-top: 0.75rem;
+    }
+
+    .ext-size {
+        font-size: 0.7rem;
+    }
+
+    .install-btn {
+        padding: 0.5rem 0.85rem;
+        font-size: 0.8rem;
+    }
+
+    .loading-state {
+        padding: 2rem 1rem;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+    .marketplace-grid {
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    }
+
+    .hero-title {
+        font-size: 2rem;
+    }
+
+    .marketplace-tabs {
+        width: auto;
+    }
+}