novel extensions dont appear on manga entry and viceversa

better handling on web player
fixed video chapters when downloading an anime episode
2026-01-01 19:47:28 +01:00 · 2026-01-01 18:23:10 +01:00 · 2026-01-01 18:16:18 +01:00 · 2026-01-01 18:12:27 +01:00 · 2026-01-01 17:53:50 +01:00 · 2026-01-01 17:23:53 +01:00
240 changed files with 39712 additions and 6550 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,11 @@
-node_modules
+desktop/node_modules
-electron
+desktop/electron
-dist
+desktop/dist
-.env
+desktop/.env
-build
+desktop/build
 docker/node_modules
 docker/electron
 docker/dist
 docker/.env
 docker/build
--- a/README.md
+++ b/README.md
@@ -1,31 +1,55 @@
 # 🎀 WaifuBoard
-**Lightweight all-in-one app for boorus, manga and light novels — no sources included, total freedom via extensions.**
+**Lightweight all-in-one app for boorus, anime, manga and light novels — no sources included, total freedom via extensions.**
-<img src="public/banner.png" alt="WaifuBoard Hero" width="100%"/>
+<img src="assets/hero.png" alt="WaifuBoard Hero" width="100%"/>
 <div align="center">
 [![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)
 [![Extensions](https://img.shields.io/badge/Extensions-Repository-8257e5?style=for-the-badge)](https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions)
-**[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)** • **[Discord](https://discord.gg/DAVNf7erRJ)**
 </div>
 ## 🚀 What is WaifuBoard?
 **A lightweight and privacy-friendly desktop app designed around modular extensions.** WaifuBoard delivers a clean, organized reading experience for boorus, manga, and light novels, powered entirely by community-made sources.
 ## ✨ Features
 - Lightweight
 - Discord Rich Presence
- Super clean & fast UI
+- Local lists & anilist integration
- Built-in **Extension Marketplace**
+- Multi user support
 - Server version (Coming soon!)
 - Fully open-source & community-driven
- Future mobile ports planned
+
 > ⚠️ **Note**
 >
 > Release candidates may contain breaking changes and unresolved bugs.  
 > Expect frequent updates and major changes between versions.
 ## 🖼️ Gallery
 ### 👥 Multi-User Profiles
 <img src="assets/users.gif" alt="Multi-user profiles" width="100%"/>
 ### 📖 Reader
 #### Manga
 <img src="assets/manga.png" alt="Manga reader" width="100%"/>
 #### Manhwa
 <img src="assets/manhwa.png" alt="Manhwa reader" width="100%"/>
 #### Light Novel
 <img src="assets/novel.gif" alt="Light novel reader" width="100%"/>
 ### 📅 Schedule & Tracking
 <img src="assets/schedule.png" alt="Anime schedule" width="100%"/>
 ### 📚 Lists (Local & AniList)
 <img src="assets/list.gif" alt="Lists and tracking" width="100%"/>
 ## 🖥️ Download & Platform Support
--- a/assets/hero.png
+++ b/assets/hero.png
--- a/assets/list.gif
+++ b/assets/list.gif
--- a/assets/manga.png
+++ b/assets/manga.png
--- a/assets/manhwa.png
+++ b/assets/manhwa.png
--- a/assets/novel.gif
+++ b/assets/novel.gif
--- a/assets/schedule.png
+++ b/assets/schedule.png
--- a/assets/users.gif
+++ b/assets/users.gif
--- a/desktop/.gitignore
+++ b/desktop/.gitignore
@@ -0,0 +1,5 @@
 node_modules
 electron
 dist
 .env
 build
--- a/desktop/loading.html
+++ b/desktop/loading.html
@@ -0,0 +1,229 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Waifuboard</title>
    <style>
        :root {
            --color-bg: #09090b;
            --color-primary: #8b5cf6;
            --color-text: #ffffff;
            --color-text-dim: #a1a1aa;
        }
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        body {
            margin: 0;
            background: linear-gradient(135deg, #18181b 0%, var(--color-bg) 100%);
            color: var(--color-text);
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
            border-radius: 16px;
            -webkit-app-region: drag;
        }
        body::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 16px;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
            0 20px 40px rgba(0,0,0,0.6);
            pointer-events: none;
        }
        img {
            -webkit-user-drag: none;
            user-drag: none;
        }
        .bg-particle {
            position: absolute;
            background: var(--color-primary);
            border-radius: 50%;
            opacity: 0;
            animation: particleFloat 8s ease-in-out infinite;
        }
        .bg-particle:nth-child(1) {
            width: 4px;
            height: 4px;
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }
        .bg-particle:nth-child(2) {
            width: 6px;
            height: 6px;
            top: 60%;
            left: 80%;
            animation-delay: 2s;
        }
        .bg-particle:nth-child(3) {
            width: 3px;
            height: 3px;
            top: 40%;
            left: 20%;
            animation-delay: 4s;
        }
        .bg-particle:nth-child(4) {
            width: 5px;
            height: 5px;
            top: 70%;
            left: 70%;
            animation-delay: 1s;
        }
        .splash-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 28px;
            width: 100%;
            animation: fadeIn 0.5s ease-out;
        }
        .brand-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .brand-container.horizontal {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 14px;
            width: 100%;
        }
        .brand-icon {
            width: 50px;
            height: 50px;
            object-fit: contain;
            animation: iconPulse 2s ease-in-out infinite;
        }
        .brand-name {
            font-size: 25px;
            font-weight: 700;
            letter-spacing: -0.02em;
            margin: 0;
            padding: 0;
            color: #ffffff;
            line-height: 1;
            display: flex;
            align-items: center;
        }
        .spinner-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .spinner {
            width: 44px;
            height: 44px;
            border: 5px solid rgba(139, 92, 246, 0.2);
            border-top: 5px solid var(--color-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        .loading-text {
            font-size: 12px;
            color: #a1a1aa;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        @keyframes iconPulse {
            0%, 100% {
                transform: scale(1);
                filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
            }
            50% {
                transform: scale(1.05);
                filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.6));
            }
        }
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        @keyframes particleFloat {
            0% {
                opacity: 0;
                transform: translateY(0) scale(0);
            }
            25% {
                opacity: 0.3;
            }
            50% {
                opacity: 0.6;
                transform: translateY(-100px) scale(1);
            }
            75% {
                opacity: 0.3;
            }
            100% {
                opacity: 0;
                transform: translateY(-200px) scale(0);
            }
        }
    </style>
 </head>
 <body>
 <div class="bg-particle"></div>
 <div class="bg-particle"></div>
 <div class="bg-particle"></div>
 <div class="bg-particle"></div>
 <div class="splash-container">
    <div class="brand-container horizontal">
        <img src="public/assets/waifuboards.ico" alt="Waifuboard Logo" class="brand-icon">
        <h1 class="brand-name">Waifuboard</h1>
    </div>
    <div class="spinner-wrapper">
        <div class="spinner"></div>
        <span class="loading-text">Loading</span>
    </div>
 </div>
 </body>
 </html>
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -0,0 +1,144 @@
 const { app, BrowserWindow, ipcMain } = require('electron');
 const { fork } = require('child_process');
 const path = require('path');
 const log = require('electron-log');
 const sessionId = new Date().toISOString().replace(/[:.]/g, '-');
 log.transports.file.resolvePath = () => path.join(app.getPath('userData'), 'logs', `${sessionId}.log`);
 log.transports.file.level = 'info';
 log.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}] {text}';
 let win;
 let backend;
 const net = require('net');
 function waitForServer(port, host = '127.0.0.1', timeout = 10000) {
    return new Promise((resolve, reject) => {
        const start = Date.now();
        const check = () => {
            const socket = new net.Socket();
            socket
                .once('connect', () => {
                    socket.destroy();
                    resolve();
                })
                .once('error', () => {
                    socket.destroy();
                    if (Date.now() - start > timeout) {
                        reject(new Error('Backend timeout'));
                    } else {
                        setTimeout(check, 200);
                    }
                })
                .connect(port, host);
        };
        check();
    });
 }
 function startBackend() {
    backend = fork(path.join(__dirname, 'server.js'), [], {
        stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
        env: {
            ...process.env,
            IS_PACKAGED: app.isPackaged ? 'true' : 'false'
        }
    });
    log.info('Starting backend process...');
    backend.stdout.on('data', (data) => {
        log.info(`[Backend]: ${data.toString().trim()}`);
    });
    backend.stderr.on('data', (data) => {
        log.error(`[Backend ERROR]: ${data.toString().trim()}`);
    });
    backend.on('exit', (code) => {
        log.warn(`Backend process exited with code: ${code}`);
    });
 }
 let splash;
 function createSplash() {
    splash = new BrowserWindow({
        width: 400,
        height: 300,
        frame: false,
        transparent: false,
        alwaysOnTop: true,
        resizable: false,
        hasShadow: false,
        backgroundColor: '#00000000'
    });
    splash.loadFile('loading.html');
 }
 function createWindow() {
    win = new BrowserWindow({
        width: 1200,
        height: 800,
        frame: false,
        titleBarStyle: "hidden",
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
            nodeIntegration: false,
            contextIsolation: true
        }
    });
    win.setMenu(null);
    win.maximize();
    win.loadURL('http://localhost:54322');
    win.on('closed', () => {
        win = null;
    });
 }
 ipcMain.on("win:minimize", () => win.minimize());
 ipcMain.on("win:maximize", () => {
    if (win.isMaximized()) {
        win.unmaximize();
    } else {
        win.maximize();
    }
 });
 ipcMain.on("win:close", () => win.close());
 process.on('uncaughtException', (err) => {
    log.error('Critical unhandled error in Main:', err);
 });
 app.whenReady().then(async () => {
    startBackend();
    createSplash();
    try {
        await waitForServer(54322);
        createWindow();
        splash.close();
    } catch (e) {
        splash.close();
        log.error(e);
        app.quit();
    }
 });
 app.on('window-all-closed', () => {
    log.info('Closing all windows...');
    if (backend) {
        backend.kill();
        log.info('Backend process terminated.');
    }
    if (process.platform !== 'darwin') {
        app.quit();
    }
 });
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -4,10 +4,8 @@
  "description": "",
  "main": "main.js",
  "scripts": {
-    "build": "tsc",
+    "start": "tsc && electron .",
-    "start": "tsc && node server.js",
+    "dist": "tsc && electron-builder"
    "electron": "tsc && electron .",
    "dist": "npm run build && electron-builder"
  },
  "keywords": [],
  "author": "",
