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,24 +40,20 @@
 #### 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                                                                              |
-|------------|-----------------|-----------------------------------------------------------|
+|----------|-----------------|-----------------------------------------------------------------------------------|
 | Windows  | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
+| Docker   | ✅ Available now | WIP docs                                                                          |
+| Android  | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
 | Linux    | ⏳ Coming soon   | —                                                                                 |
 | macOS    | ⏳ Coming soon   | —                                                                                 |
 
@@ -68,9 +66,8 @@ 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.**
 
 ---
 

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

@@ -27,7 +27,7 @@
     "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",
     "ws": "^8.18.3"
   },
@@ -46,6 +46,7 @@
   "build": {
     "appId": "app.waifuboard",
     "productName": "Waifu Board",
+    "asar": true,
     "files": [
       "electron/**/*",
       "server.js",
@@ -58,10 +59,6 @@
       "loading.html"
     ],
     "extraResources": [
-      {
-        "from": "C:\\Users\\synta\\AppData\\Local\\ms-playwright\\chromium_headless_shell-1200",
-        "to": "playwright/chromium"
-      },
       ".env"
     ],
     "win": {

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: [] };
@@ -340,3 +347,27 @@ export async function openInMPV(req: any, reply: any) {
         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,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,
@@ -451,8 +530,9 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
                 title: ep.title
             }));
 
-            // Cachear tanto el mediaId como los episodios
+            if (result.length > 0) {
                 await setCache(cacheKey, { mediaId, episodes: result }, CACHE_TTL_MS);
+            }
 
             return result;
         } catch (e) {
@@ -525,10 +605,26 @@ export async function getStreamData(extension: Extension, episode: string, id: s
         throw new Error("Episode not found");
     }
 
-    const streamData = await extension.findEpisodeServer(targetEp, server, category);
+    let streamData: StreamData;
+
+    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 {

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: [] };
     }
 }

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,
@@ -330,7 +339,6 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
                     url: m.url,
                 }));
             }
-
         } catch (e) {
             console.error(`Extension search failed for ${name}:`, e);
         }
@@ -458,10 +466,13 @@ async function searchChaptersInExtension(ext: Extension, name: string, lookupId:
             language: ch.language ?? null,
         }));
 
+        if (result.length > 0) {
             await setCache(cacheKey, {
                 mediaId,
                 chapters: result
             }, CACHE_TTL_MS);
+        }
+
         return result;
 
     } catch (e) {
@@ -598,7 +609,15 @@ export async function getChapterContent(bookId: string, chapterId: string, provi
             throw new Error("Unknown mediaType");
         }
 
+        if (
+            contentResult &&
+            (
+                (contentResult.type === "manga" && contentResult.pages?.length) ||
+                (contentResult.type === "ln" && contentResult.content)
+            )
+        ) {
             await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
+        }
         return contentResult;
 
     } catch (err) {

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

@@ -153,3 +153,24 @@ export async function uninstallExtension(req: any, reply: FastifyReply) {
         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/types.ts

@@ -97,7 +97,7 @@ 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?: (s: any, server1: string | undefined, category: string | undefined) => Promise<any>;
     findChapters?: (id: string) => Promise<Chapter[]>;
@@ -111,6 +111,7 @@ export interface ExtensionSettings {
 }
 
 export interface StreamData {
+    videoSources: any;
     url?: string;
     sources?: any[];
     subtitles?: any[];

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
-
-        const avatarUrl = user.avatar || "/public/assets/avatar.png"
             navAvatar.src = avatarUrl
-        if (dropdownAvatar) {
+            if (dropdownAvatar) dropdownAvatar.src = avatarUrl
-            dropdownAvatar.src = avatarUrl
+        }
+
+        const titlebarAvatar = document.getElementById("titlebar-avatar")
+        const titlebarActions = document.getElementById("titlebar-actions")
+
+        if (titlebarAvatar) {
+            titlebarAvatar.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,63 +70,69 @@ 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")
-    })
 
-    document.addEventListener("click", (e) => {
+            document.getElementById("titlebar-dropdown")?.classList.remove("active")
-        if (!navDropdown.contains(e.target)) {
-            navDropdown.classList.remove("active")
-        }
         })
-
+        if (navLogout) {
-    navDropdown.addEventListener("click", (e) => {
-        e.stopPropagation()
-    })
-
             navLogout.addEventListener("click", () => {
                 localStorage.removeItem("token")
                 window.location.href = "/"
             })
+        }
+    }
 
-    const dropdownLinks = navDropdown.querySelectorAll("a.dropdown-item")
+    const titlebarUserBox = document.getElementById("titlebar-user-box")
-    dropdownLinks.forEach((link) => {
+    const titlebarDropdown = document.getElementById("titlebar-dropdown")
-        link.addEventListener("click", () => {
+    const titlebarLogout = document.getElementById("titlebar-logout")
-            navDropdown.classList.remove("active")
+
+    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 && !navDropdown.contains(e.target)) {
+            navDropdown.classList.remove("active")
+        }
+        if (titlebarDropdown && !titlebarDropdown.contains(e.target)) {
+            titlebarDropdown.classList.remove("active")
+        }
     })
 }
 
@@ -159,7 +180,6 @@ searchWrapper.addEventListener('click', (e) => {
     }
 });
 
-// Cerrar el buscador si se hace clic fuera
 document.addEventListener('click', (e) => {
     if (!searchWrapper.contains(e.target)) {
         searchWrapper.classList.remove('active-mobile');

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');
+    // 1. Prepare items
+    if (state.currentTab === 'marketplace') {
+        items = Object.entries(state.metadata).map(([id, data]) => ({
+            id, ...data, isInstalled: state.installed.includes(id.toLowerCase())
+        }));
     } else {
-                    updateAllBtn.classList.add('hidden');
+        const metaItems = Object.entries(state.metadata)
-                }
+            .filter(([id]) => state.installed.includes(id.toLowerCase()))
-            }
+            .map(([id, data]) => ({ id, ...data, isInstalled: true }));
 
-            renderGroupedView();
+        items = [...metaItems];
-        };
-    });
-}
 
