added custom titlebar to electron

main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron');
+const { app, BrowserWindow, ipcMain } = require('electron');
 const { fork } = require('child_process');
 const path = require('path');
 
@@ -13,17 +13,23 @@ function createWindow() {
     win = new BrowserWindow({
         width: 1200,
         height: 800,
+        frame: false,
+        titleBarStyle: "hidden",
         webPreferences: {
+            preload: path.join(__dirname, "preload.js"),
             nodeIntegration: false,
-            contextIsolation: true,
+            contextIsolation: true
         }
     });
 
     win.setMenu(null);
-
     win.loadURL('http://localhost:3000');
 }
 
+ipcMain.on("win:minimize", () => win.minimize());
+ipcMain.on("win:maximize", () => win.maximize());
+ipcMain.on("win:close", () => win.close());
+
 app.whenReady().then(() => {
     startBackend();
     createWindow();

preload.js

@@ -0,0 +1,10 @@
+const { contextBridge, ipcRenderer } = require("electron");
+
+contextBridge.exposeInMainWorld("electronAPI", {
+    isElectron: true,
+    win: {
+        minimize: () => ipcRenderer.send("win:minimize"),
+        maximize: () => ipcRenderer.send("win:maximize"),
+        close: () => ipcRenderer.send("win:close")
+    }
+});

src/api/books/books.service.ts

@@ -145,7 +145,6 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
     if (!ext) return [];
 
     if ((ext.type === 'book-board') && ext.search) {
-        const start = performance.now();
 
         try {
             console.log(`[${name}] Searching for book: ${query}`);
@@ -159,15 +158,6 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
                 }
             });
 
-            const end = performance.now();
-            console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
-            console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
-            console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
-            console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
-            console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
-            console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
-            console.log(`[${name}] Search time: ${(end - start).toFixed(2)} ms`);
-
             if (matches?.length) {
                 return matches.map(m => ({
                     id: m.id,

src/scripts/titlebar.js

@@ -0,0 +1,18 @@
+if (window.electronAPI?.isElectron) {
+    document.documentElement.classList.add("electron");
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.documentElement.style.visibility = "visible";
+    if (!window.electronAPI?.isElectron) return;
+    document.body.classList.add("electron");
+
+    const titlebar = document.getElementById("titlebar");
+    if (!titlebar) return;
+
+    titlebar.style.display = "flex";
+
+    titlebar.querySelector(".min").onclick = () => window.electronAPI.win.minimize();
+    titlebar.querySelector(".max").onclick = () => window.electronAPI.win.maximize();
+    titlebar.querySelector(".close").onclick = () => window.electronAPI.win.close();
+});

src/shared/headless.js

@@ -8,160 +8,227 @@ const BLOCK_LIST = [
     "adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic",
     "hotjar", "yandex", "ads", "widgets", "gravatar", "fonts.googleapis",
     "map", "cdn.ampproject.org", "googletagmanager"
-
 ];
 
 const ALLOWED_SCRIPTS = [];
 
 async function initHeadless() {
-    if (browser) return;
+    if (browser && browser.isConnected()) return;
 
-    browser = await chromium.launch({
+    try {
-        headless: true,
+        browser = await chromium.launch({
-        args: [
+            headless: true,
-            "--no-sandbox",
+            args: [
-            "--disable-setuid-sandbox",
+                "--no-sandbox",
-            "--disable-dev-shm-usage",
+                "--disable-setuid-sandbox",
-            "--disable-gpu",
+                "--disable-dev-shm-usage",
-            "--disable-extensions",
+                "--disable-gpu",
-            "--disable-background-networking",
+                "--disable-extensions",
-            "--disable-sync",
+                "--disable-background-networking",
-            "--disable-translate",
+                "--disable-sync",
-            "--mute-audio",
+                "--disable-translate",
-            "--no-first-run",
+                "--mute-audio",
-            "--no-zygote",
+                "--no-first-run",
-            "--single-process",
+                "--no-zygote",
-            "--disable-software-rasterizer",
+                "--single-process",
-            "--disable-client-side-phishing-detection",
+                "--disable-software-rasterizer",
-            "--no-default-browser-check",
+                "--disable-client-side-phishing-detection",
-            "--no-experiments"
+                "--no-default-browser-check",
-        ]
+                "--no-experiments"
-    });
+            ]
+        });
 
-    context = await browser.newContext({
+        context = await browser.newContext({
-        userAgent:
+            userAgent:
-            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/122.0.0.0 Safari/537.36"
+                "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/122.0.0.0 Safari/537.36"
-    });
+        });
+    } catch (error) {
+        console.error("Error al inicializar browser:", error);
+        throw error;
+    }
 }
 
 async function turboScroll(page) {
-    await page.evaluate(() => {
+    try {
-        return new Promise((resolve) => {
+        await page.evaluate(() => {
-            let last = 0;
+            return new Promise((resolve) => {
-            let same = 0;
+                let last = 0;
-            const timer = setInterval(() => {
+                let same = 0;
-                const h = document.body.scrollHeight;
+                const timer = setInterval(() => {
-                window.scrollTo(0, h);
+                    const h = document.body.scrollHeight;
-                if (h === last) {
+                    window.scrollTo(0, h);
-                    same++;
+                    if (h === last) {
-                    if (same >= 5) {
+                        same++;
-
+                        if (same >= 5) {
-                        clearInterval(timer);
+                            clearInterval(timer);
-                        resolve();
+                            resolve();
+                        }
+                    } else {
+                        same = 0;
+                        last = h;
                     }
-                } else {
+                }, 20);
-                    same = 0;
-                    last = h;
-                }
-            }, 20);
 
+                // Safety timeout
+                setTimeout(() => {
+                    clearInterval(timer);
+                    resolve();
+                }, 10000);
+            });
         });
-    });
+    } catch (error) {
+        console.error("Error en turboScroll:", error.message);
+        // No lanzamos el error, continuamos
+    }
 }
 
 async function scrape(url, handler, options = {}) {
     const {
         waitUntil = "domcontentloaded",
         waitSelector = null,
-        timeout = 10000,
+        timeout = 15000,
         scrollToBottom = false,
         renderWaitTime = 0,
         loadImages = true,
-        blockScripts = true
+        blockScripts = true,
-
+        retries = 3,
+        retryDelay = 1000
     } = options;
 
-    if (!browser) await initHeadless();
+    let lastError = null;
 
-    const page = await context.newPage();
+    for (let attempt = 1; attempt <= retries; attempt++) {
-    const requests = [];
+        let page = null;
 
-    page.on("request", req => {
+        try {
-        requests.push({
+            // Verificar que el browser esté activo
-            url: req.url(),
+            if (!browser || !browser.isConnected()) {
-            method: req.method(),
+                await initHeadless();
-            type: req.resourceType()
+            }
-        });
-    });
 
-    await page.route("**/*", (route) => {
+            page = await context.newPage();
-        const req = route.request();
+            const requests = [];
-        const resUrl = req.url().toLowerCase();
-        const type = req.resourceType();
 
-        if (
+            // Listener para requests
-            type === "font" ||
+            page.on("request", req => {
-            type === "stylesheet" ||
+                requests.push({
-            type === "media" ||
+                    url: req.url(),
-            type === "manifest" ||
+                    method: req.method(),
-            type === "other" ||
+                    type: req.resourceType()
+                });
+            });
 
-            (blockScripts && type === "script" && !ALLOWED_SCRIPTS.some(k => resUrl.includes(k)))
+            // Route para bloquear recursos
-        ) {
+            await page.route("**/*", (route) => {
+                const req = route.request();
+                const resUrl = req.url().toLowerCase();
+                const type = req.resourceType();
 
-            return route.abort("blockedbyclient", { timeout: 100 });
+                if (
-        }
+                    type === "font" ||
+                    type === "stylesheet" ||
+                    type === "media" ||
+                    type === "manifest" ||
+                    type === "other" ||
+                    (blockScripts && type === "script" && !ALLOWED_SCRIPTS.some(k => resUrl.includes(k)))
+                ) {
+                    return route.abort("blockedbyclient");
+                }
 
-        if (BLOCK_LIST.some(k => resUrl.includes(k))) {
+                if (BLOCK_LIST.some(k => resUrl.includes(k))) {
-            return route.abort("blockedbyclient", { timeout: 100 });
+                    return route.abort("blockedbyclient");
-        }
+                }
 
-        if (!loadImages && (
+                if (!loadImages && (
-            type === "image" || resUrl.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
+                    type === "image" || resUrl.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
-        )) {
+                )) {
-            return route.abort("blockedbyclient", { timeout: 100 });
+                    return route.abort("blockedbyclient");
-        }
+                }
 
-        route.continue();
+                route.continue();
-    });
+            });
 
-    try {
+            // Navegar a la URL
-        await page.goto(url, { waitUntil, timeout });
+            await page.goto(url, { waitUntil, timeout });
 
-        if (waitSelector) {
+            // Esperar selector si se especifica
-            try {
+            if (waitSelector) {
-                await page.waitForSelector(waitSelector, { timeout });
+                try {
-            } catch (e) {
+                    await page.waitForSelector(waitSelector, { timeout: Math.min(timeout, 5000) });
+                } catch (e) {
+                    console.warn(`Selector '${waitSelector}' no encontrado, continuando...`);
+                }
+            }
 
+            // Scroll si es necesario
+            if (scrollToBottom) {
+                await turboScroll(page);
+            }
+
+            // Tiempo de espera adicional para renderizado
+            if (renderWaitTime > 0) {
+                await page.waitForTimeout(renderWaitTime);
+            }
+
+            // Ejecutar el handler personalizado
+            const result = await handler(page);
+
+            // Cerrar la página antes de retornar
+            await page.close();
+
+            return { result, requests };
+
+        } catch (error) {
+            lastError = error;
+            console.error(`[Intento ${attempt}/${retries}] Error durante el scraping de ${url}:`, error.message);
+
+            // Cerrar página si está abierta
+            if (page && !page.isClosed()) {
+                try {
+                    await page.close();
+                } catch (closeError) {
+                    console.error("Error al cerrar página:", closeError.message);
+                }
+            }
+
+            // Si el browser está cerrado, limpiar referencias
+            if (error.message.includes("closed") || error.message.includes("Target closed")) {
+                console.log("Browser cerrado detectado, reiniciando...");
+                await closeScraper();
+            }
+
+            // Si no es el último intento, esperar antes de reintentar
+            if (attempt < retries) {
+                const delay = retryDelay * attempt; // Backoff exponencial
+                console.log(`Reintentando en ${delay}ms...`);
+                await new Promise(r => setTimeout(r, delay));
             }
         }
-
-        if (scrollToBottom) {
-            await turboScroll(page);
-        }
-
-        if (renderWaitTime > 0) {
-
-            await new Promise(r => setTimeout(r, renderWaitTime));
-        }
-
-        const result = await handler(page);
-        return { result, requests };
-    } catch (error) {
-        console.error(`Error durante el scraping de ${url}:`, error);
-        return null;
-
-    } finally {
-
-        await page.close();
     }
+
+    // Si llegamos aquí, todos los intentos fallaron
+    console.error(`Todos los intentos fallaron para ${url}`);
+    throw lastError || new Error("Scraping failed after all retries");
 }
 
 async function closeScraper() {
-    if (context) await context.close();
+    try {
-    if (browser) await browser.close();
+        if (context) {
-    context = null;
+            await context.close();
-    browser = null;
+            context = null;
+        }
+    } catch (error) {
+        console.error("Error cerrando context:", error.message);
+    }
+
+    try {
+        if (browser) {
+            await browser.close();
+            browser = null;
+        }
+    } catch (error) {
+        console.error("Error cerrando browser:", error.message);
+    }
 }
 
 module.exports = {

views/anime/anime.html

@@ -7,8 +7,20 @@
     <title>WaifuBoard</title>
     <link rel="stylesheet" href="/views/css/anime/anime.css">
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
+    <script src="/src/scripts/titlebar.js"></script>
+    <link rel="stylesheet" href="/views/css/titlebar.css">
 </head>
 <body>
+<div id="titlebar"> <div class="title-left">
+    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+    <span class="app-title">WaifuBoard</span>
+</div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
 
 
 <div class="modal-overlay" id="desc-modal">
@@ -143,7 +155,6 @@
 
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
-
 <script src="/src/scripts/anime/anime.js"></script>
 </body>
 </html>

views/anime/index.html

@@ -6,9 +6,21 @@
     <title>WaifuBoard</title>
     <link rel="stylesheet" href="/views/css/anime/home.css">
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/titlebar.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+    <script src="/src/scripts/titlebar.js"></script>
 </head>
-<body>
+<body >
+<div id="titlebar"><div class="title-left">
+    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+    <span class="app-title">WaifuBoard</span>
+</div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
 
 <nav class="navbar" id="navbar">
     <a href="/" class="nav-brand">

views/anime/watch.html

@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <base href="/">
     <title>WaifuBoard Watch</title>
     <link rel="stylesheet" href="/views/css/anime/watch.css">
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
@@ -11,11 +10,21 @@
     <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
     <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
     <link rel="icon" href="/public/assets/waifuboards.ico">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="/views/css/titlebar.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <script src="/src/scripts/titlebar.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 </head>
 <body>
+<div id="titlebar"> <div class="title-left">
+    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+    <span class="app-title">WaifuBoard</span>
+</div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
+
 
 <header class="top-bar">
     <a href="#" id="back-link" class="back-btn">

views/books/book.html

@@ -8,8 +8,20 @@
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <link rel="stylesheet" href="/views/css/books/book.css">
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/titlebar.css">
+    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
+<div id="titlebar"> <div class="title-left">
+    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+    <span class="app-title">WaifuBoard</span>
+</div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
 
 
 <a href="/books" class="back-btn">

views/books/books.html

@@ -4,12 +4,24 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WaifuBoard Books</title>
+    <link rel="stylesheet" href="/views/css/titlebar.css">
     <link rel="stylesheet" href="/views/css/books/books.css">
     <script src="/src/scripts/books/books.js" defer></script>
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
+<div id="titlebar"> <div class="title-left">
+    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+    <span class="app-title">WaifuBoard</span>
+</div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
 
 <nav class="navbar" id="navbar">
     <a href="/" class="nav-brand">

views/books/read.html

@@ -7,9 +7,20 @@
     <link rel="stylesheet" href="/views/css/books/reader.css">
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/views/css/titlebar.css">
+    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
+<div id="titlebar"> <div class="title-left">
+    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+    <span class="app-title">WaifuBoard</span>
+</div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
 
 <header class="top-bar">
     <button id="back-btn" class="glass-btn">

views/css/anime/watch.css

@@ -39,19 +39,12 @@
     --plyr-color-main: var(--color-primary);
 }
 
-*, *::before, *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
 body {
     margin: 0;
     padding: 0;
     background-color: var(--color-bg-base);
     color: var(--color-text-primary);
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-family: 'Inter', system-ui, sans-serif;
-    line-height: 1.6;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
 }
@@ -577,35 +570,6 @@ body {
     background: transparent;
 }
 
-.character-card {
-
-    --card-min-width: 280px;
-    flex: 1 1 var(--card-min-width);
-    max-width: calc((100% - var(--spacing-lg) * 3) / 4);
-    min-width: var(--card-min-width);
-
-    height: 92px;
-    display: flex;
-    align-items: center;
-    background: var(--color-bg-card);
-    border: var(--border-subtle);
-    border-radius: var(--radius-md);
-    padding: var(--spacing-md);
-    gap: var(--spacing-md);
-    transition: all var(--transition-fast);
-}
-
-.character-card:hover {
-    border-color: var(--color-primary);
-    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
-    transform: translateY(-2px);
-}
-
-.character-card-img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
-.character-details { overflow: hidden; flex: 1; }
-.character-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.actor-name { font-size: 0.875rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
 .plyr--video { border-radius: var(--radius-xl); }
 .plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; padding: 1rem 1.5rem 1.5rem !important; }
 .plyr--full-ui input[type=range] { color: var(--color-primary); }
@@ -624,16 +588,6 @@ body {
         text-align: center;
         margin-bottom: var(--spacing-lg);
     }
-
-    .character-card {
-        max-width: calc((100% - var(--spacing-lg) * 2) / 3);
-    }
-
-    @media (min-width: 1400px) {
-        .character-card {
-            max-width: calc((100% - var(--spacing-lg) * 3) / 4);
-        }
-    }
 }
 
 @media (max-width: 768px) {
@@ -671,21 +625,6 @@ body {
     .episode-controls { flex-direction: column; gap: var(--spacing-md); }
     .navigation-buttons { width: 100%; justify-content: center; }
     .nav-btn { flex: 1; justify-content: center; }
-
-    .characters-carousel {
-        justify-content: flex-start;
-        gap: var(--spacing-md);
-        max-height: 194px;
-        padding: 0;
-    }
-    .character-card {
-
-        --card-min-width-sm: 45%;
-        flex: 1 1 var(--card-min-width-sm);
-        min-width: unset;
-        max-width: unset;
-        height: 85px;
-    }
 }
 
 @media (max-width: 480px) {
@@ -713,14 +652,3 @@ body {
         flex: 1 1 100%;
     }
 }
-
-.ui-scale-wrapper {
-
-    transform: none;
-    transform-origin: unset;
-    width: 100%;
-    max-width: 100%;
-    margin: 0 auto;
-
-    padding-top: 0;
-}

views/css/books/books.css

@@ -337,25 +337,3 @@ body {
         width: 100%; border-radius: 0; max-height: 60vh; border: none; z-index: 2001;
     }
 }
-
-.adv-search-btn {
-    position: absolute;
-    top: 50%; /* Centrado verticalmente */
-    right: 5px; /* Ajusta la distancia del borde derecho */
-    transform: translateY(-50%); /* Ajuste fino de centrado */
-
-    /* Estilos para que parezca un botón de icono */
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 5px; /* Área de clic cómoda */
-    line-height: 0; /* Elimina espacio extra */
-
-    /* Opcional: Dale un color de icono que combine */
-    transition: color 0.2s;
-}
-
-/* 3. Efecto al pasar el ratón (hover) */
-.adv-search-btn:hover {
-    color: var(--color-primary, #fff); /* Cambia de color al pasar el mouse */
-}

views/css/books/reader.css

@@ -30,7 +30,7 @@
 body {
     background: var(--bg-base);
     color: var(--text-primary);
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family: 'Inter', system-ui, sans-serif;
     overflow-x: hidden;
     line-height: 1.6;
 }

views/css/gallery/image.css

@@ -253,6 +253,9 @@
     color: white; text-decoration: none; font-weight: 600;
     transition: all 0.2s ease;
 }
+body.electron .back-btn {
+    top: 115px !important;
+}
 .back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
 
 @media (max-width: 768px) {

views/css/titlebar.css

@@ -0,0 +1,153 @@
+:root {
+    --titlebar-height: 40px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    background: #09090b;
+    visibility: hidden;
+}
+
+html.electron {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html.electron .navbar,
+html.electron .top-bar {
+    top: var(--titlebar-height) !important;
+}
+
+html.electron .back-btn {
+    top: 55px !important;
+}
+
+#back-link {
+    margin-top: 55px !important;
+}
+
+#titlebar {
+    display: none;
+    height: var(--titlebar-height);
+    background: rgba(9, 9, 11, 0.95);
+    color: white;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    -webkit-app-region: drag;
+    user-select: none;
+    font-family: 'Inter', system-ui, sans-serif;
+    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999999;
+    backdrop-filter: blur(12px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.title-left {
+    display: flex;
+    align-items: center !important;
+    gap: 10px;
+}
+
+#titlebar .app-icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    background: rgba(139, 92, 246, 0.15);
+    border: 1px solid rgba(139, 92, 246, 0.3);
+    padding: 3px;
+}
+
+#titlebar .app-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.app-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.9);
+    letter-spacing: -0.2px;
+}
+
+.title-right {
+    display: flex;
+    height: 100%;
+    gap: 1px;
+}
+
+.title-right button {
+    -webkit-app-region: no-drag;
+    border: none;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.7);
+    width: 46px;
+    height: 100%;
+    cursor: pointer;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.title-right button svg {
+    width: 16px;
+    height: 16px;
+    transition: transform 0.2s;
+}
+
+.title-right button:hover {
+    color: white;
+}
+
+.title-right button:active {
+    transform: scale(0.95);
+}
+
+.title-right .min:hover {
+    background: rgba(139, 92, 246, 0.2);
+}
+
+.title-right .max:hover {
+    background: rgba(34, 197, 94, 0.2);
+}
+
+.title-right .close:hover {
+    background: #e81123;
+    color: white;
+}
+
+.title-right button:hover svg {
+    transform: scale(1.1);
+}
+
+html.electron::-webkit-scrollbar {
+    width: 12px;
+}
+
+html.electron::-webkit-scrollbar-track {
+    background: #09090b;
+    margin-top: var(--titlebar-height);
+}
+
+html.electron::-webkit-scrollbar-thumb {
+    background: rgba(139, 92, 246, 0.3);
+    border-radius: 6px;
+    border: 2px solid #09090b;
+}
+
+html.electron::-webkit-scrollbar-thumb:hover {
+    background: rgba(139, 92, 246, 0.5);
+}

views/gallery/gallery.html

@@ -11,8 +11,20 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
 
     <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
+    <link rel="stylesheet" href="/views/css/titlebar.css">
+    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
+<div id="titlebar"> <div class="title-left">
+    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+    <span class="app-title">WaifuBoard</span>
+</div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
 
 <nav class="navbar" id="navbar">
     <a href="/" class="nav-brand">

views/gallery/image.html

@@ -6,12 +6,24 @@
   <title id="page-title">WaifuBoard - Gallery Item</title>
   <link rel="stylesheet" href="/views/css/anime/home.css">
   <link rel="stylesheet" href="/views/css/gallery/gallery.css">
+  <link rel="stylesheet" href="/views/css/titlebar.css">
   <link rel="stylesheet" href="/views/css/gallery/image.css">
   <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   <link rel="stylesheet" href="/views/css/updateNotifier.css">
+  <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
+<div id="titlebar"> <div class="title-left">
+  <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+  <span class="app-title">WaifuBoard</span>
+</div>
+  <div class="title-right">
+    <button class="min">—</button>
+    <button class="max">🗖</button>
+    <button class="close">✕</button>
+  </div>
+</div>
 
 <nav class="navbar" id="navbar">
   <a href="/" class="nav-brand">

views/marketplace.html

@@ -8,8 +8,20 @@
     <link rel="stylesheet" href="/views/css/marketplace.css">
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/views/css/titlebar.css">
+    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
+<div id="titlebar"> <div class="title-left">
+    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+    <span class="app-title">WaifuBoard</span>
+</div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
 
 <nav class="navbar" id="navbar">
     <a href="/" class="nav-brand">
@@ -107,5 +119,6 @@
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/marketplace.js"></script>
+<script src="/src/scripts/titlebar.js"></script>
 </body>
 </html>

views/schedule.html

@@ -10,9 +10,20 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/views/css/schedule/schedule.css">
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/titlebar.css">
+    <script src="/src/scripts/titlebar.js"></script>
 </head>
-
 <body>
+<div id="titlebar"> <div class="title-left">
+    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+    <span class="app-title">WaifuBoard</span>
+</div>
+    <div class="title-right">
+        <button class="min">—</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
 
     <div class="ambient-bg" id="ambientBg"></div>