@@ -15,18 +13,24 @@
  "type": "commonjs",
  "dependencies": {
    "@fastify/static": "^8.3.0",
-    "@ryuziii/discord-rpc": "^1.0.1-rc.1",
+    "@xhayper/discord-rpc": "^1.3.0",
-    "bcrypt": "^6.0.0",
+    "adm-zip": "^0.5.16",
    "bcryptjs": "^3.0.3",
    "bindings": "^1.5.0",
    "cheerio": "^1.1.2",
    "dotenv": "^17.2.3",
    "electron-log": "^5.4.3",
    "epub": "^1.3.0",
    "fastify": "^5.6.2",
    "js-yaml": "^4.1.1",
    "jsonwebtoken": "^9.0.3",
    "node-addon-api": "^8.5.0",
    "node-cron": "^4.2.1",
    "playwright-chromium": "^1.57.0",
    "sqlite3": "^5.1.7"
  },
  "devDependencies": {
    "@types/adm-zip": "^0.5.7",
    "@types/bcrypt": "^6.0.0",
    "@types/jsonwebtoken": "^9.0.10",
    "@types/node": "^24.0.0",
@@ -47,10 +51,15 @@
      "package.json",
      "views/**/*",
      "src/scripts/**/*",
-      "public/assets/*"
+      "public/assets/*",
      "loading.html"
    ],
    "extraResources": [
-      "./.env"
+      {
        "from": "C:\\Users\\synta\\AppData\\Local\\ms-playwright\\chromium_headless_shell-1200",
        "to": "playwright/chromium"
      },
      ".env"
    ],
    "win": {
      "target": "portable",
--- a/desktop/preload.js
+++ b/desktop/preload.js
--- a/desktop/public/assets/avatar.png
+++ b/desktop/public/assets/avatar.png
--- a/desktop/public/assets/placeholder.svg
+++ b/desktop/public/assets/placeholder.svg
--- a/desktop/public/assets/waifuboards.ico
+++ b/desktop/public/assets/waifuboards.ico
--- a/desktop/server.js
+++ b/desktop/server.js
@@ -4,18 +4,22 @@ const fastify = require("fastify")({
 const path = require("path");
 const jwt = require("jsonwebtoken");
 const cron = require("node-cron");
 const { initHeadless } = require("./electron/shared/headless");
 const { initDatabase } = require("./electron/shared/database");
 const { loadExtensions } = require("./electron/shared/extensions");
 const { ensureConfigFile } = require("./electron/shared/config");
 const { init } = require("./electron/api/rpc/rpc.controller");
 const {refreshTrendingAnime, refreshTopAiringAnime} = require("./electron/api/anime/anime.service");
 const {refreshPopularBooks, refreshTrendingBooks} = require("./electron/api/books/books.service");
 const dotenv = require("dotenv");
-const envPath = process.resourcesPath
+const isPackaged = process.env.IS_PACKAGED === "true";
-  ? path.join(process.resourcesPath, ".env")
+const envPath = isPackaged
-  : path.join(__dirname, ".env");
+    ? path.join(process.resourcesPath, ".env")
-
+    : path.join(__dirname, ".env");
 // Attempt to load it and log the result to be sure
 dotenv.config({ path: envPath });
 dotenv.config({ path: envPath, override: false });
 const viewsRoutes = require("./electron/views/views.routes");
 const animeRoutes = require("./electron/api/anime/anime.routes");
 const booksRoutes = require("./electron/api/books/books.routes");
@@ -26,39 +30,8 @@ const rpcRoutes = require("./electron/api/rpc/rpc.routes");
 const userRoutes = require("./electron/api/user/user.routes");
 const listRoutes = require("./electron/api/list/list.routes");
 const anilistRoute = require("./electron/api/anilist/anilist");
-
+const localRoutes = require("./electron/api/local/local.routes");
-const fs = require("fs");
+const configRoutes = require("./electron/api/config/config.routes");
 try {
  console.log("--- DEBUGGING PATHS ---");
  // 1. Check where we are currently running
  console.log("Current Directory:", __dirname);
  // 2. Check if 'electron' exists
  const electronPath = path.join(__dirname, "electron");
  if (fs.existsSync(electronPath)) {
    console.log("✅ electron folder found.");
  } else {
    console.log("❌ electron folder missing!");
  }
  // 3. Check 'electron/api/rpc' specifically
  const rpcPath = path.join(__dirname, "electron", "api", "rpc");
  if (fs.existsSync(rpcPath)) {
    console.log("✅ electron/api/rpc folder found. Contents:");
    // LIST EVERYTHING INSIDE THE RPC FOLDER
    console.log(fs.readdirSync(rpcPath));
  } else {
    console.log(`❌ electron/api/rpc folder NOT found at: ${rpcPath}`);
    // Check parent folder to see what IS there
    const parent = path.join(__dirname, "electron", "api");
    console.log("Contents of electron/api:", fs.readdirSync(parent));
  }
  console.log("-----------------------");
 } catch (e) {
  console.log("Debug Error:", e);
 }
 fastify.addHook("preHandler", async (request) => {
  const auth = request.headers.authorization;
@@ -100,21 +73,49 @@ fastify.register(rpcRoutes, { prefix: "/api" });
 fastify.register(userRoutes, { prefix: "/api" });
 fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });
 fastify.register(localRoutes, { prefix: "/api" });
 fastify.register(configRoutes, { prefix: "/api" });
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 const start = async () => {
  try {
    ensureConfigFile()
    initDatabase("anilist");
    initDatabase("favorites");
    initDatabase("cache");
    initDatabase("userdata");
    initDatabase("local_library");
    init();
    const refreshAll = async () => {
      await refreshTrendingAnime();
      await sleep(300);
      await refreshTopAiringAnime();
      await sleep(300);
      await refreshTrendingBooks();
      await sleep(300);
      await refreshPopularBooks();
    };
    cron.schedule("*/30 * * * *", async () => {
      try {
        await refreshAll();
        console.log("cache refreshed");
      } catch (e) {
        console.error("refresh failed", e);
      }
    });
    await loadExtensions();
    await initHeadless();
    await fastify.listen({ port: 54322, host: "0.0.0.0" });
    refreshAll().catch(e =>
        console.error("initial refresh failed", e)
    );
    console.log(`Server running at http://localhost:54322`);
    await initHeadless();
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
--- a/desktop/src/api/anilist/anilist.service.ts
+++ b/desktop/src/api/anilist/anilist.service.ts
--- a/desktop/src/api/anilist/anilist.ts
+++ b/desktop/src/api/anilist/anilist.ts
--- a/desktop/src/api/anime/anime.controller.ts
+++ b/desktop/src/api/anime/anime.controller.ts
@@ -0,0 +1,326 @@
 import {FastifyReply, FastifyRequest} from 'fastify';
 import * as animeService from './anime.service';
 import { setActivity } from '../rpc/rp.service';
 import { upsertListEntry } from '../list/list.service';
 import {getExtension} from '../../shared/extensions';
 import { getConfig as loadConfig } from '../../shared/config';
 import {Anime, AnimeRequest, SearchRequest, WatchStreamRequest} from '../types';
 import {spawn} from "node:child_process";
 import net from 'net';
 import fs from 'fs';
 import os from 'os';
 import path from 'path';
 import jwt from "jsonwebtoken";
 export async function getAnime(req: AnimeRequest, reply: FastifyReply) {
    try {
        const { id } = req.params;
        const source = req.query.source;
        let anime: Anime | { error: string };
        if (source === 'anilist') {
            anime = await animeService.getAnimeById(id);
        } else {
            const ext = getExtension(source);
            anime = await animeService.getAnimeInfoExtension(ext, id)
        }
        return anime;
    } catch (err) {
        return { error: "Database error" };
    }
 }
 export async function getAnimeEpisodes(req: AnimeRequest, reply: FastifyReply) {
    try {
        const { id } = req.params;
        const source = req.query.source || 'anilist';
        const ext = getExtension(source);
        return await animeService.searchEpisodesInExtension(
            ext,
            source,
            id
        );
    } catch (err) {
        return { error: "Database error" };
    }
 }
 export async function getTrending(req: FastifyRequest, reply: FastifyReply) {
    try {
        const results = await animeService.getTrendingAnime();
        return { results };
    } catch (err) {
        return { results: [] };
    }
 }
 export async function getTopAiring(req: FastifyRequest, reply: FastifyReply) {
    try {
        const results = await animeService.getTopAiringAnime();
        return { results };
    } catch (err) {
        return { results: [] };
    }
 }
 export async function search(req: SearchRequest, reply: FastifyReply) {
    try {
        const query = req.query.q;
        const results = await animeService.searchAnimeLocal(query);
        if (results.length > 0) {
            return { results: results };
        }
    } catch (err) {
        return { results: [] };
    }
 }
 export async function searchInExtension(req: any, reply: FastifyReply) {
    try {
        const extensionName = req.params.extension;
        const query = req.query.q;
        const ext = getExtension(extensionName);
        if (!ext) return { results: [] };
        const results = await animeService.searchAnimeInExtension(ext, extensionName, query);
        return { results };
    } catch {
        return { results: [] };
    }
 }
 export async function getWatchStream(req: WatchStreamRequest, reply: FastifyReply) {
    try {
        const { animeId, episode, server, category, ext, source } = req.query;
        const extension = getExtension(ext);
        if (!extension) return { error: "Extension not found" };
        return await animeService.getStreamData(
            extension,
            episode,
            animeId,
            source,
            server,
            category
        );
    } catch (err) {
        const error = err as Error;
        return { error: error.message };
    }
 }
 export async function openInMPV(req: any, reply: any) {
    try {
        const { title, video, subtitles = [], chapters = [], animeId, episode, entrySource, token } = req.body;
        if (!video?.url) return { error: 'Missing video url' };
        const PORT = 54322;
        const proxyBase = `http://localhost:${PORT}/api/proxy`;
        const mediaTitle = title || 'Anime';
        const proxyVideo =
            `${proxyBase}?url=${encodeURIComponent(video.url)}` +
            `&referer=${encodeURIComponent(video.headers?.Referer ?? '')}` +
            `&origin=${encodeURIComponent(video.headers?.Origin ?? '')}` +
            `&userAgent=${encodeURIComponent(video.headers?.['User-Agent'] ?? '')}`;
        const proxySubs = subtitles.map((s: any) =>
            `${proxyBase}?url=${encodeURIComponent(s.src)}` +
            `&referer=${encodeURIComponent(video.headers?.Referer ?? '')}` +
            `&origin=${encodeURIComponent(video.headers?.Origin ?? '')}` +
            `&userAgent=${encodeURIComponent(video.headers?.['User-Agent'] ?? '')}`
        );
        const pipe = `\\\\.\\pipe\\mpv-${Date.now()}`;
        const { values } = loadConfig();
        const MPV_PATH =
            values.paths?.mpv || 'mpv';
        let chaptersArg: string[] = [];
        if (chapters.length) {
            chapters.sort((a: any, b: any) => a.startTime - b.startTime);
            const lines = [';FFMETADATA1'];
            for (let i = 0; i < chapters.length; i++) {
                const c = chapters[i];
                const start = Math.floor(c.startTime * 1000);
                const end = Math.floor(c.endTime * 1000);
                const title = (c.type || 'chapter').toUpperCase();
                lines.push(
                    `[CHAPTER]`, `TIMEBASE=1/1000`, `START=${start}`, `END=${end}`, `title=${title}`
                );
                if (i < chapters.length - 1) {
                    const nextStart = Math.floor(chapters[i + 1].startTime * 1000);
                    if (nextStart - end > 1000) {
                        lines.push(
                            `[CHAPTER]`, `TIMEBASE=1/1000`, `START=${end}`, `END=${nextStart}`, `title=Episode`
                        );
                    }
                } else {
                    lines.push(
                        `[CHAPTER]`, `TIMEBASE=1/1000`, `START=${end}`, `title=Episode`
                    );
                }
            }
            const chaptersFile = path.join(os.tmpdir(), `mpv-chapters-${Date.now()}.txt`);
            fs.writeFileSync(chaptersFile, lines.join('\n'));
            chaptersArg = [`--chapters-file=${chaptersFile}`];
        }
        if (!MPV_PATH) {
            return { error: 'MPV_NOT_CONFIGURED' };
        }
        spawn(
            MPV_PATH,
            [
                '--force-window=yes',
                '--idle=yes',
                '--keep-open=yes',
                '--no-terminal',
                '--hwdec=auto',
                `--force-media-title=Loading...`,
                `--input-ipc-server=${pipe}`,
                ...chaptersArg
            ],
            { stdio: 'ignore', windowsHide: true, detached: true }
        ).unref();
        await new Promise(r => setTimeout(r, 400));
        const socket = net.connect(pipe);
        let duration = 0;
        let currentTime = 0;
        let isPaused = false;
        let titleChanged = false;
        let progressUpdated = false;
        const sendRPC = (paused: boolean) => {
            let startTimestamp = undefined;
            let endTimestamp = undefined;
            if (!paused && duration > 0) {
                const now = Math.floor(Date.now() / 1000);
                const elapsed = Math.floor(currentTime);
                startTimestamp = now - elapsed;
                endTimestamp = startTimestamp + Math.floor(duration);
            }
            setActivity({
                details: mediaTitle,
                state: `Episode ${episode}`,
                mode: "watching",
                paused: paused,
                startTimestamp: startTimestamp,
                endTimestamp: endTimestamp
            })
        };
        const updateProgress = async () => {
            if (!token || progressUpdated) return;
            try {
                const decoded = jwt.verify(token, process.env.JWT_SECRET!) as any;
                const userId = decoded.id;
                await upsertListEntry({
                    user_id: userId,
                    entry_id: animeId,
                    source: entrySource,
                    entry_type: "ANIME",
                    status: "CURRENT",
                    progress: episode
                });
                progressUpdated = true;
            } catch (e) { console.error("[MPV] Progress update failed", e); }
        };
        const loadingTimeout = setTimeout(() => { if (!socket.destroyed) socket.end(); }, 15000);
        socket.on('data', (data) => {
            const chunks = data.toString().split('\n');
            for (const chunk of chunks) {
                if (!chunk.trim()) continue;
                try {
                    const json = JSON.parse(chunk);
                    if (json.event === 'property-change' && json.name === 'duration' && typeof json.data === 'number') {
                        duration = json.data;
                        if (!titleChanged) {
                            socket.write(JSON.stringify({ command: ['set_property', 'force-media-title', mediaTitle] }) + '\n');
                            sendRPC(false);
                            titleChanged = true;
                            clearTimeout(loadingTimeout);
                        }
                    }
                    if (json.event === 'property-change' && json.name === 'time-pos' && typeof json.data === 'number') {
                        currentTime = json.data;
                        if (duration > 0 && !progressUpdated && (currentTime / duration) >= 0.8) {
                            updateProgress();
                        }
                    }
                    if (json.event === 'property-change' && json.name === 'pause') {
                        isPaused = json.data === true;
                        sendRPC(isPaused);
                    }
                    if (json.event === 'seek') {
                        setTimeout(() => sendRPC(isPaused), 100);
                    }
                    if (json.event === 'end-file' || json.event === 'shutdown') {
                        sendRPC(true);
                        if (!socket.destroyed) socket.destroy();
                    }
                } catch (err) {}
            }
        });
        const commands = [
            { command: ['observe_property', 1, 'duration'] },
            { command: ['observe_property', 2, 'time-pos'] },
            { command: ['observe_property', 3, 'pause'] },
            { command: ['loadfile', proxyVideo, 'replace'] }
        ];
        commands.forEach(cmd => socket.write(JSON.stringify(cmd) + '\n'));
        subtitles.forEach((s: any, i: number) => {
            socket.write(JSON.stringify({
                command: [
                    'sub-add',
                    proxySubs[i],
                    'auto',
                    s.label || 'Subtitle',
                    s.srclang || ''
                ]
            }) + '\n');
        });
        return { success: true };
    } catch (e) {
        return { error: (e as Error).message };
    }
 }
--- a/desktop/src/api/anime/anime.routes.ts
+++ b/desktop/src/api/anime/anime.routes.ts
@@ -0,0 +1,15 @@
 import { FastifyInstance } from 'fastify';
 import * as controller from './anime.controller';
 async function animeRoutes(fastify: FastifyInstance) {
    fastify.get('/anime/:id', controller.getAnime);
    fastify.get('/anime/:id/:episodes', controller.getAnimeEpisodes);
    fastify.get('/trending', controller.getTrending);
    fastify.get('/top-airing', controller.getTopAiring);
    fastify.get('/search', controller.search);
    fastify.get('/search/:extension', controller.searchInExtension);
    fastify.get('/watch/stream', controller.getWatchStream);
    fastify.post('/watch/mpv', controller.openInMPV);
 }
 export default animeRoutes;
--- a/desktop/src/api/anime/anime.service.ts
+++ b/desktop/src/api/anime/anime.service.ts
@@ -3,7 +3,6 @@ import { queryAll, queryOne } from '../../shared/database';
 import {Anime, Episode, Extension, StreamData} from '../types';
 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
 const TTL = 60 * 60 * 6;
 const ANILIST_URL = "https://graphql.anilist.co";
@@ -42,17 +41,21 @@ const MEDIA_FIELDS = `
  siteUrl
  tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult }
  relations {
-    edges {
+      edges {
-      relationType
+        relationType
-      node {
+        node {
-        id
+          id
-        title { romaji }
+          title { romaji english }
-        type
+          type
-        format
+          format
-        status
+          status
          coverImage { medium large color }
          bannerImage
          season
          seasonYear
        }
      }
    }
  }
  studios {
    edges {
      isMain
@@ -71,14 +74,78 @@ const MEDIA_FIELDS = `
      mediaRecommendation {
        id
        title { romaji }
-        coverImage { medium }
+        coverImage { medium large}
        format
        type
      }
    }
  }
  characters(perPage: 12, sort: [ROLE, RELEVANCE]) {
    edges {
      role
      node {
        id
        name { full native }
        image { medium large }
      }
      voiceActors {
        id
        name { full }
        language
        image { medium }
      }
    }
  }
 `;
 export async function refreshTrendingAnime(): Promise<void> {
    const query = `
      query {
        Page(page: 1, perPage: 10) {
          media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
        }
      }
    `;
    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
    const now = Math.floor(Date.now() / 1000);
    await queryOne("DELETE FROM trending");
    let rank = 1;
    for (const anime of list) {
        await queryOne(
            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
            [rank++, anime.id, JSON.stringify(anime), now]
        );
    }
 }
 export async function refreshTopAiringAnime(): Promise<void> {
    const query = `
      query {
        Page(page: 1, perPage: 10) {
          media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
        }
      }
    `;
    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
    const now = Math.floor(Date.now() / 1000);
    await queryOne("DELETE FROM top_airing");
    let rank = 1;
    for (const anime of list) {
        await queryOne(
            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
            [rank++, anime.id, JSON.stringify(anime), now]
        );
    }
 }
 async function fetchAniList(query: string, variables: any) {
    const res = await fetch(ANILIST_URL, {
        method: "POST",
@@ -93,7 +160,19 @@ async function fetchAniList(query: string, variables: any) {
 export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
    const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
-    if (row) return JSON.parse(row.full_data);
+    if (row) {
        const cached = JSON.parse(row.full_data);
        if (cached?.characters?.edges?.length) {
            return cached;
        }
        await queryOne(
            "DELETE FROM anime WHERE id = ?",
            [id]
        );
    }
    const query = `
    query ($id: Int) {
@@ -119,76 +198,16 @@ export async function getAnimeById(id: string | number): Promise<Anime | { error
 export async function getTrendingAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM trending ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10"
    );
-
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
    if (rows.length) {
        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
        if (!expired) {
            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
        }
    }
    const query = `
    query {
      Page(page: 1, perPage: 10) {
        media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
      }
    }
  `;
    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
    const now = Math.floor(Date.now() / 1000);
    await queryOne("DELETE FROM trending");
    let rank = 1;
    for (const anime of list) {
        await queryOne(
            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
            [rank++, anime.id, JSON.stringify(anime), now]
        );
    }
    return list;
 }
 export async function getTopAiringAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM top_airing ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10"
    );
-
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
    if (rows.length) {
        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
        if (!expired) {
            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
        }
    }
    const query = `
    query {
      Page(page: 1, perPage: 10) {
        media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
      }
    }
  `;
    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
    const now = Math.floor(Date.now() / 1000);
    await queryOne("DELETE FROM top_airing");
    let rank = 1;
    for (const anime of list) {
        await queryOne(
            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
            [rank++, anime.id, JSON.stringify(anime), now]
        );
    }
    return list;
 }
 export async function searchAnimeLocal(query: string): Promise<Anime[]> {
--- a/desktop/src/api/books/books.controller.ts
+++ b/desktop/src/api/books/books.controller.ts
@@ -87,25 +87,28 @@ export async function getChapters(req: any, reply: FastifyReply) {
    try {
        const { id } = req.params;
        const source = req.query.source || 'anilist';
        const provider = req.query.provider;
        const isExternal = source !== 'anilist';
-        return await booksService.getChaptersForBook(id, isExternal);
+        return await booksService.getChaptersForBook(id, isExternal, provider);
-    } catch {
+    } catch (err) {
        console.error(err);
        return { chapters: [] };
    }
 }
 export async function getChapterContent(req: any, reply: FastifyReply) {
    try {
        const { bookId, chapter, provider } = req.params;
        const source = req.query.source || 'anilist';
        const lang = req.query.lang || 'none';
        const content = await booksService.getChapterContent(
            bookId,
            chapter,
            provider,
-            source
+            source,
            lang
        );
        return reply.send(content);
--- a/desktop/src/api/books/books.routes.ts
+++ b/desktop/src/api/books/books.routes.ts
--- a/desktop/src/api/books/books.service.ts
+++ b/desktop/src/api/books/books.service.ts
@@ -4,7 +4,6 @@ import { getAllExtensions, getBookExtensionsMap } from '../../shared/extensions'
 import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types';
 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
 const TTL = 60 * 60 * 6;
 const ANILIST_URL = "https://graphql.anilist.co";
 async function fetchAniList(query: string, variables: any) {
@@ -68,7 +67,19 @@ export async function getBookById(id: string | number): Promise<Book | { error:
    );
    if (row) {
-        return JSON.parse(row.full_data);
+        const parsed = JSON.parse(row.full_data);
        const hasRelationImages =
            parsed?.relations?.edges?.[0]?.node?.coverImage?.large;
        const hasCharacterImages =
            parsed?.characters?.nodes?.[0]?.image?.large;
        if (hasRelationImages && hasCharacterImages) {
            return parsed;
        }
        console.log(`[Book] Cache outdated for ID ${id}, refetching...`);
    }
    try {
@@ -83,8 +94,8 @@ export async function getBookById(id: string | number): Promise<Book | { error:
                trailer { id site thumbnail } updatedAt coverImage { extraLarge large medium color }
                bannerImage genres synonyms averageScore meanScore popularity isLocked trending favourites
                tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult userId }
-                relations { edges { relationType node { id title { romaji } } } }
+                relations { edges { relationType node { id title { romaji } coverImage { large medium } } } }
-                characters(page: 1, perPage: 10) { nodes { id name { full } } }
+                characters(page: 1, perPage: 10) { nodes { id name { full } image { large medium } } }
                studios { nodes { id name isAnimationStudio } }
                isAdult nextAiringEpisode { airingAt timeUntilAiring episode }
                externalLinks { url site } 
@@ -134,25 +145,14 @@ export async function getBookById(id: string | number): Promise<Book | { error:
    return { error: "Book not found" };
 }
-export async function getTrendingBooks(): Promise<Book[]> {
+export async function refreshTrendingBooks(): Promise<void> {
    const rows = await queryAll(
        "SELECT full_data, updated_at FROM trending_books ORDER BY rank ASC LIMIT 10"
    );
    if (rows.length) {
        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
        if (!expired) {
            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
        }
    }
    const query = `
-    query {
+      query {
-      Page(page: 1, perPage: 10) {
+        Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+          media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
        }
      }
-    }
+    `;
  `;
    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -167,30 +167,16 @@ export async function getTrendingBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
    return list;
 }
-
+export async function refreshPopularBooks(): Promise<void> {
 export async function getPopularBooks(): Promise<Book[]> {
    const rows = await queryAll(
        "SELECT full_data, updated_at FROM popular_books ORDER BY rank ASC LIMIT 10"
    );
    if (rows.length) {
        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
        if (!expired) {
            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
        }
    }
    const query = `
-    query {
+      query {
-      Page(page: 1, perPage: 10) {
+        Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
+          media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
        }
      }
-    }
+    `;
  `;
    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -205,10 +191,21 @@ export async function getPopularBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
    return list;
 }
 export async function getTrendingBooks(): Promise<Book[]> {
    const rows = await queryAll(
        "SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10"
    );
    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }
 export async function getPopularBooks(): Promise<Book[]> {
    const rows = await queryAll(
        "SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10"
    );
    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }
 export async function searchBooksLocal(query: string): Promise<Book[]> {
    if (!query || query.length < 2) {
@@ -421,7 +418,8 @@ async function searchChaptersInExtension(ext: Extension, name: string, searchTit
            title: ch.title,
            date: ch.releaseDate,
            provider: name,
-            index: ch.index
+            index: ch.index,
            language: ch.language ?? null,
        }));
        await setCache(cacheKey, result, CACHE_TTL_MS);
@@ -478,7 +476,7 @@ export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?
    };
 }
-export async function getChapterContent(bookId: string, chapterIndex: string, providerName: string, source: string): Promise<ChapterContent> {
+export async function getChapterContent(bookId: string, chapterId: string, providerName: string, source: string, lang: string): Promise<ChapterContent> {
    const extensions = getAllExtensions();
    const ext = extensions.get(providerName);
@@ -486,14 +484,14 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
        throw new Error("Provider not found");
    }
-    const contentCacheKey = `content:${providerName}:${source}:${bookId}:${chapterIndex}`;
+    const contentCacheKey = `content:${providerName}:${source}:${lang}:${bookId}:${chapterId}`;
    const cachedContent = await getCache(contentCacheKey);
    if (cachedContent) {
        const isExpired = Date.now() - cachedContent.created_at > CACHE_TTL_MS;
        if (!isExpired) {
-            console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterIndex}`);
+            console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterId}`);
            try {
                return JSON.parse(cachedContent.result) as ChapterContent;
            } catch (e) {
@@ -501,33 +499,14 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
            }
        } else {
-            console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterIndex}`);
+            console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterId}`);
        }
    }
-    const isExternal = source !== 'anilist';
+    const selectedChapter: any = {
-    const chapterList = await getChaptersForBook(bookId, isExternal, providerName);
+        id: chapterId,
-
+        provider: providerName
-    if (!chapterList?.chapters || chapterList.chapters.length === 0) {
+    };
        throw new Error("Chapters not found");
    }
    const providerChapters = chapterList.chapters.filter(c => c.provider === providerName);
    const index = parseInt(chapterIndex, 10);
    if (Number.isNaN(index)) {
        throw new Error("Invalid chapter index");
    }
    if (!providerChapters[index]) {
        throw new Error("Chapter index out of range");
    }
    const selectedChapter = providerChapters[index];
    const chapterId = selectedChapter.id;
    const chapterTitle = selectedChapter.title || null;
    const chapterNumber = typeof selectedChapter.number === 'number' ? selectedChapter.number : index;
    try {
        if (!ext.findChapterPages) {
@@ -537,12 +516,13 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
        let contentResult: ChapterContent;
        if (ext.mediaType === "manga") {
            // Usamos el ID directamente
            const pages = await ext.findChapterPages(chapterId);
            contentResult = {
                type: "manga",
-                chapterId,
+                chapterId: selectedChapter.id,
-                title: chapterTitle,
+                title: selectedChapter.title,
-                number: chapterNumber,
+                number: selectedChapter.number,
                provider: providerName,
                pages
            };
@@ -550,9 +530,9 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
            const content = await ext.findChapterPages(chapterId);
            contentResult = {
                type: "ln",
-                chapterId,
+                chapterId: selectedChapter.id,
-                title: chapterTitle,
+                title: selectedChapter.title,
-                number: chapterNumber,
+                number: selectedChapter.number,
                provider: providerName,
                content
            };
@@ -561,7 +541,6 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
        }
        await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
        return contentResult;
    } catch (err) {
--- a/desktop/src/api/config/config.controller.ts
+++ b/desktop/src/api/config/config.controller.ts
@@ -0,0 +1,53 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import { getConfig, setConfig } from '../../shared/config';
 export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
    try {
        const { values, schema } = getConfig();
        return { values, schema };
    } catch {
        return { error: "Error loading config" };
    }
 }
 export async function getConfigSection(
    req: FastifyRequest<{ Params: { section: string } }>,
    reply: FastifyReply
 ) {
    try {
        const { section } = req.params;
        const { values } = getConfig();
        if (values[section] === undefined) {
            return { error: "Section not found" };
        }
        return { [section]: values[section] };
    } catch {
        return { error: "Error loading config section" };
    }
 }
 export async function updateConfig(
    req: FastifyRequest<{ Body: any }>,
    reply: FastifyReply
 ) {
    try {
        return setConfig(req.body); // schema nunca se toca
    } catch {
        return { error: "Error updating config" };
    }
 }
 export async function updateConfigSection(
    req: FastifyRequest<{ Params: { section: string }, Body: any }>,
    reply: FastifyReply
 ) {
    try {
        const { section } = req.params;
        const updatedValues = setConfig({ [section]: req.body });
        return { [section]: updatedValues[section] };
    } catch {
        return { error: "Error updating config section" };
    }
 }
--- a/desktop/src/api/config/config.routes.ts
+++ b/desktop/src/api/config/config.routes.ts
@@ -0,0 +1,11 @@
 import { FastifyInstance } from 'fastify';
 import * as controller from './config.controller';
 async function configRoutes(fastify: FastifyInstance) {
    fastify.get('/config', controller.getFullConfig);
    fastify.get('/config/:section', controller.getConfigSection);
    fastify.post('/config', controller.updateConfig);
    fastify.post('/config/:section', controller.updateConfigSection);
 }
 export default configRoutes;
--- a/desktop/src/api/extensions/extensions.controller.ts
+++ b/desktop/src/api/extensions/extensions.controller.ts
@@ -0,0 +1,155 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getMangaExtensionsMap, getNovelExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
 import { ExtensionNameRequest } from '../types';
 const TYPE_MAP: Record<string, string> = {
    'anime-board': 'anime',
    'image-board': 'image',
    'book-board': 'book',
 };
 function extractProp(source: string, prop: string): string | null {
    const m = source.match(new RegExp(`this\\.${prop}\\s*=\\s*["']([^"']+)["']`));
    return m ? m[1] : null;
 }
 function isNewer(remote: string, local?: string | null) {
    if (!local) return true;
    return remote !== local;
 }
 export async function updateExtensions(req: any, reply: FastifyReply) {
    const updated: string[] = [];
    for (const name of getExtensionsList()) {
        const ext = getExtension(name);
        if (!ext) continue;
        const type = ext.type;
        if (!TYPE_MAP[type]) continue;
        const fileName = ext.__fileName;
        const remoteUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${TYPE_MAP[type]}/${fileName}`;
        let remoteSrc: string;
        try {
            const res = await fetch(remoteUrl);
            if (!res.ok) continue;
            remoteSrc = await res.text();
        } catch {
            continue;
        }
        const remoteVersion = extractProp(remoteSrc, 'version');
        const localVersion = ext.version ?? null;
        if (!remoteVersion) continue;
        if (isNewer(remoteVersion, localVersion)) {
            await saveExtensionFile(fileName, remoteUrl);
            updated.push(name);
        }
    }
    return { updated };
 }
 export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
    return { extensions: getExtensionsList() };
 }
 export async function getAnimeExtensions(req: FastifyRequest, reply: FastifyReply) {
    const animeExtensions = getAnimeExtensionsMap();
    return { extensions: Array.from(animeExtensions.keys()) };
 }
 export async function getBookExtensions(req: FastifyRequest, reply: FastifyReply) {
    const bookExtensions = getBookExtensionsMap();
    return { extensions: Array.from(bookExtensions.keys()) };
 }
 export async function getMangaExtensions(req: FastifyRequest, reply: FastifyReply) {
    const bookExtensions = getMangaExtensionsMap();
    return { extensions: Array.from(bookExtensions.keys()) };
 }
 export async function getNovelExtensions(req: FastifyRequest, reply: FastifyReply) {
    const bookExtensions = getNovelExtensionsMap();
    return { extensions: Array.from(bookExtensions.keys()) };
 }
 export async function getGalleryExtensions(req: FastifyRequest, reply: FastifyReply) {
    const galleryExtensions = getGalleryExtensionsMap();
    return { extensions: Array.from(galleryExtensions.keys()) };
 }
 export async function getExtensionSettings(req: ExtensionNameRequest, reply: FastifyReply) {
    const { name } = req.params;
    const ext = getExtension(name);
    if (!ext) {
        return { error: "Extension not found" };
    }
    if (!ext.getSettings) {
        return { episodeServers: ["default"], supportsDub: false };
    }
    return ext.getSettings();
 }
 export async function installExtension(req: any, reply: FastifyReply) {
    const { url } = req.body;
    if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
        return reply.code(400).send({ error: "Invalid extension URL provided" });
    }
    try {
        const fileName = url.split('/').pop();
        if (!fileName) {
            return reply.code(400).send({ error: "Could not determine file name from URL" });
        }
        await saveExtensionFile(fileName, url);
        req.server.log.info(`Extension installed: ${fileName}`);
        return reply.code(200).send({
            success: true,
            message: `Extension ${fileName} installed successfully.`,
        });
    } catch (error) {
        req.server.log.error(`Failed to install extension from ${url}:`, error);
        return reply.code(500).send({
            success: false,
            error: "Failed to install extension.",
        });
    }
 }
 export async function uninstallExtension(req: any, reply: FastifyReply) {
    const { fileName } = req.body;
    if (!fileName || !fileName.endsWith('.js')) {
        return reply.code(400).send({ error: "Invalid extension fileName provided" });
    }
    try {
        await deleteExtensionFile(fileName);
        req.server.log.info(`Extension uninstalled: ${fileName}`);
        return reply.code(200).send({ success: true, message: `Extension ${fileName} uninstalled successfully.` });
    } catch (error) {
        // @ts-ignore
        if (error.code === 'ENOENT') {
            return reply.code(200).send({ success: true, message: `Extension ${fileName} already uninstalled (file not found).` });
        }
        req.server.log.error(`Failed to uninstall extension ${fileName}:`, error);
        return reply.code(500).send({ success: false, error: `Failed to uninstall extension ${fileName}.` });
    }
 }
--- a/desktop/src/api/extensions/extensions.routes.ts
+++ b/desktop/src/api/extensions/extensions.routes.ts
@@ -4,7 +4,10 @@ import * as controller from './extensions.controller';
 async function extensionsRoutes(fastify: FastifyInstance) {
    fastify.get('/extensions', controller.getExtensions);
    fastify.get('/extensions/anime', controller.getAnimeExtensions);
    fastify.post('/extensions/update', controller.updateExtensions);
    fastify.get('/extensions/book', controller.getBookExtensions);
    fastify.get('/extensions/manga', controller.getMangaExtensions);
    fastify.get('/extensions/novel', controller.getNovelExtensions);
    fastify.get('/extensions/gallery', controller.getGalleryExtensions);
    fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
    fastify.post('/extensions/install', controller.installExtension);
--- a/desktop/src/api/gallery/gallery.controller.ts
+++ b/desktop/src/api/gallery/gallery.controller.ts
--- a/desktop/src/api/gallery/gallery.routes.ts
+++ b/desktop/src/api/gallery/gallery.routes.ts
--- a/desktop/src/api/gallery/gallery.service.ts
+++ b/desktop/src/api/gallery/gallery.service.ts
--- a/desktop/src/api/list/list.controller.ts
+++ b/desktop/src/api/list/list.controller.ts
--- a/desktop/src/api/list/list.routes.ts
+++ b/desktop/src/api/list/list.routes.ts
--- a/desktop/src/api/list/list.service.ts
+++ b/desktop/src/api/list/list.service.ts
--- a/desktop/src/api/local/download.service.ts
+++ b/desktop/src/api/local/download.service.ts
@@ -0,0 +1,478 @@
 import { getConfig as loadConfig } from '../../shared/config';
 import { queryOne, queryAll, run } from '../../shared/database';
 import { getAnimeById } from '../anime/anime.service';
 import { getBookById } from '../books/books.service';
 import crypto from 'crypto';
 import fs from 'fs';
 import path from 'path';
 import AdmZip from 'adm-zip';
 import { spawn } from 'child_process';
 const { values } = loadConfig();
 const FFMPEG_PATH =
    values.paths?.ffmpeg || 'ffmpeg';
 type AnimeDownloadParams = {
    anilistId: number;
    episodeNumber: number;
    streamUrl: string;
    headers?: Record<string, string>;
    quality?: string;
    subtitles?: Array<{ language: string; url: string }>;
    chapters?: Array<{ title: string; start_time: number; end_time: number }>;
 };
 type BookDownloadParams = {
    anilistId: number;
    chapterNumber: number;
    format: 'manga' | 'novel';
    content?: string;
    images?: Array<{ index: number; url: string }>;
 };
 async function ensureDirectory(dirPath: string) {
    if (!fs.existsSync(dirPath)) {
        fs.mkdirSync(dirPath, { recursive: true });
    }
 }
 async function downloadFile(url: string, outputPath: string): Promise<void> {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP_${res.status}`);
    await ensureDirectory(path.dirname(outputPath));
    const buf = Buffer.from(await res.arrayBuffer());
    fs.writeFileSync(outputPath, buf);
 }
 async function getOrCreateEntry(
    anilistId: number,
    type: 'anime' | 'manga' | 'novels'
 ): Promise<{ id: string; path: string; folderName: string }> {
    const existing = await queryOne(
        `SELECT id, path, folder_name FROM local_entries
         WHERE matched_id = ? AND matched_source = 'anilist' AND type = ?`,
        [anilistId, type],
        'local_library'
    );
    if (existing) {
        return {
            id: existing.id,
            path: existing.path,
            folderName: existing.folder_name
        };
    }
    const metadata: any = type === 'anime'
        ? await getAnimeById(anilistId)
        : await getBookById(anilistId);
    if (!metadata) {
        throw new Error('METADATA_NOT_FOUND');
    }
    const { values } = loadConfig();
    const basePath = values.library?.[type];
    if (!basePath) {
        throw new Error(`NO_LIBRARY_PATH_FOR_${type.toUpperCase()}`);
    }
    const title = metadata.title?.romaji || metadata.title?.english || `ID_${anilistId}`;
    const safeName = title.replace(/[<>:"/\\|?*]/g, '_');
    const folderPath = path.join(basePath, safeName);
    await ensureDirectory(folderPath);
    const entryId = crypto
        .createHash('sha1')
        .update(`anilist:${type}:${anilistId}`)
        .digest('hex');
    const now = Date.now();
    await run(
        `INSERT OR IGNORE INTO local_entries
   (id, type, path, folder_name, matched_id, matched_source, last_scan)
   VALUES (?, ?, ?, ?, ?, 'anilist', ?)`,
        [entryId, type, folderPath, safeName, anilistId, now],
        'local_library'
    );
    return {
        id: entryId,
        path: folderPath,
        folderName: safeName
    };
 }
 export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
    const { anilistId, episodeNumber, streamUrl, subtitles, chapters } = params;
    const entry = await getOrCreateEntry(anilistId, 'anime');
    const exists = await queryOne(
        `SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
        [entry.id, episodeNumber],
        'local_library'
    );
    if (exists) return { status: 'ALREADY_EXISTS', entry_id: entry.id, episode: episodeNumber };
    const outputPath = path.join(entry.path, `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`);
    const tempDir = path.join(entry.path, '.temp');
    await ensureDirectory(tempDir);
    try {
        let videoInput = streamUrl;
        let audioInputs: string[] = [];
        const isMaster = (params as any).is_master === true;
        if (isMaster) {
            const variant = (params as any).variant;
            const audios = (params as any).audio;
            if (!variant || !variant.playlist_url) {
                throw new Error('VARIANT_REQUIRED_FOR_MASTER');
            }
            videoInput = variant.playlist_url;
            if (audios && audios.length > 0) {
                audioInputs = audios.map((a: any) => a.playlist_url);
            }
        }
        const subFiles: string[] = [];
        if (subtitles?.length) {
            for (let i = 0; i < subtitles.length; i++) {
                const ext = subtitles[i].url.endsWith('.vtt') ? 'vtt' : 'srt';
                const p = path.join(tempDir, `sub_${i}.${ext}`);
                await downloadFile(subtitles[i].url, p);
                subFiles.push(p);
            }
        }
        const args = [
            '-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
            '-allowed_extensions', 'ALL',
            '-f', 'hls',
            '-extension_picky', '0',
            '-i', videoInput
        ];
        audioInputs.forEach(audioUrl => {
            args.push(
                '-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
                '-allowed_extensions', 'ALL',
                '-f', 'hls',
                '-extension_picky', '0',
                '-i', audioUrl
            );
        });
        subFiles.forEach(f => args.push('-i', f));
        let chaptersInputIndex = -1;
        if (chapters?.length) {
            const meta = path.join(tempDir, 'chapters.txt');
            const sorted = [...chapters].sort((a, b) => a.start_time - b.start_time);
            const lines: string[] = [';FFMETADATA1'];
            for (let i = 0; i < sorted.length; i++) {
                const c = sorted[i];
                const start = Math.floor(c.start_time * 1000);
                const end = Math.floor(c.end_time * 1000);
                const title = (c.title || 'chapter').toUpperCase();
                lines.push(
                    '[CHAPTER]',
                    'TIMEBASE=1/1000',
                    `START=${start}`,
                    `END=${end}`,
                    `title=${title}`
                );
                if (i < sorted.length - 1) {
                    const nextStart = Math.floor(sorted[i + 1].start_time * 1000);
                    if (nextStart - end > 1000) {
                        lines.push(
                            '[CHAPTER]',
                            'TIMEBASE=1/1000',
                            `START=${end}`,
                            `END=${nextStart}`,
                            'title=Episode'
                        );
                    }
                } else {
                    lines.push(
                        '[CHAPTER]',
                        'TIMEBASE=1/1000',
                        `START=${end}`,
                        'title=Episode'
                    );
                }
            }
            fs.writeFileSync(meta, lines.join('\n'));
            args.push('-i', meta);
            // índice correcto del metadata input
            chaptersInputIndex = 1 + audioInputs.length + subFiles.length;
        }
        args.push('-map', '0:v:0');
        if (audioInputs.length > 0) {
            audioInputs.forEach((_, i) => {
                args.push('-map', `${i + 1}:a:0`);
                const audioInfo = (params as any).audio?.[i];
                if (audioInfo) {
                    const audioStreamIndex = i;
                    if (audioInfo.language) {
                        args.push(`-metadata:s:a:${audioStreamIndex}`, `language=${audioInfo.language}`);
                    }
                    if (audioInfo.name) {
                        args.push(`-metadata:s:a:${audioStreamIndex}`, `title=${audioInfo.name}`);
                    }
                }
            });
        } else {
            args.push('-map', '0:a:0?');
        }
        const subtitleStartIndex = 1 + audioInputs.length;
        subFiles.forEach((_, i) => {
            args.push('-map', `${subtitleStartIndex + i}:0`);
            args.push(`-metadata:s:s:${i}`, `language=${subtitles![i].language}`);
        });
        if (chaptersInputIndex >= 0) {
            args.push('-map_metadata', `${chaptersInputIndex}`);
        }
        args.push('-c:v', 'copy');
        args.push('-c:a', 'copy');
        if (subFiles.length) {
            args.push('-c:s', 'srt');
        }
        args.push('-y');
        args.push(outputPath);
        await new Promise((resolve, reject) => {
            console.log('🎬 Iniciando descarga con FFmpeg...');
            console.log('📹 Video:', videoInput);
            if (audioInputs.length > 0) {
                console.log('🔊 Audio tracks:', audioInputs.length);
            }
            console.log('💾 Output:', outputPath);
            console.log('Args:', args.join(' '));
            const ff = spawn(FFMPEG_PATH, args, {
                windowsHide: true,
                stdio: ['ignore', 'pipe', 'pipe']
            });
            let lastProgress = '';
            ff.stdout.on('data', (data) => {
                const text = data.toString();
                console.log('[stdout]', text);
            });
            ff.stderr.on('data', (data) => {
                const text = data.toString();
                if (text.includes('time=') || text.includes('speed=')) {
                    const timeMatch = text.match(/time=(\S+)/);
                    const speedMatch = text.match(/speed=(\S+)/);
                    if (timeMatch || speedMatch) {
                        lastProgress = `⏱️  Time: ${timeMatch?.[1] || 'N/A'} | Speed: ${speedMatch?.[1] || 'N/A'}`;
                        console.log(lastProgress);
                    }
                } else {
                    console.log('[ffmpeg]', text);
                }
            });
            ff.on('error', (error) => {
                console.error('❌ Error al iniciar FFmpeg:', error);
                reject(error);
            });
            ff.on('close', (code) => {
                if (code === 0) {
                    console.log('✅ Descarga completada exitosamente');
                    resolve(true);
                } else {
                    console.error(`❌ FFmpeg terminó con código: ${code}`);
                    reject(new Error(`FFmpeg exited with code ${code}`));
                }
            });
        });
        fs.rmSync(tempDir, { recursive: true, force: true });
        const fileId = crypto.randomUUID();
        await run(
            `INSERT INTO local_files (id, entry_id, file_path, unit_number)
             VALUES (?, ?, ?, ?)`,
            [fileId, entry.id, outputPath, episodeNumber],
            'local_library'
        );
        await run(
            `UPDATE local_entries SET last_scan = ? WHERE id = ?`,
            [Date.now(), entry.id],
            'local_library'
        );
        return {
            status: 'SUCCESS',
            entry_id: entry.id,
            file_id: fileId,
            episode: episodeNumber,
            path: outputPath
        };
    } catch (e: any) {
        fs.rmSync(tempDir, { recursive: true, force: true });
        if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath);
        const err = new Error('DOWNLOAD_FAILED');
        (err as any).details = e.message;
        throw err;
    }
 }
 export async function downloadBookChapter(params: BookDownloadParams) {
    const { anilistId, chapterNumber, format, content, images } = params;
    const type = format === 'manga' ? 'manga' : 'novels';
    const entry = await getOrCreateEntry(anilistId, type);
    const existingFile = await queryOne(
        `SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
        [entry.id, chapterNumber],
        'local_library'
    );
    if (existingFile) {
        return {
            status: 'ALREADY_EXISTS',
            message: `Chapter ${chapterNumber} already exists`,
            entry_id: entry.id,
            chapter: chapterNumber
        };
    }
    try {
        let outputPath: string;
        let fileId: string;
        if (format === 'manga') {
            const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.cbz`;
            outputPath = path.join(entry.path, chapterName);
            const zip = new AdmZip();
            const sortedImages = images!.sort((a, b) => a.index - b.index);
            for (const img of sortedImages) {
                const res = await fetch(img.url);
                if (!res.ok) throw new Error(`HTTP_${res.status}`);
                const buf = Buffer.from(await res.arrayBuffer());
                const ext = path.extname(new URL(img.url).pathname) || '.jpg';
                const filename = `${img.index.toString().padStart(4, '0')}${ext}`;
                zip.addFile(filename, buf);
            }
            zip.writeZip(outputPath);
        } else {
            const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.epub`;
            outputPath = path.join(entry.path, chapterName);
            const zip = new AdmZip();
            zip.addFile('mimetype', Buffer.from('application/epub+zip'), '', 0);
            const containerXml = `<?xml version="1.0" encoding="UTF-8"?>
 <container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
  <rootfiles>
    <rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
  </rootfiles>
 </container>`;
            zip.addFile('META-INF/container.xml', Buffer.from(containerXml));
            const contentOpf = `<?xml version="1.0" encoding="UTF-8"?>
 <package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="bookid">
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
    <dc:title>Chapter ${chapterNumber}</dc:title>
    <dc:identifier id="bookid">chapter-${anilistId}-${chapterNumber}</dc:identifier>
    <dc:language>en</dc:language>
  </metadata>
  <manifest>
    <item id="chapter" href="chapter.xhtml" media-type="application/xhtml+xml"/>
  </manifest>
  <spine>
    <itemref idref="chapter"/>
  </spine>
 </package>`;
            zip.addFile('OEBPS/content.opf', Buffer.from(contentOpf));
            const chapterXhtml = `<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Chapter ${chapterNumber}</title>
 </head>
 <body>
 ${content}
 </body>
 </html>`;
            zip.addFile('OEBPS/chapter.xhtml', Buffer.from(chapterXhtml));
            zip.writeZip(outputPath);
        }
        fileId = crypto.randomUUID();
        await run(
            `INSERT INTO local_files (id, entry_id, file_path, unit_number)
             VALUES (?, ?, ?, ?)`,
            [fileId, entry.id, outputPath, chapterNumber],
            'local_library'
        );
        await run(
            `UPDATE local_entries SET last_scan = ? WHERE id = ?`,
            [Date.now(), entry.id],
            'local_library'
        );
        return {
            status: 'SUCCESS',
            entry_id: entry.id,
            file_id: fileId,
            chapter: chapterNumber,
            format,
            path: outputPath
        };
    } catch (error: any) {
        const err = new Error('DOWNLOAD_FAILED');
        (err as any).details = error.message;
        throw err;
    }
 }
--- a/desktop/src/api/local/local.controller.ts
+++ b/desktop/src/api/local/local.controller.ts
@@ -0,0 +1,412 @@
 import {FastifyReply, FastifyRequest} from 'fastify';
 import fs from 'fs';
 import * as service from './local.service';
 import * as downloadService from './download.service';
 type ScanQuery = {
    mode?: 'full' | 'incremental';
 };
 type Params = {
    type: 'anime' | 'manga' | 'novels';
    id?: string;
 };
 type MatchBody = {
    source: 'anilist';
    matched_id: number | null;
 };
 type DownloadAnimeBody =
    | {
    anilist_id: number;
    episode_number: number;
    stream_url: string; // media playlist FINAL
    is_master?: false;
    subtitles?: {
        language: string;
        url: string;
    }[];
    chapters?: {
        title: string;
        start_time: number;
        end_time: number;
    }[];
 }
    | {
    anilist_id: number;
    episode_number: number;
    stream_url: string; // master.m3u8
    is_master: true;
    variant: {
        resolution: string;
        bandwidth?: number;
        codecs?: string;
        playlist_url: string;
    };
    audio?: {
        group?: string;
        language?: string;
        name?: string;
        playlist_url: string;
    }[];
    subtitles?: {
        language: string;
        url: string;
    }[];
    chapters?: {
        title: string;
        start_time: number;
        end_time: number;
    }[];
 };
 type DownloadBookBody = {
    anilist_id: number;
    chapter_number: number;
    format: 'manga' | 'novel';
    content?: string;
    images?: Array<{
        index: number;
        url: string;
    }>;
 };
 export async function scanLibrary(request: FastifyRequest<{ Querystring: ScanQuery }>, reply: FastifyReply) {
    try {
        const mode = request.query.mode || 'incremental';
        return await service.performLibraryScan(mode);
    } catch (err: any) {
        if (err.message === 'NO_LIBRARY_CONFIGURED') {
            return reply.status(400).send({ error: 'NO_LIBRARY_CONFIGURED' });
        }
        return reply.status(500).send({ error: 'FAILED_TO_SCAN_LIBRARY' });
    }
 }
 export async function listEntries(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
    try {
        const { type } = request.params;
        const entries = await service.getEntriesByType(type);
        return entries;
    } catch {
        return reply.status(500).send({ error: 'FAILED_TO_LIST_ENTRIES' });
    }
 }
 export async function getEntry(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
    try {
        const { type, id } = request.params as { type: string, id: string };
        const entry = await service.getEntryDetails(type, id);
        if (!entry) {
            return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
        }
        return entry;
    } catch {
        return reply.status(500).send({ error: 'FAILED_TO_GET_ENTRY' });
    }
 }
 export async function streamUnit(request: FastifyRequest, reply: FastifyReply) {
    const { id, unit } = request.params as any;
    const fileInfo = await service.getFileForStreaming(id, unit);
    if (!fileInfo) {
        return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
    }
    const { filePath, stat } = fileInfo;
    const range = request.headers.range;
    if (!range) {
        reply
            .header('Content-Length', stat.size)
            .header('Content-Type', 'video/mp4');
        return fs.createReadStream(filePath);
    }
    const parts = range.replace(/bytes=/, '').split('-');
    const start = Number(parts[0]);
    const end = parts[1] ? Number(parts[1]) : stat.size - 1;
    if (
        Number.isNaN(start) ||
        Number.isNaN(end) ||
        start < 0 ||
        start >= stat.size ||
        end < start ||
        end >= stat.size
    ) {
        return reply.status(416).send({ error: 'INVALID_RANGE' });
    }
    const contentLength = end - start + 1;
    reply
        .status(206)
        .header('Content-Range', `bytes ${start}-${end}/${stat.size}`)
        .header('Accept-Ranges', 'bytes')
        .header('Content-Length', contentLength)
        .header('Content-Type', 'video/mp4');
    return fs.createReadStream(filePath, { start, end });
 }
 export async function matchEntry(
    request: FastifyRequest<{ Body: MatchBody }>,
    reply: FastifyReply
 ) {
    const { id, type } = request.params as any;
    const { source, matched_id } = request.body;
    const result = await service.updateEntryMatch(id, type, source, matched_id);
    if (!result) {
        return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
    }
    return result;
 }
 export async function getUnits(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
    try {
        const { id } = request.params as { id: string };
        const units = await service.getEntryUnits(id);
        if (!units) {
            return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
        }
        return units;
    } catch (err) {
        console.error('Error getting units:', err);
        return reply.status(500).send({ error: 'FAILED_TO_GET_UNITS' });
    }
 }
 export async function getManifest(request: FastifyRequest, reply: FastifyReply) {
    const { unitId } = request.params as any;
    try {
        const manifest = await service.getUnitManifest(unitId);
        if (!manifest) {
            return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
        }
        return manifest;
    } catch (err: any) {
        if (err.message === 'UNSUPPORTED_FORMAT') {
            return reply.status(400).send({ error: 'UNSUPPORTED_FORMAT' });
        }
        return reply.status(500).send({ error: 'FAILED_TO_GET_MANIFEST' });
    }
 }
 export async function getPage(request: FastifyRequest, reply: FastifyReply) {
    const { unitId, resId } = request.params as any;
    const resource = await service.getUnitResource(unitId, resId);
    if (!resource) {
        return reply.status(404).send();
    }
    if (resource.type === 'image') {
        if (resource.data) {
            return reply
                .header('Content-Type', 'image/jpeg')
                .send(resource.data);
        }
        if (resource.path && resource.size) {
            reply
                .header('Content-Length', resource.size)
                .header('Content-Type', 'image/jpeg');
            return fs.createReadStream(resource.path);
        }
    }
    if (resource.type === 'html') {
        return reply
            .header('Content-Type', 'text/html; charset=utf-8')
            .send(resource.data);
    }
    return reply.status(400).send();
 }
 function buildProxyUrl(rawUrl: string, headers: Record<string, string>) {
    const params = new URLSearchParams({ url: rawUrl });
    for (const [key, value] of Object.entries(headers)) {
        params.set(key.toLowerCase(), value);
    }
    return `http://localhost:54322/api/proxy?${params.toString()}`;
 }
 export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnimeBody }>, reply: FastifyReply) {
    try {
        const {
            anilist_id,
            episode_number,
            stream_url,
            is_master,
            subtitles,
            chapters
        } = request.body;
        const clientHeaders = (request.body as any).headers || {};
        // Validación básica
        if (!anilist_id || !episode_number || !stream_url) {
            return reply.status(400).send({
                error: 'MISSING_REQUIRED_FIELDS',
                required: ['anilist_id', 'episode_number', 'stream_url']
            });
        }
        // Proxy del stream URL principal
        const proxyUrl = buildProxyUrl(stream_url, clientHeaders);
        console.log('Stream URL:', proxyUrl);
        // Proxy de subtítulos
        const proxiedSubs = subtitles?.map(sub => ({
            ...sub,
            url: buildProxyUrl(sub.url, clientHeaders)
        }));
        // Preparar parámetros base
        const downloadParams: any = {
            anilistId: anilist_id,
            episodeNumber: episode_number,
            streamUrl: proxyUrl,
            subtitles: proxiedSubs,
            chapters
        };
        // Si es master playlist, agregar campos adicionales
        if (is_master === true) {
            const { variant, audio } = request.body as any;
            if (!variant || !variant.playlist_url) {
                return reply.status(400).send({
                    error: 'MISSING_VARIANT',
                    message: 'variant with playlist_url is required when is_master is true'
                });
            }
            downloadParams.is_master = true;
            // Proxy del variant playlist
            downloadParams.variant = {
                ...variant,
                playlist_url: buildProxyUrl(variant.playlist_url, clientHeaders)
            };
            // Proxy de audio tracks si existen
            if (audio && audio.length > 0) {
                downloadParams.audio = audio.map((a: any) => ({
                    ...a,
                    playlist_url: buildProxyUrl(a.playlist_url, clientHeaders)
                }));
            }
            console.log('Master playlist detected');
            console.log('Variant:', downloadParams.variant.resolution);
            console.log('Audio tracks:', downloadParams.audio?.length || 0);
        }
        const result = await downloadService.downloadAnimeEpisode(downloadParams);
        if (result.status === 'ALREADY_EXISTS') {
            return reply.status(409).send(result);
        }
        return result;
    } catch (err: any) {
        console.error('Error downloading anime:', err);
        if (err.message === 'METADATA_NOT_FOUND') {
            return reply.status(404).send({ error: 'ANIME_NOT_FOUND_IN_ANILIST' });
        }
        if (err.message === 'VARIANT_REQUIRED_FOR_MASTER') {
            return reply.status(400).send({ error: 'VARIANT_REQUIRED_FOR_MASTER' });
        }
        if (err.message === 'DOWNLOAD_FAILED') {
            return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
        }
        return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_ANIME' });
    }
 }
 export async function downloadBook(request: FastifyRequest<{ Body: DownloadBookBody }>, reply: FastifyReply) {
    try {
        const {
            anilist_id,
            chapter_number,
            format,
            content,
            images
        } = request.body;
        if (!anilist_id || !chapter_number || !format) {
            return reply.status(400).send({
                error: 'MISSING_REQUIRED_FIELDS',
                required: ['anilist_id', 'chapter_number', 'format']
            });
        }
        if (format === 'novel' && !content) {
            return reply.status(400).send({
                error: 'MISSING_CONTENT',
                message: 'content field is required for novels'
            });
        }
        if (format === 'manga' && (!images || images.length === 0)) {
            return reply.status(400).send({
                error: 'MISSING_IMAGES',
                message: 'images field is required for manga'
            });
        }
        const result = await downloadService.downloadBookChapter({
            anilistId: anilist_id,
            chapterNumber: chapter_number,
            format,
            content,
            images
        });
        if (result.status === 'ALREADY_EXISTS') {
            return reply.status(409).send(result);
        }
        return result;
    } catch (err: any) {
        console.error('Error downloading book:', err);
        if (err.message === 'METADATA_NOT_FOUND') {
            return reply.status(404).send({ error: 'BOOK_NOT_FOUND_IN_ANILIST' });
        }
        if (err.message === 'DOWNLOAD_FAILED') {
            return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
        }
        return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_BOOK' });
    }
 }
--- a/desktop/src/api/local/local.routes.ts
+++ b/desktop/src/api/local/local.routes.ts
@@ -0,0 +1,17 @@
 import { FastifyInstance } from 'fastify';
 import * as controller from './local.controller';
 async function localRoutes(fastify: FastifyInstance) {
    fastify.post('/library/scan', controller.scanLibrary);
    fastify.get('/library/:type', controller.listEntries);
    fastify.get('/library/:type/:id', controller.getEntry);
    fastify.get('/library/stream/:type/:id/:unit', controller.streamUnit);
    fastify.post('/library/:type/:id/match', controller.matchEntry);
    fastify.get('/library/:id/units', controller.getUnits);
    fastify.get('/library/:unitId/manifest', controller.getManifest);
    fastify.get('/library/:unitId/resource/:resId', controller.getPage);
    fastify.post('/library/download/anime', controller.downloadAnime);
    fastify.post('/library/download/book', controller.downloadBook);
 }
 export default localRoutes;
--- a/desktop/src/api/local/local.service.ts
+++ b/desktop/src/api/local/local.service.ts
@@ -0,0 +1,498 @@
 import { getConfig as loadConfig } from '../../shared/config.js';
 import { queryOne, queryAll, run } from '../../shared/database.js';
 import crypto from 'crypto';
 import fs from "fs";
 import { PathLike } from "node:fs";
 import path from "path";
 import { getAnimeById, searchAnimeLocal } from "../anime/anime.service";
 import { getBookById, searchBooksAniList } from "../books/books.service";
 import AdmZip from 'adm-zip';
 const MANGA_IMAGE_EXTS = ['.jpg', '.jpeg', '.png', '.webp'];
 const MANGA_ARCHIVES = ['.cbz', '.cbr', '.zip'];
 const NOVEL_EXTS = ['.epub', '.pdf', '.txt', '.md', '.docx', '.mobi'];
 function normalize(str: string) {
    return str
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .replace(/[^a-z0-9 ]/g, '')
        .trim();
 }
 function levenshtein(a: string, b: string) {
    const matrix = Array.from({ length: b.length + 1 }, (_, i) => [i]);
    for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
    for (let i = 1; i <= b.length; i++) {
        for (let j = 1; j <= a.length; j++) {
            matrix[i][j] = Math.min(
                matrix[i - 1][j] + 1,
                matrix[i][j - 1] + 1,
                matrix[i - 1][j - 1] + (b[i - 1] === a[j - 1] ? 0 : 1)
            );
        }
    }
    return matrix[b.length][a.length];
 }
 function getTitleVariants(media: any): string[] {
    const t = media.title || {};
    return [
        t.romaji,
        t.english,
        t.native,
        ...(media.synonyms || [])
    ].filter(Boolean);
 }
 function scoreEntry(query: string, media: any) {
    const q = normalize(query);
    let best = Infinity;
    for (const title of getTitleVariants(media)) {
        const t = normalize(title);
        if (t.includes(q) || q.includes(t)) {
            return 0;
        }
        best = Math.min(best, levenshtein(q, t));
    }
    return best;
 }
 export async function resolveEntryMetadata(entry: any, type: string) {
    let metadata = null;
    let matchedId = entry.matched_id;
    if (!matchedId) {
        const query = entry.folder_name;
        const results = type === 'anime'
            ? await searchAnimeLocal(query)
            : await searchBooksAniList(query);
        let picked = null;
        let candidates = results;
        if (type !== 'anime' && Array.isArray(results)) {
            if (entry.type === 'novels') {
                candidates = results.filter(r => r.format === 'NOVEL');
            } else if (entry.type === 'manga') {
                candidates = results.filter(r => r.format !== 'NOVEL');
            }
        }
        if (Array.isArray(candidates) && candidates.length) {
            const scored = candidates
                .map(r => ({ r, score: scoreEntry(entry.folder_name, r) }))
                .sort((a, b) => a.score - b.score);
            // cutoff opcional
            if (scored[0].score <= 10) {
                picked = scored[0].r;
            }
        }
        if (picked?.id) {
            matchedId = picked.id;
            await run(
                `UPDATE local_entries
                 SET matched_id = ?, matched_source = 'anilist'
                 WHERE id = ?`,
                [matchedId, entry.id],
                'local_library'
            );
        }
    }
    if (matchedId) {
        metadata = type === 'anime'
            ? await getAnimeById(matchedId)
            : await getBookById(matchedId);
    }
    return {
        id: entry.id,
        type: entry.type,
        matched: !!matchedId,
        metadata
    };
 }
 export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
    const { values } = loadConfig();
    if (!values.library) {
        throw new Error('NO_LIBRARY_CONFIGURED');
    }
    if (mode === 'full') {
        await run(`DELETE FROM local_files`, [], 'local_library');
        await run(`DELETE FROM local_entries`, [], 'local_library');
    }
    for (const [type, basePath] of Object.entries(values.library)) {
        if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
        const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());
        for (const dir of dirs) {
            const fullPath = path.join(<string>basePath, dir.name);
            const id = crypto.createHash('sha1').update(fullPath).digest('hex');
            const now = Date.now();
            const existing = await queryOne(`SELECT id FROM local_entries WHERE id = ?`, [id], 'local_library');
            if (existing) {
                await run(`UPDATE local_entries SET last_scan = ? WHERE id = ?`, [now, id], 'local_library');
                await run(`DELETE FROM local_files WHERE entry_id = ?`, [id], 'local_library');
            } else {
                await run(
                    `INSERT INTO local_entries (id, type, path, folder_name, last_scan) VALUES (?, ?, ?, ?, ?)`,
                    [id, type, fullPath, dir.name, now],
                    'local_library'
                );
            }
            const files = fs.readdirSync(fullPath, { withFileTypes: true })
                .filter(f =>
                    f.isFile() ||
                    (type === 'manga' && f.isDirectory())
                )
                .sort((a, b) => a.name.localeCompare(b.name));
            let unit = 1;
            for (const file of files) {
                await run(
                    `INSERT INTO local_files (id, entry_id, file_path, unit_number)
                     VALUES (?, ?, ?, ?)`,
                    [crypto.randomUUID(), id, path.join(fullPath, file.name), unit],
                    'local_library'
                );
                unit++;
            }
        }
    }
    return { status: 'OK' };
 }
 export async function getEntriesByType(type: string) {
    const entries = await queryAll(`SELECT * FROM local_entries WHERE type = ?`, [type], 'local_library');
    return await Promise.all(entries.map((entry: any) => resolveEntryMetadata(entry, type)));
 }
 export async function getEntryDetails(type: string, id: string) {
    const entry = await queryOne(
        `SELECT * FROM local_entries WHERE matched_id = ? AND type = ?`,
        [Number(id), type],
        'local_library'
    );
    if (!entry) {
        return null;
    }
    const [details, files] = await Promise.all([
        resolveEntryMetadata(entry, type),
        queryAll(
            `SELECT id, file_path, unit_number FROM local_files WHERE entry_id = ? ORDER BY unit_number ASC`,
            [id],
            'local_library'
        )
    ]);
    return { ...details, files };
 }
 export async function getFileForStreaming(id: string, unit: string) {
    const file = await queryOne(
        `SELECT file_path FROM local_files WHERE entry_id = ? AND unit_number = ?`,
        [id, unit],
        'local_library'
    );
    if (!file || !fs.existsSync(file.file_path)) {
        return null;
    }
    return {
        filePath: file.file_path,
        stat: fs.statSync(file.file_path)
    };
 }
 export async function updateEntryMatch(id: string, type: string, source: string, matchedId: number | null) {
    const entry = await queryOne(
        `SELECT id FROM local_entries WHERE id = ? AND type = ?`,
        [id, type],
        'local_library'
    );
    if (!entry) {
        return null;
    }
    await run(
        `UPDATE local_entries
         SET matched_source = ?, matched_id = ?
         WHERE id = ?`,
        [source, matchedId, id],
        'local_library'
    );
    return { status: 'OK', matched: !!matchedId };
 }
 function isImageFolder(folderPath: string): boolean {
    if (!fs.existsSync(folderPath)) return false;
    if (!fs.statSync(folderPath).isDirectory()) return false;
    const files = fs.readdirSync(folderPath);
    return files.some(f => MANGA_IMAGE_EXTS.includes(path.extname(f).toLowerCase()));
 }
 export async function getEntryUnits(id: string) {
    const entry = await queryOne(
        `SELECT id, type, matched_id FROM local_entries WHERE matched_id = ?`,
        [Number(id)],
        'local_library'
    );
    if (!entry) {
        return null;
    }
    const files = await queryAll(
        `SELECT id, file_path, unit_number FROM local_files 
         WHERE entry_id = ? 
         ORDER BY unit_number ASC`,
        [entry.id],
        'local_library'
    );
    const units = files
        .map((file: any) => {
            const fileExt = path.extname(file.file_path).toLowerCase();
            const isDir = fs.existsSync(file.file_path) &&
                fs.statSync(file.file_path).isDirectory();
            if (entry.type === 'manga') {
                if (MANGA_ARCHIVES.includes(fileExt)) {
                    return {
                        id: file.id,
                        number: file.unit_number,
                        name: path.basename(file.file_path),
                        type: 'chapter',
                        format: fileExt.replace('.', ''),
                        path: file.file_path
                    };
                }
                if (isDir && isImageFolder(file.file_path)) {
                    return {
                        id: file.id,
                        number: file.unit_number,
                        name: path.basename(file.file_path),
                        type: 'chapter',
                        format: 'folder',
                        path: file.file_path
                    };
                }
                return null;
            }
            if (entry.type === 'novels') {
                if (NOVEL_EXTS.includes(fileExt)) {
                    return {
                        id: file.id,
                        number: file.unit_number,
                        name: path.basename(file.file_path),
                        type: 'chapter',
                        format: fileExt.replace('.', ''),
                        path: file.file_path
                    };
                }
                return null;
            }
            if (entry.type === 'anime') {
                return {
                    id: file.id,
                    number: file.unit_number,
                    name: path.basename(file.file_path),
                    type: 'episode',
                    format: fileExt.replace('.', ''),
                    path: file.file_path
                };
            }
            return null;
        })
        .filter(Boolean);
    return {
        entry_id: entry.id,
        matched_id: entry.matched_id,
        type: entry.type,
        total: units.length,
        units
    };
 }
 export async function getUnitManifest(unitId: string) {
    const file = await queryOne(
        `SELECT file_path FROM local_files WHERE id = ?`,
        [unitId],
        'local_library'
    );
    if (!file || !fs.existsSync(file.file_path)) {
        return null;
    }
    const ext = path.extname(file.file_path).toLowerCase();
    if (['.cbz', '.cbr', '.zip'].includes(ext)) {
        const zip = new AdmZip(file.file_path);
        const pages = zip.getEntries()
            .filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
            .sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }))
            .map((_, i) => ({
                id: i,
                url: `/api/library/${unitId}/resource/${i}`
            }));
        return {
            type: 'manga',
            format: 'archive',
            pages
        };
    }
    if (fs.statSync(file.file_path).isDirectory()) {
        const pages = fs.readdirSync(file.file_path)
            .filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
            .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
            .map((_, i) => ({
                id: i,
                url: `/api/library/${unitId}/resource/${i}`
            }));
        return {
            type: 'manga',
            format: 'folder',
            pages
        };
    }
    if (ext === '.epub') {
        return {
            type: 'ln',
            format: 'epub',
            url: `/api/library/${unitId}/resource/epub`
        };
    }
    if (['.txt', '.md'].includes(ext)) {
        return {
            type: 'ln',
            format: 'text',
            url: `/api/library/${unitId}/resource/text`
        };
    }
    if (ext === '.pdf') {
        return {
            type: 'ln',
            format: 'pdf',
            url: `/api/library/${unitId}/resource/pdf`
        };
    }
    throw new Error('UNSUPPORTED_FORMAT');
 }
 export async function getUnitResource(unitId: string, resId: string) {
    const file = await queryOne(
        `SELECT file_path FROM local_files WHERE id = ?`,
        [unitId],
        'local_library'
    );
    if (!file) return null;
    const ext = path.extname(file.file_path).toLowerCase();
    if (['.cbz', '.zip', '.cbr'].includes(ext)) {
        const zip = new AdmZip(file.file_path);
        const images = zip.getEntries()
            .filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
            .sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }));
        const entry = images[Number(resId)];
        if (!entry) return null;
        return {
            type: 'image',
            data: entry.getData()
        };
    }
    if (fs.statSync(file.file_path).isDirectory()) {
        const images = fs.readdirSync(file.file_path)
            .filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
            .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
        const img = images[Number(resId)];
        if (!img) return null;
        const imgPath = path.join(file.file_path, img);
        const stat = fs.statSync(imgPath);
        return {
            type: 'image',
            path: imgPath,
            size: stat.size
        };
    }
    if (ext === '.epub') {
        const html = await parseEpubToHtml(file.file_path);
        return {
            type: 'html',
            data: html
        };
    }
    if (['.txt', '.md'].includes(ext)) {
        const text = fs.readFileSync(file.file_path, 'utf8');
        return {
            type: 'html',
            data: `<div class="ln-content"><pre>${text}</pre></div>`
        };
    }
    return null;
 }
 function parseEpubToHtml(filePath: string) {
    const zip = new AdmZip(filePath);
    const entry = zip.getEntry('OEBPS/chapter.xhtml');
    if (!entry) throw new Error('CHAPTER_NOT_FOUND');
    return entry.getData().toString('utf8');
 }
