better marketplace

README.md

@@ -1,11 +1,13 @@
 # 🎀 WaifuBoard
 
-**Lightweight all-in-one app for boorus, anime, manga and light novels — no sources included, total freedom via extensions.**
+**Lightweight hub for boorus, anime, manga & LN — powered by extensions, zero sources bundled.**
 
 <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)
+[![Android](https://img.shields.io/badge/Android-SUPPORTED-3DDC84?style=for-the-badge&logo=android&logoColor=white)]()
+[![Downloads](https://img.shields.io/endpoint?url=https://waifuboard.jaiet7.workers.dev/&style=for-the-badge)](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)
 [![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)
 
@@ -13,22 +15,22 @@
 
 </div>
 
+---
 
-## ✨ Features
+## ✨ Key Features
 
-- Lightweight
+### 🚀 Core
-- Discord Rich Presence
+* **Lightweight & fast**
-- Local lists & anilist integration
+* **Watchparties** — instant public links
-- Multi user support
+* **Extension-based sources** — total freedom
-- Server version (Coming soon!)
+* **Tracking** with local lists + **AniList**
-- Fully open-source & community-driven
+* **Discord Rich Presence**
+* **Multi-user profiles**
+* **Local library**
 
-> ⚠️ **Note**
+## 🖼️ Preview
->
-> Release candidates may contain breaking changes and unresolved bugs.  
-> Expect frequent updates and major changes between versions.
 
-## 🖼️ Gallery
+A quick look at WaifuBoard in action.
 
 ### 👥 Multi-User Profiles
 <img src="assets/users.gif" alt="Multi-user profiles" width="100%"/>
@@ -38,26 +40,22 @@
 #### 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
 
-| Platform   | Status          | Link                                                      |
+| Platform | Status          | Link                                                                              |
-|------------|-----------------|-----------------------------------------------------------|
+|----------|-----------------|-----------------------------------------------------------------------------------|
-| Windows    | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
+| Windows  | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
-| Linux      | ⏳ Coming soon   | —                                                         |
+| Docker   | ✅ Available now | WIP docs                                                                          |
-| macOS      | ⏳ Coming soon   | —                                                         |
+| Android  | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
+| Linux    | ⏳ Coming soon   | —                                                                                 |
+| macOS    | ⏳ Coming soon   | —                                                                                 |
 
 ## 📦 Extensions & Marketplace
 
@@ -68,10 +66,9 @@ WaifuBoard ships empty. **You decide exactly what sources you want.**
 
 ## ⚠️ Legal Disclaimer
 
-**WaifuBoard does not host, store, or distribute any content.  
+**WaifuBoard does not host, store, or distribute any content.** All material is retrieved in real time through third-party extensions installed by the user or from the user's local storage.  
-All material is retrieved in real time through third-party extensions installed by the user.  
+**You are fully responsible for ensuring that the sources you access comply with the laws of your region.**
-You are fully responsible for ensuring that the sources you access comply with the laws of your region.**
 
 ---
 
-**Designed for the otakus by an otaku.** 💜
+**Designed for the otakus by an otaku.** 💜

desktop/main.js

@@ -13,7 +13,7 @@ let win;
 let backend;
 const net = require('net');
 
-function waitForServer(port, host = '127.0.0.1', timeout = 10000) {
+function waitForServer(port, host = '127.0.0.1', timeout = 30000) {
     return new Promise((resolve, reject) => {
         const start = Date.now();
 

desktop/package.json

@@ -13,6 +13,7 @@
   "type": "commonjs",
   "dependencies": {
     "@fastify/static": "^8.3.0",
+    "@fastify/websocket": "^11.2.0",
     "@xhayper/discord-rpc": "^1.3.0",
     "adm-zip": "^0.5.16",
     "bcryptjs": "^3.0.3",
@@ -26,14 +27,16 @@
     "jsonwebtoken": "^9.0.3",
     "node-addon-api": "^8.5.0",
     "node-cron": "^4.2.1",
-    "playwright-chromium": "^1.57.0",
+    "playwright": "^1.57.0",
-    "sqlite3": "^5.1.7"
+    "sqlite3": "^5.1.7",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",
     "@types/bcrypt": "^6.0.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.0.0",
+    "@types/ws": "^8.18.1",
     "electron": "^39.2.5",
     "electron-builder": "^26.0.12",
     "node-gyp": "^12.1.0",
@@ -43,6 +46,7 @@
   "build": {
     "appId": "app.waifuboard",
     "productName": "Waifu Board",
+    "asar": true,
     "files": [
       "electron/**/*",
       "server.js",
@@ -55,10 +59,6 @@
       "loading.html"
     ],
     "extraResources": [
-      {
-        "from": "C:\\Users\\synta\\AppData\\Local\\ms-playwright\\chromium_headless_shell-1200",
-        "to": "playwright/chromium"
-      },
       ".env"
     ],
     "win": {

desktop/server.js

@@ -32,19 +32,95 @@ const listRoutes = require("./electron/api/list/list.routes");
 const anilistRoute = require("./electron/api/anilist/anilist");
 const localRoutes = require("./electron/api/local/local.routes");
 const configRoutes = require("./electron/api/config/config.routes");
+const roomRoutes = require("./electron/api/rooms/rooms.routes");
+const { setupRoomWebSocket } = require("./electron/api/rooms/rooms.websocket");
 
-fastify.addHook("preHandler", async (request) => {
+const { getConfig } = require('./electron/shared/config');
+const { values } = getConfig();
+const jwtSecret = values.server?.jwt_secret;
+
+fastify.addHook("preHandler", async (request, reply) => {
   const auth = request.headers.authorization;
   if (!auth) return;
 
   try {
     const token = auth.replace("Bearer ", "");
-    request.user = jwt.verify(token, process.env.JWT_SECRET);
+    request.user = jwt.verify(token, jwtSecret);
   } catch (e) {
     return reply.code(401).send({ error: "Invalid token" });
   }
 });
 
+const roomService = require('./electron/api/rooms/rooms.service');
+
+fastify.addHook('onRequest', async (req, reply) => {
+  const isTunnel =
+      !!req.headers['cf-connecting-ip'] ||
+      !!req.headers['cf-ray'];
+
+  if (!isTunnel) return;
+
+  if (req.url.startsWith('/public/') ||
+      req.url.startsWith('/views/') ||
+      req.url.startsWith('/src/')) {
+    return;
+  }
+
+  if (req.url.startsWith('/room')) {
+    const urlParams = new URLSearchParams(req.url.split('?')[1]);
+    const roomId = urlParams.get('id');
+
+    if (!roomId) {
+      return reply.code(404).send({ error: 'Room ID required' });
+    }
+
+    const room = roomService.getRoom(roomId);
+    if (!room || room.exposed !== true) {
+      return reply.code(404).send({ error: 'Room not found' });
+    }
+
+    return;
+  }
+
+  const wsMatch = req.url.match(/^\/ws\/room\/([a-f0-9]+)/);
+  if (wsMatch) {
+    const roomId = wsMatch[1];
+    const room = roomService.getRoom(roomId);
+
+    if (!room || room.exposed !== true) {
+      return reply.code(404).send({ error: 'Room not found' });
+    }
+    return;
+  }
+
+  const apiMatch = req.url.match(/^\/api\/rooms\/([a-f0-9]+)/);
+  if (apiMatch) {
+    const roomId = apiMatch[1];
+    const room = roomService.getRoom(roomId);
+
+    if (!room || room.exposed !== true) {
+      return reply.code(404).send({ error: 'Room not found' });
+    }
+    return;
+  }
+
+  const allowedEndpoints = [
+    '/api/watch/stream',
+    '/api/proxy',
+    '/api/extensions',
+    '/api/search'
+  ];
+
+  for (const endpoint of allowedEndpoints) {
+    if (req.url.startsWith(endpoint)) {
+      console.log('[Tunnel] ✓ Allowing utility endpoint:', endpoint);
+      return;
+    }
+  }
+
+  return reply.code(404).send({ error: 'Not found' });
+});
+
 fastify.register(require("@fastify/static"), {
   root: path.join(__dirname, "public"),
   prefix: "/public/",
@@ -75,11 +151,13 @@ fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });
 fastify.register(localRoutes, { prefix: "/api" });
 fastify.register(configRoutes, { prefix: "/api" });
+fastify.register(roomRoutes, { prefix: "/api" });
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 
 const start = async () => {
   try {
+    await fastify.register(require('@fastify/websocket'));
     ensureConfigFile()
     initDatabase("anilist");
     initDatabase("favorites");
@@ -87,7 +165,7 @@ const start = async () => {
     initDatabase("userdata");
     initDatabase("local_library");
     init();
-
+    setupRoomWebSocket(fastify);
 
     const refreshAll = async () => {
       await refreshTrendingAnime();
@@ -99,7 +177,7 @@ const start = async () => {
       await refreshPopularBooks();
     };
 
-    cron.schedule("*/30 * * * *", async () => {
+    const job = cron.schedule("*/30 * * * *", async () => {
       try {
         await refreshAll();
         console.log("cache refreshed");
@@ -116,6 +194,15 @@ const start = async () => {
         console.error("initial refresh failed", e)
     );
     console.log(`Server running at http://localhost:54322`);
+
+    const shutdown = async () => {
+      job.stop();
+      await fastify.close();
+      process.exit(0);
+    };
+
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
   } catch (err) {
     fastify.log.error(err);
     process.exit(1);

desktop/src/api/anilist/anilist.ts

@@ -2,58 +2,49 @@ import { FastifyInstance } from "fastify";
 import { run } from "../../shared/database";
 
 async function anilist(fastify: FastifyInstance) {
-    fastify.get("/anilist", async (request, reply) => {
+    fastify.post("/anilist/store", async (request, reply) => {
         try {
-            const { code, state } = request.query as { code?: string; state?: string };
+            const {
+                userId,
+                accessToken,
+                tokenType = "Bearer",
+                expiresIn
+            } = request.body as {
+                userId: number;
+                accessToken: string;
+                tokenType?: string;
+                expiresIn?: number;
+            };
 
-            if (!code) return reply.status(400).send("No code");
+            if (!userId || !accessToken) {
-            if (!state) return reply.status(400).send("No user state");
+                return reply.status(400).send({ error: "Faltan datos (User ID o Token)" });
-
-            const userId = Number(state);
-            if (!userId || isNaN(userId)) {
-                return reply.status(400).send("Invalid user id");
-            }
-
-            const tokenRes = await fetch("https://anilist.co/api/v2/oauth/token", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    grant_type: "authorization_code",
-                    client_id: process.env.ANILIST_CLIENT_ID,
-                    client_secret: process.env.ANILIST_CLIENT_SECRET,
-                    redirect_uri: "http://localhost:54322/api/anilist",
-                    code
-                })
-            });
-
-            const tokenData = await tokenRes.json();
-
-            if (!tokenData.access_token) {
-                console.error("AniList token error:", tokenData);
-                return reply.status(500).send("Failed to get AniList token");
             }
 
+            // 1. Verificar que el token es válido consultando a AniList
             const userRes = await fetch("https://graphql.anilist.co", {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
-                    Authorization: `${tokenData.token_type} ${tokenData.access_token}`
+                    Authorization: `${tokenType} ${accessToken}`
                 },
                 body: JSON.stringify({
                     query: `query { Viewer { id } }`
                 })
             });
 
+            if (!userRes.ok) {
+                return reply.status(401).send({ error: "Token de AniList inválido o expirado" });
+            }
+
             const userData = await userRes.json();
             const anilistUserId = userData?.data?.Viewer?.id;
 
             if (!anilistUserId) {
-                console.error("AniList Viewer error:", userData);
+                return reply.status(500).send({ error: "No se pudo obtener el ID de usuario de AniList" });
-                return reply.status(500).send("Failed to fetch AniList user");
             }
 
             const expiresAt = new Date(
-                Date.now() + tokenData.expires_in * 1000
+                Date.now() + 365 * 24 * 60 * 60 * 1000
             ).toISOString();
 
             await run(
@@ -71,19 +62,19 @@ async function anilist(fastify: FastifyInstance) {
                 [
                     userId,
                     "AniList",
-                    tokenData.access_token,
+                    accessToken,
-                    tokenData.refresh_token,
+                    "",          // <- aquí
-                    tokenData.token_type,
+                    tokenType,
                     anilistUserId,
                     expiresAt
                 ],
                 "userdata"
             );
 
-            return reply.redirect("http://localhost:54322/?anilist=success");
+            return reply.send({ ok: true, anilistUserId });
         } catch (e) {
             console.error("AniList error:", e);
-            return reply.redirect("http://localhost:54322/?anilist=error");
+            return reply.status(500).send({ error: "Error interno del servidor al guardar AniList" });
         }
     });
 }

desktop/src/api/anime/anime.controller.ts

@@ -10,7 +10,6 @@ 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 {
@@ -82,12 +81,20 @@ export async function search(req: SearchRequest, reply: FastifyReply) {
 export async function searchInExtension(req: any, reply: FastifyReply) {
     try {
         const extensionName = req.params.extension;
-        const query = req.query.q;
+        const { q, ...rest } = req.query;
 
         const ext = getExtension(extensionName);
         if (!ext) return { results: [] };
 
-        const results = await animeService.searchAnimeInExtension(ext, extensionName, query);
+        const results = await animeService.searchAnimeInExtension(
+            ext,
+            extensionName,
+            {
+                query: q || '',
+                filters: Object.keys(rest).length ? rest : undefined
+            }
+        );
+
         return { results };
     } catch {
         return { results: [] };
@@ -96,7 +103,7 @@ export async function searchInExtension(req: any, reply: FastifyReply) {
 
 export async function getWatchStream(req: WatchStreamRequest, reply: FastifyReply) {
     try {
-        const { animeId, episode, server, category, ext, source } = req.query;
+        const { animeId, episode, server, category, ext, source, extensionAnimeId  } = req.query;
 
         const extension = getExtension(ext);
         if (!extension) return { error: "Extension not found" };
@@ -107,7 +114,8 @@ export async function getWatchStream(req: WatchStreamRequest, reply: FastifyRepl
             animeId,
             source,
             server,
-            category
+            category,
+            extensionAnimeId
         );
     } catch (err) {
         const error = err as Error;
@@ -117,27 +125,42 @@ export async function getWatchStream(req: WatchStreamRequest, reply: FastifyRepl
 
 export async function openInMPV(req: any, reply: any) {
     try {
-        const { title, video, subtitles = [], chapters = [], animeId, episode, entrySource, token } = req.body;
+        const { title, video, subtitles = [], chapters = [], animeId, episode, entrySource } = req.body;
 
         if (!video?.url) return { error: 'Missing video url' };
 
+        const isLocalPath = (p: string) =>
+            p.startsWith('file://') ||
+            p.startsWith('/') ||
+            /^[a-zA-Z]:\\/.test(p);
+
+        const toFileUrl = (p: string) =>
+            p.startsWith('file://')
+                ? p
+                : `file://${p.replace(/\\/g, '/')}`;
+
         const PORT = 54322;
         const proxyBase = `http://localhost:${PORT}/api/proxy`;
         const mediaTitle = title || 'Anime';
 
-        const proxyVideo =
+        const videoUrl = isLocalPath(video.url)
-            `${proxyBase}?url=${encodeURIComponent(video.url)}` +
+            ? toFileUrl(video.url)
+            : `${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)}` +
+        const subsUrls = subtitles.map((s: any) =>
-            `&referer=${encodeURIComponent(video.headers?.Referer ?? '')}` +
+            isLocalPath(s.src)
-            `&origin=${encodeURIComponent(video.headers?.Origin ?? '')}` +
+                ? toFileUrl(s.src)
-            `&userAgent=${encodeURIComponent(video.headers?.['User-Agent'] ?? '')}`
+                : `${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();
 
@@ -234,10 +257,9 @@ export async function openInMPV(req: any, reply: any) {
         };
 
         const updateProgress = async () => {
-            if (!token || progressUpdated) return;
+            if (!req.user || progressUpdated) return;
             try {
-                const decoded = jwt.verify(token, process.env.JWT_SECRET!) as any;
+                const userId = req.user.id;
-                const userId = decoded.id;
                 await upsertListEntry({
                     user_id: userId,
                     entry_id: animeId,
@@ -247,6 +269,7 @@ export async function openInMPV(req: any, reply: any) {
                     progress: episode
                 });
                 progressUpdated = true;
+                progressUpdated = true;
             } catch (e) { console.error("[MPV] Progress update failed", e); }
         };
 
@@ -302,7 +325,7 @@ export async function openInMPV(req: any, reply: any) {
             { command: ['observe_property', 1, 'duration'] },
             { command: ['observe_property', 2, 'time-pos'] },
             { command: ['observe_property', 3, 'pause'] },
-            { command: ['loadfile', proxyVideo, 'replace'] }
+            { command: ['loadfile', videoUrl, 'replace'] }
         ];
 
         commands.forEach(cmd => socket.write(JSON.stringify(cmd) + '\n'));
@@ -311,7 +334,7 @@ export async function openInMPV(req: any, reply: any) {
             socket.write(JSON.stringify({
                 command: [
                     'sub-add',
-                    proxySubs[i],
+                    subsUrls[i],
                     'auto',
                     s.label || 'Subtitle',
                     s.srclang || ''
@@ -323,4 +346,28 @@ export async function openInMPV(req: any, reply: any) {
     } catch (e) {
         return { error: (e as Error).message };
     }
+}
+
+export async function searchAdvanced(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const {
+            q,
+            type = 'ANIME',
+            year,
+            season,
+            status,
+            format,
+            genre,
+            minScore,
+            sort
+        } = req.query as any;
+
+        const results = await animeService.searchMediaAdvanced(q, type, {
+            year, season, status, format, genre, minScore, sort
+        });
+
+        return { results };
+    } catch (e) {
+        return { results: [] };
+    }
 }

desktop/src/api/anime/anime.routes.ts

@@ -7,6 +7,7 @@ async function animeRoutes(fastify: FastifyInstance) {
     fastify.get('/trending', controller.getTrending);
     fastify.get('/top-airing', controller.getTopAiring);
     fastify.get('/search', controller.search);
+    fastify.get('/search/advanced', controller.searchAdvanced);
     fastify.get('/search/:extension', controller.searchInExtension);
     fastify.get('/watch/stream', controller.getWatchStream);
     fastify.post('/watch/mpv', controller.openInMPV);

desktop/src/api/anime/anime.service.ts

@@ -181,7 +181,9 @@ export async function getAnimeById(id: string | number): Promise<Anime | { error
   `;
 
     const data = await fetchAniList(query, { id: Number(id) });
-    if (!data?.Media) return { error: "Anime not found" };
+    if (!data?.Media || !data.Media.title) {
+        return { error: "Anime not found" };
+    }
 
     await queryOne(
         "INSERT INTO anime (id, title, updatedAt, full_data) VALUES (?, ?, ?, ?)",
@@ -272,11 +274,74 @@ export async function searchAnimeLocal(query: string): Promise<Anime[]> {
     return merged;
 }
 
+type AdvancedFilters = {
+    year?: string;
+    season?: string;
+    status?: string;
+    format?: string;
+    genre?: string;
+    minScore?: string;
+    sort?: string;
+};
+
+export async function searchMediaAdvanced(
+    query: string,
+    type: 'ANIME' | 'MANGA',
+    filters: AdvancedFilters
+): Promise<Anime[]> {
+
+    const gql = `
+  query (
+    $type: MediaType
+    $search: String
+    $seasonYear: Int
+    $season: MediaSeason
+    $status: MediaStatus
+    $format: MediaFormat
+    $genres: [String]
+    $minScore: Int
+    $sort: [MediaSort]
+  ) {
+    Page(page: 1, perPage: 20) {
+      media(
+        type: $type
+        search: $search
+        seasonYear: $seasonYear
+        season: $season
+        status: $status
+        format: $format
+        genre_in: $genres
+        averageScore_greater: $minScore
+        sort: $sort
+        isAdult: false
+      ) {
+        ${MEDIA_FIELDS}
+      }
+    }
+  }
+  `;
+
+    const vars = {
+        type,
+        search: query || undefined,
+        seasonYear: filters.year ? Number(filters.year) : undefined,
+        season: filters.season || undefined,
+        status: filters.status || undefined,
+        format: filters.format || undefined,
+        genres: filters.genre ? [filters.genre] : undefined,
+        minScore: filters.minScore ? Number(filters.minScore) : undefined,
+        sort: filters.sort ? [filters.sort] : ['POPULARITY_DESC']
+    };
+
+    const data = await fetchAniList(gql, vars);
+    return data?.Page?.media || [];
+}
+
+
 export async function getAnimeInfoExtension(ext: Extension | null, id: string): Promise<Anime | { error: string }> {
     if (!ext) return { error: "not found" };
 
     const extName = ext.constructor.name;
-
     const cached = await getCachedExtension(extName, id);
     if (cached) {
         try {
@@ -291,7 +356,11 @@ export async function getAnimeInfoExtension(ext: Extension | null, id: string):
         try {
             const match = await ext.getMetadata(id);
 
-            if (match) {
+            if (
+                match &&
+                match.title &&
+                match.title !== "Unknown"
+            ) {
                 const normalized: any = {
                     title: match.title ?? "Unknown",
                     summary: match.summary ?? "No summary available",
@@ -317,22 +386,31 @@ export async function getAnimeInfoExtension(ext: Extension | null, id: string):
     return { error: "not found" };
 }
 
-export async function searchAnimeInExtension(ext: Extension | null, name: string, query: string) {
+export async function searchAnimeInExtension(
+    ext: Extension | null,
+    name: string,
+    searchObj: { query: string; filters?: any }
+) {
     if (!ext) return [];
 
     if (ext.type === 'anime-board' && ext.search) {
         try {
-            console.log(`[${name}] Searching for anime: ${query}`);
+            const payload: any = {
-            const matches = await ext.search({
+                query: searchObj.query,
-                query: query,
                 media: {
-                    romajiTitle: query,
+                    romajiTitle: searchObj.query,
-                    englishTitle: query,
+                    englishTitle: searchObj.query,
                     startDate: { year: 0, month: 0, day: 0 }
                 }
-            });
+            };
 
-            if (matches && matches.length > 0) {
+            if (searchObj.filters) {
+                payload.filters = searchObj.filters;
+            }
+
+            const matches = await ext.search(payload);
+
+            if (matches?.length) {
                 return matches.map(m => ({
                     id: m.id,
                     extensionName: name,
@@ -341,6 +419,7 @@ export async function searchAnimeInExtension(ext: Extension | null, name: string
                     averageScore: m.rating || m.score || null,
                     format: 'ANIME',
                     seasonYear: null,
+                    url: m.url,
                     isExtensionResult: true,
                 }));
             }
@@ -361,15 +440,36 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
     if (cached) {
         const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
 
-        if (!isExpired) {
+        try {
-            console.log(`[${name}] Episodes cache hit for: ${query}`);
+            const parsed = JSON.parse(cached.result) as {
-            try {
+                mediaId?: string;
-                return JSON.parse(cached.result) as Episode[];
+                episodes: Episode[];
-            } catch (e) {
+            };
-                console.error(`[${name}] Error parsing cached episodes:`, e);
+
+            if (!isExpired) {
+                console.log(`[${name}] Episodes cache hit for: ${query}`);
+                return parsed.episodes;
             }
-        } else {
+
-            console.log(`[${name}] Episodes cache expired for: ${query}`);
+            // Si el caché expiró pero tenemos mediaId, refrescamos directamente
+            if (parsed.mediaId && ext.type === "anime-board" && ext.search && typeof ext.findEpisodes === "function") {
+                console.log(`[${name}] Episodes cache expired but mediaId found, refreshing...`);
+                const chapterList = await ext.findEpisodes(parsed.mediaId);
+
+                if (!Array.isArray(chapterList)) return [];
+
+                const result: Episode[] = chapterList.map(ep => ({
+                    id: ep.id,
+                    number: ep.number,
+                    url: ep.url,
+                    title: ep.title
+                }));
+
+                await setCache(cacheKey, { mediaId: parsed.mediaId, episodes: result }, CACHE_TTL_MS);
+                return result;
+            }
+        } catch (e) {
+            console.error(`[${name}] Error parsing cached episodes:`, e);
         }
     }
 
@@ -387,20 +487,40 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
                         startDate: { year: 0, month: 0, day: 0 }
                     }
                 });
-
                 if (!matches || matches.length === 0) return [];
 
-                const res = matches[0];
+                const normalizedQuery = normalize(query);
+                const scored = matches.map(match => {
+                    const normalizedTitle = normalize(match.title);
+                    const score = similarity(normalizedQuery, normalizedTitle);
+
+                    let bonus = 0;
+                    if (normalizedTitle === normalizedQuery) {
+                        bonus = 0.5;
+                    } else if (normalizedTitle.toLowerCase().includes(normalizedQuery.toLowerCase())) {
+                        bonus = 0.5;
+                    }
+
+                    const finalScore = score + bonus;
+
+                    return {
+                        match,
+                        score: finalScore
+                    };
+                });
+
+                scored.sort((a, b) => b.score - a.score);
+                const bestMatches = scored.filter(s => s.score > 0.4);
+
+                if (bestMatches.length === 0) return [];
+                const res = bestMatches[0].match;
                 if (!res?.id) return [];
-
                 mediaId = res.id;
-
             } else {
                 mediaId = query;
             }
 
             const chapterList = await ext.findEpisodes(mediaId);
-
             if (!Array.isArray(chapterList)) return [];
 
             const result: Episode[] = chapterList.map(ep => ({
@@ -410,7 +530,9 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
                 title: ep.title
             }));
 
-            await setCache(cacheKey, result, CACHE_TTL_MS);
+            if (result.length > 0) {
+                await setCache(cacheKey, { mediaId, episodes: result }, CACHE_TTL_MS);
+            }
 
             return result;
         } catch (e) {
@@ -421,25 +543,27 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
     return [];
 }
 
-export async function getStreamData(extension: Extension, episode: string, id: string, source: string, server?: string, category?: string): Promise<StreamData> {
+export async function getStreamData(extension: Extension, episode: string, id: string, source: string, server?: string, category?: string, extensionAnimeId?: string): Promise<StreamData> {
     const providerName = extension.constructor.name;
 
-    const cacheKey = `anime:stream:${providerName}:${id}:${episode}:${server || 'default'}:${category || 'sub'}`;
+    const finalCategory = category ?? "sub";
 
-    const cached = await getCache(cacheKey);
+    const cacheKey =
+        `anime:stream:${providerName}:${id}:${episode}:${server}:${finalCategory}`;
+    if (!extensionAnimeId) {
+        const cached = await getCache(cacheKey);
 
-    if (cached) {
+        if (cached) {
-        const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
+            const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
 
-        if (!isExpired) {
+            if (!isExpired) {
-            console.log(`[${providerName}] Stream data cache hit for episode ${episode}`);
+                console.log(`[${providerName}] Stream data cache hit for episode ${episode}`);
-            try {
+                try {
-                return JSON.parse(cached.result) as StreamData;
+                    return JSON.parse(cached.result) as StreamData;
-            } catch (e) {
+                } catch (e) {
-                console.error(`[${providerName}] Error parsing cached stream data:`, e);
+                    console.error(`[${providerName}] Error parsing cached stream data:`, e);
+                }
             }
-        } else {
-            console.log(`[${providerName}] Stream data cache expired for episode ${episode}`);
         }
     }
 
@@ -447,23 +571,101 @@ export async function getStreamData(extension: Extension, episode: string, id: s
         throw new Error("Extension doesn't support required methods");
     }
     let episodes;
+    let animeTitle: string | undefined;
 
-    if (source === "anilist"){
+    if (source === "anilist" && !extensionAnimeId) {
-        const anime: any = await getAnimeById(id)
+        const anime: any = await getAnimeById(id);
         episodes = await searchEpisodesInExtension(extension, extension.constructor.name, anime.title.romaji);
+    } else {
+        const targetId = extensionAnimeId ?? id;
+        episodes = await extension.findEpisodes(targetId);
+
+        if (extensionAnimeId) {
+            const anime: any = await getAnimeById(id);
+            animeTitle = anime.title.romaji;
+
+            const episodesCacheKey = `anime:episodes:${providerName}:${animeTitle}`;
+            const episodesResult: Episode[] = episodes.map((ep: any) => ({
+                id: ep.id,
+                number: ep.number,
+                url: ep.url,
+                title: ep.title
+            }));
+
+            await setCache(episodesCacheKey, {
+                mediaId: extensionAnimeId,
+                episodes: episodesResult
+            }, CACHE_TTL_MS);
+        }
     }
-    else{
+
-        episodes = await extension.findEpisodes(id);
+    const targetEp = episodes.find((e: any) => e.number === parseInt(episode));
-    }
-    const targetEp = episodes.find(e => e.number === parseInt(episode));
 
     if (!targetEp) {
         throw new Error("Episode not found");
     }
 
-    const serverName = server || "default";
+    let streamData: StreamData;
-    const streamData = await extension.findEpisodeServer(targetEp, serverName);
+
+    try {
+        streamData = await extension.findEpisodeServer(targetEp, server, category);
+    } catch (e) {
+        console.error(`[${providerName}] findEpisodeServer failed`, e);
+        throw e;
+    }
+
+    if (
+        !streamData ||
+        !Array.isArray(streamData.videoSources) ||
+        streamData.videoSources.length === 0
+    ) {
+        throw new Error("Empty stream data");
+    }
 
     await setCache(cacheKey, streamData, CACHE_TTL_MS);
     return streamData;
+
+}
+
+function similarity(s1: string, s2: string): number {
+    const str1 = normalize(s1);
+    const str2 = normalize(s2);
+
+    const longer = str1.length > str2.length ? str1 : str2;
+    const shorter = str1.length > str2.length ? str2 : str1;
+
+    if (longer.length === 0) return 1.0;
+
+    const editDistance = levenshteinDistance(longer, shorter);
+    return (longer.length - editDistance) / longer.length;
+}
+
+function levenshteinDistance(s1: string, s2: string): number {
+    const costs: number[] = [];
+    for (let i = 0; i <= s1.length; i++) {
+        let lastValue = i;
+        for (let j = 0; j <= s2.length; j++) {
+            if (i === 0) {
+                costs[j] = j;
+            } else if (j > 0) {
+                let newValue = costs[j - 1];
+                if (s1.charAt(i - 1) !== s2.charAt(j - 1)) {
+                    newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;
+                }
+                costs[j - 1] = lastValue;
+                lastValue = newValue;
+            }
+        }
+        if (i > 0) costs[s2.length] = lastValue;
+    }
+    return costs[s2.length];
+}
+
+function normalize(str: string): string {
+    return str
+        .toLowerCase()
+        .replace(/&#39;/g, "'")     // decodificar entidades HTML
+        .replace(/[^\w\s]/g, ' ')   // convertir puntuación a espacios
+        .replace(/\s+/g, ' ')       // normalizar espacios
+        .trim();
 }

desktop/src/api/books/books.controller.ts

@@ -69,16 +69,24 @@ export async function searchBooks(req: SearchRequest, reply: FastifyReply) {
 export async function searchBooksInExtension(req: any, reply: FastifyReply) {
     try {
         const extensionName = req.params.extension;
-        const query = req.query.q;
+
+        const { q, ...rawFilters } = req.query;
 
         const ext = getExtension(extensionName);
         if (!ext) return { results: [] };
 
-        const results = await booksService.searchBooksInExtension(ext, extensionName, query);
+        const results = await booksService.searchBooksInExtension(
+            ext,
+            extensionName,
+            {
+                query: q || '',
+                filters: rawFilters
+            }
+        );
+
         return { results };
     } catch (e) {
-        const error = e as Error;
+        console.error("Search Error:", (e as Error).message);
-        console.error("Search Error:", error.message);
         return { results: [] };
     }
 }
@@ -88,9 +96,10 @@ export async function getChapters(req: any, reply: FastifyReply) {
         const { id } = req.params;
         const source = req.query.source || 'anilist';
         const provider = req.query.provider;
+        const extensionBookId = req.query.extensionBookId;
 
         const isExternal = source !== 'anilist';
-        return await booksService.getChaptersForBook(id, isExternal, provider);
+        return await booksService.getChaptersForBook(id, isExternal, provider, extensionBookId);
     } catch (err) {
         console.error(err);
         return { chapters: [] };

desktop/src/api/books/books.service.ts

@@ -275,7 +275,12 @@ export async function getBookInfoExtension(ext: Extension | null, id: string): P
         try {
             const info = await ext.getMetadata(id);
 
-            if (info) {
+            if (
+                info &&
+                info.title &&
+                info.title !== "" &&
+                info.title !== "Unknown"
+            ) {
                 const normalized = {
                     id: info.id ?? id,
                     title: info.title ?? "",
@@ -300,16 +305,18 @@ export async function getBookInfoExtension(ext: Extension | null, id: string): P
     return [];
 }
 
-export async function searchBooksInExtension(ext: Extension | null, name: string, query: string): Promise<Book[]> {
+export async function searchBooksInExtension(ext: Extension | null, name: string, searchObj: { query: string; filters?: any }): Promise<Book[]> {
     if (!ext) return [];
 
-    if ((ext.type === 'book-board') && ext.search) {
+    if (ext.type === 'book-board' && ext.search) {
-
         try {
-            console.log(`[${name}] Searching for book: ${query}`);
+            const { query, filters } = searchObj;
+
+            console.log(`[${name}] Searching for book: ${query}`, filters);
 
             const matches = await ext.search({
-                query: query,
+                query,
+                filters,
                 media: {
                     romajiTitle: query,
                     englishTitle: query,
@@ -318,6 +325,8 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
             });
 
             if (matches?.length) {
+                const clean = matches.filter(m => m.id && m.title);
+                if (!clean.length) return [];
                 return matches.map(m => ({
                     id: m.id,
                     extensionName: name,
@@ -326,10 +335,10 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
                     averageScore: m.rating || m.score || null,
                     format: m.format,
                     seasonYear: null,
-                    isExtensionResult: true
+                    isExtensionResult: true,
+                    url: m.url,
                 }));
             }
-
         } catch (e) {
             console.error(`Extension search failed for ${name}:`, e);
         }
@@ -361,47 +370,82 @@ async function fetchBookMetadata(id: string): Promise<Book | null> {
     }
 }
 
-async function searchChaptersInExtension(ext: Extension, name: string, searchTitle: string, search: boolean, origin: string): Promise<ChapterWithProvider[]> {
+async function searchChaptersInExtension(ext: Extension, name: string, lookupId: string, cacheId: string, search: boolean, origin: string, disableCache = false): Promise<ChapterWithProvider[]> {
-    const cacheKey = `chapters:${name}:${origin}:${search ? "search" : "id"}:${searchTitle}`;
+    const cacheKey = `chapters:${name}:${origin}:id:${cacheId}`;
-    const cached = await getCache(cacheKey);
+    if (!disableCache) {
+        const cached = await getCache(cacheKey);
 
-    if (cached) {
+        if (cached) {
-        const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
+            const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
 
-        if (!isExpired) {
-            console.log(`[${name}] Chapters cache hit for: ${searchTitle}`);
             try {
-                return JSON.parse(cached.result) as ChapterWithProvider[];
+                const parsed = JSON.parse(cached.result) as {
+                    mediaId?: string;
+                    chapters: ChapterWithProvider[];
+                };
+
+                if (!isExpired) {
+                    console.log(`[${name}] Chapters cache hit for: ${lookupId}`);
+                    return parsed.chapters;
+                }
+
+                if (parsed.mediaId) {
+                    const chaps = await ext.findChapters!(parsed.mediaId);
+
+                    const result = chaps.map(ch => ({
+                        id: ch.id,
+                        number: parseFloat(ch.number.toString()),
+                        title: ch.title,
+                        date: ch.releaseDate,
+                        provider: name,
+                        index: ch.index,
+                        language: ch.language ?? null,
+                    }));
+
+                    await setCache(cacheKey, { mediaId: parsed.mediaId, chapters: result }, CACHE_TTL_MS);
+                    return result;
+                }
             } catch (e) {
                 console.error(`[${name}] Error parsing cached chapters:`, e);
             }
-        } else {
-            console.log(`[${name}] Chapters cache expired for: ${searchTitle}`);
         }
     }
 
     try {
-        console.log(`[${name}] Searching chapters for: ${searchTitle}`);
+        console.log(`[${name}] Searching chapters for: ${lookupId}`);
 
         let mediaId: string;
         if (search) {
             const matches = await ext.search!({
-                query: searchTitle,
+                query: lookupId,
                 media: {
-                    romajiTitle: searchTitle,
+                    romajiTitle: lookupId,
-                    englishTitle: searchTitle,
+                    englishTitle: lookupId,
                     startDate: { year: 0, month: 0, day: 0 }
                 }
             });
 
-            const best = matches?.[0];
+            if (!matches?.length) return [];
 
-            if (!best) { return [] }
+            const nq = normalize(lookupId);
 
-            mediaId = best.id;
+            const scored = matches.map(m => {
+                const nt = normalize(m.title);
+                let score = similarity(nq, nt);
+
+                if (nt === nq || nt.includes(nq)) score += 0.5;
+
+                return { m, score };
+            });
+
+            scored.sort((a, b) => b.score - a.score);
+
+            if (scored[0].score < 0.4) return [];
+
+            mediaId = scored[0].m.id;
 
         } else {
-            const match = await ext.getMetadata(searchTitle);
+            const match = await ext.getMetadata(lookupId);
             mediaId = match.id;
         }
 
@@ -422,7 +466,13 @@ async function searchChaptersInExtension(ext: Extension, name: string, searchTit
             language: ch.language ?? null,
         }));
 
-        await setCache(cacheKey, result, CACHE_TTL_MS);
+        if (result.length > 0) {
+            await setCache(cacheKey, {
+                mediaId,
+                chapters: result
+            }, CACHE_TTL_MS);
+        }
+
         return result;
 
     } catch (e) {
@@ -432,7 +482,7 @@ async function searchChaptersInExtension(ext: Extension, name: string, searchTit
     }
 }
 
-export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?: string): Promise<{ chapters: ChapterWithProvider[] }> {
+export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?: string, extensionBookId?: string): Promise<{ chapters: ChapterWithProvider[] }> {
     let bookData: Book | null = null;
     let searchTitle: string = "";
 
@@ -462,11 +512,30 @@ export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?
 
     for (const [name, ext] of bookExtensions) {
         if (onlyProvider && name !== onlyProvider) continue;
-        if (name == extension) {
+        if (extensionBookId && name === onlyProvider) {
-            const chapters = await searchChaptersInExtension(ext, name, id, false, exts);
+            const targetId = extensionBookId ?? id;
+
+            const chapters = await searchChaptersInExtension(
+                ext,
+                name,
+                targetId, // lookup
+                id,       // cache siempre con el id normal
+                false,
+                exts,
+                Boolean(extensionBookId)
+            );
+
             allChapters.push(...chapters);
         } else {
-            const chapters = await searchChaptersInExtension(ext, name, searchTitle, true, exts);
+            const chapters = await searchChaptersInExtension(
+                ext,
+                name,
+                searchTitle,
+                id, // cache con id normal
+                true,
+                exts
+            );
+
             allChapters.push(...chapters);
         }
     }
@@ -540,7 +609,15 @@ export async function getChapterContent(bookId: string, chapterId: string, provi
             throw new Error("Unknown mediaType");
         }
 
-        await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
+        if (
+            contentResult &&
+            (
+                (contentResult.type === "manga" && contentResult.pages?.length) ||
+                (contentResult.type === "ln" && contentResult.content)
+            )
+        ) {
+            await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
+        }
         return contentResult;
 
     } catch (err) {
@@ -548,4 +625,47 @@ export async function getChapterContent(bookId: string, chapterId: string, provi
         console.error(`[Chapter] Error loading from ${providerName}:`, error.message);
         throw err;
     }
+}
+
+function similarity(s1: string, s2: string): number {
+    const str1 = normalize(s1);
+    const str2 = normalize(s2);
+
+    const longer = str1.length > str2.length ? str1 : str2;
+    const shorter = str1.length > str2.length ? str2 : str1;
+
+    if (longer.length === 0) return 1.0;
+
+    const editDistance = levenshteinDistance(longer, shorter);
+    return (longer.length - editDistance) / longer.length;
+}
+
+function levenshteinDistance(s1: string, s2: string): number {
+    const costs: number[] = [];
+    for (let i = 0; i <= s1.length; i++) {
+        let lastValue = i;
+        for (let j = 0; j <= s2.length; j++) {
+            if (i === 0) {
+                costs[j] = j;
+            } else if (j > 0) {
+                let newValue = costs[j - 1];
+                if (s1.charAt(i - 1) !== s2.charAt(j - 1)) {
+                    newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;
+                }
+                costs[j - 1] = lastValue;
+                lastValue = newValue;
+            }
+        }
+        if (i > 0) costs[s2.length] = lastValue;
+    }
+    return costs[s2.length];
+}
+
+function normalize(str: string): string {
+    return str
+        .toLowerCase()
+        .replace(/&#39;/g, "'")     // decodificar entidades HTML
+        .replace(/[^\w\s]/g, ' ')   // convertir puntuación a espacios
+        .replace(/\s+/g, ' ')       // normalizar espacios
+        .trim();
 }

desktop/src/api/config/config.controller.ts

@@ -1,10 +1,16 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import { getConfig, setConfig } from '../../shared/config';
 
+function hideSecrets(values: any) {
+    const copy = structuredClone(values);
+    if (copy.server?.jwt_secret) delete copy.server.jwt_secret;
+    return copy;
+}
+
 export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
     try {
         const { values, schema } = getConfig();
-        return { values, schema };
+        return { values: hideSecrets(values), schema };
     } catch {
         return { error: "Error loading config" };
     }
@@ -22,7 +28,7 @@ export async function getConfigSection(
             return { error: "Section not found" };
         }
 
-        return { [section]: values[section] };
+        return { [section]: hideSecrets(values)[section] };
     } catch {
         return { error: "Error loading config section" };
     }

desktop/src/api/extensions/extensions.controller.ts

@@ -152,4 +152,25 @@ export async function uninstallExtension(req: any, reply: FastifyReply) {
         req.server.log.error(`Failed to uninstall extension ${fileName}:`, error);
         return reply.code(500).send({ success: false, error: `Failed to uninstall extension ${fileName}.` });
     }
+}
+
+export async function getExtensionFilters(req: any, reply: FastifyReply) {
+    try {
+        const extensionName = req.params.extension;
+        const ext = getExtension(extensionName);
+
+        if (!ext) {
+            return { filters: {} };
+        }
+
+        if (typeof ext.getFilters === 'function') {
+            const filters = ext.getFilters();
+            return { filters: filters || {} };
+        }
+
+        return { filters: {} };
+    } catch (e) {
+        console.error('getExtensionFilters error:', e);
+        return { filters: {} };
+    }
 }

desktop/src/api/extensions/extensions.routes.ts

@@ -12,6 +12,7 @@ async function extensionsRoutes(fastify: FastifyInstance) {
     fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
     fastify.post('/extensions/install', controller.installExtension);
     fastify.post('/extensions/uninstall', controller.uninstallExtension);
+    fastify.get('/extensions/:extension/filters', controller.getExtensionFilters);
 }
 
 export default extensionsRoutes;

desktop/src/api/local/download.service.ts

@@ -9,8 +9,40 @@ import AdmZip from 'adm-zip';
 import { spawn } from 'child_process';
 const { values } = loadConfig();
 
-const FFMPEG_PATH =
+const FFMPEG_PATH = values.paths?.ffmpeg || 'ffmpeg';
-    values.paths?.ffmpeg || 'ffmpeg';
+
+type DownloadStatus = {
+    id: string;
+    type: 'anime' | 'manga' | 'novel';
+    anilistId: number;
+    unitNumber: number;
+    status: 'pending' | 'downloading' | 'completed' | 'failed';
+    progress: number;
+    speed?: string;
+    timeElapsed?: string;
+    error?: string;
+    startedAt: number;
+    completedAt?: number;
+    folderName?: string;
+    fileName?: string;
+};
+
+const activeDownloads = new Map<string, DownloadStatus>();
+
+export function getActiveDownloads(): DownloadStatus[] {
+    return Array.from(activeDownloads.values());
+}
+
+export function getDownloadById(id: string): DownloadStatus | undefined {
+    return activeDownloads.get(id);
+}
+
+function updateDownloadProgress(id: string, updates: Partial<DownloadStatus>) {
+    const current = activeDownloads.get(id);
+    if (current) {
+        activeDownloads.set(id, { ...current, ...updates });
+    }
+}
 
 type AnimeDownloadParams = {
     anilistId: number;
@@ -20,6 +52,7 @@ type AnimeDownloadParams = {
     quality?: string;
     subtitles?: Array<{ language: string; url: string }>;
     chapters?: Array<{ title: string; start_time: number; end_time: number }>;
+    totalDuration?: number;
 };
 
 type BookDownloadParams = {
@@ -107,29 +140,48 @@ async function getOrCreateEntry(
 }
 
 export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
-    const { anilistId, episodeNumber, streamUrl, subtitles, chapters } = params;
+    const { anilistId, episodeNumber, streamUrl, subtitles, chapters, totalDuration } = params;
 
-    const entry = await getOrCreateEntry(anilistId, 'anime');
+    const entry: any = await getOrCreateEntry(anilistId, 'anime');
+    const fileName = `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`;
+
+    const downloadId = crypto.randomUUID();
+    activeDownloads.set(downloadId, {
+        id: downloadId,
+        type: 'anime',
+        anilistId,
+        unitNumber: episodeNumber,
+        status: 'pending',
+        progress: 0,
+        startedAt: Date.now(),
+        folderName: entry.folderName,
+        fileName: fileName
+    });
 
     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 };
+
+    if (exists) {
+        activeDownloads.delete(downloadId);
+        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 {
+        updateDownloadProgress(downloadId, { status: 'downloading' });
+
         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;
 
@@ -178,13 +230,11 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
 
         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();
@@ -220,18 +270,14 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
 
             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;
@@ -244,7 +290,6 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
                 }
             });
         } else {
-
             args.push('-map', '0:a:0?');
         }
 
@@ -258,68 +303,43 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
             args.push('-map_metadata', `${chaptersInputIndex}`);
         }
 
-        args.push('-c:v', 'copy');
+        args.push('-c:v', 'copy', '-c:a', 'copy');
-
+        if (subFiles.length) args.push('-c:s', 'srt');
-        args.push('-c:a', 'copy');
+        args.push('-y', outputPath);
-
-        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();
+                const timeMatch = text.match(/time=(\S+)/);
+                const speedMatch = text.match(/speed=(\S+)/);
 
-                if (text.includes('time=') || text.includes('speed=')) {
+                if (timeMatch || speedMatch) {
-                    const timeMatch = text.match(/time=(\S+)/);
+                    const updates: any = {};
-                    const speedMatch = text.match(/speed=(\S+)/);
+
-                    if (timeMatch || speedMatch) {
+                    if (timeMatch) updates.timeElapsed = timeMatch[1];
-                        lastProgress = `⏱️  Time: ${timeMatch?.[1] || 'N/A'} | Speed: ${speedMatch?.[1] || 'N/A'}`;
+                    if (speedMatch) updates.speed = speedMatch[1];
-                        console.log(lastProgress);
+
+                    if (timeMatch && totalDuration && totalDuration > 0) {
+                        const elapsedSeconds = parseFFmpegTime(timeMatch[1]);
+                        updates.progress = Math.min(
+                            99,
+                            Math.round((elapsedSeconds / totalDuration) * 100)
+                        );
                     }
-                } else {
+                    updateDownloadProgress(downloadId, updates);
-                    console.log('[ffmpeg]', text);
                 }
+
             });
 
-            ff.on('error', (error) => {
+            ff.on('error', (error) => reject(error));
-                console.error('❌ Error al iniciar FFmpeg:', error);
-                reject(error);
-            });
-
             ff.on('close', (code) => {
-                if (code === 0) {
+                if (code === 0) resolve(true);
-                    console.log('✅ Descarga completada exitosamente');
+                else reject(new Error(`FFmpeg exited with code ${code}`));
-                    resolve(true);
-                } else {
-                    console.error(`❌ FFmpeg terminó con código: ${code}`);
-                    reject(new Error(`FFmpeg exited with code ${code}`));
-                }
             });
         });
 
@@ -339,8 +359,17 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
             'local_library'
         );
 
+        updateDownloadProgress(downloadId, {
+            status: 'completed',
+            progress: 100,
+            completedAt: Date.now()
+        });
+
+        setTimeout(() => activeDownloads.delete(downloadId), 30000);
+
         return {
             status: 'SUCCESS',
+            download_id: downloadId,
             entry_id: entry.id,
             file_id: fileId,
             episode: episodeNumber,
@@ -350,6 +379,14 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
     } catch (e: any) {
         fs.rmSync(tempDir, { recursive: true, force: true });
         if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath);
+
+        updateDownloadProgress(downloadId, {
+            status: 'failed',
+            error: e.message
+        });
+
+        setTimeout(() => activeDownloads.delete(downloadId), 60000);
+
         const err = new Error('DOWNLOAD_FAILED');
         (err as any).details = e.message;
         throw err;
@@ -362,6 +399,23 @@ export async function downloadBookChapter(params: BookDownloadParams) {
     const type = format === 'manga' ? 'manga' : 'novels';
     const entry = await getOrCreateEntry(anilistId, type);
 
+    const ext = format === 'manga' ? 'cbz' : 'epub';
+    const fileName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.${ext}`;
+
+    const downloadId = crypto.randomUUID();
+
+    activeDownloads.set(downloadId, {
+        id: downloadId,
+        type: format === 'manga' ? 'manga' : 'novel',
+        anilistId,
+        unitNumber: chapterNumber,
+        status: 'pending',
+        progress: 0,
+        startedAt: Date.now(),
+        folderName: entry.folderName,
+        fileName: fileName
+    });
+
     const existingFile = await queryOne(
         `SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
         [entry.id, chapterNumber],
@@ -369,6 +423,7 @@ export async function downloadBookChapter(params: BookDownloadParams) {
     );
 
     if (existingFile) {
+        activeDownloads.delete(downloadId);
         return {
             status: 'ALREADY_EXISTS',
             message: `Chapter ${chapterNumber} already exists`,
@@ -378,6 +433,8 @@ export async function downloadBookChapter(params: BookDownloadParams) {
     }
 
     try {
+        updateDownloadProgress(downloadId, { status: 'downloading' });
+
         let outputPath: string;
         let fileId: string;
 
@@ -388,7 +445,8 @@ export async function downloadBookChapter(params: BookDownloadParams) {
             const zip = new AdmZip();
             const sortedImages = images!.sort((a, b) => a.index - b.index);
 
-            for (const img of sortedImages) {
+            for (let i = 0; i < sortedImages.length; i++) {
+                const img = sortedImages[i];
                 const res = await fetch(img.url);
                 if (!res.ok) throw new Error(`HTTP_${res.status}`);
                 const buf = Buffer.from(await res.arrayBuffer());
@@ -396,6 +454,10 @@ export async function downloadBookChapter(params: BookDownloadParams) {
                 const ext = path.extname(new URL(img.url).pathname) || '.jpg';
                 const filename = `${img.index.toString().padStart(4, '0')}${ext}`;
                 zip.addFile(filename, buf);
+
+                updateDownloadProgress(downloadId, {
+                    progress: Math.floor((i / sortedImages.length) * 100)
+                });
             }
 
             zip.writeZip(outputPath);
@@ -405,7 +467,6 @@ export async function downloadBookChapter(params: BookDownloadParams) {
             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"?>
@@ -443,7 +504,6 @@ ${content}
 </body>
 </html>`;
             zip.addFile('OEBPS/chapter.xhtml', Buffer.from(chapterXhtml));
-
             zip.writeZip(outputPath);
         }
 
@@ -461,8 +521,17 @@ ${content}
             'local_library'
         );
 
+        updateDownloadProgress(downloadId, {
+            status: 'completed',
+            progress: 100,
+            completedAt: Date.now()
+        });
+
+        setTimeout(() => activeDownloads.delete(downloadId), 30000);
+
         return {
             status: 'SUCCESS',
+            download_id: downloadId,
             entry_id: entry.id,
             file_id: fileId,
             chapter: chapterNumber,
@@ -471,8 +540,26 @@ ${content}
         };
 
     } catch (error: any) {
+        updateDownloadProgress(downloadId, {
+            status: 'failed',
+            error: error.message
+        });
+
+        setTimeout(() => activeDownloads.delete(downloadId), 60000);
+
         const err = new Error('DOWNLOAD_FAILED');
         (err as any).details = error.message;
         throw err;
     }
+}
+
+function parseFFmpegTime(timeStr: string): number {
+    const parts = timeStr.split(':');
+    if (parts.length < 3) return 0;
+
+    const h = parseFloat(parts[0]) || 0;
+    const m = parseFloat(parts[1]) || 0;
+    const s = parseFloat(parts[2]) || 0;
+
+    return (h * 3600) + (m * 60) + s;
 }

desktop/src/api/local/local.controller.ts

@@ -2,6 +2,7 @@ import {FastifyReply, FastifyRequest} from 'fastify';
 import fs from 'fs';
 import * as service from './local.service';
 import * as downloadService from './download.service';
+import * as streamingService from './streaming.service';
 
 type ScanQuery = {
     mode?: 'full' | 'incremental';
@@ -21,12 +22,13 @@ type DownloadAnimeBody =
     | {
     anilist_id: number;
     episode_number: number;
-    stream_url: string; // media playlist FINAL
+    stream_url: string;
     is_master?: false;
     subtitles?: {
         language: string;
         url: string;
     }[];
+    duration?: number;
     chapters?: {
         title: string;
         start_time: number;
@@ -36,28 +38,25 @@ type DownloadAnimeBody =
     | {
     anilist_id: number;
     episode_number: number;
-    stream_url: string; // master.m3u8
+    stream_url: string;
+    duration?: number;
     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;
@@ -91,8 +90,7 @@ export async function scanLibrary(request: FastifyRequest<{ Querystring: ScanQue
 export async function listEntries(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
     try {
         const { type } = request.params;
-        const entries = await service.getEntriesByType(type);
+        return await service.getEntriesByType(type);
-        return entries;
     } catch {
         return reply.status(500).send({ error: 'FAILED_TO_LIST_ENTRIES' });
     }
@@ -260,6 +258,7 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
             anilist_id,
             episode_number,
             stream_url,
+            duration,
             is_master,
             subtitles,
             chapters
@@ -267,7 +266,6 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
 
         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',
@@ -275,26 +273,23 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
             });
         }
 
-        // 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
+            chapters,
+            totalDuration: duration
         };
 
-        // Si es master playlist, agregar campos adicionales
         if (is_master === true) {
             const { variant, audio } = request.body as any;
 
@@ -306,14 +301,11 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
             }
 
             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,
@@ -409,4 +401,85 @@ export async function downloadBook(request: FastifyRequest<{ Body: DownloadBookB
 
         return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_BOOK' });
     }
+}
+
+export async function getDownloadStatus(request: FastifyRequest, reply: FastifyReply) {
+    try {
+        const downloads = downloadService.getActiveDownloads();
+        const streams = streamingService.getActiveStreamsStatus();
+
+        return {
+            downloads: {
+                total: downloads.length,
+                active: downloads.filter(d => d.status === 'downloading').length,
+                completed: downloads.filter(d => d.status === 'completed').length,
+                failed: downloads.filter(d => d.status === 'failed').length,
+                list: downloads
+            },
+            streams: {
+                total: streams.length,
+                active: streams.filter(s => !s.isComplete).length,
+                completed: streams.filter(s => s.isComplete).length,
+                list: streams
+            }
+        };
+    } catch (err) {
+        console.error('Error getting download status:', err);
+        return reply.status(500).send({ error: 'FAILED_TO_GET_DOWNLOAD_STATUS' });
+    }
+}
+
+export async function getAnimeStreamManifest(request: FastifyRequest, reply: FastifyReply) {
+    try {
+        const { type, id, unit } = request.params as any;
+
+        if (type !== 'anime') {
+            return reply.status(400).send({ error: 'ONLY_ANIME_SUPPORTED' });
+        }
+
+        const fileInfo = await service.getFileForStreaming(id, unit);
+
+        if (!fileInfo) {
+            return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
+        }
+
+        const manifest = await streamingService.getStreamingManifest(fileInfo.filePath);
+
+        if (!manifest) {
+            return reply.status(500).send({ error: 'FAILED_TO_GENERATE_MANIFEST' });
+        }
+
+        return manifest;
+    } catch (err: any) {
+        console.error('Error getting stream manifest:', err);
+        return reply.status(500).send({ error: 'FAILED_TO_GET_STREAM_MANIFEST' });
+    }
+}
+
+export async function serveHLSFile(request: FastifyRequest, reply: FastifyReply) {
+    try {
+        const { hash, filename } = request.params as any;
+
+        const file = await streamingService.getHLSFile(hash, filename);
+
+        if (!file) {
+            return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
+        }
+
+        const contentType = filename.endsWith('.m3u8')
+            ? 'application/vnd.apple.mpegurl'
+            : filename.endsWith('.vtt')
+                ? 'text/vtt'
+                : 'video/mp2t';
+
+        reply
+            .header('Content-Type', contentType)
+            .header('Content-Length', file.stat.size)
+            .header('Access-Control-Allow-Origin', '*');
+
+        return fs.createReadStream(file.path);
+    } catch (err) {
+        console.error('Error serving HLS file:', err);
+        return reply.status(500).send({ error: 'FAILED_TO_SERVE_HLS_FILE' });
+    }
 }

desktop/src/api/local/local.routes.ts

@@ -5,6 +5,8 @@ async function localRoutes(fastify: FastifyInstance) {
     fastify.post('/library/scan', controller.scanLibrary);
     fastify.get('/library/:type', controller.listEntries);
     fastify.get('/library/:type/:id', controller.getEntry);
+
+    // Streaming básico (legacy)
     fastify.get('/library/stream/:type/:id/:unit', controller.streamUnit);
     fastify.post('/library/:type/:id/match', controller.matchEntry);
     fastify.get('/library/:id/units', controller.getUnits);
@@ -12,6 +14,9 @@ async function localRoutes(fastify: FastifyInstance) {
     fastify.get('/library/:unitId/resource/:resId', controller.getPage);
     fastify.post('/library/download/anime', controller.downloadAnime);
     fastify.post('/library/download/book', controller.downloadBook);
+    fastify.get('/library/downloads/status', controller.getDownloadStatus);
+    fastify.get('/library/stream/:type/:id/:unit/manifest', controller.getAnimeStreamManifest);
+    fastify.get('/library/hls/:hash/:filename', controller.serveHLSFile);
 }
 
 export default localRoutes;

desktop/src/api/local/local.service.ts

@@ -7,6 +7,7 @@ import path from "path";
 import { getAnimeById, searchAnimeLocal } from "../anime/anime.service";
 import { getBookById, searchBooksAniList } from "../books/books.service";
 import AdmZip from 'adm-zip';
+import { getStreamHash, getSubtitleFileStream } from './streaming.service';
 
 const MANGA_IMAGE_EXTS = ['.jpg', '.jpeg', '.png', '.webp'];
 const MANGA_ARCHIVES = ['.cbz', '.cbr', '.zip'];
@@ -186,8 +187,22 @@ export async function performLibraryScan(mode: 'full' | 'incremental' = 'increme
 }
 
 export async function getEntriesByType(type: string) {
-    const entries = await queryAll(`SELECT * FROM local_entries WHERE type = ?`, [type], 'local_library');
+    const sql = `
-    return await Promise.all(entries.map((entry: any) => resolveEntryMetadata(entry, type)));
+        SELECT local_entries.*, COUNT(local_files.id) as file_count
+        FROM local_entries
+        LEFT JOIN local_files ON local_entries.id = local_files.entry_id
+        WHERE local_entries.type = ?
+        GROUP BY local_entries.id
+    `;
+    const entries = await queryAll(sql, [type], 'local_library');
+    return await Promise.all(entries.map(async (entry: any) => {
+        const metadata = await resolveEntryMetadata(entry, type);
+        return {
+            ...metadata,
+            path: entry.path,
+            files: entry.file_count
+        };
+    }));
 }
 
 export async function getEntryDetails(type: string, id: string) {

desktop/src/api/local/streaming.service.ts

@@ -0,0 +1,622 @@
+import { getConfig as loadConfig } from '../../shared/config';
+import { queryOne } from '../../shared/database';
+import crypto from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import { spawn } from 'child_process';
+
+const { values } = loadConfig();
+const FFMPEG_PATH = values.paths?.ffmpeg || 'ffmpeg';
+const FFPROBE_PATH = values.paths?.ffprobe || 'ffprobe';
+
+const STREAM_TTL = 2 * 60 * 60 * 1000;
+
+type VideoStreamInfo = {
+    index: number;
+    codec: string;
+    width: number;
+    height: number;
+    fps: number;
+};
+
+type AudioStreamInfo = {
+    index: number;
+    codec: string;
+    language?: string;
+    title?: string;
+    channels: number;
+    sampleRate: number;
+};
+
+type SubtitleStreamInfo = {
+    index: number;
+    codec: string;
+    language?: string;
+    title?: string;
+    duration: number;
+};
+
+type ChapterInfo = {
+    id: number;
+    start: number;
+    end: number;
+    title: string;
+};
+
+type MediaInfo = {
+    video: VideoStreamInfo[];
+    audio: AudioStreamInfo[];
+    subtitles: SubtitleStreamInfo[];
+    chapters: ChapterInfo[];
+    duration: number;
+};
+
+type ActiveStream = {
+    hash: string;
+    filePath: string;
+    hlsDir: string;
+    info: MediaInfo;
+    process?: any;
+    startedAt: number;
+    lastAccessed: number;
+    isComplete: boolean;
+};
+
+const activeStreams = new Map<string, ActiveStream>();
+
+setInterval(() => {
+    const now = Date.now();
+
+    for (const [hash, stream] of activeStreams.entries()) {
+        const age = now - stream.lastAccessed;
+
+        if (age > STREAM_TTL) {
+            console.log(`🗑️  Limpiando stream antiguo: ${hash}`);
+
+            if (stream.process && !stream.process.killed) {
+                stream.process.kill('SIGKILL');
+            }
+
+            if (fs.existsSync(stream.hlsDir)) {
+                fs.rmSync(stream.hlsDir, { recursive: true, force: true });
+            }
+
+            activeStreams.delete(hash);
+        }
+    }
+}, 60 * 1000);
+
+export function getStreamHash(filePath: string): string {
+    const stat = fs.statSync(filePath);
+    return crypto
+        .createHash('md5')
+        .update(`${filePath}-${stat.mtime.getTime()}`)
+        .digest('hex');
+}
+
+function ensureHLSDirectory(hash: string): string {
+    const tempDir = path.join(require('os').tmpdir(), 'hls-streams', hash);
+
+    if (!fs.existsSync(tempDir)) {
+        fs.mkdirSync(tempDir, { recursive: true });
+    }
+
+    return tempDir;
+}
+
+function buildStreamMap(info: MediaInfo): string {
+    const maps: string[] = [];
+
+    maps.push(`v:0,a:0`);
+
+    return maps.join(' ');
+}
+
+function writeMasterPlaylist(info: MediaInfo, hlsDir: string) {
+    const lines: string[] = ['#EXTM3U'];
+
+    info.audio.forEach((a, i) => {
+        lines.push(
+            `#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="${a.title || `Audio ${i+1}`}",LANGUAGE="${a.language || 'und'}",AUTOSELECT=YES,DEFAULT=${i===0?'YES':'NO'},URI="audio_${i}.m3u8"`
+        );
+    });
+
+    info.subtitles.forEach((s, i) => {
+        lines.push(
+            `#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="${s.title || `Sub ${i+1}`}",LANGUAGE="${s.language || 'und'}",AUTOSELECT=YES,DEFAULT=NO,URI="subs_${i}.m3u8"`
+        );
+    });
+
+    const v = info.video[0];
+    const bandwidth = v.width * v.height * v.fps * 0.07 | 0;
+
+    lines.push(
+        `#EXT-X-STREAM-INF:BANDWIDTH=${bandwidth},RESOLUTION=${v.width}x${v.height},AUDIO="audio"${info.subtitles.length ? ',SUBTITLES="subs"' : ''}`
+    );
+    lines.push('video.m3u8');
+
+    fs.writeFileSync(path.join(hlsDir, 'master.m3u8'), lines.join('\n'));
+}
+
+function startHLSConversion(filePath: string, info: MediaInfo, hash: string): ActiveStream {
+    const hlsDir = ensureHLSDirectory(hash);
+
+    const stream: ActiveStream = {
+        hash,
+        filePath,
+        hlsDir,
+        info,
+        process: null,
+        startedAt: Date.now(),
+        lastAccessed: Date.now(),
+        isComplete: false
+    };
+
+    activeStreams.set(hash, stream);
+
+    (async () => {
+        try {
+
+            await extractSubtitles(filePath, info, hlsDir);
+
+            writeMasterPlaylist(info, hlsDir);
+
+            startVideoTranscoding(stream, filePath, info, hlsDir);
+
+        } catch (err) {
+            console.error('❌ Error en el flujo de inicio:', err);
+        }
+    })();
+
+    return stream;
+}
+
+function startVideoTranscoding(stream: ActiveStream, filePath: string, info: MediaInfo, hlsDir: string) {
+    const args: string[] = ['-i', filePath];
+
+    args.push(
+        '-map', '0:v:0',
+        '-c:v', 'libx264',
+        '-preset', 'veryfast',
+        '-profile:v', 'main',
+        '-g', '48',
+        '-keyint_min', '48',
+        '-sc_threshold', '0',
+        '-pix_fmt', 'yuv420p',
+        '-f', 'hls',
+        '-hls_time', '4',
+        '-hls_playlist_type', 'event',
+
+        '-hls_flags', 'independent_segments',
+        '-hls_segment_filename', path.join(hlsDir, 'v_%05d.ts'),
+        path.join(hlsDir, 'video.m3u8')
+    );
+
+    info.audio.forEach((a, i) => {
+        args.push(
+            '-map', `0:${a.index}`,
+            `-c:a:${i}`, 'aac',
+            `-b:a:${i}`, '128k',
+            '-f', 'hls',
+            '-hls_time', '4',
+            '-hls_playlist_type', 'event',
+            '-hls_flags', 'independent_segments',
+            '-hls_segment_filename', path.join(hlsDir, `a${i}_%05d.ts`),
+            path.join(hlsDir, `audio_${i}.m3u8`)
+        );
+    });
+
+    console.log('🎬 Starting Video/Audio transcoding:', args.join(' '));
+
+    const ffmpeg = spawn(FFMPEG_PATH, args, {
+        windowsHide: true,
+        stdio: ['ignore', 'pipe', 'pipe']
+    });
+
+    stream.process = ffmpeg;
+
+    ffmpeg.stderr.on('data', (data) => {
+        const text = data.toString();
+
+        if (text.includes('time=')) {
+            const timeMatch = text.match(/time=(\S+)/);
+            if (timeMatch) console.log(`⏱️  Converting ${stream.hash.substr(0,6)}: ${timeMatch[1]}`);
+        }
+    });
+
+    ffmpeg.on('close', (code) => {
+        if (code === 0) {
+            console.log('✅ Video transcoding complete');
+            stream.isComplete = true;
+
+        }
+    });
+}
+
+const SUBTITLE_EXTENSIONS: Record<string, string> = {
+    'ass': 'ass',
+    'ssa': 'ass',
+    'subrip': 'srt',
+    'webvtt': 'vtt',
+    'hdmv_pgs_subtitle': 'sup',
+    'mov_text': 'srt',
+    'dvd_subtitle': 'sub',
+    'text': 'srt'
+};
+
+async function extractSubtitles(filePath: string, info: MediaInfo, hlsDir: string): Promise<void> {
+    if (info.subtitles.length === 0) return;
+
+    console.log('📝 Extrayendo subtítulos...');
+
+    const promises = info.subtitles.map((s, i) => {
+        return new Promise<void>((resolve, reject) => {
+            const codec = s.codec.toLowerCase();
+            const ext = codec === 'subrip' ? 'srt'
+                : codec === 'ass' || codec === 'ssa' ? 'ass'
+                    : codec === 'webvtt' ? 'vtt'
+                        : 'sub';
+
+            const outputFilename = `s${i}_full.${ext}`;
+            const outputPath = path.join(hlsDir, outputFilename);
+            const playlistPath = path.join(hlsDir, `subs_${i}.m3u8`);
+
+            if (s.duration === 0) {
+                console.log(`⚠️ Sub vacío, skip: ${i}`);
+                createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
+                fs.writeFileSync(outputPath, '');
+                resolve();
+                return;
+            }
+
+            console.log(`  Track ${i}: ${s.title || s.language || 'Unknown'} [${codec}] -> ${ext}`);
+
+            const args = [
+                '-i', filePath,
+                '-map', `0:s:${i}`
+            ];
+
+            args.push('-c:s', 'copy');
+            args.push('-y', outputPath);
+
+            console.log(`  Comando: ffmpeg ${args.join(' ')}`);
+
+            const p = spawn(FFMPEG_PATH, args, {
+                stdio: ['ignore', 'pipe', 'pipe']
+            });
+
+            let errorOutput = '';
+
+            p.stderr.on('data', (data) => {
+                errorOutput += data.toString();
+            });
+
+            p.on('close', (code) => {
+                if (code === 0) {
+                    try {
+
+                        if (!fs.existsSync(outputPath)) {
+                            console.error(`  ❌ Archivo no creado: ${outputFilename}`);
+
+                            fs.writeFileSync(outputPath, '');
+                        } else {
+                            const stat = fs.statSync(outputPath);
+                            if (stat.size === 0) {
+                                console.error(`  ⚠️ Subtítulo ${i} tiene 0 bytes`);
+                                console.error(`  FFmpeg stderr:`, errorOutput.slice(-500));
+                            } else {
+                                console.log(`  ✅ Subtítulo ${i} extraído: ${stat.size} bytes`);
+                            }
+                        }
+
+                        createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
+                        resolve();
+                    } catch (e) {
+                        console.error(`  Error procesando subtítulo ${i}:`, e);
+                        resolve();
+                    }
+                } else {
+                    console.error(`  ❌ Error extrayendo subtítulo ${i}. Exit code: ${code}`);
+                    console.error(`  FFmpeg stderr:`, errorOutput.slice(-500));
+
+                    fs.writeFileSync(outputPath, '');
+                    createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
+                    resolve();
+                }
+            });
+
+            p.on('error', (err) => {
+                console.error(`  Error spawn ffmpeg subs ${i}:`, err);
+                fs.writeFileSync(outputPath, '');
+                createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
+                resolve();
+            });
+        });
+    });
+
+    await Promise.all(promises);
+    console.log('✅ Proceso de subtítulos finalizado.');
+}
+
+function createDummySubtitlePlaylist(playlistPath: string, subtitleFilename: string, duration: number) {
+    const content = [
+        '#EXTM3U',
+        '#EXT-X-VERSION:3',
+        `#EXT-X-TARGETDURATION:${Math.ceil(duration)}`,
+        '#EXT-X-MEDIA-SEQUENCE:0',
+        '#EXT-X-PLAYLIST-TYPE:VOD',
+        `#EXTINF:${duration.toFixed(6)},`,
+        subtitleFilename,
+        '#EXT-X-ENDLIST'
+    ].join('\n');
+
+    fs.writeFileSync(playlistPath, content);
+}
+
+async function probeMediaFile(filePath: string): Promise<MediaInfo> {
+    return new Promise((resolve, reject) => {
+        const args = [
+            '-v', 'quiet',
+            '-print_format', 'json',
+            '-show_streams',
+            '-show_chapters',
+            '-show_format',
+            filePath
+        ];
+
+        const ffprobe = spawn(FFPROBE_PATH, args);
+        let output = '';
+
+        ffprobe.stdout.on('data', (data) => {
+            output += data.toString();
+        });
+
+        ffprobe.on('close', (code) => {
+            if (code !== 0) {
+                return reject(new Error(`FFprobe failed with code ${code}`));
+            }
+
+            try {
+                const data = JSON.parse(output);
+
+                const video: VideoStreamInfo[] = data.streams
+                    .filter((s: any) => s.codec_type === 'video')
+                    .map((s: any) => ({
+                        index: s.index,
+                        codec: s.codec_name,
+                        width: s.width,
+                        height: s.height,
+                        fps: eval(s.r_frame_rate) || 24
+                    }));
+
+                const audio: AudioStreamInfo[] = data.streams
+                    .filter((s: any) => s.codec_type === 'audio')
+                    .map((s: any) => ({
+                        index: s.index,
+                        codec: s.codec_name,
+                        language: s.tags?.language,
+                        title: s.tags?.title,
+                        channels: s.channels || 2,
+                        sampleRate: parseInt(s.sample_rate) || 48000
+                    }));
+
+                const subtitles: SubtitleStreamInfo[] = data.streams
+                    .filter((s: any) => s.codec_type === 'subtitle')
+                    .map((s: any) => ({
+                        index: s.index,
+                        codec: s.codec_name,
+                        language: s.tags?.language,
+                        title: s.tags?.title,
+                        duration: parseFloat(s.duration) || 0
+                    }));
+
+                const chapters: ChapterInfo[] = (data.chapters || []).map((c: any) => ({
+                    id: c.id,
+                    start: parseFloat(c.start_time),
+                    end: parseFloat(c.end_time),
+                    title: c.tags?.title || `Chapter ${c.id + 1}`
+                }));
+
+                const duration = parseFloat(data.format?.duration) || 0;
+
+                console.log(`📊 Media info: ${video.length} video, ${audio.length} audio, ${subtitles.length} subs`);
+
+                resolve({ video, audio, subtitles, chapters, duration });
+            } catch (e) {
+                reject(e);
+            }
+        });
+
+        ffprobe.on('error', reject);
+    });
+}
+
+export async function getStreamingManifest(filePath: string) {
+    if (!fs.existsSync(filePath)) {
+        return null;
+    }
+
+    const hash = getStreamHash(filePath);
+
+    const formatSubtitles = (subs: SubtitleStreamInfo[]) => {
+        return subs.map((s, i) => {
+            const ext = SUBTITLE_EXTENSIONS[s.codec] || 'vtt';
+            return {
+                index: s.index,
+                codec: s.codec,
+                language: s.language || 'und',
+                title: s.title || `Subtitle ${s.index}`,
+
+                url: `/api/library/hls/${hash}/s${i}_full.${ext}`
+            };
+        });
+    };
+
+    const existing = activeStreams.get(hash);
+    if (existing) {
+        existing.lastAccessed = Date.now();
+
+        return {
+            type: 'hls',
+            hash,
+            masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
+            duration: existing.info.duration,
+            isComplete: existing.isComplete,
+            video: existing.info.video.map(v => ({
+                index: v.index,
+                codec: v.codec,
+                resolution: `${v.width}x${v.height}`,
+                fps: v.fps
+            })),
+            audio: existing.info.audio.map(a => ({
+                index: a.index,
+                codec: a.codec,
+                language: a.language || 'und',
+                title: a.title || `Audio ${a.index}`,
+                channels: a.channels
+            })),
+
+            subtitles: formatSubtitles(existing.info.subtitles),
+            chapters: existing.info.chapters.map(c => ({
+                id: c.id,
+                start: c.start,
+                end: c.end,
+                title: c.title
+            }))
+        };
+    }
+
+    const duplicateCheck = activeStreams.get(hash);
+
+    if (duplicateCheck) {
+        duplicateCheck.lastAccessed = Date.now();
+        return {
+            type: 'hls',
+            hash,
+            masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
+            duration: duplicateCheck.info.duration,
+            isComplete: duplicateCheck.isComplete,
+            video: duplicateCheck.info.video.map(v => ({
+                index: v.index,
+                codec: v.codec,
+                resolution: `${v.width}x${v.height}`,
+                fps: v.fps
+            })),
+            audio: duplicateCheck.info.audio.map(a => ({
+                index: a.index,
+                codec: a.codec,
+                language: a.language || 'und',
+                title: a.title || `Audio ${a.index}`,
+                channels: a.channels
+            })),
+            subtitles: formatSubtitles(duplicateCheck.info.subtitles),
+            chapters: duplicateCheck.info.chapters.map(c => ({
+                id: c.id,
+                start: c.start,
+                end: c.end,
+                title: c.title
+            }))
+        };
+    }
+
+    const info = await probeMediaFile(filePath);
+    return {
+        type: 'hls',
+        hash,
+        masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
+        duration: info.duration,
+        isComplete: false,
+        generating: true,
+        video: info.video.map(v => ({
+            index: v.index,
+            codec: v.codec,
+            resolution: `${v.width}x${v.height}`,
+            fps: v.fps
+        })),
+        audio: info.audio.map(a => ({
+            index: a.index,
+            codec: a.codec,
+            language: a.language || 'und',
+            title: a.title || `Audio ${a.index}`,
+            channels: a.channels
+        })),
+        subtitles: formatSubtitles(info.subtitles),
+        chapters: info.chapters.map(c => ({
+            id: c.id,
+            start: c.start,
+            end: c.end,
+            title: c.title
+        }))
+    };
+}
+
+export function getSubtitleFileStream(hash: string, trackIndex: number) {
+    const stream = activeStreams.get(hash);
+
+    if (!stream) {
+
+        const tempDir = path.join(require('os').tmpdir(), 'hls-streams', hash);
+        if(fs.existsSync(tempDir)) {
+
+            const files = fs.readdirSync(tempDir);
+            const subFile = files.find(f => f.startsWith(`s${trackIndex}_full.`));
+            if (subFile) return fs.createReadStream(path.join(tempDir, subFile));
+        }
+        return null;
+    }
+
+    if (!fs.existsSync(stream.hlsDir)) return null;
+
+    const files = fs.readdirSync(stream.hlsDir);
+    const subtitleFile = files.find(f => f.startsWith(`s${trackIndex}_full.`));
+
+    if (!subtitleFile) return null;
+
+    return fs.createReadStream(path.join(stream.hlsDir, subtitleFile));
+}
+
+export async function getHLSFile(hash: string, filename: string) {
+    const stream = activeStreams.get(hash);
+
+    if (!stream) {
+        return null;
+    }
+
+    stream.lastAccessed = Date.now();
+
+    const filePath = path.join(stream.hlsDir, filename);
+
+    const maxWait = 30000;
+
+    const startWait = Date.now();
+
+    while (!fs.existsSync(filePath)) {
+        if (Date.now() - startWait > maxWait) {
+            console.error(`⏱️  Timeout esperando archivo: ${filename}`);
+            return null;
+        }
+
+        if (stream.isComplete && !fs.existsSync(filePath)) {
+            return null;
+        }
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+
+    return {
+        path: filePath,
+        stat: fs.statSync(filePath)
+    };
+}
+
+export function getActiveStreamsStatus() {
+    return Array.from(activeStreams.values()).map(stream => ({
+        hash: stream.hash,
+        filePath: stream.filePath,
+        isComplete: stream.isComplete,
+        startedAt: stream.startedAt,
+        lastAccessed: stream.lastAccessed,
+        age: Date.now() - stream.startedAt,
+        idle: Date.now() - stream.lastAccessed
+    }));
+}

desktop/src/api/rooms/rooms.controller.ts

@@ -0,0 +1,158 @@
+import { FastifyReply, FastifyRequest } from 'fastify';
+import * as roomService from './rooms.service';
+import { getUserById } from '../user/user.service';
+import { openTunnel } from "./tunnel.manager";
+
+interface CreateRoomBody {
+    name: string;
+    password?: string;
+    expose?: boolean;
+}
+
+export async function createRoom(req: any, reply: FastifyReply) {
+    try {
+        const { name, password, expose } = req.body as CreateRoomBody;
+        const userId = req.user?.id;
+
+        if (!userId) {
+            return reply.code(401).send({ error: "Authentication required to create room" });
+        }
+
+        if (!name || name.trim().length === 0) {
+            return reply.code(400).send({ error: "Room name is required" });
+        }
+
+        const user = await getUserById(userId);
+        if (!user) {
+            return reply.code(404).send({ error: "User not found" });
+        }
+
+        const host = {
+            id: `user_${userId}`,
+            username: user.username,
+            avatar: user.profile_picture_url || undefined,
+            isHost: true,
+            isGuest: false,
+            userId
+        };
+
+        let publicUrl: string | undefined;
+
+        if (expose) {
+            publicUrl = await openTunnel();
+        }
+
+        const room = roomService.createRoom(
+            name,
+            host,
+            password,
+            !!expose,
+            publicUrl
+        );
+
+        if (expose && publicUrl) {
+            room.publicUrl = `${publicUrl}/room?id=${room.id}`;
+        }
+
+        return reply.send({
+            success: true,
+            room: {
+                id: room.id,
+                name: room.name,
+                hasPassword: !!room.password,
+                userCount: room.users.size,
+                exposed: room.exposed,
+                publicUrl: room.publicUrl
+            }
+        });
+    } catch (err) {
+        console.error("Create Room Error:", err);
+        return reply.code(500).send({ error: "Failed to create room" });
+    }
+}
+
+export async function getRooms(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const rooms = roomService.getAllRooms();
+
+        const roomList = rooms.map((room) => ({
+            id: room.id,
+            name: room.name,
+            host: room.host.username,
+            userCount: room.users.size,
+            hasPassword: !!room.password,
+            currentlyWatching: room.currentVideo ? {
+                animeId: room.currentVideo.animeId,
+                episode: room.currentVideo.episode
+            } : null
+        }));
+
+        return reply.send({ rooms: roomList });
+    } catch (err) {
+        console.error("Get Rooms Error:", err);
+        return reply.code(500).send({ error: "Failed to retrieve rooms" });
+    }
+}
+
+export async function getRoom(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const { id } = req.params as { id: string };
+        const room = roomService.getRoom(id);
+
+        if (!room) {
+            return reply.code(404).send({ error: "Room not found" });
+        }
+
+        return reply.send({
+            room: {
+                id: room.id,
+                name: room.name,
+                host: {
+                    username: room.host.username,
+                    avatar: room.host.avatar
+                },
+                users: Array.from(room.users.values()).map(u => ({
+                    id: u.id,
+                    username: u.username,
+                    avatar: u.avatar,
+                    isHost: u.isHost,
+                    isGuest: u.isGuest
+                })),
+                hasPassword: !!room.password,
+                currentVideo: room.currentVideo,
+                exposed: room.exposed,
+                publicUrl: room.publicUrl
+            }
+        });
+    } catch (err) {
+        console.error("Get Room Error:", err);
+        return reply.code(500).send({ error: "Failed to retrieve room" });
+    }
+}
+
+export async function deleteRoom(req: any, reply: FastifyReply) {
+    try {
+        const { id } = req.params as { id: string };
+        const userId = req.user?.id;
+
+        if (!userId) {
+            return reply.code(401).send({ error: "Authentication required" });
+        }
+
+        const room = roomService.getRoom(id);
+        if (!room) {
+            return reply.code(404).send({ error: "Room not found" });
+        }
+
+        if (room.host.userId !== userId) {
+            return reply.code(403).send({ error: "Only the host can delete the room" });
+        }
+
+        roomService.deleteRoom(id);
+
+        return reply.send({ success: true });
+    } catch (err) {
+        console.error("Delete Room Error:", err);
+        return reply.code(500).send({ error: "Failed to delete room" });
+    }
+}

desktop/src/api/rooms/rooms.routes.ts

@@ -0,0 +1,11 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './rooms.controller';
+
+async function roomRoutes(fastify: FastifyInstance) {
+    fastify.post('/rooms', controller.createRoom);
+    fastify.get('/rooms', controller.getRooms);
+    fastify.get('/rooms/:id', controller.getRoom);
+    fastify.delete('/rooms/:id', controller.deleteRoom);
+}
+
+export default roomRoutes;

desktop/src/api/rooms/rooms.service.ts

@@ -0,0 +1,296 @@
+import crypto from 'crypto';
+import { closeTunnelIfUnused } from "./tunnel.manager";
+
+interface RoomPermissions {
+    canControl: boolean;
+    canManageQueue: boolean;
+}
+
+interface RoomUser {
+    id: string;
+    username: string;
+    avatar?: string;
+    isHost: boolean;
+    isGuest: boolean;
+    userId?: number;
+    permissions?: RoomPermissions;
+    ipAddress?: string;
+}
+
+interface SourceContext {
+    animeId: string;
+    episode: string | number;
+    source: string;
+    extension: string;
+    server: string;
+    category: string;
+}
+
+export interface QueueItem {
+    uid: string;
+    metadata: RoomMetadata;
+    videoData: any;
+    addedBy: string;
+}
+
+interface RoomMetadata {
+    id: string;
+    title: string;
+    episode: number;
+    image?: string;
+    source?: string;
+    malId?: number;
+}
+
+interface RoomData {
+    id: string;
+    name: string;
+    host: RoomUser;
+    users: Map<string, RoomUser>;
+    createdAt: number;
+    currentVideo: {
+        animeId?: number;
+        episode?: number;
+        source?: string;
+        videoData?: any;
+        currentTime: number;
+        isPlaying: boolean;
+        context?: SourceContext;
+    } | null;
+    password?: string;
+    metadata?: RoomMetadata | null;
+    exposed: boolean;
+    publicUrl?: string;
+    queue: QueueItem[];
+    bannedIPs: Set<string>;
+}
+
+export const DEFAULT_GUEST_PERMISSIONS: RoomPermissions = {
+    canControl: false,
+    canManageQueue: false
+};
+
+const rooms = new Map<string, RoomData>();
+
+export function generateRoomId(): string {
+    return crypto.randomBytes(8).toString('hex');
+}
+
+export function createRoom(name: string, host: RoomUser, password?: string, exposed = false, publicUrl?: string): RoomData {
+    const roomId = generateRoomId();
+
+    const room: RoomData = {
+        id: roomId,
+        name,
+        host,
+        users: new Map([[host.id, host]]),
+        createdAt: Date.now(),
+        currentVideo: null,
+        password: password || undefined,
+        metadata: null,
+        exposed,
+        publicUrl,
+        queue: [],
+        bannedIPs: new Set()  // NUEVO
+    };
+
+    rooms.set(roomId, room);
+    return room;
+}
+
+export function updateUserPermissions(roomId: string, userId: string, permissions: Partial<RoomPermissions>): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    const user: any = room.users.get(userId);
+    if (!user) return false;
+
+    if (user.isHost) return false;
+
+    user.permissions = {
+        ...user.permissions,
+        ...permissions
+    };
+
+    return true;
+}
+
+export function banUserIP(roomId: string, ipAddress: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.bannedIPs.add(ipAddress);
+
+    // Remover a todos los usuarios con esa IP
+    Array.from(room.users.values()).forEach(user => {
+        if (user.ipAddress === ipAddress) {
+            removeUserFromRoom(roomId, user.id);
+        }
+    });
+
+    return true;
+}
+
+export function unbanUserIP(roomId: string, ipAddress: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    return room.bannedIPs.delete(ipAddress);
+}
+
+export function isIPBanned(roomId: string, ipAddress: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    return room.bannedIPs.has(ipAddress);
+}
+
+export function getBannedIPs(roomId: string): string[] {
+    const room = rooms.get(roomId);
+    if (!room) return [];
+    return Array.from(room.bannedIPs);
+}
+
+export function hasPermission(roomId: string, userId: string, permission: keyof RoomPermissions): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    const user = room.users.get(userId);
+    if (!user) return false;
+
+    // El host siempre tiene todos los permisos
+    if (user.isHost) return true;
+
+    // Si no tiene permisos definidos, usar defaults
+    const userPerms = user.permissions || DEFAULT_GUEST_PERMISSIONS;
+    return userPerms[permission] || false;
+}
+
+export function getRoom(roomId: string): RoomData | null {
+    return rooms.get(roomId) || null;
+}
+
+export function getAllRooms(): RoomData[] {
+    return Array.from(rooms.values()).map(room => ({
+        ...room,
+        users: room.users
+    }));
+}
+
+export function addQueueItem(roomId: string, item: QueueItem): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    room.queue.push(item);
+    return true;
+}
+
+export function removeQueueItem(roomId: string, itemUid: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    room.queue = room.queue.filter(i => i.uid !== itemUid);
+    return true;
+}
+
+export function getNextQueueItem(roomId: string): QueueItem | undefined {
+    const room = rooms.get(roomId);
+    if (!room || room.queue.length === 0) return undefined;
+    return room.queue.shift(); // Saca el primero y lo retorna
+}
+
+export function getAndRemoveQueueItem(roomId: string, itemUid: string): QueueItem | undefined {
+    const room = rooms.get(roomId);
+    if (!room) return undefined;
+
+    const index = room.queue.findIndex(i => i.uid === itemUid);
+    if (index === -1) return undefined;
+
+    const [item] = room.queue.splice(index, 1);
+    return item;
+}
+
+export function moveQueueItem(roomId: string, itemUid: string, direction: 'up' | 'down'): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    const index = room.queue.findIndex(i => i.uid === itemUid);
+    if (index === -1) return false;
+
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+
+    if (newIndex < 0 || newIndex >= room.queue.length) return false;
+
+    const temp = room.queue[newIndex];
+    room.queue[newIndex] = room.queue[index];
+    room.queue[index] = temp;
+
+    return true;
+}
+
+export function addUserToRoom(roomId: string, user: RoomUser): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.users.set(user.id, user);
+    return true;
+}
+
+export function removeUserFromRoom(roomId: string, userId: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.users.delete(userId);
+
+    if (room.users.size === 0) {
+        if (room.exposed) {
+            closeTunnelIfUnused();
+        }
+        rooms.delete(roomId);
+        return true;
+    }
+
+    if (room.host.id === userId && room.users.size > 0) {
+        const newHost = Array.from(room.users.values())[0];
+        newHost.isHost = true;
+        room.host = newHost;
+    }
+
+    return true;
+}
+
+export function updateRoomVideo(roomId: string, videoData: any): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.currentVideo = {
+        ...room.currentVideo,
+        ...videoData
+    };
+    return true;
+}
+
+export function deleteRoom(roomId: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    if (room.exposed) {
+        closeTunnelIfUnused();
+    }
+
+    return rooms.delete(roomId);
+}
+
+export function verifyRoomPassword(roomId: string, password?: string): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+    if (!room.password) return true;
+    if (!password) return false;
+
+    return room.password === password;
+}
+
+export function updateRoomMetadata(roomId: string, metadata: any): boolean {
+    const room = rooms.get(roomId);
+    if (!room) return false;
+
+    room.metadata = metadata;
+    return true;
+}

desktop/src/api/rooms/rooms.websocket.ts

@@ -0,0 +1,588 @@
+import { FastifyInstance, FastifyRequest } from 'fastify';
+import * as roomService from './rooms.service';
+import { getUserById } from '../user/user.service';
+import jwt from 'jsonwebtoken';
+
+import {getConfig} from '../../shared/config';
+const { values } = getConfig();
+const jwtSecret = values.server?.jwt_secret;
+
+interface WSClient {
+    socket: any;
+    userId: string;
+    username: string;
+    roomId: string;
+    isGuest: boolean;
+}
+
+const clients = new Map<string, WSClient>();
+
+
+function getClientIP(req: any): string {
+    return req.headers['x-forwarded-for']?.split(',')[0].trim() ||
+        req.headers['x-real-ip'] ||
+        req.connection?.remoteAddress ||
+        req.socket?.remoteAddress ||
+        'unknown';
+}
+
+export function setupRoomWebSocket(fastify: FastifyInstance) {
+    // @ts-ignore
+    fastify.get('/ws/room/:roomId', { websocket: true }, (connection: any, req: any) => {
+        handleWebSocketConnection(connection, req).catch(err => {
+            console.error('WebSocket error:', err);
+            try {
+                connection.socket.close();
+            } catch (e) {
+                // Socket already closed
+            }
+        });
+    });
+}
+
+async function handleWebSocketConnection(connection: any, req: any) {
+    const socket = connection.socket || connection;
+    const roomId = req.params.roomId;
+    const token = req.query.token;
+    const guestName = req.query.guestName;
+    const password = req.query.password;
+    const clientIP = getClientIP(req);
+
+    let userId: string;
+    let username: string;
+    let avatar: string | undefined;
+    let isGuest = false;
+    let realUserId: any;
+
+    const room = roomService.getRoom(roomId);
+
+    // 1. Validaciones básicas de existencia y Ban
+    if (!room) {
+        socket.send(JSON.stringify({ type: 'error', message: 'Room not found' }));
+        socket.close();
+        return;
+    }
+
+    if (roomService.isIPBanned(roomId, clientIP)) {
+        socket.send(JSON.stringify({ type: 'error', message: 'You have been banned from this room' }));
+        socket.close();
+        return;
+    }
+
+    // 2. MOVIDO ARRIBA: Autenticar usuario PRIMERO para saber quién es
+    if (token) {
+        try {
+            const decoded: any = jwt.verify(token, jwtSecret);
+            realUserId = decoded.id;
+            const user = await getUserById(realUserId);
+
+            if (user) {
+                userId = `user_${realUserId}`;
+                username = user.username;
+                avatar = user.profile_picture_url || undefined;
+                isGuest = false;
+            } else {
+                throw new Error('User not found');
+            }
+        } catch (err) {
+            socket.send(JSON.stringify({ type: 'error', message: 'Invalid token' }));
+            socket.close();
+            return;
+        }
+    } else if (guestName && guestName.trim()) {
+        // ... (Lógica de Guest se mantiene igual) ...
+        const nameToCheck = guestName.trim();
+        const isNameTaken = Array.from(room.users.values()).some(
+            u => u.username.toLowerCase() === nameToCheck.toLowerCase()
+        );
+        if (isNameTaken) {
+            socket.send(JSON.stringify({ type: 'error', message: 'Username is already taken' }));
+            socket.close();
+            return;
+        }
+        userId = `guest_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        username = nameToCheck;
+        isGuest = true;
+    } else {
+        socket.send(JSON.stringify({ type: 'error', message: 'Authentication required' }));
+        socket.close();
+        return;
+    }
+
+    // 3. Determinar si es Host
+    const isHost = room.host.userId === realUserId || room.host.id === userId;
+
+    // 4. MOVIDO ABAJO: Validar contraseña SOLO SI NO ES HOST
+    if (room.password && !isHost) {
+        if (!password || !roomService.verifyRoomPassword(roomId, password)) {
+            socket.send(JSON.stringify({ type: 'error', message: 'Invalid password' }));
+            socket.close();
+            return;
+        }
+    }
+
+    const userInRoom = {
+        id: userId,
+        username,
+        avatar,
+        isHost: isHost,
+        isGuest,
+        userId: realUserId,
+        ipAddress: clientIP,  // NUEVO
+        permissions: isHost ? undefined : { ...roomService.DEFAULT_GUEST_PERMISSIONS }
+    };
+
+    roomService.addUserToRoom(roomId, userInRoom);
+
+    // Registrar cliente
+    clients.set(userId, {
+        socket: socket,
+        userId,
+        username,
+        roomId,
+        isGuest
+    });
+
+    socket.send(JSON.stringify({
+        type: 'init',
+        userId,
+        username,
+        isGuest,
+        isHost,  // NUEVO: Enviar explícitamente
+        room: {
+            id: room.id,
+            name: room.name,
+            users: Array.from(room.users.values()).map(u => ({
+                id: u.id,
+                username: u.username,
+                avatar: u.avatar,
+                isHost: u.isHost,
+                isGuest: u.isGuest,
+                permissions: u.permissions  // NUEVO
+            })),
+            currentVideo: room.currentVideo,
+            queue: room.queue || []
+        }
+    }));
+
+    // Notificar a otros usuarios
+    broadcastToRoom(roomId, {
+        type: 'user_joined',
+        user: {
+            id: userId,
+            username,
+            avatar,
+            isGuest
+        }
+    }, userId);
+
+    // Manejar mensajes
+    socket.on('message', (message: Buffer) => {
+        try {
+            const data = JSON.parse(message.toString());
+            handleMessage(roomId, userId, data);
+        } catch (err) {
+            console.error('WebSocket message error:', err);
+        }
+    });
+
+    // Manejar desconexión
+    socket.on('close', () => {
+        clients.delete(userId);
+        roomService.removeUserFromRoom(roomId, userId);
+
+        broadcastToRoom(roomId, {
+            type: 'user_left',
+            user: { userId, username }
+        });
+    });
+}
+
+function handleMessage(roomId: string, userId: string, data: any) {
+    const room = roomService.getRoom(roomId);
+    if (!room) return;
+
+    const user = room.users.get(userId);
+    if (!user) return;
+
+    console.log('Handling message:', data.type, 'from user:', userId, 'isHost:', room.host.id === userId);
+
+    switch (data.type) {
+        case 'chat':
+            broadcastToRoom(roomId, {
+                type: 'chat',
+                userId,
+                username: room.users.get(userId)?.username || 'Unknown',
+                avatar: room.users.get(userId)?.avatar,
+                message: data.message,
+                timestamp: Date.now()
+            });
+            break;
+
+        case 'update_permissions':
+            if (!user.isHost) {
+                console.warn('Non-host attempted to update permissions');
+                return;
+            }
+
+            const success = roomService.updateUserPermissions(
+                roomId,
+                data.targetUserId,
+                data.permissions
+            );
+
+            if (success) {
+                const updatedRoom = roomService.getRoom(roomId);
+                if (updatedRoom) {
+                    broadcastToRoom(roomId, {
+                        type: 'permissions_updated',
+                        users: Array.from(updatedRoom.users.values()).map(u => ({
+                            id: u.id,
+                            username: u.username,
+                            avatar: u.avatar,
+                            isHost: u.isHost,
+                            isGuest: u.isGuest,
+                            permissions: u.permissions
+                        }))
+                    });
+                }
+            }
+            break;
+
+        // NUEVO: Baneo de usuarios (solo host)
+        case 'ban_user':
+            if (!user.isHost) {
+                console.warn('Non-host attempted to ban user');
+                return;
+            }
+
+            const targetUser = room.users.get(data.targetUserId);
+            if (targetUser && targetUser.ipAddress) {
+                roomService.banUserIP(roomId, targetUser.ipAddress);
+
+                // Cerrar conexión del usuario baneado
+                const targetClient = clients.get(data.targetUserId);
+                if (targetClient && targetClient.socket) {
+                    targetClient.socket.send(JSON.stringify({
+                        type: 'banned',
+                        message: 'You have been banned from this room'
+                    }));
+                    targetClient.socket.close();
+                }
+            }
+            break;
+
+
+        case 'queue_play_item':
+            if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
+                console.warn('User lacks permission for queue management');
+                return;
+            }
+
+            const itemToPlay = roomService.getAndRemoveQueueItem(roomId, data.itemUid);
+            if (itemToPlay) {
+                const videoPayload = {
+                    videoData: itemToPlay.videoData.videoData,
+                    subtitles: itemToPlay.videoData.subtitles,
+                    currentTime: 0,
+                    isPlaying: true
+                };
+
+                roomService.updateRoomVideo(roomId, videoPayload);
+                roomService.updateRoomMetadata(roomId, itemToPlay.metadata);
+
+                broadcastToRoom(roomId, {
+                    type: 'video_update',
+                    video: videoPayload,
+                    metadata: itemToPlay.metadata
+                });
+
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
+        case 'queue_move':
+            if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
+                return;
+            }
+
+            const moved = roomService.moveQueueItem(roomId, data.itemUid, data.direction);
+            if (moved) {
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
+        case 'request_sync':
+            // Cualquier usuario puede pedir sync
+            const host = clients.get(room.host.id);
+            if (host && host.socket && host.socket.readyState === 1) {
+                console.log(`[Sync Request] User ${userId} requested sync from host`);
+
+                host.socket.send(JSON.stringify({
+                    type: 'sync_requested',
+                    requestedBy: userId,
+                    username: room.users.get(userId)?.username
+                }));
+            } else {
+                console.warn(`[Sync Request] Host not available for user ${userId}`);
+
+                if (room.currentVideo) {
+                    const client = clients.get(userId);
+                    if (client && client.socket && client.socket.readyState === 1) {
+                        console.log(`[Sync Request] Sending cached video state to ${userId}`);
+                        client.socket.send(JSON.stringify({
+                            type: 'sync',
+                            currentTime: room.currentVideo.currentTime || 0,
+                            isPlaying: room.currentVideo.isPlaying || false
+                        }));
+                    }
+                }
+            }
+            break;
+
+        case 'video_update':
+            const canUpdateVideo = user.isHost ||
+                roomService.hasPermission(roomId, userId, 'canControl') ||
+                roomService.hasPermission(roomId, userId, 'canManageQueue');
+
+            if (!canUpdateVideo) {
+                console.warn('User lacks permissions to update video');
+                return;
+            }
+
+            roomService.updateRoomVideo(roomId, data.video);
+            roomService.updateRoomMetadata(roomId, data.metadata);
+
+            broadcastToRoom(roomId, {
+                type: 'video_update',
+                video: data.video,
+                metadata: data.metadata
+            });
+            break;
+
+        case 'queue_add_batch':
+            if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
+                return;
+            }
+
+            if (Array.isArray(data.items)) {
+                data.items.forEach((item: any, i: number) => {
+                    const newItem = {
+                        uid: `q_${Date.now()}_${i}_${Math.random().toString(36).substr(2, 5)}`,
+                        metadata: item.metadata,
+                        videoData: item.video,
+                        addedBy: room.users.get(userId)?.username || 'Unknown'
+                    };
+                    roomService.addQueueItem(roomId, newItem);
+                });
+
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
+        case 'sync':
+            if (room.host.id !== userId) return;
+
+            if (room.currentVideo) {
+                room.currentVideo.currentTime = data.currentTime;
+                room.currentVideo.isPlaying = data.isPlaying;
+            }
+
+            broadcastToRoom(roomId, {
+                type: 'sync',
+                currentTime: data.currentTime,
+                isPlaying: data.isPlaying
+            }, userId);
+            break;
+
+        case 'request_users':
+            const currentRoom = roomService.getRoom(roomId);
+            if (currentRoom) {
+                const client = clients.get(userId);
+                if (client && client.socket && client.socket.readyState === 1) {
+                    client.socket.send(JSON.stringify({
+                        type: 'users_update', // Nuevo tipo de respuesta
+                        users: Array.from(currentRoom.users.values()).map(u => ({
+                            id: u.id,
+                            username: u.username,
+                            avatar: u.avatar,
+                            isHost: u.isHost,
+                            isGuest: u.isGuest
+                        }))
+                    }));
+                }
+            }
+            break;
+
+        case 'play':
+            if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canControl')) {
+                console.warn('User lacks control permissions');
+                return;
+            }
+
+            broadcastToRoom(roomId, {
+                type: 'play',
+                currentTime: data.currentTime,
+                timestamp: Date.now()
+            }, userId);
+            break;
+
+        case 'pause':
+            if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canControl')) {
+                console.warn('User lacks control permissions for pause');
+                return;
+            }
+
+            console.log('Broadcasting pause event to room:', roomId);
+            broadcastToRoom(roomId, {
+                type: 'pause',
+                currentTime: data.currentTime,
+                timestamp: Date.now()
+            }, userId);
+            break;
+
+        case 'seek':
+            if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canControl')) {
+                console.warn('User lacks control permissions for seek');
+                return;
+            }
+
+            console.log('Broadcasting seek event to room:', roomId);
+            broadcastToRoom(roomId, {
+                type: 'seek',
+                currentTime: data.currentTime,
+                timestamp: Date.now()
+            }, userId);
+            break;
+
+        case 'request_state':
+            const client = clients.get(userId);
+            if (client && client.socket && client.socket.readyState === 1) {
+                const updatedRoom = roomService.getRoom(roomId);
+                if (updatedRoom) {
+                    client.socket.send(JSON.stringify({
+                        type: 'init',
+                        userId,
+                        username: client.username,
+                        isGuest: client.isGuest,
+                        room: {
+                            id: updatedRoom.id,
+                            name: updatedRoom.name,
+                            users: Array.from(updatedRoom.users.values()).map(u => ({
+                                id: u.id,
+                                username: u.username,
+                                avatar: u.avatar,
+                                isHost: u.isHost,
+                                isGuest: u.isGuest
+                            })),
+                            currentVideo: room.currentVideo,
+                            metadata: room.metadata
+                        }
+                    }));
+                }
+            }
+            break;
+
+        case 'queue_add':
+            if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
+                return;
+            }
+
+            const newItem = {
+                uid: `q_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
+                metadata: data.metadata,
+                videoData: data.video,
+                addedBy: room.users.get(userId)?.username || 'Unknown'
+            };
+
+            roomService.addQueueItem(roomId, newItem);
+
+            broadcastToRoom(roomId, {
+                type: 'queue_update',
+                queue: room.queue
+            });
+            break;
+
+        case 'queue_remove':
+            if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
+                return;
+            }
+
+            roomService.removeQueueItem(roomId, data.itemUid);
+            broadcastToRoom(roomId, {
+                type: 'queue_update',
+                queue: room.queue
+            });
+            break;
+
+        case 'play_next':
+            if (room.host.id !== userId) return;
+
+            const nextItem = roomService.getNextQueueItem(roomId);
+            if (nextItem) {
+                const videoPayload = {
+                    videoData: nextItem.videoData.videoData,
+                    subtitles: nextItem.videoData.subtitles,
+                    currentTime: 0,
+                    isPlaying: true
+                };
+
+                roomService.updateRoomVideo(roomId, videoPayload);
+                roomService.updateRoomMetadata(roomId, nextItem.metadata);
+
+                broadcastToRoom(roomId, {
+                    type: 'video_update',
+                    video: videoPayload,
+                    metadata: nextItem.metadata
+                });
+
+                broadcastToRoom(roomId, {
+                    type: 'queue_update',
+                    queue: room.queue
+                });
+            }
+            break;
+
+        default:
+            console.warn('Unknown message type:', data.type);
+            break;
+    }
+}
+
+function broadcastToRoom(roomId: string, message: any, excludeUserId?: string) {
+    const room = roomService.getRoom(roomId);
+    if (!room) return;
+
+    const messageStr = JSON.stringify(message);
+
+    console.log('Broadcasting to room:', roomId, 'message type:', message.type, 'excluding:', excludeUserId);
+
+    let sentCount = 0;
+    room.users.forEach((user) => {
+        if (user.id !== excludeUserId) {
+            const client = clients.get(user.id);
+            if (client && client.socket && client.socket.readyState === 1) {
+                try {
+                    client.socket.send(messageStr);
+                    sentCount++;
+                    console.log('Sent to user:', user.id, user.username);
+                } catch (err) {
+                    console.error('Error sending message to user:', user.id, err);
+                }
+            } else {
+                console.warn('User socket not ready:', user.id, 'readyState:', client?.socket?.readyState);
+            }
+        }
+    });
+
+    console.log(`Broadcast complete: sent to ${sentCount} users`);
+}

desktop/src/api/rooms/tunnel.manager.ts

@@ -0,0 +1,111 @@
+import { spawn, ChildProcess } from "child_process";
+import { getConfig as loadConfig } from '../../shared/config';
+const { values } = loadConfig();
+const CLOUDFLARED_PATH = values.paths?.cloudflared || 'cloudflared';
+
+let tunnelProcess: ChildProcess | null = null;
+let exposedRooms = 0;
+let publicUrl: string | null = null;
+let tunnelPromise: Promise<string> | null = null;
+
+export function openTunnel(): Promise<string> {
+    if (tunnelProcess && publicUrl) {
+        exposedRooms++;
+        return Promise.resolve(publicUrl);
+    }
+
+    if (tunnelPromise) {
+        return tunnelPromise;
+    }
+
+    tunnelPromise = new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+            cleanup();
+            reject(new Error("Timeout esperando URL del túnel (30s)"));
+        }, 30000);
+
+        tunnelProcess = spawn(CLOUDFLARED_PATH, [
+            "tunnel",
+            "--url",
+            "http://localhost:54322",
+            "--no-autoupdate"
+        ]);
+
+        const cleanup = () => {
+            clearTimeout(timeout);
+            tunnelPromise = null;
+        };
+
+        let outputBuffer = "";
+
+        const processOutput = (data: Buffer) => {
+            const text = data.toString();
+            outputBuffer += text;
+
+            const match = outputBuffer.match(/https:\/\/[a-z0-9-]+\.trycloudflare\.com/);
+            if (match && !publicUrl) {
+                publicUrl = match[0];
+                exposedRooms = 1;
+                cleanup();
+                resolve(publicUrl);
+            }
+        };
+
+        tunnelProcess.stdout?.on("data", (data) => {
+            processOutput(data);
+        });
+
+        tunnelProcess.stderr?.on("data", (data) => {
+            processOutput(data);
+        });
+
+        tunnelProcess.on("error", (error) => {
+            console.error("[Cloudflared Process Error]", error);
+            cleanup();
+            tunnelProcess = null;
+            reject(error);
+        });
+
+        tunnelProcess.on("exit", (code, signal) => {
+            tunnelProcess = null;
+            publicUrl = null;
+            exposedRooms = 0;
+
+            if (!publicUrl) {
+                cleanup();
+                reject(new Error(`Proceso cloudflared terminó antes de obtener URL (código: ${code})`));
+            }
+        });
+    });
+
+    return tunnelPromise;
+}
+
+export function closeTunnelIfUnused() {
+    exposedRooms--;
+    console.log(`[Tunnel Manager] Rooms expuestas: ${exposedRooms}`);
+
+    if (exposedRooms <= 0 && tunnelProcess) {
+        console.log("[Tunnel Manager] Cerrando túnel...");
+        tunnelProcess.kill();
+        tunnelProcess = null;
+        publicUrl = null;
+        exposedRooms = 0;
+        tunnelPromise = null;
+    }
+}
+
+export function getTunnelUrl(): string | null {
+    return publicUrl;
+}
+
+export function forceTunnelClose() {
+    if (tunnelProcess) {
+        console.log("[Tunnel Manager] Forzando cierre del túnel...");
+        tunnelProcess.kill();
+        tunnelProcess = null;
+        publicUrl = null;
+        exposedRooms = 0;
+        tunnelPromise = null;
+    }
+}

desktop/src/api/types.ts

@@ -62,6 +62,7 @@ export interface ExtensionSearchOptions {
 }
 
 export interface ExtensionSearchResult {
+    url: string;
     format: string;
     headers: any;
     id: string;
@@ -96,9 +97,9 @@ export interface Extension {
     getMetadata: any;
     type: 'anime-board' | 'book-board' | 'manga-board';
     mediaType?: 'manga' | 'ln';
-    search?: (options: ExtensionSearchOptions) => Promise<ExtensionSearchResult[]>;
+    search?: (options: any) => Promise<ExtensionSearchResult[]>;
     findEpisodes?: (id: string) => Promise<Episode[]>;
-    findEpisodeServer?: (episode: Episode, server: string) => Promise<any>;
+    findEpisodeServer?: (s: any, server1: string | undefined, category: string | undefined) => Promise<any>;
     findChapters?: (id: string) => Promise<Chapter[]>;
     findChapterPages?: (chapterId: string) => Promise<any>;
     getSettings?: () => ExtensionSettings;
@@ -110,6 +111,7 @@ export interface ExtensionSettings {
 }
 
 export interface StreamData {
+    videoSources: any;
     url?: string;
     sources?: any[];
     subtitles?: any[];
@@ -158,6 +160,7 @@ export interface WatchStreamQuery {
     server?: string;
     category?: string;
     ext: string;
+    extensionAnimeId?: string;
 }
 
 export interface BookParams {

desktop/src/api/user/user.controller.ts

@@ -2,6 +2,10 @@ import { FastifyReply, FastifyRequest } from 'fastify';
 import * as userService from './user.service';
 import {queryOne} from '../../shared/database';
 import jwt from "jsonwebtoken";
+import { getConfig } from '../../shared/config';
+const { values } = getConfig();
+const jwtSecret = values.server?.jwt_secret;
+
 
 interface UserIdParams { id: string; }
 interface CreateUserBody {
@@ -75,7 +79,7 @@ export async function login(req: FastifyRequest, reply: FastifyReply) {
 
     const token = jwt.sign(
         { id: userId },
-        process.env.JWT_SECRET!,
+        jwtSecret,
         { expiresIn: "7d" }
     );
 

desktop/src/scripts/anime/subtitle-renderer.js

@@ -0,0 +1,152 @@
+const BASE_PATH = '/src/scripts/jassub/';
+class SubtitleRenderer {
+    constructor(video, canvas) {
+        this.video = video;
+        this.canvas = canvas;
+        this.instance = null;
+        this.currentUrl = null;
+    }
+    async init(subtitleUrl) {
+        if (!this.video || !this.canvas) return;
+        this.dispose();
+        const finalUrl = subtitleUrl.includes('/api/proxy')
+            ? subtitleUrl
+            : `/api/proxy?url=${encodeURIComponent(subtitleUrl)}`;
+        this.currentUrl = finalUrl;
+        try {
+            this.instance = new JASSUB({
+                video: this.video,
+                canvas: this.canvas,
+                subUrl: finalUrl,
+                workerUrl: `${BASE_PATH}jassub-worker.js`,
+                wasmUrl: `${BASE_PATH}jassub-worker.wasm`,
+                modernWasmUrl: `${BASE_PATH}jassub-worker-modern.wasm`,
+                blendMode: 'js',
+                asyncRender: true,
+                onDemand: true,
+                targetFps: 60,
+                debug: false
+            });
+            console.log('JASSUB initialized for:', finalUrl);
+        } catch (e) {
+            console.error("JASSUB Init Error:", e);
+        }
+    }
+    resize() {
+        if (this.instance && this.instance.resize) {
+            this.instance.resize();
+        }
+    }
+    setTrack(url) {
+        const finalUrl = url.includes('/api/proxy')
+            ? url
+            : `/api/proxy?url=${encodeURIComponent(url)}`;
+        if (this.instance) {
+            this.instance.setTrackByUrl(finalUrl);
+            this.currentUrl = finalUrl;
+        } else {
+            this.init(url);
+        }
+    }
+    dispose() {
+        if (this.instance) {
+            try {
+                this.instance.destroy();
+            } catch (e) {
+                console.warn("Error destroying JASSUB:", e);
+            }
+            this.instance = null;
+        }
+    }
+}
+class SimpleSubtitleRenderer {
+    constructor(video, canvas) {
+        this.video = video;
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+        this.cues = [];
+        this.destroyed = false;
+        this.setupCanvas();
+        this.video.addEventListener('timeupdate', () => this.render());
+    }
+    setupCanvas() {
+        const updateSize = () => {
+            if (!this.video || !this.canvas) return;
+            const rect = this.video.getBoundingClientRect();
+            this.canvas.width = rect.width;
+            this.canvas.height = rect.height;
+        };
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        this.resizeHandler = updateSize;
+    }
+    async loadSubtitles(url) {
+        try {
+            let finalUrl = url;
+            const isLocal = url.startsWith('/');
+            const isAlreadyProxied = url.includes('/api/proxy');
+            if (!isLocal && !isAlreadyProxied && (url.startsWith('http:') || url.startsWith('https:'))) {
+                finalUrl = `/api/proxy?url=${encodeURIComponent(url)}`;
+            }
+            console.log('Fetching subtitles from:', finalUrl);
+            const response = await fetch(finalUrl);
+            if (!response.ok) throw new Error(`Status: ${response.status}`);
+            const text = await response.text();
+            this.cues = this.parseSRT(text);
+        } catch (error) {
+            console.error('Failed to load subtitles:', error);
+        }
+    }
+    setTrack(url) {
+        this.cues = [];
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.loadSubtitles(url);
+    }
+    parseSRT(srtText) {
+        const normalizedText = srtText.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+        const blocks = normalizedText.trim().split('\n\n');
+        return blocks.map(block => {
+            const lines = block.split('\n');
+            if (lines.length < 3) return null;
+            const timeMatch = lines[1].match(/(\d{2}):(\d{2}):(\d{2}),(\d{3}) --> (\d{2}):(\d{2}):(\d{2}),(\d{3})/);
+            if (!timeMatch) return null;
+            const start = parseInt(timeMatch[1]) * 3600 + parseInt(timeMatch[2]) * 60 + parseInt(timeMatch[3]) + parseInt(timeMatch[4]) / 1000;
+            const end = parseInt(timeMatch[5]) * 3600 + parseInt(timeMatch[6]) * 60 + parseInt(timeMatch[7]) + parseInt(timeMatch[8]) / 1000;
+            let text = lines.slice(2).join('\n');
+            text = text.replace(/<[^>]*>/g, '');
+            text = text.replace(/\{[^}]*\}/g, '');
+            return { start, end, text };
+        }).filter(Boolean);
+    }
+    render() {
+        if (this.destroyed) return;
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        const currentTime = this.video.currentTime;
+        const cue = this.cues.find(c => currentTime >= c.start && currentTime <= c.end);
+        if (cue) this.drawSubtitle(cue.text);
+    }
+    drawSubtitle(text) {
+        const lines = text.split('\n');
+        const fontSize = Math.max(20, this.canvas.height * 0.04);
+        this.ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+        this.ctx.textAlign = 'center';
+        this.ctx.textBaseline = 'bottom';
+        const lineHeight = fontSize * 1.2;
+        const startY = this.canvas.height - 60;
+        lines.reverse().forEach((line, index) => {
+            const y = startY - (index * lineHeight);
+            this.ctx.strokeStyle = 'black';
+            this.ctx.lineWidth = 4;
+            this.ctx.strokeText(line, this.canvas.width / 2, y);
+            this.ctx.fillStyle = 'white';
+            this.ctx.fillText(line, this.canvas.width / 2, y);
+        });
+    }
+    dispose() {
+        this.destroyed = true;
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        if (this.resizeHandler) window.removeEventListener('resize', this.resizeHandler);
+    }
+}
+window.SubtitleRenderer = SubtitleRenderer;
+window.SimpleSubtitleRenderer = SimpleSubtitleRenderer;

desktop/src/scripts/auth-guard.js

@@ -1,6 +1,5 @@
 ;(() => {
     const token = localStorage.getItem("token")
-
     if (!token && window.location.pathname !== "/") {
         window.location.href = "/"
     }
@@ -8,45 +7,61 @@
 
 async function loadMeUI() {
     const token = localStorage.getItem("token")
+
     if (!token) return
 
     try {
         const res = await fetch("/api/me", {
-            headers: {
+            headers: { Authorization: `Bearer ${token}` },
-                Authorization: `Bearer ${token}`,
-            },
         })
 
         if (!res.ok) return
 
         const user = await res.json()
+        const avatarUrl = user.avatar || "/public/assets/avatar.png"
 
         const navUser = document.getElementById("nav-user")
         const navUsername = document.getElementById("nav-username")
         const navAvatar = document.getElementById("nav-avatar")
         const dropdownAvatar = document.getElementById("dropdown-avatar")
 
-        if (!navUser || !navUsername || !navAvatar) return
+        if (navUser && navUsername && navAvatar) {
+            navUser.style.display = "flex"
+            navUsername.textContent = user.username
+            navAvatar.src = avatarUrl
+            if (dropdownAvatar) dropdownAvatar.src = avatarUrl
+        }
 
-        navUser.style.display = "flex"
+        const titlebarAvatar = document.getElementById("titlebar-avatar")
-        navUsername.textContent = user.username
+        const titlebarActions = document.getElementById("titlebar-actions")
 
-        const avatarUrl = user.avatar || "/public/assets/avatar.png"
+        if (titlebarAvatar) {
-        navAvatar.src = avatarUrl
+            titlebarAvatar.src = avatarUrl
-        if (dropdownAvatar) {
+        }
-            dropdownAvatar.src = avatarUrl
+
+        if (titlebarActions) {
+            titlebarActions.style.display = "flex"
         }
 
         setupDropdown()
+
     } catch (e) {
         console.error("Failed to load user UI:", e)
     }
 }
 
-// Variable para saber si el modal ya fue cargado
 let settingsModalLoaded = false;
 
-document.getElementById('nav-settings').addEventListener('click', openSettings)
+const navSettingsBtn = document.getElementById('nav-settings');
+const titlebarSettingsBtn = document.getElementById('titlebar-settings');
+
+if (navSettingsBtn) navSettingsBtn.addEventListener('click', openSettings);
+if (titlebarSettingsBtn) titlebarSettingsBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+
+    openSettings();
+    document.getElementById("titlebar-dropdown")?.classList.remove("active");
+});
 
 async function openSettings() {
     if (!settingsModalLoaded) {
@@ -55,64 +70,131 @@ async function openSettings() {
             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));
-
+            if (window.toggleSettingsModal) await window.toggleSettingsModal(false);
-            // Ahora cargar los settings
-            if (window.toggleSettingsModal) {
-                await window.toggleSettingsModal(false);
-            }
         } catch (err) {
             console.error('Error loading settings modal:', err);
         }
     } else {
-        if (window.toggleSettingsModal) {
+        if (window.toggleSettingsModal) await window.toggleSettingsModal(false);
-            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")
     const navLogout = document.getElementById("nav-logout")
 
-    if (!userAvatarBtn || !navDropdown || !navLogout) return
+    if (userAvatarBtn && navDropdown) {
+        userAvatarBtn.addEventListener("click", (e) => {
+            e.stopPropagation()
+            navDropdown.classList.toggle("active")
 
-    userAvatarBtn.addEventListener("click", (e) => {
+            document.getElementById("titlebar-dropdown")?.classList.remove("active")
-        e.stopPropagation()
+        })
-        navDropdown.classList.toggle("active")
+        if (navLogout) {
-    })
+            navLogout.addEventListener("click", () => {
+                localStorage.removeItem("token")
+                window.location.href = "/"
+            })
+        }
+    }
+
+    const titlebarUserBox = document.getElementById("titlebar-user-box")
+    const titlebarDropdown = document.getElementById("titlebar-dropdown")
+    const titlebarLogout = document.getElementById("titlebar-logout")
+
+    if (titlebarUserBox && titlebarDropdown) {
+        titlebarUserBox.addEventListener("click", (e) => {
+            e.stopPropagation()
+            titlebarDropdown.classList.toggle("active")
+
+            document.getElementById("nav-dropdown")?.classList.remove("active")
+        })
+
+        if (titlebarLogout) {
+            titlebarLogout.addEventListener("click", (e) => {
+                e.stopPropagation()
+                localStorage.removeItem("token")
+                window.location.href = "/"
+            })
+        }
+
+        titlebarDropdown.addEventListener("click", (e) => {
+            e.stopPropagation()
+        })
+    }
 
     document.addEventListener("click", (e) => {
-        if (!navDropdown.contains(e.target)) {
+        if (navDropdown && !navDropdown.contains(e.target)) {
             navDropdown.classList.remove("active")
         }
-    })
+        if (titlebarDropdown && !titlebarDropdown.contains(e.target)) {
-
+            titlebarDropdown.classList.remove("active")
-    navDropdown.addEventListener("click", (e) => {
+        }
-        e.stopPropagation()
-    })
-
-    navLogout.addEventListener("click", () => {
-        localStorage.removeItem("token")
-        window.location.href = "/"
-    })
-
-    const dropdownLinks = navDropdown.querySelectorAll("a.dropdown-item")
-    dropdownLinks.forEach((link) => {
-        link.addEventListener("click", () => {
-            navDropdown.classList.remove("active")
-        })
     })
 }
 
-loadMeUI()
+loadMeUI()
+
+const mobileToggle = document.getElementById('mobile-menu-toggle');
+const navCenter = document.querySelector('.nav-center');
+
+let overlay = document.querySelector('.menu-overlay');
+if (!overlay) {
+    overlay = document.createElement('div');
+    overlay.className = 'menu-overlay';
+    document.body.appendChild(overlay);
+}
+
+function toggleMenu() {
+    navCenter.classList.toggle('open');
+    overlay.classList.toggle('active');
+
+    const isOpen = navCenter.classList.contains('open');
+    mobileToggle.innerHTML = isOpen
+        ? '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>'
+        : '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>';
+}
+
+mobileToggle.addEventListener('click', toggleMenu);
+
+overlay.addEventListener('click', () => {
+    if (navCenter.classList.contains('open')) toggleMenu();
+});
+
+navCenter.querySelectorAll('.nav-button').forEach(btn => {
+    btn.addEventListener('click', () => {
+        if (navCenter.classList.contains('open')) toggleMenu();
+    });
+});
+
+const searchWrapper = document.querySelector('.search-wrapper');
+const searchInput = document.getElementById('search-input');
+
+searchWrapper.addEventListener('click', (e) => {
+    if (window.innerWidth <= 768) {
+        searchWrapper.classList.add('active-mobile');
+        searchInput.focus();
+    }
+});
+
+document.addEventListener('click', (e) => {
+    if (!searchWrapper.contains(e.target)) {
+        searchWrapper.classList.remove('active-mobile');
+    }
+});
+
+const createRoomModal = new CreateRoomModal();
+
+const createBtn = document.getElementById('nav-create-party');
+if (createBtn) {
+    createBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        const dropdown = document.getElementById('nav-dropdown');
+        if(dropdown) dropdown.classList.remove('active');
+
+        createRoomModal.open();
+    });
+}

desktop/src/scripts/books/book.js

@@ -11,6 +11,7 @@ let isLocal = false;
 let currentLanguage = null;
 let uniqueLanguages = [];
 let isSortAscending = true;
+let manualExtensionBookId = null;
 
 const chapterPagination = Object.create(PaginationManager);
 chapterPagination.init(6, () => renderChapterList());
@@ -36,6 +37,37 @@ async function init() {
         await loadChapters();
         await setupAddToListButton();
 
+        document.getElementById('manual-match-btn')?.addEventListener('click', () => {
+            const select = document.getElementById('provider-filter');
+            const provider = select.value;
+
+            // Obtener título para prellenar
+            const currentTitle = bookData?.title?.romaji || bookData?.title?.english || '';
+
+            MatchModal.open({
+                provider: provider,
+                initialQuery: currentTitle,
+                // Define CÓMO buscar
+                onSearch: async (query, prov) => {
+                    const res = await fetch(`/api/search/books/${prov}?q=${encodeURIComponent(query)}`);
+                    const data = await res.json();
+                    return data.results || [];
+                },
+                // Define QUÉ hacer al seleccionar
+                onSelect: (item) => {
+                    console.log("Selected Book ID:", item.id);
+                    manualExtensionBookId = item.id;
+
+                    // Lógica existente de tu book.js para recargar caps
+                    loadChapters(provider);
+
+                    // Feedback visual en el botón
+                    const btn = document.getElementById('manual-match-btn');
+                    if(btn) btn.style.color = '#22c55e';
+                }
+            });
+        });
+
     } catch (err) {
         console.error("Init Error:", err);
         showError("Error loading book");
@@ -170,7 +202,7 @@ function renderRelations(edges) {
         const el = document.createElement('div');
         el.className = 'relation-card-horizontal';
 
-        const img = node.coverImage?.large || node.coverImage?.medium || '/public/assets/no-image.png';
+        const img = node.coverImage?.large || node.coverImage?.medium || '/public/assets/placeholder.svg';
         const title = node.title?.romaji || node.title?.english || node.title?.native || 'Unknown';
         const type = edge.relationType ? edge.relationType.replace(/_/g, ' ') : 'Related';
 
@@ -183,7 +215,8 @@ function renderRelations(edges) {
         `;
 
         el.onclick = () => {
-            const targetType = node.type === 'ANIME' ? 'anime' : 'book';
+            const imgUrl = node.coverImage?.medium || '';
+            const targetType = imgUrl.includes('/manga/') ? 'book' : 'anime';
             window.location.href = `/${targetType}/${node.id}`;
         };
 
@@ -311,6 +344,9 @@ async function loadChapters(targetProvider = null) {
             const source = extensionName || 'anilist';
             fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
             if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
+            if (manualExtensionBookId && targetProvider !== 'all') {
+                fetchUrl += `&extensionBookId=${manualExtensionBookId}`;
+            }
         }
 
         const res = await fetch(fetchUrl);
@@ -515,6 +551,8 @@ async function loadAvailableExtensions() {
 
 function setupProviderFilter() {
     const select = document.getElementById('provider-filter');
+    const manualBtn = document.getElementById('manual-match-btn'); // NUEVO
+
     if (!select) return;
     select.style.display = 'inline-block';
     select.innerHTML = '';
@@ -538,11 +576,32 @@ function setupProviderFilter() {
         select.appendChild(opt);
     });
 
+    // Lógica de selección inicial
     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);
+    // Visibilidad inicial del botón manual
+    updateManualButtonVisibility(select.value);
+
+    select.onchange = () => {
+        // Al cambiar de proveedor, reseteamos la selección manual para evitar conflictos
+        manualExtensionBookId = null;
+        updateManualButtonVisibility(select.value);
+        loadChapters(select.value);
+    };
+}
+
+function updateManualButtonVisibility(provider) {
+    const btn = document.getElementById('manual-match-btn');
+    if (!btn) return;
+
+    // Solo mostrar si es un proveedor específico (no 'all' ni 'local')
+    if (provider !== 'all' && provider !== 'local') {
+        btn.style.display = 'flex';
+    } else {
+        btn.style.display = 'none';
+    }
 }
 
 function updateExtensionPill() {
@@ -569,9 +628,9 @@ function updateCustomAddButton() {
 }
 
 function setupModalClickOutside() {
-    const modal = document.getElementById('add-list-modal');
+    const addListModal = document.getElementById('add-list-modal');
-    if (modal) {
+    if (addListModal) {
-        modal.addEventListener('click', (e) => {
+        addListModal.addEventListener('click', (e) => {
             if (e.target.id === 'add-list-modal') ListModalManager.close();
         });
     }

desktop/src/scripts/books/reader.js

@@ -1,7 +1,7 @@
 const urlParams = new URLSearchParams(window.location.search);
 const reader = document.getElementById('reader');
 const panel = document.getElementById('settings-panel');
-const overlay = document.getElementById('overlay');
+const overlay2 = document.getElementById('overlay');
 const settingsBtn = document.getElementById('settings-btn');
 const closePanel = document.getElementById('close-panel');
 const chapterLabel = document.getElementById('chapter-label');
@@ -47,7 +47,7 @@ let observer = null;
 // === CAMBIO: Parseo de URL para obtener ID ===
 const parts = window.location.pathname.split('/');
 const bookId = parts[4];
-let currentChapterId = parts[3]; // Ahora es un ID (string)
+let currentChapterId = decodeURIComponent(parts[3]);
 let provider = parts[2];
 let chaptersList = []; // Buffer para guardar el orden de capítulos
 
@@ -181,8 +181,8 @@ async function loadChapter() {
         );
 
         if (chapterMeta) {
-            chapterLabel.textContent = `Chapter ${chapterMeta.number} - ${chapterMeta.title}`;
+            chapterLabel.textContent = `Chapter ${chapterMeta.number}`;
-            document.title = `Chapter ${chapterMeta.number} - ${chapterMeta.title}`;
+            document.title = `Chapter ${chapterMeta.number}`;
         }
 
         // Lógica específica para contenido LOCAL
@@ -665,14 +665,14 @@ document.getElementById('back-btn').addEventListener('click', () => {
 // Panel de configuración
 settingsBtn.addEventListener('click', () => {
     panel.classList.add('open');
-    overlay.classList.add('active');
+    overlay2.classList.add('active');
 });
 closePanel.addEventListener('click', closeSettings);
-overlay.addEventListener('click', closeSettings);
+overlay2.addEventListener('click', closeSettings);
 
 function closeSettings() {
     panel.classList.remove('open');
-    overlay.classList.remove('active');
+    overlay2.classList.remove('active');
 }
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && panel.classList.contains('open')) {

desktop/src/scripts/gallery/gallery.js

@@ -1,5 +1,5 @@
 const providerSelector = document.getElementById('provider-selector');
-const searchInput = document.getElementById('search-input');
+const searchInput2 = document.getElementById('search-input');
 const resultsContainer = document.getElementById('gallery-results');
 
 let currentPage = 1;
@@ -231,7 +231,7 @@ function showSkeletons(count, append = false) {
 async function searchGallery(isLoadMore = false) {
     if (isLoading) return;
 
-    const query = searchInput.value.trim();
+    const query = searchInput2.value.trim();
     const provider = providerSelector.value;
     const page = isLoadMore ? currentPage + 1 : 1;
 
@@ -351,22 +351,22 @@ async function loadExtensions() {
 
 providerSelector.addEventListener('change', () => {
     if (providerSelector.value === 'favorites') {
-        searchInput.placeholder = "Search in favorites...";
+        searchInput2.placeholder = "Search in favorites...";
     } else {
-        searchInput.placeholder = "Search in gallery...";
+        searchInput2.placeholder = "Search in gallery...";
     }
     searchGallery(false);
 });
 
 let searchTimeout;
 
-searchInput.addEventListener('input', () => {
+searchInput2.addEventListener('input', () => {
     clearTimeout(searchTimeout);
     searchTimeout = setTimeout(() => {
         searchGallery(false);
     }, 500);
 });
-searchInput.addEventListener('keydown', e => {
+searchInput2.addEventListener('keydown', e => {
     if (e.key === 'Enter') {
         clearTimeout(searchTimeout);
         searchGallery(false);

desktop/src/scripts/marketplace.js

@@ -1,242 +1,314 @@
-const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
+const LS_KEY_MARKETPLACE_URL = 'wb_marketplace_url';
-const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
+const DEFAULT_URL_PLACEHOLDER = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
 const INSTALLED_EXTENSIONS_API = '/api/extensions';
 const UPDATE_EXTENSIONS_API = '/api/extensions/update';
 
-const marketplaceContent = document.getElementById('marketplace-content');
+// DOM Elements
-const filterSelect = document.getElementById('extension-filter');
+const dom = {
-const updateAllBtn = document.getElementById('btn-update-all');
+    content: document.getElementById('marketplace-content'),
+    configPanel: document.getElementById('config-panel'),
+    inputUrl: document.getElementById('source-url-input'),
 
-const modal = document.getElementById('customModal');
+    // Filters & Toggles
-const modalTitle = document.getElementById('modalTitle');
+    filterType: document.getElementById('filter-type'),
-const modalMessage = document.getElementById('modalMessage');
+    filterLang: document.getElementById('filter-lang'),
-const modalConfirmBtn = document.getElementById('modalConfirmButton');
+    btnNsfw: document.getElementById('btn-toggle-nsfw'),
-const modalCloseBtn = document.getElementById('modalCloseButton');
 
-let marketplaceMetadata = {};
+    // Buttons
-let installedExtensions = [];
+    btnConfig: document.getElementById('btn-configure'),
-let currentTab = 'marketplace';
+    btnSaveSource: document.getElementById('btn-save-source'),
+    btnResetSource: document.getElementById('btn-reset-source'),
+    btnUpdateAll: document.getElementById('btn-update-all'),
 
-async function loadMarketplace() {
+    // Tabs
-    showSkeletons();
+    tabs: document.querySelectorAll('.tab-btn'),
+
+    // Modal
+    modal: document.getElementById('customModal'),
+    modalTitle: document.getElementById('modalTitle'),
+    modalMsg: document.getElementById('modalMessage'),
+    modalConfirm: document.getElementById('modalConfirmButton'),
+    modalClose: document.getElementById('modalCloseButton')
+};
+
+// State
+let state = {
+    url: localStorage.getItem(LS_KEY_MARKETPLACE_URL) || null,
+    metadata: {},
+    installed: [],
+    currentTab: 'marketplace',
+    showNsfw: false // Default to HIDDEN
+};
+
+/* --- Initialization --- */
+async function init() {
+    setupEventListeners();
+
+    if (!state.url) {
+        renderWelcomeState();
+    } else {
+        await loadData();
+    }
+}
+
+function setupEventListeners() {
+    // Config Panel
+    dom.btnConfig.addEventListener('click', () => {
+        dom.configPanel.classList.toggle('hidden');
+        if(!dom.configPanel.classList.contains('hidden')) dom.inputUrl.focus();
+    });
+
+    dom.btnSaveSource.addEventListener('click', saveSource);
+    dom.btnResetSource.addEventListener('click', () => {
+        dom.inputUrl.value = DEFAULT_URL_PLACEHOLDER;
+        saveSource();
+    });
+
+    // Filters
+    dom.filterType.addEventListener('change', render);
+    dom.filterLang.addEventListener('change', render);
+
+    // NSFW Toggle
+    dom.btnNsfw.addEventListener('click', toggleNsfw);
+
+    // Tabs
+    dom.tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            dom.tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            state.currentTab = tab.dataset.tab;
+
+            if (state.currentTab === 'installed') dom.btnUpdateAll.classList.remove('hidden');
+            else dom.btnUpdateAll.classList.add('hidden');
+
+            render();
+        });
+    });
+
+    if(dom.btnUpdateAll) dom.btnUpdateAll.addEventListener('click', handleUpdateAll);
+
+    // Modal
+    dom.modalClose.addEventListener('click', hideModal);
+}
+
+/* --- Logic --- */
+function toggleNsfw() {
+    state.showNsfw = !state.showNsfw;
+
+    // Update Button UI
+    if (state.showNsfw) {
+        dom.btnNsfw.classList.add('btn-danger'); // Red for ALERT/NSFW
+        dom.btnNsfw.classList.remove('btn-secondary');
+        dom.btnNsfw.innerHTML = `
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+                <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> NSFW: ON
+        `;
+    } else {
+        dom.btnNsfw.classList.remove('btn-danger');
+        dom.btnNsfw.classList.add('btn-secondary');
+        dom.btnNsfw.innerHTML = `
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                <line x1="1" y1="1" x2="23" y2="23"></line>
+            </svg> NSFW: Off
+        `;
+    }
+
+    render();
+}
+
+function saveSource() {
+    const url = dom.inputUrl.value.trim();
+    if (!url) return window.NotificationUtils.error('Please enter a valid URL');
+    localStorage.setItem(LS_KEY_MARKETPLACE_URL, url);
+    state.url = url;
+    dom.configPanel.classList.add('hidden');
+    window.NotificationUtils.success('Source updated');
+    loadData();
+}
+
+async function loadData() {
+    renderLoading();
     try {
+        const proxyUrl = `/api/proxy?url=${encodeURIComponent(state.url)}`;
         const [metaRes, installedRes] = await Promise.all([
-            fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
+            fetch(proxyUrl).then(r => r.ok ? r.json() : null),
-            fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
+            fetch(INSTALLED_EXTENSIONS_API).then(r => r.json())
         ]);
 
-        marketplaceMetadata = metaRes.extensions;
+        if (!metaRes) throw new Error('Failed to fetch marketplace JSON');
-        installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
 
-        initTabs();
+        state.metadata = metaRes.extensions || {};
-        renderGroupedView();
+        state.installed = (installedRes.extensions || []).map(e => e.toLowerCase());
 
-        if (filterSelect) {
+        render();
-            filterSelect.addEventListener('change', () => renderGroupedView());
-        }
-
-        if (updateAllBtn) {
-            updateAllBtn.onclick = handleUpdateAll;
-        }
     } catch (error) {
-        console.error('Error loading marketplace:', error);
+        console.error(error);
-        marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
+        renderError(error.message);
     }
 }
 
-function initTabs() {
+/* --- Rendering --- */
-    const tabs = document.querySelectorAll('.tab-button');
+function render() {
-    tabs.forEach(tab => {
+    dom.content.innerHTML = '';
-        tab.onclick = () => {
+    const typeFilter = dom.filterType.value;
-            tabs.forEach(t => t.classList.remove('active'));
+    const langFilter = dom.filterLang.value;
-            tab.classList.add('active');
-            currentTab = tab.dataset.tab;
 
-            if (updateAllBtn) {
+    let items = [];
-                if (currentTab === 'installed') {
-                    updateAllBtn.classList.remove('hidden');
-                } else {
-                    updateAllBtn.classList.add('hidden');
-                }
-            }
 
-            renderGroupedView();
+    // 1. Prepare items
-        };
+    if (state.currentTab === 'marketplace') {
-    });
+        items = Object.entries(state.metadata).map(([id, data]) => ({
-}
+            id, ...data, isInstalled: state.installed.includes(id.toLowerCase())
-
+        }));
-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)) {
+        const metaItems = Object.entries(state.metadata)
-            if (installedExtensions.includes(id.toLowerCase())) {
+            .filter(([id]) => state.installed.includes(id.toLowerCase()))
-                listToRender.push({ id, ...data, isInstalled: true });
+            .map(([id, data]) => ({ id, ...data, isInstalled: true }));
-            }
-        }
 
-        installedExtensions.forEach(id => {
+        items = [...metaItems];
-            const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
+
-            if (!existsInMeta) {
+        state.installed.forEach(instId => {
-                listToRender.push({
+            if (!items.find(i => i.id.toLowerCase() === instId)) {
-                    id: id,
+                items.push({
-                    name: id.charAt(0).toUpperCase() + id.slice(1),
+                    id: instId,
+                    name: capitalize(instId),
                     type: 'Local',
-                    author: 'Unknown',
+                    description: 'Locally installed.',
-                    isInstalled: true
+                    author: '?',
+                    lang: 'Local',
+                    isInstalled: true,
+                    isLocal: true
                 });
             }
         });
     }
 
-    listToRender.forEach(ext => {
+    // 2. Filter
-        const type = ext.type || 'Other';
+    items = items.filter(item => {
-        if (activeFilter !== 'All' && type !== activeFilter) return;
+        // NSFW Filter logic
-        if (!groups[type]) groups[type] = [];
+        if (!state.showNsfw && item.nsfw) return false;
-        groups[type].push(ext);
+
+        // Type Filter
+        if (typeFilter !== 'All' && item.type !== typeFilter && item.type !== 'Local') return false;
+
+        // Lang Filter
+        if (langFilter !== 'All') {
+            const itemLang = (item.lang || 'en').toLowerCase();
+            // Si es image-board, ignoramos el filtro de idioma (ya que no tienen idioma)
+            // O podemos decidir que siempre pasen, o que solo pasen si el filtro es "All".
+            // Para simplificar: Si es image-board, pasa el filtro de idioma automáticamente.
+            if (item.type !== 'image-board' && itemLang !== 'multi' && itemLang !== langFilter.toLowerCase()) return false;
+        }
+        return true;
     });
 
-    const sortedTypes = Object.keys(groups).sort();
+    const grouped = groupBy(items, 'type');
+    const types = Object.keys(grouped).sort();
 
-    if (sortedTypes.length === 0) {
+    if (types.length === 0) return renderEmptyState();
-        marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
-        return;
-    }
 
-    sortedTypes.forEach(type => {
+    types.forEach(type => {
         const section = document.createElement('div');
-        section.className = 'category-group';
+        section.className = 'mp-section';
-
         const title = document.createElement('h2');
-        title.className = 'marketplace-section-title';
+        title.className = 'category-title';
-        title.innerText = type.replace('-', ' ');
+        title.innerText = formatType(type);
-
         const grid = document.createElement('div');
-        grid.className = 'marketplace-grid';
+        grid.className = 'mp-grid';
-
+        grouped[type].forEach(ext => grid.appendChild(createCard(ext)));
-        groups[type].forEach(ext => grid.appendChild(createCard(ext)));
-
         section.appendChild(title);
         section.appendChild(grid);
-        marketplaceContent.appendChild(section);
+        dom.content.appendChild(section);
     });
 }
 
 function createCard(ext) {
     const card = document.createElement('div');
-    card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;
+    card.className = `mp-card ${ext.nsfw ? 'card-nsfw' : ''}`;
 
-    const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`;
+    // Icon logic
+    const iconSrc = ext.icon || '/public/assets/waifuboards.ico';
+
+    // Button Logic
+    let btnClass = 'btn-primary';
+    let btnText = 'Install';
 
-    let buttonHtml = '';
     if (ext.isInstalled) {
-        buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
+        btnClass = 'btn-danger';
+        btnText = 'Uninstall';
     } else if (ext.broken) {
-        buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
+        btnClass = 'btn-secondary';
-    } else {
+        btnText = 'Broken';
-        buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
+    }
+
+    // Language Pill Logic
+    let langHtml = '';
+    // Solo mostramos lenguaje si NO es un image-board
+    if (ext.type !== 'image-board') {
+        const langCode = (ext.lang || 'EN').toLowerCase();
+        const langClass = `lang-${langCode}`;
+        const langLabel = langCode === 'multi' ? 'MULTI' : langCode.toUpperCase();
+        langHtml = `<span class="pill ${langClass}">${langLabel}</span>`;
     }
 
     card.innerHTML = `
-        <img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
+        <div class="card-header">
-        <div class="card-content-wrapper">
+            <img class="card-icon" src="${iconSrc}" loading="lazy" onerror="this.src='/public/assets/waifuboards.ico'">
-            <h3 class="extension-name">${ext.name}</h3>
+            <div class="card-info">
-            <span class="extension-author">by ${ext.author || 'Unknown'}</span>
+                <h3 class="card-title" title="${ext.name}">${ext.name}</h3>
-            <p class="extension-description">${ext.description || 'No description available.'}</p>
+                <span class="card-author">by ${ext.author || 'Unknown'}</span>
-            <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}
+        
+        <div class="card-meta">
+            ${langHtml}
+            ${ext.isInstalled ? '<span class="pill status-installed">INSTALLED</span>' : ''}
+            ${ext.nsfw ? '<span class="pill nsfw">NSFW</span>' : ''}
+        </div>
+
+        <p class="card-desc">${ext.description || 'No description provided.'}</p>
+        
+        <div class="card-actions">
+            <button class="btn-primary btn-card ${btnClass}" ${ext.broken && !ext.isInstalled ? 'disabled' : ''}>
+                ${btnText}
+            </button>
+        </div>
     `;
 
-    const btn = card.querySelector('.extension-action-button');
+    const btn = card.querySelector('button');
     if (!ext.broken || ext.isInstalled) {
-        btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
+        btn.onclick = () => ext.isInstalled ? confirmUninstall(ext) : installExtension(ext);
     }
 
     return card;
 }
 
-function showModal(title, message, showConfirm = false, onConfirm = null) {
+/* --- Actions & Helpers --- */
-    modalTitle.innerText = title;
+async function installExtension(ext) {
-    modalMessage.innerText = message;
+    if (!ext.entry) return window.NotificationUtils.error('Invalid extension entry point');
-    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 {
+        window.NotificationUtils.info(`Installing ${ext.name}...`);
         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());
+            window.NotificationUtils.success(`${ext.name} Installed!`);
-            renderGroupedView();
+            state.installed.push(ext.id.toLowerCase());
-            window.NotificationUtils.success(`${ext.name} installed!`);
+            render();
-        }
+        } else throw new Error('Install failed');
-    } catch (e) { window.NotificationUtils.error('Install failed.'); }
+    } catch (e) { window.NotificationUtils.error(`Failed to install ${ext.name}`); }
 }
 
-function promptUninstall(ext) {
+function confirmUninstall(ext) {
-    showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
+    showModal('Uninstall Extension', `Remove ${ext.name}?`, true, () => uninstallExtension(ext));
 }
 
-async function handleUninstall(ext) {
+async function uninstallExtension(ext) {
     try {
         const res = await fetch('/api/extensions/uninstall', {
             method: 'POST',
@@ -244,19 +316,53 @@ async function handleUninstall(ext) {
             body: JSON.stringify({ fileName: ext.id + '.js' })
         });
         if (res.ok) {
-            installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
+            state.installed = state.installed.filter(id => id !== ext.id.toLowerCase());
-            renderGroupedView();
+            window.NotificationUtils.success(`${ext.name} removed.`);
-            window.NotificationUtils.info(`${ext.name} uninstalled.`);
+            render();
         }
-    } catch (e) { window.NotificationUtils.error('Uninstall failed.'); }
+    } catch (e) { window.NotificationUtils.error('Uninstall failed'); }
 }
 
-function showSkeletons() {
+async function handleUpdateAll() {
-    marketplaceContent.innerHTML = `
+    const btn = dom.btnUpdateAll;
-        <div class="marketplace-grid">
+    const oldText = btn.innerHTML;
-            ${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
+    btn.disabled = true;
+    btn.innerHTML = 'Updating...';
+    try {
+        const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
+        const data = await res.json();
+        if (data.updated?.length) {
+            window.NotificationUtils.success(`Updated ${data.updated.length} extensions.`);
+            loadData();
+        } else window.NotificationUtils.info('All up to date.');
+    } catch (e) { window.NotificationUtils.error('Bulk update failed.'); }
+    finally { btn.disabled = false; btn.innerHTML = oldText; }
+}
+
+function renderWelcomeState() {
+    dom.content.innerHTML = `
+        <div class="empty-state">
+            <div style="font-size: 3rem; margin-bottom: 1rem;">🔌</div>
+            <h2>Configure Source</h2>
+            <p class="empty-text" style="max-width: 500px; margin: 0 auto 2rem;">Configure a source URL to start.</p>
+            <button class="btn-primary" onclick="document.getElementById('config-panel').classList.remove('hidden'); document.getElementById('source-url-input').focus();">Setup URL</button>
         </div>
     `;
 }
 
-document.addEventListener('DOMContentLoaded', loadMarketplace);
+function renderEmptyState() {
+    dom.content.innerHTML = `<div class="empty-state"><div style="font-size: 3rem;">🔍</div><p class="empty-text">No extensions found.</p></div>`;
+}
+function renderLoading() { dom.content.innerHTML = '<div class="empty-state"><p class="empty-text">Loading...</p></div>'; }
+function renderError(msg) { dom.content.innerHTML = `<div class="empty-state"><p class="empty-text" style="color:#f87171;">Error: ${msg}</p></div>`; }
+function showModal(title, msg, hasConfirm, onConfirm) {
+    dom.modalTitle.innerText = title; dom.modalMsg.innerText = msg; dom.modal.classList.remove('hidden');
+    if (hasConfirm) { dom.modalConfirm.classList.remove('hidden'); dom.modalConfirm.onclick = () => { hideModal(); if (onConfirm) onConfirm(); }; }
+    else dom.modalConfirm.classList.add('hidden');
+}
+function hideModal() { dom.modal.classList.add('hidden'); }
+function groupBy(arr, key) { return arr.reduce((acc, i) => ((acc[i[key] || 'Other'] = acc[i[key] || 'Other'] || []).push(i), acc), {}); }
+function capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1); }
+function formatType(t) { return t.replace(/-/g, ' ').toUpperCase(); }
+
+document.addEventListener('DOMContentLoaded', init);

desktop/src/scripts/profile.js

@@ -122,13 +122,16 @@ const DashboardApp = {
                     headerBadge.title = `Connected as ${data.anilistUserId}`;
                 }
                 if (statusEl) {
-                    statusEl.textContent = `Connected as ID: ${data.anilistUserId}`;
+                    // CAMBIO: Mostrar fecha de expiración si existe
-                    statusEl.style.color = 'var(--color-success)';
+                    const expiresDate = data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : 'Unknown';
+                    statusEl.innerHTML = `
+                        <span style="color:var(--color-success)">Connected as: <b>${data.anilistUserId}</b></span>
+                        <span style="display:block; font-size:0.75rem; color:#71717a">Expires: ${expiresDate}</span>
+                    `;
                 }
                 if (btn) {
                     btn.textContent = 'Disconnect';
                     btn.className = 'btn-stream-outline link-danger';
-
                     btn.onclick = () => this.disconnectAniList(userId);
                 }
             } else {
@@ -140,7 +143,7 @@ const DashboardApp = {
                 if (btn) {
                     btn.textContent = 'Connect';
                     btn.className = 'btn-stream-outline';
-                    btn.onclick = () => this.redirectToAniListLogin();
+                    btn.onclick = () => this.openAniListModal();
                 }
             }
         },
@@ -154,6 +157,83 @@ const DashboardApp = {
                 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'); }
         },
+        openAniListModal: function() {
+            const modal = document.getElementById('anilist-connect-modal');
+            const body = document.getElementById('anilist-modal-body');
+            const clientId = 32898; // Tu Client ID
+
+            // Generamos el HTML del modal dinámicamente
+            body.innerHTML = `
+                <p class="modal-description">Connect your AniList account to sync your progress automatically.</p>
+                
+                <div style="margin-bottom: 1.5rem;">
+                    <label style="display:block; font-size:0.85rem; font-weight:600; color:#a1a1aa; margin-bottom:0.5rem">Step 1: Get Token</label>
+                    <a href="https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token" 
+                       target="_blank" 
+                       class="btn-blur" 
+                       style="width:100%; text-align:center; box-sizing:border-box; display:block;">
+                       Open AniList Login ↗
+                    </a>
+                </div>
+
+                <div class="input-group">
+                    <label>Step 2: Paste Token</label>
+                    <input type="text" id="manual-anilist-token" class="stream-input" placeholder="Paste the long access token here..." autocomplete="off">
+                </div>
+
+                <div class="modal-footer" style="padding:0; background:transparent;">
+                    <button class="btn-primary" style="width:100%" onclick="DashboardApp.User.submitAniListToken()">Verify & Connect</button>
+                </div>
+            `;
+
+            modal.classList.remove('hidden');
+        },
+
+        closeAniListModal: function() {
+            document.getElementById('anilist-connect-modal').classList.add('hidden');
+        },
+
+        submitAniListToken: async function() {
+            const tokenInput = document.getElementById('manual-anilist-token');
+            const token = tokenInput.value.trim();
+            const userId = DashboardApp.State.currentUserId;
+
+            if (!token) {
+                alert('Please paste the AniList token first');
+                return;
+            }
+
+            const confirmBtn = document.querySelector('#anilist-connect-modal .btn-primary');
+            const originalText = confirmBtn.textContent;
+            confirmBtn.textContent = "Verifying...";
+            confirmBtn.disabled = true;
+
+            try {
+                const res = await fetch(`${API_BASE}/anilist/store`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        userId: userId,
+                        accessToken: token
+                    })
+                });
+
+                const data = await res.json();
+
+                if (!res.ok) throw new Error(data.error || 'Failed to verify token');
+
+                this.closeAniListModal();
+                await this.checkIntegrations(userId);
+                alert('AniList connected successfully!');
+
+            } catch (err) {
+                console.error(err);
+                alert(err.message || 'Invalid Token');
+            } finally {
+                confirmBtn.textContent = originalText;
+                confirmBtn.disabled = false;
+            }
+        },
 
         disconnectAniList: async function(userId) {
             if(!confirm("Disconnect AniList?")) return;
@@ -387,6 +467,96 @@ const DashboardApp = {
     },
 
     Library: {
+        tempMatchContext: null,
+        pollInterval: null,
+        updateDownloadStatus: async function() {
+            try {
+                const res = await fetch(`${API_BASE}/library/downloads/status`, {
+                    headers: window.AuthUtils.getSimpleAuthHeaders()
+                });
+
+                if (!res.ok) return;
+
+                const data = await res.json();
+                this.renderDownloadMonitor(data);
+
+                // Si hay descargas completadas nuevas, podríamos recargar la lista de archivos
+                // (Opcional: lógica para detectar cambios y llamar a loadContent)
+
+            } catch (e) {
+                console.error("Error polling downloads:", e);
+            }
+        },
+
+        renderDownloadMonitor: function(data) {
+            const monitor = document.getElementById('downloads-monitor');
+            const listContainer = document.getElementById('downloads-list-container');
+            const activeCountEl = document.getElementById('dl-stat-active');
+
+            // Datos por defecto
+            const downloads = data.downloads || { list: [], active: 0, failed: 0 };
+
+            // Actualizar contadores cabecera
+            if(activeCountEl) activeCountEl.textContent = `${downloads.active} Active / ${downloads.list.length} Total`;
+
+            // Ocultar si vacío
+            if (downloads.list.length === 0) {
+                monitor.classList.add('hidden');
+                return;
+            }
+
+            monitor.classList.remove('hidden');
+
+            listContainer.innerHTML = downloads.list.map(item => {
+                const fileName = item.fileName || `Unknown_File_${item.unitNumber}`;
+                const folderName = item.folderName || 'Unsorted';
+                const status = item.status || 'pending';
+                const progress = item.progress || 0;
+                const speed = item.speed || '0 KB/s';
+
+                const isCompleted = status === 'completed';
+                const isFailed = status === 'failed';
+
+                let statusText = `${progress}%`;
+                if (isCompleted) statusText = 'Done';
+                if (isFailed) statusText = 'Failed';
+
+                const folderIcon = `<svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>`;
+
+                // ESTRUCTURA NUEVA: Más plana para permitir Flexbox horizontal
+                return `
+            <div class="dl-item compact">
+                <div class="dl-left-col">
+                    <div class="dl-filename" title="${fileName}">${fileName}</div>
+                    <div class="dl-folder" title="${folderName}">${folderIcon} ${folderName}</div>
+                </div>
+                
+                <div class="dl-right-col">
+                    <div class="dl-meta-info">
+                        <span class="dl-speed">${isCompleted ? '' : speed}</span>
+                        <span class="dl-status-text ${status}">${statusText}</span>
+                    </div>
+                    <div class="dl-progress-track">
+                        <div class="dl-progress-fill ${status}" style="width: ${progress}%"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+            }).join('');
+        },
+
+        startPolling: function() {
+            if (this.pollInterval) clearInterval(this.pollInterval);
+            this.updateDownloadStatus(); // Primera llamada inmediata
+            this.pollInterval = setInterval(() => this.updateDownloadStatus(), 2000); // Cada 2 segundos
+        },
+
+        stopPolling: function() {
+            if (this.pollInterval) {
+                clearInterval(this.pollInterval);
+                this.pollInterval = null;
+            }
+        },
         loadStats: async function() {
             const types = ['anime', 'manga', 'novels'];
             const elements = { 'anime': 'local-anime-count', 'manga': 'local-manga-count', 'novels': 'local-novel-count' };
@@ -446,7 +616,7 @@ const DashboardApp = {
                 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;
+                let title = isMatched ? (meta.title?.english || meta.title?.romaji) : entry.path;
                 if (!isMatched) title = title.replace(/\[.*?\]|\(.*?\)|\.mkv|\.mp4/g, '').trim();
 
                 const url = isMatched ? (type === 'anime' ? `/anime/${meta.id}` : `/book/${meta.id}`) : '#';
@@ -459,12 +629,12 @@ const DashboardApp = {
                         ${!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>
+                        <h3 class="item-title" title="${entry.path}">${title}</h3>
                         <div class="item-meta">
-                             <span class="meta-pill type-pill">${entry.files ? entry.files.length : 0} FILES</span>
+                             <span class="meta-pill type-pill">${entry.files} FILES</span>
                              ${isMatched ? '<span class="meta-pill status-pill">MATCHED</span>' : ''}
                         </div>
-                        <div class="folder-path-tooltip">${entry.folder_name}</div>
+                        <div class="folder-path-tooltip">${entry.path}</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>
@@ -505,16 +675,67 @@ const DashboardApp = {
         },
 
         openManualMatch: function(id, type) {
-            const newId = prompt("Enter AniList ID to force match:");
+            const item = DashboardApp.State.localLibraryData.find(x => x.id === id);
-            if (newId) {
+            const pathName = item ? item.path : 'Unknown path';
-                fetch(`${API_BASE}/library/${type}/${id}/match`, {
+
+            this.tempMatchContext = { id, type };
+
+            document.getElementById('manual-match-path').textContent = pathName;
+            document.getElementById('manual-match-id').value = '';
+
+            const modal = document.getElementById('manual-match-modal');
+            modal.classList.remove('hidden');
+
+            setTimeout(() => document.getElementById('manual-match-id').focus(), 100);
+        },
+
+        closeManualMatch: function() {
+            document.getElementById('manual-match-modal').classList.add('hidden');
+            this.tempMatchContext = null;
+        },
+
+        submitManualMatch: async function() {
+            if (!this.tempMatchContext) return;
+
+            const newId = document.getElementById('manual-match-id').value;
+            if (!newId) {
+                alert("Please enter a valid ID");
+                return;
+            }
+
+            const { id, type } = this.tempMatchContext;
+
+            const confirmBtn = document.querySelector('#manual-match-modal .btn-primary');
+            const originalText = confirmBtn.textContent;
+            confirmBtn.textContent = "Matching...";
+            confirmBtn.disabled = true;
+
+            try {
+                const res = await fetch(`${API_BASE}/library/${type}/${id}/match`, {
                     method: 'POST',
-                    headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
+                    headers: {
-                    body: JSON.stringify({ source: 'anilist', matched_id: parseInt(newId) })
+                        ...window.AuthUtils.getSimpleAuthHeaders(),
-                }).then(res => {
+                        'Content-Type': 'application/json'
-                    if(res.ok) { alert("Matched! Refreshing..."); this.loadContent(type); }
+                    },
-                    else { alert("Failed to match."); }
+                    body: JSON.stringify({
+                        source: 'anilist',
+                        matched_id: parseInt(newId)
+                    })
                 });
+
+                if(res.ok) {
+                    this.closeManualMatch();
+                    this.loadContent(type);
+                } else {
+                    const errData = await res.json();
+                    alert("Failed to match: " + (errData.error || "Unknown error"));
+                }
+            } catch (e) {
+                console.error(e);
+                alert("Connection error");
+            } finally {
+                confirmBtn.textContent = originalText;
+                confirmBtn.disabled = false;
             }
         },
 
@@ -532,6 +753,7 @@ const DashboardApp = {
 
             tabs.forEach(tab => {
                 tab.addEventListener('click', () => {
+                    // Gestión de clases activas
                     tabs.forEach(t => t.classList.remove('active'));
                     tab.classList.add('active');
 
@@ -541,9 +763,13 @@ const DashboardApp = {
                         if (sec.id === targetId) sec.classList.add('active');
                     });
 
+                    // Lógica específica por pestaña
                     if (tab.dataset.target === 'local') {
                         DashboardApp.Library.loadStats();
-                        DashboardApp.Library.loadContent('anime');
+                        DashboardApp.Library.loadContent(DashboardApp.State.currentLocalType || 'anime');
+                        DashboardApp.Library.startPolling(); // <--- INICIAR POLLING
+                    } else {
+                        DashboardApp.Library.stopPolling(); // <--- DETENER POLLING AL SALIR
                     }
                 });
             });

desktop/src/scripts/room-modal.js

@@ -0,0 +1,131 @@
+class CreateRoomModal {
+    constructor() {
+        this.modalId = 'cr-modal-overlay';
+        this.isRendered = false;
+        this.render(); // Crear el HTML en el DOM al instanciar
+    }
+
+    render() {
+        if (document.getElementById(this.modalId)) return;
+
+        const modalHtml = `
+            <div class="cr-modal-overlay" id="${this.modalId}">
+                <div class="cr-modal-content">
+                    <button class="cr-modal-close" id="cr-close">✕</button>
+                    <h2 class="cr-modal-title">Create Watch Party</h2>
+                    
+                    <form id="cr-form">
+                        <div class="cr-form-group">
+                            <label>Room Name</label>
+                            <input type="text" class="cr-input" name="name" placeholder="My Awesome Room" required maxlength="50" />
+                        </div>
+
+                        <div class="cr-form-group">
+                            <label>Password (Optional)</label>
+                            <input type="password" class="cr-input" name="password" placeholder="Leave empty for public" maxlength="50" />
+                        </div>
+                        
+                        <div class="cr-form-group cr-checkbox-group">
+                            <label class="cr-checkbox">
+                                <input type="checkbox" name="expose" />
+                                <span>Generate public link (via tunnel)</span>
+                            </label>
+                        </div>
+
+                        <div class="cr-actions">
+                            <button type="button" class="cr-btn-cancel" id="cr-cancel">Cancel</button>
+                            <button type="submit" class="cr-btn-confirm">Create Room</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        `;
+
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+        this.bindEvents();
+        this.isRendered = true;
+    }
+
+    bindEvents() {
+        const modal = document.getElementById(this.modalId);
+        const closeBtn = document.getElementById('cr-close');
+        const cancelBtn = document.getElementById('cr-cancel');
+        const form = document.getElementById('cr-form');
+
+        const close = () => this.close();
+
+        closeBtn.onclick = close;
+        cancelBtn.onclick = close;
+
+        // Cerrar si clicamos fuera del contenido
+        modal.onclick = (e) => {
+            if (e.target === modal) close();
+        };
+
+        form.onsubmit = (e) => this.handleSubmit(e);
+    }
+
+    open() {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            // Aquí puedes disparar tu modal de login o redirigir
+            alert('You must be logged in to create a room');
+            window.location.href = '/login'; // Opcional
+            return;
+        }
+
+        const modal = document.getElementById(this.modalId);
+        modal.classList.add('show');
+        document.querySelector('#cr-form input[name="name"]').focus();
+    }
+
+    close() {
+        const modal = document.getElementById(this.modalId);
+        modal.classList.remove('show');
+        document.getElementById('cr-form').reset();
+    }
+
+    async handleSubmit(e) {
+        e.preventDefault();
+        const btn = e.target.querySelector('button[type="submit"]');
+        const originalText = btn.textContent;
+
+        btn.disabled = true;
+        btn.textContent = 'Creating...';
+
+        const formData = new FormData(e.target);
+        const expose = formData.get('expose') === 'on';
+        const name = formData.get('name').trim();
+        const password = formData.get('password').trim();
+        const token = localStorage.getItem('token');
+
+        try {
+            const res = await fetch('/api/rooms', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({
+                    name,
+                    password: password || undefined,
+                    expose
+                })
+            });
+
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Failed to create room');
+
+            this.close();
+
+            window.location.href = `/room?id=${data.room.id}`
+        } catch (err) {
+            alert(err.message);
+        } finally {
+            btn.disabled = false;
+            btn.textContent = originalText;
+        }
+    }
+}
+
+window.CreateRoomModal = CreateRoomModal;

desktop/src/scripts/schedule/schedule.js

@@ -1,76 +1,373 @@
 const ANILIST_API = 'https://graphql.anilist.co';
-const CACHE_NAME = 'waifuboard-schedule-v1';
+const CACHE_NAME = 'waifuboard-schedule-v5';
-const CACHE_DURATION = 5 * 60 * 1000;
+
+const CACHE_DURATION = 6 * 60 * 60 * 1000;
 
 const state = {
     currentDate: new Date(),
     viewType: 'MONTH',
     mode: 'SUB',
+    filter: 'ALL',
     loading: false,
     abortController: null,
-    refreshInterval: null
+    userListIds: new Set(),
+    scheduleData: [],
+    selectedWeekDayIndex: 0
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
+    await fetchUserList();
     renderHeader();
     fetchSchedule();
 
-    state.refreshInterval = setInterval(() => {
+    if (state.userListIds.size > 0) {
-        console.log("Auto-refreshing schedule...");
+        const filterGroup = document.getElementById('filter-group');
-        fetchSchedule(true);
+        if (filterGroup) filterGroup.style.display = 'flex';
-    }, CACHE_DURATION);
+    }
 });
 
-async function getCache(key) {
+async function fetchUserList() {
+    const token = localStorage.getItem('token');
+    if (!token) return;
+
     try {
-        const cache = await caches.open(CACHE_NAME);
+        const res = await fetch('http://localhost:54322/api/list', {
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Accept': 'application/json'
+            }
+        });
 
-        const response = await cache.match(`/schedule-cache/${key}`);
+        if (res.ok) {
+            const json = await res.json();
+            if (json.results && Array.isArray(json.results)) {
+                state.userListIds.clear();
+                json.results.forEach(item => {
 
-        if (!response) return null;
+                    if (item.source === 'anilist') {
-
+                        state.userListIds.add(item.entry_id);
-        const cached = await response.json();
+                    }
-        const age = Date.now() - cached.timestamp;
+                });
-
+                console.log(`[UserList] Loaded ${state.userListIds.size} entries.`);
-        if (age < CACHE_DURATION) {
+            }
-            console.log(`[Cache Hit] Loaded ${key} (Age: ${Math.round(age / 1000)}s)`);
-            return cached.data;
         }
-
-        console.log(`[Cache Stale] ${key} expired.`);
-
-        cache.delete(`/schedule-cache/${key}`);
-        return null;
     } catch (e) {
-        console.error("Cache read failed", e);
+        console.warn("[UserList] Could not fetch user list:", e);
-        return null;
     }
 }
 
-async function setCache(key, data) {
+async function fetchSchedule(forceRefresh = false) {
-    try {
+    const key = getCacheKey();
-        const cache = await caches.open(CACHE_NAME);
-        const payload = JSON.stringify({
-            timestamp: Date.now(),
-            data: data
-        });
 
-        const response = new Response(payload, {
+    if (!forceRefresh) {
-            headers: { 'Content-Type': 'application/json' }
+        const cachedData = await getCache(key);
-        });
+        if (cachedData) {
-        await cache.put(`/schedule-cache/${key}`, response);
+            console.log(`[Schedule] Using cached data for key: ${key}`);
-    } catch (e) {
+            state.scheduleData = cachedData;
-        console.warn("Cache write failed", e);
+            renderContent();
+            updateAmbient(cachedData);
+            return;
+
+        }
     }
-}
 
-function getCacheKey() {
+    if (state.abortController) state.abortController.abort();
+    state.abortController = new AbortController();
+    const signal = state.abortController.signal;
+
+    setLoading(true);
+
+    let startObj, endObj;
+
     if (state.viewType === 'MONTH') {
-        return `M_${state.currentDate.getFullYear()}_${state.currentDate.getMonth()}`;
+        const year = state.currentDate.getFullYear();
+        const month = state.currentDate.getMonth();
+        startObj = new Date(year, month, 1, 0, 0, 0, 0);
+        endObj = new Date(year, month + 1, 0, 23, 59, 59, 999);
     } else {
         const start = getWeekStart(state.currentDate);
-        return `W_${start.toISOString().split('T')[0]}`;
+
+        startObj = new Date(start);
+
+        endObj = new Date(startObj);
+        endObj.setDate(endObj.getDate() + 7);
+        endObj.setHours(23, 59, 59, 999);
     }
+
+    const startTs = Math.floor(startObj.getTime() / 1000);
+    const endTs = Math.floor(endObj.getTime() / 1000);
+
+    const query = `
+        query ($start: Int, $end: Int, $page: Int) {
+            Page(page: $page, perPage: 50) {
+                pageInfo { hasNextPage }
+                airingSchedules(airingAt_greater: $start, airingAt_lesser: $end, sort: TIME) {
+                    airingAt
+                    episode
+                    media {
+                        id
+                        title { userPreferred english }
+                        coverImage { large extraLarge }
+                        bannerImage
+                        isAdult
+                        countryOfOrigin
+                        format
+                        duration
+                        popularity
+                    }
+                }
+            }
+        }
+    `;
+
+    let allData = [];
+    let page = 1;
+    let hasNext = true;
+
+    try {
+        while (hasNext && page <= 10) {
+            if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+
+            const res = await fetch(ANILIST_API, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+                body: JSON.stringify({ query, variables: { start: startTs, end: endTs, page } }),
+                signal: signal
+            });
+
+            if (res.status === 429) {
+                await delay(2000);
+                continue;
+            }
+
+            const json = await res.json();
+            if (json.errors) throw new Error("API Error");
+
+            const data = json.data.Page;
+            allData = [...allData, ...data.airingSchedules];
+            hasNext = data.pageInfo.hasNextPage;
+            page++;
+            await delay(200);
+        }
+
+        if (!signal.aborted) {
+            state.scheduleData = allData;
+            await setCache(key, allData);
+
+            renderContent();
+            updateAmbient(allData);
+        }
+
+    } catch (e) {
+        if (e.name !== 'AbortError') console.error("Fetch failed:", e);
+    } finally {
+        if (!signal.aborted) {
+            setLoading(false);
+            state.abortController = null;
+        }
+    }
+}
+
+function renderContent() {
+
+    let items = state.scheduleData.filter(i =>
+        !i.media.isAdult &&
+        i.media.countryOfOrigin === 'JP'
+
+    );
+
+    if (state.mode === 'DUB') {
+        items = items.filter(i => i.media.popularity > 20000);
+    }
+
+    if (state.filter === 'MY_LIST') {
+        items = items.filter(i => state.userListIds.has(i.media.id));
+    }
+
+    const container = document.getElementById('schedule-content');
+    if (!container) return;
+
+    container.innerHTML = '';
+
+    if (state.viewType === 'MONTH') {
+        renderMonthView(container, items);
+    } else {
+        renderWeekView(container, items);
+    }
+}
+
+function renderMonthView(container, items) {
+    const grid = document.createElement('div');
+    grid.className = 'calendar-grid';
+
+    const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+    days.forEach(d => {
+        const h = document.createElement('div');
+        h.className = 'weekday-header';
+        h.textContent = d;
+        grid.appendChild(h);
+    });
+
+    const year = state.currentDate.getFullYear();
+    const month = state.currentDate.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+    let firstDayIndex = new Date(year, month, 1).getDay() - 1;
+    if (firstDayIndex === -1) firstDayIndex = 6;
+
+    for (let i = 0; i < firstDayIndex; i++) {
+        const empty = document.createElement('div');
+        empty.className = 'day-cell empty';
+        grid.appendChild(empty);
+    }
+
+    for (let day = 1; day <= daysInMonth; day++) {
+        const cell = document.createElement('div');
+        cell.className = 'day-cell';
+
+        const currentCellDate = new Date(year, month, day);
+        const now = new Date();
+
+        if (isSameDay(currentCellDate, now)) {
+            cell.classList.add('today');
+        }
+
+        cell.innerHTML = `<span class="day-number">${day}</span>`;
+
+        const dayEvents = items.filter(i => {
+            const releaseDate = new Date(i.airingAt * 1000);
+            return isSameDay(currentCellDate, releaseDate);
+        });
+
+        dayEvents.sort((a, b) => b.media.popularity - a.media.popularity);
+
+        dayEvents.forEach(evt => {
+            const title = evt.media.title.english || evt.media.title.userPreferred;
+            const ep = evt.episode;
+            const time = new Date(evt.airingAt * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+            const isMine = state.userListIds.has(evt.media.id);
+
+            const el = document.createElement('a');
+            el.className = `anime-item-month ${isMine ? 'is-mine' : ''}`;
+            el.href = `/anime/${evt.media.id}`;
+            el.innerHTML = `
+                <span class="item-time">${time}</span>
+                <span class="item-title">
+                    ${title} <span class="ep-badge">EP ${ep}</span>
+                </span>
+            `;
+
+            cell.appendChild(el);
+        });
+
+        grid.appendChild(cell);
+    }
+
+    container.appendChild(grid);
+}
+
+function renderWeekView(container, items) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'week-container';
+
+    const nav = document.createElement('div');
+    nav.className = 'week-nav';
+
+    const startOfWeek = getWeekStart(state.currentDate);
+    const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+    for (let i = 0; i < 7; i++) {
+        const d = new Date(startOfWeek);
+        d.setDate(startOfWeek.getDate() + i);
+
+        const btn = document.createElement('button');
+        btn.className = `day-btn ${i === state.selectedWeekDayIndex ? 'active' : ''}`;
+
+        btn.onclick = () => {
+            state.selectedWeekDayIndex = i;
+            renderWeekCards(d, items);
+
+            document.querySelectorAll('.day-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+        };
+
+        btn.innerHTML = `
+            <span class="name">${dayNames[i]}</span>
+            <span class="date">${d.getDate()}</span>
+        `;
+        nav.appendChild(btn);
+    }
+    wrapper.appendChild(nav);
+
+    const grid = document.createElement('div');
+    grid.className = 'week-grid';
+    grid.id = 'weekGrid';
+    wrapper.appendChild(grid);
+
+    container.appendChild(wrapper);
+
+    const selectedDate = new Date(startOfWeek);
+    selectedDate.setDate(selectedDate.getDate() + state.selectedWeekDayIndex);
+    renderWeekCards(selectedDate, items);
+}
+
+function renderWeekCards(targetDate, allItems) {
+    const grid = document.getElementById('weekGrid');
+    if (!grid) return;
+    grid.innerHTML = '';
+
+    const dayItems = allItems.filter(i => {
+        const releaseDate = new Date(i.airingAt * 1000);
+        return isSameDay(targetDate, releaseDate);
+    });
+
+    dayItems.sort((a, b) => b.media.popularity - a.media.popularity);
+
+    if (dayItems.length === 0) {
+        grid.innerHTML = `
+            <div style="grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem; opacity: 0.5;">
+                <p style="margin-top: 1rem; font-size: 1.2rem; font-weight: 500;">No releases found for this day</p>
+            </div>`;
+        return;
+    }
+
+    dayItems.forEach(evt => {
+        const m = evt.media;
+        const title = m.title.english || m.title.userPreferred;
+        const time = new Date(evt.airingAt * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+
+        const card = document.createElement('div');
+        card.className = `card`;
+        card.onclick = () => window.location.href = `/anime/${m.id}`;
+
+        card.innerHTML = `
+            <div class="card-img-wrap">
+                <img src="${m.coverImage.large}" alt="${title}" loading="lazy">
+                <div class="card-ep-badge">EP ${evt.episode} • ${time}</div>
+            </div>
+            <div class="card-content">
+                <h3>${title}</h3>
+                <p>${m.format || 'TV'}</p>
+            </div>
+        `;
+        grid.appendChild(card);
+    });
+}
+
+function isSameDay(d1, d2) {
+    return d1.getFullYear() === d2.getFullYear() &&
+        d1.getMonth() === d2.getMonth() &&
+        d1.getDate() === d2.getDate();
+}
+
+function getWeekStart(d) {
+    const date = new Date(d);
+    date.setHours(0, 0, 0, 0);
+
+    const day = date.getDay();
+    const diff = date.getDate() - day + (day === 0 ? -6 : 1);
+    date.setDate(diff);
+    return date;
 }
 
 function navigate(delta) {
@@ -93,10 +390,19 @@ function setViewType(type) {
     document.getElementById('btnViewMonth').classList.toggle('active', type === 'MONTH');
     document.getElementById('btnViewWeek').classList.toggle('active', type === 'WEEK');
 
-    if (state.abortController) state.abortController.abort();
+    state.selectedWeekDayIndex = new Date().getDay() - 1;
+    if (state.selectedWeekDayIndex === -1) state.selectedWeekDayIndex = 6;
 
     renderHeader();
-    fetchSchedule();
+
+    if (state.scheduleData.length) {
+        renderContent();
+
+    } else {
+        fetchSchedule();
+
+    }
+
 }
 
 function setMode(mode) {
@@ -104,8 +410,18 @@ function setMode(mode) {
     state.mode = mode;
     document.getElementById('btnSub').classList.toggle('active', mode === 'SUB');
     document.getElementById('btnDub').classList.toggle('active', mode === 'DUB');
+    renderContent();
 
-    fetchSchedule();
+}
+
+function setFilter(filterType) {
+    if (state.filter === filterType) return;
+    state.filter = filterType;
+
+    document.getElementById('btnAll').classList.toggle('active', filterType === 'ALL');
+    document.getElementById('btnMyList').classList.toggle('active', filterType === 'MY_LIST');
+
+    renderContent();
 }
 
 function renderHeader() {
@@ -119,242 +435,86 @@ function renderHeader() {
 
         const startStr = start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
         const endStr = end.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-        title = `Week of ${startStr} - ${endStr}`;
+        title = `${startStr} - ${endStr}`;
     }
 
-    document.getElementById('monthTitle').textContent = title;
+    const titleEl = document.getElementById('monthTitle');
-}
+    if (titleEl) titleEl.textContent = title;
-
-function getWeekStart(date) {
-    const d = new Date(date);
-    const day = d.getDay();
-    const diff = d.getDate() - day + (day === 0 ? -6 : 1);
-    return new Date(d.setDate(diff));
-}
-
-async function fetchSchedule(forceRefresh = false) {
-    const key = getCacheKey();
-
-    if (!forceRefresh) {
-        const cachedData = await getCache(key);
-        if (cachedData) {
-            renderGrid(cachedData);
-            updateAmbient(cachedData);
-            return;
-        }
-    }
-
-    if (state.abortController) state.abortController.abort();
-    state.abortController = new AbortController();
-    const signal = state.abortController.signal;
-
-    if (!forceRefresh) setLoading(true);
-
-    let startTs, endTs;
-    if (state.viewType === 'MONTH') {
-        const year = state.currentDate.getFullYear();
-        const month = state.currentDate.getMonth();
-        startTs = Math.floor(new Date(year, month, 1).getTime() / 1000);
-        endTs = Math.floor(new Date(year, month + 1, 0, 23, 59, 59).getTime() / 1000);
-    } else {
-        const start = getWeekStart(state.currentDate);
-        start.setHours(0, 0, 0, 0);
-        const end = new Date(start);
-        end.setDate(end.getDate() + 7);
-        startTs = Math.floor(start.getTime() / 1000);
-        endTs = Math.floor(end.getTime() / 1000);
-    }
-
-    const query = `
-                query ($start: Int, $end: Int, $page: Int) {
-                    Page(page: $page, perPage: 50) {
-                        pageInfo { hasNextPage }
-                        airingSchedules(airingAt_greater: $start, airingAt_lesser: $end, sort: TIME) {
-                            airingAt
-                            episode
-                            media {
-                                id
-                                title { userPreferred english }
-                                coverImage { large }
-                                bannerImage
-                                isAdult
-                                countryOfOrigin
-                                popularity
-                            }
-                        }
-                    }
-                }
-            `;
-
-    let allData = [];
-    let page = 1;
-    let hasNext = true;
-    let retries = 0;
-
-    try {
-        while (hasNext && page <= 6) {
-            if (signal.aborted) throw new DOMException("Aborted", "AbortError");
-
-            try {
-                const res = await fetch(ANILIST_API, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
-                    body: JSON.stringify({
-                        query,
-                        variables: { start: startTs, end: endTs, page }
-                    }),
-                    signal: signal
-                });
-
-                if (res.status === 429) {
-                    if (retries > 2) throw new Error("Rate Limited");
-                    console.warn("429 Hit. Waiting...");
-                    await delay(4000);
-                    retries++;
-                    continue;
-                }
-
-                const json = await res.json();
-                if (json.errors) throw new Error("API Error");
-
-                const data = json.data.Page;
-                allData = [...allData, ...data.airingSchedules];
-                hasNext = data.pageInfo.hasNextPage;
-                page++;
-
-                await delay(600);
-
-            } catch (e) {
-                if (e.name === 'AbortError') throw e;
-                console.error(e);
-                break;
-            }
-        }
-
-        if (!signal.aborted) {
-
-            await setCache(key, allData);
-            renderGrid(allData);
-            updateAmbient(allData);
-        }
-
-    } catch (e) {
-        if (e.name !== 'AbortError') console.error("Fetch failed:", e);
-    } finally {
-        if (!signal.aborted) {
-            setLoading(false);
-            state.abortController = null;
-        }
-    }
-}
-
-function renderGrid(data) {
-    const grid = document.getElementById('daysGrid');
-    grid.innerHTML = '';
-
-    let items = data.filter(i => !i.media.isAdult && i.media.countryOfOrigin === 'JP');
-    if (state.mode === 'DUB') {
-        items = items.filter(i => i.media.popularity > 20000);
-    }
-
-    if (state.viewType === 'MONTH') {
-        const year = state.currentDate.getFullYear();
-        const month = state.currentDate.getMonth();
-        const daysInMonth = new Date(year, month + 1, 0).getDate();
-        let firstDayIndex = new Date(year, month, 1).getDay() - 1;
-        if (firstDayIndex === -1) firstDayIndex = 6;
-
-        for (let i = 0; i < firstDayIndex; i++) {
-            const empty = document.createElement('div');
-            empty.className = 'day-cell empty';
-            grid.appendChild(empty);
-        }
-
-        for (let day = 1; day <= daysInMonth; day++) {
-            const dateObj = new Date(year, month, day);
-            renderDayCell(dateObj, items, grid);
-        }
-    } else {
-        const start = getWeekStart(state.currentDate);
-        for (let i = 0; i < 7; i++) {
-            const dateObj = new Date(start);
-            dateObj.setDate(start.getDate() + i);
-            renderDayCell(dateObj, items, grid);
-        }
-    }
-}
-
-function renderDayCell(dateObj, items, grid) {
-    const cell = document.createElement('div');
-    cell.className = 'day-cell';
-
-    if (state.viewType === 'WEEK') cell.style.minHeight = '300px';
-
-    const day = dateObj.getDate();
-    const month = dateObj.getMonth();
-    const year = dateObj.getFullYear();
-
-    const now = new Date();
-    if (day === now.getDate() && month === now.getMonth() && year === now.getFullYear()) {
-        cell.classList.add('today');
-    }
-
-    const dayEvents = items.filter(i => {
-        const eventDate = new Date(i.airingAt * 1000);
-        return eventDate.getDate() === day && eventDate.getMonth() === month && eventDate.getFullYear() === year;
-    });
-
-    dayEvents.sort((a, b) => b.media.popularity - a.media.popularity);
-
-    if (dayEvents.length > 0) {
-        const top = dayEvents[0].media;
-        const bg = document.createElement('div');
-        bg.className = 'cell-backdrop';
-        bg.style.backgroundImage = `url('${top.coverImage.large}')`;
-        cell.appendChild(bg);
-    }
-
-    const header = document.createElement('div');
-    header.className = 'day-header';
-    header.innerHTML = `
-                <span class="day-number">${day}</span>
-                <span class="today-label">Today</span>
-            `;
-    cell.appendChild(header);
-
-    const list = document.createElement('div');
-    list.className = 'events-list';
-
-    dayEvents.forEach(evt => {
-        const title = evt.media.title.english || evt.media.title.userPreferred;
-        const link = `/anime/${evt.media.id}`;
-
-        const chip = document.createElement('a');
-        chip.className = 'anime-chip';
-        chip.href = link;
-        chip.innerHTML = `
-                    <span class="chip-title">${title}</span>
-                    <span class="chip-ep">Ep ${evt.episode}</span>
-                `;
-        list.appendChild(chip);
-    });
-
-    cell.appendChild(list);
-    grid.appendChild(cell);
 }
 
 function setLoading(bool) {
     state.loading = bool;
     const loader = document.getElementById('loader');
-    if (bool) loader.classList.add('active');
+    if (loader) {
-    else loader.classList.remove('active');
+        if (bool) loader.classList.add('active');
+        else loader.classList.remove('active');
+    }
+}
+
+function updateAmbient(data) {
+    if (!data || !data.length) return;
+
+    const top = data.reduce((prev, curr) => (prev.media.popularity > curr.media.popularity) ? prev : curr, data[0]);
+
+    const img = top.media.bannerImage || top.media.coverImage.extraLarge;
+    const bgEl = document.getElementById('ambientBg');
+    if (bgEl && img) {
+        bgEl.style.backgroundImage = `url('${img}')`;
+    }
 }
 
 function delay(ms) { return new Promise(r => setTimeout(r, ms)); }
 
-function updateAmbient(data) {
+async function getCache(key) {
-    if (!data || !data.length) return;
+    try {
-    const top = data.reduce((prev, curr) => (prev.media.popularity > curr.media.popularity) ? prev : curr);
+        const cache = await caches.open(CACHE_NAME);
-    const img = top.media.bannerImage || top.media.coverImage.large;
+        const response = await cache.match(`/schedule-cache/${key}`);
-    if (img) document.getElementById('ambientBg').style.backgroundImage = `url('${img}')`;
+        if (!response) return null;
-}
+
+        const cached = await response.json();
+        const age = Date.now() - cached.timestamp;
+
+        if (age < CACHE_DURATION) {
+            console.log(`[Cache Hit] ${key}`);
+            return cached.data;
+        }
+        cache.delete(`/schedule-cache/${key}`);
+        return null;
+    } catch (e) {
+        return null;
+    }
+}
+
+function getCacheKey() {
+
+    let d;
+
+    if (state.viewType === 'MONTH') {
+        d = new Date(state.currentDate.getFullYear(), state.currentDate.getMonth(), 1);
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        return `M_${year}_${month}`;
+    } else {
+        d = getWeekStart(state.currentDate);
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        return `W_${year}_${month}_${day}`;
+    }
+}
+
+async function setCache(key, data) {
+    try {
+        const cache = await caches.open(CACHE_NAME);
+        const payload = JSON.stringify({ timestamp: Date.now(), data: data });
+        const response = new Response(payload, { headers: { 'Content-Type': 'application/json' } });
+        await cache.put(`/schedule-cache/${key}`, response);
+    } catch (e) {
+        console.warn("Cache write failed", e);
+    }
+}
+
+window.navigate = navigate;
+window.setViewType = setViewType;
+window.setMode = setMode;
+window.setFilter = setFilter;

desktop/src/scripts/search.js

@@ -0,0 +1,511 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // --- Constants ---
+    const GENRES = [
+        "Action", "Adventure", "Comedy", "Drama", "Ecchi", "Fantasy",
+        "Horror", "Mahou Shoujo", "Mecha", "Music", "Mystery",
+        "Psychological", "Romance", "Sci-Fi", "Slice of Life",
+        "Sports", "Supernatural", "Thriller"
+    ];
+
+    const FORMATS = {
+        anime: [
+            { val: 'TV', label: 'TV Show' },
+            { val: 'MOVIE', label: 'Movie' },
+            { val: 'OVA', label: 'OVA' },
+            { val: 'SPECIAL', label: 'Special' }
+        ],
+        books: [
+            { val: 'MANGA', label: 'Manga' },
+            { val: 'NOVEL', label: 'Light Novel' }
+        ]
+    };
+
+    // --- State ---
+    const state = {
+        mode: 'anime', // 'anime' | 'books'
+        source: 'anilist',
+        query: '',
+        // Filtros estáticos para Anilist
+        anilistFilters: {
+            year: '', season: '', status: '', format: '',
+            genre: '', sort: 'TRENDING_DESC'
+        },
+        // Filtros dinámicos para Extensiones
+        extensionFilters: {}, // Almacena los valores actuales de la extensión
+        isLoading: false
+    };
+
+    // --- DOM Elements ---
+    const els = {
+        sidebar: document.getElementById('sidebar'),
+        toggleBtn: document.getElementById('toggle-sidebar'),
+        overlay: document.getElementById('mobile-overlay'),
+        closeMobileBtn: document.getElementById('close-sidebar-mobile'),
+
+        input: document.getElementById('main-search'),
+        grid: document.getElementById('results-grid'),
+        title: document.getElementById('results-title'),
+        count: document.getElementById('result-count'),
+        loader: document.getElementById('search-loader'),
+
+        modeBtns: document.querySelectorAll('.mode-btn'),
+        sourceSelect: document.getElementById('source-select'),
+
+        // Paneles de Filtros
+        anilistPanel: document.getElementById('anilist-filters'),
+        extensionPanel: document.getElementById('extension-filters'),
+
+        // Inputs estáticos de Anilist
+        staticFilters: {
+            year: document.getElementById('filter-year'),
+            season: document.getElementById('filter-season'),
+            status: document.getElementById('filter-status'),
+            format: document.getElementById('filter-format'),
+            genre: document.getElementById('filter-genre'),
+            sort: document.getElementById('filter-sort')
+        }
+    };
+
+    // --- Init ---
+    init();
+
+    async function init() {
+        populateStaticSelects();
+        setupEvents();
+        // Carga inicial
+        await loadExtensionsForMode();
+        performSearch();
+    }
+
+    // --- Setup Helpers ---
+    function populateStaticSelects() {
+        GENRES.forEach(g => els.staticFilters.genre.add(new Option(g, g)));
+
+        const currentYear = new Date().getFullYear() + 1;
+        for (let i = currentYear; i >= 1970; i--) {
+            els.staticFilters.year.add(new Option(i, i));
+        }
+        updateFormatSelect();
+    }
+
+    function updateFormatSelect() {
+        const currentVal = els.staticFilters.format.value;
+        els.staticFilters.format.innerHTML = '<option value="">Any Format</option>';
+        const list = state.mode === 'anime' ? FORMATS.anime : FORMATS.books;
+        list.forEach(f => els.staticFilters.format.add(new Option(f.label, f.val)));
+
+        // Restaurar valor si existe en el nuevo modo
+        const exists = list.find(f => f.val === currentVal);
+        els.staticFilters.format.value = exists ? currentVal : "";
+        state.anilistFilters.format = els.staticFilters.format.value;
+    }
+
+    async function loadExtensionsForMode() {
+        const endpoint = state.mode === 'anime' ? '/api/extensions/anime' : '/api/extensions/book';
+        try {
+            const res = await fetch(endpoint);
+            const data = await res.json();
+            const extensions = data.extensions || [];
+            updateSourceDropdown(extensions);
+        } catch (e) {
+            console.error("Failed to load extensions", e);
+            updateSourceDropdown([]);
+        }
+    }
+
+    function updateSourceDropdown(extensions) {
+        // Guardar la selección actual si es posible
+        const currentSource = els.sourceSelect.value;
+
+        els.sourceSelect.innerHTML = `<option value="anilist">Anilist</option>`;
+        extensions.forEach(ext => els.sourceSelect.add(new Option(ext, ext)));
+
+        // Si la fuente actual existe en la nueva lista, mantenerla; si no, volver a anilist
+        if (extensions.includes(currentSource) || currentSource === 'anilist') {
+            els.sourceSelect.value = currentSource;
+        } else {
+            els.sourceSelect.value = 'anilist';
+            state.source = 'anilist';
+            handleSourceChange(); // Resetear UI
+        }
+    }
+
+    function setupEvents() {
+        const toggleSidebar = () => {
+            els.sidebar.classList.toggle('active');
+            els.overlay.classList.toggle('active');
+        };
+
+        els.toggleBtn.addEventListener('click', toggleSidebar);
+        els.overlay.addEventListener('click', toggleSidebar);
+        els.closeMobileBtn.addEventListener('click', toggleSidebar);
+
+        let debounce;
+        els.input.addEventListener('input', (e) => {
+            state.query = e.target.value.trim();
+            clearTimeout(debounce);
+            debounce = setTimeout(performSearch, 500);
+        });
+
+        // Cambio de Modo (Anime <-> Manga)
+        els.modeBtns.forEach(btn => {
+            btn.addEventListener('click', async () => {
+                if(btn.classList.contains('active')) return;
+                els.modeBtns.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+
+                state.mode = btn.dataset.mode;
+                updateFormatSelect();
+
+                // Recargar lista de extensiones para el nuevo modo
+                await loadExtensionsForMode();
+
+                // Forzar vuelta a anilist al cambiar de modo para evitar inconsistencias
+                state.source = 'anilist';
+                els.sourceSelect.value = 'anilist';
+                handleSourceChange();
+
+                performSearch();
+            });
+        });
+
+        // Cambio de Fuente (Anilist <-> Extensiones)
+        els.sourceSelect.addEventListener('change', (e) => {
+            state.source = e.target.value;
+            handleSourceChange();
+        });
+
+        // Eventos para filtros de Anilist
+        Object.entries(els.staticFilters).forEach(([key, element]) => {
+            element.addEventListener('change', (e) => {
+                state.anilistFilters[key] = e.target.value;
+                performSearch();
+            });
+        });
+    }
+
+    async function handleSourceChange() {
+        // Limpiar resultados al cambiar fuente
+        els.grid.innerHTML = '';
+        els.count.textContent = '';
+
+        if (state.source === 'anilist') {
+            els.anilistPanel.style.display = 'flex';
+            els.extensionPanel.style.display = 'none';
+            els.extensionPanel.innerHTML = ''; // Limpiar DOM
+            state.extensionFilters = {};
+            performSearch();
+        } else {
+            els.anilistPanel.style.display = 'none';
+            els.extensionPanel.style.display = 'flex';
+            await loadExtensionFilters(state.source);
+            performSearch();
+        }
+    }
+
+    // --- Extension Filters Logic ---
+
+    async function loadExtensionFilters(extensionName) {
+        els.extensionPanel.innerHTML = '<div class="spinner" style="width:20px;height:20px;border-width:2px;align-self:center;"></div>';
+        state.extensionFilters = {}; // Resetear filtros actuales
+
+        try {
+            const res = await fetch(`/api/extensions/${extensionName}/filters`);
+            const data = await res.json();
+
+            // Renderizar
+            els.extensionPanel.innerHTML = '';
+
+            // Data.filters puede ser un objeto (diccionario) o un array. Lo normalizamos.
+            let filters = [];
+            if (Array.isArray(data.filters)) {
+                filters = data.filters;
+            } else if (data.filters && typeof data.filters === 'object') {
+                // Si es objeto, convertimos values a array asegurando que la key esté dentro
+                filters = Object.entries(data.filters).map(([k, v]) => ({ ...v, key: k }));
+            }
+
+            if (filters.length === 0) {
+                els.extensionPanel.innerHTML = '<p style="color:var(--c-text-muted);font-size:0.8rem;text-align:center;">No filters available for this source.</p>';
+                return;
+            }
+
+            filters.forEach(filter => {
+                const filterEl = createDynamicFilter(filter);
+                els.extensionPanel.appendChild(filterEl);
+
+                // Set default if exists
+                if (filter.default !== undefined) {
+                    state.extensionFilters[filter.key] = filter.default;
+                }
+            });
+
+        } catch (e) {
+            console.error(e);
+            els.extensionPanel.innerHTML = '<p style="color:red;font-size:0.8rem;">Error loading filters.</p>';
+        }
+    }
+
+    function createDynamicFilter(filter) {
+        const container = document.createElement('div');
+        container.className = 'filter-group';
+
+        const label = document.createElement('label');
+        label.textContent = filter.label || filter.key;
+
+        const updateState = (val) => {
+            state.extensionFilters[filter.key] = val;
+            performSearch();
+        };
+
+        switch (filter.type) {
+            case 'select':
+                container.appendChild(label);
+                const wrapper = document.createElement('div');
+                wrapper.className = 'custom-select';
+                const sel = document.createElement('select');
+                sel.add(new Option('Any', ''));
+                (filter.options || []).forEach(opt => sel.add(new Option(opt.label, opt.value)));
+                sel.addEventListener('change', e => updateState(e.target.value));
+                wrapper.appendChild(sel);
+                container.appendChild(wrapper);
+                break;
+
+            case 'multiselect':
+                container.appendChild(label);
+
+                // Contenedor principal
+                const msContainer = document.createElement('div');
+                msContainer.className = 'multiselect-container';
+
+                // BUSCADOR: Solo si hay más de 8 opciones
+                if ((filter.options || []).length > 8) {
+                    const searchWrapper = document.createElement('div');
+                    searchWrapper.className = 'multiselect-search-wrapper';
+
+                    const searchInput = document.createElement('input');
+                    searchInput.type = 'text';
+                    searchInput.className = 'multiselect-search-input';
+                    searchInput.placeholder = 'Search...';
+
+                    // Filtrar opciones en tiempo real
+                    searchInput.addEventListener('input', (e) => {
+                        const term = e.target.value.toLowerCase();
+                        const items = groupWrapper.querySelectorAll('.checkbox-item');
+                        items.forEach(item => {
+                            const text = item.textContent.toLowerCase();
+                            item.style.display = text.includes(term) ? 'flex' : 'none';
+                        });
+                    });
+                    searchWrapper.appendChild(searchInput);
+                    msContainer.appendChild(searchWrapper);
+                }
+
+                // Lista Scrollable
+                const groupWrapper = document.createElement('div');
+                groupWrapper.className = 'multiselect-group';
+
+                const getCheckedValues = () => {
+                    return Array.from(groupWrapper.querySelectorAll('input:checked')).map(cb => cb.value);
+                };
+
+                (filter.options || []).forEach(opt => {
+                    const itemLabel = document.createElement('label');
+                    itemLabel.className = 'checkbox-item';
+
+                    const chk = document.createElement('input');
+                    chk.type = 'checkbox';
+                    chk.value = opt.value;
+
+                    // Restaurar estado si ya estaba seleccionado
+                    const currentVals = state.extensionFilters[filter.key] || [];
+                    if (Array.isArray(currentVals) && currentVals.includes(opt.value)) {
+                        chk.checked = true;
+                        itemLabel.classList.add('is-selected');
+                    }
+
+                    chk.addEventListener('change', (e) => {
+                        if(e.target.checked) itemLabel.classList.add('is-selected');
+                        else itemLabel.classList.remove('is-selected');
+                        updateState(getCheckedValues());
+                    });
+
+                    const spanText = document.createElement('span');
+                    spanText.textContent = opt.label;
+
+                    itemLabel.appendChild(chk);
+                    itemLabel.appendChild(spanText);
+                    groupWrapper.appendChild(itemLabel);
+                });
+
+                msContainer.appendChild(groupWrapper);
+                container.appendChild(msContainer);
+                break;
+
+            case 'checkbox':
+                const checkWrapper = document.createElement('div');
+                checkWrapper.className = 'checkbox-wrapper';
+                const checkLabel = document.createElement('span');
+                checkLabel.className = 'checkbox-label';
+                checkLabel.textContent = filter.label || filter.key;
+
+                const chk = document.createElement('input');
+                chk.type = 'checkbox';
+                chk.checked = !!filter.default;
+                chk.addEventListener('change', e => updateState(e.target.checked));
+
+                checkWrapper.appendChild(checkLabel);
+                checkWrapper.appendChild(chk);
+                container.appendChild(checkWrapper);
+                break;
+
+            case 'text':
+            case 'number':
+            case 'tags':
+                container.appendChild(label);
+                const inp = document.createElement('input');
+                inp.type = filter.type === 'number' ? 'number' : 'text';
+                inp.className = 'filter-input';
+
+                let timer;
+                inp.addEventListener('input', (e) => {
+                    clearTimeout(timer);
+                    timer = setTimeout(() => {
+                        let val = e.target.value;
+                        if (filter.type === 'tags') val = val.replace(/,\s+/g, ',');
+                        updateState(val);
+                    }, 600);
+                });
+                container.appendChild(inp);
+                if(filter.type === 'tags') {
+                    const hint = document.createElement('span');
+                    hint.className = 'input-hint';
+                    hint.textContent = 'e.g. action, comedy';
+                    container.appendChild(hint);
+                }
+                break;
+
+            default:
+                container.appendChild(label);
+                const defInp = document.createElement('input');
+                defInp.className = 'filter-input';
+                defInp.addEventListener('change', e => updateState(e.target.value));
+                container.appendChild(defInp);
+        }
+        return container;
+    }
+
+    // --- Search Logic ---
+    async function performSearch() {
+        state.isLoading = true;
+        els.loader.style.display = 'block';
+        els.grid.style.opacity = '0.5';
+
+        let url = '';
+
+        if (state.source === 'anilist') {
+            // Lógica existente de Anilist
+            const p = new URLSearchParams({
+                type: state.mode === 'anime' ? 'ANIME' : 'MANGA',
+                sort: state.anilistFilters.sort
+            });
+            if(state.query) p.append('q', state.query);
+            if(state.anilistFilters.year) p.append('year', state.anilistFilters.year);
+            if(state.anilistFilters.season) p.append('season', state.anilistFilters.season);
+            if(state.anilistFilters.genre) p.append('genre', state.anilistFilters.genre);
+            if(state.anilistFilters.status) p.append('status', state.anilistFilters.status);
+            if(state.anilistFilters.format) p.append('format', state.anilistFilters.format);
+            url = `/api/search/advanced?${p}`;
+        } else {
+            // Lógica para Extensiones
+            // Endpoint: /api/search/{source} o /api/search/books/{source}
+            const basePath = state.mode === 'anime'
+                ? `/api/search/${state.source}`
+                : `/api/search/books/${state.source}`;
+
+            const p = new URLSearchParams();
+            if (state.query) p.append('q', state.query);
+
+            // Añadir filtros dinámicos a la URL
+            Object.entries(state.extensionFilters).forEach(([key, val]) => {
+                if (val === null || val === undefined || val === '') return;
+
+                if (Array.isArray(val)) {
+                    // Si es array (multiselect), unir por comas para el backend
+                    if (val.length > 0) p.append(key, val.join(','));
+                } else {
+                    p.append(key, val);
+                }
+            });
+
+            url = `${basePath}?${p.toString()}`;
+        }
+
+        try {
+            const res = await fetch(url);
+            if(!res.ok) throw new Error('Network err');
+            const data = await res.json();
+            render(data.results || []);
+        } catch(e) {
+            console.error(e);
+            els.grid.innerHTML = `<p style="grid-column:1/-1;text-align:center;">Error loading results from ${state.source}.</p>`;
+        } finally {
+            state.isLoading = false;
+            els.loader.style.display = 'none';
+            els.grid.style.opacity = '1';
+        }
+    }
+
+    function render(results) {
+        els.grid.innerHTML = '';
+        els.count.textContent = `${results.length} results`;
+
+        if(state.query) els.title.textContent = `Results for "${state.query}"`;
+        else if(state.source === 'anilist' && state.anilistFilters.sort === 'TRENDING_DESC') els.title.textContent = 'Trending Now';
+        else els.title.textContent = 'Explore';
+
+        if(results.length === 0) {
+            els.grid.innerHTML = `<p style="grid-column:1/-1;text-align:center;color:#666">No results found.</p>`;
+            return;
+        }
+
+        const fragment = document.createDocumentFragment();
+
+        results.forEach(item => {
+            const div = document.createElement('div');
+            div.className = 'card';
+
+            const title = item.title?.userPreferred || item.title?.english || item.title?.romaji || 'Unknown';
+            const img = item.coverImage?.large || item.coverImage || '/public/assets/placeholder.svg';
+            const year = item.year || item.startDate?.year || '';
+            const type = item.format || (state.mode === 'anime' ? 'TV' : 'MANGA');
+
+            // Construir URL: si es extensión, la URL incluye la fuente
+            const typePath = state.mode === 'anime' ? 'anime' : 'book';
+
+            let href;
+            if (state.source === 'anilist') {
+                href = `/${typePath}/${item.id}`;
+            } else {
+                // En resultados de extensiones, el ID puede necesitar codificación
+                // Además, pasamos explícitamente la fuente en la URL
+                href = `/${typePath}/${state.source}/${encodeURIComponent(item.id)}`;
+            }
+
+            div.innerHTML = `
+                <div class="card-img-wrap">
+                    <img src="${img}" alt="${title}" loading="lazy">
+                </div>
+                <div class="card-content">
+                    <h3>${title}</h3>
+                    <p>${year ? year + ' • ' : ''}${type}</p>
+                </div>
+            `;
+
+            div.addEventListener('click', () => window.location.href = href);
+            fragment.appendChild(div);
+        });
+
+        els.grid.appendChild(fragment);
+    }
+});

desktop/src/scripts/updateNotifier.js

@@ -1,6 +1,6 @@
 const Gitea_OWNER = "ItsSkaiya";
 const Gitea_REPO = "WaifuBoard";
-const CURRENT_VERSION = "v2.0.0-rc.2";
+const CURRENT_VERSION = "v2.0.0";
 const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
 
 let currentVersionDisplay;

desktop/src/scripts/users.js

@@ -838,8 +838,7 @@ function openAniListModal(userId) {
     modalUserActions.classList.remove('active');
     modalEditUser.classList.remove('active');
 
-    aniListContent.innerHTML = `<div style="text-align: center; padding: 2rem;">Loading integration status...</div>`;
+    // Estado de carga inicial
-
     modalAniList.innerHTML = `
         <div class="modal-overlay"></div>
         <div class="modal-content">
@@ -860,12 +859,15 @@ function openAniListModal(userId) {
 
     modalAniList.classList.add('active');
 
+    // Verificar si ya está conectado
     getIntegrationStatus(userId).then(integration => {
         const content = document.getElementById('aniListContent');
+        const clientId = 32898; // Tu Client ID de AniList
 
-        content.innerHTML = `
+        if (integration.connected) {
-            <div class="anilist-status">
+            // VISTA: YA CONECTADO
-                ${integration.connected ? `
+            content.innerHTML = `
+                <div class="anilist-status">
                     <div class="anilist-connected">
                         <div class="anilist-icon">
                             <img src="https://anilist.co/img/icons/icon.svg" alt="AniList" style="width:40px; height:40px;">
@@ -879,24 +881,43 @@ function openAniListModal(userId) {
                     <button class="btn-disconnect" onclick="handleDisconnectAniList()">
                         Disconnect AniList
                     </button>
-                ` : `
+                </div>
-                    <div style="text-align: center; padding: 1rem;">
+            `;
-                        <h3 style="margin-bottom: 0.5rem;">Connect with AniList</h3>
+        } else {
-                        <p style="color: var(--color-text-secondary); margin-bottom: 1.5rem;">
+            // VISTA: NO CONECTADO (Formulario Manual)
-                            Sync your anime list by logging in with AniList.
+            content.innerHTML = `
-                        </p>
+                <div class="anilist-status">
-                        <div style="display:flex; justify-content:center;">
+                    <div style="text-align: left; padding: 0.5rem;">
-                            <button class="btn-connect" onclick="redirectToAniListLogin()">
+                        <h3 style="margin-bottom: 1rem; font-size: 1.1rem;">How to connect:</h3>
-                                Login with AniList
+                        
-                            </button>
+                        <div style="margin-bottom: 1.5rem;">
+                            <p style="color: var(--color-text-secondary); margin-bottom: 0.5rem; font-size: 0.9rem;">
+                                1. Open the authorization page in a new tab:
+                            </p>
+                            <a href="https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token" 
+                               target="_blank" 
+                               class="btn-secondary" 
+                               style="display: inline-block; text-decoration: none; text-align: center; width: 100%; padding: 0.8rem;">
+                                Open AniList Login ↗
+                            </a>
                         </div>
-                        <p style="font-size:0.85rem; margin-top:1rem; color:var(--color-text-secondary)">
+
-                            You will be redirected and then returned here.
+                        <div style="margin-bottom: 1.5rem;">
-                        </p>
+                            <p style="color: var(--color-text-secondary); margin-bottom: 0.5rem; font-size: 0.9rem;">
+                                2. Authorize the app, then copy the <b>Access Token</b> provided and paste it here:
+                            </p>
+                            <div class="form-group">
+                                <input type="text" id="manualAniListToken" placeholder="Paste your Access Token here..." autocomplete="off">
+                            </div>
+                        </div>
+
+                        <button class="btn-connect" onclick="handleManualAniListToken()">
+                            Verify & Save Token
+                        </button>
                     </div>
-                `}
+                </div>
-            </div>
+            `;
-        `;
+        }
     }).catch(err => {
         console.error(err);
         const content = document.getElementById('aniListContent');
@@ -904,6 +925,49 @@ function openAniListModal(userId) {
     });
 }
 
+// Nueva función para manejar el token pegado manualmente
+async function handleManualAniListToken() {
+    const tokenInput = document.getElementById('manualAniListToken');
+    const token = tokenInput.value.trim();
+
+    if (!token) {
+        showUserToast('Please paste the AniList token first', 'error');
+        return;
+    }
+
+    const submitBtn = document.querySelector('.btn-connect');
+    const originalText = submitBtn.textContent;
+    submitBtn.disabled = true;
+    submitBtn.textContent = 'Verifying...';
+
+    try {
+        const res = await fetch(`${API_BASE}/anilist/store`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                userId: currentUserId,
+                accessToken: token,
+            })
+        });
+
+        const data = await res.json();
+
+        if (!res.ok) {
+            throw new Error(data.error || 'Failed to verify token');
+        }
+
+        showUserToast('AniList connected successfully!', 'success');
+        // Recargar el modal para mostrar el estado "Conectado"
+        openAniListModal(currentUserId);
+
+    } catch (err) {
+        console.error(err);
+        showUserToast(err.message || 'Invalid Token', 'error');
+        submitBtn.disabled = false;
+        submitBtn.textContent = originalText;
+    }
+}
+
 async function redirectToAniListLogin() {
     try {
         const res = await fetch(`/api/login`, {
@@ -918,15 +982,10 @@ async function redirectToAniListLogin() {
         localStorage.setItem('token', data.token);
 
         const clientId = 32898;
-        const redirectUri = encodeURIComponent(window.location.origin + '/api/anilist');
+        window.open(
-        const state = encodeURIComponent(currentUserId);
+            `https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token`,
-
+            '_blank'
-        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);

desktop/src/scripts/utils/match-modal.js

@@ -0,0 +1,171 @@
+const MatchModal = (function() {
+    let _config = {
+        onSearch: async (query, provider) => [], // Debe devolver Array de objetos
+        onSelect: (item, provider) => {},
+        provider: 'generic'
+    };
+
+    let elements = {};
+    let searchTimeout = null;
+
+    function init() {
+        if (document.getElementById('waifu-match-modal')) return;
+
+        // Inyectar HTML
+        const modalHTML = `
+            <div class="match-modal-overlay" id="waifu-match-modal">
+                <div class="match-modal-content">
+                    <div class="match-header">
+                        <h3 class="match-title">Manual Match <span id="match-provider-badge" style="opacity:0.6; font-size:0.8em; margin-left:8px;"></span></h3>
+                        <button class="match-close-btn" id="match-close-btn">✕</button>
+                    </div>
+                    
+                    <div class="match-search-container">
+                        <input type="text" id="match-input" class="match-input" placeholder="Search title..." autocomplete="off">
+                        <button id="match-btn-action" class="match-search-btn">Search</button>
+                    </div>
+
+                    <div class="match-results-body" id="match-results-container">
+                        <div class="match-msg">Type to start searching...</div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+        // Cachear elementos
+        elements = {
+            overlay: document.getElementById('waifu-match-modal'),
+            input: document.getElementById('match-input'),
+            results: document.getElementById('match-results-container'),
+            badge: document.getElementById('match-provider-badge'),
+            closeBtn: document.getElementById('match-close-btn'),
+            searchBtn: document.getElementById('match-btn-action')
+        };
+
+        // Event Listeners
+        elements.closeBtn.onclick = close;
+        elements.overlay.onclick = (e) => { if(e.target === elements.overlay) close(); };
+
+        // Búsqueda al hacer clic
+        elements.searchBtn.onclick = () => performSearch(elements.input.value);
+
+        // Búsqueda al escribir (Debounce)
+        elements.input.addEventListener('input', (e) => {
+            clearTimeout(searchTimeout);
+            if(e.target.value.trim().length === 0) return;
+            searchTimeout = setTimeout(() => performSearch(e.target.value), 600);
+        });
+
+        // Enter key
+        elements.input.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') performSearch(elements.input.value);
+        });
+    }
+
+    function open(options) {
+        init(); // Asegurar que el DOM existe
+
+        _config = { ..._config, ...options };
+
+        // Resetear UI
+        elements.input.value = options.initialQuery || '';
+        elements.results.innerHTML = '<div class="match-msg">Search above to find matches...</div>';
+        elements.badge.innerText = options.provider ? `(${options.provider})` : '';
+
+        // Mostrar Modal
+        elements.overlay.classList.add('active');
+
+        // Auto-search si hay query inicial
+        if (options.initialQuery) {
+            performSearch(options.initialQuery);
+        }
+
+        setTimeout(() => elements.input.focus(), 100);
+    }
+
+    function close() {
+        if(elements.overlay) elements.overlay.classList.remove('active');
+    }
+
+    async function performSearch(query) {
+        if (!query || query.trim().length < 2) return;
+
+        elements.results.innerHTML = '<div class="match-spinner"></div>';
+
+        try {
+            // Ejecutar la función de búsqueda pasada en la config
+            const results = await _config.onSearch(query, _config.provider);
+            renderResults(results);
+        } catch (err) {
+            console.error(err);
+            elements.results.innerHTML = '<div class="match-msg error">Error searching provider.</div>';
+        }
+    }
+
+    function renderResults(results) {
+        elements.results.innerHTML = '';
+
+        if (!results || results.length === 0) {
+            elements.results.innerHTML = '<div class="match-msg">No matches found.</div>';
+            return;
+        }
+
+        const grid = document.createElement('div');
+        grid.className = 'match-list-grid';
+
+        results.forEach(item => {
+            const el = document.createElement('div');
+            el.className = 'match-item';
+
+            // Normalización de datos para asegurar compatibilidad con Anime/Libros
+            const img = item.coverImage?.large || item.coverImage || item.image || '/public/assets/no-image.png';
+            const title = item.title?.english || item.title?.romaji || item.title || 'Unknown Title';
+            const meta = item.releaseDate || item.year || item.startDate?.year || '';
+            const url = item.url || item.externalUrl || null;
+
+            el.innerHTML = `
+                <img src="${img}" class="match-poster" loading="lazy">
+                <div class="match-info">
+                    <div class="match-item-title">${title}</div>
+                    <div class="match-item-meta">${meta}</div>
+                </div>
+            `;
+
+            // Botón de enlace externo (si existe URL)
+            if (url) {
+                const linkBtn = document.createElement('a');
+                linkBtn.href = url;
+                linkBtn.target = "_blank";
+                linkBtn.className = "match-link-btn";
+                linkBtn.title = "View Source";
+                linkBtn.innerHTML = `
+                    <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="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                        <polyline points="15 3 21 3 21 9"></polyline>
+                        <line x1="10" y1="14" x2="21" y2="3"></line>
+                    </svg>
+                `;
+                // Evitar que el click en el enlace dispare el select
+                linkBtn.onclick = (e) => e.stopPropagation();
+                el.appendChild(linkBtn);
+            }
+
+            // Click en la tarjeta selecciona
+            el.onclick = () => {
+                _config.onSelect(item);
+                close();
+            };
+
+            grid.appendChild(el);
+        });
+
+        elements.results.appendChild(grid);
+    }
+
+    return {
+        open,
+        close
+    };
+})();

desktop/src/shared/config.js

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import os from 'os';
 import yaml from 'js-yaml';
+import crypto from 'crypto';
 
 const BASE_DIR = path.join(os.homedir(), 'WaifuBoards');
 const CONFIG_PATH = path.join(BASE_DIR, 'config.yaml');
@@ -14,7 +15,12 @@ const DEFAULT_CONFIG = {
     },
     paths: {
         mpv: null,
-        ffmpeg: null
+        ffmpeg: null,
+        ffprobe: null,
+        cloudflared: null,
+    },
+    server: {
+        jwt_secret: null
     }
 };
 
@@ -26,7 +32,9 @@ export const CONFIG_SCHEMA = {
     },
     paths: {
         mpv: { description: "Required to open anime episodes in mpv on desktop version." },
-        ffmpeg: { description: "Required for downloading anime episodes." }
+        ffmpeg: { description: "Required for downloading anime episodes." },
+        ffprobe: { description: "Required for watching local anime episodes." },
+        cloudflared: { description: "Required for creating pubic rooms." }
     }
 };
 
@@ -35,13 +43,31 @@ function ensureConfigFile() {
         fs.mkdirSync(BASE_DIR, { recursive: true });
     }
 
-    if (!fs.existsSync(CONFIG_PATH)) {
+    let configExists = fs.existsSync(CONFIG_PATH);
+
+    if (!configExists) {
         fs.writeFileSync(
             CONFIG_PATH,
             yaml.dump(DEFAULT_CONFIG),
             'utf8'
         );
     }
+
+    const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
+    const loaded = yaml.load(raw) || {};
+
+    if (!loaded.server) loaded.server = {};
+    if (!loaded.server.jwt_secret) {
+        loaded.server.jwt_secret = crypto.randomBytes(32).toString('hex');
+        fs.writeFileSync(CONFIG_PATH, yaml.dump(deepMerge(structuredClone(DEFAULT_CONFIG), loaded)), 'utf8');
+    }
+}
+
+export function getPublicConfig() {
+    const { values } = getConfig();
+    const publicConfig = structuredClone(values);
+    if (publicConfig.server) delete publicConfig.server.jwt_secret;
+    return publicConfig;
 }
 
 export function getConfig() {

desktop/src/shared/headless.js

@@ -1,44 +1,38 @@
-const path = require("path");
 const fs = require("fs");
-const { chromium } = require("playwright-core");
+const { chromium } = require("playwright");
+const {spawn} = require("node:child_process");
 
 let browser;
-let context;
 const BLOCK_LIST = [
     "google-analytics", "doubleclick", "facebook", "twitter",
     "adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic"
 ];
 
-function isPackaged() {
+function runHidden(cmd, args) {
-    return process.env.IS_PACKAGED === "true";
+    return new Promise((res, rej) => {
+        const p = spawn(cmd, args, {
+            stdio: "ignore",
+            shell: true,
+            windowsHide: true
+        });
+        p.on("exit", c => c === 0 ? res() : rej(new Error("exit " + c)));
+    });
 }
 
-function getChromiumPath() {
+async function ensureChromiumShell() {
-    if (isPackaged()) {
+    const exe = chromium.executablePath();
-        return path.join(
+    if (exe && fs.existsSync(exe)) return;
-            process.resourcesPath,
-            "playwright",
-            "chromium",
-            "chrome-headless-shell-win64",
-            "chrome-headless-shell.exe"
-        );
-    }
 
-    return chromium.executablePath();
+    await runHidden("npx", ["playwright", "install", "chromium-headless-shell"]);
 }
 
 async function initHeadless() {
     if (browser) return;
 
-    const exePath = getChromiumPath();
+    await ensureChromiumShell();
-
-    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",
@@ -53,10 +47,6 @@ async function initHeadless() {
             "--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) {
@@ -92,6 +82,12 @@ async function scrape(url, handler, options = {}) {
         loadImages = true
     } = options;
     if (!browser) await initHeadless();
+
+    const 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"
+    });
+
     const page = await context.newPage();
     let collectedRequests = [];
     await page.route("**/*", (route) => {
@@ -105,7 +101,7 @@ async function scrape(url, handler, options = {}) {
             resourceType: type
         });
 
-        if (type === "font" || type === "media" || type === "manifest")
+        if (type === "font" || type === "manifest")
             return route.abort();
 
         if (BLOCK_LIST.some(k => rUrl.includes(k)))
@@ -116,6 +112,10 @@ async function scrape(url, handler, options = {}) {
         )) return route.abort();
         route.continue();
     });
+    await page.addInitScript(() => {
+        Object.defineProperty(navigator, "webdriver", { get: () => false });
+    });
+
     await page.goto(url, { waitUntil, timeout });
     if (waitSelector) {
         try {
@@ -130,14 +130,12 @@ async function scrape(url, handler, options = {}) {
     }
     const result = await handler(page);
     await page.close();
-
+    await context.close();
     return { result, requests: collectedRequests };
 }
 
 async function closeScraper() {
-    if (context) await context.close();
     if (browser) await browser.close();
-    context = null;
     browser = null;
 }
 module.exports = {

desktop/src/views/views.routes.ts

@@ -1,7 +1,18 @@
-import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
+import {FastifyInstance, FastifyReply, FastifyRequest} from 'fastify';
 import * as fs from 'fs';
 import * as path from 'path';
 
+let cachedTitlebar: string | null = null;
+
+function getTitlebarHTML(): string {
+    if (!cachedTitlebar) {
+
+        const titlebarPath = path.join(__dirname, '..', '..', 'views', 'components', 'titlebar.html');
+        cachedTitlebar = fs.readFileSync(titlebarPath, 'utf-8');
+    }
+    return cachedTitlebar;
+}
+
 let cachedNavbar: string | null = null;
 
 function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
@@ -12,8 +23,9 @@ function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
 
     let navbar = cachedNavbar;
 
-    const pages = ['anime', 'books', 'gallery', 'schedule' , 'marketplace'];
+    const pages = ['search', '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}"`);
@@ -30,10 +42,15 @@ function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
     return navbar;
 }
 
-function injectNavbar(htmlContent: string, activePage: string, showSearch: boolean = true): string {
+function injectLayout(htmlContent: string, activePage: string | null = null, showSearch: boolean = true): string {
-    const navbar = getNavbarHTML(activePage, showSearch);
+    let contentToInject = getTitlebarHTML();
 
-    return htmlContent.replace(/<body[^>]*>/, `$&\n${navbar}`);
+    if (activePage !== null) {
+        const navbar = getNavbarHTML(activePage, showSearch);
+        contentToInject += `\n${navbar}`;
+    }
+
+    return htmlContent.replace(/<body[^>]*>/, `$&\n${contentToInject}`);
 }
 
 async function viewsRoutes(fastify: FastifyInstance) {
@@ -41,99 +58,123 @@ 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);
+
+        const finalHtml = injectLayout(html, null);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, 'anime', true);
-        reply.type('text/html').send(htmlWithNavbar);
+        reply.type('text/html').send(finalHtml);
+    });
+
+    fastify.get('/search', (req: FastifyRequest, reply: FastifyReply) => {
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'search.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const finalHtml = injectLayout(html, 'search', false);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, '', false);
-        reply.type('text/html').send(htmlWithNavbar);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, 'books', true);
-        reply.type('text/html').send(htmlWithNavbar);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, 'schedule', false);
-        reply.type('text/html').send(htmlWithNavbar);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, 'gallery', true);
-        reply.type('text/html').send(htmlWithNavbar);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, 'marketplace', false);
-        reply.type('text/html').send(htmlWithNavbar);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, 'gallery', true);
-        reply.type('text/html').send(htmlWithNavbar);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, 'gallery', true);
-        reply.type('text/html').send(htmlWithNavbar);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+
+        const finalHtml = injectLayout(html, null);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, null);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, null);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, null);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+
+        const finalHtml = injectLayout(html, null);
+        reply.type('text/html').send(finalHtml);
+    });
+
+    fastify.get('/room', (req: FastifyRequest, reply: FastifyReply) => {
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'room.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const finalHtml = injectLayout(html, null);
+        reply.type('text/html').send(finalHtml);
     });
 
     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);
+        const finalHtml = injectLayout(html, null);
+        reply.code(404).type('text/html').send(finalHtml);
     });
 }
 

desktop/views/404.html

@@ -45,18 +45,6 @@
 </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">

desktop/views/anime/anime.html

@@ -5,30 +5,21 @@
     <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 type="module">
-    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
+        import JASSUB from 'https://cdn.jsdelivr.net/npm/jassub@1.8.8/dist/jassub.es.js';
-
+        window.JASSUB = JASSUB;
+    </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">
+    <link rel="stylesheet" href="/views/css/components/match-modal.css">
     <script src="/src/scripts/titlebar.js"></script>
+    <link rel="stylesheet" href="/views/css/components/titlebar.css">
+
 </head>
 <body>
-<div id="titlebar">
-    <div class="title-left">
-        <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
-        <span class="app-title">WaifuBoard</span>
-    </div>
-    <div class="title-right">
-        <button class="min">−</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
 <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"/>
@@ -53,18 +44,27 @@
 
     <div class="player-wrapper" id="player-wrapper" style="display: none;">
         <div class="player-container">
+            <!-- Side Navigation Buttons -->
             <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>
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <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>
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M9 18l6-6-6-6"/>
+                </svg>
             </button>
 
+            <!-- Header Controls -->
             <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>
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M19 12H5"/>
+                            <path d="M12 19l-7-7 7-7"/>
+                        </svg>
                     </button>
                     <div class="episode-info">
                         <span class="ep-label">Watching</span>
@@ -74,19 +74,28 @@
 
                 <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">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <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 class="btn-icon-glass" id="manual-match-btn" title="Manual Match" style="display: none;">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                            </svg>
+                        </button>
+
                         <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">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                 <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>
@@ -99,40 +108,82 @@
                 </div>
             </div>
 
+            <!-- Video Frame -->
             <div class="video-frame">
-                <video id="player" controls crossorigin playsinline></video>
+                <video id="player" crossorigin playsinline></video>
+                <canvas id="subtitles-canvas"></canvas>
+
                 <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">
+            <!-- Skip Overlay Button -->
-                <div id="dl-quality-section" class="dl-section" style="display:none;">
+            <button id="skip-overlay-btn">
-                    <h3>Video Quality</h3>
+                Skip Intro
-                    <div class="dl-list" id="dl-quality-list"></div>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                    <path d="M13 17l5-5-5-5M6 17l5-5-5-5"/>
+                </svg>
+            </button>
+
+            <!-- Custom Controls -->
+            <div class="custom-controls">
+                <div class="controls-gradient"></div>
+
+                <!-- Progress Bar -->
+                <div class="progress-container">
+                    <div class="progress-buffer"></div>
+                    <div class="progress-played"></div>
+                    <div class="progress-handle"></div>
                 </div>
 
-                <div id="dl-audio-section" class="dl-section" style="display:none;">
+                <!-- Controls Row -->
-                    <h3>Audio Tracks</h3>
+                <div class="controls-row">
-                    <div class="dl-list" id="dl-audio-list"></div>
+                    <div class="controls-left">
-                </div>
+                        <button class="control-btn play-pause" id="play-pause-btn" title="Play/Pause (Space)">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M8 5v14l11-7z"/>
+                            </svg>
+                        </button>
 
-                <div id="dl-subs-section" class="dl-section">
+                        <div class="volume-control">
-                    <h3>Subtitles</h3>
+                            <button class="control-btn" id="volume-btn" title="Mute (M)">
-                    <div class="dl-list" id="dl-subs-list"></div>
+                                <svg viewBox="0 0 24 24">
+                                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
+                                </svg>
+                            </button>
+                            <div class="volume-slider-container">
+                                <input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
+                            </div>
+                        </div>
+
+                        <span class="time-display" id="time-display">0:00 / 0:00</span>
+                    </div>
+
+                    <div class="controls-center">
+                        <!-- Center space for future controls -->
+                    </div>
+
+                    <div class="controls-right">
+                        <button class="control-btn" id="settings-btn" title="Settings">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
+                            </svg>
+                        </button>
+
+                        <button class="control-btn" id="fullscreen-btn" title="Fullscreen (F)">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+                            </svg>
+                        </button>
+                    </div>
                 </div>
             </div>
 
-            <div class="dl-actions">
+            <!-- Settings Panel -->
-                <button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
+            <div class="settings-panel" id="settings-panel">
-                <button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
+                <!-- Populated dynamically by JS -->
             </div>
         </div>
     </div>
@@ -208,15 +259,46 @@
     </section>
 </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>
+
 <script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/auth-guard.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/utils/match-modal.js"></script>
+<script src="/src/scripts/anime/subtitle-renderer.js"></script>
 
 <script src="/src/scripts/anime/player.js"></script>
 <script src="/src/scripts/anime/entry.js"></script>
-
 </body>
 </html>

desktop/views/anime/animes.html

@@ -7,26 +7,16 @@
     <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/home.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="stylesheet" href="/views/css/components/create-room.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="">
@@ -124,6 +114,7 @@
     </a>
 </div>
 <script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/room-modal.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>

desktop/views/books/book.html

@@ -11,19 +11,10 @@
     <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">
+    <link rel="stylesheet" href="/views/css/components/match-modal.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"/>
@@ -91,6 +82,12 @@
                     <h2>Chapters</h2>
 
                     <div class="chapter-controls">
+                        <button id="manual-match-btn" class="glass-btn-icon" style="display: none;" title="Manual Match">
+                            <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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                            </svg>
+                        </button>
                         <select id="provider-filter" class="glass-select" style="display: none;">
                             <option value="all">All Providers</option>
                         </select>
@@ -150,6 +147,7 @@
 <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/utils/match-modal.js"></script>
 <script src="/src/scripts/books/book.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>

desktop/views/books/books.html

@@ -7,25 +7,15 @@
     <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/home.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">
+    <script src="/src/scripts/room-modal.js"></script>
     <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="">
@@ -101,6 +91,7 @@
 </div>
 
 <script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/room-modal.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>

desktop/views/books/read.html

@@ -12,17 +12,6 @@
     <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
-
 <header class="top-bar">
     <button id="back-btn" class="glass-btn">
         ← Back

desktop/views/components/navbar.html

@@ -7,6 +7,11 @@
   </a>
 
   <div class="nav-center">
+    <button class="nav-button" data-page="search" onclick="window.location.href='/search'">
+      <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+      </svg>
+    </button>
     <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>
@@ -53,6 +58,13 @@
           <span>Profile</span>
         </a>
 
+        <button class="dropdown-item" id="nav-create-party">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+          </svg>
+          <span>Watchparty</span>
+        </button>
+
         <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"/>
@@ -71,5 +83,10 @@
         </button>
       </div>
     </div>
+    <button class="mobile-menu-toggle" id="mobile-menu-toggle">
+      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+      </svg>
+    </button>
   </div>
 </nav>

desktop/views/components/titlebar.html

@@ -0,0 +1,40 @@
+<div id="titlebar">
+    <div class="title-left">
+        <div class="app-icon">
+            <img src="/public/assets/waifuboards.ico" alt="WB"/>
+        </div>
+        <span class="app-title">WaifuBoard</span>
+    </div>
+
+    <div class="title-drag-area"></div>
+
+    <div class="title-right">
+        <div id="titlebar-actions" style="display: none; height: 100%; align-items: center;">
+
+            <button class="title-action-btn" id="titlebar-settings" title="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>
+            </button>
+
+            <a href="/profile" class="title-avatar-link" id="titlebar-profile-link" title="Profile">
+                <img id="titlebar-avatar" src="/public/assets/waifuboards.ico" alt="User" />
+            </a>
+
+            <div class="title-sep"></div>
+        </div>
+
+        <div class="window-controls">
+            <button class="control-btn min" title="Minimize">
+                <svg width="11" height="1" viewBox="0 0 11 1"><path d="M0 0h11v1H0z" fill="currentColor"/></svg>
+            </button>
+            <button class="control-btn max" title="Maximize">
+                <svg width="10" height="10" viewBox="0 0 10 10"><path d="M1 1v8h8V1H1zm1 1h6v6H2V2z" fill="currentColor"/></svg>
+            </button>
+            <button class="control-btn close" title="Close">
+                <svg width="11" height="11" viewBox="0 0 11 11"><path d="M5.5 4.793L1.854 1.146.646 2.354 4.293 6 .646 9.646l1.208 1.208L5.5 7.207l3.646 3.647 1.208-1.208L6.707 6l3.647-3.646-1.208-1.208L5.5 4.793z" fill="currentColor"/></svg>
+            </button>
+        </div>
+    </div>
+</div>

desktop/views/css/components/anilist-modal.css

@@ -122,12 +122,23 @@
     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;
+    height: 45px;
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+textarea.form-input {
+    height: auto;
+    padding: 1rem;
+    min-height: 100px;
 }
 
 .form-input:focus {
@@ -137,13 +148,33 @@
     box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
 }
 
-.form-group.notes-group { grid-column: 1 / span 2; }
+.form-group.notes-group {
-.form-group.checkbox-group { grid-column: 3 / 4; align-self: end; margin-bottom: 0.8rem; }
+    grid-column: 1 / -1;
+    order: 10;
+}
+.form-group.checkbox-group {
+    grid-column: 3 / 4;
+    align-self: end;
+    margin-bottom: 0.8rem;
+    order: 5;
+}
 .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; }
+/* Cambia de 3 columnas a 2 columnas para que Start y End llenen el espacio */
-.date-input-pair { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
+.date-group {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* Antes era 1fr 1fr 1fr */
+    gap: 2rem;
+    width: 100%;
+}
+
+.date-input-pair {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    width: 100%;
+}
 
 .checkbox-group {
     flex-direction: row;
@@ -276,4 +307,10 @@
     .btn-primary { order: 1; }
     .btn-secondary { order: 2; }
     .btn-danger { order: 3; margin-top: 0.5rem; }
+}
+
+input[type="date"].form-input {
+    display: block; /* Elimina el comportamiento flex */
+    text-align: left; /* Asegura alineación a la izquierda */
+    padding-top: 10px; /* Ajuste pequeño para centrar verticalmente si es necesario */
 }

desktop/views/css/components/create-room.css

@@ -0,0 +1,291 @@
+/* create-room.css */
+.cr-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001; /* Mayor que el navbar */
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.cr-modal-overlay.show {
+    display: flex;
+    opacity: 1;
+}
+
+.cr-modal-content {
+    background: rgba(20, 20, 20, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    border-radius: 16px;
+    padding: 32px;
+    max-width: 450px;
+    width: 90%;
+    position: relative;
+    transform: scale(0.95);
+    transition: transform 0.2s ease;
+}
+
+.cr-modal-overlay.show .cr-modal-content {
+    transform: scale(1);
+}
+
+.cr-modal-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    padding: 5px;
+    transition: color 0.2s;
+}
+
+.cr-modal-close:hover {
+    color: white;
+}
+
+.cr-modal-title {
+    margin: 0 0 24px 0;
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: white;
+    background: linear-gradient(to right, #fff, #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.cr-form-group {
+    margin-bottom: 20px;
+}
+
+.cr-form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: #e5e7eb;
+    font-size: 0.9rem;
+}
+
+.cr-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.cr-input:focus {
+    border-color: #8b5cf6; /* Tu color primario */
+}
+
+.cr-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 24px;
+}
+
+.cr-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;
+}
+
+.cr-btn-confirm {
+    background: #8b5cf6;
+    border: none;
+    color: white;
+    padding: 10px 24px;
+    border-radius: 8px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.cr-btn-confirm:hover {
+    background: #7c3aed;
+}
+
+.cr-btn-confirm:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+/* Add to room.css */
+.modal-header-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.btn-icon-small {
+    background: rgba(255,255,255,0.1);
+    border: none;
+    color: white;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.config-grid {
+    display: flex;
+    gap: 24px;
+}
+
+.config-poster img {
+    width: 140px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+}
+
+.config-form {
+    flex: 1;
+}
+
+.form-select, .form-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 10px 12px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    outline: none;
+    margin-bottom: 5px;
+}
+
+.form-select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.form-row {
+    display: flex;
+    gap: 12px;
+}
+
+.form-group.half {
+    flex: 1;
+}
+
+.full-width {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+@media (max-width: 600px) {
+    .config-grid { flex-direction: column; align-items: center; }
+    .config-poster img { width: 100px; }
+}
+
+.modal-header-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.btn-icon-small {
+    background: rgba(255,255,255,0.1);
+    border: none;
+    color: white;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon-small:hover {
+    background: rgba(255,255,255,0.2);
+}
+
+/* Config Grid Layout */
+.config-grid {
+    display: flex;
+    gap: 24px;
+}
+
+.config-poster img {
+    width: 140px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.config-form {
+    flex: 1;
+}
+
+/* Form Elements */
+.form-select, .form-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 10px 12px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    outline: none;
+    margin-bottom: 5px;
+}
+
+.form-select:focus, .form-input:focus {
+    border-color: var(--brand-color);
+}
+
+.form-select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Form Select specific for dark mode options */
+.form-select option {
+    background: #1a1a1a;
+    color: white;
+}
+
+.form-row {
+    display: flex;
+    gap: 12px;
+}
+
+.form-group.half {
+    flex: 1;
+}
+
+.full-width {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 600px) {
+    .config-grid { flex-direction: column; align-items: center; }
+    .config-poster img { width: 100px; }
+    .form-row { flex-direction: column; gap: 0; }
+}

desktop/views/css/components/match-modal.css

@@ -0,0 +1,282 @@
+/* match-modal.css */
+:root {
+    --match-primary: #8b5cf6;
+    --match-bg: rgba(15, 15, 15, 0.95);
+    --match-border: rgba(255, 255, 255, 0.1);
+    --match-input-bg: rgba(0, 0, 0, 0.4);
+    --match-text-muted: #a1a1aa;
+}
+
+/* Overlay Global con efecto Glass */
+.match-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(8px);
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.match-modal-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Contenido del Modal */
+.match-modal-content {
+    background: var(--match-bg);
+    border: 1px solid var(--match-border);
+    border-radius: 16px;
+    width: 100%;
+    max-width: 700px; /* Un poco más ancho para mejor lectura */
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow:
+            0 25px 80px rgba(0, 0, 0, 0.9),
+            0 0 0 1px rgba(255, 255, 255, 0.05);
+    transform: scale(0.95) translateY(10px);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    overflow: hidden;
+}
+
+.match-modal-overlay.active .match-modal-content {
+    transform: scale(1) translateY(0);
+}
+
+/* Header Estilizado */
+.match-header {
+    padding: 1.5rem 2rem;
+    border-bottom: 1px solid var(--match-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent);
+}
+
+.match-title {
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin: 0;
+    letter-spacing: -0.02em;
+    /* Efecto gradiente en el texto como en anilist-modal */
+    background: linear-gradient(to right, #fff, #aaa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+#match-provider-badge {
+    opacity: 0.6;
+    font-size: 0.8em;
+    margin-left: 8px;
+    font-weight: normal;
+    -webkit-text-fill-color: #888; /* Resetear el gradiente para el badge */
+}
+
+.match-close-btn {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--match-border);
+    color: #ccc;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.match-close-btn:hover {
+    background: #ef4444;
+    border-color: #ef4444;
+    color: white;
+    transform: rotate(90deg);
+}
+
+/* Buscador y Controles */
+.match-search-container {
+    padding: 1.5rem 2rem 1rem 2rem;
+    display: flex;
+    gap: 1rem;
+    background: rgba(0,0,0,0.2);
+}
+
+.match-input {
+    flex: 1;
+    background: var(--match-input-bg);
+    border: 1px solid var(--match-border);
+    color: white;
+    padding: 1rem 1.2rem;
+    border-radius: 10px;
+    font-size: 1rem;
+    font-family: inherit;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    outline: none;
+}
+
+.match-input:focus {
+    background: rgba(0,0,0,0.6);
+    border-color: var(--match-primary);
+    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
+}
+
+.match-search-btn {
+    padding: 0 1.8rem;
+    background: var(--match-primary);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+}
+
+.match-search-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
+    filter: brightness(1.1);
+}
+
+/* Lista de Resultados */
+.match-results-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem 2rem 2rem 2rem;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255,255,255,0.2) transparent;
+}
+
+.match-results-body::-webkit-scrollbar { width: 6px; }
+.match-results-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
+
+.match-list-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    margin-top: 1rem;
+}
+
+/* Tarjeta de Resultado Mejorada */
+.match-item {
+    display: flex;
+    align-items: center;
+    gap: 1.2rem;
+    background: rgba(255, 255, 255, 0.02);
+    padding: 0.8rem;
+    border-radius: 12px;
+    border: 1px solid transparent;
+    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+    cursor: pointer;
+    position: relative;
+}
+
+.match-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.1);
+    transform: translateX(4px);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+}
+
+.match-poster {
+    width: 50px;
+    height: 72px;
+    object-fit: cover;
+    border-radius: 8px;
+    background: #222;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+.match-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.3rem;
+    min-width: 0;
+}
+
+.match-item-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.match-item-meta {
+    font-size: 0.85rem;
+    color: var(--match-text-muted);
+    font-weight: 500;
+}
+
+/* Botón de enlace externo refinado */
+.match-link-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    color: rgba(255, 255, 255, 0.4);
+    transition: all 0.2s;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    margin-left: 0.5rem;
+}
+
+.match-link-btn:hover {
+    background: var(--match-primary);
+    color: white;
+    border-color: var(--match-primary);
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
+}
+
+/* Mensajes y Spinner */
+.match-spinner {
+    width: 40px; height: 40px;
+    border: 3px solid rgba(255,255,255,0.1);
+    border-top-color: var(--match-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 3rem auto;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.match-msg {
+    text-align: center;
+    color: var(--match-text-muted);
+    margin-top: 3rem;
+    font-size: 0.95rem;
+}
+.match-msg.error { color: #ef4444; }
+
+/* Responsive */
+@media (max-width: 768px) {
+    .match-modal-content {
+        height: 100%;
+        max-height: 100vh;
+        border-radius: 0;
+        border: none;
+    }
+    .match-search-container {
+        flex-direction: column;
+        gap: 0.8rem;
+    }
+    .match-search-btn {
+        width: 100%;
+        padding: 1rem;
+    }
+}

desktop/views/css/components/navbar.css

@@ -8,7 +8,11 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 3rem;
-    background: linear-gradient(to bottom, rgba(9, 9, 11, 0.9) 0%, rgba(9, 9, 11, 0) 100%);
+    background: linear-gradient(
+            to bottom,
+            rgba(9, 9, 11, 0.9) 0%,
+            rgba(9, 9, 11, 0) 100%
+    );
     transition: background 0.3s;
 }
 
@@ -18,6 +22,14 @@
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
+.nav-button[data-page="search"] {
+    padding: 0.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+}
+
 .nav-brand {
     font-weight: 900;
     font-size: 1.5rem;
@@ -211,7 +223,9 @@
     min-width: 260px;
     display: none;
     flex-direction: column;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1);
+    box-shadow:
+            0 20px 40px rgba(0, 0, 0, 0.6),
+            0 0 0 1px rgba(139, 92, 246, 0.1);
     z-index: 9999;
     overflow: hidden;
     animation: dropdownSlide 0.2s ease-out;
@@ -415,4 +429,178 @@
 .search-results::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.2);
     border-radius: 3px;
+}
+
+.mobile-menu-toggle {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: 44px;
+    height: 44px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    color: white;
+    z-index: 2001;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+@media (max-width: 768px) {
+
+    .navbar {
+        height: 70px;
+        padding: 0 1.5rem;
+        background: rgba(9, 9, 11, 0.8);
+        backdrop-filter: blur(15px);
+        border-bottom: 1px solid rgba(255,255,255,0.05);
+    }
+
+    .nav-brand span { display: none; }
+    .brand-icon { width: 40px; height: 40px; }
+
+    .mobile-menu-toggle {
+        display: flex;
+    }
+    .mobile-menu-toggle:active { transform: scale(0.95); }
+
+    .nav-center {
+
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 85%;
+        max-width: 320px;
+        height: 100vh;
+
+        border-radius: 0;
+        border: none;
+
+        background: linear-gradient(160deg, rgba(20, 20, 25, 0.98) 0%, rgba(10, 10, 12, 0.99) 100%);
+        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
+
+        border-left: 1px solid rgba(255, 255, 255, 0.08);
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 2rem;
+        gap: 1rem;
+        z-index: 2000;
+
+        transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
+    .nav-center.open {
+        right: 0;
+    }
+
+    .nav-button {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding: 1.2rem 1.5rem;
+
+        font-size: 1.2rem;
+        font-weight: 700;
+        letter-spacing: 0.5px;
+        color: rgba(255, 255, 255, 0.6);
+        text-transform: uppercase;
+
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid rgba(255, 255, 255, 0.03);
+        border-radius: 16px;
+        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+
+        opacity: 0;
+        transform: translateX(20px);
+    }
+
+    .nav-button:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: white;
+        padding-left: 2rem;
+    }
+
+    .nav-button.active {
+        background: linear-gradient(90deg, rgba(139, 92, 246, 0.2) 0%, transparent 100%);
+        border-color: rgba(139, 92, 246, 0.4);
+        color: white;
+        box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    .nav-center.open .nav-button {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    .nav-button.active::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        height: 50%;
+        width: 3px;
+        background: #8b5cf6;
+        border-radius: 0 4px 4px 0;
+        box-shadow: 0 0 10px #8b5cf6;
+    }
+
+    .search-wrapper {
+        margin-left: 10px;
+        margin-right: auto;
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        cursor: pointer;
+    }
+
+    .search-input {
+        opacity: 0;
+        width: 0;
+        padding: 0;
+        pointer-events: none; /* No clickable cuando está oculto */
+        position: absolute;
+        left: 0;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: 2005;
+    }
+
+    /* Estado expandido al tocar */
+    .search-wrapper:focus-within {
+        width: 220px; /* Ancho suficiente para escribir */
+    }
+
+    .search-wrapper:focus-within .search-input {
+        opacity: 1;
+        width: 220px;
+        padding: 0.6rem 1rem 0.6rem 2.5rem;
+        background: #18181b;
+        border: 1px solid var(--color-primary);
+        border-radius: 99px;
+        pointer-events: auto; /* Permitir escritura */
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    }
+
+    .search-wrapper.active-mobile .search-input {
+        opacity: 1;
+        width: 220px;
+        padding: 0.6rem 1rem 0.6rem 2.5rem;
+        background: #18181b;
+        pointer-events: auto;
+    }
+
+    /* Aseguramos que el icono siempre esté arriba del input expandido */
+    .search-icon {
+        z-index: 2006;
+    }
+
+    /* Evitar que el menú lateral tape el buscador si ambos intentan estar abiertos */
+    .nav-center.open {
+        z-index: 1999;
+    }
 }

desktop/views/css/components/titlebar.css

@@ -1,5 +1,7 @@
 :root {
     --titlebar-height: 40px;
+    --primary-glass: rgba(9, 9, 11, 0.95);
+    --border-color: rgba(139, 92, 246, 0.2);
 }
 
 * {
@@ -34,7 +36,7 @@ html.electron .panel-content {
     margin-top: 2rem;
 }
 
-html.electron .calendar-wrapper{
+html.electron .calendar-wrapper {
     margin-top: 4rem;
 }
 
@@ -47,42 +49,46 @@ html.electron .back-btn {
 }
 
 #titlebar {
-    display: none;
+    width: calc(100vw - 12px);    display: none;
+
     height: var(--titlebar-height);
-    background: rgba(9, 9, 11, 0.95);
+    background: var(--primary-glass);
     color: white;
     align-items: center;
     justify-content: space-between;
-    padding: 0 12px;
+    padding-left: 12px;
+    padding-right: 0;
+
     -webkit-app-region: drag;
     user-select: none;
-    font-family: "Inter", system-ui, sans-serif;
-    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
     z-index: 999999;
+
+    font-family: "Inter", system-ui, sans-serif;
+    border-bottom: 1px solid var(--border-color);
     backdrop-filter: blur(12px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 .title-left {
     display: flex;
-    align-items: center !important;
+    align-items: center;
     gap: 10px;
+    pointer-events: none;
 }
 
 #titlebar .app-icon {
-    width: 24px;
+    width: 22px;
-    height: 24px;
+    height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 6px;
+    border-radius: 5px;
-    background: rgba(139, 92, 246, 0.15);
+    background: rgba(139, 92, 246, 0.1);
-    border: 1px solid rgba(139, 92, 246, 0.3);
+    border: 1px solid rgba(139, 92, 246, 0.25);
-    padding: 3px;
+    padding: 2px;
 }
 
 #titlebar .app-icon img {
@@ -95,79 +101,118 @@ html.electron .back-btn {
     font-size: 13px;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.9);
-    letter-spacing: -0.2px;
+    letter-spacing: -0.1px;
+}
+
+.title-drag-area {
+    flex-grow: 1;
+    height: 100%;
 }
 
 .title-right {
     display: flex;
     height: 100%;
-    gap: 1px;
+    align-items: center;
+    -webkit-app-region: no-drag;
 }
 
-.title-right button {
+.user-box {
-    -webkit-app-region: no-drag;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-right: 12px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background 0.2s;
+    cursor: default;
+}
+
+.user-box:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.user-box img {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid rgba(139, 92, 246, 0.3);
+}
+
+.user-box span {
+    font-size: 12px;
+    font-weight: 500;
+    opacity: 0.9;
+    color: #e4e4e7;
+}
+
+.window-controls {
+    display: flex;
+    height: 100%;
+}
+
+.control-btn {
     border: none;
     background: transparent;
-    color: rgba(255, 255, 255, 0.7);
+    color: #a1a1aa;
     width: 46px;
     height: 100%;
     cursor: pointer;
-    font-size: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
-    position: relative;
+    transition: all 0.2s;
+    outline: none;
 }
 
-.title-right button svg {
+.control-btn:hover {
-    width: 16px;
-    height: 16px;
-    transition: transform 0.2s;
-}
-
-.title-right button:hover {
     color: white;
+    background: rgba(255, 255, 255, 0.05);
 }
 
-.title-right button:active {
+.control-btn.min:hover {
-    transform: scale(0.95);
+    background: rgba(255, 255, 255, 0.1);
 }
 
-.title-right .min:hover {
+.control-btn.max:hover {
-    background: rgba(139, 92, 246, 0.2);
+    background: rgba(255, 255, 255, 0.1);
 }
 
-.title-right .max:hover {
+.control-btn.close:hover {
-    background: rgba(34, 197, 94, 0.2);
-}
-
-.title-right .close:hover {
     background: #e81123;
     color: white;
 }
 
-.title-right button:hover svg {
+.control-btn:active {
-    transform: scale(1.1);
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.control-btn.close:active {
+    background: #bf0f1d;
 }
 
 html.electron::-webkit-scrollbar {
     width: 12px;
     position: absolute;
+    z-index: 0;
 }
 
 html.electron::-webkit-scrollbar-track {
     background: #09090b;
     margin-top: var(--titlebar-height);
+    border-left: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 html.electron::-webkit-scrollbar-thumb {
     background: rgba(139, 92, 246, 0.3);
     border-radius: 6px;
     border: 2px solid #09090b;
+    background-clip: content-box;
 }
 
 html.electron::-webkit-scrollbar-thumb:hover {
     background: rgba(139, 92, 246, 0.5);
+    border: 2px solid #09090b;
 }
 
 body {
@@ -176,25 +221,231 @@ body {
     overflow-x: hidden;
 }
 
-.user-box {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-right: 12px;
-}
-
-.user-box img {
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.user-box span {
-    font-size: 13px;
-    opacity: 0.9;
-}
-
 .hidden {
     display: none;
 }
+
+html.electron #room-view {
+    height: calc(100vh - var(--titlebar-height));
+    margin-top: var(--titlebar-height);
+    overflow: hidden;
+}
+
+html.electron #room-view .room-layout {
+    height: 100%;
+}
+
+#titlebar-user-box {
+    position: relative;
+    z-index: 1000000;
+}
+
+#titlebar-dropdown {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    width: 240px;
+    background: rgba(18, 18, 21, 0.98);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
+
+    display: none;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 1000001;
+
+    transform-origin: top right;
+    animation: titlebarDropdownSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+#titlebar-dropdown.active {
+    display: flex;
+}
+
+@keyframes titlebarDropdownSlide {
+    from { opacity: 0; transform: scale(0.95) translateY(-5px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+#titlebar-dropdown .dropdown-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: rgba(139, 92, 246, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+#titlebar-dropdown .dropdown-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid #8b5cf6;
+}
+
+#titlebar-dropdown .dropdown-user-info {
+    display: flex;
+    flex-direction: column;
+}
+
+#titlebar-dropdown .dropdown-username {
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+}
+
+#titlebar-dropdown .dropdown-status {
+    font-size: 11px;
+    color: #22c55e;
+    font-weight: 500;
+}
+
+#titlebar-dropdown .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    color: #a1a1aa;
+    text-decoration: none;
+    font-size: 13px;
+    transition: all 0.2s;
+    background: transparent;
+    border: none;
+    width: 100%;
+    cursor: pointer;
+    font-family: inherit;
+    text-align: left;
+}
+
+#titlebar-dropdown .dropdown-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: white;
+    padding-left: 20px;
+}
+
+#titlebar-dropdown .dropdown-item svg {
+    color: inherit;
+    transition: transform 0.2s;
+}
+
+#titlebar-dropdown .dropdown-item:hover svg {
+    color: #8b5cf6;
+}
+
+#titlebar-dropdown .dropdown-divider {
+    height: 1px;
+    background: rgba(255, 255, 255, 0.05);
+    margin: 4px 0;
+}
+
+#titlebar-dropdown .logout-item {
+    color: #ef4444;
+}
+
+#titlebar-dropdown .logout-item:hover {
+    background: rgba(239, 68, 68, 0.1);
+    color: #f87171;
+}
+
+#titlebar-dropdown .logout-item:hover svg {
+    color: #f87171;
+}
+
+html.electron::-webkit-scrollbar {
+    width: 12px;
+}
+
+html.electron::-webkit-scrollbar-track {
+    margin-top: var(--titlebar-height);
+}
+
+#titlebar .control-btn {
+    width: 46px !important;
+    height: 100% !important;
+    color: #a1a1aa;
+    transition: all 0.2s;
+}
+
+#titlebar .control-btn svg {
+    width: auto !important;
+    height: auto !important;
+    max-width: 14px;
+    max-height: 14px;
+    pointer-events: none;
+}
+
+#titlebar .app-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    max-width: none;
+}
+
+/* Nuevo estilo para la parte derecha */
+.title-right {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    -webkit-app-region: no-drag;
+    gap: 0; /* Quitamos gap general para controlar mejor los botones */
+}
+
+/* Botones de acción (Settings, etc) */
+.title-action-btn {
+    width: 40px; /* Un poco más estrechos que los controles de ventana */
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: #a1a1aa;
+    cursor: pointer;
+    transition: all 0.2s;
+    outline: none;
+}
+
+.title-action-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: white;
+}
+
+.title-action-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+/* Contenedor del Avatar */
+.title-avatar-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 0 10px; /* Espacio a los lados */
+    cursor: pointer;
+    transition: background 0.2s;
+    /* Quitamos el borde por defecto de los links */
+    text-decoration: none;
+}
+
+.title-avatar-link:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.title-avatar-link img {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid rgba(139, 92, 246, 0.4); /* Borde morado sutil */
+}
+
+/* Separador visual antes de los controles de ventana */
+.title-sep {
+    width: 1px;
+    height: 16px;
+    background: rgba(255, 255, 255, 0.1);
+    margin: 0 4px;
+}

desktop/views/css/home.css

@@ -0,0 +1,96 @@
+/* home.css - Estilo Streaming Profesional (Sin modificar cards/flechas) */
+
+/* 1. Fondo y Fusión del Layout */
+body {
+    background-color: #0b0b0b; /* Fondo oscuro profundo */
+}
+
+/* Efecto de superposición: El contenido sube sobre el banner */
+main#online-content {
+    position: relative;
+    z-index: 10;
+    margin-top: -12vh; /* Sube el contenido visualmente hacia el banner */
+    padding-top: 3rem;
+    /* Degradado para que el corte no sea brusco */
+    background: linear-gradient(to bottom, transparent 0%, #0b0b0b 15%);
+    min-height: 100vh;
+}
+
+
+/* Estilizamos los botones del Hero para igualar a anime.css */
+.hero-buttons .btn-primary {
+    background: white;
+    color: black;
+    font-weight: 800;
+    border: none;
+    padding: 0.9rem 2.4rem;
+    border-radius: 8px; /* Bordes menos redondos, más modernos */
+    text-transform: uppercase;
+    font-size: 0.9rem;
+    letter-spacing: 0.5px;
+}
+
+.hero-buttons .btn-blur {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    font-weight: 700;
+    border-radius: 8px;
+}
+
+/* 3. Títulos de Secciones */
+/* Añadimos un acento de color a la izquierda */
+.section-header {
+    border-left: 5px solid var(--color-primary); /* Línea morada vertical */
+    padding-left: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.section-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 0.5px;
+}
+
+/* 4. Botón Flotante (Modo Biblioteca) */
+/* Estilo Glassmorphism sin cambiar su posición */
+.library-mode-btn {
+    width: 56px;
+    height: 56px;
+    bottom: 2rem;
+    right: 2rem;
+    background: rgba(20, 20, 23, 0.6);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    border-radius: 16px; /* Cuadrado redondeado en vez de círculo total */
+    transition: all 0.3s ease;
+}
+
+.library-mode-btn svg {
+    width: 26px;
+    height: 26px;
+    opacity: 0.8;
+}
+
+.library-mode-btn:hover {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4); /* Glow morado */
+}
+
+.library-mode-btn:hover svg {
+    opacity: 1;
+    color: white;
+}
+
+/* Ajustes Responsive para que el overlap no rompa el móvil */
+@media (max-width: 768px) {
+    main#online-content {
+        margin-top: -5vh; /* Menos subida en móvil */
+        background: linear-gradient(to bottom, transparent 0%, #0b0b0b 10%);
+    }
+}

desktop/views/css/marketplace.css

@@ -1,390 +1,267 @@
-.hero-spacer {
+:root {
-    height: var(--nav-height);
+    --bg-base: #0b0b0b;
-    width: 100%;
+    --bg-card: rgba(255, 255, 255, 0.03);
+    --bg-card-hover: rgba(255, 255, 255, 0.08);
+    --border-subtle: rgba(255, 255, 255, 0.08);
+    --color-primary: #8b5cf6;
+    --color-primary-glow: rgba(139, 92, 246, 0.5);
+    --color-text-main: #ffffff;
+    --color-text-muted: #a1a1aa;
+    --nav-height: 70px;
 }
 
-.marketplace-subtitle {
+body {
-    font-size: 1.1rem;
+    background-color: var(--bg-base);
-    color: var(--color-text-secondary);
+    color: var(--color-text-main);
-}
+    font-family: system-ui, -apple-system, sans-serif;
-
-.filter-controls {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.filter-label {
-    font-size: 0.9rem;
-    color: var(--color-text-secondary);
-    font-weight: 600;
-}
-
-.filter-select {
-    padding: 0.6rem 2rem 0.6rem 1.25rem;
-    border-radius: 999px;
-    background: var(--color-bg-elevated-hover);
-    color: var(--color-text-primary);
-    border: 1px solid rgba(255,255,255,0.1);
-    appearance: none;
-    font-weight: 600;
-
-    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
-    background-repeat: no-repeat;
-    background-position: right 0.75rem center;
-    background-size: 1em;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.filter-select:hover {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 8px var(--color-primary-glow);
-}
-
-.marketplace-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 1rem;
-    padding-top: 1rem;
-}
-
-.extension-card {
-    background: var(--bg-surface);
-    border: 1px solid rgba(255,255,255,0.05);
-    border-radius: var(--radius-md);
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    transition: all 0.2s;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-    min-height: 140px;
-    position: relative;
-    overflow: hidden;
-}
-
-.extension-card:hover {
-    background: var(--color-bg-elevated-hover);
-    transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
-}
-
-.card-content-wrapper {
-    flex-grow: 1;
-    margin-bottom: 0.5rem;
-}
-
-.extension-icon {
-    width: 50px;
-    height: 50px;
-    border-radius: 8px;
-    object-fit: contain;
-    margin-bottom: 0.75rem;
-    border: 2px solid var(--color-primary);
-    background-color: var(--color-bg-base);
-    flex-shrink: 0;
-    box-shadow: 0 0 10px var(--color-primary-glow);
-}
-
-.extension-name {
-    font-size: 1.1rem;
-    font-weight: 700;
     margin: 0;
-    color: var(--color-text-primary);
+    overflow-x: hidden;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
 }
 
-.extension-status-badge {
+.nav-spacer { height: var(--nav-height); width: 100%; }
-    font-size: 0.75rem;
+
-    font-weight: 600;
+.content-container {
-    padding: 0.15rem 0.5rem;
+    max-width: 1400px;
-    border-radius: 999px;
+    margin: 0 auto;
-    margin-top: 0.4rem;
+    padding: 2rem 1.5rem 5rem;
-    display: inline-block;
-    letter-spacing: 0.5px;
 }
 
-.badge-installed {
+/* --- Header & Config --- */
-    background: rgba(34, 197, 94, 0.2);
+.mp-header { margin-bottom: 3rem; }
-    color: #4ade80;
-    border: 1px solid rgba(34, 197, 94, 0.3);
-}
 
-.badge-local {
+.header-top {
-    background: rgba(251, 191, 36, 0.2);
-    color: #fcd34d;
-    border: 1px solid rgba(251, 191, 36, 0.3);
-}
-
-.extension-action-button {
-    width: 100%;
-    padding: 0.6rem 1rem;
-    border-radius: 999px;
-    font-weight: 700;
-    font-size: 0.9rem;
-    border: none;
-    cursor: pointer;
-    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
-    margin-top: auto;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.btn-install {
-    background: var(--color-primary);
-    color: white;
-}
-.btn-install:hover {
-    background: #a78bfa;
-    transform: scale(1.02);
-    box-shadow: 0 0 15px var(--color-primary-glow);
-}
-
-.btn-uninstall {
-    background: #dc2626;
-    color: white;
-    margin-top: auto;
-}
-
-.btn-uninstall:hover {
-    background: #ef4444;
-    transform: scale(1.02);
-    box-shadow: 0 0 15px rgba(220, 38, 38, 0.4);
-}
-
-.extension-card.skeleton {
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
     justify-content: space-between;
-
-    box-shadow: none;
-    transform: none;
-}
-.extension-card.skeleton:hover {
-    background: var(--bg-surface);
-    box-shadow: none;
-    transform: none;
-}
-.skeleton-icon {
-    width: 50px;
-    height: 50px;
-    border-radius: 8px;
-    margin-bottom: 0.75rem;
-
-    border: 2px solid rgba(255,255,255,0.05);
-}
-.skeleton-text.title-skeleton {
-    height: 1.1em;
-    margin-bottom: 0.25rem;
-}
-.skeleton-text.text-skeleton {
-    height: 0.7em;
-    margin-bottom: 0;
-}
-.skeleton-button {
-    width: 100%;
-    height: 32px;
-    border-radius: 999px;
-    margin-top: auto;
-}
-
-.section-title {
-    font-size: 1.8rem;
-    font-weight: 800;
-    color: var(--color-text-primary);
-}
-
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.85);
-    backdrop-filter: blur(5px);
-    display: flex;
-    justify-content: center;
     align-items: center;
-    z-index: 5000;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease-in-out;
-}
-
-.modal-overlay:not(.hidden) {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.modal-content {
-    background: var(--bg-surface);
-    color: var(--color-text-primary);
-    padding: 2.5rem;
-    border-radius: var(--radius-lg);
-    width: 90%;
-    max-width: 450px;
-    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 20px var(--color-primary-glow);
-    border: 1px solid rgba(255,255,255,0.1);
-    transform: translateY(-50px);
-    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease-in-out;
-    opacity: 0;
-}
-
-.modal-overlay:not(.hidden) .modal-content {
-    transform: translateY(0);
-    opacity: 1;
-}
-
-#modalTitle {
-    font-size: 1.6rem;
-    font-weight: 800;
-    margin-top: 0;
-    color: var(--color-primary);
-    border-bottom: 2px solid rgba(255,255,255,0.05);
-    padding-bottom: 0.75rem;
-    margin-bottom: 1.5rem;
-}
-
-#modalMessage {
-    font-size: 1rem;
-    line-height: 1.6;
-    color: var(--color-text-secondary);
     margin-bottom: 2rem;
 }
 
-.modal-actions {
+.page-title {
-    display: flex;
+    font-size: 2.5rem;
-    justify-content: flex-end;
-    gap: 1rem;
-}
-
-.modal-button {
-
-    padding: 0.6rem 1.5rem;
-    border-radius: 999px;
-    font-weight: 700;
-    font-size: 0.9rem;
-    border: none;
-    cursor: pointer;
-    transition: background 0.2s, transform 0.2s;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.modal-button.btn-install {
-    background: var(--color-primary);
-    color: white;
-}
-.modal-button.btn-install:hover {
-    background: #a78bfa;
-    transform: scale(1.02);
-}
-
-.modal-button.btn-uninstall {
-    background: #dc2626;
-    color: white;
-}
-.modal-button.btn-uninstall:hover {
-    background: #ef4444;
-    transform: scale(1.02);
-}
-
-.extension-author {
-    font-size: 0.8rem;
-    color: var(--color-text-secondary);
-    display: block;
-    margin-bottom: 0.5rem;
-}
-
-.extension-tags {
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-
-.badge-available {
-    background: rgba(59, 130, 246, 0.2);
-    color: #60a5fa;
-    border: 1px solid rgba(59, 130, 246, 0.3);
-}
-
-.nsfw-ext {
-    border-color: rgba(220, 38, 38, 0.3);
-}
-
-.broken-ext {
-    filter: grayscale(0.8);
-    opacity: 0.7;
-    border: 1px dashed #ef4444; /* Borde rojo discontinuo */
-}
-
-.broken-ext:hover {
-    transform: none; /* Evitamos que se mueva al pasar el ratón si está rota */
-}
-
-/* Estilos para los Tabs */
-.tabs-container {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-    border-bottom: 1px solid rgba(255,255,255,0.1);
-    padding-bottom: 0.5rem;
-}
-
-.tab-button {
-    background: none;
-    border: none;
-    color: var(--color-text-secondary);
-    font-size: 1.1rem;
-    font-weight: 700;
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-    transition: all 0.3s;
-    position: relative;
-}
-
-.tab-button.active {
-    color: var(--color-primary);
-}
-
-.tab-button.active::after {
-    content: '';
-    position: absolute;
-    bottom: -0.6rem;
-    left: 0;
-    width: 100%;
-    height: 3px;
-    background: var(--color-primary);
-    border-radius: 999px;
-    box-shadow: 0 0 10px var(--color-primary-glow);
-}
-
-/* Títulos de Secciones en Marketplace */
-.marketplace-section-title {
-    font-size: 1.4rem;
     font-weight: 800;
-    margin: 2rem 0 1rem 0;
+    margin: 0;
-    color: var(--color-text-primary);
+    background: linear-gradient(to right, #fff, #a1a1aa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Buttons */
+.btn-primary, .btn-secondary, .btn-danger {
+    padding: 0.6rem 1.2rem;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 8px;
-    text-transform: capitalize;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
 }
 
-.marketplace-section-title::before {
+.btn-primary {
-    content: '';
-    display: inline-block;
-    width: 4px;
-    height: 20px;
     background: var(--color-primary);
-    border-radius: 2px;
+    color: white;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
+}
+.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
+
+.btn-secondary {
+    background: rgba(255,255,255,0.05);
+    color: white;
+    border-color: var(--border-subtle);
+}
+.btn-secondary:hover { background: rgba(255,255,255,0.1); }
+
+.btn-danger {
+    background: rgba(220, 38, 38, 0.2);
+    color: #f87171;
+    border-color: rgba(220, 38, 38, 0.3);
+}
+.btn-danger:hover { background: rgba(220, 38, 38, 0.3); }
+
+/* Config Panel */
+.config-panel {
+    background: rgba(20, 20, 25, 0.95);
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    animation: slideDown 0.3s ease-out;
+}
+.config-panel.hidden { display: none; }
+@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+
+.config-desc { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.5rem; }
+.input-group { display: flex; gap: 10px; margin: 1rem 0; }
+.input-group input {
+    flex: 1;
+    background: rgba(0,0,0,0.3);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 0.8rem 1rem;
+    color: white;
+    font-family: inherit;
+}
+.input-group input:focus { outline: none; border-color: var(--color-primary); }
+.btn-text { background: none; border: none; color: var(--color-text-muted); text-decoration: underline; cursor: pointer; font-size: 0.85rem; }
+
+/* Tabs */
+.tabs-wrapper {
+    display: flex;
+    gap: 2rem;
+    border-bottom: 1px solid var(--border-subtle);
+    margin-bottom: 2rem;
+}
+.tab-btn {
+    background: none; border: none;
+    color: var(--color-text-muted);
+    font-size: 1.1rem;
+    font-weight: 700;
+    padding: 0.8rem 0;
+    cursor: pointer;
+    position: relative;
+    transition: color 0.2s;
+}
+.tab-btn.active { color: white; }
+.tab-btn.active::after {
+    content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px;
+    background: var(--color-primary); box-shadow: 0 0 10px var(--color-primary-glow);
 }
 
-.category-group {
+/* Toolbar */
-    margin-bottom: 3rem;
+.toolbar { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; }
+.filter-group { display: flex; gap: 1.5rem; }
+.select-wrapper { display: flex; flex-direction: column; gap: 6px; }
+.select-wrapper label { font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; }
+.select-wrapper select {
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    color: white;
+    padding: 0.6rem 2.5rem 0.6rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 16px;
+    font-weight: 600;
+    min-width: 140px;
+}
+.select-wrapper select:hover { background-color: var(--bg-card-hover); }
+
+/* --- Grid & Cards --- */
+.category-title {
+    font-size: 1.4rem; font-weight: 700; margin: 2.5rem 0 1rem;
+    color: white; display: flex; align-items: center; gap: 0.8rem;
+}
+.category-title::before { content: ''; display: block; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; box-shadow: 0 0 10px var(--color-primary); }
+
+.mp-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+
+.mp-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: 16px;
+    padding: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.mp-card:hover {
+    transform: translateY(-5px);
+    background: var(--bg-card-hover);
+    border-color: rgba(255,255,255,0.2);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+
+.card-header { display: flex; gap: 1rem; margin-bottom: 1rem; }
+.card-icon {
+    width: 56px; height: 56px; border-radius: 12px;
+    background: #000; object-fit: contain;
+    border: 1px solid var(--border-subtle);
+}
+.card-info { flex: 1; min-width: 0; }
+.card-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px 0; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.card-author { font-size: 0.85rem; color: var(--color-text-muted); }
+
+.card-desc {
+    font-size: 0.9rem; color: #ccc; line-height: 1.5;
+    margin-bottom: 1.2rem; flex: 1;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+
+.card-meta { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
+.pill {
+    font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
+    border: 1px solid transparent; text-transform: uppercase;
+}
+
+/* Specific Pills */
+.pill.lang-multi { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
+.pill.lang-es { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
+.pill.lang-en { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.3); }
+.pill.lang-jp { background: rgba(236, 72, 153, 0.15); color: #f472b6; border-color: rgba(236, 72, 153, 0.3); }
+
+.pill.status-installed { background: rgba(139, 92, 246, 0.15); color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); }
+.pill.nsfw { background: rgba(220, 38, 38, 0.1); color: #ef4444; border-color: rgba(220, 38, 38, 0.3); }
+
+.card-actions { margin-top: auto; }
+.btn-card { width: 100%; justify-content: center; }
+
+/* Empty States */
+.empty-state {
+    text-align: center; padding: 4rem 1rem;
+    background: var(--bg-card); border-radius: 16px; border: 1px dashed var(--border-subtle);
+}
+.empty-icon { width: 64px; height: 64px; margin-bottom: 1rem; opacity: 0.5; }
+.empty-text { font-size: 1.2rem; color: var(--color-text-muted); }
+
+/* Modal */
+.modal-overlay {
+    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+    background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);
+    display: flex; align-items: center; justify-content: center; z-index: 5000;
+}
+.modal-overlay.hidden { display: none; }
+.modal-box {
+    background: #18181b; border: 1px solid var(--border-subtle);
+    padding: 2rem; border-radius: 16px; width: 90%; max-width: 450px;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.7);
+}
+.modal-box h3 { margin-top: 0; color: white; }
+.modal-box p { color: #ccc; line-height: 1.5; }
+.modal-footer { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
+
+/* Añadir al final del CSS existente */
+
+.mp-card.card-nsfw {
+    border-color: rgba(220, 38, 38, 0.2);
+    background: rgba(220, 38, 38, 0.03);
+}
+
+.mp-card.card-nsfw:hover {
+    background: rgba(220, 38, 38, 0.08);
+    border-color: rgba(220, 38, 38, 0.4);
+}
+
+.select-wrapper select option {
+    background-color: #18181b; /* Color oscuro sólido (Zinc-900) */
+    color: #ffffff;            /* Texto blanco */
+    padding: 10px;             /* Espaciado (si el navegador lo permite) */
+}
+
+/* Opcional: Para navegadores basados en Webkit que permitan algo de estilo en hover */
+.select-wrapper select option:checked,
+.select-wrapper select option:hover {
+    background-color: var(--color-primary);
+    color: white;
 }

desktop/views/css/profile.css

@@ -283,6 +283,12 @@
     background-size: 1rem;
 }
 
+.minimal-select option {
+    background-color: var(--color-bg-elevated, #18181b);
+    color: #e4e4e7;
+    padding: 10px;
+}
+
 .minimal-select:hover { background: rgba(255,255,255,0.1); color: white; }
 .minimal-select:focus { border-color: var(--color-primary, #8b5cf6); color: white; }
 
@@ -704,4 +710,235 @@
     margin-bottom: 1.5rem;
 }
 
-.hidden { display: none !important; }
+.hidden { display: none !important; }
+
+/* =========================================
+   8. CUSTOM MODAL (Manual Match)
+   ========================================= */
+.custom-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+    transition: opacity 0.2s;
+}
+
+.custom-modal-overlay.hidden {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.custom-modal-content {
+    background: var(--color-bg-elevated, #18181b);
+    border: 1px solid var(--border-medium, rgba(255,255,255,0.1));
+    width: 100%;
+    max-width: 500px;
+    border-radius: 16px;
+    box-shadow: var(--shadow-lg);
+    transform: scale(1);
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    overflow: hidden;
+}
+
+.custom-modal-overlay.hidden .custom-modal-content {
+    transform: scale(0.95);
+}
+
+.modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 { margin: 0; font-size: 1.25rem; }
+
+.close-modal-btn {
+    background: transparent; border: none;
+    color: var(--color-text-muted); font-size: 1.5rem;
+    cursor: pointer; line-height: 1;
+}
+.close-modal-btn:hover { color: white; }
+
+.modal-body { padding: 1.5rem; }
+
+.modal-description {
+    color: var(--color-text-secondary);
+    font-size: 0.9rem; margin-bottom: 1.5rem;
+}
+
+.path-display {
+    background: rgba(0,0,0,0.3);
+    border: 1px solid rgba(255,255,255,0.1);
+    padding: 0.8rem;
+    border-radius: 6px;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 0.85rem;
+    color: #e4e4e7;
+    word-break: break-all;
+    margin-top: 0.5rem;
+    max-height: 100px;
+    overflow-y: auto;
+}
+
+.input-group { margin-bottom: 1.5rem; }
+.input-group label {
+    display: block; font-size: 0.85rem;
+    font-weight: 600; color: var(--color-text-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.modal-footer {
+    padding: 1rem 1.5rem;
+    background: rgba(0,0,0,0.2);
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+}
+
+/* =========================================
+   DOWNLOAD MANAGER (COMPACTO)
+   ========================================= */
+.downloads-monitor {
+    background: var(--color-bg-elevated, #18181b);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+}
+
+.monitor-header {
+    background: rgba(255, 255, 255, 0.03);
+    padding: 0.8rem 1.2rem; /* Header más delgado */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.monitor-title h3 {
+    margin: 0;
+    font-size: 0.9rem;
+    color: white;
+    display: flex; align-items: center; gap: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.monitor-list {
+    padding: 0;
+    max-height: 250px;
+    overflow-y: auto;
+}
+
+/* --- ITEM COMPACTO --- */
+.dl-item.compact {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.6rem 1.2rem; /* Mucho menos padding vertical */
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    background: transparent;
+    transition: background 0.2s;
+    gap: 1.5rem;
+}
+
+.dl-item.compact:last-child { border-bottom: none; }
+.dl-item.compact:hover { background: rgba(255,255,255,0.02); }
+
+/* Columna Izquierda: Nombres */
+.dl-left-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    flex: 1; /* Ocupa el espacio disponible */
+    min-width: 0; /* Permite truncar texto */
+}
+
+.dl-filename {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #f4f4f5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: 'Consolas', monospace;
+    margin-bottom: 2px;
+}
+
+.dl-folder {
+    font-size: 0.75rem;
+    color: #71717a;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dl-folder svg {
+    color: var(--color-primary, #8b5cf6);
+    opacity: 0.8;
+}
+
+/* Columna Derecha: Progreso y Stats */
+.dl-right-col {
+    width: 40%; /* Ancho fijo para la zona de progreso */
+    max-width: 300px;
+    min-width: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+}
+
+.dl-meta-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.7rem;
+    color: #a1a1aa;
+    font-weight: 500;
+}
+
+.dl-status-text.completed { color: #4ade80; }
+.dl-status-text.failed { color: #ef4444; }
+
+/* Barra de progreso más fina */
+.dl-progress-track {
+    width: 100%;
+    height: 4px; /* Barra delgada */
+    background: rgba(255,255,255,0.08);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.dl-progress-fill {
+    height: 100%;
+    background: var(--color-primary, #8b5cf6);
+    border-radius: 2px;
+    transition: width 0.3s ease-out;
+    width: 0%;
+}
+
+.dl-progress-fill.completed { background: #4ade80; }
+.dl-progress-fill.failed { background: #ef4444; }
+
+/* Responsive para móviles */
+@media (max-width: 600px) {
+    .dl-item.compact {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.8rem;
+    }
+    .dl-right-col { width: 100%; max-width: none; }
+}

desktop/views/css/room.css

@@ -0,0 +1,853 @@
+/* =========================================
+   1. VARIABLES & RESET
+   ========================================= */
+:root {
+    --brand-color: #8b5cf6;
+    --brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
+    --glass-bg: rgba(20, 20, 20, 0.6);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-blur: blur(12px);
+    --text-main: #ffffff;
+    --text-muted: rgba(255, 255, 255, 0.6);
+}
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+/* =========================================
+   2. UTILITIES & ANIMATIONS
+   ========================================= */
+.spinner {
+    width: 24px;
+    height: 24px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
+    border-top-color: var(--brand-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes slideUp { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
+@keyframes slideDown { from { transform: translateX(-50%) translateY(-20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
+@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes scaleIn { from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
+@keyframes toastSlideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes toastFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); visibility: hidden; } }
+@keyframes pulse {
+    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
+    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+}
+
+/* =========================================
+   3. BUTTONS & INPUTS
+   ========================================= */
+.btn-icon-glass, .btn-icon-small, .modal-close {
+    appearance: none;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    color: #eee;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.btn-icon-glass { width: 36px; height: 36px; backdrop-filter: blur(8px); }
+.btn-icon-small { padding: 6px; }
+.modal-close { width: 32px; height: 32px; position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.1); }
+
+.btn-icon-glass:hover, .btn-icon-small:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-1px);
+    color: white;
+}
+.modal-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }
+
+.btn-glass-primary {
+    display: flex; align-items: center; gap: 8px;
+    background: rgba(139, 92, 246, 0.25);
+    border: 1px solid rgba(139, 92, 246, 0.4);
+    color: white;
+    padding: 0 16px; height: 36px;
+    border-radius: 10px; font-weight: 600; font-size: 0.9rem;
+    cursor: pointer; backdrop-filter: blur(8px);
+    transition: all 0.2s;
+}
+.btn-glass-primary:hover {
+    background: rgba(139, 92, 246, 0.4);
+    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
+    transform: translateY(-1px);
+}
+
+.btn-confirm, .btn-primary {
+    background: var(--brand-color);
+    border: none; color: white;
+    padding: 10px 24px; border-radius: 10px;
+    font-weight: 700; cursor: pointer;
+    transition: all 0.2s;
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+}
+.btn-confirm:hover, .btn-primary:hover { background: #7c3aed; transform: translateY(-2px); }
+.btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.btn-confirm.full-width { width: 100%; }
+
+.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; }
+
+.btn-quick-action {
+    display: flex; align-items: center; gap: 6px;
+    height: 34px; padding: 0 12px;
+    background: rgba(139, 92, 246, 0.15);
+    border: 1px solid rgba(139, 92, 246, 0.3);
+    border-radius: 8px; color: #d8b4fe;
+    font-size: 0.85rem; font-weight: 600;
+    cursor: pointer; transition: all 0.2s;
+}
+.btn-quick-action:hover {
+    background: var(--brand-color); border-color: var(--brand-color);
+    color: white; transform: translateY(-1px);
+}
+#copy-invite-btn { transition: all 0.3s ease; }
+#copy-invite-btn:hover { transform: scale(1.05); }
+#copy-invite-btn:active { transform: scale(0.95); }
+
+/* Inputs */
+input[type="text"], input[type="password"], input[type="number"], .form-input {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white; padding: 12px 16px;
+    border-radius: 10px; font-size: 1rem;
+    outline: none; transition: border-color 0.2s;
+}
+input:focus, .form-input:focus { border-color: var(--brand-color); background: rgba(255, 255, 255, 0.08); }
+input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+input[type=number] { -moz-appearance: textfield; }
+
+/* Custom Select Wrappers */
+.quick-select-wrapper {
+    position: relative; display: flex; align-items: center;
+    height: 34px; background: rgba(255, 255, 255, 0.03);
+    border-radius: 8px; transition: all 0.2s;
+    padding: 0 8px; min-width: 110px;
+}
+.quick-select-wrapper:hover { background: rgba(255, 255, 255, 0.08); }
+.quick-select-wrapper svg { pointer-events: none; color: var(--text-muted); margin-right: 6px; flex-shrink: 0; }
+.select-arrow { font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); pointer-events: none; margin-left: 4px; }
+
+.quick-select, .glass-select-sm {
+    appearance: none; -webkit-appearance: none;
+    background: transparent; border: none;
+    color: #fff; width: 100%; height: 100%;
+    cursor: pointer; outline: none; position: relative; z-index: 2;
+}
+.glass-select-sm {
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 0 32px 0 12px; height: 32px; line-height: 30px;
+    border-radius: 8px; font-size: 0.85rem; font-weight: 600;
+    max-width: 140px; white-space: nowrap; text-overflow: ellipsis;
+    background-image: url("data:image/svg+xml,..."); /* SVG truncated for brevity */
+    background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
+}
+.quick-select option, .glass-select-sm option { background: #1a1a1a; color: #eee; }
+
+/* =========================================
+   4. LAYOUT
+   ========================================= */
+.room-layout {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    height: 100vh; overflow: hidden;
+    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.room-layout.chat-hidden { grid-template-columns: 1fr 0px !important; }
+
+/* Video Area */
+.video-area {
+    display: flex; flex-direction: column;
+    background: #000; flex: 1; min-height: 0;
+    overflow: hidden; position: relative;
+}
+
+/* =========================================
+   5. HEADER
+   ========================================= */
+.room-header {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 0 24px; height: 64px;
+    background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+    z-index: 20; flex-shrink: 0;
+}
+
+.header-left, .header-right { display: flex; align-items: center; gap: 16px; flex: 1; }
+.header-right { justify-content: flex-end; }
+.header-center { flex: 2; display: flex; justify-content: center; z-index: 50; }
+
+.room-info { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
+#room-name { margin: 0; font-size: 1rem; font-weight: 700; color: white; letter-spacing: -0.01em; }
+.np-fade { display: flex; align-items: center; opacity: 0.7; font-size: 0.8rem; gap: 6px; margin-top: 2px; }
+.np-title { color: #ccc; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.np-sep { color: #555; }
+.np-badge { background: rgba(255, 255, 255, 0.1); color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
+
+/* Header Controls */
+.quick-controls-group {
+    display: flex; align-items: center; gap: 4px;
+    background: rgba(15, 15, 15, 0.85);
+    backdrop-filter: blur(16px);
+    padding: 4px; height: 44px;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s ease;
+}
+.quick-controls-group:hover { border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
+
+.control-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.1); margin: 0 4px; }
+
+/* Sub/Dub Toggle */
+.sd-toggle.small {
+    height: 34px; min-width: 86px;
+    background: transparent; border: none;
+    display: flex; position: relative; cursor: pointer; box-sizing: border-box;
+    padding: 2px;
+}
+.sd-toggle.small .sd-bg {
+    position: absolute; top: 2px; left: 2px;
+    width: calc(50% - 2px); height: calc(100% - 4px);
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 6px;
+    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
+.sd-toggle.small .sd-option {
+    flex: 1; z-index: 2;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 0.75rem; font-weight: 700;
+    color: rgba(255,255,255,0.4);
+    transition: color 0.2s; user-select: none;
+}
+.sd-toggle.small .sd-option.active { color: #fff; }
+
+.viewers-pill {
+    display: flex; align-items: center; gap: 6px;
+    background: rgba(0,0,0,0.3); padding: 0 10px;
+    border-radius: 20px; border: 1px solid rgba(255,255,255,0.05);
+    font-size: 0.8rem; color: #aaa; height: 32px;
+}
+
+#toggle-chat-btn { position: relative; }
+#toggle-chat-btn.has-unread::after {
+    content: ''; position: absolute; top: 2px; right: 2px;
+    width: 10px; height: 10px; background-color: #ef4444;
+    border: 2px solid #1a1a1a; border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+
+/* =========================================
+   6. PLAYER
+   ========================================= */
+.player-wrapper {
+    display: flex !important; flex-direction: column; flex: 1;
+    width: 100%; height: auto !important; min-height: 0;
+    position: relative !important; z-index: 1 !important;
+    background: transparent !important; overflow: hidden;
+}
+.player-container { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }
+.video-frame {
+    flex: 1; min-height: 0; position: relative;
+    background: #000; display: flex; align-items: center; justify-content: center;
+}
+#player { width: 100%; height: 100%; max-height: 100%; }
+#subtitles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
+
+.custom-controls {
+    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 60;
+    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
+    padding: 20px 10px 10px;
+}
+.controls-left { display: flex; align-items: center; gap: 10px; }
+.time-display { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: #ddd; min-width: fit-content; }
+
+/* Hidden Legacy Buttons */
+#download-btn, #manual-match-btn, #server-select, #extension-select, #sd-toggle, .side-nav-btn { display: none !important; }
+
+/* Settings Panel */
+.settings-panel {
+    position: absolute; bottom: 70px; right: 20px; z-index: 1000;
+    max-height: 60vh; overflow-y: auto;
+    background: rgba(15, 15, 15, 0.95);
+    border: 1px solid var(--glass-border); border-radius: 8px;
+}
+
+/* Video Toasts */
+.video-toast-container {
+    position: absolute; bottom: 100px; left: 20px; z-index: 80;
+    display: flex; flex-direction: column; gap: 10px;
+    pointer-events: none; max-width: 400px;
+}
+.video-toast {
+    display: flex; align-items: center; gap: 10px;
+    background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(8px);
+    padding: 8px 12px; border-radius: 8px;
+    border-left: 3px solid var(--brand-color);
+    color: white; font-size: 0.9rem;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    animation: toastSlideIn 0.3s ease forwards, toastFadeOut 0.5s ease 4.5s forwards;
+    pointer-events: auto; opacity: 0;
+}
+.toast-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
+.toast-content { display: flex; flex-direction: column; line-height: 1.2; }
+.toast-user { font-weight: 700; font-size: 0.8rem; color: #a78bfa; }
+.toast-msg { color: #eee; margin-top: 2px; }
+.video-toast.system-toast {
+    border-left-color: #9ca3af; background: rgba(20, 20, 20, 0.7);
+    justify-content: center; padding: 6px 12px; min-height: auto;
+}
+.video-toast.system-toast .toast-msg { font-size: 0.85rem; font-style: italic; color: rgba(255, 255, 255, 0.8); margin: 0; }
+
+/* =========================================
+   7. CHAT SIDEBAR
+   ========================================= */
+.chat-sidebar {
+    display: flex; flex-direction: column; height: 100%;
+    background: rgba(15, 15, 15, 0.95);
+    border-left: 1px solid var(--glass-border); overflow: hidden;
+}
+.room-layout.chat-hidden .chat-sidebar { opacity: 0; pointer-events: none; border-left: none; }
+
+.chat-header {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 16px 20px; border-bottom: 1px solid var(--glass-border);
+}
+.chat-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: white; }
+
+.sidebar-tabs {
+    display: flex; width: 100%; flex: 0 0 auto; height: 50px;
+    border-bottom: 1px solid var(--glass-border); background: rgba(0,0,0,0.2);
+}
+.tab-btn {
+    flex: 1; height: 100%; padding: 0;
+    display: flex; align-items: center; justify-content: center;
+    background: transparent; border: none; border-bottom: 2px solid transparent;
+    color: var(--text-muted); font-weight: 600; cursor: pointer;
+    transition: all 0.2s;
+}
+.tab-btn:hover { background: rgba(255,255,255,0.05); color: white; }
+.tab-btn.active { border-bottom-color: var(--brand-color); color: white; background: rgba(255,255,255,0.02); }
+
+.tab-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
+
+/* Users List */
+.users-list {
+    padding: 12px; border-bottom: 1px solid var(--glass-border);
+    max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.2);
+}
+.user-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; margin-bottom: 4px; }
+.user-item:hover { background: rgba(255, 255, 255, 0.05); }
+.user-avatar {
+    width: 32px; height: 32px; border-radius: 50%;
+    background: var(--brand-gradient);
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; color: white; font-size: 0.8rem;
+}
+.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
+.user-name { flex: 1; font-size: 0.9rem; color: white; }
+.user-badge { font-size: 0.7rem; background: var(--brand-color); color: white; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
+
+/* Chat Messages */
+.chat-messages {
+    flex: 1; overflow-y: auto; padding: 16px;
+    display: flex; flex-direction: column; gap: 12px; min-height: 0;
+}
+.chat-message { display: flex; gap: 10px; }
+.chat-message.system { justify-content: center; margin: 8px 0; }
+.chat-message.system .message-content {
+    background: rgba(255, 255, 255, 0.05); color: var(--text-muted);
+    font-size: 0.8rem; text-align: center; padding: 4px 12px; border-radius: 12px;
+}
+.message-avatar {
+    width: 36px; height: 36px; border-radius: 50%;
+    background: var(--brand-gradient);
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; color: white; font-size: 0.9rem; flex-shrink: 0;
+}
+.message-body { flex: 1; min-width: 0; }
+.message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+.message-username { font-weight: 600; color: white; font-size: 0.9rem; }
+.message-time { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
+.message-content { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; line-height: 1.4; word-wrap: break-word; }
+
+.chat-input { display: flex; gap: 8px; padding: 16px; border-top: 1px solid var(--glass-border); }
+.chat-input input {
+    flex: 1; background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--glass-border); color: white;
+    padding: 12px 16px; border-radius: 10px; outline: none;
+}
+.chat-input button {
+    background: var(--brand-color); border: none; color: white;
+    padding: 0 16px; border-radius: 10px; cursor: pointer; transition: background 0.2s;
+}
+.chat-input button:hover { background: #7c3aed; }
+
+/* =========================================
+   8. QUEUE TAB
+   ========================================= */
+.queue-list {
+    flex: 1; overflow-y: auto; padding: 10px;
+    display: flex; flex-direction: column; gap: 10px;
+}
+.queue-item {
+    display: flex; gap: 10px; padding: 10px;
+    background: rgba(255,255,255,0.05);
+    border-radius: 8px; border: 1px solid transparent;
+    position: relative; align-items: center; transition: transform 0.2s;
+}
+.queue-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
+.q-img { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
+.q-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
+.q-title { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.q-meta { font-size: 0.8rem; color: #aaa; }
+.q-actions { display: flex; flex-direction: column; gap: 4px; opacity: 0.7; transition: opacity 0.2s; }
+.queue-item:hover .q-actions { opacity: 1; }
+
+.q-btn {
+    background: rgba(255,255,255,0.1); border: none; color: white;
+    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
+    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
+}
+.q-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
+.q-btn.play:hover { background: var(--brand-color); }
+.q-btn.remove:hover { background: #ff6b6b; }
+.badge { background: var(--brand-color); padding: 1px 6px; border-radius: 10px; font-size: 0.7rem; margin-left: 6px; }
+.queue-empty { text-align: center; color: #666; margin-top: 40px; font-style: italic; }
+
+/* =========================================
+   9. MODALS
+   ========================================= */
+.modal-overlay {
+    position: fixed; inset: 0;
+    background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px);
+    display: none; align-items: center; justify-content: center;
+    z-index: 10000; opacity: 0; transition: opacity 0.3s ease;
+}
+.modal-overlay.show { display: flex; opacity: 1; }
+
+.modal-content {
+    background: rgba(20, 20, 20, 0.95);
+    border: 1px solid var(--glass-border); border-radius: 16px;
+    padding: 32px; max-width: 500px; width: 90%;
+    position: relative; transform: scale(0.9); transition: transform 0.3s ease;
+}
+.modal-overlay.show .modal-content { transform: scale(1); }
+.modal-title { margin: 0 0 24px 0; font-size: 1.5rem; font-weight: 800; color: white; }
+.modal-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
+.modal-header-row .modal-title { margin: 0; }
+
+.form-group { margin-bottom: 20px; }
+.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: white; }
+.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
+
+/* Join Info */
+.join-host-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; animation: fadeIn 0.5s ease; }
+.join-avatar-container {
+    width: 80px; height: 80px; border-radius: 50%; padding: 3px;
+    background: var(--brand-gradient); margin-bottom: 12px;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
+}
+.join-avatar-container img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #1a1a1a; background: #2a2a2a; }
+.join-text { font-size: 1.1rem; color: white; font-weight: 500; text-align: center; margin: 0; }
+.join-text span { font-weight: 700; color: #a78bfa; }
+
+/* Search Content */
+.anime-search-content { max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; }
+.search-bar { display: flex; gap: 12px; margin-bottom: 20px; }
+.search-bar button {
+    background: var(--brand-color); border: none; color: white;
+    padding: 12px 24px; border-radius: 10px; font-weight: 700; cursor: pointer;
+}
+.anime-results {
+    flex: 1; overflow-y: auto; display: flex; flex-direction: column;
+    gap: 12px; min-height: 0; max-height: 60vh; padding-right: 8px;
+}
+.anime-result-item, .search-item {
+    display: flex; gap: 16px; padding: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
+    cursor: pointer; text-decoration: none; color: inherit; transition: all 0.2s;
+}
+.anime-result-item:hover {
+    background: rgba(255, 255, 255, 0.08); border-color: var(--brand-color);
+    transform: translateX(4px);
+}
+.search-poster { width: 60px; height: 85px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
+.search-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
+.search-title { font-weight: 700; color: white; margin-bottom: 4px; font-size: 1rem; }
+.search-meta { font-size: 0.85rem; color: var(--text-muted); }
+
+/* Config Layout */
+.config-layout { display: flex; gap: 24px; margin-top: 20px; }
+.config-sidebar { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.config-cover {
+    width: 100%; aspect-ratio: 2/3; object-fit: cover;
+    border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
+    border: 1px solid var(--glass-border);
+}
+.config-main { flex: 1; display: flex; flex-direction: column; gap: 20px; }
+.cfg-section-title {
+    font-size: 0.85rem; text-transform: uppercase;
+    letter-spacing: 1px; color: rgba(255,255,255,0.5);
+    margin-bottom: 8px; font-weight: 700;
+}
+
+/* Chips & Toggles in Modal */
+.chips-grid { display: flex; flex-wrap: wrap; gap: 10px; }
+.chip {
+    padding: 8px 16px; background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
+    color: #ccc; font-size: 0.9rem; cursor: pointer;
+    transition: all 0.2s; user-select: none;
+}
+.chip:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
+.chip.active {
+    background: var(--brand-color); border-color: var(--brand-color);
+    color: white; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+}
+.cat-toggle { display: flex; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 10px; width: fit-content; }
+.cat-opt {
+    padding: 6px 16px; border-radius: 8px; font-size: 0.85rem; color: #888;
+    cursor: pointer; transition: all 0.2s; font-weight: 600;
+}
+.cat-opt.active { background: rgba(255,255,255,0.15); color: white; }
+.cat-opt.disabled { opacity: 0.3; pointer-events: none; text-decoration: line-through; }
+
+/* Episodes Grid */
+.episodes-grid-container {
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
+    gap: 8px; max-height: 280px; overflow-y: auto; padding: 10px;
+    background: rgba(0, 0, 0, 0.2); border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+.episodes-grid-container::-webkit-scrollbar { width: 4px; }
+.episodes-grid-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
+
+.ep-grid-btn {
+    background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #ccc; padding: 8px 0; border-radius: 6px; text-align: center;
+    font-size: 0.9rem; font-weight: 600; cursor: pointer;
+    transition: all 0.2s; user-select: none;
+}
+.ep-grid-btn:hover { background: white; color: black; transform: translateY(-2px); }
+.ep-grid-btn.selected, .ep-grid-btn.active {
+    background: var(--brand-color); color: white;
+    border-color: var(--brand-color); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+}
+
+.btn-text-tiny {
+    background: transparent; border: none; color: var(--brand-color);
+    font-size: 0.75rem; font-weight: 700; cursor: pointer; padding: 2px 6px;
+}
+.btn-text-tiny:hover { text-decoration: underline; }
+
+/* Manual Control */
+.ep-control {
+    display: flex; align-items: center; justify-content: space-between;
+    background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 12px; padding: 4px; width: 100%; height: 48px;
+    margin-top: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
+}
+.ep-btn {
+    width: 40px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.05);
+    color: white; border-radius: 8px; cursor: pointer; font-size: 1.2rem; transition: all 0.2s ease;
+}
+.ep-btn:hover { background: var(--brand-color); border-color: var(--brand-color); transform: translateY(-1px); }
+.ep-btn:active { transform: translateY(1px); }
+.ep-input {
+    flex: 1; min-width: 0; background: transparent; border: none;
+    color: white; text-align: center; font-size: 1.2rem; font-weight: 800;
+    outline: none; font-family: monospace;
+}
+.grid-loader { width: 100%; padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
+
+/* Modal Pagination */
+.modal-pagination {
+    display: flex; justify-content: center; align-items: center; gap: 15px;
+    margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+.modal-page-btn {
+    background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white; width: 30px; height: 30px; border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer; transition: all 0.2s;
+}
+.modal-page-btn:hover:not(:disabled) { background: white; color: black; }
+.modal-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.modal-page-info { font-size: 0.85rem; color: #888; font-weight: 700; }
+
+/* =========================================
+   10. MEDIA QUERIES (Combined)
+   ========================================= */
+@media (max-width: 1200px) {
+    .room-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
+    .room-layout.chat-hidden { grid-template-rows: 1fr 0px; }
+    .chat-sidebar {
+        height: 350px; border-left: none; border-top: 1px solid var(--glass-border);
+    }
+}
+
+@media (max-width: 600px) {
+    .config-layout { flex-direction: column; }
+    .config-sidebar { width: 100%; flex-direction: row; }
+    .config-cover { width: 80px; }
+    .ep-control { width: auto; flex: 1; }
+}
+
+/* =========================================
+   PERMISSIONS & MODERATION
+   ========================================= */
+
+.permissions-content {
+    max-width: 700px;
+    width: 90%;
+    max-height: 85vh;
+    overflow-y: auto;
+}
+
+.permissions-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 30px;
+}
+
+.permission-card {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    transition: all 0.2s;
+}
+
+.permission-card:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.user-info-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 180px;
+}
+
+.user-avatar-small {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--brand-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: white;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+}
+
+.user-avatar-small img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.user-details {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.user-name-text {
+    font-weight: 600;
+    color: white;
+    font-size: 0.95rem;
+}
+
+.guest-badge {
+    font-size: 0.7rem;
+    background: rgba(255, 255, 255, 0.1);
+    color: #aaa;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: 600;
+    width: fit-content;
+}
+
+.permissions-toggles {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.perm-toggle {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.perm-toggle input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--brand-color);
+}
+
+.perm-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+    transition: color 0.2s;
+}
+
+.perm-toggle:hover .perm-label {
+    color: white;
+}
+
+.perm-label svg {
+    opacity: 0.6;
+}
+
+.ban-btn {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    color: #ef4444;
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.85rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.ban-btn:hover {
+    background: rgba(239, 68, 68, 0.2);
+    border-color: #ef4444;
+    transform: translateY(-1px);
+}
+
+.banned-ips-section {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.section-title {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: rgba(255, 255, 255, 0.5);
+    margin-bottom: 12px;
+    font-weight: 700;
+}
+
+.banned-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.banned-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: rgba(239, 68, 68, 0.05);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    border-radius: 8px;
+}
+
+.banned-ip {
+    font-family: monospace;
+    color: #ef4444;
+    font-size: 0.9rem;
+}
+
+.unban-btn {
+    background: transparent;
+    border: 1px solid rgba(74, 222, 128, 0.3);
+    color: #4ade80;
+    padding: 4px 12px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.unban-btn:hover {
+    background: rgba(74, 222, 128, 0.1);
+    border-color: #4ade80;
+}
+
+.empty-state {
+    text-align: center;
+    color: #666;
+    font-style: italic;
+    padding: 20px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .permission-card {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .user-info-section {
+        min-width: auto;
+    }
+
+    .ban-btn {
+        width: 100%;
+        justify-content: center;
+    }
+}

desktop/views/css/schedule/schedule.css

@@ -1,363 +1,440 @@
 :root {
-    --bg-glass: rgba(18, 18, 21, 0.8);
+    --header-height: 140px;
-    --bg-cell: #0c0c0e;
-    --color-primary-glow: rgba(139, 92, 246, 0.3);
 }
 
 body {
-    margin: 0;
+    background-color: #050505;
-    background-color: var(--color-bg-base);
+    overflow-x: hidden;
-    color: var(--color-text-primary);
-    overflow: hidden;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-html.electron body {
-    padding-top: 0;
 }
 
 .ambient-bg {
-    position: absolute;
+    position: fixed;
-    inset: 0;
+    top: 0;
-    z-index: -1;
+    left: 0;
-    background-size: cover;
-    background-position: center;
-    opacity: 0.06;
-    filter: blur(120px) saturate(1.2);
-    transition: background-image 1s ease-in-out;
-    pointer-events: none;
-}
-
-.calendar-wrapper {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    padding: 3rem;
-    max-width: 1920px;
     width: 100%;
-    margin: 0 auto;
+    height: 100%;
+    background-size: cover;
+    background-position: center top;
+    opacity: 0.15;
+    filter: blur(80px) saturate(1.5);
+    z-index: -2;
+    transition: background-image 1s ease;
 }
 
-.calendar-controls {
+.bg-overlay {
-    padding: 1.5rem 0;
+    position: fixed;
+    inset: 0;
+    background: radial-gradient(circle at top, transparent 0%, #050505 80%);
+    z-index: -1;
+}
+
+.schedule-container {
+    padding: calc(var(--nav-height) + 2rem) 3rem 2rem 3rem;
+    max-width: 1800px;
+    margin: 0 auto;
+    min-height: 100vh;
+}
+
+.schedule-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-end;
-    flex-shrink: 0;
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+    flex-wrap: wrap;
+    gap: 1.5rem;
 }
 
-.month-selector {
+.page-title {
+    font-size: 2.5rem;
+    font-weight: 900;
+    margin: 0 0 0.5rem 0;
+    letter-spacing: -1px;
+}
+
+.header-left {
+    display: flex;
+    flex-direction: column;
+}
+
+.month-navigator {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.current-date-label {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--color-primary);
+    min-width: 180px;
+    text-align: center;
+}
+
+.nav-btn {
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: white;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    font-size: 1.2rem;
+    line-height: 0;
+}
+
+.nav-btn:hover {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+.header-controls {
     display: flex;
     align-items: center;
     gap: 1.5rem;
 }
 
-.month-title {
+.divider-vertical {
-    font-size: 2.2rem;
+    width: 1px;
-    font-weight: 800;
+    height: 30px;
-    letter-spacing: -0.03em;
+    background: rgba(255,255,255,0.1);
-    background: linear-gradient(to right, #fff, #a1a1aa);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    min-width: 350px;
 }
 
-.icon-btn {
+.toggle-group {
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(0,0,0,0.3);
-    border: 1px solid var(--border-subtle);
+    border: 1px solid rgba(255,255,255,0.1);
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
-    color: white;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: 0.2s;
-}
-
-.icon-btn:hover {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-    transform: translateY(-2px);
-}
-
-.controls-right {
-    display: flex;
-    gap: 1rem;
-}
-
-.view-toggles {
-    display: flex;
-    background: #0f0f12;
     padding: 4px;
     border-radius: 99px;
-    border: 1px solid var(--border-subtle);
+    display: flex;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+    gap: 4px;
 }
 
-.toggle-item {
+.toggle-btn {
-    padding: 10px 24px;
-    border-radius: 99px;
-    border: none;
     background: transparent;
+    border: none;
     color: var(--color-text-secondary);
+    padding: 6px 16px;
+    border-radius: 99px;
     font-weight: 600;
     font-size: 0.9rem;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.2s;
 }
 
-.toggle-item.active {
+.toggle-btn:hover { color: white; }
-    background: var(--color-primary);
+.toggle-btn.active {
-    color: white;
-    box-shadow: 0 2px 10px var(--color-primary-glow);
-}
-
-.calendar-board {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-lg);
     background: var(--color-bg-elevated);
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+    color: white;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 }
 
-.weekdays-grid {
+.view-switcher {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    border-bottom: 1px solid var(--border-subtle);
-    background: rgba(255, 255, 255, 0.02);
-    flex-shrink: 0;
-}
-
-.weekday-header {
-    padding: 16px;
-    text-align: center;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    font-weight: 800;
-    color: var(--color-text-secondary);
-    letter-spacing: 0.1em;
-    border-right: 1px solid var(--border-subtle);
-}
-
-.weekday-header:last-child {
-    border-right: none;
-}
-
-.days-grid {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    width: 100%;
-    overflow-y: auto;
-    flex: 1;
-
-    grid-auto-rows: minmax(180px, 1fr);
-    background: var(--color-bg-base);
-}
-
-.day-cell {
-    position: relative;
-    background: var(--bg-cell);
-    border-right: 1px solid var(--border-subtle);
-    border-bottom: 1px solid var(--border-subtle);
     display: flex;
-    flex-direction: column;
+    gap: 0.5rem;
-    padding: 12px;
-    transition: background 0.2s;
-    overflow: hidden;
 }
 
-.day-cell:nth-child(7n) {
+.view-btn {
-    border-right: none;
+    background: transparent;
-}
+    border: 1px solid rgba(255,255,255,0.1);
-
-.day-cell.empty {
-    background: rgba(0, 0, 0, 0.2);
-    pointer-events: none;
-}
-
-.day-cell:hover {
-    background: #16161a;
-}
-
-.day-cell.today {
-    background: rgba(139, 92, 246, 0.03);
-    box-shadow: inset 0 0 0 1px var(--color-primary);
-}
-
-.day-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-    z-index: 2;
-    pointer-events: none;
-}
-
-.day-number {
-    font-size: 1.1rem;
-    font-weight: 700;
     color: var(--color-text-secondary);
-    width: 32px;
+    width: 40px;
-    height: 32px;
+    height: 40px;
+    border-radius: 8px;
+    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    transition: all 0.2s;
 }
 
-.day-cell.today .day-number {
+.view-btn:hover { border-color: white; color: white; }
+.view-btn.active {
     background: var(--color-primary);
+    border-color: var(--color-primary);
     color: white;
-    box-shadow: 0 0 15px var(--color-primary-glow);
 }
 
-.today-label {
+.calendar-grid {
-    font-size: 0.65rem;
+    display: grid;
-    font-weight: 800;
+    grid-template-columns: repeat(7, 1fr);
-    color: var(--color-primary);
+    gap: 1px;
-    letter-spacing: 0.05em;
+    background: rgba(255,255,255,0.05);
-    text-transform: uppercase;
+    border: 1px solid rgba(255,255,255,0.05);
-    display: none;
+    border-radius: 12px;
-}
-
-.day-cell.today .today-label {
-    display: block;
-}
-
-.events-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    overflow-y: auto;
-    z-index: 2;
-    padding-right: 4px;
-}
-
-.events-list::-webkit-scrollbar {
-    width: 4px;
-}
-
-.events-list::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
-}
-
-.anime-chip {
-    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: 8px 10px;
-    border-radius: 8px;
-    font-size: 0.8rem;
-    color: #d4d4d8;
-    text-decoration: none;
-    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
-    cursor: pointer;
-    position: relative;
     overflow: hidden;
 }
 
-.anime-chip::before {
+.weekday-header {
-    content: "";
+    background: var(--color-bg-card);
-    position: absolute;
+    padding: 1rem;
-    left: 0;
+    text-align: center;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: var(--color-primary);
-    opacity: 0;
-    transition: opacity 0.2s;
-}
-
-.anime-chip:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    padding-left: 14px;
-}
-
-.anime-chip:hover::before {
-    opacity: 1;
-}
-
-.chip-title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: 500;
-    margin-right: 8px;
-}
-
-.chip-ep {
-    font-size: 0.7rem;
     font-weight: 700;
     color: var(--color-text-secondary);
-    background: rgba(0, 0, 0, 0.4);
+    font-size: 0.9rem;
-    padding: 2px 6px;
+    text-transform: uppercase;
-    border-radius: 4px;
+    letter-spacing: 1px;
-    white-space: nowrap;
 }
 
-.cell-backdrop {
+.day-cell {
-    position: absolute;
+    background: var(--color-bg-base);
-    inset: 0;
+    min-height: 160px;
-    background-size: cover;
+    max-height: 160px;
-    background-position: center;
+    padding: 0.8rem;
-    opacity: 0;
+    position: relative;
-    transition: opacity 0.4s ease;
+    display: flex;
-    filter: grayscale(100%) brightness(0.25);
+    flex-direction: column;
-    z-index: 1;
+    gap: 0.5rem;
-    pointer-events: none;
+
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
 }
 
-.day-cell:hover .cell-backdrop {
+.day-cell::-webkit-scrollbar { display: none; }
-    opacity: 1;
+.day-cell.empty { background: rgba(0,0,0,0.2); }
-}
+.day-cell.today { background: rgba(139, 92, 246, 0.05); box-shadow: inset 0 0 0 1px var(--color-primary); }
 
-.loader {
+.day-number {
-    position: fixed;
+    font-weight: 700;
-    bottom: 30px;
+    font-size: 1rem;
-    right: 30px;
+    color: var(--color-text-secondary);
-    background: #18181b;
+    margin-bottom: 4px;
-    border: 1px solid var(--border-subtle);
+    display: block;
-    padding: 12px 24px;
+}
-    border-radius: 99px;
+.today .day-number { color: var(--color-primary); }
+
+.anime-item-month {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    padding: 6px;
-    transform: translateY(100px);
+    background: rgba(255,255,255,0.03);
-    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    border-radius: 6px;
-    z-index: 1000;
+    text-decoration: none;
+    transition: 0.2s;
+    border-left: 2px solid transparent;
 }
 
-.loader.active {
+.anime-item-month:hover {
-    transform: translateY(0);
+    background: rgba(255,255,255,0.08);
+    transform: translateX(2px);
+}
+.anime-item-month.is-mine {
+    border-left-color: var(--color-success);
+    background: rgba(34, 197, 94, 0.05);
 }
 
-.spinner {
+.item-time { font-size: 0.75rem; color: var(--color-text-muted); font-family: monospace; }
-    width: 18px;
+.item-title { font-size: 0.8rem; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
-    height: 18px;
+
-    border: 2px solid rgba(255, 255, 255, 0.1);
+.week-container {
-    border-top-color: var(--color-primary);
+    display: flex;
-    border-radius: 50%;
+    flex-direction: column;
-    animation: spin 0.8s infinite linear;
+    gap: 2rem;
 }
 
-@keyframes spin {
+.week-nav {
-    to {
+    display: flex;
-        transform: rotate(360deg);
+    gap: 1rem;
+    overflow-x: auto;
+    padding-bottom: 1rem;
+    scrollbar-width: none;
+    mask-image: linear-gradient(to right, black 90%, transparent 100%);
+}
+.week-nav::-webkit-scrollbar { display: none; }
+
+.day-btn {
+    flex: 1;
+    min-width: 120px;
+
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: var(--color-text-secondary);
+
+    border-radius: 12px;
+    padding: 1rem;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.day-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: white;
+    transform: translateY(-2px);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.day-btn.active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+    box-shadow: 0 8px 20px var(--color-primary-glow);
+}
+
+.day-btn span.name {
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    opacity: 0.8;
+}
+
+.day-btn span.date {
+    font-size: 1.8rem;
+    font-weight: 800;
+    line-height: 1;
+}
+
+.week-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1.5rem;
+    animation: fadeInUp 0.4s ease;
+}
+
+.card-ep-badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(0,0,0,0.8);
+    color: var(--color-primary);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 800;
+    border: 1px solid rgba(139, 92, 246, 0.3);
+}
+
+.card.mine .card-img-wrap {
+    box-shadow: 0 0 0 2px var(--color-success);
+}
+.card.mine::after {
+    content: "IN LIST";
+    position: absolute;
+    top: 8px; left: 8px;
+    background: var(--color-success);
+    color: black;
+    font-size: 0.65rem;
+    font-weight: 900;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.loader-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.6);
+    backdrop-filter: blur(5px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+}
+.loader-overlay.active { opacity: 1; pointer-events: auto; }
+
+@media (max-width: 1024px) {
+    .schedule-container {
+        padding: 5rem 1.5rem 2rem 1.5rem;
     }
 }
+
+@media (max-width: 768px) {
+
+    .schedule-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1.5rem;
+    }
+
+    .header-left {
+        align-items: center;
+        width: 100%;
+    }
+
+    .header-controls {
+        flex-wrap: wrap;
+        justify-content: center;
+        width: 100%;
+        gap: 1rem;
+    }
+
+    .page-title {
+        font-size: 2rem;
+        text-align: center;
+    }
+
+    .calendar-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        background: transparent;
+        border: none;
+    }
+
+    .weekday-header, .day-cell.empty { display: none; }
+
+    .day-cell {
+        min-height: auto;
+        max-height: none;
+        overflow: visible;
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 12px;
+        background: var(--color-bg-elevated);
+    }
+
+    .week-nav {
+        margin: 0 -1.5rem;
+        padding: 0 1.5rem 1rem 1.5rem;
+    }
+
+    .day-btn {
+        min-width: 90px;
+        padding: 0.8rem;
+    }
+    .day-btn span.name { font-size: 0.75rem; }
+    .day-btn span.date { font-size: 1.5rem; }
+
+    .week-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.75rem;
+    }
+
+    .week-grid .card {
+        min-width: 0 !important;
+        width: 100% !important;
+        flex: none !important;
+    }
+
+    .card-content h3 { font-size: 0.8rem; }
+    .card-ep-badge { font-size: 0.65rem; padding: 2px 4px; }
+}
+
+@media (max-width: 380px) {
+    .header-controls {
+        gap: 0.5rem;
+    }
+    .toggle-btn {
+        padding: 6px 10px;
+        font-size: 0.8rem;
+    }
+    .nav-btn {
+        width: 28px;
+        height: 28px;
+    }
+    .current-date-label {
+        font-size: 1rem;
+        min-width: 140px;
+    }
+}

desktop/views/css/search.css

@@ -0,0 +1,410 @@
+/* search.css - Fixed & Unified */
+
+:root {
+    /* Dimensiones */
+    --sidebar-width: 260px;
+    --nav-height: 80px;
+    --content-max-width: 1800px;
+
+    /* Colores Base (Dark Mode) */
+    --c-bg-page: #09090b;       /* Zinc-950 */
+    --c-bg-input: #18181b;      /* Zinc-900 */
+    --c-bg-input-hover: #27272a;/* Zinc-800 */
+
+    /* Textos */
+    --c-text-main: #f4f4f5;     /* Zinc-100 */
+    --c-text-muted: #a1a1aa;    /* Zinc-400 */
+
+    /* Bordes y Acentos */
+    --c-border: rgba(255, 255, 255, 0.08);
+    --c-accent: #8b5cf6;        /* Violet-500 */
+}
+
+/* =========================================
+   1. LAYOUT & BASE
+   ========================================= */
+.app-layout {
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
+    max-width: var(--content-max-width);
+    min-height: 100vh;
+    padding-top: var(--nav-height);
+}
+
+.main-view {
+    padding: 2.5rem 3rem;
+    width: 100%;
+}
+
+/* =========================================
+   2. SIDEBAR & FILTROS (DISEÑO MEJORADO)
+   ========================================= */
+.filters-sidebar {
+    position: sticky;
+    top: var(--nav-height);
+    height: calc(100vh - var(--nav-height));
+    border-right: 1px solid var(--c-border);
+    padding: 2rem 1.5rem 2rem 0;
+    margin-left: 2rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    /* Scrollbar oculta */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+.filters-sidebar::-webkit-scrollbar { display: none; }
+
+.filter-group {
+    margin-bottom: 1.5rem;
+    position: relative;
+}
+
+.filter-group label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--c-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.8rem;
+    display: block;
+}
+
+/* --- Mode Switcher --- */
+.mode-switcher {
+    display: flex;
+    background: var(--c-bg-input);
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid var(--c-border);
+}
+
+.mode-btn {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--c-text-muted);
+    padding: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.mode-btn:hover { color: var(--c-text-main); }
+.mode-btn.active {
+    background: var(--c-bg-input-hover);
+    color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+/* --- Inputs y Selects Modernos (Boxed Style) --- */
+.custom-select select,
+.filter-input {
+    width: 100%;
+    background-color: var(--c-bg-input);
+    border: 1px solid var(--c-border);
+    border-radius: 8px;
+    color: var(--c-text-main);
+    padding: 10px 12px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    appearance: none;
+}
+
+/* Icono flecha para selects */
+.custom-select { position: relative; }
+.custom-select::after {
+    content: '';
+    position: absolute;
+    right: 12px; top: 50%;
+    transform: translateY(-50%);
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--c-text-muted);
+    pointer-events: none;
+}
+
+.custom-select select:focus,
+.filter-input:focus {
+    outline: none;
+    border-color: var(--c-accent);
+    background-color: var(--c-bg-page);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+}
+
+/* --- Checkbox Simple & Toggle --- */
+.checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 0;
+    cursor: pointer;
+}
+.checkbox-wrapper input[type="checkbox"] {
+    accent-color: var(--c-accent);
+    width: 18px; height: 18px;
+    cursor: pointer;
+}
+.checkbox-label {
+    font-size: 0.9rem;
+    color: var(--c-text-main);
+}
+.input-hint {
+    font-size: 0.7rem; color: var(--c-text-muted); margin-top: 4px; display: block;
+}
+
+/* =========================================
+   3. MULTISELECT AVANZADO (Searchable)
+   ========================================= */
+.multiselect-container {
+    background: var(--c-bg-input);
+    border: 1px solid var(--c-border);
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Buscador interno */
+.multiselect-search-wrapper {
+    padding: 8px;
+    border-bottom: 1px solid var(--c-border);
+    background: var(--c-bg-input);
+    position: sticky; top: 0; z-index: 2;
+}
+
+.multiselect-search-input {
+    width: 100%;
+    background: rgba(255,255,255,0.05);
+    border: none;
+    padding: 6px 10px;
+    border-radius: 4px;
+    color: var(--c-text-main);
+    font-size: 0.8rem;
+}
+.multiselect-search-input:focus { outline: none; background: rgba(255,255,255,0.1); }
+
+/* Lista Items */
+.multiselect-group {
+    max-height: 220px;
+    overflow-y: auto;
+    padding: 4px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--c-border) transparent;
+}
+.multiselect-group::-webkit-scrollbar { width: 6px; }
+.multiselect-group::-webkit-scrollbar-thumb { background-color: #3f3f46; border-radius: 3px; }
+
+/* Item Individual */
+.checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    color: var(--c-text-muted);
+    transition: background 0.15s;
+}
+
+.checkbox-item:hover { background-color: rgba(255,255,255,0.05); color: var(--c-text-main); }
+.checkbox-item.is-selected {
+    background-color: rgba(139, 92, 246, 0.15);
+    color: #ddd6fe;
+}
+
+/* Checkbox Custom */
+.checkbox-item input[type="checkbox"] {
+    appearance: none;
+    width: 16px; height: 16px;
+    border: 2px solid #52525b;
+    border-radius: 4px;
+    display: grid; place-content: center;
+    margin: 0;
+    background: transparent;
+}
+.checkbox-item input[type="checkbox"]::before {
+    content: ""; width: 8px; height: 8px;
+    transform: scale(0);
+    box-shadow: inset 1em 1em white;
+    transform-origin: center;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    background-color: white;
+    transition: 0.1s transform ease-in-out;
+}
+.checkbox-item input[type="checkbox"]:checked { background-color: var(--c-accent); border-color: var(--c-accent); }
+.checkbox-item input[type="checkbox"]:checked::before { transform: scale(1); }
+
+/* =========================================
+   4. HEADER & GRID RESULTADOS
+   ========================================= */
+.content-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 2.5rem;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+}
+.header-left h1 { font-size: 2.5rem; font-weight: 800; margin: 0; line-height: 1; color: var(--c-text-main); }
+#result-count { font-size: 0.9rem; color: var(--c-text-muted); margin-top: 5px; display: block; }
+
+/* Barra de búsqueda */
+.search-container { position: relative; width: 350px; max-width: 100%; }
+#main-search {
+    width: 100%;
+    background: var(--c-bg-input);
+    border: 1px solid var(--c-border);
+    border-radius: 12px;
+    padding: 12px 16px 12px 42px;
+    color: white;
+    font-size: 0.95rem;
+}
+#main-search:focus {
+    border-color: var(--c-accent);
+    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
+    outline: none;
+}
+.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-text-muted); font-size: 1.1rem; }
+.loader-spinner {
+    position: absolute; right: 12px; top: 50%; margin-top: -8px;
+    width: 16px; height: 16px;
+    border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--c-accent);
+    border-radius: 50%; animation: spin 0.8s linear infinite; display: none;
+}
+
+/* Grid */
+.media-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+    gap: 3rem 2rem;
+    padding-bottom: 2rem;
+}
+
+/* Cards */
+.card { cursor: pointer; display: flex; flex-direction: column; }
+.card:hover .card-img-wrap img { transform: scale(1.05); }
+.card:hover h3 { color: var(--c-accent); }
+
+.card-img-wrap {
+    width: 100%; aspect-ratio: 2 / 3;
+    border-radius: 12px; overflow: hidden;
+    background-color: var(--c-bg-input);
+    margin-bottom: 1rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
+
+.card-content h3 {
+    font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem 0;
+    color: var(--c-text-main);
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.card-content p { font-size: 0.85rem; color: var(--c-text-muted); margin: 0; }
+
+/* =========================================
+   5. RESPONSIVE (MÓVIL)
+   ========================================= */
+
+/* Por defecto ocultamos los controles móviles en escritorio */
+.mobile-header-controls { display: none; }
+.overlay-backdrop {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
+    z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
+}
+.overlay-backdrop.active { opacity: 1; pointer-events: auto; }
+
+@media (max-width: 1024px) {
+    :root { --sidebar-width: 0px; }
+
+    .app-layout { display: block; }
+    .main-view { padding: 1.5rem; }
+
+    /* Mostrar controles de cabecera en móvil */
+    .mobile-header-controls {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 2rem;
+    }
+
+    .mobile-title { font-size: 1.25rem; font-weight: 700; color: var(--c-text-main); }
+
+    /* Botón hamburguesa */
+    .icon-btn-plain {
+        background: none; border: none; padding: 0;
+        color: var(--c-text-main); font-size: 1.5rem; cursor: pointer;
+    }
+
+    /* Sidebar Móvil (Drawer) */
+    .filters-sidebar {
+        position: fixed;
+        left: 0; top: 0;
+        height: 100dvh;
+        width: 85%; max-width: 320px;
+        background: var(--c-bg-page);
+        z-index: 1000;
+        transform: translateX(-100%);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        margin-left: 0;
+        padding: 2rem; /* Restauramos padding normal para el drawer */
+        box-shadow: 10px 0 30px rgba(0,0,0,0.5);
+        border-right: 1px solid var(--c-border);
+    }
+
+    .filters-sidebar.active { transform: translateX(0); }
+
+    .sidebar-header.mobile-only {
+        display: flex !important;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2rem 1rem; }
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+@media (max-width: 1024px) {
+    /* Aseguramos que el contenedor se muestre */
+    .mobile-header-controls {
+        display: flex !important;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+        width: 100%;
+        position: relative;
+        z-index: 5; /* Por encima de elementos flotantes */
+    }
+
+    /* Estilo explícito para el botón */
+    #toggle-sidebar {
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+        width: 44px; /* Tamaño táctil mínimo */
+        height: 44px;
+        background: transparent;
+        border: 1px solid var(--c-border); /* Borde sutil para verlo si falla el icono */
+        border-radius: 8px;
+        color: var(--c-text-main);
+        font-size: 1.5rem; /* Tamaño del icono */
+        cursor: pointer;
+        padding: 0;
+    }
+
+    #toggle-sidebar:active {
+        background-color: var(--c-bg-input-hover);
+    }
+
+    /* Ajuste del título móvil */
+    .mobile-title {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: var(--c-text-main);
+    }
+}

desktop/views/css/users.css

@@ -10,15 +10,29 @@
 .background-gradient {
     position: fixed;
     inset: 0;
-    background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
+    background:
-    radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
+        radial-gradient(
+            ellipse at top,
+            rgba(139, 92, 246, 0.15) 0%,
+            transparent 60%
+        ),
+        radial-gradient(
+            ellipse at bottom right,
+            rgba(59, 130, 246, 0.1) 0%,
+            transparent 50%
+        );
     z-index: 0;
     animation: gradientShift 10s ease infinite;
 }
 
 @keyframes gradientShift {
-    0%, 100% { opacity: 1; }
+    0%,
-    50% { opacity: 0.7; }
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
 }
 
 .content-container {
@@ -80,9 +94,8 @@
     box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
 }
 
-/* Badge de contraseña protegida */
 .user-card.has-password::after {
-    content: '🔒';
+    content: "🔒";
     position: absolute;
     top: 10px;
     left: 10px;
@@ -116,7 +129,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
+    background: linear-gradient(
+        135deg,
+        rgba(139, 92, 246, 0.1) 0%,
+        rgba(59, 130, 246, 0.05) 100%
+    );
 }
 
 .user-avatar-placeholder svg {
@@ -131,7 +148,12 @@
     left: 0;
     right: 0;
     padding: 1rem 1.5rem;
-    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.95) 0%,
+        rgba(0, 0, 0, 0.7) 50%,
+        transparent 100%
+    );
     transform: translateY(100%);
     transition: transform 0.3s ease;
 }
@@ -168,7 +190,9 @@
     justify-content: center;
     cursor: pointer;
     opacity: 0;
-    transition: opacity 0.3s, background 0.2s;
+    transition:
+        opacity 0.3s,
+        background 0.2s;
     z-index: 20;
 }
 
@@ -205,7 +229,6 @@
     box-shadow: 0 10px 30px var(--color-primary-glow);
 }
 
-/* Modal Styles */
 .modal {
     display: none;
     position: fixed;
@@ -438,7 +461,6 @@ input[type="file"] {
     color: white;
 }
 
-/* Estilos para modal de password */
 .password-modal-content {
     padding: 1.5rem;
 }
@@ -461,7 +483,6 @@ input[type="file"] {
     margin-top: 0.1rem;
 }
 
-/* ESTILOS PARA MODAL DE ACCIONES INDIVIDUALES */
 .manage-actions-modal {
     display: flex;
     flex-direction: column;
@@ -673,10 +694,13 @@ input[type="file"] {
     border: 1px solid rgba(59, 130, 246, 0.4);
 }
 
-/* Animations */
 @keyframes fadeIn {
-    from { opacity: 0; }
+    from {
-    to { opacity: 1; }
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes fadeInDown {
@@ -720,22 +744,121 @@ input[type="file"] {
 }
 
 @keyframes shimmer {
-    0% { background-position: 200% 0; }
+    0% {
-    100% { background-position: -200% 0; }
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
 }
 
-/* Responsive */
 @media (max-width: 768px) {
+    .page-wrapper {
+        padding: 1rem;
+
+        align-items: flex-start;
+        padding-top: 2rem;
+    }
+
+    .header-section {
+        margin-bottom: 2rem;
+    }
+
     .page-title {
-        font-size: 2.5rem;
+        font-size: 2.2rem;
+        line-height: 1.1;
     }
 
     .users-grid {
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        grid-template-columns: repeat(2, 1fr);
-        gap: 1.5rem;
+        gap: 0.75rem;
+        max-width: 100%;
+    }
+
+    .user-name {
+        font-size: 1.1rem;
+        font-weight: 800;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+    }
+
+    .user-config-btn {
+        width: 44px;
+        height: 44px;
+        top: 5px;
+        right: 5px;
+        background: rgba(0, 0, 0, 0.6);
+        opacity: 1 !important;
+    }
+
+    .user-config-btn svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .btn-add-user {
+        width: 100%;
+        padding: 1.25rem;
+        font-size: 1.1rem;
+        margin-bottom: 3rem;
+    }
+}
+
+@media (max-width: 380px) {
+    .users-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .user-card {
+        aspect-ratio: 16/9;
+    }
+}
+
+@media (hover: none) {
+    .user-info {
+        transform: translateY(0);
+        background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.95) 0%,
+            rgba(0, 0, 0, 0.6) 50%,
+            transparent 100%
+        );
+        padding: 1rem;
+    }
+
+    .user-card:hover {
+        transform: none;
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .user-card:active {
+        transform: scale(0.97);
+        border-color: var(--color-primary);
+    }
+}
+
+@media (max-width: 768px) {
+    .modal {
+        align-items: flex-end;
     }
 
     .modal-content {
+        width: 100%;
+        max-width: 100%;
+        border-radius: 20px 20px 0 0;
+        max-height: 85vh;
         padding: 1.5rem;
+        overflow-y: auto;
+    }
+
+    .form-group input[type="text"],
+    .form-group input[type="password"] {
+        padding: 1.2rem;
+        font-size: 16px;
+    }
+
+    .btn-primary,
+    .btn-secondary {
+        padding: 1.2rem;
     }
 }

desktop/views/gallery/gallery.html

@@ -9,24 +9,13 @@
     <link rel="stylesheet" href="/views/css/gallery/gallery.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
-
     <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
     <link rel="stylesheet" href="/views/css/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>
-
 <main class="gallery-main">
     <div class="gallery-hero-placeholder"></div>
 
@@ -66,8 +55,10 @@
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/gallery/gallery.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>

desktop/views/gallery/image.html

@@ -12,20 +12,10 @@
   <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+  <script src="/src/scripts/room-modal.js"></script>
   <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="/gallery" class="back-btn">
   <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
   Back to Gallery
@@ -56,6 +46,7 @@
 </div>
 
 <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/gallery/image.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>

desktop/views/marketplace.html

@@ -8,67 +8,103 @@
     <link rel="stylesheet" href="/views/css/components/navbar.css">
     <link rel="stylesheet" href="/views/css/marketplace.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
+    <script src="/src/scripts/titlebar.js"></script>
+    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
 </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-spacer"></div>
+<div class="nav-spacer"></div>
 
-<main>
+<main class="content-container">
-    <section class="section">
-        <header class="section-header">
-            <div class="tabs-container">
-                <button class="tab-button active" data-tab="marketplace">Marketplace</button>
-                <button class="tab-button" data-tab="installed">My Extensions</button>
-            </div>
 
-            <div class="filter-controls">
+    <header class="mp-header">
-                <button id="btn-update-all" class="btn-blur hidden" style="margin-right: 10px; width: auto; padding: 0 15px;">
+        <div class="header-top">
-                    Update All
+            <h1 class="page-title">Extension Store</h1>
+            <div class="header-actions">
+                <button id="btn-configure" class="btn-secondary">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M12 2v2"/><path d="M12 22v-2"/><path d="m17 20.66-1-1.73"/><path d="M11 10.27 7 3.34"/><path d="m20.66 17-1.73-1"/><path d="m3.34 7 1.73 1"/><path d="M14 12h8"/><path d="M2 12h2"/><path d="m20.66 7-1.73 1"/><path d="m3.34 17 1.73-1"/><path d="m17 3.34-1 1.73"/><path d="m11 13.73-4 6.93"/></svg>
+                    Source Settings
                 </button>
-                <label for="extension-filter" class="filter-label">Filter by Type:</label>
-                <select id="extension-filter" class="filter-select">
-                    <option value="All">All Categories</option>
-                    <option value="image-board">Image Boards</option>
-                    <option value="anime-board">Anime Boards</option>
-                    <option value="book-board">Book Boards</option>
-                    <option value="Local">Local/Manual</option>
-                </select>
             </div>
-        </header>
-
-        <div id="marketplace-content">
         </div>
-    </section>
+
+        <div id="config-panel" class="config-panel hidden">
+            <div class="config-box">
+                <h3>Marketplace Source</h3>
+                <p class="config-desc">Enter a valid JSON URL to fetch extensions from.</p>
+                <div class="input-group">
+                    <input type="text" id="source-url-input" placeholder="https://example.com/marketplace.json">
+                    <button id="btn-save-source" class="btn-primary">Save & Reload</button>
+                </div>
+                <button id="btn-reset-source" class="btn-text">Reset to Default</button>
+            </div>
+        </div>
+
+        <div class="tabs-wrapper">
+            <button class="tab-btn active" data-tab="marketplace">Discover</button>
+            <button class="tab-btn" data-tab="installed">Installed</button>
+        </div>
+
+        <div class="toolbar" id="mp-toolbar">
+            <div class="filter-group">
+                <div class="select-wrapper">
+                    <label>Type</label>
+                    <select id="filter-type">
+                        <option value="All">All Types</option>
+                        <option value="anime-board">Anime</option>
+                        <option value="book-board">Manga/Books</option>
+                        <option value="image-board">Images</option>
+                    </select>
+                </div>
+                <div class="select-wrapper">
+                    <label>Language</label>
+                    <select id="filter-lang">
+                        <option value="All">Any Language</option>
+                        <option value="MULTI">Multi</option>
+                        <option value="en">English</option>
+                        <option value="es">Spanish</option>
+                        <option value="jp">Japanese</option>
+                    </select>
+                </div>
+
+                <div class="select-wrapper" style="justify-content: flex-end;">
+                    <button id="btn-toggle-nsfw" class="btn-secondary" style="height: 42px; margin-top: auto;">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
+                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                            <line x1="1" y1="1" x2="23" y2="23"></line>
+                        </svg>
+                        NSFW: Off
+                    </button>
+                </div>
+            </div>
+
+            <button id="btn-update-all" class="btn-primary hidden">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 21h5v-5"/></svg>
+                Update All
+            </button>
+        </div>
+    </header>
+
+    <div id="marketplace-content" class="mp-grid-wrapper"></div>
 
     <div id="customModal" class="modal-overlay hidden">
-        <div class="modal-content">
+        <div class="modal-box">
             <h3 id="modalTitle"></h3>
             <p id="modalMessage"></p>
-            <div class="modal-actions">
+            <div class="modal-footer">
-                <button id="modalConfirmButton" class="modal-button btn-uninstall hidden">Confirm</button>
+                <button id="modalCloseButton" class="btn-secondary">Cancel</button>
-                <button id="modalCloseButton" class="modal-button btn-install">OK</button>
+                <button id="modalConfirmButton" class="btn-danger hidden">Confirm</button>
             </div>
         </div>
     </div>
 </main>
 
 <script src="/src/scripts/utils/notification-utils.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/marketplace.js"></script>
-<script src="/src/scripts/titlebar.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>

desktop/views/profile.html

@@ -11,20 +11,10 @@
     <link rel="stylesheet" href="/views/css/profile.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar">
-    <div class="title-left">
-        <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
-        <span class="app-title">WaifuBoard</span>
-    </div>
-    <div class="title-right">
-        <button class="min">−</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
 
 <div class="main-wrapper">
     <section class="profile-header">
@@ -96,6 +86,22 @@
 
         <div id="section-local" class="tab-section">
 
+            <div id="downloads-monitor" class="downloads-monitor">
+                <div class="monitor-header">
+                    <div class="monitor-title">
+                        <span class="pulse-dot"></span>
+                        <h3>Download Manager</h3>
+                    </div>
+                    <div class="monitor-stats">
+                        <span id="dl-stat-active">0 Active</span>
+                        <span class="divider">•</span>
+                        <span id="dl-stat-failed">0 Failed</span>
+                    </div>
+                </div>
+                <div id="downloads-list-container" class="monitor-list">
+                </div>
+            </div>
+
             <div class="toolbar local-toolbar">
                 <div class="search-box">
                     <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
@@ -194,13 +200,50 @@
 
     </div>
 </div>
+<div id="manual-match-modal" class="custom-modal-overlay hidden">
+    <div class="custom-modal-content">
+        <div class="modal-header">
+            <h3>Fix Match</h3>
+            <button class="close-modal-btn" onclick="DashboardApp.Library.closeManualMatch()">×</button>
+        </div>
 
+        <div class="modal-body">
+            <p class="modal-description">Introduce el ID de AniList correcto para asociar este archivo local.</p>
+
+            <div class="input-group">
+                <label>File Path / Folder Name</label>
+                <div id="manual-match-path" class="path-display"></div>
+            </div>
+
+            <div class="input-group">
+                <label>AniList ID</label>
+                <input type="number" id="manual-match-id" class="stream-input" placeholder="Ej: 21 (One Piece)">
+            </div>
+        </div>
+
+        <div class="modal-footer">
+            <button class="btn-secondary" onclick="DashboardApp.Library.closeManualMatch()">Cancel</button>
+            <button class="btn-primary" onclick="DashboardApp.Library.submitManualMatch()">Confirm Match</button>
+        </div>
+    </div>
+</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">Download</a>
 </div>
+<div id="anilist-connect-modal" class="custom-modal-overlay hidden">
+    <div class="custom-modal-content">
+        <div class="modal-header">
+            <h3>AniList Integration</h3>
+            <button class="close-modal-btn" onclick="DashboardApp.User.closeAniListModal()">×</button>
+        </div>
 
+        <div class="modal-body" id="anilist-modal-body">
+        </div>
+    </div>
+</div>
 <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/utils/auth-utils.js"></script>

desktop/views/room.html

@@ -0,0 +1,296 @@
+<!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>Watch Party - WaifuBoard</title>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <script type="module">
+        import JASSUB from 'https://cdn.jsdelivr.net/npm/jassub@1.8.8/dist/jassub.es.js';
+        window.JASSUB = JASSUB;
+    </script>
+    <link rel="stylesheet" href="/views/css/globals.css" />
+    <link rel="stylesheet" href="/views/css/anime/player.css" />
+    <link rel="stylesheet" href="/views/css/room.css" />
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
+    <link rel="stylesheet" href="/views/css/components/titlebar.css"/>
+    <script src="/src/scripts/titlebar.js"></script>
+</head>
+<body>
+<div id="room-view">
+    <div class="room-layout" id="room-layout">
+        <div class="video-area">
+            <div class="room-header">
+                <div class="header-left">
+                    <div class="room-info">
+                        <h2 id="room-name">Loading...</h2>
+                        <div id="now-playing-info" class="np-fade">
+                            <span id="np-title" class="np-title">Waiting selection...</span>
+                            <span class="np-sep">•</span>
+                            <span id="np-episode" class="np-badge">Episode --</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="header-center" id="host-controls" style="display: none;">
+                    <div class="quick-controls-group">
+                        <div class="sd-toggle small" id="room-sd-toggle" data-state="sub">
+                            <div class="sd-bg"></div>
+                            <div class="sd-option active" data-val="sub">Sub</div>
+                            <div class="sd-option" data-val="dub">Dub</div>
+                        </div>
+
+                        <div class="control-divider"></div>
+
+                        <div class="quick-select-wrapper">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
+                            <select id="room-ext-select" class="quick-select" title="Extension">
+                                <option value="" disabled selected>Extension</option>
+                            </select>
+                            <div class="select-arrow">▼</div>
+                        </div>
+
+                        <div class="quick-select-wrapper">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
+                            <select id="room-server-select" class="quick-select" title="Server">
+                                <option value="" disabled selected>Server</option>
+                            </select>
+                            <div class="select-arrow">▼</div>
+                        </div>
+
+                        <div class="control-divider"></div>
+
+                        <button id="copy-invite-btn" class="btn-quick-action" title="Copy invite link" style="display:none;">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M10 13a5 5 0 0 0 7.07 0l1.41-1.41a5 5 0 0 0-7.07-7.07L10 5"/>
+                                <path d="M14 11a5 5 0 0 0-7.07 0L5.5 12.41a5 5 0 0 0 7.07 7.07L14 19"/>
+                            </svg>
+                            <span>Invite</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="header-right">
+                    <div class="viewers-pill">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                        <span id="room-viewers">0</span>
+                    </div>
+
+                    <button id="select-anime-btn" class="btn-glass-primary" style="display: none;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                    </button>
+
+                    <button id="toggle-chat-btn" class="btn-icon-glass" title="Toggle Chat">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
+                    </button>
+                </div>
+            </div>
+
+            <div class="player-wrapper">
+                <div class="player-container show-cursor">
+                    <div class="video-frame">
+                        <canvas id="subtitles-canvas"></canvas>
+                        <div id="video-toast-container" class="video-toast-container"></div>
+                        <video id="player" crossorigin="anonymous" playsinline></video>
+
+                        <div id="player-loading" class="player-loading-overlay">
+                            <div class="spinner"></div>
+                            <p id="player-loading-text">Waiting for host...</p>
+                        </div>
+                    </div>
+
+                    <div class="custom-controls">
+                        <div class="progress-container">
+                            <div class="progress-buffer"></div>
+                            <div class="progress-played"></div>
+                            <div class="progress-handle"></div>
+                        </div>
+
+                        <div class="controls-row">
+                            <div class="controls-left">
+                                <button class="control-btn play-pause" id="play-pause-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                                </button>
+                                <button class="control-btn volume" id="volume-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>
+                                </button>
+                                <input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
+                                <span class="time-display" id="time-display">0:00 / 0:00</span>
+                            </div>
+
+                            <div class="controls-center"></div>
+
+                            <div class="controls-right">
+                                <button class="control-btn settings" id="settings-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
+                                </button>
+                                <div class="settings-panel" id="settings-panel"></div>
+                                <button class="control-btn fullscreen" id="fullscreen-btn">
+                                    <svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="chat-sidebar">
+            <div class="sidebar-tabs">
+                <button class="tab-btn active" id="tab-chat-btn">Chat</button>
+                <button class="tab-btn" id="tab-queue-btn">Queue <span id="queue-count" class="badge">0</span></button>
+            </div>
+
+            <div id="tab-content-chat" class="tab-content active" style="display: flex; flex-direction: column; height: 100%;">
+                <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: flex-end;">
+                    <button id="toggle-users-btn" class="btn-icon-glass" title="Toggle User List" style="width: 32px; height: 32px;">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                            <circle cx="9" cy="7" r="4"></circle>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                        </svg>
+                    </button>
+                </div>
+                <div class="users-list" id="users-list" style="display: none;"></div>
+                <div class="chat-messages" id="chat-messages"></div>
+                <form class="chat-input" id="chat-form" autocomplete="off">
+                    <input type="text" id="chat-input" placeholder="Type a message..." maxlength="500" autocomplete="off" />
+                    <button type="submit">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                    </button>
+                </form>
+            </div>
+            <div id="tab-content-queue" class="tab-content" style="display: none;">
+                <div class="queue-list" id="queue-list">
+                    <div class="queue-empty">Queue is empty</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal-overlay" id="join-room-modal">
+    <div class="modal-content">
+        <div id="join-host-info" class="join-host-info" style="display: none;">
+            <div class="join-avatar-container">
+                <img id="join-host-avatar" src="" alt="Host">
+            </div>
+            <p id="join-host-text" class="join-text"></p>
+        </div>
+
+        <h2 class="modal-title" style="text-align: center;">Join Room</h2>
+
+        <form id="join-room-form">
+            <div class="form-group">
+                <label>Your Name</label>
+                <input type="text" id="guest-name-input" placeholder="Enter your name" maxlength="30" />
+            </div>
+
+            <div class="form-group" id="password-group" style="display: none;">
+                <label>Room Password</label>
+                <input type="password" id="join-password-input" placeholder="Enter password" maxlength="50" />
+            </div>
+
+            <div class="form-actions" style="justify-content: center;">
+                <button type="button" class="btn-cancel" id="cancel-join-btn">Go Back</button>
+                <button type="submit" class="btn-confirm">Join Party</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div class="modal-overlay" id="anime-search-modal">
+    <div class="modal-content anime-search-content">
+        <button class="modal-close" id="close-search-modal">✕</button>
+
+        <div id="step-search">
+            <h2 class="modal-title">Select Anime</h2>
+            <div class="search-bar">
+                <div class="quick-select-wrapper" style="min-width: 130px; background: rgba(255,255,255,0.05);">
+                    <select id="search-source-select" class="quick-select">
+                        <option value="anilist">AniList</option>
+                    </select>
+                    <div class="select-arrow">▼</div>
+                </div>
+
+                <input type="text" id="anime-search-input" placeholder="Search anime..." autocomplete="off"/>
+                <button id="anime-search-btn">Search</button>
+            </div>
+            <div id="anime-results" class="anime-results"></div>
+        </div>
+
+        <div id="step-config" style="display: none;">
+            <div class="modal-header-row">
+                <button class="btn-icon-small" id="back-to-search" title="Back">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+                </button>
+                <h2 class="modal-title" id="selected-anime-title">Configure Episode</h2>
+            </div>
+
+            <div class="config-layout">
+                <div class="config-sidebar">
+                    <img id="config-cover" class="config-cover" src="" alt="Cover">
+                </div>
+
+                <div class="config-main" style="justify-content: center;">
+
+                    <div style="display: flex; flex-direction: column; height: 100%;">
+
+                        <div class="cfg-header" style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
+                            <div class="cfg-section-title">Select Episodes</div>
+                            <div class="cfg-actions">
+                                <button id="select-all-page" class="btn-text-tiny">Select Page</button>
+                                <button id="select-none-eps" class="btn-text-tiny">Clear</button>
+                            </div>
+                        </div>
+
+                        <div id="episodes-grid" class="episodes-grid-container">
+                            <div class="grid-loader">Loading...</div>
+                        </div>
+
+                        <div id="modal-pagination" class="modal-pagination" style="display: none;">
+                            <button id="modal-prev-page" class="modal-page-btn">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+                            </button>
+                            <span id="modal-page-info" class="modal-page-info">1 - 50</span>
+                            <button id="modal-next-page" class="modal-page-btn">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+                            </button>
+                        </div>
+
+                        <div class="manual-ep-input" style="margin-top: 10px; display: none;">
+                            <label style="font-size: 0.8rem; color: #aaa;">Manual Entry:</label>
+                            <div class="ep-control">
+                                <button class="ep-btn" id="ep-dec">−</button>
+                                <input type="number" id="inp-episode" class="ep-input" value="1" min="1">
+                                <button class="ep-btn" id="ep-inc">+</button>
+                            </div>
+                        </div>
+
+                        <div id="config-error" style="color:#ff6b6b; font-size:0.9rem; display:none; background:rgba(255,0,0,0.1); padding:10px; border-radius:8px; margin-top: 10px;"></div>
+
+                        <div class="form-actions" style="margin-top:auto; display:flex; gap:10px; padding-top: 20px;">
+                            <button id="btn-add-queue" class="btn-cancel" style="flex:1; justify-content: center; border-color: var(--brand-color); color: white;">
+                                + Add Selected (<span id="sel-count">0</span>)
+                            </button>
+
+                            <button id="btn-launch-stream" class="btn-confirm" style="flex:1;">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                                Play First
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="/src/scripts/utils/auth-utils.js"></script>
+<script src="/src/scripts/utils/search-manager.js"></script>
+<script src="/src/scripts/anime/subtitle-renderer.js"></script>
+<script src="/src/scripts/anime/player.js"></script>
+<script src="/src/scripts/room.js"></script>
+
+</body>
+</html>

desktop/views/schedule.html

@@ -4,94 +4,83 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WaifuBoard - Schedule</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="/views/css/globals.css">
     <link rel="stylesheet" href="/views/css/schedule/schedule.css">
     <link rel="stylesheet" href="/views/css/components/navbar.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
     <script src="/src/scripts/titlebar.js"></script>
+    <link rel="stylesheet" href="/views/css/components/titlebar.css">
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
+<div class="ambient-bg" id="ambientBg"></div>
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
+<div class="bg-overlay"></div>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
 
-    <div class="ambient-bg" id="ambientBg"></div>
+<div class="schedule-container">
 
-    <div class="calendar-wrapper">
+    <header class="schedule-header">
-        <div class="calendar-controls">
+        <div class="header-left">
-            <div class="month-selector">
+            <h1 class="page-title">Release Schedule</h1>
-                <button class="icon-btn" onclick="navigate(-1)">
+            <div class="month-navigator">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+                <button class="nav-btn" onclick="navigate(-1)">‹</button>
-                </button>
+                <span id="monthTitle" class="current-date-label">Loading...</span>
-                <div class="month-title" id="monthTitle">Loading...</div>
+                <button class="nav-btn" onclick="navigate(1)">›</button>
-                <button class="icon-btn" onclick="navigate(1)">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
-                </button>
-            </div>
-
-            <div class="controls-right">
-
-                <div class="view-toggles">
-                    <button class="toggle-item active" id="btnViewMonth" onclick="setViewType('MONTH')">Month</button>
-                    <button class="toggle-item" id="btnViewWeek" onclick="setViewType('WEEK')">Week</button>
-                </div>
-
-                <div class="view-toggles">
-                    <button class="toggle-item active" id="btnSub" onclick="setMode('SUB')">Sub</button>
-                    <button class="toggle-item" id="btnDub" onclick="setMode('DUB')">Dub</button>
-                </div>
             </div>
         </div>
 
-        <div class="calendar-board">
+        <div class="header-controls">
-            <div class="weekdays-grid">
+            <div class="toggle-group" id="filter-group" style="display: none;">
-                <div class="weekday-header">Mon</div>
+                <button class="toggle-btn active" id="btnAll" onclick="setFilter('ALL')">All</button>
-                <div class="weekday-header">Tue</div>
+                <button class="toggle-btn" id="btnMyList" onclick="setFilter('MY_LIST')">My List</button>
-                <div class="weekday-header">Wed</div>
-                <div class="weekday-header">Thu</div>
-                <div class="weekday-header">Fri</div>
-                <div class="weekday-header">Sat</div>
-                <div class="weekday-header">Sun</div>
             </div>
-            <div class="days-grid" id="daysGrid">
 
+            <div class="divider-vertical"></div>
+
+            <div class="toggle-group">
+                <button class="toggle-btn active" id="btnSub" onclick="setMode('SUB')">Sub</button>
+                <button class="toggle-btn" id="btnDub" onclick="setMode('DUB')">Dub</button>
+            </div>
+
+            <div class="view-switcher">
+                <button class="view-btn active" id="btnViewMonth" onclick="setViewType('MONTH')" title="Month View">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                </button>
+                <button class="view-btn" id="btnViewWeek" onclick="setViewType('WEEK')" title="Week View">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
+                </button>
             </div>
         </div>
-    </div>
+    </header>
 
-    <div class="loader" id="loader">
+    <main id="schedule-content">
-        <div class="spinner"></div>
+    </main>
-        <span id="loadingText">Syncing Schedule...</span>
-    </div>
 
-    <div id="updateToast" class="hidden">
+</div>
-        <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
 
-        <a
+<div class="loader-overlay" id="loader">
-                id="downloadButton"
+    <div class="spinner"></div>
-                href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
+</div>
-                target="_blank"
-        >
-            Click To Download
-        </a>
-    </div>
 
-    <script src="/src/scripts/updateNotifier.js"></script>
+<div id="updateToast" class="hidden">
-    <script src="/src/scripts/schedule/schedule.js"></script>
+    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-    <script src="/src/scripts/rpc-inapp.js"></script>
+
-    <script src="/src/scripts/auth-guard.js"></script>
+    <a
-    <script src="/src/scripts/settings.js"></script>
+            id="downloadButton"
+            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
+            target="_blank"
+    >
+        Click To Download
+    </a>
+</div>
+
+<script src="/src/scripts/room-modal.js"></script>
+<script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/schedule/schedule.js"></script>
+<script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/settings.js"></script>
+<script src="/src/scripts/rcp-inapp.js"></script>
 </body>
 </html>

desktop/views/search.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Browse - 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/search.css">
+  <link rel="stylesheet" href="/views/css/components/create-room.css"/>
+  <link rel="stylesheet" href="/views/css/components/titlebar.css"/>
+  <script src="/src/scripts/titlebar.js"></script>
+  <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+</head>
+<body>
+
+<div class="app-layout">
+
+  <aside class="filters-sidebar" id="sidebar">
+
+    <div class="sidebar-header mobile-only" style="margin-bottom: 2rem; display:none;">
+      <h3 style="margin:0;">Filters</h3>
+      <button id="close-sidebar-mobile" style="background:none; border:none; color:white; font-size:1.5rem;"><i class="ri-close-line"></i></button>
+    </div>
+
+    <div class="filter-group">
+      <div class="mode-switcher">
+        <button class="mode-btn active" data-mode="anime">Anime</button>
+        <button class="mode-btn" data-mode="books">Manga</button>
+      </div>
+    </div>
+
+    <div class="filter-group" style="padding-bottom: 1.5rem; border-bottom: 1px solid var(--c-border-light); margin-bottom: 1.5rem;">
+      <label>Source</label>
+      <div class="custom-select">
+        <select id="source-select">
+          <option value="anilist">Anilist</option>
+        </select>
+      </div>
+    </div>
+
+    <div id="anilist-filters" style="display: flex; flex-direction: column; gap: 1.5rem;">
+
+      <div class="filter-group">
+        <label>Sort By</label>
+        <div class="custom-select">
+          <select id="filter-sort">
+            <option value="TRENDING_DESC">Trending</option>
+            <option value="POPULARITY_DESC">Popularity</option>
+            <option value="SCORE_DESC">Top Rated</option>
+            <option value="START_DATE_DESC">Newest</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="filter-group">
+        <label>Season & Year</label>
+        <div style="display: flex; gap: 8px;">
+          <div class="custom-select" style="flex:1">
+            <select id="filter-season">
+              <option value="">Season</option>
+              <option value="WINTER">Winter</option>
+              <option value="SPRING">Spring</option>
+              <option value="SUMMER">Summer</option>
+              <option value="FALL">Fall</option>
+            </select>
+          </div>
+          <div class="custom-select" style="flex:1">
+            <select id="filter-year"><option value="">Year</option></select>
+          </div>
+        </div>
+      </div>
+
+      <div class="filter-group">
+        <label>Genre</label>
+        <div class="custom-select">
+          <select id="filter-genre"><option value="">All Genres</option></select>
+        </div>
+      </div>
+
+      <div class="filter-group">
+        <label>Status</label>
+        <div class="custom-select">
+          <select id="filter-status">
+            <option value="">Any Status</option>
+            <option value="RELEASING">Airing</option>
+            <option value="FINISHED">Finished</option>
+            <option value="NOT_YET_RELEASED">Upcoming</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="filter-group">
+        <label>Format</label>
+        <div class="custom-select">
+          <select id="filter-format"><option value="">Any Format</option></select>
+        </div>
+      </div>
+    </div>
+    <div id="extension-filters" style="display: none; flex-direction: column; gap: 1.5rem;">
+    </div>
+  </aside>
+
+  <main class="main-view">
+
+    <div class="mobile-header-controls">
+      <button id="toggle-sidebar" class="icon-btn-plain">
+        <i class="ri-menu-2-line"></i>
+      </button>
+      <span class="mobile-title">Browse</span>
+    </div>
+
+    <div class="content-header">
+      <div class="header-left">
+        <h1 id="results-title">Trending Now</h1>
+        <span id="result-count">20 results</span>
+      </div>
+
+      <div class="search-container">
+        <i class="ri-search-line search-icon"></i>
+        <input type="text" id="main-search" placeholder="Search..." autocomplete="off">
+        <div id="search-loader" class="loader-spinner"></div>
+      </div>
+    </div>
+
+    <div id="results-grid" class="media-grid"></div>
+
+    <div class="loading-state" id="initial-loader" style="display: none;">
+      <div class="spinner"></div>
+    </div>
+
+  </main>
+
+</div>
+
+<div id="mobile-overlay" class="overlay-backdrop"></div>
+
+<script src="/src/scripts/room-modal.js"></script>
+<script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
+<script src="/src/scripts/search.js"></script>
+</body>
+</html>

desktop/views/users.html

@@ -11,16 +11,6 @@
   <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="page-wrapper">
   <div class="background-gradient"></div>

docker/Dockerfile

@@ -1,15 +1,27 @@
-FROM mcr.microsoft.com/playwright:v1.50.0-jammy
+FROM node:20-bookworm
+
+RUN apt-get update && apt-get install -y \
+    git \
+    ffmpeg \
+    curl \
+    wget \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN wget -q https://github.com/cloudflare/cloudflared/releases/download/2025.11.1/cloudflared-linux-amd64.deb \
+    && dpkg -i cloudflared-linux-amd64.deb \
+    && rm cloudflared-linux-amd64.deb
 
 WORKDIR /app
 
-COPY package*.json ./
+RUN git clone https://git.waifuboard.app/ItsSkaiya/WaifuBoard.git repo
 
-RUN npm ci
+RUN mv repo/docker/* . \
+    && rm -rf repo
 
-RUN npx playwright install --with-deps chromium
+RUN npm install
 
-COPY . .
+RUN npx playwright install chromium
+RUN npx playwright install-deps
 
 EXPOSE 54322
-
 CMD ["npm", "run", "start"]

docker/package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@fastify/static": "^8.3.0",
+        "@fastify/websocket": "^11.2.0",
         "adm-zip": "^0.5.16",
         "bcrypt": "^6.0.0",
         "bindings": "^1.5.0",
@@ -22,13 +23,15 @@
         "node-addon-api": "^8.5.0",
         "node-cron": "^4.2.1",
         "playwright-chromium": "^1.57.0",
-        "sqlite3": "^5.1.7"
+        "sqlite3": "^5.1.7",
+        "ws": "^8.18.3"
       },
       "devDependencies": {
         "@types/adm-zip": "^0.5.7",
         "@types/bcrypt": "^6.0.0",
         "@types/jsonwebtoken": "^9.0.10",
         "@types/node": "^24.0.0",
+        "@types/ws": "^8.18.1",
         "node-gyp": "^12.1.0",
         "ts-node": "^10.9.0",
         "typescript": "^5.3.0"
@@ -221,6 +224,27 @@
         "glob": "^11.0.0"
       }
     },
+    "node_modules/@fastify/websocket": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@fastify/websocket/-/websocket-11.2.0.tgz",
+      "integrity": "sha512-3HrDPbAG1CzUCqnslgJxppvzaAZffieOVbLp1DAy1huCSynUWPifSvfdEDUR8HlJLp3sp1A36uOM2tJogADS8w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "duplexify": "^4.1.3",
+        "fastify-plugin": "^5.0.0",
+        "ws": "^8.16.0"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -453,6 +477,16 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/abbrev": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-4.0.0.tgz",
@@ -1161,6 +1195,18 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/duplexify": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.3.tgz",
+      "integrity": "sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -4027,6 +4073,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stream-shift": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
+      "integrity": "sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==",
+      "license": "MIT"
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -4558,6 +4610,27 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xml2js": {
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",

docker/package.json

@@ -13,6 +13,7 @@
   "type": "commonjs",
   "dependencies": {
     "@fastify/static": "^8.3.0",
+    "@fastify/websocket": "^11.2.0",
     "adm-zip": "^0.5.16",
     "bcrypt": "^6.0.0",
     "bindings": "^1.5.0",
@@ -25,13 +26,15 @@
     "node-addon-api": "^8.5.0",
     "node-cron": "^4.2.1",
     "playwright-chromium": "^1.57.0",
-    "sqlite3": "^5.1.7"
+    "sqlite3": "^5.1.7",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",
     "@types/bcrypt": "^6.0.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.0.0",
+    "@types/ws": "^8.18.1",
     "node-gyp": "^12.1.0",
     "ts-node": "^10.9.0",
     "typescript": "^5.3.0"

docker/server.js

@@ -11,9 +11,6 @@ const { loadExtensions } = require("./dist/shared/extensions");
 const {refreshTrendingAnime, refreshTopAiringAnime} = require("./dist/api/anime/anime.service");
 const {refreshPopularBooks, refreshTrendingBooks} = require("./dist/api/books/books.service");
 const { ensureConfigFile } = require("./dist/shared/config");
-const dotenv = require("dotenv");
-
-dotenv.config();
 
 const viewsRoutes = require("./dist/views/views.routes");
 const animeRoutes = require("./dist/api/anime/anime.routes");
@@ -26,19 +23,95 @@ const listRoutes = require("./dist/api/list/list.routes");
 const anilistRoute = require("./dist/api/anilist/anilist");
 const localRoutes = require("./dist/api/local/local.routes");
 const configRoutes = require("./dist/api/config/config.routes");
+const roomRoutes = require("./dist/api/rooms/rooms.routes");
+const { setupRoomWebSocket } = require("./dist/api/rooms/rooms.websocket");
 
-fastify.addHook("preHandler", async (request) => {
+const { getConfig } = require('./dist/shared/config');
+const { values } = getConfig();
+const jwtSecret = values.server?.jwt_secret;
+
+fastify.addHook("preHandler", async (request, reply) => {
   const auth = request.headers.authorization;
   if (!auth) return;
 
   try {
     const token = auth.replace("Bearer ", "");
-    request.user = jwt.verify(token, process.env.JWT_SECRET);
+    request.user = jwt.verify(token, jwtSecret);
   } catch (e) {
     return reply.code(401).send({ error: "Invalid token" });
   }
 });
 
+const roomService = require('./dist/api/rooms/rooms.service');
+
+fastify.addHook('onRequest', async (req, reply) => {
+  const isTunnel =
+      !!req.headers['cf-connecting-ip'] ||
+      !!req.headers['cf-ray'];
+
+  if (!isTunnel) return;
+
+  if (req.url.startsWith('/public/') ||
+      req.url.startsWith('/views/') ||
+      req.url.startsWith('/src/')) {
+    return;
+  }
+
+  if (req.url.startsWith('/room')) {
+    const urlParams = new URLSearchParams(req.url.split('?')[1]);
+    const roomId = urlParams.get('id');
+
+    if (!roomId) {
+      return reply.code(404).send({ error: 'Room ID required' });
+    }
+
+    const room = roomService.getRoom(roomId);
+    if (!room || room.exposed !== true) {
+      return reply.code(404).send({ error: 'Room not found' });
+    }
+
+    return;
+  }
+
+  const wsMatch = req.url.match(/^\/ws\/room\/([a-f0-9]+)/);
+  if (wsMatch) {
+    const roomId = wsMatch[1];
+    const room = roomService.getRoom(roomId);
+
+    if (!room || room.exposed !== true) {
+      return reply.code(404).send({ error: 'Room not found' });
+    }
+    return;
+  }
+
+  const apiMatch = req.url.match(/^\/api\/rooms\/([a-f0-9]+)/);
+  if (apiMatch) {
+    const roomId = apiMatch[1];
+    const room = roomService.getRoom(roomId);
+
+    if (!room || room.exposed !== true) {
+      return reply.code(404).send({ error: 'Room not found' });
+    }
+    return;
+  }
+
+  const allowedEndpoints = [
+    '/api/watch/stream',
+    '/api/proxy',
+    '/api/extensions',
+    '/api/search'
+  ];
+
+  for (const endpoint of allowedEndpoints) {
+    if (req.url.startsWith(endpoint)) {
+      console.log('[Tunnel] ✓ Allowing utility endpoint:', endpoint);
+      return;
+    }
+  }
+
+  return reply.code(404).send({ error: 'Not found' });
+});
+
 fastify.register(require("@fastify/static"), {
   root: path.join(__dirname, "public"),
   prefix: "/public/",
@@ -68,17 +141,20 @@ fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });
 fastify.register(localRoutes, { prefix: "/api" });
 fastify.register(configRoutes, { prefix: "/api" });
+fastify.register(roomRoutes, { prefix: "/api" });
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 
 const start = async () => {
   try {
+    await fastify.register(require('@fastify/websocket'));
     ensureConfigFile()
     initDatabase("anilist");
     initDatabase("favorites");
     initDatabase("cache");
     initDatabase("userdata");
     initDatabase("local_library");
+    setupRoomWebSocket(fastify);
 
     const refreshAll = async () => {
       await refreshTrendingAnime();
@@ -90,7 +166,7 @@ const start = async () => {
       await refreshPopularBooks();
     };
 
-    cron.schedule("*/30 * * * *", async () => {
+    const job = cron.schedule("*/30 * * * *", async () => {
       try {
         await refreshAll();
         console.log("cache refreshed");
@@ -107,6 +183,16 @@ const start = async () => {
         console.error("initial refresh failed", e)
     );
     console.log(`Server running at http://localhost:54322`);
+
+    const shutdown = async () => {
+      job.stop();
+      await fastify.close();
+      process.exit(0);
+    };
+
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
+
   } catch (err) {
     fastify.log.error(err);
     process.exit(1);

docker/src/api/anilist/anilist.ts

@@ -2,58 +2,49 @@ import { FastifyInstance } from "fastify";
 import { run } from "../../shared/database";
 
 async function anilist(fastify: FastifyInstance) {
-    fastify.get("/anilist", async (request, reply) => {
+    fastify.post("/anilist/store", async (request, reply) => {
         try {
-            const { code, state } = request.query as { code?: string; state?: string };
+            const {
+                userId,
+                accessToken,
+                tokenType = "Bearer",
+                expiresIn
+            } = request.body as {
+                userId: number;
+                accessToken: string;
+                tokenType?: string;
+                expiresIn?: number;
+            };
 
-            if (!code) return reply.status(400).send("No code");
+            if (!userId || !accessToken) {
-            if (!state) return reply.status(400).send("No user state");
+                return reply.status(400).send({ error: "Faltan datos (User ID o Token)" });
-
-            const userId = Number(state);
-            if (!userId || isNaN(userId)) {
-                return reply.status(400).send("Invalid user id");
-            }
-
-            const tokenRes = await fetch("https://anilist.co/api/v2/oauth/token", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    grant_type: "authorization_code",
-                    client_id: process.env.ANILIST_CLIENT_ID,
-                    client_secret: process.env.ANILIST_CLIENT_SECRET,
-                    redirect_uri: "http://localhost:54322/api/anilist",
-                    code
-                })
-            });
-
-            const tokenData = await tokenRes.json();
-
-            if (!tokenData.access_token) {
-                console.error("AniList token error:", tokenData);
-                return reply.status(500).send("Failed to get AniList token");
             }
 
+            // 1. Verificar que el token es válido consultando a AniList
             const userRes = await fetch("https://graphql.anilist.co", {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
-                    Authorization: `${tokenData.token_type} ${tokenData.access_token}`
+                    Authorization: `${tokenType} ${accessToken}`
                 },
                 body: JSON.stringify({
                     query: `query { Viewer { id } }`
                 })
             });
 
+            if (!userRes.ok) {
+                return reply.status(401).send({ error: "Token de AniList inválido o expirado" });
+            }
+
             const userData = await userRes.json();
             const anilistUserId = userData?.data?.Viewer?.id;
 
             if (!anilistUserId) {
-                console.error("AniList Viewer error:", userData);
+                return reply.status(500).send({ error: "No se pudo obtener el ID de usuario de AniList" });
-                return reply.status(500).send("Failed to fetch AniList user");
             }
 
             const expiresAt = new Date(
-                Date.now() + tokenData.expires_in * 1000
+                Date.now() + 365 * 24 * 60 * 60 * 1000
             ).toISOString();
 
             await run(
@@ -71,19 +62,19 @@ async function anilist(fastify: FastifyInstance) {
                 [
                     userId,
                     "AniList",
-                    tokenData.access_token,
+                    accessToken,
-                    tokenData.refresh_token,
+                    "",          // <- aquí
-                    tokenData.token_type,
+                    tokenType,
                     anilistUserId,
                     expiresAt
                 ],
                 "userdata"
             );
 
-            return reply.redirect("http://localhost:54322/?anilist=success");
+            return reply.send({ ok: true, anilistUserId });
         } catch (e) {
             console.error("AniList error:", e);
-            return reply.redirect("http://localhost:54322/?anilist=error");
+            return reply.status(500).send({ error: "Error interno del servidor al guardar AniList" });
         }
     });
 }

docker/src/api/anime/anime.controller.ts

@@ -56,6 +56,30 @@ export async function getTopAiring(req: FastifyRequest, reply: FastifyReply) {
     }
 }
 
+export async function searchAdvanced(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const {
+            q,
+            type = 'ANIME',
+            year,
+            season,
+            status,
+            format,
+            genre,
+            minScore,
+            sort
+        } = req.query as any;
+
+        const results = await animeService.searchMediaAdvanced(q, type, {
+            year, season, status, format, genre, minScore, sort
+        });
+
+        return { results };
+    } catch (e) {
+        return { results: [] };
+    }
+}
+
 export async function search(req: SearchRequest, reply: FastifyReply) {
     try {
         const query = req.query.q;
@@ -73,12 +97,20 @@ export async function search(req: SearchRequest, reply: FastifyReply) {
 export async function searchInExtension(req: any, reply: FastifyReply) {
     try {
         const extensionName = req.params.extension;
-        const query = req.query.q;
+        const { q, ...rest } = req.query;
 
         const ext = getExtension(extensionName);
         if (!ext) return { results: [] };
 
-        const results = await animeService.searchAnimeInExtension(ext, extensionName, query);
+        const results = await animeService.searchAnimeInExtension(
+            ext,
+            extensionName,
+            {
+                query: q || '',
+                filters: Object.keys(rest).length ? rest : undefined
+            }
+        );
+
         return { results };
     } catch {
         return { results: [] };
@@ -87,7 +119,7 @@ export async function searchInExtension(req: any, reply: FastifyReply) {
 
 export async function getWatchStream(req: WatchStreamRequest, reply: FastifyReply) {
     try {
-        const { animeId, episode, server, category, ext, source } = req.query;
+        const { animeId, episode, server, category, ext, source, extensionAnimeId  } = req.query;
 
         const extension = getExtension(ext);
         if (!extension) return { error: "Extension not found" };
@@ -98,7 +130,8 @@ export async function getWatchStream(req: WatchStreamRequest, reply: FastifyRepl
             animeId,
             source,
             server,
-            category
+            category,
+            extensionAnimeId
         );
     } catch (err) {
         const error = err as Error;

docker/src/api/anime/anime.routes.ts

@@ -7,6 +7,7 @@ async function animeRoutes(fastify: FastifyInstance) {
     fastify.get('/trending', controller.getTrending);
     fastify.get('/top-airing', controller.getTopAiring);
     fastify.get('/search', controller.search);
+    fastify.get('/search/advanced', controller.searchAdvanced);
     fastify.get('/search/:extension', controller.searchInExtension);
     fastify.get('/watch/stream', controller.getWatchStream);
 }

docker/src/api/anime/anime.service.ts

@@ -181,7 +181,9 @@ export async function getAnimeById(id: string | number): Promise<Anime | { error
   `;
 
     const data = await fetchAniList(query, { id: Number(id) });
-    if (!data?.Media) return { error: "Anime not found" };
+    if (!data?.Media || !data.Media.title) {
+        return { error: "Anime not found" };
+    }
 
     await queryOne(
         "INSERT INTO anime (id, title, updatedAt, full_data) VALUES (?, ?, ?, ?)",
@@ -272,6 +274,70 @@ export async function searchAnimeLocal(query: string): Promise<Anime[]> {
     return merged;
 }
 
+type AdvancedFilters = {
+    year?: string;
+    season?: string;
+    status?: string;
+    format?: string;
+    genre?: string;
+    minScore?: string;
+    sort?: string;
+};
+
+export async function searchMediaAdvanced(
+    query: string,
+    type: 'ANIME' | 'MANGA',
+    filters: AdvancedFilters
+): Promise<Anime[]> {
+
+    const gql = `
+  query (
+    $type: MediaType
+    $search: String
+    $seasonYear: Int
+    $season: MediaSeason
+    $status: MediaStatus
+    $format: MediaFormat
+    $genres: [String]
+    $minScore: Int
+    $sort: [MediaSort]
+  ) {
+    Page(page: 1, perPage: 20) {
+      media(
+        type: $type
+        search: $search
+        seasonYear: $seasonYear
+        season: $season
+        status: $status
+        format: $format
+        genre_in: $genres
+        averageScore_greater: $minScore
+        sort: $sort
+        isAdult: false
+      ) {
+        ${MEDIA_FIELDS}
+      }
+    }
+  }
+  `;
+
+    const vars = {
+        type,
+        search: query || undefined,
+        seasonYear: filters.year ? Number(filters.year) : undefined,
+        season: filters.season || undefined,
+        status: filters.status || undefined,
+        format: filters.format || undefined,
+        genres: filters.genre ? [filters.genre] : undefined,
+        minScore: filters.minScore ? Number(filters.minScore) : undefined,
+        sort: filters.sort ? [filters.sort] : ['POPULARITY_DESC']
+    };
+
+    const data = await fetchAniList(gql, vars);
+    return data?.Page?.media || [];
+}
+
+
 export async function getAnimeInfoExtension(ext: Extension | null, id: string): Promise<Anime | { error: string }> {
     if (!ext) return { error: "not found" };
 
@@ -290,7 +356,11 @@ export async function getAnimeInfoExtension(ext: Extension | null, id: string):
         try {
             const match = await ext.getMetadata(id);
 
-            if (match) {
+            if (
+                match &&
+                match.title &&
+                match.title !== "Unknown"
+            ) {
                 const normalized: any = {
                     title: match.title ?? "Unknown",
                     summary: match.summary ?? "No summary available",
@@ -316,22 +386,31 @@ export async function getAnimeInfoExtension(ext: Extension | null, id: string):
     return { error: "not found" };
 }
 
-export async function searchAnimeInExtension(ext: Extension | null, name: string, query: string) {
+export async function searchAnimeInExtension(
+    ext: Extension | null,
+    name: string,
+    searchObj: { query: string; filters?: any }
+) {
     if (!ext) return [];
 
     if (ext.type === 'anime-board' && ext.search) {
         try {
-            console.log(`[${name}] Searching for anime: ${query}`);
+            const payload: any = {
-            const matches = await ext.search({
+                query: searchObj.query,
-                query: query,
                 media: {
-                    romajiTitle: query,
+                    romajiTitle: searchObj.query,
-                    englishTitle: query,
+                    englishTitle: searchObj.query,
                     startDate: { year: 0, month: 0, day: 0 }
                 }
-            });
+            };
 
-            if (matches && matches.length > 0) {
+            if (searchObj.filters) {
+                payload.filters = searchObj.filters;
+            }
+
+            const matches = await ext.search(payload);
+
+            if (matches?.length) {
                 return matches.map(m => ({
                     id: m.id,
                     extensionName: name,
@@ -340,6 +419,7 @@ export async function searchAnimeInExtension(ext: Extension | null, name: string
                     averageScore: m.rating || m.score || null,
                     format: 'ANIME',
                     seasonYear: null,
+                    url: m.url,
                     isExtensionResult: true,
                 }));
             }
@@ -360,15 +440,36 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
     if (cached) {
         const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
 
-        if (!isExpired) {
+        try {
-            console.log(`[${name}] Episodes cache hit for: ${query}`);
+            const parsed = JSON.parse(cached.result) as {
-            try {
+                mediaId?: string;
-                return JSON.parse(cached.result) as Episode[];
+                episodes: Episode[];
-            } catch (e) {
+            };
-                console.error(`[${name}] Error parsing cached episodes:`, e);
+
+            if (!isExpired) {
+                console.log(`[${name}] Episodes cache hit for: ${query}`);
+                return parsed.episodes;
             }
-        } else {
+
-            console.log(`[${name}] Episodes cache expired for: ${query}`);
+            // Si el caché expiró pero tenemos mediaId, refrescamos directamente
+            if (parsed.mediaId && ext.type === "anime-board" && ext.search && typeof ext.findEpisodes === "function") {
+                console.log(`[${name}] Episodes cache expired but mediaId found, refreshing...`);
+                const chapterList = await ext.findEpisodes(parsed.mediaId);
+
+                if (!Array.isArray(chapterList)) return [];
+
+                const result: Episode[] = chapterList.map(ep => ({
+                    id: ep.id,
+                    number: ep.number,
+                    url: ep.url,
+                    title: ep.title
+                }));
+
+                await setCache(cacheKey, { mediaId: parsed.mediaId, episodes: result }, CACHE_TTL_MS);
+                return result;
+            }
+        } catch (e) {
+            console.error(`[${name}] Error parsing cached episodes:`, e);
         }
     }
 
@@ -421,6 +522,7 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
 
             const chapterList = await ext.findEpisodes(mediaId);
             if (!Array.isArray(chapterList)) return [];
+
             const result: Episode[] = chapterList.map(ep => ({
                 id: ep.id,
                 number: ep.number,
@@ -428,7 +530,9 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
                 title: ep.title
             }));
 
-            await setCache(cacheKey, result, CACHE_TTL_MS);
+            if (result.length > 0) {
+                await setCache(cacheKey, { mediaId, episodes: result }, CACHE_TTL_MS);
+            }
 
             return result;
         } catch (e) {
@@ -439,25 +543,27 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
     return [];
 }
 
-export async function getStreamData(extension: Extension, episode: string, id: string, source: string, server?: string, category?: string): Promise<StreamData> {
+export async function getStreamData(extension: Extension, episode: string, id: string, source: string, server?: string, category?: string, extensionAnimeId?: string): Promise<StreamData> {
     const providerName = extension.constructor.name;
 
-    const cacheKey = `anime:stream:${providerName}:${id}:${episode}:${server || 'default'}:${category || 'sub'}`;
+    const finalCategory = category ?? "sub";
 
-    const cached = await getCache(cacheKey);
+    const cacheKey =
+        `anime:stream:${providerName}:${id}:${episode}:${server}:${finalCategory}`;
+    if (!extensionAnimeId) {
+        const cached = await getCache(cacheKey);
 
-    if (cached) {
+        if (cached) {
-        const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
+            const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
 
-        if (!isExpired) {
+            if (!isExpired) {
-            console.log(`[${providerName}] Stream data cache hit for episode ${episode}`);
+                console.log(`[${providerName}] Stream data cache hit for episode ${episode}`);
-            try {
+                try {
-                return JSON.parse(cached.result) as StreamData;
+                    return JSON.parse(cached.result) as StreamData;
-            } catch (e) {
+                } catch (e) {
-                console.error(`[${providerName}] Error parsing cached stream data:`, e);
+                    console.error(`[${providerName}] Error parsing cached stream data:`, e);
+                }
             }
-        } else {
-            console.log(`[${providerName}] Stream data cache expired for episode ${episode}`);
         }
     }
 
@@ -465,25 +571,60 @@ export async function getStreamData(extension: Extension, episode: string, id: s
         throw new Error("Extension doesn't support required methods");
     }
     let episodes;
+    let animeTitle: string | undefined;
 
-    if (source === "anilist"){
+    if (source === "anilist" && !extensionAnimeId) {
-        const anime: any = await getAnimeById(id)
+        const anime: any = await getAnimeById(id);
         episodes = await searchEpisodesInExtension(extension, extension.constructor.name, anime.title.romaji);
+    } else {
+        const targetId = extensionAnimeId ?? id;
+        episodes = await extension.findEpisodes(targetId);
+
+        if (extensionAnimeId) {
+            const anime: any = await getAnimeById(id);
+            animeTitle = anime.title.romaji;
+
+            const episodesCacheKey = `anime:episodes:${providerName}:${animeTitle}`;
+            const episodesResult: Episode[] = episodes.map((ep: any) => ({
+                id: ep.id,
+                number: ep.number,
+                url: ep.url,
+                title: ep.title
+            }));
+
+            await setCache(episodesCacheKey, {
+                mediaId: extensionAnimeId,
+                episodes: episodesResult
+            }, CACHE_TTL_MS);
+        }
     }
-    else{
+
-        episodes = await extension.findEpisodes(id);
+    const targetEp = episodes.find((e: any) => e.number === parseInt(episode));
-    }
-    const targetEp = episodes.find(e => e.number === parseInt(episode));
 
     if (!targetEp) {
         throw new Error("Episode not found");
     }
 
-    const serverName = server || "default";
+    let streamData: StreamData;
-    const streamData = await extension.findEpisodeServer(targetEp, serverName);
+
+    try {
+        streamData = await extension.findEpisodeServer(targetEp, server, category);
+    } catch (e) {
+        console.error(`[${providerName}] findEpisodeServer failed`, e);
+        throw e;
+    }
+
+    if (
+        !streamData ||
+        !Array.isArray(streamData.videoSources) ||
+        streamData.videoSources.length === 0
+    ) {
+        throw new Error("Empty stream data");
+    }
 
     await setCache(cacheKey, streamData, CACHE_TTL_MS);
     return streamData;
+
 }
 
 function similarity(s1: string, s2: string): number {

docker/src/api/books/books.controller.ts

@@ -69,16 +69,24 @@ export async function searchBooks(req: SearchRequest, reply: FastifyReply) {
 export async function searchBooksInExtension(req: any, reply: FastifyReply) {
     try {
         const extensionName = req.params.extension;
-        const query = req.query.q;
+
+        const { q, ...rawFilters } = req.query;
 
         const ext = getExtension(extensionName);
         if (!ext) return { results: [] };
 
-        const results = await booksService.searchBooksInExtension(ext, extensionName, query);
+        const results = await booksService.searchBooksInExtension(
+            ext,
+            extensionName,
+            {
+                query: q || '',
+                filters: rawFilters
+            }
+        );
+
         return { results };
     } catch (e) {
-        const error = e as Error;
+        console.error("Search Error:", (e as Error).message);
-        console.error("Search Error:", error.message);
         return { results: [] };
     }
 }
@@ -88,9 +96,10 @@ export async function getChapters(req: any, reply: FastifyReply) {
         const { id } = req.params;
         const source = req.query.source || 'anilist';
         const provider = req.query.provider;
+        const extensionBookId = req.query.extensionBookId;
 
         const isExternal = source !== 'anilist';
-        return await booksService.getChaptersForBook(id, isExternal, provider);
+        return await booksService.getChaptersForBook(id, isExternal, provider, extensionBookId);
     } catch (err) {
         console.error(err);
         return { chapters: [] };

docker/src/api/books/books.service.ts

@@ -275,7 +275,12 @@ export async function getBookInfoExtension(ext: Extension | null, id: string): P
         try {
             const info = await ext.getMetadata(id);
 
-            if (info) {
+            if (
+                info &&
+                info.title &&
+                info.title !== "" &&
+                info.title !== "Unknown"
+            ) {
                 const normalized = {
                     id: info.id ?? id,
                     title: info.title ?? "",
@@ -300,16 +305,18 @@ export async function getBookInfoExtension(ext: Extension | null, id: string): P
     return [];
 }
 
-export async function searchBooksInExtension(ext: Extension | null, name: string, query: string): Promise<Book[]> {
+export async function searchBooksInExtension(ext: Extension | null, name: string, searchObj: { query: string; filters?: any }): Promise<Book[]> {
     if (!ext) return [];
 
-    if ((ext.type === 'book-board') && ext.search) {
+    if (ext.type === 'book-board' && ext.search) {
-
         try {
-            console.log(`[${name}] Searching for book: ${query}`);
+            const { query, filters } = searchObj;
+
+            console.log(`[${name}] Searching for book: ${query}`, filters);
 
             const matches = await ext.search({
-                query: query,
+                query,
+                filters,
                 media: {
                     romajiTitle: query,
                     englishTitle: query,
@@ -318,6 +325,8 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
             });
 
             if (matches?.length) {
+                const clean = matches.filter(m => m.id && m.title);
+                if (!clean.length) return [];
                 return matches.map(m => ({
                     id: m.id,
                     extensionName: name,
@@ -326,10 +335,10 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
                     averageScore: m.rating || m.score || null,
                     format: m.format,
                     seasonYear: null,
-                    isExtensionResult: true
+                    isExtensionResult: true,
+                    url: m.url,
                 }));
             }
-
         } catch (e) {
             console.error(`Extension search failed for ${name}:`, e);
         }
@@ -361,42 +370,64 @@ async function fetchBookMetadata(id: string): Promise<Book | null> {
     }
 }
 
-async function searchChaptersInExtension(ext: Extension, name: string, searchTitle: string, search: boolean, origin: string): Promise<ChapterWithProvider[]> {
+async function searchChaptersInExtension(ext: Extension, name: string, lookupId: string, cacheId: string, search: boolean, origin: string, disableCache = false): Promise<ChapterWithProvider[]> {
-    const cacheKey = `chapters:${name}:${origin}:${search ? "search" : "id"}:${searchTitle}`;
+    const cacheKey = `chapters:${name}:${origin}:id:${cacheId}`;
-    const cached = await getCache(cacheKey);
+    if (!disableCache) {
+        const cached = await getCache(cacheKey);
 
-    if (cached) {
+        if (cached) {
-        const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
+            const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
 
-        if (!isExpired) {
-            console.log(`[${name}] Chapters cache hit for: ${searchTitle}`);
             try {
-                return JSON.parse(cached.result) as ChapterWithProvider[];
+                const parsed = JSON.parse(cached.result) as {
+                    mediaId?: string;
+                    chapters: ChapterWithProvider[];
+                };
+
+                if (!isExpired) {
+                    console.log(`[${name}] Chapters cache hit for: ${lookupId}`);
+                    return parsed.chapters;
+                }
+
+                if (parsed.mediaId) {
+                    const chaps = await ext.findChapters!(parsed.mediaId);
+
+                    const result = chaps.map(ch => ({
+                        id: ch.id,
+                        number: parseFloat(ch.number.toString()),
+                        title: ch.title,
+                        date: ch.releaseDate,
+                        provider: name,
+                        index: ch.index,
+                        language: ch.language ?? null,
+                    }));
+
+                    await setCache(cacheKey, { mediaId: parsed.mediaId, chapters: result }, CACHE_TTL_MS);
+                    return result;
+                }
             } catch (e) {
                 console.error(`[${name}] Error parsing cached chapters:`, e);
             }
-        } else {
-            console.log(`[${name}] Chapters cache expired for: ${searchTitle}`);
         }
     }
 
     try {
-        console.log(`[${name}] Searching chapters for: ${searchTitle}`);
+        console.log(`[${name}] Searching chapters for: ${lookupId}`);
 
         let mediaId: string;
         if (search) {
             const matches = await ext.search!({
-                query: searchTitle,
+                query: lookupId,
                 media: {
-                    romajiTitle: searchTitle,
+                    romajiTitle: lookupId,
-                    englishTitle: searchTitle,
+                    englishTitle: lookupId,
                     startDate: { year: 0, month: 0, day: 0 }
                 }
             });
 
             if (!matches?.length) return [];
 
-            const nq = normalize(searchTitle);
+            const nq = normalize(lookupId);
 
             const scored = matches.map(m => {
                 const nt = normalize(m.title);
@@ -414,7 +445,7 @@ async function searchChaptersInExtension(ext: Extension, name: string, searchTit
             mediaId = scored[0].m.id;
 
         } else {
-            const match = await ext.getMetadata(searchTitle);
+            const match = await ext.getMetadata(lookupId);
             mediaId = match.id;
         }
 
@@ -435,7 +466,13 @@ async function searchChaptersInExtension(ext: Extension, name: string, searchTit
             language: ch.language ?? null,
         }));
 
-        await setCache(cacheKey, result, CACHE_TTL_MS);
+        if (result.length > 0) {
+            await setCache(cacheKey, {
+                mediaId,
+                chapters: result
+            }, CACHE_TTL_MS);
+        }
+
         return result;
 
     } catch (e) {
@@ -445,7 +482,7 @@ async function searchChaptersInExtension(ext: Extension, name: string, searchTit
     }
 }
 
-export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?: string): Promise<{ chapters: ChapterWithProvider[] }> {
+export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?: string, extensionBookId?: string): Promise<{ chapters: ChapterWithProvider[] }> {
     let bookData: Book | null = null;
     let searchTitle: string = "";
 
@@ -475,11 +512,30 @@ export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?
 
     for (const [name, ext] of bookExtensions) {
         if (onlyProvider && name !== onlyProvider) continue;
-        if (name == extension) {
+        if (extensionBookId && name === onlyProvider) {
-            const chapters = await searchChaptersInExtension(ext, name, id, false, exts);
+            const targetId = extensionBookId ?? id;
+
+            const chapters = await searchChaptersInExtension(
+                ext,
+                name,
+                targetId, // lookup
+                id,       // cache siempre con el id normal
+                false,
+                exts,
+                Boolean(extensionBookId)
+            );
+
             allChapters.push(...chapters);
         } else {
-            const chapters = await searchChaptersInExtension(ext, name, searchTitle, true, exts);
+            const chapters = await searchChaptersInExtension(
+                ext,
+                name,
+                searchTitle,
+                id, // cache con id normal
+                true,
+                exts
+            );
+
             allChapters.push(...chapters);
         }
     }
@@ -553,7 +609,15 @@ export async function getChapterContent(bookId: string, chapterId: string, provi
             throw new Error("Unknown mediaType");
         }
 
-        await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
+        if (
+            contentResult &&
+            (
+                (contentResult.type === "manga" && contentResult.pages?.length) ||
+                (contentResult.type === "ln" && contentResult.content)
+            )
+        ) {
+            await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
+        }
         return contentResult;
 
     } catch (err) {

docker/src/api/config/config.controller.ts

@@ -1,10 +1,16 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import { getConfig, setConfig } from '../../shared/config';
 
+function hideSecrets(values: any) {
+    const copy = structuredClone(values);
+    if (copy.server?.jwt_secret) delete copy.server.jwt_secret;
+    return copy;
+}
+
 export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
     try {
         const { values, schema } = getConfig();
-        return { values, schema };
+        return { values: hideSecrets(values), schema };
     } catch {
         return { error: "Error loading config" };
     }
@@ -22,7 +28,7 @@ export async function getConfigSection(
             return { error: "Section not found" };
         }
 
-        return { [section]: values[section] };
+        return { [section]: hideSecrets(values)[section] };
     } catch {
         return { error: "Error loading config section" };
     }

docker/src/api/extensions/extensions.controller.ts

@@ -152,4 +152,25 @@ export async function uninstallExtension(req: any, reply: FastifyReply) {
         req.server.log.error(`Failed to uninstall extension ${fileName}:`, error);
         return reply.code(500).send({ success: false, error: `Failed to uninstall extension ${fileName}.` });
     }
+}
+
+export async function getExtensionFilters(req: any, reply: FastifyReply) {
+    try {
+        const extensionName = req.params.extension;
+        const ext = getExtension(extensionName);
+
+        if (!ext) {
+            return { filters: {} };
+        }
+
+        if (typeof ext.getFilters === 'function') {
+            const filters = ext.getFilters();
+            return { filters: filters || {} };
+        }
+
+        return { filters: {} };
+    } catch (e) {
+        console.error('getExtensionFilters error:', e);
+        return { filters: {} };
+    }
 }

docker/src/api/extensions/extensions.routes.ts

@@ -12,6 +12,7 @@ async function extensionsRoutes(fastify: FastifyInstance) {
     fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
     fastify.post('/extensions/install', controller.installExtension);
     fastify.post('/extensions/uninstall', controller.uninstallExtension);
+    fastify.get('/extensions/:extension/filters', controller.getExtensionFilters);
 }
 
 export default extensionsRoutes;

docker/src/api/local/download.service.ts

@@ -9,8 +9,40 @@ import AdmZip from 'adm-zip';
 import { spawn } from 'child_process';
 const { values } = loadConfig();
 
-const FFMPEG_PATH =
+const FFMPEG_PATH = values.paths?.ffmpeg || 'ffmpeg';
-    values.paths?.ffmpeg || 'ffmpeg';
+
+type DownloadStatus = {
+    id: string;
+    type: 'anime' | 'manga' | 'novel';
+    anilistId: number;
+    unitNumber: number;
+    status: 'pending' | 'downloading' | 'completed' | 'failed';
+    progress: number;
+    speed?: string;
+    timeElapsed?: string;
+    error?: string;
+    startedAt: number;
+    completedAt?: number;
+    folderName?: string;
+    fileName?: string;
+};
+
+const activeDownloads = new Map<string, DownloadStatus>();
+
+export function getActiveDownloads(): DownloadStatus[] {
+    return Array.from(activeDownloads.values());
+}
+
+export function getDownloadById(id: string): DownloadStatus | undefined {
+    return activeDownloads.get(id);
+}
+
+function updateDownloadProgress(id: string, updates: Partial<DownloadStatus>) {
+    const current = activeDownloads.get(id);
+    if (current) {
+        activeDownloads.set(id, { ...current, ...updates });
+    }
+}
 
 type AnimeDownloadParams = {
     anilistId: number;
@@ -20,6 +52,7 @@ type AnimeDownloadParams = {
     quality?: string;
     subtitles?: Array<{ language: string; url: string }>;
     chapters?: Array<{ title: string; start_time: number; end_time: number }>;
+    totalDuration?: number;
 };
 
 type BookDownloadParams = {
@@ -107,29 +140,48 @@ async function getOrCreateEntry(
 }
 
 export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
-    const { anilistId, episodeNumber, streamUrl, subtitles, chapters } = params;
+    const { anilistId, episodeNumber, streamUrl, subtitles, chapters, totalDuration } = params;
 
-    const entry = await getOrCreateEntry(anilistId, 'anime');
+    const entry: any = await getOrCreateEntry(anilistId, 'anime');
+    const fileName = `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`;
+
+    const downloadId = crypto.randomUUID();
+    activeDownloads.set(downloadId, {
+        id: downloadId,
+        type: 'anime',
+        anilistId,
+        unitNumber: episodeNumber,
+        status: 'pending',
+        progress: 0,
+        startedAt: Date.now(),
+        folderName: entry.folderName,
+        fileName: fileName
+    });
 
     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 };
+
+    if (exists) {
+        activeDownloads.delete(downloadId);
+        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 {
+        updateDownloadProgress(downloadId, { status: 'downloading' });
+
         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;
 
@@ -178,13 +230,11 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
 
         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();
@@ -220,18 +270,14 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
 
             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;
@@ -244,7 +290,6 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
                 }
             });
         } else {
-
             args.push('-map', '0:a:0?');
         }
 
@@ -258,68 +303,43 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
             args.push('-map_metadata', `${chaptersInputIndex}`);
         }
 
-        args.push('-c:v', 'copy');
+        args.push('-c:v', 'copy', '-c:a', 'copy');
-
+        if (subFiles.length) args.push('-c:s', 'srt');
-        args.push('-c:a', 'copy');
+        args.push('-y', outputPath);
-
-        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();
+                const timeMatch = text.match(/time=(\S+)/);
+                const speedMatch = text.match(/speed=(\S+)/);
 
-                if (text.includes('time=') || text.includes('speed=')) {
+                if (timeMatch || speedMatch) {
-                    const timeMatch = text.match(/time=(\S+)/);
+                    const updates: any = {};
-                    const speedMatch = text.match(/speed=(\S+)/);
+
-                    if (timeMatch || speedMatch) {
+                    if (timeMatch) updates.timeElapsed = timeMatch[1];
-                        lastProgress = `⏱️  Time: ${timeMatch?.[1] || 'N/A'} | Speed: ${speedMatch?.[1] || 'N/A'}`;
+                    if (speedMatch) updates.speed = speedMatch[1];
-                        console.log(lastProgress);
+
+                    if (timeMatch && totalDuration && totalDuration > 0) {
+                        const elapsedSeconds = parseFFmpegTime(timeMatch[1]);
+                        updates.progress = Math.min(
+                            99,
+                            Math.round((elapsedSeconds / totalDuration) * 100)
+                        );
                     }
-                } else {
+                    updateDownloadProgress(downloadId, updates);
-                    console.log('[ffmpeg]', text);
                 }
+
             });
 
-            ff.on('error', (error) => {
+            ff.on('error', (error) => reject(error));
-                console.error('❌ Error al iniciar FFmpeg:', error);
-                reject(error);
-            });
-
             ff.on('close', (code) => {
-                if (code === 0) {
+                if (code === 0) resolve(true);
-                    console.log('✅ Descarga completada exitosamente');
+                else reject(new Error(`FFmpeg exited with code ${code}`));
-                    resolve(true);
-                } else {
-                    console.error(`❌ FFmpeg terminó con código: ${code}`);
-                    reject(new Error(`FFmpeg exited with code ${code}`));
-                }
             });
         });
 
@@ -339,8 +359,17 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
             'local_library'
         );
 
+        updateDownloadProgress(downloadId, {
+            status: 'completed',
+            progress: 100,
+            completedAt: Date.now()
+        });
+
+        setTimeout(() => activeDownloads.delete(downloadId), 30000);
+
         return {
             status: 'SUCCESS',
+            download_id: downloadId,
             entry_id: entry.id,
             file_id: fileId,
             episode: episodeNumber,
@@ -350,6 +379,14 @@ export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
     } catch (e: any) {
         fs.rmSync(tempDir, { recursive: true, force: true });
         if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath);
+
+        updateDownloadProgress(downloadId, {
+            status: 'failed',
+            error: e.message
+        });
+
+        setTimeout(() => activeDownloads.delete(downloadId), 60000);
+
         const err = new Error('DOWNLOAD_FAILED');
         (err as any).details = e.message;
         throw err;
@@ -362,6 +399,23 @@ export async function downloadBookChapter(params: BookDownloadParams) {
     const type = format === 'manga' ? 'manga' : 'novels';
     const entry = await getOrCreateEntry(anilistId, type);
 
+    const ext = format === 'manga' ? 'cbz' : 'epub';
+    const fileName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.${ext}`;
+
+    const downloadId = crypto.randomUUID();
+
+    activeDownloads.set(downloadId, {
+        id: downloadId,
+        type: format === 'manga' ? 'manga' : 'novel',
+        anilistId,
+        unitNumber: chapterNumber,
+        status: 'pending',
+        progress: 0,
+        startedAt: Date.now(),
+        folderName: entry.folderName,
+        fileName: fileName
+    });
+
     const existingFile = await queryOne(
         `SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
         [entry.id, chapterNumber],
@@ -369,6 +423,7 @@ export async function downloadBookChapter(params: BookDownloadParams) {
     );
 
     if (existingFile) {
+        activeDownloads.delete(downloadId);
         return {
             status: 'ALREADY_EXISTS',
             message: `Chapter ${chapterNumber} already exists`,
@@ -378,6 +433,8 @@ export async function downloadBookChapter(params: BookDownloadParams) {
     }
 
     try {
+        updateDownloadProgress(downloadId, { status: 'downloading' });
+
         let outputPath: string;
         let fileId: string;
 
@@ -388,7 +445,8 @@ export async function downloadBookChapter(params: BookDownloadParams) {
             const zip = new AdmZip();
             const sortedImages = images!.sort((a, b) => a.index - b.index);
 
-            for (const img of sortedImages) {
+            for (let i = 0; i < sortedImages.length; i++) {
+                const img = sortedImages[i];
                 const res = await fetch(img.url);
                 if (!res.ok) throw new Error(`HTTP_${res.status}`);
                 const buf = Buffer.from(await res.arrayBuffer());
@@ -396,6 +454,10 @@ export async function downloadBookChapter(params: BookDownloadParams) {
                 const ext = path.extname(new URL(img.url).pathname) || '.jpg';
                 const filename = `${img.index.toString().padStart(4, '0')}${ext}`;
                 zip.addFile(filename, buf);
+
+                updateDownloadProgress(downloadId, {
+                    progress: Math.floor((i / sortedImages.length) * 100)
+                });
             }
 
             zip.writeZip(outputPath);
@@ -405,7 +467,6 @@ export async function downloadBookChapter(params: BookDownloadParams) {
             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"?>
@@ -443,7 +504,6 @@ ${content}
 </body>
 </html>`;
             zip.addFile('OEBPS/chapter.xhtml', Buffer.from(chapterXhtml));
-
             zip.writeZip(outputPath);
         }
 
@@ -461,8 +521,17 @@ ${content}
             'local_library'
         );
 
+        updateDownloadProgress(downloadId, {
+            status: 'completed',
+            progress: 100,
+            completedAt: Date.now()
+        });
+
+        setTimeout(() => activeDownloads.delete(downloadId), 30000);
+
         return {
             status: 'SUCCESS',
+            download_id: downloadId,
             entry_id: entry.id,
             file_id: fileId,
             chapter: chapterNumber,
@@ -471,8 +540,26 @@ ${content}
         };
 
     } catch (error: any) {
+        updateDownloadProgress(downloadId, {
+            status: 'failed',
+            error: error.message
+        });
+
+        setTimeout(() => activeDownloads.delete(downloadId), 60000);
+
         const err = new Error('DOWNLOAD_FAILED');
         (err as any).details = error.message;
         throw err;
     }
+}
+
+function parseFFmpegTime(timeStr: string): number {
+    const parts = timeStr.split(':');
+    if (parts.length < 3) return 0;
+
+    const h = parseFloat(parts[0]) || 0;
+    const m = parseFloat(parts[1]) || 0;
+    const s = parseFloat(parts[2]) || 0;
+
+    return (h * 3600) + (m * 60) + s;
 }

docker/src/api/local/local.controller.ts

@@ -2,6 +2,7 @@ import {FastifyReply, FastifyRequest} from 'fastify';
 import fs from 'fs';
 import * as service from './local.service';
 import * as downloadService from './download.service';
+import * as streamingService from './streaming.service';
 
 type ScanQuery = {
     mode?: 'full' | 'incremental';
@@ -21,12 +22,13 @@ type DownloadAnimeBody =
     | {
     anilist_id: number;
     episode_number: number;
-    stream_url: string; // media playlist FINAL
+    stream_url: string;
     is_master?: false;
     subtitles?: {
         language: string;
         url: string;
     }[];
+    duration?: number;
     chapters?: {
         title: string;
         start_time: number;
@@ -36,28 +38,25 @@ type DownloadAnimeBody =
     | {
     anilist_id: number;
     episode_number: number;
-    stream_url: string; // master.m3u8
+    stream_url: string;
+    duration?: number;
     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;
@@ -91,8 +90,7 @@ export async function scanLibrary(request: FastifyRequest<{ Querystring: ScanQue
 export async function listEntries(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
     try {
         const { type } = request.params;
-        const entries = await service.getEntriesByType(type);
+        return await service.getEntriesByType(type);
-        return entries;
     } catch {
         return reply.status(500).send({ error: 'FAILED_TO_LIST_ENTRIES' });
     }
@@ -260,6 +258,7 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
             anilist_id,
             episode_number,
             stream_url,
+            duration,
             is_master,
             subtitles,
             chapters
@@ -267,7 +266,6 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
 
         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',
@@ -275,26 +273,23 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
             });
         }
 
-        // 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
+            chapters,
+            totalDuration: duration
         };
 
-        // Si es master playlist, agregar campos adicionales
         if (is_master === true) {
             const { variant, audio } = request.body as any;
 
@@ -306,14 +301,11 @@ export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnim
             }
 
             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,
@@ -409,4 +401,85 @@ export async function downloadBook(request: FastifyRequest<{ Body: DownloadBookB
 
         return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_BOOK' });
     }
+}
+
+export async function getDownloadStatus(request: FastifyRequest, reply: FastifyReply) {
+    try {
+        const downloads = downloadService.getActiveDownloads();
+        const streams = streamingService.getActiveStreamsStatus();
+
+        return {
+            downloads: {
+                total: downloads.length,
+                active: downloads.filter(d => d.status === 'downloading').length,
+                completed: downloads.filter(d => d.status === 'completed').length,
+                failed: downloads.filter(d => d.status === 'failed').length,
+                list: downloads
+            },
+            streams: {
+                total: streams.length,
+                active: streams.filter(s => !s.isComplete).length,
+                completed: streams.filter(s => s.isComplete).length,
+                list: streams
+            }
+        };
+    } catch (err) {
+        console.error('Error getting download status:', err);
+        return reply.status(500).send({ error: 'FAILED_TO_GET_DOWNLOAD_STATUS' });
+    }
+}
+
+export async function getAnimeStreamManifest(request: FastifyRequest, reply: FastifyReply) {
+    try {
+        const { type, id, unit } = request.params as any;
+
+        if (type !== 'anime') {
+            return reply.status(400).send({ error: 'ONLY_ANIME_SUPPORTED' });
+        }
+
+        const fileInfo = await service.getFileForStreaming(id, unit);
+
+        if (!fileInfo) {
+            return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
+        }
+
+        const manifest = await streamingService.getStreamingManifest(fileInfo.filePath);
+
+        if (!manifest) {
+            return reply.status(500).send({ error: 'FAILED_TO_GENERATE_MANIFEST' });
+        }
+
+        return manifest;
+    } catch (err: any) {
+        console.error('Error getting stream manifest:', err);
+        return reply.status(500).send({ error: 'FAILED_TO_GET_STREAM_MANIFEST' });
+    }
+}
+
+export async function serveHLSFile(request: FastifyRequest, reply: FastifyReply) {
+    try {
+        const { hash, filename } = request.params as any;
+
+        const file = await streamingService.getHLSFile(hash, filename);
+
+        if (!file) {
+            return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
+        }
+
+        const contentType = filename.endsWith('.m3u8')
+            ? 'application/vnd.apple.mpegurl'
+            : filename.endsWith('.vtt')
+                ? 'text/vtt'
+                : 'video/mp2t';
+
+        reply
+            .header('Content-Type', contentType)
+            .header('Content-Length', file.stat.size)
+            .header('Access-Control-Allow-Origin', '*');
+
+        return fs.createReadStream(file.path);
+    } catch (err) {
+        console.error('Error serving HLS file:', err);
+        return reply.status(500).send({ error: 'FAILED_TO_SERVE_HLS_FILE' });
+    }
 }

docker/src/api/local/local.routes.ts

@@ -5,6 +5,8 @@ async function localRoutes(fastify: FastifyInstance) {
     fastify.post('/library/scan', controller.scanLibrary);
     fastify.get('/library/:type', controller.listEntries);
     fastify.get('/library/:type/:id', controller.getEntry);
+
+    // Streaming básico (legacy)
     fastify.get('/library/stream/:type/:id/:unit', controller.streamUnit);
     fastify.post('/library/:type/:id/match', controller.matchEntry);
     fastify.get('/library/:id/units', controller.getUnits);
@@ -12,6 +14,9 @@ async function localRoutes(fastify: FastifyInstance) {
     fastify.get('/library/:unitId/resource/:resId', controller.getPage);
     fastify.post('/library/download/anime', controller.downloadAnime);
     fastify.post('/library/download/book', controller.downloadBook);
+    fastify.get('/library/downloads/status', controller.getDownloadStatus);
+    fastify.get('/library/stream/:type/:id/:unit/manifest', controller.getAnimeStreamManifest);
+    fastify.get('/library/hls/:hash/:filename', controller.serveHLSFile);
 }
 
 export default localRoutes;

docker/src/api/local/local.service.ts

@@ -7,6 +7,7 @@ import path from "path";
 import { getAnimeById, searchAnimeLocal } from "../anime/anime.service";
 import { getBookById, searchBooksAniList } from "../books/books.service";
 import AdmZip from 'adm-zip';
+import { getStreamHash, getSubtitleFileStream } from './streaming.service';
 
 const MANGA_IMAGE_EXTS = ['.jpg', '.jpeg', '.png', '.webp'];
 const MANGA_ARCHIVES = ['.cbz', '.cbr', '.zip'];
@@ -186,8 +187,22 @@ export async function performLibraryScan(mode: 'full' | 'incremental' = 'increme
 }
 
 export async function getEntriesByType(type: string) {
-    const entries = await queryAll(`SELECT * FROM local_entries WHERE type = ?`, [type], 'local_library');
+    const sql = `
-    return await Promise.all(entries.map((entry: any) => resolveEntryMetadata(entry, type)));
+        SELECT local_entries.*, COUNT(local_files.id) as file_count
+        FROM local_entries
+        LEFT JOIN local_files ON local_entries.id = local_files.entry_id
+        WHERE local_entries.type = ?
+        GROUP BY local_entries.id
+    `;
+    const entries = await queryAll(sql, [type], 'local_library');
+    return await Promise.all(entries.map(async (entry: any) => {
+        const metadata = await resolveEntryMetadata(entry, type);
+        return {
+            ...metadata,
+            path: entry.path,
+            files: entry.file_count
+        };
+    }));
 }
 
 export async function getEntryDetails(type: string, id: string) {

docker/src/api/local/streaming.service.ts

@@ -0,0 +1,622 @@
+import { getConfig as loadConfig } from '../../shared/config';
+import { queryOne } from '../../shared/database';
+import crypto from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import { spawn } from 'child_process';
+
+const { values } = loadConfig();
+const FFMPEG_PATH = values.paths?.ffmpeg || 'ffmpeg';
+const FFPROBE_PATH = values.paths?.ffprobe || 'ffprobe';
+
+const STREAM_TTL = 2 * 60 * 60 * 1000;
+
+type VideoStreamInfo = {
+    index: number;
+    codec: string;
+    width: number;
+    height: number;
+    fps: number;
+};
+
+type AudioStreamInfo = {
+    index: number;
+    codec: string;
+    language?: string;
+    title?: string;
+    channels: number;
+    sampleRate: number;
+};
+
+type SubtitleStreamInfo = {
+    index: number;
+    codec: string;
+    language?: string;
+    title?: string;
+    duration: number;
+};
+
+type ChapterInfo = {
+    id: number;
+    start: number;
+    end: number;
+    title: string;
+};
+
+type MediaInfo = {
+    video: VideoStreamInfo[];
+    audio: AudioStreamInfo[];
+    subtitles: SubtitleStreamInfo[];
+    chapters: ChapterInfo[];
+    duration: number;
+};
+
+type ActiveStream = {
+    hash: string;
+    filePath: string;
+    hlsDir: string;
+    info: MediaInfo;
+    process?: any;
+    startedAt: number;
+    lastAccessed: number;
+    isComplete: boolean;
+};
+
+const activeStreams = new Map<string, ActiveStream>();
+
+setInterval(() => {
+    const now = Date.now();
+
+    for (const [hash, stream] of activeStreams.entries()) {
+        const age = now - stream.lastAccessed;
+
+        if (age > STREAM_TTL) {
+            console.log(`🗑️  Limpiando stream antiguo: ${hash}`);
+
+            if (stream.process && !stream.process.killed) {
+                stream.process.kill('SIGKILL');
+            }
+
+            if (fs.existsSync(stream.hlsDir)) {
+                fs.rmSync(stream.hlsDir, { recursive: true, force: true });
+            }
+
+            activeStreams.delete(hash);
+        }
+    }
+}, 60 * 1000);
+
+export function getStreamHash(filePath: string): string {
+    const stat = fs.statSync(filePath);
+    return crypto
+        .createHash('md5')
+        .update(`${filePath}-${stat.mtime.getTime()}`)
+        .digest('hex');
+}
+
+function ensureHLSDirectory(hash: string): string {
+    const tempDir = path.join(require('os').tmpdir(), 'hls-streams', hash);
+
+    if (!fs.existsSync(tempDir)) {
+        fs.mkdirSync(tempDir, { recursive: true });
+    }
+
+    return tempDir;
+}
+
+function buildStreamMap(info: MediaInfo): string {
+    const maps: string[] = [];
+
+    maps.push(`v:0,a:0`);
+
+    return maps.join(' ');
+}
+
+function writeMasterPlaylist(info: MediaInfo, hlsDir: string) {
+    const lines: string[] = ['#EXTM3U'];
+
+    info.audio.forEach((a, i) => {
+        lines.push(
+            `#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="${a.title || `Audio ${i+1}`}",LANGUAGE="${a.language || 'und'}",AUTOSELECT=YES,DEFAULT=${i===0?'YES':'NO'},URI="audio_${i}.m3u8"`
+        );
+    });
+
+    info.subtitles.forEach((s, i) => {
+        lines.push(
+            `#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="${s.title || `Sub ${i+1}`}",LANGUAGE="${s.language || 'und'}",AUTOSELECT=YES,DEFAULT=NO,URI="subs_${i}.m3u8"`
+        );
+    });
+
+    const v = info.video[0];
+    const bandwidth = v.width * v.height * v.fps * 0.07 | 0;
+
+    lines.push(
+        `#EXT-X-STREAM-INF:BANDWIDTH=${bandwidth},RESOLUTION=${v.width}x${v.height},AUDIO="audio"${info.subtitles.length ? ',SUBTITLES="subs"' : ''}`
+    );
+    lines.push('video.m3u8');
+
+    fs.writeFileSync(path.join(hlsDir, 'master.m3u8'), lines.join('\n'));
+}
+
+function startHLSConversion(filePath: string, info: MediaInfo, hash: string): ActiveStream {
+    const hlsDir = ensureHLSDirectory(hash);
+
+    const stream: ActiveStream = {
+        hash,
+        filePath,
+        hlsDir,
+        info,
+        process: null,
+        startedAt: Date.now(),
+        lastAccessed: Date.now(),
+        isComplete: false
+    };
+
+    activeStreams.set(hash, stream);
+
+    (async () => {
+        try {
+
+            await extractSubtitles(filePath, info, hlsDir);
+
+            writeMasterPlaylist(info, hlsDir);
+
+            startVideoTranscoding(stream, filePath, info, hlsDir);
+
+        } catch (err) {
+            console.error('❌ Error en el flujo de inicio:', err);
+        }
+    })();
+
+    return stream;
+}
+
+function startVideoTranscoding(stream: ActiveStream, filePath: string, info: MediaInfo, hlsDir: string) {
+    const args: string[] = ['-i', filePath];
+
+    args.push(
+        '-map', '0:v:0',
+        '-c:v', 'libx264',
+        '-preset', 'veryfast',
+        '-profile:v', 'main',
+        '-g', '48',
+        '-keyint_min', '48',
+        '-sc_threshold', '0',
+        '-pix_fmt', 'yuv420p',
+        '-f', 'hls',
+        '-hls_time', '4',
+        '-hls_playlist_type', 'event',
+
+        '-hls_flags', 'independent_segments',
+        '-hls_segment_filename', path.join(hlsDir, 'v_%05d.ts'),
+        path.join(hlsDir, 'video.m3u8')
+    );
+
+    info.audio.forEach((a, i) => {
+        args.push(
+            '-map', `0:${a.index}`,
+            `-c:a:${i}`, 'aac',
+            `-b:a:${i}`, '128k',
+            '-f', 'hls',
+            '-hls_time', '4',
+            '-hls_playlist_type', 'event',
+            '-hls_flags', 'independent_segments',
+            '-hls_segment_filename', path.join(hlsDir, `a${i}_%05d.ts`),
+            path.join(hlsDir, `audio_${i}.m3u8`)
+        );
+    });
+
+    console.log('🎬 Starting Video/Audio transcoding:', args.join(' '));
+
+    const ffmpeg = spawn(FFMPEG_PATH, args, {
+        windowsHide: true,
+        stdio: ['ignore', 'pipe', 'pipe']
+    });
+
+    stream.process = ffmpeg;
+
+    ffmpeg.stderr.on('data', (data) => {
+        const text = data.toString();
+
+        if (text.includes('time=')) {
+            const timeMatch = text.match(/time=(\S+)/);
+            if (timeMatch) console.log(`⏱️  Converting ${stream.hash.substr(0,6)}: ${timeMatch[1]}`);
+        }
+    });
+
+    ffmpeg.on('close', (code) => {
+        if (code === 0) {
+            console.log('✅ Video transcoding complete');
+            stream.isComplete = true;
+
+        }
+    });
+}
+
+const SUBTITLE_EXTENSIONS: Record<string, string> = {
+    'ass': 'ass',
+    'ssa': 'ass',
+    'subrip': 'srt',
+    'webvtt': 'vtt',
+    'hdmv_pgs_subtitle': 'sup',
+    'mov_text': 'srt',
+    'dvd_subtitle': 'sub',
+    'text': 'srt'
+};
+
+async function extractSubtitles(filePath: string, info: MediaInfo, hlsDir: string): Promise<void> {
+    if (info.subtitles.length === 0) return;
+
+    console.log('📝 Extrayendo subtítulos...');
+
+    const promises = info.subtitles.map((s, i) => {
+        return new Promise<void>((resolve, reject) => {
+            const codec = s.codec.toLowerCase();
+            const ext = codec === 'subrip' ? 'srt'
+                : codec === 'ass' || codec === 'ssa' ? 'ass'
+                    : codec === 'webvtt' ? 'vtt'
+                        : 'sub';
+
+            const outputFilename = `s${i}_full.${ext}`;
+            const outputPath = path.join(hlsDir, outputFilename);
+            const playlistPath = path.join(hlsDir, `subs_${i}.m3u8`);
+
+            if (s.duration === 0) {
+                console.log(`⚠️ Sub vacío, skip: ${i}`);
+                createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
+                fs.writeFileSync(outputPath, '');
+                resolve();
+                return;
+            }
+
+            console.log(`  Track ${i}: ${s.title || s.language || 'Unknown'} [${codec}] -> ${ext}`);
+
+            const args = [
+                '-i', filePath,
+                '-map', `0:s:${i}`
+            ];
+
+            args.push('-c:s', 'copy');
+            args.push('-y', outputPath);
+
+            console.log(`  Comando: ffmpeg ${args.join(' ')}`);
+
+            const p = spawn(FFMPEG_PATH, args, {
+                stdio: ['ignore', 'pipe', 'pipe']
+            });
+
+            let errorOutput = '';
+
+            p.stderr.on('data', (data) => {
+                errorOutput += data.toString();
+            });
+
+            p.on('close', (code) => {
+                if (code === 0) {
+                    try {
+
+                        if (!fs.existsSync(outputPath)) {
+                            console.error(`  ❌ Archivo no creado: ${outputFilename}`);
+
+                            fs.writeFileSync(outputPath, '');
+                        } else {
+                            const stat = fs.statSync(outputPath);
+                            if (stat.size === 0) {
+                                console.error(`  ⚠️ Subtítulo ${i} tiene 0 bytes`);
+                                console.error(`  FFmpeg stderr:`, errorOutput.slice(-500));
+                            } else {
+                                console.log(`  ✅ Subtítulo ${i} extraído: ${stat.size} bytes`);
+                            }
+                        }
+
+                        createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
+                        resolve();
+                    } catch (e) {
+                        console.error(`  Error procesando subtítulo ${i}:`, e);
+                        resolve();
+                    }
+                } else {
+                    console.error(`  ❌ Error extrayendo subtítulo ${i}. Exit code: ${code}`);
+                    console.error(`  FFmpeg stderr:`, errorOutput.slice(-500));
+
+                    fs.writeFileSync(outputPath, '');
+                    createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
+                    resolve();
+                }
+            });
+
+            p.on('error', (err) => {
+                console.error(`  Error spawn ffmpeg subs ${i}:`, err);
+                fs.writeFileSync(outputPath, '');
+                createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
+                resolve();
+            });
+        });
+    });
+
+    await Promise.all(promises);
+    console.log('✅ Proceso de subtítulos finalizado.');
+}
+
+function createDummySubtitlePlaylist(playlistPath: string, subtitleFilename: string, duration: number) {
+    const content = [
+        '#EXTM3U',
+        '#EXT-X-VERSION:3',
+        `#EXT-X-TARGETDURATION:${Math.ceil(duration)}`,
+        '#EXT-X-MEDIA-SEQUENCE:0',
+        '#EXT-X-PLAYLIST-TYPE:VOD',
+        `#EXTINF:${duration.toFixed(6)},`,
+        subtitleFilename,
+        '#EXT-X-ENDLIST'
+    ].join('\n');
+
+    fs.writeFileSync(playlistPath, content);
+}
+
+async function probeMediaFile(filePath: string): Promise<MediaInfo> {
+    return new Promise((resolve, reject) => {
+        const args = [
+            '-v', 'quiet',
+            '-print_format', 'json',
+            '-show_streams',
+            '-show_chapters',
+            '-show_format',
+            filePath
+        ];
+
+        const ffprobe = spawn(FFPROBE_PATH, args);
+        let output = '';
+
+        ffprobe.stdout.on('data', (data) => {
+            output += data.toString();
+        });
+
+        ffprobe.on('close', (code) => {
+            if (code !== 0) {
+                return reject(new Error(`FFprobe failed with code ${code}`));
+            }
+
+            try {
+                const data = JSON.parse(output);
+
+                const video: VideoStreamInfo[] = data.streams
+                    .filter((s: any) => s.codec_type === 'video')
+                    .map((s: any) => ({
+                        index: s.index,
+                        codec: s.codec_name,
+                        width: s.width,
+                        height: s.height,
+                        fps: eval(s.r_frame_rate) || 24
+                    }));
+
+                const audio: AudioStreamInfo[] = data.streams
+                    .filter((s: any) => s.codec_type === 'audio')
+                    .map((s: any) => ({
+                        index: s.index,
+                        codec: s.codec_name,
+                        language: s.tags?.language,
+                        title: s.tags?.title,
+                        channels: s.channels || 2,
+                        sampleRate: parseInt(s.sample_rate) || 48000
+                    }));
+
+                const subtitles: SubtitleStreamInfo[] = data.streams
+                    .filter((s: any) => s.codec_type === 'subtitle')
+                    .map((s: any) => ({
+                        index: s.index,
+                        codec: s.codec_name,
+                        language: s.tags?.language,
+                        title: s.tags?.title,
+                        duration: parseFloat(s.duration) || 0
+                    }));
+
+                const chapters: ChapterInfo[] = (data.chapters || []).map((c: any) => ({
+                    id: c.id,
+                    start: parseFloat(c.start_time),
+                    end: parseFloat(c.end_time),
+                    title: c.tags?.title || `Chapter ${c.id + 1}`
+                }));
+
+                const duration = parseFloat(data.format?.duration) || 0;
+
+                console.log(`📊 Media info: ${video.length} video, ${audio.length} audio, ${subtitles.length} subs`);
+
+                resolve({ video, audio, subtitles, chapters, duration });
+            } catch (e) {
+                reject(e);
+            }
+        });
+
+        ffprobe.on('error', reject);
+    });
+}
+
+export async function getStreamingManifest(filePath: string) {
+    if (!fs.existsSync(filePath)) {
+        return null;
+    }
+
+    const hash = getStreamHash(filePath);
+
+    const formatSubtitles = (subs: SubtitleStreamInfo[]) => {
+        return subs.map((s, i) => {
+            const ext = SUBTITLE_EXTENSIONS[s.codec] || 'vtt';
+            return {
+                index: s.index,
+                codec: s.codec,
+                language: s.language || 'und',
+                title: s.title || `Subtitle ${s.index}`,
+
+                url: `/api/library/hls/${hash}/s${i}_full.${ext}`
+            };
+        });
+    };
+
+    const existing = activeStreams.get(hash);
+    if (existing) {
+        existing.lastAccessed = Date.now();
+
+        return {
+            type: 'hls',
+            hash,
+            masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
+            duration: existing.info.duration,
+            isComplete: existing.isComplete,
+            video: existing.info.video.map(v => ({
+                index: v.index,
+                codec: v.codec,
+                resolution: `${v.width}x${v.height}`,
+                fps: v.fps
+            })),
+            audio: existing.info.audio.map(a => ({
+                index: a.index,
+                codec: a.codec,
+                language: a.language || 'und',
+                title: a.title || `Audio ${a.index}`,
+                channels: a.channels
+            })),
+
+            subtitles: formatSubtitles(existing.info.subtitles),
+            chapters: existing.info.chapters.map(c => ({
+                id: c.id,
+                start: c.start,
+                end: c.end,
+                title: c.title
+            }))
+        };
+    }
+
+    const duplicateCheck = activeStreams.get(hash);
+
+    if (duplicateCheck) {
+        duplicateCheck.lastAccessed = Date.now();
+        return {
+            type: 'hls',
+            hash,
+            masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
+            duration: duplicateCheck.info.duration,
+            isComplete: duplicateCheck.isComplete,
+            video: duplicateCheck.info.video.map(v => ({
+                index: v.index,
+                codec: v.codec,
+                resolution: `${v.width}x${v.height}`,
+                fps: v.fps
+            })),
+            audio: duplicateCheck.info.audio.map(a => ({
+                index: a.index,
+                codec: a.codec,
+                language: a.language || 'und',
+                title: a.title || `Audio ${a.index}`,
+                channels: a.channels
+            })),
+            subtitles: formatSubtitles(duplicateCheck.info.subtitles),
+            chapters: duplicateCheck.info.chapters.map(c => ({
+                id: c.id,
+                start: c.start,
+                end: c.end,
+                title: c.title
+            }))
+        };
+    }
+
+    const info = await probeMediaFile(filePath);
+    return {
+        type: 'hls',
+        hash,
+        masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
+        duration: info.duration,
+        isComplete: false,
+        generating: true,
+        video: info.video.map(v => ({
+            index: v.index,
+            codec: v.codec,
+            resolution: `${v.width}x${v.height}`,
+            fps: v.fps
+        })),
+        audio: info.audio.map(a => ({
+            index: a.index,
+            codec: a.codec,
+            language: a.language || 'und',
+            title: a.title || `Audio ${a.index}`,
+            channels: a.channels
+        })),
+        subtitles: formatSubtitles(info.subtitles),
+        chapters: info.chapters.map(c => ({
+            id: c.id,
+            start: c.start,
+            end: c.end,
+            title: c.title
+        }))
+    };
+}
+
+export function getSubtitleFileStream(hash: string, trackIndex: number) {
+    const stream = activeStreams.get(hash);
+
+    if (!stream) {
+
+        const tempDir = path.join(require('os').tmpdir(), 'hls-streams', hash);
+        if(fs.existsSync(tempDir)) {
+
+            const files = fs.readdirSync(tempDir);
+            const subFile = files.find(f => f.startsWith(`s${trackIndex}_full.`));
+            if (subFile) return fs.createReadStream(path.join(tempDir, subFile));
+        }
+        return null;
+    }
+
+    if (!fs.existsSync(stream.hlsDir)) return null;
+
+    const files = fs.readdirSync(stream.hlsDir);
+    const subtitleFile = files.find(f => f.startsWith(`s${trackIndex}_full.`));
+
+    if (!subtitleFile) return null;
+
+    return fs.createReadStream(path.join(stream.hlsDir, subtitleFile));
+}
+
+export async function getHLSFile(hash: string, filename: string) {
+    const stream = activeStreams.get(hash);
+
+    if (!stream) {
+        return null;
+    }
+
+    stream.lastAccessed = Date.now();
+
+    const filePath = path.join(stream.hlsDir, filename);
+
+    const maxWait = 30000;
+
+    const startWait = Date.now();
+
+    while (!fs.existsSync(filePath)) {
+        if (Date.now() - startWait > maxWait) {
+            console.error(`⏱️  Timeout esperando archivo: ${filename}`);
+            return null;
+        }
+
+        if (stream.isComplete && !fs.existsSync(filePath)) {
+            return null;
+        }
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+
+    return {
+        path: filePath,
+        stat: fs.statSync(filePath)
+    };
+}
+
+export function getActiveStreamsStatus() {
+    return Array.from(activeStreams.values()).map(stream => ({
+        hash: stream.hash,
+        filePath: stream.filePath,
+        isComplete: stream.isComplete,
+        startedAt: stream.startedAt,
+        lastAccessed: stream.lastAccessed,
+        age: Date.now() - stream.startedAt,
+        idle: Date.now() - stream.lastAccessed
+    }));
+}

docker/src/api/rooms/rooms.controller.ts

@@ -0,0 +1,158 @@
+import { FastifyReply, FastifyRequest } from 'fastify';
+import * as roomService from './rooms.service';
+import { getUserById } from '../user/user.service';
+import { openTunnel } from "./tunnel.manager";
+
+interface CreateRoomBody {
+    name: string;
+    password?: string;
+    expose?: boolean;
+}
+
+export async function createRoom(req: any, reply: FastifyReply) {
+    try {
+        const { name, password, expose } = req.body as CreateRoomBody;
+        const userId = req.user?.id;
+
+        if (!userId) {
+            return reply.code(401).send({ error: "Authentication required to create room" });
+        }
+
+        if (!name || name.trim().length === 0) {
+            return reply.code(400).send({ error: "Room name is required" });
+        }
+
+        const user = await getUserById(userId);
+        if (!user) {
+            return reply.code(404).send({ error: "User not found" });
+        }
+
+        const host = {
+            id: `user_${userId}`,
+            username: user.username,
+            avatar: user.profile_picture_url || undefined,
+            isHost: true,
+            isGuest: false,
+            userId
+        };
+
+        let publicUrl: string | undefined;
+
+        if (expose) {
+            publicUrl = await openTunnel();
+        }
+
+        const room = roomService.createRoom(
+            name,
+            host,
+            password,
+            !!expose,
+            publicUrl
+        );
+
+        if (expose && publicUrl) {
+            room.publicUrl = `${publicUrl}/room?id=${room.id}`;
+        }
+
+        return reply.send({
+            success: true,
+            room: {
+                id: room.id,
+                name: room.name,
+                hasPassword: !!room.password,
+                userCount: room.users.size,
+                exposed: room.exposed,
+                publicUrl: room.publicUrl
+            }
+        });
+    } catch (err) {
+        console.error("Create Room Error:", err);
+        return reply.code(500).send({ error: "Failed to create room" });
+    }
+}
+
+export async function getRooms(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const rooms = roomService.getAllRooms();
+
+        const roomList = rooms.map((room) => ({
+            id: room.id,
+            name: room.name,
+            host: room.host.username,
+            userCount: room.users.size,
+            hasPassword: !!room.password,
+            currentlyWatching: room.currentVideo ? {
+                animeId: room.currentVideo.animeId,
+                episode: room.currentVideo.episode
+            } : null
+        }));
+
+        return reply.send({ rooms: roomList });
+    } catch (err) {
+        console.error("Get Rooms Error:", err);
+        return reply.code(500).send({ error: "Failed to retrieve rooms" });
+    }
+}
+
+export async function getRoom(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const { id } = req.params as { id: string };
+        const room = roomService.getRoom(id);
+
+        if (!room) {
+            return reply.code(404).send({ error: "Room not found" });
+        }
+
+        return reply.send({
+            room: {
+                id: room.id,
+                name: room.name,
+                host: {
+                    username: room.host.username,
+                    avatar: room.host.avatar
+                },
+                users: Array.from(room.users.values()).map(u => ({
+                    id: u.id,
+                    username: u.username,
+                    avatar: u.avatar,
+                    isHost: u.isHost,
+                    isGuest: u.isGuest
+                })),
+                hasPassword: !!room.password,
+                currentVideo: room.currentVideo,
+                exposed: room.exposed,
+                publicUrl: room.publicUrl
+            }
+        });
+    } catch (err) {
+        console.error("Get Room Error:", err);
+        return reply.code(500).send({ error: "Failed to retrieve room" });
+    }
+}
+
+export async function deleteRoom(req: any, reply: FastifyReply) {
+    try {
+        const { id } = req.params as { id: string };
+        const userId = req.user?.id;
+
+        if (!userId) {
+            return reply.code(401).send({ error: "Authentication required" });
+        }
+
+        const room = roomService.getRoom(id);
+        if (!room) {
+            return reply.code(404).send({ error: "Room not found" });
+        }
+
+        if (room.host.userId !== userId) {
+            return reply.code(403).send({ error: "Only the host can delete the room" });
+        }
+
+        roomService.deleteRoom(id);
+
+        return reply.send({ success: true });
+    } catch (err) {
+        console.error("Delete Room Error:", err);
+        return reply.code(500).send({ error: "Failed to delete room" });
+    }
+}

docker/src/api/rooms/rooms.routes.ts

@@ -0,0 +1,11 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './rooms.controller';
+
+async function roomRoutes(fastify: FastifyInstance) {
+    fastify.post('/rooms', controller.createRoom);
+    fastify.get('/rooms', controller.getRooms);
+    fastify.get('/rooms/:id', controller.getRoom);
+    fastify.delete('/rooms/:id', controller.deleteRoom);
+}
+
+export default roomRoutes;