-async function handleUpdateAll() {
+        state.installed.forEach(instId => {
-    const originalText = updateAllBtn.innerText;
+            if (!items.find(i => i.id.toLowerCase() === instId)) {
-    try {
+                items.push({
-        updateAllBtn.disabled = true;
+                    id: instId,
-        updateAllBtn.innerText = 'Updating...';
+                    name: capitalize(instId),
-
-        const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
-        if (!res.ok) throw new Error('Update failed');
-
-        const data = await res.json();
-
-        if (data.updated && data.updated.length > 0) {
-
-            const list = data.updated.join(', ');
-            window.NotificationUtils.success(`Updated: ${list}`);
-
-            await loadMarketplace();
-        } else {
-            window.NotificationUtils.info('Everything is up to date.');
-        }
-    } catch (error) {
-        console.error('Update All Error:', error);
-        window.NotificationUtils.error('Failed to perform bulk update.');
-    } finally {
-        updateAllBtn.disabled = false;
-        updateAllBtn.innerText = originalText;
-    }
-}
-
-function renderGroupedView() {
-    marketplaceContent.innerHTML = '';
-    const activeFilter = filterSelect.value;
-    const groups = {};
-
-    let listToRender = [];
-
-    if (currentTab === 'marketplace') {
-        for (const [id, data] of Object.entries(marketplaceMetadata)) {
-            listToRender.push({
-                id,
-                ...data,
-                isInstalled: installedExtensions.includes(id.toLowerCase())
-            });
-        }
-    } else {
-        for (const [id, data] of Object.entries(marketplaceMetadata)) {
-            if (installedExtensions.includes(id.toLowerCase())) {
-                listToRender.push({ id, ...data, isInstalled: true });
-            }
-        }
-
-        installedExtensions.forEach(id => {
-            const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
-            if (!existsInMeta) {
-                listToRender.push({
-                    id: id,
-                    name: id.charAt(0).toUpperCase() + id.slice(1),
                     type: 'Local',
-                    author: 'Unknown',
+                    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/room.js

@@ -88,6 +88,7 @@ const RoomsApp = (function() {
 
         // Anime Search Modal
         animeSearchModal: document.getElementById('anime-search-modal'),
+        searchSourceSelect: document.getElementById('search-source-select'),
         animeSearchInput: document.getElementById('anime-search-input'),
         animeResults: document.getElementById('anime-results'),
         closeSearchBtn: document.getElementById('close-search-modal'),
@@ -222,6 +223,24 @@ const RoomsApp = (function() {
         );
 
         extensionsReady = true;
+
+        // AÑADE ESTO AQUÍ: Llenar el dropdown de búsqueda inmediatamente
+        populateSearchDropdown();
+    }
+
+    // AÑADE ESTA NUEVA FUNCIÓN FUERA (o dentro del scope de RoomsApp)
+    function populateSearchDropdown() {
+        if (!elements.searchSourceSelect) return;
+
+        // Reiniciar y poner AniList primero
+        elements.searchSourceSelect.innerHTML = '<option value="anilist">AniList</option>';
+
+        extensionsStore.list.forEach(ext => {
+            const opt = document.createElement('option');
+            opt.value = ext;
+            opt.textContent = ext[0].toUpperCase() + ext.slice(1);
+            elements.searchSourceSelect.appendChild(opt);
+        });
     }
 
     function setupEventListeners() {
@@ -369,6 +388,16 @@ const RoomsApp = (function() {
         });
 
         elements.roomExtSelect.value = selectedAnimeData.source || extensionsStore.list[0];
+        if (elements.searchSourceSelect) {
+            elements.searchSourceSelect.innerHTML = '<option value="anilist">AniList</option>';
+
+            extensionsStore.list.forEach(ext => {
+                const opt = document.createElement('option');
+                opt.value = ext;
+                opt.textContent = ext[0].toUpperCase() + ext.slice(1);
+                elements.searchSourceSelect.appendChild(opt);
+            });
+        }
 
         await onQuickExtensionChange(null, true);
     }
@@ -459,8 +488,17 @@ const RoomsApp = (function() {
             e.preventDefault();
             e.stopPropagation();
 
-            let title, img, id;
+            let title, img, id, source;
 
+            // Try to get data from dataset (Extension Results)
+            if (itemLink.dataset.source) {
+                id = itemLink.dataset.id;
+                source = itemLink.dataset.source;
+                title = itemLink.dataset.title;
+                img = itemLink.dataset.image;
+            }
+            // Fallback to DOM parsing (AniList/SearchManager Results)
+            else {
                 const titleEl = itemLink.querySelector('.search-title');
                 const imgEl = itemLink.querySelector('.search-poster, img');
 
@@ -470,6 +508,8 @@ const RoomsApp = (function() {
                 const href = itemLink.getAttribute('href') || '';
                 const hrefParts = href.split('/').filter(p => p);
                 id = hrefParts[hrefParts.length - 1] || itemLink.dataset.id;
+                source = 'anilist';
+            }
 
             if (!id) return;
 
@@ -477,12 +517,14 @@ const RoomsApp = (function() {
                 id: id,
                 title: title,
                 image: img,
-                source: 'anilist'
+                source: source // Set the detected source
             };
+
             const animeResultObj = {
                 id: id,
                 title: title,
-                cover: img
+                cover: img,
+                source: source // Pass to next function
             };
 
             showConfigStep();
@@ -649,18 +691,34 @@ const RoomsApp = (function() {
         let episodeToPlay = activeContext.episode;
         if (fromModal && elements.inpEpisode) episodeToPlay = elements.inpEpisode.value;
 
-        const ext = overrides.forceExtension ||
+        let ext = overrides.forceExtension ||
             (fromModal ? (configState.extension || elements.selExtension?.value) : null) ||
             activeContext.extension ||
             (elements.roomExtSelect ? elements.roomExtSelect.value : null);
 
-        const server = overrides.forceServer ||
-            (fromModal ? (configState.server || elements.selServer?.value) : null) ||
-            activeContext.server ||
-            (elements.roomServerSelect ? elements.roomServerSelect.value : null);
-
         const category = elements.roomSdToggle?.getAttribute('data-state') || activeContext.category || 'sub';
 
+        let currentSource = selectedAnimeData.source || 'anilist';
+
+        if (currentSource !== 'anilist') {
+            ext = currentSource;
+        }
+
+        let server = overrides.forceServer;
+
+        if (!server) {
+            if (fromModal) {
+                server = configState.server || elements.selServer?.value;
+            } else if (currentSource !== 'anilist' || ext === elements.roomExtSelect?.value) {
+                server = elements.roomServerSelect?.value;
+            }
+        }
+
+        if (!server && extensionsStore.settings[ext]) {
+            const extSettings = extensionsStore.settings[ext];
+            server = extSettings.episodeServers?.[0] || 'Default';
+        }
+
         if (!ext || !server) {
             console.warn("Faltan datos (ext o server).", {ext, server});
             if (fromModal && elements.configError) {
@@ -681,8 +739,8 @@ const RoomsApp = (function() {
         }
 
         try {
-            const apiUrl = `/api/watch/stream?animeId=${selectedAnimeData.id}&episode=${episodeToPlay}&server=${encodeURIComponent(server)}&category=${category}&ext=${ext}&source=anilist`;
+            const currentSource = selectedAnimeData.source || 'anilist';
-            console.log('Fetching stream:', apiUrl);
+            const apiUrl = `/api/watch/stream?animeId=${selectedAnimeData.id}&episode=${episodeToPlay}&server=${encodeURIComponent(server)}&category=${category}&ext=${ext}&source=${currentSource}`;            console.log('Fetching stream:', apiUrl);
 
             const res = await fetch(apiUrl);
             if (!res.ok) throw new Error(`Error ${res.status}: Failed to fetch stream`);
@@ -699,8 +757,13 @@ const RoomsApp = (function() {
 
             let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
             const headers = data.headers || {};
-            if (headers['Referer']) proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
+            if (headers['Referer']) {
+                proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
+            }
 
+            if (headers['User-Agent']) {
+                proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
+            }
             const subtitles = (source.subtitles || []).map(sub => ({
                 label: sub.language,
                 srclang: sub.id || sub.language.toLowerCase().slice(0, 2),
@@ -797,14 +860,22 @@ const RoomsApp = (function() {
         updateCountBtn();
 
         try {
-            const response = await fetch(`/api/anime/${animeResult.id}?source=anilist`);
+            // Use the source from the result (default to anilist)
+            const sourceParam = animeResult.source || 'anilist';
+
+            // Fetch details using the specific source
+            const response = await fetch(`/api/anime/${animeResult.id}?source=${sourceParam}`);
+
             if (!response.ok) throw new Error("Failed to load anime details");
 
             const data = await response.json();
             currentAnimeDetails = data;
 
+            // Save metadata
             if (selectedAnimeData) {
-                selectedAnimeData.malId = data.idMal;
+                selectedAnimeData.malId = data.idMal; // Might be null for extensions, that's okay
+                // Ensure source is persisted
+                selectedAnimeData.source = sourceParam;
             }
 
             modalTotalEpisodes = data.episodes || 12;
@@ -813,9 +884,19 @@ const RoomsApp = (function() {
             renderModalEpisodes();
             setupModalPaginationControls();
 
+            // Auto-select the extension in the config dropdown if it matches
+            if (extensionsReady && elements.selExtension && sourceParam !== 'anilist') {
+                // If the extension we searched with is in the list, select it
+                if (Array.from(elements.selExtension.options).some(o => o.value === sourceParam)) {
+                    elements.selExtension.value = sourceParam;
+                    handleModalExtensionChange();
+                }
+            }
+
         } catch (error) {
             console.error("Error fetching details", error);
             gridContainer.innerHTML = '';
+            // If details fail (common with strict scrapers), show manual input
             document.querySelector('.manual-ep-input').style.display = 'block';
             document.getElementById('modal-pagination').style.display = 'none';
         }
@@ -1985,12 +2066,62 @@ const RoomsApp = (function() {
     async function searchAnime() {
         const query = elements.animeSearchInput.value.trim();
         if (!query) return;
-        elements.animeResults.innerHTML = '<div style="padding:20px;text-align:center;color:#888;">Searching...</div>';
+
+        const source = elements.searchSourceSelect ? elements.searchSourceSelect.value : 'anilist';
+        elements.animeResults.innerHTML = '<div style="padding:20px;text-align:center;color:#888;"><div class="spinner" style="margin:0 auto 10px;"></div>Searching...</div>';
+
+        // 1. ANILIST SEARCH (Legacy)
+        if (source === 'anilist') {
             if (window.SearchManager) {
                 await window.SearchManager.search(query, 'anime', elements.animeResults);
             } else {
                 elements.animeResults.innerHTML = 'SearchManager not loaded';
             }
+            return;
+        }
+
+        // 2. EXTENSION SEARCH
+        try {
+            const res = await fetch(`/api/search/${source}?q=${encodeURIComponent(query)}`);
+            const data = await res.json();
+            renderExtensionResults(data.results || [], source);
+        } catch (e) {
+            console.error("Search error:", e);
+            elements.animeResults.innerHTML = '<div style="padding:20px;text-align:center;color:#ff6b6b;">Search failed</div>';
+        }
+    }
+
+    function renderExtensionResults(results, sourceName) {
+        elements.animeResults.innerHTML = '';
+
+        if (results.length === 0) {
+            elements.animeResults.innerHTML = '<div style="padding:20px;text-align:center;color:#888;">No results found</div>';
+            return;
+        }
+
+        results.forEach(item => {
+            const title = item.title.english || item.title.romaji || item.title.native || 'Unknown Title';
+            const image = item.coverImage?.large || item.coverImage?.medium || '/public/assets/placeholder.svg';
+
+            // We add data-source attribute to identify where it came from
+            const div = document.createElement('a');
+            div.className = 'anime-result-item';
+            div.href = '#'; // Prevent navigation
+            div.dataset.id = item.id;
+            div.dataset.source = sourceName; // Important: Store the extension name
+            div.dataset.title = title;
+            div.dataset.image = image;
+
+            div.innerHTML = `
+            <img src="${image}" class="search-poster" loading="lazy">
+            <div class="search-info">
+                <div class="search-title">${escapeHtml(title)}</div>
+                <div class="search-meta" style="color:var(--brand-color)">${sourceName}</div>
+            </div>
+        `;
+
+            elements.animeResults.appendChild(div);
+        });
     }
 
     function escapeHtml(text) {

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: {
-        const response = await cache.match(`/schedule-cache/${key}`);
+                'Authorization': `Bearer ${token}`,
-
+                'Accept': 'application/json'
-        if (!response) return null;
-
-        const cached = await response.json();
-        const age = Date.now() - cached.timestamp;
-
-        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.`);
+        if (res.ok) {
+            const json = await res.json();
+            if (json.results && Array.isArray(json.results)) {
+                state.userListIds.clear();
+                json.results.forEach(item => {
 
-        cache.delete(`/schedule-cache/${key}`);
+                    if (item.source === 'anilist') {
-        return null;
+                        state.userListIds.add(item.entry_id);
+                    }
+                });
+                console.log(`[UserList] Loaded ${state.userListIds.size} entries.`);
+            }
+        }
     } 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({
+    if (!forceRefresh) {
-            timestamp: Date.now(),
+        const cachedData = await getCache(key);
-            data: data
+        if (cachedData) {
-        });
+            console.log(`[Schedule] Using cached data for key: ${key}`);
+            state.scheduleData = cachedData;
+            renderContent();
+            updateAmbient(cachedData);
+            return;
 
-        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);
         }
-}
+    }
+
+    if (state.abortController) state.abortController.abort();
+    state.abortController = new AbortController();
+    const signal = state.abortController.signal;
+
+    setLoading(true);
+
+    let startObj, endObj;
 
-function getCacheKey() {
     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();
+
+    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 (loader) {
         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/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,105 +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');
-        reply.type('text/html').send(html);
+        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

@@ -15,21 +15,11 @@
     <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/match-modal.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.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"/>

desktop/views/anime/animes.html

@@ -17,18 +17,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="hero-wrapper">
     <div class="hero-background">
         <img id="hero-bg-media" alt="">

desktop/views/books/book.html

@@ -15,16 +15,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>
 <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"/>

desktop/views/books/books.html

@@ -16,17 +16,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="hero-wrapper">
     <div class="hero-background">
         <img id="hero-bg-media" src="" alt="">

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>

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/navbar.css

@@ -22,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;

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,85 +101,19 @@ 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;
-}
-
-.title-right button {
-    -webkit-app-region: no-drag;
-    border: none;
-    background: transparent;
-    color: rgba(255, 255, 255, 0.7);
-    width: 46px;
-    height: 100%;
-    cursor: pointer;
-    font-size: 16px;
-    display: flex;
     align-items: center;
-    justify-content: center;
+    -webkit-app-region: no-drag;
-    position: relative;
-}
-
-.title-right button svg {
-    width: 16px;
-    height: 16px;
-    transition: transform 0.2s;
-}
-
-.title-right button:hover {
-    color: white;
-}
-
-.title-right button:active {
-    transform: scale(0.95);
-}
-
-.title-right .min:hover {
-    background: rgba(139, 92, 246, 0.2);
-}
-
-.title-right .max:hover {
-    background: rgba(34, 197, 94, 0.2);
-}
-
-.title-right .close:hover {
-    background: #e81123;
-    color: white;
-}
-
-.title-right button:hover svg {
-    transform: scale(1.1);
-}
-
-html.electron::-webkit-scrollbar {
-    width: 12px;
-    position: absolute;
-}
-
-html.electron::-webkit-scrollbar-track {
-    background: #09090b;
-    margin-top: var(--titlebar-height);
-}
-
-html.electron::-webkit-scrollbar-thumb {
-    background: rgba(139, 92, 246, 0.3);
-    border-radius: 6px;
-    border: 2px solid #09090b;
-}
-
-html.electron::-webkit-scrollbar-thumb:hover {
-    background: rgba(139, 92, 246, 0.5);
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
 }
 
 .user-box {
@@ -181,18 +121,104 @@ body {
     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: 26px;
+    width: 24px;
-    height: 26px;
+    height: 24px;
     border-radius: 50%;
     object-fit: cover;
+    border: 1px solid rgba(139, 92, 246, 0.3);
 }
 
 .user-box span {
-    font-size: 13px;
+    font-size: 12px;
+    font-weight: 500;
     opacity: 0.9;
+    color: #e4e4e7;
+}
+
+.window-controls {
+    display: flex;
+    height: 100%;
+}
+
+.control-btn {
+    border: none;
+    background: transparent;
+    color: #a1a1aa;
+    width: 46px;
+    height: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    outline: none;
+}
+
+.control-btn:hover {
+    color: white;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.control-btn.min:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.control-btn.max:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.control-btn.close:hover {
+    background: #e81123;
+    color: white;
+}
+
+.control-btn:active {
+    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 {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
 }
 
 .hidden {
@@ -208,3 +234,218 @@ html.electron #room-view {
 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/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/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/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="/src/scripts/room-modal.js"></script>
     <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>
 
@@ -70,5 +59,6 @@
 <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

@@ -16,17 +16,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>
-
 <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

desktop/views/marketplace.html

@@ -8,67 +8,101 @@
     <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">
+    <header class="mp-header">
-            <div class="tabs-container">
+        <div class="header-top">
-                <button class="tab-button active" data-tab="marketplace">Marketplace</button>
+            <h1 class="page-title">Extension Store</h1>
-                <button class="tab-button" data-tab="installed">My Extensions</button>
+            <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>
+            </div>
         </div>
 
-            <div class="filter-controls">
+        <div id="config-panel" class="config-panel hidden">
-                <button id="btn-update-all" class="btn-blur hidden" style="margin-right: 10px; width: auto; padding: 0 15px;">
+            <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>
-                <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 id="marketplace-content" class="mp-grid-wrapper"></div>
-        </div>
-    </section>
 
     <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>
-<link rel="stylesheet" href="/views/css/components/create-room.css"/>
+<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/rpc-inapp.js"></script>

desktop/views/profile.html

@@ -15,17 +15,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="main-wrapper">
     <section class="profile-header">

desktop/views/room.html

@@ -18,17 +18,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 id="room-view">
     <div class="room-layout" id="room-layout">
         <div class="video-area">
@@ -217,7 +206,14 @@
         <div id="step-search">
             <h2 class="modal-title">Select Anime</h2>
             <div class="search-bar">
-                <input type="text" id="anime-search-input" placeholder="Search anime..." />
+                <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>

desktop/views/schedule.html

@@ -4,80 +4,67 @@
     <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="schedule-container">
-    <div class="title-right">
+
-        <button class="min">—</button>
+    <header class="schedule-header">
-        <button class="max">🗖</button>
+        <div class="header-left">
-        <button class="close">✕</button>
+            <h1 class="page-title">Release Schedule</h1>
+            <div class="month-navigator">
+                <button class="nav-btn" onclick="navigate(-1)">‹</button>
+                <span id="monthTitle" class="current-date-label">Loading...</span>
+                <button class="nav-btn" onclick="navigate(1)">›</button>
+            </div>
         </div>
-</div>
 
-    <div class="ambient-bg" id="ambientBg"></div>
+        <div class="header-controls">
+            <div class="toggle-group" id="filter-group" style="display: none;">
+                <button class="toggle-btn active" id="btnAll" onclick="setFilter('ALL')">All</button>
+                <button class="toggle-btn" id="btnMyList" onclick="setFilter('MY_LIST')">My List</button>
+            </div>
 
-    <div class="calendar-wrapper">
+            <div class="divider-vertical"></div>
-        <div class="calendar-controls">
+
-            <div class="month-selector">
+            <div class="toggle-group">
-                <button class="icon-btn" onclick="navigate(-1)">
+                <button class="toggle-btn active" id="btnSub" onclick="setMode('SUB')">Sub</button>
-                    <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="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>
-                <div class="month-title" id="monthTitle">Loading...</div>
+                <button class="view-btn" id="btnViewWeek" onclick="setViewType('WEEK')" title="Week View">
-                <button class="icon-btn" onclick="navigate(1)">
+                    <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>
-                    <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>
+    </header>
 
-            <div class="controls-right">
+    <main id="schedule-content">
+    </main>
 
-                <div class="view-toggles">
+</div>
-                    <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">
+<div class="loader-overlay" id="loader">
-                    <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="weekdays-grid">
-                <div class="weekday-header">Mon</div>
-                <div class="weekday-header">Tue</div>
-                <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>
-        </div>
-    </div>
-
-    <div class="loader" id="loader">
     <div class="spinner"></div>
-        <span id="loadingText">Syncing Schedule...</span>
+</div>
-    </div>
 
-    <div id="updateToast" class="hidden">
+<div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
 
     <a
@@ -87,13 +74,13 @@
     >
         Click To Download
     </a>
-    </div>
+</div>
 
-    <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
-    <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/schedule/schedule.js"></script>
-    <script src="/src/scripts/rpc-inapp.js"></script>
+<script src="/src/scripts/updateNotifier.js"></script>
-    <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.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/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: [] };

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,
@@ -451,8 +530,9 @@ export async function searchEpisodesInExtension(ext: Extension | null, name: str
                 title: ep.title
             }));
 
-            // Cachear tanto el mediaId como los episodios
+            if (result.length > 0) {
                 await setCache(cacheKey, { mediaId, episodes: result }, CACHE_TTL_MS);
+            }
 
             return result;
         } catch (e) {
@@ -525,10 +605,26 @@ export async function getStreamData(extension: Extension, episode: string, id: s
         throw new Error("Episode not found");
     }
 
-    const streamData = await extension.findEpisodeServer(targetEp, server, category);
+    let streamData: StreamData;
+
+    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: [] };
     }
 }

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,
@@ -330,7 +339,6 @@ export async function searchBooksInExtension(ext: Extension | null, name: string
                     url: m.url,
                 }));
             }
-
         } catch (e) {
             console.error(`Extension search failed for ${name}:`, e);
         }
@@ -458,10 +466,13 @@ async function searchChaptersInExtension(ext: Extension, name: string, lookupId:
             language: ch.language ?? null,
         }));
 
+        if (result.length > 0) {
             await setCache(cacheKey, {
                 mediaId,
                 chapters: result
             }, CACHE_TTL_MS);
+        }
+
         return result;
 
     } catch (e) {
@@ -598,7 +609,15 @@ export async function getChapterContent(bookId: string, chapterId: string, provi
             throw new Error("Unknown mediaType");
         }
 
+        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/extensions/extensions.controller.ts

@@ -153,3 +153,24 @@ export async function uninstallExtension(req: any, reply: FastifyReply) {
         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/types.ts

@@ -97,7 +97,7 @@ 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?: (s: any, server1: string | undefined, category: string | undefined) => Promise<any>;
     findChapters?: (id: string) => Promise<Chapter[]>;
@@ -111,6 +111,7 @@ export interface ExtensionSettings {
 }
 
 export interface StreamData {
+    videoSources: any;
     url?: string;
     sources?: any[];
     subtitles?: any[];

docker/src/scripts/books/reader.js

@@ -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

docker/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);

docker/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');
+    // 1. Prepare items
+    if (state.currentTab === 'marketplace') {
+        items = Object.entries(state.metadata).map(([id, data]) => ({
+            id, ...data, isInstalled: state.installed.includes(id.toLowerCase())
+        }));
     } else {
-                    updateAllBtn.classList.add('hidden');
+        const metaItems = Object.entries(state.metadata)
-                }
+            .filter(([id]) => state.installed.includes(id.toLowerCase()))
-            }
+            .map(([id, data]) => ({ id, ...data, isInstalled: true }));
 
-            renderGroupedView();
+        items = [...metaItems];
-        };
-    });
-}
 
-async function handleUpdateAll() {
+        state.installed.forEach(instId => {
-    const originalText = updateAllBtn.innerText;
+            if (!items.find(i => i.id.toLowerCase() === instId)) {
-    try {
+                items.push({
-        updateAllBtn.disabled = true;
+                    id: instId,
-        updateAllBtn.innerText = 'Updating...';
+                    name: capitalize(instId),
-
-        const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
-        if (!res.ok) throw new Error('Update failed');
-
-        const data = await res.json();
-
-        if (data.updated && data.updated.length > 0) {
-
-            const list = data.updated.join(', ');
-            window.NotificationUtils.success(`Updated: ${list}`);
-
-            await loadMarketplace();
-        } else {
-            window.NotificationUtils.info('Everything is up to date.');
-        }
-    } catch (error) {
-        console.error('Update All Error:', error);
-        window.NotificationUtils.error('Failed to perform bulk update.');
-    } finally {
-        updateAllBtn.disabled = false;
-        updateAllBtn.innerText = originalText;
-    }
-}
-
-function renderGroupedView() {
-    marketplaceContent.innerHTML = '';
-    const activeFilter = filterSelect.value;
-    const groups = {};
-
-    let listToRender = [];
-
-    if (currentTab === 'marketplace') {
-        for (const [id, data] of Object.entries(marketplaceMetadata)) {
-            listToRender.push({
-                id,
-                ...data,
-                isInstalled: installedExtensions.includes(id.toLowerCase())
-            });
-        }
-    } else {
-        for (const [id, data] of Object.entries(marketplaceMetadata)) {
-            if (installedExtensions.includes(id.toLowerCase())) {
-                listToRender.push({ id, ...data, isInstalled: true });
-            }
-        }
-
-        installedExtensions.forEach(id => {
-            const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
-            if (!existsInMeta) {
-                listToRender.push({
-                    id: id,
-                    name: id.charAt(0).toUpperCase() + id.slice(1),
                     type: 'Local',
-                    author: 'Unknown',
+                    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);

docker/src/scripts/room.js

@@ -88,6 +88,7 @@ const RoomsApp = (function() {
 
         // Anime Search Modal
         animeSearchModal: document.getElementById('anime-search-modal'),
+        searchSourceSelect: document.getElementById('search-source-select'),
         animeSearchInput: document.getElementById('anime-search-input'),
         animeResults: document.getElementById('anime-results'),
         closeSearchBtn: document.getElementById('close-search-modal'),
@@ -222,6 +223,24 @@ const RoomsApp = (function() {
         );
 
         extensionsReady = true;
+
+        // AÑADE ESTO AQUÍ: Llenar el dropdown de búsqueda inmediatamente
+        populateSearchDropdown();
+    }
+
+    // AÑADE ESTA NUEVA FUNCIÓN FUERA (o dentro del scope de RoomsApp)
+    function populateSearchDropdown() {
+        if (!elements.searchSourceSelect) return;
+
+        // Reiniciar y poner AniList primero
+        elements.searchSourceSelect.innerHTML = '<option value="anilist">AniList</option>';
+
+        extensionsStore.list.forEach(ext => {
+            const opt = document.createElement('option');
+            opt.value = ext;
+            opt.textContent = ext[0].toUpperCase() + ext.slice(1);
+            elements.searchSourceSelect.appendChild(opt);
+        });
     }
 
     function setupEventListeners() {
@@ -369,6 +388,16 @@ const RoomsApp = (function() {
         });
 
         elements.roomExtSelect.value = selectedAnimeData.source || extensionsStore.list[0];
+        if (elements.searchSourceSelect) {
+            elements.searchSourceSelect.innerHTML = '<option value="anilist">AniList</option>';
+
+            extensionsStore.list.forEach(ext => {
+                const opt = document.createElement('option');
+                opt.value = ext;
+                opt.textContent = ext[0].toUpperCase() + ext.slice(1);
+                elements.searchSourceSelect.appendChild(opt);
+            });
+        }
 
         await onQuickExtensionChange(null, true);
     }
@@ -459,8 +488,17 @@ const RoomsApp = (function() {
             e.preventDefault();
             e.stopPropagation();
 
-            let title, img, id;
+            let title, img, id, source;
 
+            // Try to get data from dataset (Extension Results)
+            if (itemLink.dataset.source) {
+                id = itemLink.dataset.id;
+                source = itemLink.dataset.source;
+                title = itemLink.dataset.title;
+                img = itemLink.dataset.image;
+            }
+            // Fallback to DOM parsing (AniList/SearchManager Results)
+            else {
                 const titleEl = itemLink.querySelector('.search-title');
                 const imgEl = itemLink.querySelector('.search-poster, img');
 
@@ -470,6 +508,8 @@ const RoomsApp = (function() {
                 const href = itemLink.getAttribute('href') || '';
                 const hrefParts = href.split('/').filter(p => p);
                 id = hrefParts[hrefParts.length - 1] || itemLink.dataset.id;
+                source = 'anilist';
+            }
 
             if (!id) return;
 
@@ -477,12 +517,14 @@ const RoomsApp = (function() {
                 id: id,
                 title: title,
                 image: img,
-                source: 'anilist'
+                source: source // Set the detected source
             };
+
             const animeResultObj = {
                 id: id,
                 title: title,
-                cover: img
+                cover: img,
+                source: source // Pass to next function
             };
 
             showConfigStep();
@@ -649,18 +691,34 @@ const RoomsApp = (function() {
         let episodeToPlay = activeContext.episode;
         if (fromModal && elements.inpEpisode) episodeToPlay = elements.inpEpisode.value;
 
-        const ext = overrides.forceExtension ||
+        let ext = overrides.forceExtension ||
             (fromModal ? (configState.extension || elements.selExtension?.value) : null) ||
             activeContext.extension ||
             (elements.roomExtSelect ? elements.roomExtSelect.value : null);
 
-        const server = overrides.forceServer ||
-            (fromModal ? (configState.server || elements.selServer?.value) : null) ||
-            activeContext.server ||
-            (elements.roomServerSelect ? elements.roomServerSelect.value : null);
-
         const category = elements.roomSdToggle?.getAttribute('data-state') || activeContext.category || 'sub';
 
+        let currentSource = selectedAnimeData.source || 'anilist';
+
+        if (currentSource !== 'anilist') {
+            ext = currentSource;
+        }
+
+        let server = overrides.forceServer;
+
+        if (!server) {
+            if (fromModal) {
+                server = configState.server || elements.selServer?.value;
+            } else if (currentSource !== 'anilist' || ext === elements.roomExtSelect?.value) {
+                server = elements.roomServerSelect?.value;
+            }
+        }
+
+        if (!server && extensionsStore.settings[ext]) {
+            const extSettings = extensionsStore.settings[ext];
+            server = extSettings.episodeServers?.[0] || 'Default';
+        }
+
         if (!ext || !server) {
             console.warn("Faltan datos (ext o server).", {ext, server});
             if (fromModal && elements.configError) {
@@ -681,8 +739,8 @@ const RoomsApp = (function() {
         }
 
         try {
-            const apiUrl = `/api/watch/stream?animeId=${selectedAnimeData.id}&episode=${episodeToPlay}&server=${encodeURIComponent(server)}&category=${category}&ext=${ext}&source=anilist`;
+            const currentSource = selectedAnimeData.source || 'anilist';
-            console.log('Fetching stream:', apiUrl);
+            const apiUrl = `/api/watch/stream?animeId=${selectedAnimeData.id}&episode=${episodeToPlay}&server=${encodeURIComponent(server)}&category=${category}&ext=${ext}&source=${currentSource}`;            console.log('Fetching stream:', apiUrl);
 
             const res = await fetch(apiUrl);
             if (!res.ok) throw new Error(`Error ${res.status}: Failed to fetch stream`);
@@ -699,8 +757,13 @@ const RoomsApp = (function() {
 
             let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
             const headers = data.headers || {};
-            if (headers['Referer']) proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
+            if (headers['Referer']) {
+                proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
+            }
 
+            if (headers['User-Agent']) {
+                proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
+            }
             const subtitles = (source.subtitles || []).map(sub => ({
                 label: sub.language,
                 srclang: sub.id || sub.language.toLowerCase().slice(0, 2),
@@ -797,14 +860,22 @@ const RoomsApp = (function() {
         updateCountBtn();
 
         try {
-            const response = await fetch(`/api/anime/${animeResult.id}?source=anilist`);
+            // Use the source from the result (default to anilist)
+            const sourceParam = animeResult.source || 'anilist';
+
+            // Fetch details using the specific source
+            const response = await fetch(`/api/anime/${animeResult.id}?source=${sourceParam}`);
+
             if (!response.ok) throw new Error("Failed to load anime details");
 
             const data = await response.json();
             currentAnimeDetails = data;
 
+            // Save metadata
             if (selectedAnimeData) {
-                selectedAnimeData.malId = data.idMal;
+                selectedAnimeData.malId = data.idMal; // Might be null for extensions, that's okay
+                // Ensure source is persisted
+                selectedAnimeData.source = sourceParam;
             }
 
             modalTotalEpisodes = data.episodes || 12;
@@ -813,9 +884,19 @@ const RoomsApp = (function() {
             renderModalEpisodes();
             setupModalPaginationControls();
 
+            // Auto-select the extension in the config dropdown if it matches
+            if (extensionsReady && elements.selExtension && sourceParam !== 'anilist') {
+                // If the extension we searched with is in the list, select it
+                if (Array.from(elements.selExtension.options).some(o => o.value === sourceParam)) {
+                    elements.selExtension.value = sourceParam;
+                    handleModalExtensionChange();
+                }
+            }
+
         } catch (error) {
             console.error("Error fetching details", error);
             gridContainer.innerHTML = '';
+            // If details fail (common with strict scrapers), show manual input
             document.querySelector('.manual-ep-input').style.display = 'block';
             document.getElementById('modal-pagination').style.display = 'none';
         }
@@ -1985,12 +2066,62 @@ const RoomsApp = (function() {
     async function searchAnime() {
         const query = elements.animeSearchInput.value.trim();
         if (!query) return;
-        elements.animeResults.innerHTML = '<div style="padding:20px;text-align:center;color:#888;">Searching...</div>';
+
+        const source = elements.searchSourceSelect ? elements.searchSourceSelect.value : 'anilist';
+        elements.animeResults.innerHTML = '<div style="padding:20px;text-align:center;color:#888;"><div class="spinner" style="margin:0 auto 10px;"></div>Searching...</div>';
+
+        // 1. ANILIST SEARCH (Legacy)
+        if (source === 'anilist') {
             if (window.SearchManager) {
                 await window.SearchManager.search(query, 'anime', elements.animeResults);
             } else {
                 elements.animeResults.innerHTML = 'SearchManager not loaded';
             }
+            return;
+        }
+
+        // 2. EXTENSION SEARCH
+        try {
+            const res = await fetch(`/api/search/${source}?q=${encodeURIComponent(query)}`);
+            const data = await res.json();
+            renderExtensionResults(data.results || [], source);
+        } catch (e) {
+            console.error("Search error:", e);
+            elements.animeResults.innerHTML = '<div style="padding:20px;text-align:center;color:#ff6b6b;">Search failed</div>';
+        }
+    }
+
+    function renderExtensionResults(results, sourceName) {
+        elements.animeResults.innerHTML = '';
+
+        if (results.length === 0) {
+            elements.animeResults.innerHTML = '<div style="padding:20px;text-align:center;color:#888;">No results found</div>';
+            return;
+        }
+
+        results.forEach(item => {
+            const title = item.title.english || item.title.romaji || item.title.native || 'Unknown Title';
+            const image = item.coverImage?.large || item.coverImage?.medium || '/public/assets/placeholder.svg';
+
+            // We add data-source attribute to identify where it came from
+            const div = document.createElement('a');
+            div.className = 'anime-result-item';
+            div.href = '#'; // Prevent navigation
+            div.dataset.id = item.id;
+            div.dataset.source = sourceName; // Important: Store the extension name
+            div.dataset.title = title;
+            div.dataset.image = image;
+
+            div.innerHTML = `
+            <img src="${image}" class="search-poster" loading="lazy">
+            <div class="search-info">
+                <div class="search-title">${escapeHtml(title)}</div>
+                <div class="search-meta" style="color:var(--brand-color)">${sourceName}</div>
+            </div>
+        `;
+
+            elements.animeResults.appendChild(div);
+        });
     }
 
     function escapeHtml(text) {

docker/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: {
-        const response = await cache.match(`/schedule-cache/${key}`);
+                'Authorization': `Bearer ${token}`,
-
+                'Accept': 'application/json'
-        if (!response) return null;
-
-        const cached = await response.json();
-        const age = Date.now() - cached.timestamp;
-
-        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.`);
+        if (res.ok) {
+            const json = await res.json();
+            if (json.results && Array.isArray(json.results)) {
+                state.userListIds.clear();
+                json.results.forEach(item => {
 
-        cache.delete(`/schedule-cache/${key}`);
+                    if (item.source === 'anilist') {
-        return null;
+                        state.userListIds.add(item.entry_id);
+                    }
+                });
+                console.log(`[UserList] Loaded ${state.userListIds.size} entries.`);
+            }
+        }
     } 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({
+    if (!forceRefresh) {
-            timestamp: Date.now(),
+        const cachedData = await getCache(key);
-            data: data
+        if (cachedData) {
-        });
+            console.log(`[Schedule] Using cached data for key: ${key}`);
+            state.scheduleData = cachedData;
+            renderContent();
+            updateAmbient(cachedData);
+            return;
 
-        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);
         }
-}
+    }
+
+    if (state.abortController) state.abortController.abort();
+    state.abortController = new AbortController();
+    const signal = state.abortController.signal;
+
+    setLoading(true);
+
+    let startObj, endObj;
 
-function getCacheKey() {
     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();
+
+    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 (loader) {
         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;

docker/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);
+    }
+});

docker/src/shared/headless.js

@@ -1,6 +1,5 @@
 const { chromium } = require("playwright-chromium");
 let browser;
-let context;
 const BLOCK_LIST = [
     "google-analytics", "doubleclick", "facebook", "twitter",
     "adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic"
@@ -23,10 +22,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) {
@@ -62,6 +57,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) => {
@@ -75,7 +76,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)))
@@ -86,6 +87,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 {
@@ -100,14 +105,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 = {

docker/src/views/views.routes.ts

@@ -12,7 +12,7 @@ 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) {
@@ -86,6 +86,13 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(htmlWithNavbar);
     });
 
+    fastify.get('/search', (req: FastifyRequest, reply: FastifyReply) => {
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'search.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'search', false);
+        reply.type('text/html').send(htmlWithNavbar);
+    });
+
     fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
         const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
         const html = fs.readFileSync(htmlPath, 'utf-8');

docker/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>

docker/views/css/components/navbar.css

@@ -22,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;

docker/views/css/marketplace.css

@@ -1,393 +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);
-}
-
-.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;
 }
 
-.hidden {
+.mp-card {
-    display: none !important;
+    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;
 }

docker/views/css/schedule/schedule.css

@@ -1,457 +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) {
-    body {
-        height: auto;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
 
-    .calendar-wrapper {
+    .schedule-header {
-        padding: 1rem;
-        height: auto;
-        overflow: visible;
-        display: block;
-    }
-
-    .calendar-controls {
         flex-direction: column;
-        gap: 1rem;
+        align-items: stretch;
-        padding-bottom: 1rem;
+        gap: 1.5rem;
     }
 
-    .month-selector {
+    .header-left {
+        align-items: center;
         width: 100%;
-        justify-content: space-between;
-        gap: 0.5rem;
     }
 
-    .month-title {
+    .header-controls {
-        font-size: 1.5rem;
+        flex-wrap: wrap;
-        min-width: auto;
-        text-align: center;
-        flex: 1;
-    }
-
-    .controls-right {
-        width: 100%;
         justify-content: center;
+        width: 100%;
+        gap: 1rem;
     }
 
-    .calendar-board {
+    .page-title {
-        border: none;
+        font-size: 2rem;
-        background: transparent;
+        text-align: center;
-        box-shadow: none;
-        overflow: visible;
     }
 
-    .weekdays-grid {
+    .calendar-grid {
-        display: none;
-    }
-
-    .days-grid {
         display: flex;
         flex-direction: column;
         gap: 1rem;
         background: transparent;
-        height: auto;
+        border: none;
-        overflow: visible;
     }
 
-    .day-cell.empty {
+    .weekday-header, .day-cell.empty { display: none; }
-        display: none;
-    }
 
     .day-cell {
-        border: 1px solid var(--border-subtle);
-        border-radius: var(--radius-lg);
-        background: var(--color-bg-elevated);
         min-height: auto;
-        padding: 1rem;
+        max-height: none;
+        overflow: visible;
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 12px;
+        background: var(--color-bg-elevated);
     }
 
-    .day-cell:nth-child(7n) {
+    .week-nav {
-        border-right: 1px solid var(--border-subtle);
+        margin: 0 -1.5rem;
+        padding: 0 1.5rem 1rem 1.5rem;
     }
 
-    .day-header {
+    .day-btn {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        min-width: 90px;
-        padding-bottom: 0.5rem;
+        padding: 0.8rem;
-        margin-bottom: 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;
     }
 
-    .day-number {
+    .week-grid .card {
-        background: rgba(255, 255, 255, 0.05);
+        min-width: 0 !important;
+        width: 100% !important;
+        flex: none !important;
     }
 
-    .anime-chip {
+    .card-content h3 { font-size: 0.8rem; }
-        padding: 12px;
+    .card-ep-badge { font-size: 0.65rem; padding: 2px 4px; }
-        font-size: 0.95rem;
+}
-    }
 
-    .cell-backdrop {
+@media (max-width: 380px) {
-        display: none;
+    .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;
     }
 }

docker/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);
+    }
+}

docker/views/gallery/gallery.html

@@ -58,5 +58,6 @@
 <script src="/src/scripts/room-modal.js"></script>
 <script src="/src/scripts/gallery/gallery.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

docker/views/marketplace.html

@@ -13,51 +13,97 @@
 </head>
 <body>
 
-<div class="hero-spacer"></div>
+<div class="nav-spacer"></div>
 
-<main>
+<main class="content-container">
-    <section class="section">
+
-        <header class="section-header">
+    <header class="mp-header">
-            <div class="tabs-container">
+        <div class="header-top">
-                <button class="tab-button active" data-tab="marketplace">Marketplace</button>
+            <h1 class="page-title">Extension Store</h1>
-                <button class="tab-button" data-tab="installed">My Extensions</button>
+            <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>
+            </div>
         </div>
 
-            <div class="filter-controls">
+        <div id="config-panel" class="config-panel hidden">
-                <button id="btn-update-all" class="btn-blur hidden" style="margin-right: 10px; width: auto; padding: 0 15px;">
+            <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>
-                <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 id="marketplace-content" class="mp-grid-wrapper"></div>
-        </div>
-    </section>
 
     <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>
-<link rel="stylesheet" href="/views/css/components/create-room.css"/>
+<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/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/settings.js"></script>
 </body>

docker/views/room.html

@@ -204,7 +204,14 @@
         <div id="step-search">
             <h2 class="modal-title">Select Anime</h2>
             <div class="search-bar">
-                <input type="text" id="anime-search-input" placeholder="Search anime..." />
+                <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>

docker/views/schedule.html

@@ -4,67 +4,65 @@
     <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/create-room.css"/>
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
 </head>
 <body>
-    <div class="ambient-bg" id="ambientBg"></div>
+<div class="ambient-bg" id="ambientBg"></div>
+<div class="bg-overlay"></div>
 
-    <div class="calendar-wrapper">
+<div class="schedule-container">
-        <div class="calendar-controls">
+
-            <div class="month-selector">
+    <header class="schedule-header">
-                <button class="icon-btn" onclick="navigate(-1)">
+        <div class="header-left">
-                    <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>
+            <h1 class="page-title">Release Schedule</h1>
+            <div class="month-navigator">
+                <button class="nav-btn" onclick="navigate(-1)">‹</button>
+                <span id="monthTitle" class="current-date-label">Loading...</span>
+                <button class="nav-btn" onclick="navigate(1)">›</button>
+            </div>
+        </div>
+
+        <div class="header-controls">
+            <div class="toggle-group" id="filter-group" style="display: none;">
+                <button class="toggle-btn active" id="btnAll" onclick="setFilter('ALL')">All</button>
+                <button class="toggle-btn" id="btnMyList" onclick="setFilter('MY_LIST')">My List</button>
+            </div>
+
+            <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>
-                <div class="month-title" id="monthTitle">Loading...</div>
+                <button class="view-btn" id="btnViewWeek" onclick="setViewType('WEEK')" title="Week View">
-                <button class="icon-btn" onclick="navigate(1)">
+                    <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>
-                    <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>
+    </header>
 
-            <div class="controls-right">
+    <main id="schedule-content">
+    </main>
 
-                <div class="view-toggles">
+</div>
-                    <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">
+<div class="loader-overlay" id="loader">
-                    <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="weekdays-grid">
-                <div class="weekday-header">Mon</div>
-                <div class="weekday-header">Tue</div>
-                <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>
-        </div>
-    </div>
-
-    <div class="loader" id="loader">
     <div class="spinner"></div>
-        <span id="loadingText">Syncing Schedule...</span>
+</div>
-    </div>
 
-    <div id="updateToast" class="hidden">
+<div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
 
     <a
@@ -74,12 +72,12 @@
     >
         Click To Download
     </a>
-    </div>
+</div>
 
-    <script src="/src/scripts/updateNotifier.js"></script>
+<script src="/src/scripts/room-modal.js"></script>
-    <link rel="stylesheet" href="/views/css/components/create-room.css"/>
+<script src="/src/scripts/auth-guard.js"></script>
-    <script src="/src/scripts/schedule/schedule.js"></script>
+<script src="/src/scripts/schedule/schedule.js"></script>
-    <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/updateNotifier.js"></script>
-    <script src="/src/scripts/settings.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

docker/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/updateNotifier.css">
+  <link rel="stylesheet" href="/views/css/components/create-room.css"/>
+  <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/updateNotifier.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>