--- a/desktop/src/api/proxy/proxy.controller.ts
+++ b/desktop/src/api/proxy/proxy.controller.ts
@@ -0,0 +1,115 @@
 import {FastifyReply, FastifyRequest} from 'fastify';
 import {processM3U8Content, proxyRequest, streamToReadable} from './proxy.service';
 interface ProxyQuerystring {
    url: string;
    referer?: string;
    origin?: string;
    userAgent?: string;
 }
 type ProxyRequest = FastifyRequest<{
    Querystring: ProxyQuerystring
 }>;
 export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
    const { url, referer, origin, userAgent } = req.query;
    if (!url) {
        return reply.code(400).send({ error: "No URL provided" });
    }
    try {
        const rangeHeader = req.headers.range;
        const { response, contentType, isM3U8, contentLength } = await proxyRequest(url, {
            referer,
            origin,
            userAgent
        }, rangeHeader);
        reply.header('Access-Control-Allow-Origin', '*');
        reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
        reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
        reply.header('Access-Control-Expose-Headers', 'Content-Length, Content-Range, Accept-Ranges');
        if (isM3U8) {
            reply.header('Content-Type', 'application/vnd.apple.mpegurl');
            const text = await response.text();
            const baseUrl = new URL(response.url);
            const processedContent = processM3U8Content(text, baseUrl, {
                referer,
                origin,
                userAgent
            });
            return reply.send(processedContent);
        }
        const isSubtitle = url.includes('.vtt') || url.includes('.srt') || url.includes('.ass') ||
            contentType?.includes('text/vtt') || contentType?.includes('text/srt');
        if (isSubtitle) {
            const text = await response.text();
            let mimeType = 'text/vtt';
            if (url.includes('.srt') || contentType?.includes('srt')) {
                mimeType = 'text/plain';
            } else if (url.includes('.ass')) {
                mimeType = 'text/plain';
            }
            reply.header('Content-Type', mimeType);
            reply.header('Cache-Control', 'public, max-age=3600');
            return reply.send(text);
        }
        if (contentType) {
            reply.header('Content-Type', contentType);
        }
        if (response.status === 206) {
            const contentRange = response.headers.get('content-range');
            if (contentRange) {
                reply.header('Content-Range', contentRange);
            }
            reply.code(206);
        }
        if (contentLength) {
            reply.header('Content-Length', contentLength);
        }
        if (contentType?.startsWith('image/') || contentType?.startsWith('video/')) {
            reply.header('Cache-Control', 'public, max-age=31536000, immutable');
        }
        reply.header('Accept-Ranges', 'bytes');
        return reply.send(streamToReadable(response.body!));
    } catch (err) {
        req.server.log.error(err);
        console.error('=== PROXY ERROR ===');
        console.error('URL:', url);
        console.error('Error:', err);
        console.error('===================');
        if (!reply.sent) {
            return reply.code(500).send({
                error: "Internal Server Error",
                details: err instanceof Error ? err.message : String(err)
            });
        }
    }
 }
 export async function handleProxyOptions(req: FastifyRequest, reply: FastifyReply) {
    reply.header('Access-Control-Allow-Origin', '*');
    reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
    reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
    return reply.code(204).send();
 }
--- a/desktop/src/api/proxy/proxy.routes.ts
+++ b/desktop/src/api/proxy/proxy.routes.ts
@@ -1,8 +1,9 @@
 import { FastifyInstance } from 'fastify';
-import { handleProxy } from './proxy.controller';
+import {handleProxy, handleProxyOptions} from './proxy.controller';
 async function proxyRoutes(fastify: FastifyInstance) {
    fastify.get('/proxy', handleProxy);
    fastify.options('/proxy', handleProxyOptions);
 }
 export default proxyRoutes;
--- a/desktop/src/api/proxy/proxy.service.ts
+++ b/desktop/src/api/proxy/proxy.service.ts
@@ -1,4 +1,4 @@
-import { Readable } from 'stream';
+import {Readable} from 'stream';
 interface ProxyHeaders {
    referer?: string;
@@ -13,25 +13,24 @@ interface ProxyResponse {
    contentLength: string | null;
 }
-export async function proxyRequest(url: string, { referer, origin, userAgent }: ProxyHeaders): Promise<ProxyResponse> {
+export async function proxyRequest(url: string, { referer, origin, userAgent }: ProxyHeaders, rangeHeader?: string): Promise<ProxyResponse> {
    const headers: Record<string, string> = {
        'User-Agent': userAgent || "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
        'Accept': '*/*',
        'Accept-Language': 'en-US,en;q=0.9',
        'Accept-Encoding': 'identity',
        'Connection': 'keep-alive'
    };
    if (referer) headers['Referer'] = referer;
    if (origin) headers['Origin'] = origin;
    if (rangeHeader) headers['Range'] = rangeHeader;
    let lastError: Error | null = null;
    const maxRetries = 2;
    for (let attempt = 0; attempt < maxRetries; attempt++) {
        try {
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), 60000);
@@ -43,8 +42,7 @@ export async function proxyRequest(url: string, { referer, origin, userAgent }:
            clearTimeout(timeoutId);
-            if (!response.ok) {
+            if (!response.ok && response.status !== 206) {
                if (response.status === 404 || response.status === 403) {
                    throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
                }
@@ -57,9 +55,16 @@ export async function proxyRequest(url: string, { referer, origin, userAgent }:
                throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
            }
            const contentType = response.headers.get('content-type');
            const contentLength = response.headers.get('content-length');
-            const isM3U8 = (contentType && contentType.includes('mpegurl')) || url.includes('.m3u8');
+            const contentType = response.headers.get('content-type');
            const ct = contentType?.toLowerCase();
            const isM3U8 =
                !!ct && (
                    ct.includes('mpegurl') ||
                    ct.includes('m3u8')
                ) ||
                url.toLowerCase().includes('.m3u8');
            return {
                response,
@@ -83,24 +88,57 @@ export async function proxyRequest(url: string, { referer, origin, userAgent }:
 }
 export function processM3U8Content(text: string, baseUrl: URL, { referer, origin, userAgent }: ProxyHeaders): string {
-    return text.replace(/^(?!#)(?!\s*$).+/gm, (line) => {
+    const buildProxy = (url: string) => {
        line = line.trim();
        let absoluteUrl: string;
        try {
-            absoluteUrl = new URL(line, baseUrl).href;
+            const params = new URLSearchParams();
-        } catch (e) {
+            params.set('url', new URL(url, baseUrl).href);
-            return line;
+            if (referer) params.set('referer', referer);
            if (origin) params.set('origin', origin);
            if (userAgent) params.set('userAgent', userAgent);
            return `/api/proxy?${params.toString()}`;
        } catch (error) {
            console.error('Error building proxy URL for:', url, error);
            return url;
        }
    };
    const isMasterPlaylist = text.includes('#EXT-X-STREAM-INF');
    let lines = text.split('\n');
    let result = [];
    for (let i = 0; i < lines.length; i++) {
        const line = lines[i];
        const trimmed = line.trim();
        if (!trimmed) {
            result.push(line);
            continue;
        }
-        const proxyParams = new URLSearchParams();
+        if (trimmed.startsWith('#')) {
-        proxyParams.set('url', absoluteUrl);
+            if (line.includes('URI=')) {
-        if (referer) proxyParams.set('referer', referer);
+                const processedLine = line.replace(/URI="([^"]+)"/g, (match, uri) => {
-        if (origin) proxyParams.set('origin', origin);
+                    return `URI="${buildProxy(uri)}"`;
-        if (userAgent) proxyParams.set('userAgent', userAgent);
+                });
                result.push(processedLine);
            } else {
                result.push(line);
            }
            continue;
        }
-        return `/api/proxy?${proxyParams.toString()}`;
+        try {
-    });
+            const proxiedUrl = buildProxy(trimmed);
            result.push(proxiedUrl);
        } catch (error) {
            console.error('Error processing M3U8 URL line:', trimmed, error);
            result.push(line);
        }
    }
    return result.join('\n');
 }
 export function streamToReadable(webStream: ReadableStream): Readable {
@@ -110,7 +148,6 @@ export function streamToReadable(webStream: ReadableStream): Readable {
    return new Readable({
        async read() {
            try {
                const timeoutPromise = new Promise((_, reject) => {
                    readTimeout = setTimeout(() => reject(new Error('Stream read timeout')), 10000);
                });
--- a/desktop/src/api/rpc/rp.service.ts
+++ b/desktop/src/api/rpc/rp.service.ts
@@ -0,0 +1,97 @@
 import { Client } from "@xhayper/discord-rpc";
 let rpcClient: Client | null = null;
 let reconnectTimer: NodeJS.Timeout | null = null;
 let connected = false;
 interface RPCData {
    details?: string;
    state?: string;
    mode?: string;
    startTimestamp?: number;
    endTimestamp?: number;
    paused?: boolean;
    version?: string;
 }
 function attemptReconnect(clientId: string) {
    connected = false;
    if (reconnectTimer) {
        clearTimeout(reconnectTimer);
        reconnectTimer = null;
    }
    console.log('Discord RPC: Trying to reconnect...');
    reconnectTimer = setTimeout(() => {
        initRPC(clientId);
    }, 10000);
 }
 export function initRPC(clientId: string) {
    if (rpcClient) {
        try { rpcClient.destroy(); } catch {}
        rpcClient = null;
    }
    if (reconnectTimer) {
        clearTimeout(reconnectTimer);
        reconnectTimer = null;
    }
    rpcClient = new Client({ clientId });
    rpcClient.on("ready", () => {
        connected = true;
        console.log("Discord RPC conectado");
        setTimeout(() => {
            setActivity({ details: "Browsing", state: "In App" });
        }, 1000);
    });
    rpcClient.on("disconnected", () => {
        connected = false;
        attemptReconnect(clientId);
    });
    rpcClient.on("error", () => {
        if (connected) attemptReconnect(clientId);
    });
    rpcClient.login().catch(() => {
        attemptReconnect(clientId);
    });
 }
 export function setActivity(data: RPCData = {}) {
    if (!rpcClient || !connected) return;
    let type = 0;
    if (data.mode === "watching") type = 3;
    if (data.mode === "reading") type = 0;
    const activity: any = {
        details: data.details,
        state: data.state,
        type,
        instance: false
    };
    if (data.paused) {
        activity.largeImageText = "⏸  ";
        delete activity.startTimestamp;
        delete activity.endTimestamp;
    } else {
        activity.largeImageKey = "bigpicture";
        activity.largeImageText = data.version ?? "v2.0.0";
        if (data.startTimestamp && data.endTimestamp) {
            activity.startTimestamp = data.startTimestamp;
            activity.endTimestamp = data.endTimestamp;
        }
    }
    rpcClient.user?.setActivity(activity);
 }
--- a/desktop/src/api/rpc/rpc.controller.ts
+++ b/desktop/src/api/rpc/rpc.controller.ts
@@ -11,16 +11,29 @@ export function init() {
 }
 export async function setRPC(request: FastifyRequest, reply: FastifyReply) {
-    const { details, state, mode } = request.body as {
+    const {
        details,
        state,
        mode,
        startTimestamp,
        endTimestamp,
        paused
    } = request.body as {
        details?: string;
        state?: string;
        mode?: "watching" | "reading" | string;
        startTimestamp?: number;
        endTimestamp?: number;
        paused?: boolean;
    };
    setActivity({
        details,
        state,
-        mode
+        mode,
        startTimestamp,
        endTimestamp,
        paused
    });
    return reply.send({ ok: true });
--- a/desktop/src/api/rpc/rpc.routes.ts
+++ b/desktop/src/api/rpc/rpc.routes.ts
--- a/desktop/src/api/types.ts
+++ b/desktop/src/api/types.ts
@@ -79,6 +79,7 @@ export interface Episode {
 }
 export interface Chapter {
    language?: string | null;
    index: number;
    id: string;
    number: string | number;
--- a/desktop/src/api/user/user.controller.ts
+++ b/desktop/src/api/user/user.controller.ts
@@ -168,20 +168,39 @@ export async function deleteUser(req: FastifyRequest, reply: FastifyReply) {
        const { id } = req.params as { id: string };
        const userId = parseInt(id, 10);
        const body = (req.body ?? {}) as { password?: string };
        const password = body.password;
        if (!userId || isNaN(userId)) {
            return reply.code(400).send({ error: "Invalid user id" });
        }
-        const result = await userService.deleteUser(userId);
+        const user = await userService.getUserById(userId);
-
+        if (!user) {
        if (result && result.changes > 0) {
            return { success: true, message: "User deleted successfully" };
        } else {
            return reply.code(404).send({ error: "User not found" });
        }
        if (user.has_password) {
            if (!password) {
                return reply.code(401).send({ error: "Password required" });
            }
            const isValid = await userService.verifyPassword(userId, password);
            if (!isValid) {
                return reply.code(401).send({ error: "Incorrect password" });
            }
        }
        const result = await userService.deleteUser(userId);
        if (result.changes > 0) {
            return reply.send({ success: true });
        }
        return reply.code(500).send({ error: "Failed to delete user" });
    } catch (err) {
-        console.error("Delete User Error:", (err as Error).message);
+        console.error("Delete User Error:", err);
        return reply.code(500).send({ error: "Failed to delete user" });
    }
 }
@@ -246,16 +265,17 @@ export async function changePassword(req: FastifyRequest, reply: FastifyReply) {
            return reply.code(404).send({ error: "User not found" });
        }
-        // Si el usuario tiene contraseña actual, debe proporcionar la contraseña actual
+        if (user.has_password) {
-        if (user.has_password && currentPassword) {
+            if (!currentPassword) {
-            const isValid = await userService.verifyPassword(userId, currentPassword);
+                return reply.code(401).send({ error: "Current password required" });
            }
            const isValid = await userService.verifyPassword(userId, currentPassword);
            if (!isValid) {
                return reply.code(401).send({ error: "Current password is incorrect" });
            }
        }
        // Actualizar la contraseña (null para eliminarla, string para establecerla)
        await userService.updateUser(userId, { password: newPassword });
        return reply.send({
--- a/desktop/src/api/user/user.routes.ts
+++ b/desktop/src/api/user/user.routes.ts
--- a/desktop/src/api/user/user.service.ts
+++ b/desktop/src/api/user/user.service.ts
@@ -0,0 +1,186 @@
 import {queryAll, queryOne, run} from '../../shared/database';
 import bcrypt from 'bcryptjs';
 const USER_DB_NAME = 'userdata';
 const SALT_ROUNDS = 10;
 interface User {
    id: number;
    username: string;
    profile_picture_url: string | null;
    has_password: boolean;
 }
 export async function userExists(id: number): Promise<boolean> {
    const sql = 'SELECT 1 FROM User WHERE id = ?';
    const row = await queryOne(sql, [id], USER_DB_NAME);
    return !!row;
 }
 export async function createUser(username: string, profilePictureUrl?: string, password?: string): Promise<{ lastID: number }> {
    let passwordHash = null;
    if (password && password.trim()) {
        passwordHash = await bcrypt.hash(password.trim(), SALT_ROUNDS);
    }
    const sql = `
        INSERT INTO User (username, profile_picture_url, password_hash)
        VALUES (?, ?, ?)
    `;
    const params = [username, profilePictureUrl || null, passwordHash];
    const result = await run(sql, params, USER_DB_NAME);
    return { lastID: result.lastID };
 }
 export async function updateUser(userId: number, updates: any): Promise<any> {
    const fields: string[] = [];
    const values: (string | number | null)[] = [];
    if (updates.username !== undefined) {
        fields.push('username = ?');
        values.push(updates.username);
    }
    if (updates.profilePictureUrl !== undefined) {
        fields.push('profile_picture_url = ?');
        values.push(updates.profilePictureUrl);
    }
    if (updates.password !== undefined) {
        if (updates.password === null || updates.password === '') {
            // Eliminar contraseña
            fields.push('password_hash = ?');
            values.push(null);
        } else {
            // Actualizar contraseña
            const hash = await bcrypt.hash(updates.password.trim(), SALT_ROUNDS);
            fields.push('password_hash = ?');
            values.push(hash);
        }
    }
    if (fields.length === 0) {
        return { changes: 0, lastID: userId };
    }
    const setClause = fields.join(', ');
    const sql = `UPDATE User SET ${setClause} WHERE id = ?`;
    values.push(userId);
    return await run(sql, values, USER_DB_NAME);
 }
 export async function deleteUser(userId: number): Promise<any> {
    await run(
        `DELETE FROM ListEntry WHERE user_id = ?`,
        [userId],
        USER_DB_NAME
    );
    await run(
        `DELETE FROM UserIntegration WHERE user_id = ?`,
        [userId],
        USER_DB_NAME
    );
    await run(
        `DELETE FROM favorites WHERE user_id = ?`,
        [userId],
        'favorites'
    );
    const result = await run(
        `DELETE FROM User WHERE id = ?`,
        [userId],
        USER_DB_NAME
    );
    return result;
 }
 export async function getAllUsers(): Promise<User[]> {
    const sql = `
        SELECT 
            id, 
            username, 
            profile_picture_url,
            CASE WHEN password_hash IS NOT NULL THEN 1 ELSE 0 END as has_password
        FROM User 
        ORDER BY id
    `;
    const users = await queryAll(sql, [], USER_DB_NAME);
    return users.map((user: any) => ({
        id: user.id,
        username: user.username,
        profile_picture_url: user.profile_picture_url || null,
        has_password: !!user.has_password
    })) as User[];
 }
 export async function getUserById(id: number): Promise<User | null> {
    const sql = `
        SELECT
            id,
            username,
            profile_picture_url,
            CASE WHEN password_hash IS NOT NULL THEN 1 ELSE 0 END as has_password
        FROM User
        WHERE id = ?
    `;
    const user = await queryOne(sql, [id], USER_DB_NAME);
    if (!user) return null;
    return {
        id: user.id,
        username: user.username,
        profile_picture_url: user.profile_picture_url || null,
        has_password: !!user.has_password
    };
 }
 export async function verifyPassword(userId: number, password: string): Promise<boolean> {
    const sql = 'SELECT password_hash FROM User WHERE id = ?';
    const user = await queryOne(sql, [userId], USER_DB_NAME);
    if (!user || !user.password_hash) {
        return false;
    }
    return await bcrypt.compare(password, user.password_hash);
 }
 export async function getAniListIntegration(userId: number) {
    const sql = `
        SELECT anilist_user_id, expires_at
        FROM UserIntegration
        WHERE user_id = ? AND platform = ?
    `;
    const row = await queryOne(sql, [userId, "AniList"], USER_DB_NAME);
    if (!row) {
        return { connected: false };
    }
    return {
        connected: true,
        anilistUserId: row.anilist_user_id,
        expiresAt: row.expires_at
    };
 }
 export async function removeAniListIntegration(userId: number) {
    const sql = `
        DELETE FROM UserIntegration
        WHERE user_id = ? AND platform = ?
    `;
    return run(sql, [userId, "AniList"], USER_DB_NAME);
 }
--- a/desktop/src/scripts/anime/animes.js
+++ b/desktop/src/scripts/anime/animes.js
@@ -92,6 +92,7 @@ function startHeroCycle() {
 async function updateHeroUI(anime) {
    if(!anime) return;
    anime.entry_type = 'ANIME';
    const title = anime.title.english || anime.title.romaji || "Unknown Title";
    const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
--- a/desktop/src/scripts/anime/entry.js
+++ b/desktop/src/scripts/anime/entry.js
@@ -0,0 +1,408 @@
 let animeData = null;
 let extensionName = null;
 let animeId = null;
 let isLocal = false;
 const episodePagination = Object.create(PaginationManager);
 episodePagination.init(50, renderEpisodes);
 document.addEventListener('DOMContentLoaded', () => {
    loadAnimeData();
    setupDescriptionModal();
    setupEpisodeSearch();
    const urlParams = new URLSearchParams(window.location.search);
    const initialEp = urlParams.get('episode');
    if (initialEp) {
        setTimeout(() => {
            if (animeData) {
                const source = isLocal ? 'local' : (extensionName || 'anilist');
                if (typeof AnimePlayer !== 'undefined') {
                    AnimePlayer.init(animeId, source, isLocal, animeData);
                    AnimePlayer.playEpisode(parseInt(initialEp));
                }
            }
        }, 800);
    }
 });
 async function loadAnimeData() {
    try {
        const pathParts = window.location.pathname.split('/');
        const cleanParts = pathParts.filter(p => p.length > 0);
        if (cleanParts.length >= 3 && cleanParts[0] === 'anime') {
            extensionName = cleanParts[1];
            animeId = cleanParts[2];
        } else if (cleanParts.length === 2 && cleanParts[0] === 'anime') {
            extensionName = null;
            animeId = cleanParts[1];
        } else {
            showError("Invalid URL Format");
            return;
        }
        try {
            const localRes = await fetch(`/api/library/anime/${animeId}`);
            if (localRes.ok) isLocal = true;
        } catch {}
        const fetchUrl = extensionName
            ? `/api/anime/${animeId}?source=${extensionName}`
            : `/api/anime/${animeId}?source=anilist`;
        const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
        const data = await res.json();
        if (data.error) {
            showError("Anime Not Found");
            return;
        }
        animeData = data;
        animeData.entry_type = 'ANIME';
        const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
        document.title = `${metadata.title} | WaifuBoard`;
        document.getElementById('title').innerText = metadata.title;
        if (metadata.poster) document.getElementById('poster').src = metadata.poster;
        document.getElementById('score').innerText = `${metadata.score}% Score`;
        document.getElementById('year').innerText = metadata.year;
        document.getElementById('genres').innerText = metadata.genres.split(',').join(' • ');
        document.getElementById('format').innerText = metadata.format;
        document.getElementById('status').innerText = metadata.status;
        document.getElementById('season').innerText = metadata.season;
        document.getElementById('studio').innerText = metadata.studio;
        document.getElementById('episodes').innerText = `${metadata.episodes} Ep`;
        updateLocalPill();
        updateDescription(data.description || data.summary);
        updateRelations(data.relations?.edges);
        updateCharacters(metadata.characters);
        updateRecommendations(data.recommendations?.nodes);
        const source = isLocal ? 'local' : (extensionName || 'anilist');
        if (typeof AnimePlayer !== 'undefined') {
            AnimePlayer.init(animeId, source, isLocal, animeData);
        }
        YouTubePlayerUtils.init('trailer-player');
        YouTubePlayerUtils.playTrailer(metadata.trailer, 'trailer-player', metadata.banner);
        const watchBtn = document.getElementById('watch-btn');
        if (watchBtn) {
            watchBtn.onclick = () => {
                if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(1);
            };
        }
        const total = metadata.episodes || 12;
        setupEpisodes(total);
        setupAddToListButton();
    } catch (err) {
        console.error('Error loading anime details:', err);
        showError("Error loading anime");
    }
 }
 function updateLocalPill() {
    if (isLocal) {
        const pill = document.getElementById('local-pill');
        if(pill) pill.style.display = 'inline-flex';
    }
    if (extensionName) {
        const pill = document.getElementById('extension-pill');
        if(pill) {
            pill.innerText = extensionName;
            pill.style.display = 'inline-flex';
        }
    }
 }
 function updateDescription(rawDescription) {
    const desc = MediaMetadataUtils.truncateDescription(rawDescription, 3);
    const previewEl = document.getElementById('description-preview');
    const fullEl = document.getElementById('full-description');
    if (previewEl) {
        previewEl.innerHTML = desc.short +
            (desc.isTruncated ? ' <span onclick="openDescriptionModal()" style="color:white; cursor:pointer; font-weight:700; margin-left:5px;">Read more</span>' : '');
    }
    if (fullEl) fullEl.innerHTML = desc.full;
 }
 function setupDescriptionModal() {
    const modal = document.getElementById('desc-modal');
    if (!modal) return;
    modal.addEventListener('click', (e) => {
        if (e.target.id === 'desc-modal') {
            closeDescriptionModal();
        }
    });
 }
 function openDescriptionModal() {
    const modal = document.getElementById('desc-modal');
    if(modal) modal.classList.add('active');
 }
 function closeDescriptionModal() {
    const modal = document.getElementById('desc-modal');
    if(modal) modal.classList.remove('active');
 }
 function setupEpisodes(totalEpisodes) {
    const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
    episodePagination.setTotalItems(limitedTotal);
    renderEpisodes();
 }
 function renderEpisodes() {
    const grid = document.getElementById('episodes-grid');
    if (!grid) return;
    grid.innerHTML = '';
    const range = episodePagination.getPageRange();
    const currentEp = (typeof AnimePlayer !== 'undefined') ? AnimePlayer.getCurrentEpisode() : 0;
    for (let i = range.start + 1; i <= range.end; i++) {
        const btn = document.createElement('div');
        btn.className = 'episode-btn';
        if (currentEp === i) btn.classList.add('active-playing');
        btn.innerText = i;
        btn.onclick = () => {
            if (typeof AnimePlayer !== 'undefined') {
                AnimePlayer.playEpisode(i);
                renderEpisodes();
            }
        };
        grid.appendChild(btn);
    }
    const totalItems = episodePagination.totalItems || 0;
    const itemsPerPage = episodePagination.itemsPerPage || 50;
    const safeTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
    const info = document.getElementById('page-info');
    if(info) info.innerText = `Page ${episodePagination.currentPage} of ${safeTotalPages}`;
    const prevBtn = document.getElementById('prev-page');
    const nextBtn = document.getElementById('next-page');
    if(prevBtn) {
        prevBtn.disabled = episodePagination.currentPage === 1;
        prevBtn.onclick = () => { episodePagination.prevPage(); };
    }
    if(nextBtn) {
        nextBtn.disabled = episodePagination.currentPage >= safeTotalPages;
        nextBtn.onclick = () => { episodePagination.nextPage(); };
    }
 }
 function setupEpisodeSearch() {
    const searchInput = document.getElementById('ep-search');
    if (!searchInput) return;
    searchInput.addEventListener('input', (e) => {
        const val = parseInt(e.target.value);
        const grid = document.getElementById('episodes-grid');
        const controls = document.getElementById('pagination-controls');
        if (val > 0) {
            grid.innerHTML = '';
            const btn = document.createElement('div');
            btn.className = 'episode-btn';
            btn.innerText = `${val}`;
            btn.onclick = () => { if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(val); };
            grid.appendChild(btn);
            if(controls) controls.style.display = 'none';
        } else if (!e.target.value) {
            if(controls) controls.style.display = 'flex';
            renderEpisodes();
        }
    });
 }
 function updateCharacters(characters) {
    const container = document.getElementById('char-list');
    if (!container) return;
    container.innerHTML = '';
    if (!characters || characters.length === 0) return;
    characters.forEach((char, index) => {
        const img = char.node?.image?.large || char.image;
        const name = char.node?.name?.full || char.name;
        const role = char.role || 'Supporting';
        const card = document.createElement('div');
        card.className = `character-item ${index >= 12 ? 'hidden-char' : ''}`;
        card.style.display = index >= 12 ? 'none' : 'flex';
        card.innerHTML = `
            <div class="char-avatar"><img src="${img}" loading="lazy"></div>
            <div class="char-info"><div class="char-name">${name}</div><div class="char-role">${role}</div></div>
        `;
        container.appendChild(card);
    });
    const showMoreBtn = document.getElementById('show-more-chars');
    if (showMoreBtn) {
        if (characters.length > 12) {
            showMoreBtn.style.display = 'block';
            showMoreBtn.onclick = () => {
                document.querySelectorAll('.hidden-char').forEach(el => el.style.display = 'flex');
                showMoreBtn.style.display = 'none';
            };
        } else {
            showMoreBtn.style.display = 'none';
        }
    }
 }
 function updateRelations(relations) {
    const container = document.getElementById('relations-grid');
    const section = document.getElementById('relations-section');
    if (!container || !relations || relations.length === 0) {
        if (section) section.style.display = 'none';
        return;
    }
    section.style.display = 'block';
    container.innerHTML = '';
    const priorityMap = {
        'ADAPTATION': 1,
        'PREQUEL': 2,
        'SEQUEL': 3,
        'PARENT': 4,
        'SIDE_STORY': 5,
        'SPIN_OFF': 6,
        'ALTERNATIVE': 7,
        'CHARACTER': 8,
        'OTHER': 99
    };
    relations.sort((a, b) => {
        const pA = priorityMap[a.relationType] || 50;
        const pB = priorityMap[b.relationType] || 50;
        return pA - pB;
    });
    relations.forEach(rel => {
        const media = rel.node;
        if (!media) return;
        const title = media.title?.romaji || media.title?.english || 'Unknown';
        const cover = media.coverImage?.large || media.coverImage?.medium || '';
        const typeDisplay = rel.relationType ? rel.relationType.replace(/_/g, ' ') : 'RELATION';
        const rawType = rel.relationType;
        const el = document.createElement('div');
        el.className = 'relation-card-horizontal';
        let targetUrl = null;
        if (rawType === 'ADAPTATION') {
            targetUrl = `/book/${media.id}`;
        } else if (media.type === 'ANIME' && rawType !== 'OTHER') {
            targetUrl = `/anime/${media.id}`;
        }
        if (targetUrl) {
            el.onclick = () => { window.location.href = targetUrl; };
        } else {
            el.classList.add('no-link');
            el.onclick = null;
        }
        el.innerHTML = `
            <img src="${cover}" class="rel-img" alt="${title}" onerror="this.src='/public/assets/placeholder.svg'">
            <div class="rel-info">
                <span class="rel-type">${typeDisplay}</span>
                <span class="rel-title">${title}</span>
            </div>
        `;
        container.appendChild(el);
    });
 }
 function updateRecommendations(recommendations) {
    const container = document.getElementById('recommendations-grid');
    if (!container || !recommendations) return;
    container.innerHTML = '';
    recommendations.forEach(rec => {
        const media = rec.mediaRecommendation;
        if (!media) return;
        const title = media.title?.romaji || 'Unknown';
        const cover = media.coverImage?.large || media.coverImage?.medium || '';
        const el = document.createElement('div');
        el.className = 'card';
        el.onclick = () => { window.location.href = `/anime/${media.id}`; };
        el.innerHTML = `
            <div class="card-img-wrap"><img src="${cover}" loading="lazy" onerror="this.src='/public/assets/no-cover.jpg'"></div>
            <div class="card-content"><h3>${title}</h3></div>
        `;
        container.appendChild(el);
    });
 }
 async function setupAddToListButton() {
    const btn = document.getElementById('add-to-list-btn');
    if (!btn || !animeData) return;
    ListModalManager.currentData = animeData;
    const entryType = 'ANIME';
    await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
    updateCustomAddButton();
    btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
 }
 function updateCustomAddButton() {
    const btn = document.getElementById('add-to-list-btn');
    if (btn && ListModalManager.isInList) {
        btn.innerHTML = `✓ In Your List`;
        btn.style.background = 'rgba(34, 197, 94, 0.2)';
        btn.style.borderColor = '#22c55e';
        btn.style.color = '#22c55e';
    }
 }
 function showError(msg) {
    const el = document.getElementById('title');
    if(el) el.innerText = msg;
 }
 window.openDescriptionModal = openDescriptionModal;
 window.closeDescriptionModal = closeDescriptionModal;
 window.scrollRecommendations = (dir) => {
    const el = document.getElementById('recommendations-grid');
    if(el) el.scrollBy({ left: 240 * 3 * dir, behavior: 'smooth' });
 };
--- a/desktop/src/scripts/anime/player.js
+++ b/desktop/src/scripts/anime/player.js
--- a/desktop/src/scripts/auth-guard.js
+++ b/desktop/src/scripts/auth-guard.js
@@ -43,6 +43,43 @@ async function loadMeUI() {
    }
 }
 // Variable para saber si el modal ya fue cargado
 let settingsModalLoaded = false;
 document.getElementById('nav-settings').addEventListener('click', openSettings)
 async function openSettings() {
    if (!settingsModalLoaded) {
        try {
            const res = await fetch('/views/components/settings-modal.html')
            const html = await res.text()
            document.body.insertAdjacentHTML('beforeend', html)
            settingsModalLoaded = true;
            // Esperar un momento para que el DOM se actualice
            await new Promise(resolve => setTimeout(resolve, 50));
            // Ahora cargar los settings
            if (window.toggleSettingsModal) {
                await window.toggleSettingsModal(false);
            }
        } catch (err) {
            console.error('Error loading settings modal:', err);
        }
    } else {
        if (window.toggleSettingsModal) {
            await window.toggleSettingsModal(false);
        }
    }
 }
 function closeSettings() {
    const modal = document.getElementById('settings-modal');
    if (modal) {
        modal.classList.add('hidden');
    }
 }
 function setupDropdown() {
    const userAvatarBtn = document.querySelector(".user-avatar-btn")
    const navDropdown = document.getElementById("nav-dropdown")
--- a/desktop/src/scripts/books/book.js
+++ b/desktop/src/scripts/books/book.js
@@ -0,0 +1,596 @@
 let bookData = null;
 let extensionName = null;
 let bookId = null;
 let bookSlug = null;
 let allChapters = [];
 let filteredChapters = [];
 let availableExtensions = [];
 let isLocal = false;
 let currentLanguage = null;
 let uniqueLanguages = [];
 let isSortAscending = true;
 const chapterPagination = Object.create(PaginationManager);
 chapterPagination.init(6, () => renderChapterList());
 document.addEventListener('DOMContentLoaded', () => {
    init();
    setupModalClickOutside();
    document.getElementById('sort-btn')?.addEventListener('click', toggleSortOrder);
 });
 async function init() {
    try {
        const urlData = URLUtils.parseEntityPath('book');
        if (!urlData) { showError("Book Not Found"); return; }
        extensionName = urlData.extensionName;
        bookId = urlData.entityId;
        bookSlug = urlData.slug;
        await loadBookMetadata();
        await checkLocalLibraryEntry();
        await loadAvailableExtensions();
        await loadChapters();
        await setupAddToListButton();
    } catch (err) {
        console.error("Init Error:", err);
        showError("Error loading book");
    }
 }
 async function loadBookMetadata() {
    const source = extensionName || 'anilist';
    const fetchUrl = `/api/book/${bookId}?source=${source}`;
    try {
        const res = await fetch(fetchUrl);
        const data = await res.json();
        if (data.error || !data) { showError("Book Not Found"); return; }
        const raw = Array.isArray(data) ? data[0] : data;
        bookData = raw;
        const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
        bookData.entry_type = metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
        updatePageTitle(metadata.title);
        updateMetadata(metadata, raw);
        updateExtensionPill();
    } catch (e) {
        console.error(e);
        showError("Error loading metadata");
    }
 }
 function updatePageTitle(title) {
    document.title = `${title} | WaifuBoard Books`;
    const titleEl = document.getElementById('title');
    if (titleEl) titleEl.innerText = title;
 }
 function updateMetadata(metadata, rawData) {
    // 1. Cabecera (Score, Año, Status, Formato, Caps)
    const elements = {
        'description': metadata.description,
        'published-date': metadata.year,
        'status': metadata.status,
        'format': metadata.format,
        'chapters-count': metadata.chapters ? `${metadata.chapters} Ch` : '?? Ch',
        'genres': metadata.genres ? metadata.genres.replace(/,/g, ' • ') : '',
        'poster': metadata.poster,
        'hero-bg': metadata.banner
    };
    if(document.getElementById('description')) document.getElementById('description').innerHTML = metadata.description;
    if(document.getElementById('poster')) document.getElementById('poster').src = metadata.poster;
    if(document.getElementById('hero-bg')) document.getElementById('hero-bg').src = metadata.banner;
    ['published-date','status','format','chapters-count','genres'].forEach(id => {
        const el = document.getElementById(id);
        if(el) el.innerText = elements[id];
    });
    const scoreEl = document.getElementById('score');
    if (scoreEl) scoreEl.innerText = extensionName ? `${metadata.score}` : `${metadata.score}% Score`;
    // 2. Sidebar: Sinónimos (Para llenar espacio vacío)
    if (rawData.synonyms && rawData.synonyms.length > 0) {
        const sidebarInfo = document.getElementById('sidebar-info');
        const list = document.getElementById('synonyms-list');
        if (sidebarInfo && list) {
            sidebarInfo.style.display = 'block';
            list.innerHTML = '';
            // Mostrar máx 5 sinónimos para no alargar demasiado
            rawData.synonyms.slice(0, 5).forEach(syn => {
                const li = document.createElement('li');
                li.innerText = syn;
                list.appendChild(li);
            });
        }
    }
    // 3. Renderizar Personajes
    if (rawData.characters && rawData.characters.nodes && rawData.characters.nodes.length > 0) {
        renderCharacters(rawData.characters.nodes);
    }
    // 4. Renderizar Relaciones
    if (rawData.relations && rawData.relations.edges && rawData.relations.edges.length > 0) {
        renderRelations(rawData.relations.edges);
    }
 }
 function renderCharacters(nodes) {
    const container = document.getElementById('characters-list');
    if(!container) return;
    container.innerHTML = '';
    nodes.forEach(char => {
        const el = document.createElement('div');
        el.className = 'character-item';
        const img = char.image?.large || char.image?.medium || '/public/assets/no-image.png';
        const name = char.name?.full || 'Unknown';
        const role = char.role || 'Supporting';
        el.innerHTML = `
            <div class="char-avatar"><img src="${img}" loading="lazy"></div>
            <div class="char-info">
                <div class="char-name">${name}</div>
                <div class="char-role">${role}</div>
            </div>
        `;
        container.appendChild(el);
    });
 }
 function renderRelations(edges) {
    const container = document.getElementById('relations-list');
    const section = document.getElementById('relations-section');
    if(!container || !section) return;
    if (!edges || edges.length === 0) {
        section.style.display = 'none';
        return;
    }
    section.style.display = 'block';
    container.innerHTML = '';
    edges.forEach(edge => {
        const node = edge.node;
        if (!node) return;
        const el = document.createElement('div');
        el.className = 'relation-card-horizontal';
        const img = node.coverImage?.large || node.coverImage?.medium || '/public/assets/no-image.png';
        const title = node.title?.romaji || node.title?.english || node.title?.native || 'Unknown';
        const type = edge.relationType ? edge.relationType.replace(/_/g, ' ') : 'Related';
        el.innerHTML = `
            <img src="${img}" class="rel-img" alt="${title}" loading="lazy">
            <div class="rel-info">
                <span class="rel-type">${type}</span>
                <span class="rel-title">${title}</span>
            </div>
        `;
        el.onclick = () => {
            const targetType = node.type === 'ANIME' ? 'anime' : 'book';
            window.location.href = `/${targetType}/${node.id}`;
        };
        container.appendChild(el);
    });
 }
 function processChaptersData(chaptersData) {
    allChapters = chaptersData;
    const langSet = new Set(allChapters.map(ch => ch.language).filter(l => l));
    uniqueLanguages = Array.from(langSet);
    setupLanguageSelector();
    filterAndRenderChapters();
    setupReadButton();
 }
 function buildProxyUrl(url, headers = {}) {
    const origin = window.location.origin;
    const params = new URLSearchParams({ url });
    if (headers.Referer || headers.referer)
        params.append("referer", headers.Referer || headers.referer);
    if (headers["User-Agent"] || headers["user-agent"])
        params.append("userAgent", headers["User-Agent"] || headers["user-agent"]);
    if (headers.Origin || headers.origin)
        params.append("origin", headers.Origin || headers.origin);
    return `${origin}/api/proxy?${params.toString()}`;
 }
 async function downloadChapter(chapterId, chapterNumber, provider, btnElement) {
    // Validamos que tengamos bookId y un provider válido
    if (!bookId || !provider) return showError("Error: Faltan datos del capítulo");
    // Feedback visual
    const originalText = btnElement.innerHTML;
    btnElement.innerHTML = `<span class="spinner">↻</span>`; // Spinner pequeño
    btnElement.disabled = true;
    try {
        // 1. OBTENER CONTENIDO USANDO EL PROVIDER DEL CAPÍTULO
        // CAMBIO AQUÍ: Usamos 'provider' en lugar de 'extensionName'
        const fetchUrl = `/api/book/${bookId}/${chapterId}/${provider}?source=${extensionName || 'anilist'}&lang=none`;
        const contentRes = await fetch(fetchUrl);
        if (!contentRes.ok) throw new Error("Error obteniendo contenido del capítulo");
        const chapterData = await contentRes.json();
        // 2. PREPARAR BODY (Misma lógica)
        let payload = {
            anilist_id: parseInt(bookId),
            chapter_number: parseFloat(chapterNumber),
            format: "",
        };
        if (chapterData.pages && Array.isArray(chapterData.pages)) {
            payload.format = "manga";
            payload.images = chapterData.pages.map((img, index) => {
                let finalUrl = img.url;
                if (img.headers && Object.keys(img.headers).length > 0) {
                    finalUrl = buildProxyUrl(img.url, img.headers);
                }
                return { index: index, url: finalUrl };
            });
        }
        else if (chapterData.content) {
            payload.format = "novel";
            payload.content = chapterData.content;
        } else {
            throw new Error("Formato desconocido");
        }
        const downloadRes = await fetch('/api/library/download/book', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const downloadData = await downloadRes.json();
        if (downloadRes.status === 200) {
            btnElement.innerHTML = "✓";
            btnElement.style.color = "#22c55e"; // Icono verde
        } else if (downloadRes.status === 409) {
            btnElement.innerHTML = "✓";
            btnElement.style.color = "#3b82f6"; // Icono azul (ya existe)
        } else {
            throw new Error(downloadData.message || "Error");
        }
    } catch (err) {
        console.error("Download Error:", err);
        btnElement.innerHTML = "✕"; // X roja
        btnElement.style.color = "#ef4444";
        btnElement.disabled = false;
        // Restaurar icono original después de 3 seg
        setTimeout(() => {
            btnElement.innerHTML = originalText;
            btnElement.style.color = "";
        }, 3000);
    }
 }
 async function loadChapters(targetProvider = null) {
    const listContainer = document.getElementById('chapters-list');
    const loadingMsg = document.getElementById('loading-msg');
    if(listContainer) listContainer.innerHTML = '';
    if(loadingMsg) loadingMsg.style.display = 'block';
    if (!targetProvider) {
        const select = document.getElementById('provider-filter');
        targetProvider = select ? select.value : (availableExtensions[0] || 'all');
    }
    try {
        let fetchUrl;
        let isLocalRequest = targetProvider === 'local';
        if (isLocalRequest) {
            fetchUrl = `/api/library/${bookId}/units`;
        } else {
            const source = extensionName || 'anilist';
            fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
            if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
        }
        const res = await fetch(fetchUrl);
        const data = await res.json();
        if(loadingMsg) loadingMsg.style.display = 'none';
        let rawData = [];
        if (isLocalRequest) {
            rawData = (data.units || []).map((unit, idx) => ({
                id: unit.id || idx, number: unit.number, title: unit.name,
                provider: 'local', index: idx, format: unit.format, language: 'local'
            }));
        } else {
            rawData = data.chapters || [];
        }
        processChaptersData(rawData);
    } catch (err) {
        if(loadingMsg) loadingMsg.style.display = 'none';
        if(listContainer) listContainer.innerHTML = '<div style="text-align:center; color: #ef4444;">Error loading chapters.</div>';
        console.error(err);
    }
 }
 function setupLanguageSelector() {
    const selectorContainer = document.getElementById('language-selector-container');
    const select = document.getElementById('language-select');
    if (!selectorContainer || !select) return;
    if (uniqueLanguages.length <= 1) {
        selectorContainer.classList.add('hidden');
        currentLanguage = uniqueLanguages[0] || null;
        return;
    }
    selectorContainer.classList.remove('hidden');
    select.innerHTML = '';
    const langNames = { 'es': 'Español', 'es-419': 'Latino', 'en': 'English', 'pt-br': 'Português', 'ja': '日本語' };
    uniqueLanguages.forEach(lang => {
        const option = document.createElement('option');
        option.value = lang;
        option.textContent = langNames[lang] || lang.toUpperCase();
        select.appendChild(option);
    });
    if (uniqueLanguages.includes('es-419')) currentLanguage = 'es-419';
    else if (uniqueLanguages.includes('es')) currentLanguage = 'es';
    else currentLanguage = uniqueLanguages[0];
    select.value = currentLanguage;
    select.onchange = (e) => {
        currentLanguage = e.target.value;
        chapterPagination.currentPage = 1;
        filterAndRenderChapters();
    };
 }
 function filterAndRenderChapters() {
    let tempChapters = [...allChapters];
    if (currentLanguage && uniqueLanguages.length > 1) {
        tempChapters = tempChapters.filter(ch => ch.language === currentLanguage);
    }
    const searchQuery = document.getElementById('chapter-search')?.value.toLowerCase();
    if(searchQuery){
        tempChapters = tempChapters.filter(ch =>
            (ch.title && ch.title.toLowerCase().includes(searchQuery)) ||
            (ch.number && ch.number.toString().includes(searchQuery))
        );
    }
    tempChapters.sort((a, b) => {
        const numA = parseFloat(a.number) || 0;
        const numB = parseFloat(b.number) || 0;
        return isSortAscending ? numA - numB : numB - numA;
    });
    filteredChapters = tempChapters;
    chapterPagination.setTotalItems(filteredChapters.length);
    renderChapterList();
 }
 function renderChapterList() {
    const container = document.getElementById('chapters-list');
    if(!container) return;
    container.innerHTML = '';
    const itemsToShow = chapterPagination.getCurrentPageItems(filteredChapters);
    if (itemsToShow.length === 0) {
        container.innerHTML = '<div style="text-align:center; padding:2rem; color:#888;">No chapters found.</div>';
        return;
    }
    itemsToShow.forEach(chapter => {
        const el = document.createElement('div');
        el.className = 'chapter-item';
        // El clic principal abre el lector
        el.onclick = () => openReader(chapter.id, chapter.provider);
        const dateStr = chapter.date ? new Date(chapter.date).toLocaleDateString() : '';
        const providerLabel = chapter.provider !== 'local' ? chapter.provider : '';
        // Definimos el icono SVG de descarga para no ensuciar tanto el template string
        const downloadIcon = `
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>`;
        const isLocal = chapter.provider === 'local';
        const downloadBtnStyle = isLocal ? 'display:none;' : '';
        el.innerHTML = `
            <div class="chapter-info">
                <span class="chapter-number">Chapter ${chapter.number}</span>
                <span class="chapter-title">${chapter.title || ''}</span>
            </div>
            <div class="chapter-actions" style="display: flex; align-items: center; gap: 10px;">
                <div class="chapter-meta">
                    ${providerLabel ? `<span class="lang-tag">${providerLabel}</span>` : ''}
                    ${dateStr ? `<span>${dateStr}</span>` : ''}
                </div>
                <button class="download-btn" 
                    style="${downloadBtnStyle}"
                    onclick="event.stopPropagation(); downloadChapter('${chapter.id}', '${chapter.number}', '${chapter.provider}', this)"
                    title="Descargar">
                    ${downloadIcon}
                </button>
                <svg class="chapter-play-icon" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z"/>
                </svg>
            </div>
        `;
        container.appendChild(el);
    });
    chapterPagination.renderControls('pagination', 'page-info', 'prev-page', 'next-page');
 }
 function toggleSortOrder() {
    isSortAscending = !isSortAscending;
    const btn = document.getElementById('sort-btn');
    if(btn) btn.style.transform = isSortAscending ? 'rotate(180deg)' : 'rotate(0deg)';
    filterAndRenderChapters();
 }
 function setupReadButton() {
    const readBtn = document.getElementById('read-start-btn');
    if (!readBtn || allChapters.length === 0) return;
    const firstChapter = [...allChapters].sort((a,b) => a.index - b.index)[0];
    if (firstChapter) readBtn.onclick = () =>
        openReader(firstChapter.index ?? firstChapter.id, firstChapter.provider);
 }
 function openReader(chapterIndexOrId, provider) {
    const lang = currentLanguage ?? 'none';
    window.location.href =
        URLUtils.buildReadUrl(bookId, chapterIndexOrId, provider, extensionName || 'anilist')
        + `?lang=${lang}`;
 }
 async function checkLocalLibraryEntry() {
    try {
        const libraryType = bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
        const res = await fetch(`/api/library/${libraryType}/${bookId}`);
        if (!res.ok) return;
        const data = await res.json();
        if (data.matched) {
            isLocal = true;
            const pill = document.getElementById('local-pill');
            if (pill) {
                pill.textContent = 'Local';
                pill.style.display = 'inline-flex';
                pill.style.background = 'rgba(34, 197, 94, 0.2)';
                pill.style.color = '#22c55e';
                pill.style.borderColor = 'rgba(34, 197, 94, 0.3)';
            }
        }
    } catch (e) { console.error("Error checking local:", e); }
 }
 async function loadAvailableExtensions() {
    try {
        if (!bookData?.entry_type) return;
        console.log(bookData.entry_type)
        const type = bookData.entry_type === 'MANGA' ? 'manga' : 'novel';
        const res = await fetch(`/api/extensions/${type}`);
        const data = await res.json();
        availableExtensions = data.extensions || [];
        setupProviderFilter();
    } catch (err) {
        console.error(err);
    }
 }
 function setupProviderFilter() {
    const select = document.getElementById('provider-filter');
    if (!select) return;
    select.style.display = 'inline-block';
    select.innerHTML = '';
    const allOpt = document.createElement('option');
    allOpt.value = 'all';
    allOpt.innerText = 'All Providers';
    select.appendChild(allOpt);
    if (isLocal) {
        const localOpt = document.createElement('option');
        localOpt.value = 'local';
        localOpt.innerText = 'Local';
        select.appendChild(localOpt);
    }
    availableExtensions.forEach(ext => {
        const opt = document.createElement('option');
        opt.value = ext;
        opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
        select.appendChild(opt);
    });
    if (isLocal) select.value = 'local';
    else if (extensionName && availableExtensions.includes(extensionName)) select.value = extensionName;
    else if (availableExtensions.length > 0) select.value = availableExtensions[0];
    select.onchange = () => loadChapters(select.value);
 }
 function updateExtensionPill() {
    const pill = document.getElementById('extension-pill');
    if(pill && extensionName) { pill.innerText = extensionName; pill.style.display = 'inline-flex'; }
 }
 async function setupAddToListButton() {
    const btn = document.getElementById('add-to-list-btn');
    if (!btn || !bookData) return;
    ListModalManager.currentData = bookData;
    const entryType = ListModalManager.getEntryType(bookData);
    const idForCheck = extensionName ? bookSlug : bookId;
    await ListModalManager.checkIfInList(idForCheck, extensionName || 'anilist', entryType);
    updateCustomAddButton();
    btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
 }
 function updateCustomAddButton() {
    const btn = document.getElementById('add-to-list-btn');
    if(btn && ListModalManager.isInList) {
        btn.innerHTML = '✓ In Your List'; btn.style.background = 'rgba(34, 197, 94, 0.2)'; btn.style.color = '#22c55e'; btn.style.borderColor = '#22c55e';
    }
 }
 function setupModalClickOutside() {
    const modal = document.getElementById('add-list-modal');
    if (modal) {
        modal.addEventListener('click', (e) => {
            if (e.target.id === 'add-list-modal') ListModalManager.close();
        });
    }
 }
 function showError(message) {
    const titleEl = document.getElementById('title');
    if (titleEl) titleEl.innerText = message;
 }
 // Exports
 window.openReader = openReader;
 window.saveToList = () => {
    const idToSave = extensionName ? bookSlug : bookId;
    ListModalManager.save(idToSave, extensionName || 'anilist');
 };
 window.deleteFromList = () => {
    const idToDelete = extensionName ? bookSlug : bookId;
    ListModalManager.delete(idToDelete, extensionName || 'anilist');
 };
 window.closeAddToListModal = () => ListModalManager.close();
 window.openAddToListModal = () => ListModalManager.open(bookData, extensionName || 'anilist');
--- a/desktop/src/scripts/books/books.js
+++ b/desktop/src/scripts/books/books.js
@@ -55,7 +55,8 @@ function startHeroCycle() {
 async function updateHeroUI(book) {
    if(!book) return;
-
+    book.entry_type =
        book.format === 'MANGA' ? 'MANGA' : 'NOVEL';
    const title = book.title.english || book.title.romaji;
    const desc = book.description || "No description available.";
    const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';
--- a/desktop/src/scripts/books/reader.js
+++ b/desktop/src/scripts/books/reader.js
@@ -1,3 +1,4 @@
 const urlParams = new URLSearchParams(window.location.search);
 const reader = document.getElementById('reader');
 const panel = document.getElementById('settings-panel');
 const overlay = document.getElementById('overlay');
@@ -10,6 +11,16 @@ const nextBtn = document.getElementById('next-chapter');
 const lnSettings = document.getElementById('ln-settings');
 const mangaSettings = document.getElementById('manga-settings');
 const rawSource = urlParams.get('source') || 'anilist';
 const sourceParts = rawSource.split('?');
 const source = sourceParts[0];
 let lang =
    urlParams.get('lang') ??
    new URLSearchParams(sourceParts[1] || '').get('lang') ??
    'none';
 const config = {
    ln: {
        fontSize: 18,
@@ -33,11 +44,12 @@ let currentType = null;
 let currentPages = [];
 let observer = null;
 // === CAMBIO: Parseo de URL para obtener ID ===
 const parts = window.location.pathname.split('/');
 const bookId = parts[4];
-let chapter = parts[3];
+let currentChapterId = parts[3]; // Ahora es un ID (string)
 let provider = parts[2];
 let chaptersList = []; // Buffer para guardar el orden de capítulos
 function loadConfig() {
    try {
@@ -97,7 +109,7 @@ function applyStyles() {
        document.documentElement.style.setProperty('--ln-max-width', config.ln.maxWidth + 'px');
        document.documentElement.style.setProperty('--ln-font-family', config.ln.fontFamily);
        document.documentElement.style.setProperty('--ln-text-color', config.ln.textColor);
-        document.documentElement.style.setProperty('--bg-base', config.ln.bg);
+        document.documentElement.style.setProperty('--color-bg-base', config.ln.bg);
        document.documentElement.style.setProperty('--ln-text-align', config.ln.textAlign);
    }
@@ -116,6 +128,28 @@ function updateSettingsVisibility() {
    mangaSettings.classList.toggle('hidden', currentType !== 'manga');
 }
 // === CAMBIO: Nueva función para traer la lista de capítulos y saber el orden ===
 async function fetchChapterList() {
    try {
        // Reusamos el endpoint que lista capítulos
        const res = await fetch(`/api/book/${bookId}/chapters?source=${source}&provider=${provider}`);
        const data = await res.json();
        // Ordenamos por número para asegurar navegación correcta
        let list = data.chapters || [];
        list.sort((a, b) => Number(a.number) - Number(b.number));
        // Si hay filtro de idioma en la URL, filtramos la navegación también
        if (lang !== 'none') {
            list = list.filter(c => c.language === lang);
        }
        chaptersList = list;
    } catch (e) {
        console.error("Error fetching chapter list:", e);
    }
 }
 async function loadChapter() {
    reader.innerHTML = `
        <div class="loading-container">
@@ -124,26 +158,74 @@ async function loadChapter() {
        </div>
    `;
-    const urlParams = new URLSearchParams(window.location.search);
+    // === CAMBIO: Si no tenemos la lista de capítulos (y no es local), la pedimos ===
-    let source = urlParams.get('source');
+    if (provider !== 'local' && chaptersList.length === 0) {
-    if (!source) {
+        await fetchChapterList();
-        source = 'anilist';
+    }
    let newEndpoint;
    if (provider === 'local') {
        newEndpoint = `/api/library/${bookId}/units`;
    } else {
        // === CAMBIO: Usamos currentChapterId en la URL ===
        newEndpoint = `/api/book/${bookId}/${currentChapterId}/${provider}?source=${source}&lang=${lang}`;
    }
    const newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
    try {
        const res = await fetch(newEndpoint);
        const data = await res.json();
-        if (data.title) {
+        const chapterMeta = chaptersList.find(
-            chapterLabel.textContent = data.title;
+            c => String(c.id) === String(currentChapterId)
-            document.title = data.title;
+        );
-        } else {
+
-            chapterLabel.textContent = `Chapter ${chapter}`;
+        if (chapterMeta) {
-            document.title = `Chapter ${chapter}`;
+            chapterLabel.textContent = `Chapter ${chapterMeta.number} - ${chapterMeta.title}`;
            document.title = `Chapter ${chapterMeta.number} - ${chapterMeta.title}`;
        }
-        setupProgressTracking(data, source);
+        // Lógica específica para contenido LOCAL
        if (provider === 'local') {
            const unit = data.units.find(u => String(u.id) === String(currentChapterId));
            if (!unit) {
                reader.innerHTML = '<div class="loading-container"><span>Chapter not found (Local)</span></div>';
                return;
            }
            const manifestRes = await fetch(`/api/library/${unit.id}/manifest`);
            const manifest = await manifestRes.json();
            reader.innerHTML = '';
            // Setup navegación manual para local (simple index +/- 1)
            const unitIndex = data.units.findIndex(
                u => String(u.id) === String(currentChapterId)
            );
            setupLocalNavigation(unitIndex, data.units.length);
            if (manifest.type === 'manga') {
                currentType = 'manga';
                updateSettingsVisibility();
                applyStyles();
                currentPages = manifest.pages;
                await loadManga(currentPages);
                return;
            }
            if (manifest.type === 'ln') {
                currentType = 'ln';
                updateSettingsVisibility();
                applyStyles();
                const contentRes = await fetch(manifest.url);
                const html = await contentRes.text();
                loadLN(html);
                return;
            }
        }
        const rawSource = urlParams.get('source') || 'anilist';
        const source = rawSource.split('?')[0];
        const res2 = await fetch(`/api/book/${bookId}?source=${source}`);
        const data2 = await res2.json();
@@ -157,15 +239,27 @@ async function loadChapter() {
                mode: "reading"
            })
        });
        if (data.error) {
-            reader.innerHTML = `
+            reader.innerHTML = `<div class="loading-container"><span style="color: #ef4444;">Error: ${data.error}</span></div>`;
                <div class="loading-container">
                    <span style="color: #ef4444;">Error: ${data.error}</span>
                </div>
            `;
            return;
        }
        if (!chapterMeta) {
            if (data.title) {
                chapterLabel.textContent = `Chapter ${data.number ?? ''} - ${data.title}`;
                document.title = chapterLabel.textContent;
            } else {
                chapterLabel.textContent = `Chapter ${data.number ?? currentChapterId}`;
                document.title = chapterLabel.textContent;
            }
        }
        setupProgressTracking(data, source);
        // === CAMBIO: Actualizar botones basado en IDs ===
        updateNavigationButtons();
        currentType = data.type;
        updateSettingsVisibility();
        applyStyles();
@@ -173,11 +267,12 @@ async function loadChapter() {
        if (data.type === 'manga') {
            currentPages = data.pages || [];
-            loadManga(currentPages);
+            await loadManga(currentPages);
        } else if (data.type === 'ln') {
            loadLN(data.content);
        }
    } catch (error) {
        console.error(error);
        reader.innerHTML = `
            <div class="loading-container">
                <span style="color: #ef4444;">Error loading chapter: ${error.message}</span>
@@ -186,7 +281,91 @@ async function loadChapter() {
    }
 }
-function loadManga(pages) {
+// === CAMBIO: Lógica de navegación basada en IDs ===
 function updateNavigationButtons() {
    if (provider === 'local') return; // Se maneja aparte
    // Buscamos el índice actual en la lista completa
    const currentIndex = chaptersList.findIndex(c => String(c.id) === String(currentChapterId));
    if (currentIndex === -1) {
        console.warn("Current chapter not found in list, navigation disabled");
        prevBtn.disabled = true;
        nextBtn.disabled = true;
        prevBtn.style.opacity = 0.5;
        nextBtn.style.opacity = 0.5;
        return;
    }
    // Configurar botón ANTERIOR
    if (currentIndex > 0) {
        const prevId = chaptersList[currentIndex - 1].id;
        prevBtn.onclick = () => changeChapter(prevId);
        prevBtn.disabled = false;
        prevBtn.style.opacity = 1;
    } else {
        prevBtn.onclick = null;
        prevBtn.disabled = true;
        prevBtn.style.opacity = 0.5;
    }
    // Configurar botón SIGUIENTE
    if (currentIndex < chaptersList.length - 1) {
        const nextId = chaptersList[currentIndex + 1].id;
        nextBtn.onclick = () => changeChapter(nextId);
        nextBtn.disabled = false;
        nextBtn.style.opacity = 1;
    } else {
        nextBtn.onclick = null;
        nextBtn.disabled = true;
        nextBtn.style.opacity = 0.5;
    }
 }
 // Fallback para navegación local (basada en índices)
 function setupLocalNavigation(currentIndex, totalUnits) {
    if (currentIndex > 0) {
        prevBtn.onclick = () => changeChapter(currentIndex - 1);
        prevBtn.disabled = false;
        prevBtn.style.opacity = 1;
    } else {
        prevBtn.disabled = true;
        prevBtn.style.opacity = 0.5;
    }
    if (currentIndex < totalUnits - 1) {
        nextBtn.onclick = () => changeChapter(currentIndex + 1);
        nextBtn.disabled = false;
        nextBtn.style.opacity = 1;
    } else {
        nextBtn.disabled = true;
        nextBtn.style.opacity = 0.5;
    }
 }
 function changeChapter(newId) {
    currentChapterId = newId;
    updateURL(newId);
    window.scrollTo(0, 0);
    loadChapter();
 }
 function loadLongStrip(container, pages) {
    pages.forEach((page, index) => {
        const img = createImageElement(page, index);
        img.classList.remove('fit-width', 'fit-height', 'fit-screen');
        img.classList.add('longstrip-fit');
        container.appendChild(img);
    });
 }
 function updateURL(newId) {
    const newUrl = `/read/${provider}/${newId}/${bookId}?source=${source}&lang=${lang}`;
    window.history.pushState({}, '', newUrl);
 }
 async function loadManga(pages) {
    if (!pages || pages.length === 0) {
        reader.innerHTML = '<div class="loading-container"><span>No pages found</span></div>';
        return;
@@ -195,18 +374,22 @@ function loadManga(pages) {
    const container = document.createElement('div');
    container.className = 'manga-container';
-    let isLongStrip = false;
+    const analysis = await analyzePages(pages);
-    if (config.manga.mode === 'longstrip') {
+    const isLongStrip =
-        isLongStrip = true;
+        config.manga.mode === 'longstrip' ||
-    } else if (config.manga.mode === 'auto' && detectLongStrip(pages)) {
+        (config.manga.mode === 'auto' && analysis.tallRatio > 0.3);
        isLongStrip = true;
    }
-    const useDouble = config.manga.mode === 'double' ||
+    const useDouble =
-        (config.manga.mode === 'auto' && !isLongStrip && shouldUseDoublePage(pages));
+        !isLongStrip &&
        (
            config.manga.mode === 'double' ||
            (config.manga.mode === 'auto' && analysis.wideRatio < 0.3)
        );
-    if (useDouble) {
+    if (isLongStrip) {
        loadLongStrip(container, pages);
    } else if (useDouble) {
        loadDoublePage(container, pages);
    } else {
        loadSinglePage(container, pages);
@@ -217,20 +400,6 @@ function loadManga(pages) {
    enableMangaPageNavigation();
 }
 function shouldUseDoublePage(pages) {
    if (pages.length <= 5) return false;
    const widePages = pages.filter(p => {
        if (!p.height || !p.width) return false;
        const ratio = p.width / p.height;
        return ratio > 1.3;
    });
    if (widePages.length > pages.length * 0.3) return false;
    return true;
 }
 function loadSinglePage(container, pages) {
    pages.forEach((page, index) => {
        const img = createImageElement(page, index);
@@ -267,7 +436,6 @@ function loadDoublePage(container, pages) {
                    i++;
                } else {
                    const rightPage = createImageElement(nextPage, i + 1);
                    if (config.manga.direction === 'rtl') {
                        doubleContainer.appendChild(rightPage);
                        doubleContainer.appendChild(leftPage);
@@ -275,7 +443,6 @@ function loadDoublePage(container, pages) {
                        doubleContainer.appendChild(leftPage);
                        doubleContainer.appendChild(rightPage);
                    }
                    container.appendChild(doubleContainer);
                    i += 2;
                }
@@ -293,7 +460,9 @@ function createImageElement(page, index) {
    img.className = 'page-img';
    img.dataset.index = index;
-    const url = buildProxyUrl(page.url, page.headers);
+    const url = provider === 'local'
        ? page.url
        : buildProxyUrl(page.url, page.headers);
    const placeholder = "/public/assets/placeholder.svg";
    img.onerror = () => {
@@ -302,6 +471,18 @@ function createImageElement(page, index) {
        }
    };
    img.onload = () => {
        const ratio = img.naturalWidth / img.naturalHeight;
        if (ratio > 1.3) {
            const double = img.closest('.double-container');
            if (double) {
                double.replaceWith(img);
            }
        }
    };
    if (config.manga.mode === 'longstrip' && index > 0) {
        img.classList.add('longstrip-fit');
    } else {
@@ -316,35 +497,60 @@ function createImageElement(page, index) {
        img.dataset.src = url;
        img.loading = 'lazy';
    }
    img.alt = `Page ${index + 1}`;
    return img;
 }
 function buildProxyUrl(url, headers = {}) {
-    const params = new URLSearchParams({
+    const params = new URLSearchParams({ url });
-        url
+    if (headers.Referer || headers.referer)
-    });
+        params.append("referer", headers.Referer || headers.referer);
-
+    if (headers["User-Agent"] || headers["user-agent"])
-    if (headers.referer) params.append('referer', headers.referer);
+        params.append("userAgent", headers["User-Agent"] || headers["user-agent"]);
-    if (headers['user-agent']) params.append('ua', headers['user-agent']);
+    if (headers.Origin || headers.origin)
-    if (headers.cookie) params.append('cookie', headers.cookie);
+        params.append("origin", headers.Origin || headers.origin);
    return `/api/proxy?${params.toString()}`;
 }
-function detectLongStrip(pages) {
+function analyzePages(pages, sample = 6) {
-    if (!pages || pages.length === 0) return false;
+    return new Promise(resolve => {
        let tall = 0;
        let wide = 0;
        let loaded = 0;
-    const relevant = pages.slice(1);
+        const count = Math.min(sample, pages.length);
-    const tall = relevant.filter(p => p.height && p.width && (p.height / p.width) > 2);
+
-    return tall.length >= 2 || (tall.length / relevant.length) > 0.3;
+        for (let i = 0; i < count; i++) {
            const img = new Image();
            img.src = provider === 'local'
                ? pages[i].url
                : buildProxyUrl(pages[i].url, pages[i].headers);
            img.onload = () => {
                const ratio = img.naturalWidth / img.naturalHeight;
                if (ratio < 0.6) tall++;
                else if (ratio > 1.3) wide++;
                loaded++;
                if (loaded === count) finish();
            };
            img.onerror = () => {
                loaded++;
                if (loaded === count) finish();
            };
        }
        function finish() {
            resolve({
                tallRatio: tall / count,
                wideRatio: wide / count
            });
        }
    });
 }
 function setupLazyLoading() {
    if (observer) observer.disconnect();
    observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
@@ -356,10 +562,7 @@ function setupLazyLoading() {
                }
            }
        });
-    }, {
+    }, { rootMargin: '200px' });
        rootMargin: '200px'
    });
    document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
 }
@@ -370,161 +573,100 @@ function loadLN(html) {
    reader.appendChild(div);
 }
 // Listeners de configuración
 document.getElementById('font-size').addEventListener('input', (e) => {
    config.ln.fontSize = parseInt(e.target.value);
    document.getElementById('font-size-value').textContent = e.target.value + 'px';
-    applyStyles();
+    applyStyles(); saveConfig();
    saveConfig();
 });
 document.getElementById('line-height').addEventListener('input', (e) => {
    config.ln.lineHeight = parseFloat(e.target.value);
    document.getElementById('line-height-value').textContent = e.target.value;
-    applyStyles();
+    applyStyles(); saveConfig();
    saveConfig();
 });
 document.getElementById('max-width').addEventListener('input', (e) => {
    config.ln.maxWidth = parseInt(e.target.value);
    document.getElementById('max-width-value').textContent = e.target.value + 'px';
-    applyStyles();
+    applyStyles(); saveConfig();
    saveConfig();
 });
 document.getElementById('font-family').addEventListener('change', (e) => {
    config.ln.fontFamily = e.target.value;
-    applyStyles();
+    applyStyles(); saveConfig();
    saveConfig();
 });
 document.getElementById('text-color').addEventListener('change', (e) => {
    config.ln.textColor = e.target.value;
-    applyStyles();
+    applyStyles(); saveConfig();
    saveConfig();
 });
 document.getElementById('bg-color').addEventListener('change', (e) => {
    config.ln.bg = e.target.value;
-    applyStyles();
+    applyStyles(); saveConfig();
    saveConfig();
 });
 document.querySelectorAll('[data-align]').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        config.ln.textAlign = btn.dataset.align;
-        applyStyles();
+        applyStyles(); saveConfig();
        saveConfig();
    });
 });
 document.querySelectorAll('[data-preset]').forEach(btn => {
    btn.addEventListener('click', () => {
        const preset = btn.dataset.preset;
        const presets = {
            dark: { bg: '#14141b', textColor: '#e5e7eb' },
            sepia: { bg: '#f4ecd8', textColor: '#5c472d' },
            light: { bg: '#fafafa', textColor: '#1f2937' },
            amoled: { bg: '#000000', textColor: '#ffffff' }
        };
        if (presets[preset]) {
            Object.assign(config.ln, presets[preset]);
            document.getElementById('bg-color').value = config.ln.bg;
            document.getElementById('text-color').value = config.ln.textColor;
-            applyStyles();
+            applyStyles(); saveConfig();
            saveConfig();
        }
    });
 });
 document.getElementById('display-mode').addEventListener('change', (e) => {
    config.manga.mode = e.target.value;
-    saveConfig();
+    saveConfig(); loadChapter();
    loadChapter();
 });
 document.getElementById('image-fit').addEventListener('change', (e) => {
    config.manga.imageFit = e.target.value;
-    saveConfig();
+    saveConfig(); loadChapter();
    loadChapter();
 });
 document.getElementById('page-spacing').addEventListener('input', (e) => {
    config.manga.spacing = parseInt(e.target.value);
    document.getElementById('page-spacing-value').textContent = e.target.value + 'px';
-    applyStyles();
+    applyStyles(); saveConfig();
    saveConfig();
 });
 document.getElementById('preload-count').addEventListener('change', (e) => {
    config.manga.preloadCount = parseInt(e.target.value);
    saveConfig();
 });
 document.querySelectorAll('[data-direction]').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        config.manga.direction = btn.dataset.direction;
-        saveConfig();
+        saveConfig(); loadChapter();
        loadChapter();
    });
 });
-prevBtn.addEventListener('click', () => {
+// Botón "Atrás"
    const current = parseInt(chapter);
    if (current <= 0) return;
    const newChapter = String(current - 1);
    updateURL(newChapter);
    window.scrollTo(0, 0);
    loadChapter();
 });
 nextBtn.addEventListener('click', () => {
    const newChapter = String(parseInt(chapter) + 1);
    updateURL(newChapter);
    window.scrollTo(0, 0);
    loadChapter();
 });
 function updateURL(newChapter) {
    chapter = newChapter;
    const urlParams = new URLSearchParams(window.location.search);
    let source = urlParams.get('source');
    let src;
    if (source === 'anilist') {
        src= "?source=anilist"
    } else {
        src= `?source=${source}`
    }
    const newUrl = `/read/${provider}/${chapter}/${bookId}${src}`;
    window.history.pushState({}, '', newUrl);
 }
 document.getElementById('back-btn').addEventListener('click', () => {
    const parts = window.location.pathname.split('/');
    const mangaId = parts[4];
-    const urlParams = new URLSearchParams(window.location.search);
+    if (source === 'anilist' || !source) {
-    let source = urlParams.get('source');
+        window.location.href = `/book/${bookId}`;
    if (source === 'anilist') {
        window.location.href = `/book/${mangaId}`;
    } else {
-        window.location.href = `/book/${source}/${mangaId}`;
+        window.location.href = `/book/${source}/${bookId}`;
    }
 });
 // Panel de configuración
 settingsBtn.addEventListener('click', () => {
    panel.classList.add('open');
    overlay.classList.add('active');
 });
 closePanel.addEventListener('click', closeSettings);
 overlay.addEventListener('click', closeSettings);
@@ -532,7 +674,6 @@ function closeSettings() {
    panel.classList.remove('open');
    overlay.classList.remove('active');
 }
 document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && panel.classList.contains('open')) {
        closeSettings();
@@ -542,37 +683,24 @@ document.addEventListener('keydown', (e) => {
 function enableMangaPageNavigation() {
    if (currentType !== 'manga') return;
    const logicalPages = [];
    document.querySelectorAll('.manga-container > *').forEach(el => {
-        if (el.classList.contains('double-container')) {
+        if (el.classList.contains('double-container') || el.tagName === 'IMG') {
            logicalPages.push(el);
        } else if (el.tagName === 'IMG') {
            logicalPages.push(el);
        }
    });
    if (logicalPages.length === 0) return;
    function scrollToLogical(index) {
        if (index < 0 || index >= logicalPages.length) return;
        const topBar = document.querySelector('.top-bar');
        const offset = topBar ? -topBar.offsetHeight : 0;
-
+        const y = logicalPages[index].getBoundingClientRect().top + window.pageYOffset + offset;
-        const y = logicalPages[index].getBoundingClientRect().top
+        window.scrollTo({ top: y, behavior: 'smooth' });
            + window.pageYOffset
            + offset;
        window.scrollTo({
            top: y,
            behavior: 'smooth'
        });
    }
    function getCurrentLogicalIndex() {
        let closest = 0;
        let minDist = Infinity;
        logicalPages.forEach((el, i) => {
            const rect = el.getBoundingClientRect();
            const dist = Math.abs(rect.top);
@@ -581,53 +709,36 @@ function enableMangaPageNavigation() {
                closest = i;
            }
        });
        return closest;
    }
    const rtl = () => config.manga.direction === 'rtl';
    document.addEventListener('keydown', (e) => {
        if (currentType !== 'manga') return;
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
        const index = getCurrentLogicalIndex();
-
+        if (e.key === 'ArrowLeft') scrollToLogical(rtl() ? index + 1 : index - 1);
-        if (e.key === 'ArrowLeft') {
+        if (e.key === 'ArrowRight') scrollToLogical(rtl() ? index - 1 : index + 1);
            scrollToLogical(rtl() ? index + 1 : index - 1);
        }
        if (e.key === 'ArrowRight') {
            scrollToLogical(rtl() ? index - 1 : index + 1);
        }
    });
    reader.addEventListener('click', (e) => {
        if (currentType !== 'manga') return;
        const bounds = reader.getBoundingClientRect();
        const x = e.clientX - bounds.left;
        const half = bounds.width / 2;
        const index = getCurrentLogicalIndex();
-
+        if (x < half) scrollToLogical(rtl() ? index + 1 : index - 1);
-        if (x < half) {
+        else scrollToLogical(rtl() ? index - 1 : index + 1);
            scrollToLogical(rtl() ? index + 1 : index - 1);
        } else {
            scrollToLogical(rtl() ? index - 1 : index + 1);
        }
    });
 }
 let resizeTimer;
 window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
-    resizeTimer = setTimeout(() => {
+    resizeTimer = setTimeout(() => { applyStyles(); }, 250);
        applyStyles();
    }, 250);
 });
 let progressSaved = false;
 function setupProgressTracking(data, source) {
    progressSaved = false;
@@ -640,25 +751,16 @@ function setupProgressTracking(data, source) {
            source: source,
            entry_type: data.type === 'manga' ? 'MANGA' : 'NOVEL',
            status: 'CURRENT',
-            progress: source === 'anilist'
+            progress: source === 'anilist' ? Math.floor(chapterNumber) : chapterNumber
                ? Math.floor(chapterNumber)
                : chapterNumber
        };
        try {
            await fetch('/api/list/entry', {
                method: 'POST',
-                headers: {
+                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify(body)
            });
-        } catch (err) {
+        } catch (err) { console.error('Error updating progress:', err); }
            console.error('Error updating progress:', err);
        }
    }
    function checkProgress() {
@@ -668,25 +770,22 @@ function setupProgressTracking(data, source) {
        if (percent >= 0.8 && !progressSaved) {
            progressSaved = true;
            const chapterNumber = (typeof data.number !== 'undefined' && data.number !== null)
                ? data.number
-                : Number(chapter);
+                : 0; // Fallback si no hay numero
            sendProgress(chapterNumber);
            window.removeEventListener('scroll', checkProgress);
        }
    }
    window.removeEventListener('scroll', checkProgress);
    window.addEventListener('scroll', checkProgress);
 }
-if (!bookId || !chapter || !provider) {
+if (!bookId || !currentChapterId || !provider) {
    reader.innerHTML = `
        <div class="loading-container">
-            <span style="color: #ef4444;">Missing required parameters (bookId, chapter, provider)</span>
+            <span style="color: #ef4444;">Missing required parameters (bookId, chapterId, provider)</span>
        </div>
    `;
 } else {
--- a/desktop/src/scripts/gallery/gallery.js
+++ b/desktop/src/scripts/gallery/gallery.js
@@ -1,5 +1,5 @@
 const providerSelector = document.getElementById('provider-selector');
-const searchInput = document.getElementById('main-search-input');
+const searchInput = document.getElementById('search-input');
 const resultsContainer = document.getElementById('gallery-results');
 let currentPage = 1;
@@ -299,7 +299,7 @@ async function searchGallery(isLoadMore = false) {
            const msg = favoritesMode
                ? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
                : 'No results found';
-            resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
+            resultsContainer.innerHTML = `<p style="text-align:center;color:var(--color-text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
        }
        if (msnry) msnry.layout();
--- a/desktop/src/scripts/gallery/image.js
+++ b/desktop/src/scripts/gallery/image.js
--- a/desktop/src/scripts/marketplace.js
+++ b/desktop/src/scripts/marketplace.js
@@ -0,0 +1,262 @@
 const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
 const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
 const INSTALLED_EXTENSIONS_API = '/api/extensions';
 const UPDATE_EXTENSIONS_API = '/api/extensions/update';
 const marketplaceContent = document.getElementById('marketplace-content');
 const filterSelect = document.getElementById('extension-filter');
 const updateAllBtn = document.getElementById('btn-update-all');
 const modal = document.getElementById('customModal');
 const modalTitle = document.getElementById('modalTitle');
 const modalMessage = document.getElementById('modalMessage');
 const modalConfirmBtn = document.getElementById('modalConfirmButton');
 const modalCloseBtn = document.getElementById('modalCloseButton');
 let marketplaceMetadata = {};
 let installedExtensions = [];
 let currentTab = 'marketplace';
 async function loadMarketplace() {
    showSkeletons();
    try {
        const [metaRes, installedRes] = await Promise.all([
            fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
            fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
        ]);
        marketplaceMetadata = metaRes.extensions;
        installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
        initTabs();
        renderGroupedView();
        if (filterSelect) {
            filterSelect.addEventListener('change', () => renderGroupedView());
        }
        if (updateAllBtn) {
            updateAllBtn.onclick = handleUpdateAll;
        }
    } catch (error) {
        console.error('Error loading marketplace:', error);
        marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
    }
 }
 function initTabs() {
    const tabs = document.querySelectorAll('.tab-button');
    tabs.forEach(tab => {
        tab.onclick = () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            currentTab = tab.dataset.tab;
            if (updateAllBtn) {
                if (currentTab === 'installed') {
                    updateAllBtn.classList.remove('hidden');
                } else {
                    updateAllBtn.classList.add('hidden');
                }
            }
            renderGroupedView();
        };
    });
 }
 async function handleUpdateAll() {
    const originalText = updateAllBtn.innerText;
    try {
        updateAllBtn.disabled = true;
        updateAllBtn.innerText = 'Updating...';
        const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
        if (!res.ok) throw new Error('Update failed');
        const data = await res.json();
        if (data.updated && data.updated.length > 0) {
            const list = data.updated.join(', ');
            window.NotificationUtils.success(`Updated: ${list}`);
            await loadMarketplace();
        } else {
            window.NotificationUtils.info('Everything is up to date.');
        }
    } catch (error) {
        console.error('Update All Error:', error);
        window.NotificationUtils.error('Failed to perform bulk update.');
    } finally {
        updateAllBtn.disabled = false;
        updateAllBtn.innerText = originalText;
    }
 }
 function renderGroupedView() {
    marketplaceContent.innerHTML = '';
    const activeFilter = filterSelect.value;
    const groups = {};
    let listToRender = [];
    if (currentTab === 'marketplace') {
        for (const [id, data] of Object.entries(marketplaceMetadata)) {
            listToRender.push({
                id,
                ...data,
                isInstalled: installedExtensions.includes(id.toLowerCase())
            });
        }
    } else {
        for (const [id, data] of Object.entries(marketplaceMetadata)) {
            if (installedExtensions.includes(id.toLowerCase())) {
                listToRender.push({ id, ...data, isInstalled: true });
            }
        }
        installedExtensions.forEach(id => {
            const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
            if (!existsInMeta) {
                listToRender.push({
                    id: id,
                    name: id.charAt(0).toUpperCase() + id.slice(1),
                    type: 'Local',
                    author: 'Unknown',
                    isInstalled: true
                });
            }
        });
    }
    listToRender.forEach(ext => {
        const type = ext.type || 'Other';
        if (activeFilter !== 'All' && type !== activeFilter) return;
        if (!groups[type]) groups[type] = [];
        groups[type].push(ext);
    });
    const sortedTypes = Object.keys(groups).sort();
    if (sortedTypes.length === 0) {
        marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
        return;
    }
    sortedTypes.forEach(type => {
        const section = document.createElement('div');
        section.className = 'category-group';
        const title = document.createElement('h2');
        title.className = 'marketplace-section-title';
        title.innerText = type.replace('-', ' ');
        const grid = document.createElement('div');
        grid.className = 'marketplace-grid';
        groups[type].forEach(ext => grid.appendChild(createCard(ext)));
        section.appendChild(title);
        section.appendChild(grid);
        marketplaceContent.appendChild(section);
    });
 }
 function createCard(ext) {
    const card = document.createElement('div');
    card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;
    const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`;
    let buttonHtml = '';
    if (ext.isInstalled) {
        buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
    } else if (ext.broken) {
        buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
    } else {
        buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
    }
    card.innerHTML = `
        <img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
        <div class="card-content-wrapper">
            <h3 class="extension-name">${ext.name}</h3>
            <span class="extension-author">by ${ext.author || 'Unknown'}</span>
            <p class="extension-description">${ext.description || 'No description available.'}</p>
            <div class="extension-tags">
                <span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
                    ${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
                </span>
                ${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
            </div>
        </div>
        ${buttonHtml}
    `;
    const btn = card.querySelector('.extension-action-button');
    if (!ext.broken || ext.isInstalled) {
        btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
    }
    return card;
 }
 function showModal(title, message, showConfirm = false, onConfirm = null) {
    modalTitle.innerText = title;
    modalMessage.innerText = message;
    if (showConfirm) {
        modalConfirmBtn.classList.remove('hidden');
        modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
    } else {
        modalConfirmBtn.classList.add('hidden');
    }
    modalCloseBtn.onclick = hideModal;
    modal.classList.remove('hidden');
 }
 function hideModal() { modal.classList.add('hidden'); }
 async function handleInstall(ext) {
    try {
        const res = await fetch('/api/extensions/install', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ url: ext.entry })
        });
        if (res.ok) {
            installedExtensions.push(ext.id.toLowerCase());
            renderGroupedView();
            window.NotificationUtils.success(`${ext.name} installed!`);
        }
    } catch (e) { window.NotificationUtils.error('Install failed.'); }
 }
 function promptUninstall(ext) {
    showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
 }
 async function handleUninstall(ext) {
    try {
        const res = await fetch('/api/extensions/uninstall', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ fileName: ext.id + '.js' })
        });
        if (res.ok) {
            installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
            renderGroupedView();
            window.NotificationUtils.info(`${ext.name} uninstalled.`);
        }
    } catch (e) { window.NotificationUtils.error('Uninstall failed.'); }
 }
 function showSkeletons() {
    marketplaceContent.innerHTML = `
        <div class="marketplace-grid">
            ${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
        </div>
    `;
 }
 document.addEventListener('DOMContentLoaded', loadMarketplace);
--- a/desktop/src/scripts/profile.js
+++ b/desktop/src/scripts/profile.js
@@ -0,0 +1,585 @@
 const API_BASE = '/api';
 const DashboardApp = {
    State: {
        currentList: [],
        filteredList: [],
        localLibraryData: [],
        currentUserId: null,
        currentLocalType: 'anime',
        pagination: {
            itemsPerPage: 50,
            visibleCount: 50
        }
    },
    init: async function() {
        console.log('Initializing Dashboard...');
        await this.User.init();
        await this.Tracking.load();
        this.UI.setupTabSystem();
        this.initListeners();
        const localInput = document.getElementById('local-search-input');
        if(localInput) {
            localInput.addEventListener('input', (e) => this.Library.filterContent(e.target.value));
        }
    },
    initListeners: function() {
        document.getElementById('scan-incremental-btn')?.addEventListener('click', () => this.Library.triggerScan('incremental'));
        document.getElementById('scan-full-btn')?.addEventListener('click', () => this.Library.triggerScan('full'));
        document.getElementById('profile-form')?.addEventListener('submit', (e) => this.User.updateProfile(e));
        document.getElementById('password-form')?.addEventListener('submit', (e) => this.User.changePassword(e));
        document.getElementById('logout-btn')?.addEventListener('click', () => window.AuthUtils.logout());
        const fileInput = document.getElementById('avatar-upload');
        if (fileInput) {
            fileInput.addEventListener('change', (e) => {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = evt => {
                        document.getElementById('user-avatar').src = evt.target.result;
                        const urlInput = document.getElementById('setting-avatar-url');
                        if(urlInput) urlInput.value = '';
                    };
                    reader.readAsDataURL(file);
                }
            });
        }
        const trackingInput = document.getElementById('tracking-search-input');
        if (trackingInput) trackingInput.addEventListener('input', () => this.Tracking.applyFilters());
        ['status-filter', 'type-filter', 'sort-filter'].forEach(id => {
            document.getElementById(id)?.addEventListener('change', () => this.Tracking.applyFilters());
        });
        document.querySelectorAll('.view-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                const view = btn.dataset.view;
                const container = document.getElementById('list-container');
                view === 'list' ? container.classList.add('list-view') : container.classList.remove('list-view');
            });
        });
    },
    User: {
        init: async function() {
            try {
                const headers = window.AuthUtils.getSimpleAuthHeaders();
                const res = await fetch(`${API_BASE}/me`, { headers });
                if (res.ok) {
                    const data = await res.json();
                    document.getElementById('user-username').textContent = data.username;
                    const settingUsername = document.getElementById('setting-username');
                    if(settingUsername) settingUsername.value = data.username;
                    if (data.avatar) {
                        document.getElementById('user-avatar').src = data.avatar;
                    }
                }
                const token = localStorage.getItem('token');
                if (token) {
                    const payload = JSON.parse(atob(token.split('.')[1]));
                    DashboardApp.State.currentUserId = payload.id;
                    await this.checkIntegrations(payload.id);
                }
            } catch (err) {
                console.error("Error loading user profile:", err);
            }
        },
        checkIntegrations: async function(userId) {
            if (!userId) return;
            try {
                const res = await fetch(`${API_BASE}/users/${userId}/integration`);
                let data = { connected: false };
                if (res.ok) data = await res.json();
                this.updateIntegrationUI(data, userId);
            } catch (e) { console.error("Integration check error:", e); }
        },
        updateIntegrationUI: function(data, userId) {
            const statusEl = document.getElementById('anilist-status');
            const btn = document.getElementById('anilist-action-btn');
            const headerBadge = document.getElementById('header-anilist-link');
            if (data.connected) {
                if (headerBadge) {
                    headerBadge.style.display = 'flex';
                    headerBadge.href = `https://anilist.co/user/${data.anilistUserId}`;
                    headerBadge.title = `Connected as ${data.anilistUserId}`;
                }
                if (statusEl) {
                    statusEl.textContent = `Connected as ID: ${data.anilistUserId}`;
                    statusEl.style.color = 'var(--color-success)';
                }
                if (btn) {
                    btn.textContent = 'Disconnect';
                    btn.className = 'btn-stream-outline link-danger';
                    btn.onclick = () => this.disconnectAniList(userId);
                }
            } else {
                if (headerBadge) headerBadge.style.display = 'none';
                if (statusEl) {
                    statusEl.textContent = 'Not connected';
                    statusEl.style.color = 'var(--color-text-secondary)';
                }
                if (btn) {
                    btn.textContent = 'Connect';
                    btn.className = 'btn-stream-outline';
                    btn.onclick = () => this.redirectToAniListLogin();
                }
            }
        },
        redirectToAniListLogin: async function() {
            if (!DashboardApp.State.currentUserId) return;
            try {
                const clientId = 32898;
                const redirectUri = encodeURIComponent(window.location.origin + '/api/anilist');
                const state = encodeURIComponent(DashboardApp.State.currentUserId);
                window.location.href = `https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&state=${state}`;
            } catch (err) { console.error(err); alert('Error starting AniList login'); }
        },
        disconnectAniList: async function(userId) {
            if(!confirm("Disconnect AniList?")) return;
            try {
                const token = localStorage.getItem('token');
                await fetch(`${API_BASE}/users/${userId}/integration`, {
                    method: 'DELETE',
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                this.checkIntegrations(userId);
            } catch (e) { alert("Failed to disconnect"); }
        },
        updateProfile: async function(e) {
            e.preventDefault();
            const userId = DashboardApp.State.currentUserId;
            if (!userId) return;
            const username = document.getElementById('setting-username').value;
            const urlInput = document.getElementById('setting-avatar-url')?.value || '';
            const fileInput = document.getElementById('avatar-upload');
            let finalAvatar = null;
            if (fileInput && fileInput.files && fileInput.files[0]) {
                try {
                    finalAvatar = await DashboardApp.Utils.fileToBase64(fileInput.files[0]);
                } catch (err) { alert("Error reading file"); return; }
            } else if (urlInput.trim() !== "") {
                finalAvatar = urlInput.trim();
            }
            const bodyData = { username };
            if (finalAvatar) bodyData.profilePictureUrl = finalAvatar;
            try {
                const res = await fetch(`${API_BASE}/users/${userId}`, {
                    method: 'PUT',
                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
                    body: JSON.stringify(bodyData)
                });
                if (res.ok) alert('Profile updated successfully!');
                else { const err = await res.json(); alert(err.error || 'Update failed'); }
            } catch (e) { console.error(e); }
        },
        changePassword: async function(e) {
            e.preventDefault();
            const userId = DashboardApp.State.currentUserId;
            if (!userId) return;
            const currentPassword = document.getElementById('current-password').value;
            const newPassword = document.getElementById('new-password').value;
            try {
                const res = await fetch(`${API_BASE}/users/${userId}/password`, {
                    method: 'PUT',
                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
                    body: JSON.stringify({ currentPassword, newPassword })
                });
                const data = await res.json();
                if (res.ok) { alert("Password updated successfully"); document.getElementById('password-form').reset(); }
                else alert(data.error || "Failed to update password");
            } catch (e) { console.error(e); }
        }
    },
    Tracking: {
        load: async function() {
            const loadingState = document.getElementById('loading-state');
            const emptyState = document.getElementById('empty-state');
            const container = document.getElementById('list-container');
            try {
                loadingState.style.display = 'flex';
                emptyState.style.display = 'none';
                container.innerHTML = '';
                const response = await fetch(`${API_BASE}/list`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
                if (!response.ok) throw new Error('Failed');
                const data = await response.json();
                DashboardApp.State.currentList = data.results || [];
                this.updateStats();
                loadingState.style.display = 'none';
                if (DashboardApp.State.currentList.length === 0) emptyState.style.display = 'flex';
                else this.applyFilters();
            } catch (error) {
                console.error(error);
                loadingState.style.display = 'none';
            }
        },
        updateStats: function() {
            const list = DashboardApp.State.currentList;
            const animeCount = list.filter(item => item.entry_type === 'ANIME').length;
            const mangaCount = list.filter(item => item.entry_type === 'MANGA').length;
            document.getElementById('total-stat').textContent = list.length;
            if (document.getElementById('anime-stat')) document.getElementById('anime-stat').textContent = animeCount;
            if (document.getElementById('manga-stat')) document.getElementById('manga-stat').textContent = mangaCount;
        },
        applyFilters: function() {
            const statusFilter = document.getElementById('status-filter').value;
            const typeFilter = document.getElementById('type-filter').value;
            const sortFilter = document.getElementById('sort-filter').value;
            const searchInput = document.getElementById('tracking-search-input');
            const searchQuery = searchInput ? searchInput.value.toLowerCase().trim() : '';
            let result = [...DashboardApp.State.currentList];
            if (searchQuery) {
                result = result.filter(item => (item.title ? item.title.toLowerCase() : '').includes(searchQuery));
            }
            if (statusFilter !== 'all') result = result.filter(item => item.status === statusFilter);
            if (typeFilter !== 'all') result = result.filter(item => item.entry_type === typeFilter);
            if (sortFilter === 'title') result.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
            else if (sortFilter === 'score') result.sort((a, b) => (b.score || 0) - (a.score || 0));
            else result.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
            DashboardApp.State.filteredList = result;
            DashboardApp.State.pagination.visibleCount = DashboardApp.State.pagination.itemsPerPage;
            this.render();
        },
        render: function() {
            const container = document.getElementById('list-container');
            container.innerHTML = '';
            const list = DashboardApp.State.filteredList;
            const count = DashboardApp.State.pagination.visibleCount;
            if (list.length === 0) {
                container.innerHTML = '<div class="empty-text" style="grid-column: 1/-1; text-align:center; color: var(--color-text-secondary);">No matches found</div>';
                return;
            }
            const itemsToShow = list.slice(0, count);
            itemsToShow.forEach(item => container.appendChild(this.createItemElement(item)));
            if (count < list.length) {
                this.renderLoadMoreButton(container, list.length - count);
            }
        },
        createItemElement: function(item) {
            const div = document.createElement('div');
            div.className = 'list-item';
            const itemLink = this.getEntryLink(item);
            const posterUrl = item.poster || '/public/assets/placeholder.svg';
            const progress = item.progress || 0;
            const totalUnits = item.entry_type === 'ANIME' ? item.total_episodes || 0 : item.total_chapters || 0;
            const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
            const score = item.score ? item.score.toFixed(1) : null;
            const entryType = (item.entry_type).toUpperCase();
            const statusLabels = {
                'CURRENT': entryType === 'ANIME' ? 'Watching' : 'Reading',
                'COMPLETED': 'Completed', 'PLANNING': 'Planning', 'PAUSED': 'Paused',
                'DROPPED': 'Dropped', 'REPEATING': entryType === 'ANIME' ? 'Rewatching' : 'Rereading'
            };
            const extraInfo = [];
            if (item.repeat_count > 0) extraInfo.push(`<span class="meta-pill repeat-pill">🔁 ${item.repeat_count}</span>`);
            if (item.is_private) extraInfo.push('<span class="meta-pill private-pill">🔒 Private</span>');
            div.innerHTML = `
                <a href="${itemLink}" class="item-poster-link">
                    <img src="${posterUrl}" alt="${item.title}" class="item-poster" onerror="this.src='/public/assets/placeholder.svg'">
                </a>
                <div class="item-content">
                    <div>
                        <a href="${itemLink}" style="text-decoration:none; color:inherit;">
                            <h3 class="item-title">${item.title || 'Unknown'}</h3>
                        </a>
                        <div class="item-meta">
                            <span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
                            <span class="meta-pill type-pill">${entryType}</span> 
                            <span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
                            ${extraInfo.join('')}
                        </div>
                    </div>
                    <div>
                        <div class="progress-bar-container"><div class="progress-bar" style="width: ${progressPercent}%"></div></div>
                        <div class="progress-text">
                            <span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''}</span> 
                            ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
                        </div>
                    </div>
                </div>
                <button class="edit-icon-btn">
                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15.232 5.232l3.536 3.536m-2.036-5.808a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L15.232 5.232z"/></svg>
                </button>
            `;
            div.querySelector('.edit-icon-btn').onclick = (e) => {
                e.preventDefault(); e.stopPropagation();
                window.ListModalManager.currentData = item;
                window.ListModalManager.isInList = true;
                window.ListModalManager.currentEntry = item;
                window.ListModalManager.open(item, item.source || 'anilist');
            };
            return div;
        },
        renderLoadMoreButton: function(container, remaining) {
            const btnContainer = document.createElement('div');
            Object.assign(btnContainer.style, { gridColumn: "1 / -1", display: "flex", justifyContent: "center", padding: "2rem 0" });
            const loadMoreBtn = document.createElement('button');
            loadMoreBtn.className = "btn-blur";
            loadMoreBtn.textContent = `Show All (${remaining} more)`;
            loadMoreBtn.onclick = () => {
                DashboardApp.State.pagination.visibleCount = DashboardApp.State.filteredList.length;
                this.render();
            };
            btnContainer.appendChild(loadMoreBtn);
            container.appendChild(btnContainer);
        },
        getEntryLink: function(item) {
            const baseRoute = (item.entry_type?.toUpperCase() === 'ANIME') ? '/anime' : '/book';
            return `${baseRoute}/${item.entry_id}`;
        }
    },
    Library: {
        loadStats: async function() {
            const types = ['anime', 'manga', 'novels'];
            const elements = { 'anime': 'local-anime-count', 'manga': 'local-manga-count', 'novels': 'local-novel-count' };
            for (const type of types) {
                try {
                    const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
                    if(res.ok) {
                        const data = await res.json();
                        const el = document.getElementById(elements[type]);
                        if (el) el.textContent = `${data.length} items`;
                    }
                } catch (e) { console.error(e); }
            }
        },
        loadContent: async function(type) {
            DashboardApp.State.currentLocalType = type;
            const container = document.getElementById('local-list-container');
            const loading = document.getElementById('local-loading');
            const searchInput = document.getElementById('local-search-input');
            container.innerHTML = '';
            loading.style.display = 'flex';
            if(searchInput) searchInput.value = '';
            try {
                const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
                if (!res.ok) throw new Error('Failed to load local content');
                const data = await res.json();
                DashboardApp.State.localLibraryData = data;
                this.renderGrid(data, type);
            } catch (err) {
                console.error(err);
                container.innerHTML = `<div class="empty-state"><p>Error loading library</p></div>`;
            } finally {
                loading.style.display = 'none';
            }
        },
        renderGrid: function(entries, type) {
            const container = document.getElementById('local-list-container');
            container.innerHTML = '';
            if (entries.length === 0) {
                container.innerHTML = `
                    <div class="empty-state" style="grid-column: 1/-1;">
                        <p>No ${type} files found.</p>
                        <button onclick="DashboardApp.Library.triggerScan('incremental')" class="btn-blur">Scan Now</button>
                    </div>`;
                return;
            }
            entries.forEach(entry => {
                const isMatched = entry.matched && entry.metadata;
                const meta = entry.metadata || {};
                let poster = meta.coverImage?.large || '/public/assets/placeholder.svg';
                let title = isMatched ? (meta.title?.english || meta.title?.romaji) : entry.folder_name;
                if (!isMatched) title = title.replace(/\[.*?\]|\(.*?\)|\.mkv|\.mp4/g, '').trim();
                const url = isMatched ? (type === 'anime' ? `/anime/${meta.id}` : `/book/${meta.id}`) : '#';
                const div = document.createElement('div');
                div.className = 'list-item';
                div.innerHTML = `
                    <div class="item-poster-link" onclick="${isMatched ? `window.location='${url}'` : ''}" style="cursor: ${isMatched ? 'pointer' : 'default'}">
                        <img src="${poster}" class="item-poster" loading="lazy">
                        ${!isMatched ? `<div class="unmatched-badge"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg> UNMATCHED</div>` : ''}
                    </div>
                    <div class="item-content">
                        <h3 class="item-title" title="${entry.folder_name}">${title}</h3>
                        <div class="item-meta">
                             <span class="meta-pill type-pill">${entry.files ? entry.files.length : 0} FILES</span>
                             ${isMatched ? '<span class="meta-pill status-pill">MATCHED</span>' : ''}
                        </div>
                        <div class="folder-path-tooltip">${entry.folder_name}</div>
                    </div>
                    <button class="edit-icon-btn" onclick="DashboardApp.Library.openManualMatch('${entry.id}', '${type}')" title="${isMatched ? 'Rematch' : 'Fix Match'}">
                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    </button>
                `;
                container.appendChild(div);
            });
        },
        filterContent: function(query) {
            if (!DashboardApp.State.localLibraryData) return;
            const lowerQuery = query.toLowerCase();
            const filtered = DashboardApp.State.localLibraryData.filter(entry => {
                const metaTitle = entry.metadata?.title?.english || entry.metadata?.title?.romaji || '';
                const folderName = entry.folder_name || '';
                return metaTitle.toLowerCase().includes(lowerQuery) || folderName.toLowerCase().includes(lowerQuery);
            });
            this.renderGrid(filtered, DashboardApp.State.currentLocalType);
        },
        triggerScan: async function(mode) {
            const consoleDiv = document.getElementById('scan-console');
            const statusText = document.getElementById('scan-status-text');
            if(consoleDiv) consoleDiv.style.display = 'flex';
            if(statusText) statusText.textContent = `Starting ${mode} scan...`;
            try {
                const res = await fetch(`${API_BASE}/library/scan?mode=${mode}`, {
                    method: 'POST', headers: window.AuthUtils.getSimpleAuthHeaders()
                });
                if (res.ok) {
                    if(statusText) statusText.textContent = "Scan completed successfully!";
                    setTimeout(() => { if(consoleDiv) consoleDiv.style.display = 'none'; this.loadStats(); }, 3000);
                } else throw new Error('Scan failed');
            } catch (e) {
                if(statusText) { statusText.textContent = "Error during scan."; statusText.style.color = 'var(--color-danger)'; }
            }
        },
        openManualMatch: function(id, type) {
            const newId = prompt("Enter AniList ID to force match:");
            if (newId) {
                fetch(`${API_BASE}/library/${type}/${id}/match`, {
                    method: 'POST',
                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
                    body: JSON.stringify({ source: 'anilist', matched_id: parseInt(newId) })
                }).then(res => {
                    if(res.ok) { alert("Matched! Refreshing..."); this.loadContent(type); }
                    else { alert("Failed to match."); }
                });
            }
        },
        switchType: function(type, btnElement) {
            document.querySelectorAll('.type-pill-btn').forEach(b => b.classList.remove('active'));
            if(btnElement) btnElement.classList.add('active');
            this.loadContent(type);
        }
    },
    UI: {
        setupTabSystem: function() {
            const tabs = document.querySelectorAll('.nav-pill');
            const sections = document.querySelectorAll('.tab-section');
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    const targetId = `section-${tab.dataset.target}`;
                    sections.forEach(sec => {
                        sec.classList.remove('active');
                        if (sec.id === targetId) sec.classList.add('active');
                    });
                    if (tab.dataset.target === 'local') {
                        DashboardApp.Library.loadStats();
                        DashboardApp.Library.loadContent('anime');
                    }
                });
            });
        }
    },
    Utils: {
        fileToBase64: (file) => new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        })
    }
 };
 document.addEventListener('DOMContentLoaded', () => {
    DashboardApp.init();
 });
 window.switchLocalType = (type, btn) => DashboardApp.Library.switchType(type, btn);
 window.saveToList = async () => {
    const data = window.ListModalManager.currentData;
    if (!data) return;
    const idToSave = data.entry_id || data.id;
    await window.ListModalManager.save(idToSave, data.source || 'anilist');
    await DashboardApp.Tracking.load();
 };
 window.deleteFromList = async () => {
    const data = window.ListModalManager.currentData;
    if (!data) return;
    const idToDelete = data.entry_id || data.id;
    await window.ListModalManager.delete(idToDelete, data.source || 'anilist');
    await DashboardApp.Tracking.load();
 };
 window.closeAddToListModal = () => window.ListModalManager.close();
--- a/desktop/src/scripts/rpc-inapp.js
+++ b/desktop/src/scripts/rpc-inapp.js
--- a/desktop/src/scripts/schedule/schedule.js
+++ b/desktop/src/scripts/schedule/schedule.js
--- a/desktop/src/scripts/settings.js
+++ b/desktop/src/scripts/settings.js
@@ -0,0 +1,213 @@
 const API_BASE2 = '/api/config';
 let currentConfig = {};
 let currentSchema = {};
 let activeSection = '';
 let modal, navContainer, formContent, form;
 window.toggleSettingsModal = async (forceClose = false) => {
    modal = document.getElementById('settings-modal');
    navContainer = document.getElementById('config-nav');
    formContent = document.getElementById('config-section-content');
    form = document.getElementById('config-form');
    if (!modal) return;
    if (forceClose) {
        modal.classList.add('hidden');
    } else {
        const isHidden = modal.classList.contains('hidden');
        if (isHidden) {
            modal.classList.remove('hidden');
            await loadSettings();
        } else {
            modal.classList.add('hidden');
        }
    }
 };
 async function loadSettings() {
    if (!formContent) return;
    // Loading State
    formContent.innerHTML = `
        <div class="skeleton-loader">
            <div class="skeleton title-skeleton"></div>
            <div class="skeleton field-skeleton"></div>
            <div class="skeleton field-skeleton"></div>
        </div>
    `;
    try {
        const res = await fetch(API_BASE2);
        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
        const data = await res.json();
        if (data.error) throw new Error(data.error);
        // --- CORRECCIÓN AQUI ---
        // Tu JSON devuelve "values", el código original buscaba "config"
        currentConfig = data.values || data.config || data;
        currentSchema = data.schema || {};
        renderNav();
        if (!activeSection || !currentConfig[activeSection]) {
            activeSection = Object.keys(currentConfig)[0];
        }
        switchSection(activeSection);
    } catch (err) {
        console.error('Error loading settings:', err);
        formContent.innerHTML = `
            <div style="padding: 2rem; text-align: center;">
                <p style="color: #ef4444; margin-bottom: 1rem;">Failed to load settings</p>
                <p style="color: #888; font-size: 0.9rem;">${err.message}</p>
            </div>
        `;
    }
 }
 function switchSection(section) {
    if (!currentConfig[section]) return;
    activeSection = section;
    renderNav();
    const sectionData = currentConfig[section];
    const sectionSchema = currentSchema[section] || {};
    formContent.innerHTML = `
        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize; font-size: 1.8rem;">
            ${section.replace(/_/g, ' ')}
        </h2>
    `;
    Object.entries(sectionData).forEach(([key, value]) => {
        const group = document.createElement('div');
        group.className = 'config-group';
        const isBool = typeof value === 'boolean';
        const inputId = `input-${section}-${key}`;
        const labelText = key.replace(/_/g, ' ');
        // Obtener descripción
        const description = sectionSchema[key]?.description || '';
        const descHtml = description
            ? `<p class="config-description">${description}</p>`
            : '';
        if (isBool) {
            group.innerHTML = `
                <div style="display: flex; flex-direction: column; gap: 8px;">
                    <div style="display: flex; align-items: center; gap: 0.8rem;">
                        <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''} 
                               style="width: 20px; height: 20px; accent-color: var(--accent);">
                        <label for="${inputId}" style="margin: 0; cursor: pointer; font-size: 1rem;">${labelText}</label>
                    </div>
                    ${descHtml} </div>
            `;
        } else {
            // --- CAMBIO PRINCIPAL AQUI ---
            // Movimos ${descHtml} para que esté DESPUÉS del input
            group.innerHTML = `
                <label for="${inputId}">${labelText}</label>
                <input class="config-input" id="${inputId}" name="${key}"
                       type="${typeof value === 'number' ? 'number' : 'text'}"
                       value="${value || ''}" 
                       placeholder="Not set">
                ${descHtml} 
            `;
        }
        formContent.appendChild(group);
    });
 }
 function renderNav() {
    if (!navContainer) return;
    navContainer.innerHTML = '';
    Object.keys(currentConfig).forEach(section => {
        const btn = document.createElement('div');
        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
        // Icono opcional según la sección (puedes personalizar esto)
        let icon = '';
        if(section === 'library') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>';
        if(section === 'paths') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><folder></folder><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
        btn.innerHTML = `${icon} ${section}`;
        btn.onclick = () => switchSection(section);
        navContainer.appendChild(btn);
    });
 }
 // Handler de guardado
 document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('submit', async (e) => {
        if (e.target.id === 'config-form') {
            e.preventDefault();
            await saveSettings();
        }
    });
 });
 async function saveSettings() {
    if (!form || !activeSection) return;
    const updatedData = {};
    const sectionConfig = currentConfig[activeSection];
    Object.keys(sectionConfig).forEach(key => {
        const input = form.elements[key];
        if (!input) return;
        if (input.type === 'checkbox') {
            updatedData[key] = input.checked;
        } else if (input.type === 'number') {
            updatedData[key] = Number(input.value);
        } else {
            updatedData[key] = input.value;
        }
    });
    try {
        const res = await fetch(`${API_BASE2}/${activeSection}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(updatedData)
        });
        if (res.ok) {
            currentConfig[activeSection] = updatedData; // Actualizamos localmente
            showNotification('Settings saved successfully!');
        } else {
            throw new Error('Failed to save settings');
        }
    } catch (err) {
        console.error(err);
        showNotification('Error saving settings', true);
    }
 }
 function showNotification(msg, isError = false) {
    const notification = document.createElement('div');
    const bg = isError ? '#ef4444' : '#10b981';
    notification.style.cssText = `
        position: fixed; top: 20px; right: 20px;
        background: ${bg}; color: white;
        padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 20000;
        animation: slideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px;
    `;
    notification.innerHTML = isError
        ? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> ${msg}`
        : `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> ${msg}`;
    document.body.appendChild(notification);
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
 }
--- a/desktop/src/scripts/titlebar.js
+++ b/desktop/src/scripts/titlebar.js
--- a/desktop/src/scripts/updateNotifier.js
+++ b/desktop/src/scripts/updateNotifier.js
@@ -1,6 +1,6 @@
 const Gitea_OWNER = "ItsSkaiya";
 const Gitea_REPO = "WaifuBoard";
-const CURRENT_VERSION = "v2.0.0-rc.0";
+const CURRENT_VERSION = "v2.0.0-rc.2";
 const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
 let currentVersionDisplay;
--- a/desktop/src/scripts/users.js
+++ b/desktop/src/scripts/users.js
@@ -694,30 +694,102 @@ window.handleDeleteConfirmation = function(userId) {
    closeModal();
    if (user.has_password) {
        modalAniList.innerHTML = `
        <div class="modal-overlay"></div>
        <div class="modal-content" style="max-width:400px;">
            <div class="modal-header">
                <h2>Confirm Deletion</h2>
                <button class="modal-close" onclick="closeModal()">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <form id="deleteWithPasswordForm">
                <p style="margin-bottom:1.25rem; color:var(--color-text-secondary)">
                    Enter your password to permanently delete
                    <b>${user.username}</b>
                </p>
                <div class="form-group">
                    <label for="deletePassword">Password</label>
                    <div class="password-toggle-wrapper">
                        <input
                            type="password"
                            id="deletePassword"
                            required
                            placeholder="Enter password"
                            autofocus
                        >
                        <button
                            type="button"
                            class="password-toggle-btn"
                            onclick="togglePasswordVisibility('deletePassword', this)"
                        >
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn-secondary" onclick="closeModal()">
                        Cancel
                    </button>
                    <button type="submit" class="btn-disconnect">
                        Delete Profile
                    </button>
                </div>
            </form>
        </div>
    `;
        modalAniList.classList.add('active');
        document
            .getElementById('deleteWithPasswordForm')
            .addEventListener('submit', e => {
                e.preventDefault();
                const password = document.getElementById('deletePassword').value;
                handleConfirmedDeleteUser(userId, password);
            });
        return;
    }
    showConfirmationModal(
        'Confirm Deletion',
-        `Are you absolutely sure you want to delete profile ${user.username}? This action cannot be undone.`,
+        `Are you absolutely sure you want to delete profile ${user.username}?`,
        `handleConfirmedDeleteUser(${userId})`
    );
 };
-window.handleConfirmedDeleteUser = async function(userId) {
+window.handleConfirmedDeleteUser = async function(userId, password = null) {
    closeModal();
    showUserToast('Deleting user...', 'info');
    try {
-        const res = await fetch(`${API_BASE}/users/${userId}`, { method: 'DELETE' });
+        const options = { method: 'DELETE' };
        if (password) {
            options.headers = { 'Content-Type': 'application/json' };
            options.body = JSON.stringify({ password });
        }
        const res = await fetch(`${API_BASE}/users/${userId}`, options);
        if (!res.ok) {
            const error = await res.json();
-            throw new Error(error.error || 'Error deleting user');
+            throw new Error(error.error);
        }
        await loadUsers();
        showUserToast('User deleted successfully!', 'success');
    } catch (err) {
-        console.error(err);
+        showUserToast(err.message || 'Error deleting user', 'error');
        showUserToast('Error deleting user', 'error');
    }
 };
@@ -966,7 +1038,7 @@ async function performLogin(userId, password = null) {
        const data = await res.json();
        localStorage.setItem('token', data.token);
-        window.location.href = '/anime';
+        window.location.href = '/profile';
    } catch (err) {
        console.error('Login error', err);
        showUserToast(err.message || 'Login failed', 'error');
--- a/desktop/src/scripts/utils/auth-utils.js
+++ b/desktop/src/scripts/utils/auth-utils.js
--- a/desktop/src/scripts/utils/continue-watching-manager.js
+++ b/desktop/src/scripts/utils/continue-watching-manager.js
@@ -52,10 +52,9 @@ const ContinueWatchingManager = {
        if (entryType === 'ANIME') {
            url = item.source === 'anilist'
-                ? `/watch/${item.entry_id}/${nextProgress}`
+                ? `/anime/${item.entry_id}?episode=${nextProgress}`
-                : `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
+                : `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
        } else {
            url = item.source === 'anilist'
                ? `/book/${item.entry_id}?chapter=${nextProgress}`
                : `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
--- a/desktop/src/scripts/utils/list-modal-manager.js
+++ b/desktop/src/scripts/utils/list-modal-manager.js
@@ -83,7 +83,7 @@ const ListModalManager = {
            document.getElementById('progress-label');
        if (this.isInList && this.currentEntry) {
-            document.getElementById('entry-status').value = this.currentEntry.status || 'PLANNING';
+            document.getElementById('entry-status').value = this.normalizeStatus(this.currentEntry.status);
            document.getElementById('entry-progress').value = this.currentEntry.progress || 0;
            document.getElementById('entry-score').value = this.currentEntry.score || '';
            document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || '';
@@ -131,6 +131,12 @@ const ListModalManager = {
        document.getElementById('add-list-modal').classList.add('active');
    },
    normalizeStatus(status) {
        if (!status) return 'PLANNING';
        if (status === 'WATCHING' || status === 'READING') return 'CURRENT';
        return status;
    },
    close() {
        document.getElementById('add-list-modal').classList.remove('active');
    },
@@ -212,15 +218,21 @@ const ListModalManager = {
    }
 };
-document.addEventListener('DOMContentLoaded', () => {
+async function loadListModal() {
    if (document.getElementById('add-list-modal')) return;
    const res = await fetch('/views/components/list-modal.html');
    const html = await res.text();
    document.body.insertAdjacentHTML('beforeend', html);
    const modal = document.getElementById('add-list-modal');
-    if (modal) {
+    modal.addEventListener('click', (e) => {
-        modal.addEventListener('click', (e) => {
+        if (e.target.id === 'add-list-modal') {
-            if (e.target.id === 'add-list-modal') {
+            ListModalManager.close();
-                ListModalManager.close();
+        }
-            }
+    });
-        });
+}
-    }
+
-});
+document.addEventListener('DOMContentLoaded', loadListModal);
 window.ListModalManager = ListModalManager;
--- a/desktop/src/scripts/utils/media-metadata-utils.js
+++ b/desktop/src/scripts/utils/media-metadata-utils.js
--- a/desktop/src/scripts/utils/notification-utils.js
+++ b/desktop/src/scripts/utils/notification-utils.js
--- a/desktop/src/scripts/utils/pagination-manager.js
+++ b/desktop/src/scripts/utils/pagination-manager.js
--- a/desktop/src/scripts/utils/search-manager.js
+++ b/desktop/src/scripts/utils/search-manager.js
--- a/desktop/src/scripts/utils/url-utils.js
+++ b/desktop/src/scripts/utils/url-utils.js
--- a/desktop/src/scripts/utils/youtube-player-utils.js
+++ b/desktop/src/scripts/utils/youtube-player-utils.js
--- a/desktop/src/shared/config.js
+++ b/desktop/src/shared/config.js
@@ -0,0 +1,105 @@
 import fs from 'fs';
 import path from 'path';
 import os from 'os';
 import yaml from 'js-yaml';
 const BASE_DIR = path.join(os.homedir(), 'WaifuBoards');
 const CONFIG_PATH = path.join(BASE_DIR, 'config.yaml');
 const DEFAULT_CONFIG = {
    library: {
        anime: null,
        manga: null,
        novels: null
    },
    paths: {
        mpv: null,
        ffmpeg: null
    }
 };
 export const CONFIG_SCHEMA = {
    library: {
        anime: { description: "Path where anime is stored" },
        manga: { description: "Path where manga is stored" },
        novels: { description: "Path where novels are stored" }
    },
    paths: {
        mpv: { description: "Required to open anime episodes in mpv on desktop version." },
        ffmpeg: { description: "Required for downloading anime episodes." }
    }
 };
 function ensureConfigFile() {
    if (!fs.existsSync(BASE_DIR)) {
        fs.mkdirSync(BASE_DIR, { recursive: true });
    }
    if (!fs.existsSync(CONFIG_PATH)) {
        fs.writeFileSync(
            CONFIG_PATH,
            yaml.dump(DEFAULT_CONFIG),
            'utf8'
        );
    }
 }
 export function getConfig() {
    ensureConfigFile();
    const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
    const loaded = yaml.load(raw) || {};
    return {
        values: deepMerge(structuredClone(DEFAULT_CONFIG), loaded),
        schema: CONFIG_SCHEMA
    };
 }
 function sanitizeLoadedConfig(loaded) {
    return {
        library: loaded.library,
        paths: loaded.paths
    };
 }
 export function setConfig(partialConfig) {
    ensureConfigFile();
    const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
    const loadedRaw = yaml.load(raw) || {};
    const loaded = sanitizeLoadedConfig(loadedRaw);
    const next = deepMerge(
        structuredClone(DEFAULT_CONFIG),
        deepMerge(loaded, partialConfig)
    );
    const toSave = {
        library: next.library,
        paths: next.paths
    };
    fs.writeFileSync(CONFIG_PATH, yaml.dump(toSave), 'utf8');
    return next;
 }
 function deepMerge(target, source) {
    for (const key in source) {
        if (
            source[key] &&
            typeof source[key] === 'object' &&
            !Array.isArray(source[key])
        ) {
            target[key] = deepMerge(target[key] || {}, source[key]);
        } else {
            target[key] = source[key];
        }
    }
    return target;
 }
 module.exports = {
    ensureConfigFile,
    getConfig,
    setConfig,
 };
--- a/desktop/src/shared/database.js
+++ b/desktop/src/shared/database.js
@@ -2,7 +2,7 @@ const sqlite3 = require('sqlite3').verbose();
 const os = require("os");
 const path = require("path");
 const fs = require("fs");
-const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB} = require('./schemas');
+const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB, ensureLocalLibrarySchema } = require('./schemas');
 const databases = new Map();
@@ -10,7 +10,8 @@ const DEFAULT_PATHS = {
    anilist: path.join(os.homedir(), "WaifuBoards", 'anilist_anime.db'),
    favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db"),
    cache: path.join(os.homedir(), "WaifuBoards", "cache.db"),
-    userdata: path.join(os.homedir(), "WaifuBoards", "user_data.db")
+    userdata: path.join(os.homedir(), "WaifuBoards", "user_data.db"),
    local_library: path.join(os.homedir(), "WaifuBoards", "local_library.db")
 };
 function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
@@ -49,6 +50,11 @@ function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
    databases.set(name, db);
    if (name === "local_library") {
        ensureLocalLibrarySchema(db)
            .catch(err => console.error("Error creating local library schema:", err));
    }
    if (name === "anilist") {
        ensureAnilistSchema(db)
            .then(() => ensureExtensionsTable(db))
--- a/desktop/src/shared/extensions.js
+++ b/desktop/src/shared/extensions.js
@@ -46,7 +46,6 @@ async function loadExtensions() {
    }
 }
 async function loadExtension(fileName) {
    const homeDir = os.homedir();
    const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
@@ -77,6 +76,7 @@ async function loadExtension(fileName) {
        }
        const name = instance.constructor.name;
        instance.__fileName = fileName;
        instance.scrape = scrape;
        instance.cheerio = cheerio;
        extensions.set(name, instance);
@@ -114,6 +114,14 @@ async function saveExtensionFile(fileName, downloadUrl) {
            file.on('finish', async () => {
                file.close(async () => {
                    try {
                        const extName = fileName.replace('.js', '');
                        for (const key of extensions.keys()) {
                            if (key.toLowerCase() === extName.toLowerCase()) {
                                extensions.delete(key);
                                break;
                            }
                        }
                        await loadExtension(fileName);
                        resolve();
                    } catch (err) {
@@ -186,6 +194,26 @@ function getBookExtensionsMap() {
    return bookExts;
 }
 function getMangaExtensionsMap() {
    const mangaExts = new Map();
    for (const [name, ext] of extensions) {
        if (ext.type === 'book-board' && ext.mediaType !== 'ln') {
            mangaExts.set(name, ext);
        }
    }
    return mangaExts;
 }
 function getNovelExtensionsMap() {
    const novelExts = new Map();
    for (const [name, ext] of extensions) {
        if (ext.type === 'book-board' && ext.mediaType === 'ln') {
            novelExts.set(name, ext);
        }
    }
    return novelExts;
 }
 function getGalleryExtensionsMap() {
    const galleryExts = new Map();
    for (const [name, ext] of extensions) {
@@ -205,5 +233,7 @@ module.exports = {
    getBookExtensionsMap,
    getGalleryExtensionsMap,
    saveExtensionFile,
-    deleteExtensionFile
+    deleteExtensionFile,
    getMangaExtensionsMap,
    getNovelExtensionsMap
 };
--- a/desktop/src/shared/headless.js
+++ b/desktop/src/shared/headless.js
@@ -0,0 +1,147 @@
 const path = require("path");
 const fs = require("fs");
 const { chromium } = require("playwright-core");
 let browser;
 let context;
 const BLOCK_LIST = [
    "google-analytics", "doubleclick", "facebook", "twitter",
    "adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic"
 ];
 function isPackaged() {
    return process.env.IS_PACKAGED === "true";
 }
 function getChromiumPath() {
    if (isPackaged()) {
        return path.join(
            process.resourcesPath,
            "playwright",
            "chromium",
            "chrome-headless-shell-win64",
            "chrome-headless-shell.exe"
        );
    }
    return chromium.executablePath();
 }
 async function initHeadless() {
    if (browser) return;
    const exePath = getChromiumPath();
    if (!fs.existsSync(exePath)) {
        throw new Error("Chromium not found: " + exePath);
    }
    browser = await chromium.launch({
        headless: true,
        executablePath: exePath,
        args: [
            "--no-sandbox",
            "--disable-setuid-sandbox",
            "--disable-dev-shm-usage",
            "--disable-gpu",
            "--disable-extensions",
            "--disable-background-networking",
            "--disable-sync",
            "--disable-translate",
            "--mute-audio",
            "--no-first-run",
            "--no-zygote",
        ]
    });
    context = await browser.newContext({
        userAgent:
            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/122.0.0.0 Safari/537.36"
    });
 }
 async function turboScroll(page) {
    await page.evaluate(() => {
        return new Promise((resolve) => {
            let last = 0;
            let same = 0;
            const timer = setInterval(() => {
                const h = document.body.scrollHeight;
                window.scrollTo(0, h);
                if (h === last) {
                    same++;
                    if (same >= 5) {
                        clearInterval(timer);
                        resolve();
                    }
                } else {
                    same = 0;
                    last = h;
                }
            }, 20);
        });
    });
 }
 async function scrape(url, handler, options = {}) {
    const {
        waitUntil = "domcontentloaded",
        waitSelector = null,
        timeout = 10000,
        scrollToBottom = false,
        renderWaitTime = 0,
        loadImages = true
    } = options;
    if (!browser) await initHeadless();
    const page = await context.newPage();
    let collectedRequests = [];
    await page.route("**/*", (route) => {
        const req = route.request();
        const rUrl = req.url().toLowerCase();
        const type = req.resourceType();
        collectedRequests.push({
            url: req.url(),
            method: req.method(),
            resourceType: type
        });
        if (type === "font" || type === "media" || type === "manifest")
            return route.abort();
        if (BLOCK_LIST.some(k => rUrl.includes(k)))
            return route.abort();
        if (!loadImages && (
            type === "image" || rUrl.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
        )) return route.abort();
        route.continue();
    });
    await page.goto(url, { waitUntil, timeout });
    if (waitSelector) {
        try {
            await page.waitForSelector(waitSelector, { timeout });
        } catch {}
    }
    if (scrollToBottom) {
        await turboScroll(page);
    }
    if (renderWaitTime > 0) {
        await new Promise(r => setTimeout(r, renderWaitTime));
    }
    const result = await handler(page);
    await page.close();
    return { result, requests: collectedRequests };
 }
 async function closeScraper() {
    if (context) await context.close();
    if (browser) await browser.close();
    context = null;
    browser = null;
 }
 module.exports = {
    initHeadless,
    scrape,
    closeScraper
 };
--- a/desktop/src/shared/queries.js
+++ b/desktop/src/shared/queries.js
--- a/desktop/src/shared/schemas.js
+++ b/desktop/src/shared/schemas.js
@@ -2,6 +2,54 @@ const sqlite3 = require('sqlite3').verbose();
 const path = require("path");
 const fs = require("fs");
 async function ensureLocalLibrarySchema(db) {
    await run(db, `
    CREATE TABLE IF NOT EXISTS local_entries (
      id TEXT PRIMARY KEY,
      type TEXT NOT NULL,
      path TEXT NOT NULL,
      folder_name TEXT NOT NULL,
      matched_id INTEGER,
      matched_source TEXT,
      last_scan INTEGER NOT NULL
    )
  `);
    await run(db, `
    CREATE TABLE IF NOT EXISTS local_files (
      id TEXT PRIMARY KEY,
      entry_id TEXT NOT NULL,
      file_path TEXT NOT NULL,
      unit_number INTEGER,
      FOREIGN KEY (entry_id) REFERENCES local_entries(id)
    )
  `);
    await run(db, `
    CREATE INDEX IF NOT EXISTS idx_local_entries_type
    ON local_entries(type)
  `);
    await run(db, `
    CREATE INDEX IF NOT EXISTS idx_local_entries_matched
    ON local_entries(matched_id)
  `);
    await run(db, `
    CREATE INDEX IF NOT EXISTS idx_local_files_entry
    ON local_files(entry_id)
  `);
 }
 function run(db, sql, params = []) {
    return new Promise((resolve, reject) => {
        db.run(sql, params, err => {
            if (err) reject(err);
            else resolve();
        });
    });
 }
 async function ensureUserDataDB(dbPath) {
    const dir = path.dirname(dbPath);
@@ -230,5 +278,6 @@ module.exports = {
    ensureAnilistSchema,
    ensureExtensionsTable,
    ensureCacheTable,
-    ensureFavoritesDB
+    ensureFavoritesDB,
    ensureLocalLibrarySchema
 };
--- a/desktop/src/views/views.routes.ts
+++ b/desktop/src/views/views.routes.ts
@@ -0,0 +1,140 @@
 import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
 import * as fs from 'fs';
 import * as path from 'path';
 let cachedNavbar: string | null = null;
 function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
    if (!cachedNavbar) {
        const navbarPath = path.join(__dirname, '..', '..', 'views', 'components', 'navbar.html');
        cachedNavbar = fs.readFileSync(navbarPath, 'utf-8');
    }
    let navbar = cachedNavbar;
    const pages = ['anime', 'books', 'gallery', 'schedule' , 'marketplace'];
    pages.forEach(page => {
        const regex = new RegExp(`(<button class="nav-button[^"]*)"\\s+data-page="${page}"`, 'g');
        if (page === activePage) {
            navbar = navbar.replace(regex, `$1 active" data-page="${page}"`);
        }
    });
    if (!showSearch) {
        navbar = navbar.replace(
            '<div class="search-wrapper">',
            '<div class="search-wrapper" style="visibility: hidden;">'
        );
    }
    return navbar;
 }
 function injectNavbar(htmlContent: string, activePage: string, showSearch: boolean = true): string {
    const navbar = getNavbarHTML(activePage, showSearch);
    return htmlContent.replace(/<body[^>]*>/, `$&\n${navbar}`);
 }
 async function viewsRoutes(fastify: FastifyInstance) {
    fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'users.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        reply.type('text/html').send(html);
    });
    fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        const htmlWithNavbar = injectNavbar(html, 'anime', true);
        reply.type('text/html').send(htmlWithNavbar);
    });
    fastify.get('/profile', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'profile.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        const htmlWithNavbar = injectNavbar(html, '', false);
        reply.type('text/html').send(htmlWithNavbar);
    });
    fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'books.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        const htmlWithNavbar = injectNavbar(html, 'books', true);
        reply.type('text/html').send(htmlWithNavbar);
    });
    fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'schedule.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        const htmlWithNavbar = injectNavbar(html, 'schedule', false);
        reply.type('text/html').send(htmlWithNavbar);
    });
    fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        const htmlWithNavbar = injectNavbar(html, 'gallery', true);
        reply.type('text/html').send(htmlWithNavbar);
    });
    fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'marketplace.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        const htmlWithNavbar = injectNavbar(html, 'marketplace', false);
        reply.type('text/html').send(htmlWithNavbar);
    });
    fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        const htmlWithNavbar = injectNavbar(html, 'gallery', true);
        reply.type('text/html').send(htmlWithNavbar);
    });
    fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        const htmlWithNavbar = injectNavbar(html, 'gallery', true);
        reply.type('text/html').send(htmlWithNavbar);
    });
    fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        reply.type('text/html').send(html);
    });
    fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        reply.type('text/html').send(html);
    });
    fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        reply.type('text/html').send(html);
    });
    fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        reply.type('text/html').send(html);
    });
    fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'read.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        reply.type('text/html').send(html);
    });
    fastify.setNotFoundHandler((req, reply) => {
        const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
        const html = fs.readFileSync(htmlPath, 'utf-8');
        reply.code(404).type('text/html').send(html);
    });
 }
 export default viewsRoutes;
--- a/desktop/tsconfig.json
+++ b/desktop/tsconfig.json
--- a/desktop/views/404.html
+++ b/desktop/views/404.html
@@ -0,0 +1,139 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - WaifuBoard</title>
    <link rel="stylesheet" href="/views/css/globals.css">
    <link rel="stylesheet" href="/views/css/components/navbar.css">
    <link rel="stylesheet" href="/views/css/components/titlebar.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
    <script src="/src/scripts/titlebar.js"></script>
    <style>
        .error-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: var(--spacing-2xl);
            background: var(--color-bg-base);
        }
        .error-code {
            font-size: 6rem;
            font-weight: 900;
            margin: 0;
            color: var(--color-primary);
        }
        .error-message {
            font-size: 1.1rem;
            color: var(--color-text-secondary);
            margin: var(--spacing-md) 0 var(--spacing-xl);
            max-width: 420px;
        }
        .error-actions {
            display: flex;
            gap: var(--spacing-md);
            justify-content: center;
        }
    </style>
 </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">
        <div class="brand-icon">
            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
        </div>
        WaifuBoard
    </a>
    <div class="nav-center">
        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
    </div>
    <div class="nav-right">
        <div class="search-wrapper" style="visibility: hidden;">
            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <circle cx="11" cy="11" r="8"/>
                <path d="M21 21l-4.35-4.35"/>
            </svg>
            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
            <div class="search-results" id="search-results"></div>
        </div>
        <div class="nav-user" id="nav-user" style="display:none;">
            <div class="user-avatar-btn">
                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
                <div class="online-indicator"></div>
            </div>
            <div class="nav-dropdown" id="nav-dropdown">
                <div class="dropdown-header">
                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
                    <div class="dropdown-user-info">
                        <div class="dropdown-username" id="nav-username"></div>
                    </div>
                </div>
                <a href="/my-list" class="dropdown-item">
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                        <polyline points="17 21 17 13 7 13 7 21"/>
                        <polyline points="7 3 7 8 15 8"/>
                    </svg>
                    <span>My List</span>
                </a>
                <button class="dropdown-item logout-item" id="nav-logout">
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                        <polyline points="16 17 21 12 16 7"/>
                        <line x1="21" y1="12" x2="9" y2="12"/>
                    </svg>
                    <span>Logout</span>
                </button>
            </div>
        </div>
    </div>
 </nav>
 <main class="error-container">
    <div>
        <h1 class="error-code">404</h1>
        <p class="error-message">
            This page doesn’t exist.
        </p>
        <div class="error-actions">
            <button class="btn-primary" onclick="location.href='/'">Home</button>
            <button class="btn-blur" onclick="history.back()">Back</button>
        </div>
    </div>
 </main>
 <script src="/src/scripts/utils/auth-utils.js"></script>
 </body>
 </html>
--- a/desktop/views/anime/anime.html
+++ b/desktop/views/anime/anime.html
@@ -0,0 +1,222 @@
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
    <title>WaifuBoard</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <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="stylesheet" href="/views/css/globals.css" />
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
    <link rel="stylesheet" href="/views/css/anime/anime.css" />
    <link rel="stylesheet" href="/views/css/anime/player.css" />
    <link rel="stylesheet" href="/views/css/components/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="/anime" class="back-btn">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
    </svg>
    Back
 </a>
 <div class="modal-overlay" id="desc-modal">
    <div class="modal-content">
        <button class="modal-close" onclick="closeDescriptionModal()">✕</button>
        <h2 class="modal-title">Synopsis</h2>
        <div class="modal-text" id="full-description"></div>
    </div>
 </div>
 <div class="top-media-wrapper" id="top-media-wrapper">
    <div class="hero-wrapper" id="hero-wrapper">
        <div class="video-background"><div id="trailer-player"></div></div>
        <div class="hero-overlay"></div>
    </div>
    <div class="player-wrapper" id="player-wrapper" style="display: none;">
        <div class="player-container">
            <button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
            <button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
            </button>
            <div class="player-header">
                <div class="header-left">
                    <button class="btn-icon-glass" id="close-player-btn" title="Close Player">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
                    </button>
                    <div class="episode-info">
                        <span class="ep-label">Watching</span>
                        <span id="player-episode-title" class="ep-title">Episode 1</span>
                    </div>
                </div>
                <div class="header-right">
                    <button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="7 10 12 15 17 10"></polyline>
                            <line x1="12" y1="15" x2="12" y2="3"></line>
                        </svg>
                    </button>
                    <div class="settings-group">
                        <button id="mpv-btn" class="glass-btn-mpv" title="Open in MPV">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M5 3l14 9-14 9V3z"></path>
                            </svg>
                            <span>MPV</span>
                        </button>
                        <div class="sd-toggle" id="sd-toggle" data-state="sub">
                            <div class="sd-bg"></div>
                            <div class="sd-option active" id="opt-sub">Sub</div>
                            <div class="sd-option" id="opt-dub">Dub</div>
                        </div>
                        <select id="server-select" class="glass-select" style="display:none;"></select>
                        <select id="extension-select" class="glass-select"></select>
                    </div>
                </div>
            </div>
            <div class="video-frame">
                <video id="player" controls crossorigin playsinline></video>
                <div id="player-loading" class="player-loading-overlay">
                    <div class="spinner"></div>
                    <p id="player-loading-text">Loading Stream...</p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-overlay" id="download-modal">
        <div class="modal-content download-settings-content">
            <button class="modal-close" id="close-download-modal">✕</button>
            <h2 class="modal-title">Download Settings</h2>
            <div class="download-sections-wrapper">
                <div id="dl-quality-section" class="dl-section" style="display:none;">
                    <h3>Video Quality</h3>
                    <div class="dl-list" id="dl-quality-list"></div>
                </div>
                <div id="dl-audio-section" class="dl-section" style="display:none;">
                    <h3>Audio Tracks</h3>
                    <div class="dl-list" id="dl-audio-list"></div>
                </div>
                <div id="dl-subs-section" class="dl-section">
                    <h3>Subtitles</h3>
                    <div class="dl-list" id="dl-subs-list"></div>
                </div>
            </div>
            <div class="dl-actions">
                <button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
                <button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
            </div>
        </div>
    </div>
 </div>
 <div class="content-container" id="main-content">
    <div class="anime-header">
        <h1 class="anime-title" id="title">Loading...</h1>
        <div class="hero-meta-info">
            <span id="local-pill" class="pill-local" style="display:none;">Local</span>
            <span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
            <span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
        </div>
        <div class="hero-description-mini" id="description-preview"></div>
        <div class="hero-tags" id="genres"></div>
        <div class="action-row">
            <button class="btn-watch" id="watch-btn">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
                Start Watching
            </button>
            <button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
        </div>
    </div>
    <div class="main-layout">
        <aside class="poster-section">
            <div class="poster-card"><img id="poster" src="" alt="Poster"></div>
            <div class="metadata-sidebar">
                <div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
                <div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
                <div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
            </div>
        </aside>
        <div class="content-column">
            <section class="episodes-section">
                <div class="episodes-header-row">
                    <h2>Episodes</h2>
                    <input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
                </div>
                <div id="episodes-grid" class="episodes-grid"></div>
                <div class="pagination-controls" id="pagination-controls">
                    <button class="page-btn" id="prev-page">Previous</button>
                    <span class="page-info" id="page-info">Page 1 of 1</span>
                    <button class="page-btn" id="next-page">Next</button>
                </div>
            </section>
            <div id="relations-section" style="display:none; margin-top: 3rem;">
                <h3 class="subsection-title">Relations</h3>
                <div class="relations-horizontal" id="relations-grid"></div>
            </div>
        </div>
    </div>
    <section class="content-section">
        <h2 class="subsection-title">Characters</h2>
        <div class="characters-grid" id="char-list"></div>
        <button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
    </section>
    <section class="content-section">
        <h2 class="subsection-title">Recommended</h2>
        <div class="carousel-wrapper">
            <button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
            <div class="carousel" id="recommendations-grid"></div>
            <button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
        </div>
    </section>
 </div>
 <script src="/src/scripts/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/url-utils.js"></script>
 <script src="/src/scripts/utils/pagination-manager.js"></script>
 <script src="/src/scripts/utils/media-metadata-utils.js"></script>
 <script src="/src/scripts/utils/youtube-player-utils.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/anime/player.js"></script>
 <script src="/src/scripts/anime/entry.js"></script>
 </body>
 </html>
--- a/desktop/views/anime/animes.html
+++ b/desktop/views/anime/animes.html
@@ -0,0 +1,138 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WaifuBoard</title>
    <link rel="stylesheet" href="/views/css/globals.css">
    <link rel="stylesheet" href="/views/css/components/navbar.css">
    <link rel="stylesheet" href="/views/css/components/hero.css">
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="stylesheet" href="/views/css/components/local-library.css">
    <link rel="stylesheet" href="/views/css/components/titlebar.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>
 <div class="hero-wrapper">
    <div class="hero-background">
        <img id="hero-bg-media" alt="">
        <div id="player" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120vw; height: 120vh; pointer-events: none; opacity: 0; transition: opacity 1s;"></div>
    </div>
    <div class="hero-vignette"></div>
    <div class="hero-content">
        <div class="hero-poster-card">
            <div class="skeleton poster-skeleton" id="hero-poster-skeleton"></div>
            <img id="hero-poster" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
        </div>
        <div class="hero-text">
            <div id="hero-loading-ui">
                <div class="skeleton title-skeleton"></div>
                <div class="skeleton text-skeleton" style="width: 40%"></div>
                <div class="skeleton text-skeleton" style="width: 100%; height: 4em;"></div>
            </div>
            <div id="hero-real-ui" style="display: none;">
                <h1 class="hero-title" id="hero-title"></h1>
                <div class="hero-meta">
                    <span class="score-badge" id="hero-score"></span>
                    <span id="hero-year"></span>
                    <span id="hero-type"></span>
                </div>
                <p class="hero-desc" id="hero-desc"></p>
                <div class="hero-buttons">
                    <button class="btn-primary" id="watch-btn">Watch Now</button>
                    <button class="btn-blur">+ Add to List</button>
                </div>
            </div>
        </div>
    </div>
    <button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
            <polyline points="9 22 9 12 15 12 15 22"/>
        </svg>
    </button>
 </div>
 <!-- Online Mode Content -->
 <main id="online-content">
    <section class="section">
        <div class="section-header">
            <div class="section-title">Continue watching</div>
        </div>
        <div class="carousel-wrapper">
            <button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
            <div class="carousel" id="my-status">
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
            </div>
            <button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
        </div>
    </section>
    <section class="section">
        <div class="section-header"><div class="section-title">Trending This Season</div></div>
        <div class="carousel-wrapper">
            <button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
            <div class="carousel" id="trending">
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
            </div>
            <button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
        </div>
    </section>
    <section class="section">
        <div class="section-header"><div class="section-title">Top Airing Now</div></div>
        <div class="carousel-wrapper">
            <button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
            <div class="carousel" id="top-airing">
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
                <div class="card"><div class="card-img-wrap skeleton"></div></div>
            </div>
            <button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
        </div>
    </section>
 </main>
 <div id="updateToast" class="hidden">
    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
        Click To Download
    </a>
 </div>
 <script src="/src/scripts/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/search-manager.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/utils/youtube-player-utils.js"></script>
 <script src="/src/scripts/anime/animes.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/settings.js"></script>
 </body>
 </html>
--- a/desktop/views/books/book.html
+++ b/desktop/views/books/book.html
@@ -0,0 +1,156 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="/">
    <title>WaifuBoard Book</title>
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
    <link rel="stylesheet" href="/views/css/globals.css">
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/books/book.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="stylesheet" href="/views/css/components/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">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
    </svg>
    Back
 </a>
 <div class="hero-wrapper">
    <div class="hero-background">
        <img id="hero-bg" src="" alt="">
    </div>
    <div class="hero-overlay"></div>
 </div>
 <div class="content-container">
    <div class="book-header-section">
        <h1 class="book-title" id="title">Loading...</h1>
        <div class="hero-meta-info">
            <span id="local-pill" class="pill-local" style="display:none;">Local</span>
            <span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
            <span id="score">--% Score</span>
            <span class="meta-separator">•</span>
            <span id="published-date">----</span>
            <span class="meta-separator">•</span>
            <span id="status">--</span>
            <span class="meta-separator">•</span>
            <span id="format">--</span>
            <span class="meta-separator">•</span>
            <span id="chapters-count">-- Ch</span>
        </div>
        <div class="hero-description-mini" id="description"></div>
        <div class="hero-tags" id="genres"></div>
        <div class="action-row">
            <button class="btn-read" id="read-start-btn">
                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M2 9v12h5v-9h8v9h5v-12h2l-10 -9 -10 9z" transform="scale(0.8) translate(3,3)"/></svg>
                Start Reading
            </button>
            <button class="btn-add-list" id="add-to-list-btn">+ Add to Library</button>
        </div>
    </div>
    <div class="main-layout">
        <aside class="poster-section">
            <div class="poster-card">
                <img id="poster" src="" alt="">
            </div>
            <div class="sidebar-extra-info" id="sidebar-info" style="display: none;">
                <h4 class="sidebar-label">Alternative Titles</h4>
                <ul class="synonyms-list" id="synonyms-list">
                </ul>
            </div>
        </aside>
        <div class="content-column">
            <div class="chapters-section">
                <div class="chapters-header">
                    <h2>Chapters</h2>
                    <div class="chapter-controls">
                        <select id="provider-filter" class="glass-select" style="display: none;">
                            <option value="all">All Providers</option>
                        </select>
                        <div id="language-selector-container" class="control-group hidden">
                            <select id="language-select" class="glass-select"></select>
                        </div>
                        <div class="search-box">
                            <input type="text" id="chapter-search" placeholder="Search..." class="glass-input">
                        </div>
                        <button id="sort-btn" class="glass-btn-icon" title="Sort">
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div id="chapters-list" class="chapters-grid"></div>
                <div id="loading-msg" style="text-align: center; padding: 2rem; display: none; color: #888;">Loading...</div>
                <div class="pagination-controls" id="pagination" style="display:none;">
                    <button class="page-btn" id="prev-page">Previous</button>
                    <span class="page-info" id="page-info">Page 1</span>
                    <button class="page-btn" id="next-page">Next</button>
                </div>
            </div>
        </div>
    </div>
    <div id="relations-section" style="display:none; margin-top: 3rem;">
        <h3 class="subsection-title">Relations</h3>
        <div class="relations-horizontal" id="relations-list"></div>
    </div>
    <section class="content-section">
        <h2 class="subsection-title">Characters</h2>
        <div class="characters-grid" id="characters-list"></div>
    </section>
 </div>
 <div id="updateToast" class="hidden">
    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">Click To Download</a>
 </div>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/url-utils.js"></script>
 <script src="/src/scripts/utils/pagination-manager.js"></script>
 <script src="/src/scripts/utils/media-metadata-utils.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/books/book.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/desktop/views/books/books.html
+++ b/desktop/views/books/books.html
@@ -0,0 +1,114 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <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/globals.css">
    <link rel="stylesheet" href="/views/css/components/navbar.css">
    <link rel="stylesheet" href="/views/css/components/hero.css">
    <link rel="stylesheet" href="/views/css/components/titlebar.css">
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
    <script src="/src/scripts/titlebar.js"></script>
    <link rel="stylesheet" href="/views/css/components/local-library.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="hero-wrapper">
    <div class="hero-background">
        <img id="hero-bg-media" src="" alt="">
    </div>
    <div class="hero-vignette"></div>
    <div class="hero-content">
        <div class="hero-poster-card">
            <img id="hero-poster" src="" alt="">
        </div>
        <div class="hero-text">
            <h1 class="hero-title" id="hero-title">Loading...</h1>
            <div class="hero-meta">
                <span class="score-badge" id="hero-score"></span>
                <span id="hero-year"></span>
                <span id="hero-type"></span>
            </div>
            <p class="hero-desc" id="hero-desc"></p>
            <div class="hero-buttons">
                <button class="btn-primary" id="read-btn">Read Now</button>
                <button class="btn-blur">+ Add to Library</button>
            </div>
        </div>
    </div>
    <button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
            <polyline points="9 22 9 12 15 12 15 22"/>
        </svg>
    </button>
 </div>
 <main id="online-content">
    <section class="section">
        <div class="section-header">
            <div class="section-title">Continue Reading</div>
        </div>
        <div class="carousel-wrapper">
            <button class="scroll-btn left" onclick="scrollCarousel('my-status-books', -1)">‹</button>
            <div class="carousel" id="my-status-books"></div>
            <button class="scroll-btn right" onclick="scrollCarousel('my-status-books', 1)">›</button>
        </div>
    </section>
    <section class="section">
        <div class="section-header"><div class="section-title">Trending Books</div></div>
        <div class="carousel-wrapper">
            <button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
            <div class="carousel" id="trending"></div>
            <button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
        </div>
    </section>
    <section class="section">
        <div class="section-header"><div class="section-title">All Time Popular</div></div>
        <div class="carousel-wrapper">
            <button class="scroll-btn left" onclick="scrollCarousel('popular', -1)">‹</button>
            <div class="carousel" id="popular"></div>
            <button class="scroll-btn right" onclick="scrollCarousel('popular', 1)">›</button>
        </div>
    </section>
 </main>
 <div id="updateToast" class="hidden">
    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
    <a
            id="downloadButton"
            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
            target="_blank"
    >
        Click To Download
    </a>
 </div>
 <script src="/src/scripts/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/utils/search-manager.js"></script>
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/books/books.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/settings.js"></script>
 </body>
 </html>
--- a/desktop/views/books/read.html
+++ b/desktop/views/books/read.html
--- a/desktop/views/components/list-modal.html
+++ b/desktop/views/components/list-modal.html
@@ -0,0 +1,66 @@
 <div class="modal-overlay" id="add-list-modal">
    <div class="modal-content modal-list">
        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
        <h2 class="modal-title" id="modal-title">Add to List</h2>
        <div class="modal-body">
            <div class="modal-fields-grid">
                <div class="form-group">
                    <label>Status</label>
                    <select id="entry-status" class="form-input">
                        <option value="CURRENT">Watching/Reading</option>
                        <option value="COMPLETED">Completed</option>
                        <option value="PLANNING">Planning</option>
                        <option value="PAUSED">Paused</option>
                        <option value="DROPPED">Dropped</option>
                        <option value="REPEATING">Rewatching</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Episodes Watched</label>
                    <input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
                </div>
                <div class="form-group">
                    <label>Your Score (0-10)</label>
                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
                </div>
                <div class="form-group full-width">
                    <div class="date-group">
                        <div class="date-input-pair">
                            <label for="entry-start-date">Start Date</label>
                            <input type="date" id="entry-start-date" class="form-input">
                        </div>
                        <div class="date-input-pair">
                            <label for="entry-end-date">End Date</label>
                            <input type="date" id="entry-end-date" class="form-input">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="entry-repeat-count">Rewatch Count</label>
                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
                </div>
                <div class="form-group notes-group">
                    <label for="entry-notes">Notes</label>
                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
                </div>
                <div class="form-group checkbox-group">
                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
                    <label for="entry-is-private">Mark as Private</label>
                </div>
            </div>
        </div>
        <div class="modal-actions">
            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
        </div>
    </div>
 </div>
--- a/desktop/views/components/navbar.html
+++ b/desktop/views/components/navbar.html
@@ -0,0 +1,75 @@
 <nav class="navbar" id="navbar">
  <a href="#" class="nav-brand">
    <div class="brand-icon">
      <img src="/public/assets/waifuboards.ico" alt="WF Logo">
    </div>
    WaifuBoard
  </a>
  <div class="nav-center">
    <button class="nav-button" data-page="anime" onclick="window.location.href='/anime'">Anime</button>
    <button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
    <button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
    <button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
    <button class="nav-button" data-page="marketplace" onclick="window.location.href='/marketplace'">Marketplace</button>
  </div>
  <div class="nav-right">
    <div class="search-wrapper">
      <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="8"/>
        <path d="M21 21l-4.35-4.35"/>
      </svg>
      <input type="text" class="search-input" id="search-input" placeholder="Search..." autocomplete="off">
      <div class="search-results" id="search-results"></div>
    </div>
    <div class="nav-user" id="nav-user" style="display:none;">
      <div class="user-avatar-btn">
        <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
        <div class="online-indicator"></div>
      </div>
      <div class="nav-dropdown" id="nav-dropdown">
        <div class="dropdown-header">
          <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
          <div class="dropdown-user-info">
            <div class="dropdown-username" id="nav-username"></div>
          </div>
        </div>
        <a href="/profile" class="dropdown-item">
          <svg xmlns="http://www.w3.org/2000/svg"
               width="18" height="18"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
          </svg>
          <span>Profile</span>
        </a>
        <button class="dropdown-item" id="nav-settings">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="3"/>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.18a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.18a1.65 1.65 0 0 0 1.82-.33 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.37 0 .72-.14 1-.6A1.65 1.65 0 0 0 10.33 2.18V2a2 2 0 1 1 4 0v.18a1.65 1.65 0 0 0 .33 1.82c.28.46.63.6 1 .6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .37.14.72.6 1 .46.28.6.63.6 1z"/>
          </svg>
          <span>Settings</span>
        </button>
        <button class="dropdown-item logout-item" id="nav-logout">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
            <polyline points="16 17 21 12 16 7"/>
            <line x1="21" y1="12" x2="9" y2="12"/>
          </svg>
          <span>Logout</span>
        </button>
      </div>
    </div>
  </div>
 </nav>
--- a/desktop/views/components/settings-modal.html
+++ b/desktop/views/components/settings-modal.html
@@ -0,0 +1,310 @@
 <div id="settings-modal" class="modal hidden" onclick="if(event.target === this) window.toggleSettingsModal(true)">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <aside class="modal-sidebar">
      <div class="sidebar-header">
        <h2 class="sidebar-title">Settings</h2>
      </div>
      <nav id="config-nav" class="nav-list">
      </nav>
      <div class="sidebar-footer">
        <button onclick="window.toggleSettingsModal(true)" class="btn-exit">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
            <polyline points="16 17 21 12 16 7"></polyline>
            <line x1="21" y1="12" x2="9" y2="12"></line>
          </svg>
          Close
        </button>
      </div>
    </aside>
    <main class="modal-main">
      <form id="config-form" class="config-wrapper">
        <div id="config-section-content" class="section-container">
          <div class="skeleton-loader">
            <div class="skeleton title-skeleton"></div>
            <div class="skeleton field-skeleton"></div>
            <div class="skeleton field-skeleton"></div>
            <div class="skeleton field-skeleton"></div>
          </div>
        </div>
        <div class="modal-footer-sticky">
          <p class="footer-hint">Changes are applied immediately after saving.</p>
          <button type="submit" class="btn-primary">Save Changes</button>
        </div>
      </form>
    </main>
  </div>
 </div>
 <style>
  /* --- THEME VARIABLES (Heredadas y adaptadas de anime.css) --- */
  :root {
    --modal-bg: #0b0b0b;
    --modal-sidebar: rgba(255, 255, 255, 0.02);
    --modal-border: rgba(255, 255, 255, 0.08);
    --input-bg: rgba(255, 255, 255, 0.04);
    --accent: #8b5cf6; /* Tu morado principal */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
  }
  /* --- MODAL BASE --- */
  .modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: system-ui, -apple-system, sans-serif; /* Coherencia con anime.css */
  }
  .modal.hidden { display: none !important; }
  .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85); /* Un poco menos opaco para profundidad */
    backdrop-filter: blur(8px);
    z-index: -1;
    animation: fadeIn 0.3s ease;
  }
  .modal-content {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1100px;
    height: 80vh;
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: 16px; /* Bordes menos exagerados, más elegantes */
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* --- SIDEBAR --- */
  .modal-sidebar {
    width: 260px;
    background: var(--modal-sidebar);
    border-right: 1px solid var(--modal-border);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    flex-shrink: 0;
  }
  .sidebar-header { margin-bottom: 2rem; }
  .sidebar-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.03em;
  }
  .nav-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .nav-item {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: capitalize;
  }
  .nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
  }
  .nav-item.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); /* Glow sutil */
  }
  /* --- MAIN CONTENT area --- */
  .modal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    min-width: 0;
    position: relative;
  }
  .config-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .section-container {
    flex: 1;
    padding: 3rem;
    overflow-y: auto;
    /* Custom Scrollbar sutil */
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
  }
  /* --- INPUTS & FORMS (Estilo WaifuBoards/Anime) --- */
  .config-group {
    margin-bottom: 2rem;
    animation: fadeInSection 0.3s ease-out;
  }
  .config-group label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .config-input {
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--modal-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
  }
  .config-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 1px var(--accent);
  }
  /* --- FOOTER ACTION BAR --- */
  .modal-footer-sticky {
    padding: 1.2rem 3rem;
    background: rgba(11, 11, 11, 0.8); /* Glass effect */
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--modal-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
  }
  /* --- BUTTONS --- */
  .btn-primary {
    padding: 0.7rem 2rem;
    background: white; /* Estilo 'btn-watch' de anime.css */
    color: black;
    border: none;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s;
  }
  .btn-primary:hover {
    transform: scale(1.02);
    filter: brightness(0.9);
  }
  .btn-exit {
    background: transparent;
    border: 1px solid var(--modal-border);
    color: #ef4444; /* Rojo error sutil */
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    margin-top: auto;
    transition: background 0.2s;
  }
  .btn-exit:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
  }
  /* --- SKELETON & ANIMATIONS --- */
  @keyframes modalSlideUp {
    from { opacity: 0; transform: scale(0.98) translateY(15px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fadeInSection { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
  .skeleton-loader { display: flex; flex-direction: column; gap: 1.5rem; }
  .skeleton {
    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    border-radius: 6px;
  }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .title-skeleton { height: 28px; width: 30%; margin-bottom: 1rem; }
  .field-skeleton { height: 48px; width: 100%; }
  /* --- RESPONSIVE --- */
  @media (max-width: 850px) {
    .modal-content { flex-direction: column; height: 100%; width: 100%; border-radius: 0; border: none; }
    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--modal-border); padding: 1.5rem; }
    .sidebar-footer { display: none; } /* Ocultar btn salir sidebar en movil */
    .section-container { padding: 1.5rem; }
    .modal-footer-sticky { padding: 1rem 1.5rem; }
    /* Añadir un botón de cierre flotante en móvil si fuera necesario,
       pero el diseño actual debería funcionar bien con scroll */
  }
  /* --- Estilo para la nueva descripción --- */
  .config-description {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5); /* Gris sutil */
    /* Ajustes para posición inferior */
    margin-top: 0.5rem;    /* Espacio entre el input y la descripción */
    margin-bottom: 0;      /* Ya no necesitamos margen abajo */
    line-height: 1.4;
    font-weight: 400;
  }
  /* Ajuste para inputs vacíos (placeholder) */
  .config-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-style: italic;
  }
 </style>
--- a/desktop/views/css/anime/anime.css
+++ b/desktop/views/css/anime/anime.css
@@ -0,0 +1,274 @@
 :root {
    --bg-card: rgba(255, 255, 255, 0.04);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --color-primary: #8b5cf6;
    --player-height: 85vh;
 }
 body {
    background: #0b0b0b;
    color: white;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    font-family: system-ui, -apple-system, sans-serif;
 }
 .top-media-wrapper {
    position: relative;
    width: 100vw;
    left: 0;
    background: #000;
    transition: all 0.5s ease-in-out;
 }
 .hero-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
 }
 .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
 }
 .video-background iframe,
 .video-background #trailer-player {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
 }
 .hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 70%, #0b0b0b 100%);
    z-index: 2;
 }
 .content-container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: -45vh auto 0 auto;
    padding: 0 3rem 4rem 3rem;
    transition: margin-top 0.5s ease;
 }
 body.watch-mode .content-container { margin-top: 0; }
 body.watch-mode .anime-header { margin-top: 2rem; }
 .anime-header { margin-bottom: 5rem; max-width: 900px; }
 .anime-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
    margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
 }
 .hero-meta-info {
    display: flex; align-items: center; gap: 0.8rem;
    color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
 }
 .pill-local {
    background: #22c55e; color: black; padding: 2px 8px;
    border-radius: 4px; font-size: 0.75rem; font-weight: 900;
 }
 .hero-description-mini {
    font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
    margin-bottom: 1.2rem; max-width: 700px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
 }
 .hero-tags {
    display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
    color: rgba(255,255,255,0.5); font-weight: 500;
 }
 .action-row { display: flex; align-items: center; gap: 1rem; }
 .btn-watch {
    padding: 0.8rem 2.2rem; background: white; color: black;
    border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
 }
 .btn-watch:hover { transform: scale(1.03); filter: brightness(0.9); }
 .btn-add-list {
    padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2); color: white;
    border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
 }
 .btn-add-list:hover { background: rgba(255,255,255,0.2); }
 .main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-top: 2rem; }
 .content-section { margin-top: 4rem; }
 h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
 .poster-card {
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
 }
 .poster-card img { width: 100%; height: auto; display: block; }
 .relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
 .relation-card-horizontal {
    display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
 }
 .relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
 .rel-img { width: 85px; height: 110px; object-fit: cover; }
 .rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
 .rel-type {
    font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
    margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
 }
 .rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
 .characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
 .character-item { display: flex; align-items: center; gap: 1rem; }
 .char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
 .char-avatar img { width: 100%; height: 100%; object-fit: cover; }
 .char-info { display: flex; flex-direction: column; gap: 2px; }
 .char-name { font-size: 1rem; font-weight: 700; color: #fff; }
 .char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
 .btn-show-more { background: transparent; border: 1px solid var(--border-subtle); color: #aaa; padding: 10px; width: 100%; margin-top: 1rem; cursor: pointer; }
 .episodes-section { margin-top: 3rem; }
 .episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
 .episode-search-input {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
    color: white; padding: 8px 15px; border-radius: 8px; width: 100px;
 }
 .episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: 0.6rem;
 }
 .episode-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    padding: 0.6rem 0;
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: #ccc;
 }
 .episode-btn:hover {
    background: white;
    color: black;
    transform: translateY(-2px);
 }
 .episode-btn.active-playing {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
 }
 .metadata-sidebar {
    margin-top: 2rem;
    background: rgba(255,255,255,0.03);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
 }
 .meta-item-side {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 0.8rem;
 }
 .meta-item-side:last-child { border-bottom: none; padding-bottom: 0; }
 .meta-item-side span {
    font-size: 0.8rem;
    color: #888;
    font-weight: 600;
 }
 .meta-item-side p {
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    margin: 0;
    text-align: right;
 }
@media (max-width: 1024px) {
    .content-container { margin-top: -200px; padding: 0 1.5rem; }
    .main-layout { grid-template-columns: 1fr; gap: 2rem; }
    .poster-section { display: flex; flex-direction: column; align-items: center; }
    .poster-card { width: 220px; }
    .metadata-sidebar { width: 100%; max-width: 400px; }
 }
 .relation-card-horizontal.no-link {
    cursor: default;
    opacity: 0.7;
 }
 .relation-card-horizontal.no-link:hover {
    transform: none;
    background: var(--bg-card);
 }
 .pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
 .page-info {
    font-size: 0.9rem;
    font-weight: 700;
    color: #888;
    min-width: 100px;
    text-align: center;
 }
 .page-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .page-btn:hover:not(:disabled) {
    background: white;
    color: black;
    border-color: white;
 }
 .page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
 }
--- a/desktop/views/css/anime/player.css
+++ b/desktop/views/css/anime/player.css
@@ -0,0 +1,919 @@
 :root {
    --brand-color: #8b5cf6;
    --brand-color-light: #a78bfa;
    --op-color: #fbbf24;
    --ed-color: #38bdf8;
    --overlay-gradient-top: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    --overlay-gradient-bottom: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
 }
 body.stop-scrolling {
    overflow: hidden !important;
    height: 100vh;
 }
 .player-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    display: none;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #fff;
 }
 .player-wrapper * {
    box-sizing: border-box;
 }
 .player-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
 }
 .video-frame {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .video-frame video {
    width: 100%;
    height: 100%;
    object-fit: contain;
 }
 .video-frame .plyr {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
 }
 .player-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
    pointer-events: none; /* Permite clickear el video a través del header vacío */
    transition: opacity 0.3s ease;
 }
 .header-left, .header-right {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 15px;
 }
 .btn-icon-glass {
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 10px;
    border-radius: 20%;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
 }
 .btn-icon-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-1px) scale(1.05);
 }
 .player-container:hover .player-header,
 .player-container.paused .player-header {
    opacity: 1;
    pointer-events: all;
 }
 .player-meta {
    display: flex; flex-direction: column; gap: 0.5rem;
 }
 .btn-close-player {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; font-weight: 500;
    cursor: pointer; padding: 0;
    transition: color 0.2s;
 }
 .btn-close-player:hover { color: #fff; }
 .btn-close-player svg { width: 28px; height: 28px; }
 .episode-info {
    display: flex;
    flex-direction: column;
 }
 .ep-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    letter-spacing: 1px;
 }
 .ep-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
 }
 .nav-capsule {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px; /* Forma de pastilla */
    overflow: hidden;
    backdrop-filter: blur(10px);
 }
 .nav-btn {
    background: transparent;
    border: none;
    color: white;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
 }
 .nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
 }
 .nav-capsule .divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
 }
 #skip-overlay-btn {
    position: absolute;
    bottom: 80px; /* Encima de la barra de Plyr */
    right: 30px;
    background: white;
    color: black;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    z-index: 2147483647 !important; /* Siempre encima de todo */
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s, background 0.2s;
    pointer-events: none;
 }
 #skip-overlay-btn.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    visibility: visible !important;
    display: flex !important;
 }
 #skip-overlay-btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
 }
 #skip-overlay-btn.is-next {
    background: #8b5cf6;
    color: white;
 }
 #skip-overlay-btn.is-next:hover {
    background: #7c3aed;
 }
 /* --- BOTONES DE NAVEGACIÓN LATERALES (Side Chevrons) --- */
 .side-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    border: none;
    width: 60px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30; /* Encima del video */
    transition: all 0.3s ease;
    opacity: 0; /* Invisibles por defecto */
 }
 /* Bordes redondeados según el lado */
 .side-nav-btn.left {
    left: 0;
    border-radius: 0 10px 10px 0;
 }
 .side-nav-btn.right {
    right: 0;
    border-radius: 10px 0 0 10px;
 }
 /* Mostrar solo cuando el mouse está sobre el reproductor */
 .player-container:hover .side-nav-btn {
    opacity: 1;
 }
 /* Efecto Hover sobre el botón */
 .side-nav-btn:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.6); /* Tu color brand morado pero transparente */
    color: white;
    width: 70px; /* Crecen un poco */
 }
 /* Estado deshabilitado (Primer/Último episodio) */
 .side-nav-btn:disabled {
    cursor: default;
    opacity: 0 !important; /* Totalmente oculto si no se puede usar */
    pointer-events: none;
 }
 #player-episode-title {
    font-size: 1.5rem; font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin-left: 2px;
 }
 .player-controls-top {
    display: flex; gap: 1rem; align-items: center;
 }
 .glass-select {
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
 }
 .glass-select:hover { background: rgba(255, 255, 255, 0.2); }
 .glass-select option { background: #111; color: #ccc; }
 .sd-toggle {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    display: flex;
    padding: 2px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
 }
 .sd-option {
    padding: 4px 12px;
    font-size: 0.75rem; font-weight: 700;
    color: rgba(255,255,255,0.5);
    border-radius: 2px;
    transition: all 0.2s;
 }
 .sd-option.active {
    background: #fff;
    color: #000;
 }
 .btn-skip-intro {
    position: absolute;
    bottom: 120px; right: 40px;
    background: #fff;
    color: #000;
    border: none;
    padding: 10px 24px;
    font-weight: 700; font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    z-index: 50;
    display: flex; align-items: center; gap: 8px;
    opacity: 0; transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
 }
 .btn-skip-intro.visible {
    opacity: 1; transform: translateY(0);
 }
 .btn-skip-intro:hover {
    background: #e6e6e6;
    transform: scale(1.02);
 }
 :root {
    --plyr-color-main: var(--brand-color);
    --plyr-video-control-color: #fff;
    --plyr-video-control-background-hover: transparent;
    --plyr-control-icon-size: 20px;
    --plyr-range-track-height: 4px;
    --plyr-range-thumb-height: 14px;
    --plyr-range-thumb-background: #fff;
    --plyr-menu-background: rgba(20, 20, 20, 0.95);
    --plyr-menu-color: #fff;
    --plyr-tooltip-background: rgba(255,255,255,0.9);
    --plyr-tooltip-color: #000;
 }
 .plyr--video .plyr__controls {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
 }
 .plyr__progress__container:hover .plyr__progress input[type=range],
 .plyr__progress__container:hover .plyr__progress__buffer {
    height: 8px;
    transition: height 0.1s ease;
 }
 .plyr__progress {
    position: relative;
    cursor: pointer;
 }
 .skip-marker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    z-index: 3;
    pointer-events: none;
    transition: height 0.1s ease;
    background-color: rgba(255, 255, 255, 0.3);
    border-left: 2px solid rgba(0,0,0,0);
    border-right: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
 }
 .plyr__progress__container:hover .skip-marker {
    height: 8px;
 }
 .skip-marker.op {
    background-color: var(--op-color);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
 }
 .skip-marker.ed {
    background-color: var(--ed-color);
 }
 .player-loading-overlay {
    background: #000;
 }
 .spinner {
    border-width: 2px;
    width: 50px; height: 50px;
    border-top-color: #fff;
    border-right-color: rgba(255,255,255,0.1);
    border-bottom-color: rgba(255,255,255,0.1);
    border-left-color: rgba(255,255,255,0.1);
 }
 .settings-group {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre los elementos */
 }
 /* Opcional: Ajuste para pantallas móviles muy pequeñas */
@media (max-width: 600px) {
    .settings-group {
        gap: 8px;
    }
    .glass-select {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
 }
 .player-container:fullscreen,
 .player-container:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: #000;
    position: fixed;
    inset: 0;
    z-index: 99999;
 }
 /* Controles custom SIEMPRE visibles encima */
 .player-container:fullscreen .player-header,
 .player-container:fullscreen .side-nav-btn,
 .player-container:fullscreen #skip-overlay-btn,
 .player-container:-webkit-full-screen .player-header,
 .player-container:-webkit-full-screen .side-nav-btn,
 .player-container:-webkit-full-screen #skip-overlay-btn {
    z-index: 2147483647 !important;
    visibility: visible;
 }
 /* Posición correcta del botón Skip en fullscreen */
 .player-container:fullscreen #skip-overlay-btn,
 .player-container:-webkit-full-screen #skip-overlay-btn {
    bottom: 100px;
    right: 50px;
 }
 /* ================= UI HIDDEN (UNA SOLA FUENTE DE VERDAD) ================= */
 .player-container.ui-hidden .player-header,
 .player-container.ui-hidden .side-nav-btn {
    opacity: 0;
    pointer-events: none;
    cursor: none;
 }
 #skip-overlay-btn {
    opacity: 0;
    pointer-events: none;
 }
 #skip-overlay-btn.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
 }
 .player-container.ui-hidden #skip-overlay-btn.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    visibility: visible !important;
 }
 .player-header,
 .side-nav-btn,
 #skip-overlay-btn {
    transition: opacity 0.3s ease, transform 0.3s ease;
 }
 .player-container:fullscreen #skip-overlay-btn,
 .player-container:-webkit-full-screen #skip-overlay-btn {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
 }
 .player-container:fullscreen #skip-overlay-btn.visible,
 .player-container:-webkit-full-screen #skip-overlay-btn.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
 }
 .glass-btn-mpv {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    height: 36px;
 }
 .glass-btn-mpv:hover {
    background: white;
    color: black;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
 }
 .glass-btn-mpv svg {
    margin-top: -1px;
 }
 .glass-btn-mpv:active {
    transform: scale(0.95);
 }
 .plyr__custom-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
 }
 /* El select real: invisible pero clickable */
 .plyr__custom-select-wrapper select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2; /* Encima del botón visual */
    appearance: none;
    -webkit-appearance: none;
 }
 /* El botón visual que imita a Plyr */
 .plyr__custom-control-btn {
    position: relative;
    background: transparent;
    border: none;
    color: #fff; /* Plyr default white */
    padding: 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
 }
 .plyr__custom-control-btn:hover {
    background: rgba(255, 255, 255, 0.15); /* Plyr hover effect */
    color: #fff;
 }
 .plyr__custom-control-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    pointer-events: none;
 }
 /* Badge pequeño para indicar calidad actual (opcional) */
 .quality-badge {
    background: var(--brand-color);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
 }
 .download-settings-content {
    background: #1a1a1a;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
 }
 .download-sections-wrapper {
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 20px;
    flex: 1;
 }
 .dl-section {
    margin-bottom: 1.5rem;
 }
 .dl-section h3 {
    font-size: 0.9rem;
    color: var(--brand-color-light);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
 }
 .dl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
 }
 .dl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
 }
 .dl-item:hover {
    background: rgba(255,255,255,0.1);
 }
 .dl-item input[type="radio"],
 .dl-item input[type="checkbox"] {
    accent-color: var(--brand-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
 }
 .dl-item span {
    font-size: 0.9rem;
    color: #eee;
    flex: 1;
 }
 .dl-item .tag-info {
    font-size: 0.75rem;
    color: #aaa;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
 }
 .dl-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
 }
 .btn-cancel {
    background: transparent;
    border: 1px solid #444;
    color: #ccc;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
 }
 .btn-confirm {
    background: var(--brand-color);
    border: none;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
 }
 .btn-confirm:hover {
    background: #7c3aed;
 }
 /* =========================================
   MODAL DE DESCARGAS - REDISEÑO "GLASS"
   ========================================= */
 #download-modal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* Fondo oscurecido */
    backdrop-filter: blur(8px); /* Desenfoque del fondo */
    z-index: 2147483647 !important; /* Encima de todo */
    display: none; /* Controlado por JS/Clases */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Por defecto no bloquea, JS lo activa */
 }
 /* Estado visible activado por JS */
 #download-modal.show {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
 }
 .download-settings-content {
    background: rgba(20, 20, 20, 0.85); /* Fondo semitransparente oscuro */
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px; /* Bordes más redondeados como anime.css */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    padding: 24px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: #fff;
    overflow: hidden;
 }
 #download-modal.show .download-settings-content {
    transform: scale(1);
 }
 /* Botón de cerrar (X) */
 .download-settings-content .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
 }
 .download-settings-content .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
 }
 .modal-title {
    margin: 0 0 20px 0;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
 }
 /* Wrappers internos */
 .download-sections-wrapper {
    overflow-y: auto;
    padding-right: 8px; /* Espacio para scrollbar */
    margin-bottom: 20px;
    flex: 1;
 }
 /* Scrollbar personalizado fino */
 .download-sections-wrapper::-webkit-scrollbar { width: 6px; }
 .download-sections-wrapper::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
 .download-sections-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
 .download-sections-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
 .dl-section { margin-bottom: 1.5rem; }
 .dl-section h3 {
    font-size: 0.75rem;
    color: var(--brand-color-light); /* Morado claro */
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
 }
 .dl-section h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(139, 92, 246, 0.3), transparent);
 }
 .dl-list { display: flex; flex-direction: column; gap: 8px; }
 /* Items de la lista */
 .dl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    user-select: none;
 }
 .dl-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
 }
 /* Inputs nativos con color de marca */
 .dl-item input[type="radio"],
 .dl-item input[type="checkbox"] {
    accent-color: var(--brand-color);
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
 }
 .dl-item span {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    flex: 1;
    font-weight: 500;
 }
 .dl-item .tag-info {
    font-size: 0.7rem;
    color: #ccc;
    background: rgba(0, 0, 0, 0.4);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
 }
 /* Pie del modal (Botones) */
 .dl-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 .btn-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
 }
 .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: white;
 }
 .btn-confirm {
    background: var(--brand-color);
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
 }
 .btn-confirm:hover {
    background: #7c3aed; /* Un tono más oscuro del brand */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
 }
--- a/desktop/views/css/books/book.css
+++ b/desktop/views/css/books/book.css
@@ -0,0 +1,228 @@
 :root {
    --bg-card: rgba(255, 255, 255, 0.04);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --color-primary: #8b5cf6;
 }
 /* --- BASICS --- */
 .back-btn {
    position: fixed; top: 2rem; left: 2rem; z-index: 100; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.8rem 1.5rem; background: var(--color-glass-bg); backdrop-filter: blur(12px);
    border: var(--border-subtle); border-radius: 8px; /* Anime style */
    color: white; text-decoration: none; font-weight: 600; transition: all 0.2s ease;
 }
 .back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
 .hero-wrapper { position: relative; width: 100%; height: 60vh; overflow: hidden; }
 .hero-background { position: absolute; inset: 0; z-index: 0; }
 .hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
 .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%); }
 .content-container {
    position: relative; z-index: 10; max-width: 1400px; margin: -300px auto 0 auto;
    padding: 0 3rem 4rem 3rem;
 }
 /* --- HEADER SECTION --- */
 .book-header-section { margin-bottom: 4rem; max-width: 900px; }
 .book-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
    margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6); line-height: 1.1;
 }
 .hero-meta-info {
    display: flex; align-items: center; gap: 0.8rem;
    color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
    flex-wrap: wrap;
 }
 .meta-separator { color: rgba(255,255,255,0.3); font-size: 0.8rem; }
 .pill-local {
    background: #22c55e; color: black; padding: 2px 8px;
    border-radius: 4px; font-size: 0.75rem; font-weight: 900;
 }
 .hero-description-mini {
    font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
    margin-bottom: 1.2rem; max-width: 700px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
 }
 .hero-tags {
    display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
    color: rgba(255,255,255,0.5); font-weight: 500;
 }
 /* --- BUTTONS --- */
 .action-row { display: flex; align-items: center; gap: 1rem; }
 .btn-read {
    padding: 0.8rem 2.2rem; background: white; color: black;
    border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
 }
 .btn-read:hover { transform: scale(1.03); filter: brightness(0.9); }
 .btn-add-list {
    padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2); color: white;
    border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
 }
 .btn-add-list:hover { background: rgba(255,255,255,0.2); }
 /* --- MAIN LAYOUT --- */
 .main-layout { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; margin-top: 2rem; }
 /* Sidebar */
 .poster-section { display: flex; flex-direction: column; gap: 1.5rem; }
 .poster-card {
    border-radius: 12px; overflow: hidden; width: 100%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
 }
 .poster-card img { width: 100%; height: auto; display: block; aspect-ratio: 2/3; object-fit: cover; }
 /* Sidebar Extra Info (Synonyms) */
 .sidebar-extra-info {
    background: rgba(255,255,255,0.03); padding: 1.5rem;
    border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
 }
 .sidebar-label {
    font-size: 0.8rem; color: #888; text-transform: uppercase; margin: 0 0 1rem 0; letter-spacing: 0.5px;
 }
 .synonyms-list {
    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem;
 }
 .synonyms-list li {
    font-size: 0.9rem; color: #ddd; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem;
 }
 .synonyms-list li:last-child { border-bottom: none; }
 /* --- CONTENT COLUMN --- */
 .content-section { margin-top: 4rem; }
 h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
 /* Chapters Section */
 .chapters-section { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem; }
 .chapters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
 /* Chapter Controls */
 .chapter-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
 .glass-select, .glass-input {
    appearance: none; -webkit-appearance: none;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);
    padding: 0.4rem 2rem 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; height: 34px;
    outline: none; backdrop-filter: blur(4px); transition: all 0.2s ease; cursor: pointer; min-width: 110px;
 }
 .glass-input { background-image: none; padding: 0.4rem 0.8rem; width: 180px; }
 .glass-input:focus { border-color: var(--color-primary); width: 220px; }
 .glass-btn-icon { width: 34px; height: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
 .glass-btn-icon:hover { background: var(--color-primary); border-color: var(--color-primary); }
 /* Chapters Grid */
 .chapters-grid { display: flex; flex-direction: column; gap: 0.5rem; }
 .chapter-item {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.8rem 1.2rem; border-radius: 8px;
    transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden;
 }
 .chapter-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); border-color: rgba(255, 255, 255, 0.2); }
 .chapter-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-primary); opacity: 0; transition: opacity 0.2s; }
 .chapter-info { display: flex; flex-direction: column; gap: 0.2rem; }
 .chapter-number { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; }
 .chapter-title { font-size: 1rem; font-weight: 500; color: white; }
 .chapter-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: #888; }
 .lang-tag { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1); text-transform: uppercase; color: #ccc; }
 /* --- RELATIONS (Horizontal Cards) --- */
 .relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
 .relation-card-horizontal {
    display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
 }
 .relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
 .rel-img { width: 85px; height: 110px; object-fit: cover; }
 .rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
 .rel-type {
    font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
    margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
 }
 .rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
 /* --- CHARACTERS (Grid Style) --- */
 .characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
 .character-item { display: flex; align-items: center; gap: 1rem; }
 .char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
 .char-avatar img { width: 100%; height: 100%; object-fit: cover; }
 .char-info { display: flex; flex-direction: column; gap: 2px; }
 .char-name { font-size: 1rem; font-weight: 700; color: #fff; }
 .char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
 /* --- PAGINATION --- */
 .pagination-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; align-items: center; }
 .page-btn { background: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.1); color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
 .page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .page-btn:hover:not(:disabled) { border-color: var(--color-primary); }
@media (max-width: 1024px) {
    .content-container { margin-top: -150px; padding: 0 1.5rem; }
    .main-layout { grid-template-columns: 1fr; gap: 2rem; }
    .poster-section { display: flex; flex-direction: column; align-items: center; }
    .poster-card { width: 220px; }
    .metadata-sidebar { width: 100%; max-width: 400px; }
 }
@media (max-width: 768px) {
    .hero-wrapper { height: 40vh; }
    .book-title { font-size: 2.5rem; }
    .action-row { flex-direction: column; width: 100%; }
    .btn-read, .btn-add-list { width: 100%; justify-content: center; }
    .chapters-header { flex-direction: column; align-items: flex-start; }
    .chapter-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .search-box { grid-column: span 2; }
    .glass-input { width: 100%; }
 }
 .chapter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
 }
 .chapter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
 }
 .download-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #ccc;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .download-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    color: #fff;
 }
 .download-btn:disabled {
    opacity: 0.7;
    cursor: wait;
 }
--- a/desktop/views/css/books/reader.css
+++ b/desktop/views/css/books/reader.css
@@ -0,0 +1,625 @@
 :root {
    --bg-surface: #14141b;
    --bg-elevated: #1c1c26;
    --bg-hover: #252530;
 }
 .hidden {
    display: none !important;
 }
 .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
 }
 .glass-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--color-text-primary);
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
 }
 .glass-btn:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary);
    transform: translateY(-1px);
 }
 .glass-btn:active {
    transform: translateY(0);
 }
 .chapter-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
 }
 .nav-arrow {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .nav-arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.05);
 }
 .nav-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
 }
 #reader {
    margin-top: 64px;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 64px);
    width: 100%;
 }
 .manga-container {
    width: 100%;
    max-width: var(--manga-max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--page-spacing, 16px);
 }
 .page-img {
    width: 100%;
    max-width: var(--page-max-width, 900px);
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
    cursor: pointer;
    display: block;
 }
 .page-img:hover {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
 }
 .page-img.zoomed {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100vw;
    max-height: calc(100vh - 64px);
    width: auto;
    height: auto;
    margin: auto;
    z-index: 999;
    cursor: zoom-out;
    border-radius: 0;
    object-fit: contain;
 }
 .zoom-overlay {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 998;
    cursor: zoom-out;
 }
 .double-container {
    display: flex;
    gap: var(--page-spacing, 16px);
    width: 100%;
    max-width: var(--manga-max-width, 1400px);
    justify-content: center;
 }
 .double-container img {
    width: 48%;
    max-width: 700px;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    object-fit: contain;
    cursor: pointer;
    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
 }
 .double-container img:hover {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
 }
 .ln-content {
    max-width: var(--ln-max-width, 750px);
    width: 100%;
    margin: 0 auto;
    padding: 3rem 2.5rem;
    line-height: var(--ln-line-height, 1.8);
    font-size: var(--ln-font-size, 18px);
    font-family: var(--ln-font-family, "Georgia", serif);
    color: var(--ln-text-color, #e5e7eb);
    text-align: var(--ln-text-align, left);
 }
 .ln-content p {
    margin-bottom: 1.5em;
 }
 .ln-content h1,
 .ln-content h2,
 .ln-content h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 700;
 }
 .settings-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    padding: 0;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-subtle);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
 }
 .settings-panel.open {
    transform: translateX(0);
 }
 .panel-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    z-index: 10;
    background: #0a0a0f;
    border-bottom: 1px solid var(--border-subtle);
 }
 .panel-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
 }
 .close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: none;
    color: var(--color-text-secondary);
 }
 .close-btn:hover {
    background: var(--color-primary);
    color: var(--color-text-primary);
    transform: rotate(90deg);
 }
 .panel-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
 }
 .settings-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
 }
 .settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
 }
 .settings-section h4 {
    margin: 0 0 1.25rem 0;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
 }
 .control {
    margin-bottom: 1.25rem;
 }
 .control:last-child {
    margin-bottom: 0;
 }
 .control label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-weight: 500;
 }
 .control label span {
    color: var(--color-text-primary);
    font-weight: 600;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.8125rem;
 }
 input[type="range"] {
    width: 100%;
    border-radius: var(--radius-full);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
    height: 8px;
    background: var(--bg-hover);
 }
 input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
    width: 20px;
    height: 20px;
    background: var(--color-primary);
 }
 input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.6);
 }
 input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
 }
 select,
 input[type="color"],
 input[type="number"] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    transition: all 0.2s;
    cursor: pointer;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
 }
 select:hover,
 input[type="color"]:hover,
 input[type="number"]:hover {
    border-color: var(--color-primary);
 }
 select:focus,
 input[type="color"]:focus,
 input[type="number"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
    transform: translateY(-1px);
 }
 input[type="color"] {
    height: 44px;
    padding: 0.25rem;
    cursor: pointer;
 }
 .presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
 }
 .presets button {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    padding: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    font-weight: 700;
    letter-spacing: 0.02em;
 }
 .presets button:hover {
    background: var(--color-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--color-primary-glow);
 }
 .toggle-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
 }
 .toggle-btn {
    flex: 1;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.8125rem;
    text-align: center;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--color-text-secondary);
    font-weight: 600;
 }
 .toggle-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
 }
 .toggle-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    box-shadow: 0 2px 10px var(--color-primary-glow);
 }
 .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
 }
 .overlay.active {
    opacity: 1;
    pointer-events: all;
 }
 .loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-elevated);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
 }
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
 }
 .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--color-text-secondary);
 }
 .settings-panel::-webkit-scrollbar {
    width: 8px;
 }
 .settings-panel::-webkit-scrollbar-track {
    background: var(--bg-surface);
 }
 .settings-panel::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: 4px;
 }
 .settings-panel::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
 }
@media (max-width: 768px) {
    .settings-panel {
        width: 100%;
        max-width: 100%;
    }
    .top-bar {
        padding: 0 1rem;
    }
    .glass-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
    .chapter-info {
        font-size: 0.875rem;
        gap: 0.75rem;
    }
    .double-container {
        flex-direction: column;
    }
    .double-container img {
        width: 100%;
        max-width: 100%;
    }
    .ln-content {
        padding: 2rem 1.5rem;
        font-size: var(--ln-font-size, 16px);
    }
 }
 .fit-width {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
 }
 .fit-height {
    height: var(--viewport-height, 85vh) !important;
    width: auto !important;
    max-width: 100% !important;
 }
 .fit-screen {
    max-height: var(--viewport-height, 85vh) !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
 }
 .page-img.longstrip-fit {
    width: 50%;
    max-width: 50%;
    margin: 0 auto;
    display: block;
 }
@media (max-width: 768px) {
    #reader {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 64px;
    }
    .manga-container {
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
    }
    .page-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .page-img.longstrip-fit {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .double-container {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }
    .double-container img {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    .fit-height,
    .fit-screen {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
 }
 .double-container.break-double {
    display: block;
 }
 .double-container.break-double img {
    width: 100%;
    max-width: 100%;
    display: block;
 }
--- a/desktop/views/css/components/anilist-modal.css
+++ b/desktop/views/css/components/anilist-modal.css
@@ -0,0 +1,279 @@
 :root {
    --color-primary: #8b5cf6;
    --bg-modal: rgba(15, 15, 15, 0.95);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(0, 0, 0, 0.4);
 }
 .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
 }
 .modal-overlay.active {
    opacity: 1;
    visibility: visible;
 }
 .modal-content {
    background: var(--bg-modal);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    max-width: 850px;
    width: 95%;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.05);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
 }
 .modal-close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    color: #ccc;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
    z-index: 2001;
 }
 .modal-close:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
    transform: rotate(90deg);
 }
 .modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    padding: 2rem 2.5rem 1rem 2.5rem;
    margin: 0;
    color: white;
    border-bottom: 1px solid var(--border-subtle);
    letter-spacing: -0.02em;
    background: linear-gradient(to right, #fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
 }
 .modal-body {
    padding: 0 2.5rem;
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
 }
 .modal-body::-webkit-scrollbar { width: 6px; }
 .modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
 .modal-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem;
    padding: 2rem 0;
 }
 .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
 }
 .form-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
 }
 .form-input {
    background: var(--input-bg);
    border: 1px solid var(--border-subtle);
    color: white;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
 }
 .form-input:focus {
    outline: none;
    background: rgba(0,0,0,0.6);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
 }
 .form-group.notes-group { grid-column: 1 / span 2; }
 .form-group.checkbox-group { grid-column: 3 / 4; align-self: end; margin-bottom: 0.8rem; }
 .form-group.full-width { grid-column: 1 / -1; }
 .notes-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
 .date-group { display: flex; gap: 1.5rem; }
 .date-input-pair { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
 .checkbox-group {
    flex-direction: row;
    align-items: center;
    background: rgba(255,255,255,0.02);
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: 0.2s;
 }
 .checkbox-group:hover { border-color: var(--border-subtle); }
 .form-checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    appearance: none;
    position: relative;
    transition: 0.2s;
 }
 .form-checkbox:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
 }
 .form-checkbox:checked::after {
    content: "✓";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: 900;
 }
 .modal-actions {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 2.5rem;
    border-top: 1px solid var(--border-subtle);
    background: rgba(10, 10, 10, 0.3);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    backdrop-filter: blur(10px);
 }
 .btn-primary, .btn-secondary, .btn-danger {
    padding: 0.85rem 1.8rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .btn-primary {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
 }
 .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    filter: brightness(1.1);
 }
 .btn-secondary {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: #ccc;
 }
 .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: white;
 }
 .btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    margin-right: auto;
 }
 .btn-danger:hover {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
 }
@media (max-width: 768px) {
    .modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
    .modal-title { padding: 1.5rem 1.5rem 1rem; }
    .modal-body { padding: 0 1.5rem; }
    .modal-fields-grid { display: flex; flex-direction: column; gap: 1.2rem; }
    .form-group, .form-group.notes-group,
    .form-group.checkbox-group, .form-group.full-width {
        grid-column: auto;
        width: 100%;
    }
    .date-group { flex-direction: column; gap: 1rem; }
    .modal-actions {
        flex-direction: column;
        gap: 0.8rem;
        padding: 1.5rem;
    }
    .btn-primary, .btn-secondary, .btn-danger { width: 100%; padding: 1rem; }
    .btn-primary { order: 1; }
    .btn-secondary { order: 2; }
    .btn-danger { order: 3; margin-top: 0.5rem; }
 }
--- a/desktop/views/css/components/hero.css
+++ b/desktop/views/css/components/hero.css
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
lenafx	edb8a93395	novel extensions dont appear on manga entry and viceversa	2026-01-01 19:47:28 +01:00
lenafx	d09c769804	better handling on web player	2026-01-01 18:23:10 +01:00
lenafx	6c3bc4d789	fixed video chapters when downloading an anime episode	2026-01-01 18:16:18 +01:00
lenafx	74f6c9bf62	fixed a bug on the config & now backend does use config values	2026-01-01 18:12:27 +01:00
lenafx	01ae038a8b	enhanced server settings section	2026-01-01 17:53:50 +01:00
lenafx	d7ab08c022	fixes on the web player	2026-01-01 17:23:53 +01:00
lenafx	f612960bd2	download anime episodes choosing quality, audio, subs...	2026-01-01 16:58:01 +01:00
lenafx	7fdd67316d	auto detect now works properly on reader	2026-01-01 13:58:48 +01:00
lenafx	a02db95501	frontend for downloading books	2026-01-01 02:59:45 +01:00
lenafx	58843a8bac	added endpoint for downloading from extensions	2026-01-01 02:59:34 +01:00
lenafx	ba07011800	changed some navigation	2026-01-01 01:33:21 +01:00
lenafx	a5757d3bf9	edit modal with better design	2026-01-01 01:14:36 +01:00
lenafx	20ea5bee9c	new dashboard page	2025-12-31 21:51:17 +01:00
lenafx	c9c4cc074c	new dashboard page	2025-12-31 20:01:57 +01:00
lenafx	991c58d91d	better double page on reader	2025-12-31 18:33:03 +01:00
lenafx	e3c366836f	bug fixes on the reader	2025-12-31 18:25:42 +01:00
lenafx	1e144c4bad	multi language support for books and book page redesigned	2025-12-31 17:57:33 +01:00
lenafx	20261159a4	fixed a bug related with start time	2025-12-31 16:18:50 +01:00
lenafx	2668bc5e72	better auto matching for local entries	2025-12-31 16:14:28 +01:00
lenafx	d07c8de452	better ui for new selectors on player	2025-12-31 16:09:44 +01:00
lenafx	7b3c559d03	player now supports quality settings	2025-12-31 15:42:34 +01:00
lenafx	776079d5c6	player now supports multiple audio tracks	2025-12-31 15:38:14 +01:00
lenafx	d801a65602	fixed a bug on the web player	2025-12-31 15:18:51 +01:00
lenafx	5e96a89a4b	added open in mpv on anime for electron ver	2025-12-31 15:11:45 +01:00
lenafx	9daa4f1ad8	added rpc support for mpv and tracking	2025-12-31 14:47:37 +01:00
lenafx	47433733d0	added backend for open mpv in electron version	2025-12-31 14:31:20 +01:00
lenafx	2afb9742b1	full enhance of anime page and player.	2025-12-31 02:05:10 +01:00
lenafx	a4ff19c3d7	better proxy handling for streams	2025-12-31 01:55:27 +01:00
lenafx	8dc38ec9a7	fix on reader urls	2025-12-31 01:55:10 +01:00
lenafx	c28948f6e9	organised local library backend	2025-12-28 18:55:16 +01:00
lenafx	48e1939d2a	support for novels and lot of formats for books	2025-12-28 18:31:54 +01:00
lenafx	6222e7736f	added missing package (again xd)	2025-12-27 22:07:26 +01:00
lenafx	03d8337d89	added missing package	2025-12-27 22:07:26 +01:00
lenafx	d49f739565	added local manga, todo: novels	2025-12-27 22:07:26 +01:00
lenafx	295cab93f3	enhanced list modal and fixes	2025-12-27 22:07:26 +01:00
lenafx	4bca41f6a2	made navbar ssr	2025-12-27 22:07:26 +01:00
lenafx	bc74aa8116	fixed a bug & replicated all changes to docker version	2025-12-27 22:07:26 +01:00
lenafx	cc0b0a891e	wip settings section	2025-12-27 22:07:26 +01:00
lenafx	76391f74d2	created config api	2025-12-27 22:07:26 +01:00
lenafx	487e24a20a	added page 404	2025-12-27 22:07:26 +01:00
lenafx	25ea30f086	wip implementation of local library on anime	2025-12-27 22:07:26 +01:00
lenafx	6075dcf149	implemented api for local library & global config	2025-12-27 22:07:26 +01:00
itsskaiya	dbce12b708	Updated files to be exported into the exe	2025-12-20 14:52:56 -05:00
lenafx	9943c5d010	added chapters on player using aniskip api	2025-12-20 19:56:15 +01:00
lenafx	cbacf2ea07	removed electron stuff from docker ver	2025-12-20 00:16:01 +01:00
lenafx	90231f6608	added updateall btn to marketplace	2025-12-20 00:13:10 +01:00
lenafx	a26f03f024	new marketplace page	2025-12-19 23:12:53 +01:00
lenafx	16cf6b3d4f	now on my list page, source dropdown only shows anime and book extensions	2025-12-19 20:01:08 +01:00
lenafx	4811c4535a	removed electron stuff from docker ver	2025-12-19 19:49:07 +01:00
lenafx	d6a99bfeb4	animes & books page data is fetched auto now	2025-12-19 19:23:29 +01:00
itsskaiya	b8f560141c	Updated version in updateNotifier for server & docker version	2025-12-19 12:02:41 -05:00
lenafx	2cf475931c	lazy loading of chapters on book page	2025-12-18 17:00:50 +01:00
lenafx	41dddef354	added splash loading screen	2025-12-18 17:00:50 +01:00
lenafx	d54b0bcdef	if user has pass ask for it before deleting it	2025-12-18 17:00:50 +01:00
lenafx	c7ed97a452	fixed discord rpc on anime	2025-12-18 17:00:50 +01:00
itsskaiya	1ebac7ee15	Updated version in updateNotifier for server version	2025-12-18 03:24:50 -05:00
itsskaiya	7490f269b0	Updated version in updateNotifier	2025-12-17 16:37:56 -05:00
lenafx	c7f919fe18	fixed an error where app wouldnt launch	2025-12-17 21:32:34 +01:00
itsskaiya	7c85d91b85	Merge branch 'main' of https://git.waifuboard.app/ItsSkaiya/WaifuBoard	2025-12-17 13:00:35 -05:00
itsskaiya	c11a1eed35	Docker server has responsiveness now	2025-12-17 13:00:15 -05:00
lenafx	7544f56ba9	readme & fix on reader	2025-12-17 16:43:26 +01:00
itsskaiya	1a01d29f19	Removed docker stuff from the desktop files.	2025-12-16 21:54:53 -05:00
itsskaiya	315c2e911b	Added back the README.md to the desktop version	2025-12-16 21:52:45 -05:00
itsskaiya	28ff6ccc68	Organized the differences between server and docker versions. We are launching a docker version (server version) today so we want to just organize the repo so its easier to navigate.	2025-12-16 21:50:22 -05:00