removed electron stuff from docker ver

added updateall btn to marketplace
new marketplace page
2025-12-20 00:16:01 +01:00 · 2025-12-20 00:13:10 +01:00 · 2025-12-19 23:12:53 +01:00 · 2025-12-19 20:01:08 +01:00 · 2025-12-19 19:49:07 +01:00 · 2025-12-19 19:23:29 +01:00
44 changed files with 1129 additions and 1755 deletions
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
@@ -19,6 +19,7 @@
        "fastify": "^5.6.2",
        "jsonwebtoken": "^9.0.3",
        "node-addon-api": "^8.5.0",
+        "node-cron": "^4.2.1",
        "playwright-chromium": "^1.57.0",
        "sqlite3": "^5.1.7"
      },
@@ -5446,6 +5447,15 @@
        "semver": "^7.3.5"
      }
    },
+    "node_modules/node-cron": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
+      "integrity": "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
    "node_modules/node-gyp": {
      "version": "12.1.0",
      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.1.0.tgz",
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -22,6 +22,7 @@
    "fastify": "^5.6.2",
    "jsonwebtoken": "^9.0.3",
    "node-addon-api": "^8.5.0",
+    "node-cron": "^4.2.1",
    "playwright-chromium": "^1.57.0",
    "sqlite3": "^5.1.7"
  },
--- a/desktop/server.js
+++ b/desktop/server.js
@@ -4,14 +4,16 @@ const fastify = require("fastify")({

 const path = require("path");
 const jwt = require("jsonwebtoken");
+const cron = require("node-cron");
 const { initHeadless } = require("./electron/shared/headless");
 const { initDatabase } = require("./electron/shared/database");
 const { loadExtensions } = require("./electron/shared/extensions");
 const { init } = require("./electron/api/rpc/rpc.controller");
+const {refreshTrendingAnime, refreshTopAiringAnime} = require("./electron/api/anime/anime.service");
+const {refreshPopularBooks, refreshTrendingBooks} = require("./electron/api/books/books.service");
+
 const dotenv = require("dotenv");
-
 const isPackaged = process.env.IS_PACKAGED === "true";
-
 const envPath = isPackaged
    ? path.join(process.resourcesPath, ".env")
    : path.join(__dirname, ".env");
@@ -28,39 +30,6 @@ const userRoutes = require("./electron/api/user/user.routes");
 const listRoutes = require("./electron/api/list/list.routes");
 const anilistRoute = require("./electron/api/anilist/anilist");

-const fs = require("fs");
-
-try {
-  console.log("--- DEBUGGING PATHS ---");
-
-  // 1. Check where we are currently running
-  console.log("Current Directory:", __dirname);
-
-  // 2. Check if 'electron' exists
-  const electronPath = path.join(__dirname, "electron");
-  if (fs.existsSync(electronPath)) {
-    console.log("✅ electron folder found.");
-  } else {
-    console.log("❌ electron folder missing!");
-  }
-
-  // 3. Check 'electron/api/rpc' specifically
-  const rpcPath = path.join(__dirname, "electron", "api", "rpc");
-  if (fs.existsSync(rpcPath)) {
-    console.log("✅ electron/api/rpc folder found. Contents:");
-    // LIST EVERYTHING INSIDE THE RPC FOLDER
-    console.log(fs.readdirSync(rpcPath));
-  } else {
-    console.log(`❌ electron/api/rpc folder NOT found at: ${rpcPath}`);
-    // Check parent folder to see what IS there
-    const parent = path.join(__dirname, "electron", "api");
-    console.log("Contents of electron/api:", fs.readdirSync(parent));
-  }
-  console.log("-----------------------");
-} catch (e) {
-  console.log("Debug Error:", e);
-}
-
 fastify.addHook("preHandler", async (request) => {
  const auth = request.headers.authorization;
  if (!auth) return;
@@ -102,6 +71,8 @@ fastify.register(userRoutes, { prefix: "/api" });
 fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });

+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
 const start = async () => {
  try {
    initDatabase("anilist");
@@ -110,12 +81,31 @@ const start = async () => {
    initDatabase("userdata");
    init();

+    const refreshAll = async () => {
+      await refreshTrendingAnime();
+      await sleep(300);
+      await refreshTopAiringAnime();
+      await sleep(300);
+      await refreshTrendingBooks();
+      await sleep(300);
+      await refreshPopularBooks();
+    };
+
+    cron.schedule("*/30 * * * *", async () => {
+      try {
+        await refreshAll();
+        console.log("cache refreshed");
+      } catch (e) {
+        console.error("refresh failed", e);
+      }
+    });
+
    await loadExtensions();
+    await initHeadless();
+    await refreshAll();

    await fastify.listen({ port: 54322, host: "0.0.0.0" });
    console.log(`Server running at http://localhost:54322`);
-
-    await initHeadless();
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
--- a/desktop/src/api/anime/anime.service.ts
+++ b/desktop/src/api/anime/anime.service.ts
@@ -3,7 +3,6 @@ import { queryAll, queryOne } from '../../shared/database';
 import {Anime, Episode, Extension, StreamData} from '../types';

 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
-const TTL = 60 * 60 * 6;

 const ANILIST_URL = "https://graphql.anilist.co";

@@ -79,6 +78,54 @@ const MEDIA_FIELDS = `
  }
 `;

+export async function refreshTrendingAnime(): Promise<void> {
+    const query = `
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+        }
+      }
+    `;
+
+    const data = await fetchAniList(query, {});
+    const list = data?.Page?.media || [];
+    const now = Math.floor(Date.now() / 1000);
+
+    await queryOne("DELETE FROM trending");
+
+    let rank = 1;
+    for (const anime of list) {
+        await queryOne(
+            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
+            [rank++, anime.id, JSON.stringify(anime), now]
+        );
+    }
+}
+
+export async function refreshTopAiringAnime(): Promise<void> {
+    const query = `
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
+        }
+      }
+    `;
+
+    const data = await fetchAniList(query, {});
+    const list = data?.Page?.media || [];
+    const now = Math.floor(Date.now() / 1000);
+
+    await queryOne("DELETE FROM top_airing");
+
+    let rank = 1;
+    for (const anime of list) {
+        await queryOne(
+            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
+            [rank++, anime.id, JSON.stringify(anime), now]
+        );
+    }
+}
+
 async function fetchAniList(query: string, variables: any) {
    const res = await fetch(ANILIST_URL, {
        method: "POST",
@@ -119,76 +166,16 @@ export async function getAnimeById(id: string | number): Promise<Anime | { error

 export async function getTrendingAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM trending ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10"
    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
-    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
-      }
-    }
-  `;
-
-    const data = await fetchAniList(query, {});
-    const list = data?.Page?.media || [];
-    const now = Math.floor(Date.now() / 1000);
-
-    await queryOne("DELETE FROM trending");
-    let rank = 1;
-
-    for (const anime of list) {
-        await queryOne(
-            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
-            [rank++, anime.id, JSON.stringify(anime), now]
-        );
-    }
-
-    return list;
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }

 export async function getTopAiringAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM top_airing ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10"
    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
-    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
-      }
-    }
-  `;
-
-    const data = await fetchAniList(query, {});
-    const list = data?.Page?.media || [];
-    const now = Math.floor(Date.now() / 1000);
-
-    await queryOne("DELETE FROM top_airing");
-    let rank = 1;
-
-    for (const anime of list) {
-        await queryOne(
-            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
-            [rank++, anime.id, JSON.stringify(anime), now]
-        );
-    }
-
-    return list;
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }

 export async function searchAnimeLocal(query: string): Promise<Anime[]> {
--- a/desktop/src/api/books/books.service.ts
+++ b/desktop/src/api/books/books.service.ts
@@ -4,7 +4,6 @@ import { getAllExtensions, getBookExtensionsMap } from '../../shared/extensions'
 import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types';

 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
-const TTL = 60 * 60 * 6;
 const ANILIST_URL = "https://graphql.anilist.co";

 async function fetchAniList(query: string, variables: any) {
@@ -134,25 +133,14 @@ export async function getBookById(id: string | number): Promise<Book | { error:
    return { error: "Book not found" };
 }

-export async function getTrendingBooks(): Promise<Book[]> {
-    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM trending_books ORDER BY rank ASC LIMIT 10"
-    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
+export async function refreshTrendingBooks(): Promise<void> {
    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+        }
      }
-    }
-  `;
+    `;

    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -167,30 +155,16 @@ export async function getTrendingBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
-
-    return list;
 }

-
-export async function getPopularBooks(): Promise<Book[]> {
-    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM popular_books ORDER BY rank ASC LIMIT 10"
-    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
+export async function refreshPopularBooks(): Promise<void> {
    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
+        }
      }
-    }
-  `;
+    `;

    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -205,10 +179,21 @@ export async function getPopularBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
-
-    return list;
 }

+export async function getTrendingBooks(): Promise<Book[]> {
+    const rows = await queryAll(
+        "SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10"
+    );
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
+}
+
+export async function getPopularBooks(): Promise<Book[]> {
+    const rows = await queryAll(
+        "SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10"
+    );
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
+}

 export async function searchBooksLocal(query: string): Promise<Book[]> {
    if (!query || query.length < 2) {
--- a/desktop/src/api/extensions/extensions.controller.ts
+++ b/desktop/src/api/extensions/extensions.controller.ts
@@ -1,6 +1,59 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
 import { ExtensionNameRequest } from '../types';
+import path from 'path';
+import fs from 'fs/promises';
+
+const TYPE_MAP: Record<string, string> = {
+    'anime-board': 'anime',
+    'image-board': 'image',
+    'book-board': 'book',
+};
+
+function extractProp(source: string, prop: string): string | null {
+    const m = source.match(new RegExp(`this\\.${prop}\\s*=\\s*["']([^"']+)["']`));
+    return m ? m[1] : null;
+}
+
+function isNewer(remote: string, local?: string | null) {
+    if (!local) return true;
+    return remote !== local;
+}
+
+export async function updateExtensions(req: any, reply: FastifyReply) {
+    const updated: string[] = [];
+
+    for (const name of getExtensionsList()) {
+        const ext = getExtension(name);
+        if (!ext) continue;
+
+        const type = ext.type;
+        if (!TYPE_MAP[type]) continue;
+
+        const fileName = ext.__fileName;
+        const remoteUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${TYPE_MAP[type]}/${fileName}`;
+
+        let remoteSrc: string;
+        try {
+            const res = await fetch(remoteUrl);
+            if (!res.ok) continue;
+            remoteSrc = await res.text();
+        } catch {
+            continue;
+        }
+
+        const remoteVersion = extractProp(remoteSrc, 'version');
+        const localVersion = ext.version ?? null;
+        if (!remoteVersion) continue;
+
+        if (isNewer(remoteVersion, localVersion)) {
+            await saveExtensionFile(fileName, remoteUrl);
+            updated.push(name);
+        }
+    }
+
+    return { updated };
+}

 export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
    return { extensions: getExtensionsList() };
@@ -37,24 +90,33 @@ export async function getExtensionSettings(req: ExtensionNameRequest, reply: Fas
 }

 export async function installExtension(req: any, reply: FastifyReply) {
-    const { fileName } = req.body;
+    const { url } = req.body;

-    if (!fileName || !fileName.endsWith('.js')) {
-        return reply.code(400).send({ error: "Invalid extension fileName provided" });
+    if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
+        return reply.code(400).send({ error: "Invalid extension URL provided" });
    }

    try {
+        const fileName = url.split('/').pop();

-        const downloadUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${fileName}`
+        if (!fileName) {
+            return reply.code(400).send({ error: "Could not determine file name from URL" });
+        }

-        await saveExtensionFile(fileName, downloadUrl);
+        await saveExtensionFile(fileName, url);

        req.server.log.info(`Extension installed: ${fileName}`);
-        return reply.code(200).send({ success: true, message: `Extension ${fileName} installed successfully.` });
+        return reply.code(200).send({
+            success: true,
+            message: `Extension ${fileName} installed successfully.`,
+        });

    } catch (error) {
-        req.server.log.error(`Failed to install extension ${fileName}:`, error);
-        return reply.code(500).send({ success: false, error: `Failed to install extension ${fileName}.` });
+        req.server.log.error(`Failed to install extension from ${url}:`, error);
+        return reply.code(500).send({
+            success: false,
+            error: "Failed to install extension.",
+        });
    }
 }

--- a/desktop/src/api/extensions/extensions.routes.ts
+++ b/desktop/src/api/extensions/extensions.routes.ts
@@ -4,6 +4,7 @@ import * as controller from './extensions.controller';
 async function extensionsRoutes(fastify: FastifyInstance) {
    fastify.get('/extensions', controller.getExtensions);
    fastify.get('/extensions/anime', controller.getAnimeExtensions);
+    fastify.post('/extensions/update', controller.updateExtensions);
    fastify.get('/extensions/book', controller.getBookExtensions);
    fastify.get('/extensions/gallery', controller.getGalleryExtensions);
    fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
--- a/desktop/src/scripts/list.js
+++ b/desktop/src/scripts/list.js
@@ -29,20 +29,32 @@ async function populateSourceFilter() {
    `;

    try {
-        const response = await fetch(`${API_BASE}/extensions`);
-        if (response.ok) {
-            const data = await response.json();
-            const extensions = data.extensions || [];
+        const [animeRes, bookRes] = await Promise.all([
+            fetch(`${API_BASE}/extensions/anime`),
+            fetch(`${API_BASE}/extensions/book`)
+        ]);

-            extensions.forEach(extName => {
-                if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
-                    const option = document.createElement('option');
-                    option.value = extName;
-                    option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
-                    select.appendChild(option);
-                }
-            });
+        const extensions = new Set();
+
+        if (animeRes.ok) {
+            const data = await animeRes.json();
+            (data.extensions || []).forEach(ext => extensions.add(ext));
        }
+
+        if (bookRes.ok) {
+            const data = await bookRes.json();
+            (data.extensions || []).forEach(ext => extensions.add(ext));
+        }
+
+        extensions.forEach(extName => {
+            const lower = extName.toLowerCase();
+            if (lower !== 'anilist' && lower !== 'local') {
+                const option = document.createElement('option');
+                option.value = extName;
+                option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
+                select.appendChild(option);
+            }
+        });
    } catch (error) {
        console.error('Error loading extensions:', error);
    }
--- a/desktop/src/scripts/marketplace.js
+++ b/desktop/src/scripts/marketplace.js
@@ -1,422 +1,262 @@
-const GITEA_INSTANCE = 'https://git.waifuboard.app';
-const REPO_OWNER = 'ItsSkaiya';
-const REPO_NAME = 'WaifuBoard-Extensions';
-let DETECTED_BRANCH = 'main';
-const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
-
+const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
+const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
 const INSTALLED_EXTENSIONS_API = '/api/extensions';
+const UPDATE_EXTENSIONS_API = '/api/extensions/update';

-const extensionsGrid = document.getElementById('extensions-grid');
+const marketplaceContent = document.getElementById('marketplace-content');
 const filterSelect = document.getElementById('extension-filter');
+const updateAllBtn = document.getElementById('btn-update-all');

-let allExtensionsData = [];
-
-const customModal = document.getElementById('customModal');
+const modal = document.getElementById('customModal');
 const modalTitle = document.getElementById('modalTitle');
 const modalMessage = document.getElementById('modalMessage');
+const modalConfirmBtn = document.getElementById('modalConfirmButton');
+const modalCloseBtn = document.getElementById('modalCloseButton');

-function getRawUrl(filename) {
+let marketplaceMetadata = {};
+let installedExtensions = [];
+let currentTab = 'marketplace';

-    const targetUrl = `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
-
-    const encodedUrl = encodeURIComponent(targetUrl);
-
-    return `/api/proxy?url=${encodedUrl}`;
-}
-
-function updateExtensionState(fileName, installed) {
-    const ext = allExtensionsData.find(e => e.fileName === fileName);
-    if (!ext) return;
-
-    ext.isInstalled = installed;
-    ext.isLocal = installed && ext.isLocal;
-
-    filterAndRenderExtensions(filterSelect?.value || 'All');
-}
-
-function formatExtensionName(fileName) {
-    return fileName.replace('.js', '')
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .replace(/^[a-z]/, (char) => char.toUpperCase());
-}
-
-function getIconUrl(extensionDetails) {
-    return extensionDetails;
-}
-
-async function getExtensionDetails(url) {
+async function loadMarketplace() {
+    showSkeletons();
    try {
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
-        const text = await res.text();
+        const [metaRes, installedRes] = await Promise.all([
+            fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
+            fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
+        ]);

-        const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
-        const match = text.match(regex);
-        let finalHostname = null;
-        if (match && match[2]) {
-            let rawUrl = match[2].trim();
-            if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
-            try {
-                const urlObj = new URL(rawUrl);
-                finalHostname = urlObj.hostname;
-            } catch(e) {
-                console.warn(`Could not parse baseUrl: ${rawUrl}`);
-            }
+        marketplaceMetadata = metaRes.extensions;
+        installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
+
+        initTabs();
+        renderGroupedView();
+
+        if (filterSelect) {
+            filterSelect.addEventListener('change', () => renderGroupedView());
        }

-        const classMatch = text.match(/class\s+(\w+)/);
-        const name = classMatch ? classMatch[1] : null;
-
-        let type = 'Image';
-        if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';
-        else if (text.includes('type = "anime-board"') || text.includes("type = 'anime-board'")) type = 'Anime';
-
-        return { baseUrl: finalHostname, name, type };
-    } catch (e) {
-        return { baseUrl: null, name: null, type: 'Unknown' };
+        if (updateAllBtn) {
+            updateAllBtn.onclick = handleUpdateAll;
+        }
+    } catch (error) {
+        console.error('Error loading marketplace:', error);
+        marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
    }
 }

-function showCustomModal(title, message, isConfirm = false) {
-    return new Promise(resolve => {
+function initTabs() {
+    const tabs = document.querySelectorAll('.tab-button');
+    tabs.forEach(tab => {
+        tab.onclick = () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            currentTab = tab.dataset.tab;

-        modalTitle.textContent = title;
-        modalMessage.textContent = message;
+            if (updateAllBtn) {
+                if (currentTab === 'installed') {
+                    updateAllBtn.classList.remove('hidden');
+                } else {
+                    updateAllBtn.classList.add('hidden');
+                }
+            }

-        const currentConfirmButton = document.getElementById('modalConfirmButton');
-        const currentCloseButton = document.getElementById('modalCloseButton');
-
-        const newConfirmButton = currentConfirmButton.cloneNode(true);
-        currentConfirmButton.parentNode.replaceChild(newConfirmButton, currentConfirmButton);
-
-        const newCloseButton = currentCloseButton.cloneNode(true);
-        currentCloseButton.parentNode.replaceChild(newCloseButton, currentCloseButton);
-
-        if (isConfirm) {
-
-            newConfirmButton.classList.remove('hidden');
-            newConfirmButton.textContent = 'Confirm';
-            newCloseButton.textContent = 'Cancel';
-        } else {
-
-            newConfirmButton.classList.add('hidden');
-            newCloseButton.textContent = 'Close';
-        }
-
-        const closeModal = (confirmed) => {
-            customModal.classList.add('hidden');
-            resolve(confirmed);
+            renderGroupedView();
        };
-
-        newConfirmButton.onclick = () => closeModal(true);
-        newCloseButton.onclick = () => closeModal(false);
-
-        customModal.classList.remove('hidden');
    });
 }

-function renderExtensionCard(extension, isInstalled, isLocalOnly = false) {
+async function handleUpdateAll() {
+    const originalText = updateAllBtn.innerText;
+    try {
+        updateAllBtn.disabled = true;
+        updateAllBtn.innerText = 'Updating...';

-    const extensionName = formatExtensionName(extension.fileName || extension.name);
-    const extensionType = extension.type || 'Unknown';
+        const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
+        if (!res.ok) throw new Error('Update failed');

-    let iconUrl;
+        const data = await res.json();

-    if (extension.baseUrl && extension.baseUrl !== 'Local Install') {
+        if (data.updated && data.updated.length > 0) {

-        iconUrl = `https://www.google.com/s2/favicons?domain=${extension.baseUrl}&sz=128`;
+            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 });
+            }
+        }

-        const displayName = extensionName.replace(/\s/g, '+');
-        iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
+        installedExtensions.forEach(id => {
+            const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
+            if (!existsInMeta) {
+                listToRender.push({
+                    id: id,
+                    name: id.charAt(0).toUpperCase() + id.slice(1),
+                    type: 'Local',
+                    author: 'Unknown',
+                    isInstalled: true
+                });
+            }
+        });
    }

+    listToRender.forEach(ext => {
+        const type = ext.type || 'Other';
+        if (activeFilter !== 'All' && type !== activeFilter) return;
+        if (!groups[type]) groups[type] = [];
+        groups[type].push(ext);
+    });
+
+    const sortedTypes = Object.keys(groups).sort();
+
+    if (sortedTypes.length === 0) {
+        marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
+        return;
+    }
+
+    sortedTypes.forEach(type => {
+        const section = document.createElement('div');
+        section.className = 'category-group';
+
+        const title = document.createElement('h2');
+        title.className = 'marketplace-section-title';
+        title.innerText = type.replace('-', ' ');
+
+        const grid = document.createElement('div');
+        grid.className = 'marketplace-grid';
+
+        groups[type].forEach(ext => grid.appendChild(createCard(ext)));
+
+        section.appendChild(title);
+        section.appendChild(grid);
+        marketplaceContent.appendChild(section);
+    });
+}
+
+function createCard(ext) {
    const card = document.createElement('div');
-    card.className = `extension-card grid-item extension-type-${extensionType.toLowerCase()}`;
-    card.dataset.path = extension.fileName || extension.name;
-    card.dataset.type = extensionType;
+    card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;

-    let buttonHtml;
-    let badgeHtml = '';
+    const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`;

-    if (isInstalled) {
-
-        if (isLocalOnly) {
-            badgeHtml = '<span class="extension-status-badge badge-local">Local</span>';
-        } else {
-            badgeHtml = '<span class="extension-status-badge badge-installed">Installed</span>';
-        }
-        buttonHtml = `
-            <button class="extension-action-button btn-uninstall" data-action="uninstall">Uninstall</button>
-        `;
+    let buttonHtml = '';
+    if (ext.isInstalled) {
+        buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
+    } else if (ext.broken) {
+        buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
    } else {
-
-        buttonHtml = `
-            <button class="extension-action-button btn-install" data-action="install">Install</button>
-        `;
+        buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
    }

    card.innerHTML = `
-        <img class="extension-icon" src="${iconUrl}" alt="${extensionName} Icon" onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name=E&background=1f2937&color=fff&length=1'">
+        <img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
        <div class="card-content-wrapper">
-            <h3 class="extension-name" title="${extensionName}">${extensionName}</h3>
-            ${badgeHtml}
+            <h3 class="extension-name">${ext.name}</h3>
+            <span class="extension-author">by ${ext.author || 'Unknown'}</span>
+            <p class="extension-description">${ext.description || 'No description available.'}</p>
+            <div class="extension-tags">
+                <span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
+                    ${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
+                </span>
+                ${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
+            </div>
        </div>
        ${buttonHtml}
    `;

-    const installButton = card.querySelector('[data-action="install"]');
-    const uninstallButton = card.querySelector('[data-action="uninstall"]');
-
-    if (installButton) {
-        installButton.addEventListener('click', async () => {
-            try {
-                const response = await fetch('/api/extensions/install', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fileName: extension.fileName }),
-                });
-
-                const result = await response.json();
-
-                if (response.ok) {
-                    updateExtensionState(extension.fileName, true);
-
-                    await showCustomModal(
-                        'Installation Successful',
-                        `${extensionName} has been successfully installed.`,
-                        false
-                    );
-                } else {
-
-                    await showCustomModal(
-                        'Installation Failed',
-                        `Installation failed: ${result.error || 'Unknown error.'}`,
-                        false
-                    );
-                }
-            } catch (error) {
-
-                await showCustomModal(
-                    'Installation Failed',
-                    `Network error during installation.`,
-                    false
-                );
-            }
-        });
+    const btn = card.querySelector('.extension-action-button');
+    if (!ext.broken || ext.isInstalled) {
+        btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
    }

-    if (uninstallButton) {
-        uninstallButton.addEventListener('click', async () => {
-
-            const confirmed = await showCustomModal(
-                'Confirm Uninstallation',
-                `Are you sure you want to uninstall ${extensionName}?`,
-                true
-            );
-
-            if (!confirmed) return;
-
-            try {
-                const response = await fetch('/api/extensions/uninstall', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fileName: extension.fileName }),
-                });
-
-                const result = await response.json();
-
-                if (response.ok) {
-                    updateExtensionState(extension.fileName, false);
-
-                    await showCustomModal(
-                        'Uninstallation Successful',
-                        `${extensionName} has been successfully uninstalled.`,
-                        false
-                    );
-                } else {
-
-                    await showCustomModal(
-                        'Uninstallation Failed',
-                        `Uninstallation failed: ${result.error || 'Unknown error.'}`,
-                        false
-                    );
-                }
-            } catch (error) {
-
-                await showCustomModal(
-                    'Uninstallation Failed',
-                    `Network error during uninstallation.`,
-                    false
-                );
-            }
-        });
-    }
-
-    extensionsGrid.appendChild(card);
+    return card;
 }

-async function getInstalledExtensions() {
-    console.log(`Fetching installed extensions from: ${INSTALLED_EXTENSIONS_API}`);
+function showModal(title, message, showConfirm = false, onConfirm = null) {
+    modalTitle.innerText = title;
+    modalMessage.innerText = message;
+    if (showConfirm) {
+        modalConfirmBtn.classList.remove('hidden');
+        modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
+    } else {
+        modalConfirmBtn.classList.add('hidden');
+    }
+    modalCloseBtn.onclick = hideModal;
+    modal.classList.remove('hidden');
+}

+function hideModal() { modal.classList.add('hidden'); }
+
+async function handleInstall(ext) {
    try {
-        const response = await fetch(INSTALLED_EXTENSIONS_API);
-
-        if (!response.ok) {
-            console.error(`Error fetching installed extensions. Status: ${response.status}`);
-            return new Set();
+        const res = await fetch('/api/extensions/install', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url: ext.entry })
+        });
+        if (res.ok) {
+            installedExtensions.push(ext.id.toLowerCase());
+            renderGroupedView();
+            window.NotificationUtils.success(`${ext.name} installed!`);
        }
-
-        const data = await response.json();
-
-        if (!data.extensions || !Array.isArray(data.extensions)) {
-            console.error("Invalid response format from /api/extensions: 'extensions' array missing or incorrect.");
-            return new Set();
-        }
-
-        const installedFileNames = data.extensions
-            .map(name => `${name.toLowerCase()}.js`);
-
-        return new Set(installedFileNames);
-
-    } catch (error) {
-        console.error('Network or JSON parsing error during fetch of installed extensions:', error);
-        return new Set();
-    }
+    } catch (e) { window.NotificationUtils.error('Install failed.'); }
 }

-function filterAndRenderExtensions(filterType) {
-    extensionsGrid.innerHTML = '';
-
-    if (!allExtensionsData || allExtensionsData.length === 0) {
-        console.log('No extension data to filter.');
-        return;
-    }
-
-    const filteredExtensions = allExtensionsData.filter(ext =>
-        filterType === 'All' || ext.type === filterType || (ext.isLocal && filterType === 'Local')
-    );
-
-    filteredExtensions.forEach(ext => {
-        renderExtensionCard(ext, ext.isInstalled, ext.isLocal);
-    });
-
-    if (filteredExtensions.length === 0) {
-        extensionsGrid.innerHTML = `<p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary);">No extensions found for the selected filter (${filterType}).</p>`;
-    }
+function promptUninstall(ext) {
+    showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
 }

-async function loadMarketplace() {
-    extensionsGrid.innerHTML = '';
-
-    for (let i = 0; i < 6; i++) {
-        extensionsGrid.innerHTML += `
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon skeleton" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button skeleton" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>`;
-    }
-
+async function handleUninstall(ext) {
    try {
-
-        const [availableExtensionsRaw, installedExtensionsSet] = await Promise.all([
-            fetch(API_URL_BASE).then(res => {
-                if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
-                return res.json();
-            }),
-            getInstalledExtensions()
-        ]);
-
-        const availableExtensionsJs = availableExtensionsRaw.filter(ext => ext.type === 'file' && ext.name.endsWith('.js'));
-        const detailPromises = [];
-
-        const marketplaceFileNames = new Set(availableExtensionsJs.map(ext => ext.name.toLowerCase()));
-
-        for (const ext of availableExtensionsJs) {
-
-            const downloadUrl = getRawUrl(ext.name);
-
-            const detailsPromise = getExtensionDetails(downloadUrl).then(details => ({
-                ...ext,
-                ...details,
-                fileName: ext.name,
-
-                isInstalled: installedExtensionsSet.has(ext.name.toLowerCase()),
-                isLocal: false,
-            }));
-            detailPromises.push(detailsPromise);
-        }
-
-        const extensionsWithDetails = await Promise.all(detailPromises);
-
-        installedExtensionsSet.forEach(installedName => {
-
-            if (!marketplaceFileNames.has(installedName)) {
-
-                const localExt = {
-                    name: formatExtensionName(installedName),
-                    fileName: installedName,
-                    type: 'Local',
-                    isInstalled: true,
-                    isLocal: true,
-                    baseUrl: 'Local Install',
-                };
-                extensionsWithDetails.push(localExt);
-            }
+        const res = await fetch('/api/extensions/uninstall', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fileName: ext.id + '.js' })
        });
-
-        extensionsWithDetails.sort((a, b) => {
-            if (a.isInstalled !== b.isInstalled) {
-                return b.isInstalled - a.isInstalled;
-
-            }
-
-            const nameA = a.name || '';
-            const nameB = b.name || '';
-
-            return nameA.localeCompare(nameB);
-
-        });
-
-        allExtensionsData = extensionsWithDetails;
-
-        if (filterSelect) {
-            filterSelect.addEventListener('change', (event) => {
-                filterAndRenderExtensions(event.target.value);
-            });
+        if (res.ok) {
+            installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
+            renderGroupedView();
+            window.NotificationUtils.info(`${ext.name} uninstalled.`);
        }
-
-        filterAndRenderExtensions('All');
-
-    } catch (error) {
-        console.error('Error loading the marketplace:', error);
-        extensionsGrid.innerHTML = `
-            <div style="grid-column: 1 / -1; color: #dc2626; text-align: center; padding: 2rem; background: rgba(220,38,38,0.1); border-radius: 12px; margin-top: 1rem;">
-                🚨 Error loading extensions.
-                <p>Could not connect to the extension repository or local endpoint. Detail: ${error.message}</p>
-            </div>
-        `;
-        allExtensionsData = [];
-    }
+    } catch (e) { window.NotificationUtils.error('Uninstall failed.'); }
 }

-customModal.addEventListener('click', (e) => {
-    if (e.target === customModal || e.target.tagName === 'BUTTON') {
-        customModal.classList.add('hidden');
-    }
-});
+function showSkeletons() {
+    marketplaceContent.innerHTML = `
+        <div class="marketplace-grid">
+            ${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
+        </div>
+    `;
+}

 document.addEventListener('DOMContentLoaded', loadMarketplace);
-
-window.addEventListener('scroll', () => {
-    const navbar = document.getElementById('navbar');
-    if (window.scrollY > 0) {
-        navbar.classList.add('scrolled');
-    } else {
-        navbar.classList.remove('scrolled');
-    }
-});
--- a/desktop/src/shared/extensions.js
+++ b/desktop/src/shared/extensions.js
@@ -46,7 +46,6 @@ async function loadExtensions() {
    }
 }

-
 async function loadExtension(fileName) {
    const homeDir = os.homedir();
    const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
@@ -77,6 +76,7 @@ async function loadExtension(fileName) {
        }

        const name = instance.constructor.name;
+        instance.__fileName = fileName;
        instance.scrape = scrape;
        instance.cheerio = cheerio;
        extensions.set(name, instance);
@@ -114,6 +114,14 @@ async function saveExtensionFile(fileName, downloadUrl) {
            file.on('finish', async () => {
                file.close(async () => {
                    try {
+                        const extName = fileName.replace('.js', '');
+
+                        for (const key of extensions.keys()) {
+                            if (key.toLowerCase() === extName.toLowerCase()) {
+                                extensions.delete(key);
+                                break;
+                            }
+                        }
                        await loadExtension(fileName);
                        resolve();
                    } catch (err) {
--- a/desktop/views/css/marketplace.css
+++ b/desktop/views/css/marketplace.css
@@ -293,3 +293,98 @@
    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;
+    color: var(--color-text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-transform: capitalize;
+}
+
+.marketplace-section-title::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 20px;
+    background: var(--color-primary);
+    border-radius: 2px;
+}
+
+.category-group {
+    margin-bottom: 3rem;
+}
--- a/desktop/views/marketplace.html
+++ b/desktop/views/marketplace.html
@@ -10,13 +10,13 @@
    <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">
-    <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 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>
@@ -36,9 +36,9 @@
        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
+        <button class="nav-button" onclick="window.location.href='/schedule.html'">Schedule</button>
        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button active">Marketplace</button>
+        <button class="nav-button">Marketplace</button>
    </div>

    <div class="nav-right">
@@ -90,47 +90,31 @@

 <main>
    <section class="section">
-
        <header class="section-header">
-            <p class="marketplace-subtitle">Explore, install, and manage all available data source extensions for WaifuBoard.</p>
+            <div class="tabs-container">
+                <button class="tab-button active" data-tab="marketplace">Marketplace</button>
+                <button class="tab-button" data-tab="installed">My Extensions</button>
+            </div>
+
            <div class="filter-controls">
+                <button id="btn-update-all" class="btn-blur hidden" style="margin-right: 10px; width: auto; padding: 0 15px;">
+                    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 Extensions</option>
-                    <option value="Image">Image Boards</option>
-                    <option value="Anime">Anime Boards</option>
-                    <option value="Book">Book Boards</option>
-                    <option value="Local">Local Only</option>
+                    <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 class="marketplace-grid" id="extensions-grid">
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
+
+        <div id="marketplace-content">
        </div>
    </section>
+
    <div id="customModal" class="modal-overlay hidden">
        <div class="modal-content">
            <h3 id="modalTitle"></h3>
@@ -143,22 +127,11 @@
    </div>
 </main>

-<div id="updateToast" class="hidden">
-    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
-        Click To Download
-    </a>
-</div>
-
+<script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/marketplace.js"></script>
 <script src="/src/scripts/titlebar.js"></script>
+<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/main.js
+++ b/docker/main.js
@@ -1,41 +0,0 @@
-const { app, BrowserWindow, ipcMain } = require('electron');
-const { fork } = require('child_process');
-const path = require('path');
-
-let win;
-let backend;
-
-function startBackend() {
-    backend = fork(path.join(__dirname, 'server.js'));
-}
-
-function createWindow() {
-    win = new BrowserWindow({
-        width: 1200,
-        height: 800,
-        frame: false,
-        titleBarStyle: "hidden",
-        webPreferences: {
-            preload: path.join(__dirname, "preload.js"),
-            nodeIntegration: false,
-            contextIsolation: true
-        }
-    });
-
-    win.setMenu(null);
-    win.loadURL('http://localhost:54322');
-}
-
-ipcMain.on("win:minimize", () => win.minimize());
-ipcMain.on("win:maximize", () => win.maximize());
-ipcMain.on("win:close", () => win.close());
-
-app.whenReady().then(() => {
-    startBackend();
-    createWindow();
-});
-
-app.on('window-all-closed', () => {
-    if (backend) backend.kill();
-    app.quit();
-});
--- a/docker/package-lock.json
+++ b/docker/package-lock.json
@@ -17,6 +17,7 @@
        "fastify": "^5.6.2",
        "jsonwebtoken": "^9.0.3",
        "node-addon-api": "^8.5.0",
+        "node-cron": "^4.2.1",
        "playwright-chromium": "^1.57.0",
        "sqlite3": "^5.1.7"
      },
@@ -2230,6 +2231,15 @@
        "node": "^18 || ^20 || >= 21"
      }
    },
+    "node_modules/node-cron": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
+      "integrity": "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
    "node_modules/node-gyp": {
      "version": "12.1.0",
      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.1.0.tgz",
--- a/docker/package.json
+++ b/docker/package.json
@@ -20,6 +20,7 @@
    "fastify": "^5.6.2",
    "jsonwebtoken": "^9.0.3",
    "node-addon-api": "^8.5.0",
+    "node-cron": "^4.2.1",
    "playwright-chromium": "^1.57.0",
    "sqlite3": "^5.1.7"
  },
--- a/docker/preload.js
+++ b/docker/preload.js
@@ -1,10 +0,0 @@
-const { contextBridge, ipcRenderer } = require("electron");
-
-contextBridge.exposeInMainWorld("electronAPI", {
-    isElectron: true,
-    win: {
-        minimize: () => ipcRenderer.send("win:minimize"),
-        maximize: () => ipcRenderer.send("win:maximize"),
-        close: () => ipcRenderer.send("win:close")
-    }
-});
--- a/docker/server.js
+++ b/docker/server.js
@@ -4,26 +4,25 @@ const fastify = require("fastify")({

 const path = require("path");
 const jwt = require("jsonwebtoken");
-const { initHeadless } = require("./electron/shared/headless");
-const { initDatabase } = require("./electron/shared/database");
-const { loadExtensions } = require("./electron/shared/extensions");
+const cron = require("node-cron");
+const { initHeadless } = require("./dist/shared/headless");
+const { initDatabase } = require("./dist/shared/database");
+const { loadExtensions } = require("./dist/shared/extensions");
+const {refreshTrendingAnime, refreshTopAiringAnime} = require("./dist/api/anime/anime.service");
+const {refreshPopularBooks, refreshTrendingBooks} = require("./dist/api/books/books.service");
 const dotenv = require("dotenv");
-const envPath = process.resourcesPath
-  ? path.join(process.resourcesPath, ".env")
-  : path.join(__dirname, ".env");

-// Attempt to load it and log the result to be sure
-dotenv.config({ path: envPath });
+dotenv.config();

-const viewsRoutes = require("./electron/views/views.routes");
-const animeRoutes = require("./electron/api/anime/anime.routes");
-const booksRoutes = require("./electron/api/books/books.routes");
-const proxyRoutes = require("./electron/api/proxy/proxy.routes");
-const extensionsRoutes = require("./electron/api/extensions/extensions.routes");
-const galleryRoutes = require("./electron/api/gallery/gallery.routes");
-const userRoutes = require("./electron/api/user/user.routes");
-const listRoutes = require("./electron/api/list/list.routes");
-const anilistRoute = require("./electron/api/anilist/anilist");
+const viewsRoutes = require("./dist/views/views.routes");
+const animeRoutes = require("./dist/api/anime/anime.routes");
+const booksRoutes = require("./dist/api/books/books.routes");
+const proxyRoutes = require("./dist/api/proxy/proxy.routes");
+const extensionsRoutes = require("./dist/api/extensions/extensions.routes");
+const galleryRoutes = require("./dist/api/gallery/gallery.routes");
+const userRoutes = require("./dist/api/user/user.routes");
+const listRoutes = require("./dist/api/list/list.routes");
+const anilistRoute = require("./dist/api/anilist/anilist");

 fastify.addHook("preHandler", async (request) => {
  const auth = request.headers.authorization;
@@ -65,6 +64,8 @@ fastify.register(userRoutes, { prefix: "/api" });
 fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });

+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
 const start = async () => {
  try {
    initDatabase("anilist");
@@ -72,12 +73,31 @@ const start = async () => {
    initDatabase("cache");
    initDatabase("userdata");

+    const refreshAll = async () => {
+      await refreshTrendingAnime();
+      await sleep(300);
+      await refreshTopAiringAnime();
+      await sleep(300);
+      await refreshTrendingBooks();
+      await sleep(300);
+      await refreshPopularBooks();
+    };
+
+    cron.schedule("*/30 * * * *", async () => {
+      try {
+        await refreshAll();
+        console.log("cache refreshed");
+      } catch (e) {
+        console.error("refresh failed", e);
+      }
+    });
+
    await loadExtensions();
+    await initHeadless();
+    await refreshAll();

    await fastify.listen({ port: 54322, host: "0.0.0.0" });
-    console.log(`Server is now running!`);
-
-    await initHeadless();
+    console.log(`Server running at http://localhost:54322`);
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
--- a/docker/src/api/anime/anime.service.ts
+++ b/docker/src/api/anime/anime.service.ts
@@ -3,7 +3,6 @@ import { queryAll, queryOne } from '../../shared/database';
 import {Anime, Episode, Extension, StreamData} from '../types';

 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
-const TTL = 60 * 60 * 6;

 const ANILIST_URL = "https://graphql.anilist.co";

@@ -79,6 +78,54 @@ const MEDIA_FIELDS = `
  }
 `;

+export async function refreshTrendingAnime(): Promise<void> {
+    const query = `
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+        }
+      }
+    `;
+
+    const data = await fetchAniList(query, {});
+    const list = data?.Page?.media || [];
+    const now = Math.floor(Date.now() / 1000);
+
+    await queryOne("DELETE FROM trending");
+
+    let rank = 1;
+    for (const anime of list) {
+        await queryOne(
+            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
+            [rank++, anime.id, JSON.stringify(anime), now]
+        );
+    }
+}
+
+export async function refreshTopAiringAnime(): Promise<void> {
+    const query = `
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
+        }
+      }
+    `;
+
+    const data = await fetchAniList(query, {});
+    const list = data?.Page?.media || [];
+    const now = Math.floor(Date.now() / 1000);
+
+    await queryOne("DELETE FROM top_airing");
+
+    let rank = 1;
+    for (const anime of list) {
+        await queryOne(
+            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
+            [rank++, anime.id, JSON.stringify(anime), now]
+        );
+    }
+}
+
 async function fetchAniList(query: string, variables: any) {
    const res = await fetch(ANILIST_URL, {
        method: "POST",
@@ -119,76 +166,16 @@ export async function getAnimeById(id: string | number): Promise<Anime | { error

 export async function getTrendingAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM trending ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10"
    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
-    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
-      }
-    }
-  `;
-
-    const data = await fetchAniList(query, {});
-    const list = data?.Page?.media || [];
-    const now = Math.floor(Date.now() / 1000);
-
-    await queryOne("DELETE FROM trending");
-    let rank = 1;
-
-    for (const anime of list) {
-        await queryOne(
-            "INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
-            [rank++, anime.id, JSON.stringify(anime), now]
-        );
-    }
-
-    return list;
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }

 export async function getTopAiringAnime(): Promise<Anime[]> {
    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM top_airing ORDER BY rank ASC LIMIT 10"
+        "SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10"
    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
-    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
-      }
-    }
-  `;
-
-    const data = await fetchAniList(query, {});
-    const list = data?.Page?.media || [];
-    const now = Math.floor(Date.now() / 1000);
-
-    await queryOne("DELETE FROM top_airing");
-    let rank = 1;
-
-    for (const anime of list) {
-        await queryOne(
-            "INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
-            [rank++, anime.id, JSON.stringify(anime), now]
-        );
-    }
-
-    return list;
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
 }

 export async function searchAnimeLocal(query: string): Promise<Anime[]> {
--- a/docker/src/api/books/books.service.ts
+++ b/docker/src/api/books/books.service.ts
@@ -4,7 +4,6 @@ import { getAllExtensions, getBookExtensionsMap } from '../../shared/extensions'
 import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types';

 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
-const TTL = 60 * 60 * 6;
 const ANILIST_URL = "https://graphql.anilist.co";

 async function fetchAniList(query: string, variables: any) {
@@ -134,25 +133,14 @@ export async function getBookById(id: string | number): Promise<Book | { error:
    return { error: "Book not found" };
 }

-export async function getTrendingBooks(): Promise<Book[]> {
-    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM trending_books ORDER BY rank ASC LIMIT 10"
-    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
+export async function refreshTrendingBooks(): Promise<void> {
    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
+        }
      }
-    }
-  `;
+    `;

    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -167,30 +155,16 @@ export async function getTrendingBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
-
-    return list;
 }

-
-export async function getPopularBooks(): Promise<Book[]> {
-    const rows = await queryAll(
-        "SELECT full_data, updated_at FROM popular_books ORDER BY rank ASC LIMIT 10"
-    );
-
-    if (rows.length) {
-        const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
-        if (!expired) {
-            return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
-        }
-    }
-
+export async function refreshPopularBooks(): Promise<void> {
    const query = `
-    query {
-      Page(page: 1, perPage: 10) {
-        media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
+      query {
+        Page(page: 1, perPage: 10) {
+          media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
+        }
      }
-    }
-  `;
+    `;

    const data = await fetchAniList(query, {});
    const list = data?.Page?.media || [];
@@ -205,10 +179,21 @@ export async function getPopularBooks(): Promise<Book[]> {
            [rank++, book.id, JSON.stringify(book), now]
        );
    }
-
-    return list;
 }

+export async function getTrendingBooks(): Promise<Book[]> {
+    const rows = await queryAll(
+        "SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10"
+    );
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
+}
+
+export async function getPopularBooks(): Promise<Book[]> {
+    const rows = await queryAll(
+        "SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10"
+    );
+    return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
+}

 export async function searchBooksLocal(query: string): Promise<Book[]> {
    if (!query || query.length < 2) {
--- a/docker/src/api/extensions/extensions.controller.ts
+++ b/docker/src/api/extensions/extensions.controller.ts
@@ -1,6 +1,59 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
 import { ExtensionNameRequest } from '../types';
+import path from 'path';
+import fs from 'fs/promises';
+
+const TYPE_MAP: Record<string, string> = {
+    'anime-board': 'anime',
+    'image-board': 'image',
+    'book-board': 'book',
+};
+
+function extractProp(source: string, prop: string): string | null {
+    const m = source.match(new RegExp(`this\\.${prop}\\s*=\\s*["']([^"']+)["']`));
+    return m ? m[1] : null;
+}
+
+function isNewer(remote: string, local?: string | null) {
+    if (!local) return true;
+    return remote !== local;
+}
+
+export async function updateExtensions(req: any, reply: FastifyReply) {
+    const updated: string[] = [];
+
+    for (const name of getExtensionsList()) {
+        const ext = getExtension(name);
+        if (!ext) continue;
+
+        const type = ext.type;
+        if (!TYPE_MAP[type]) continue;
+
+        const fileName = ext.__fileName;
+        const remoteUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${TYPE_MAP[type]}/${fileName}`;
+
+        let remoteSrc: string;
+        try {
+            const res = await fetch(remoteUrl);
+            if (!res.ok) continue;
+            remoteSrc = await res.text();
+        } catch {
+            continue;
+        }
+
+        const remoteVersion = extractProp(remoteSrc, 'version');
+        const localVersion = ext.version ?? null;
+        if (!remoteVersion) continue;
+
+        if (isNewer(remoteVersion, localVersion)) {
+            await saveExtensionFile(fileName, remoteUrl);
+            updated.push(name);
+        }
+    }
+
+    return { updated };
+}

 export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
    return { extensions: getExtensionsList() };
@@ -37,24 +90,33 @@ export async function getExtensionSettings(req: ExtensionNameRequest, reply: Fas
 }

 export async function installExtension(req: any, reply: FastifyReply) {
-    const { fileName } = req.body;
+    const { url } = req.body;

-    if (!fileName || !fileName.endsWith('.js')) {
-        return reply.code(400).send({ error: "Invalid extension fileName provided" });
+    if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
+        return reply.code(400).send({ error: "Invalid extension URL provided" });
    }

    try {
+        const fileName = url.split('/').pop();

-        const downloadUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${fileName}`
+        if (!fileName) {
+            return reply.code(400).send({ error: "Could not determine file name from URL" });
+        }

-        await saveExtensionFile(fileName, downloadUrl);
+        await saveExtensionFile(fileName, url);

        req.server.log.info(`Extension installed: ${fileName}`);
-        return reply.code(200).send({ success: true, message: `Extension ${fileName} installed successfully.` });
+        return reply.code(200).send({
+            success: true,
+            message: `Extension ${fileName} installed successfully.`,
+        });

    } catch (error) {
-        req.server.log.error(`Failed to install extension ${fileName}:`, error);
-        return reply.code(500).send({ success: false, error: `Failed to install extension ${fileName}.` });
+        req.server.log.error(`Failed to install extension from ${url}:`, error);
+        return reply.code(500).send({
+            success: false,
+            error: "Failed to install extension.",
+        });
    }
 }

--- a/docker/src/api/extensions/extensions.routes.ts
+++ b/docker/src/api/extensions/extensions.routes.ts
@@ -4,6 +4,7 @@ import * as controller from './extensions.controller';
 async function extensionsRoutes(fastify: FastifyInstance) {
    fastify.get('/extensions', controller.getExtensions);
    fastify.get('/extensions/anime', controller.getAnimeExtensions);
+    fastify.post('/extensions/update', controller.updateExtensions);
    fastify.get('/extensions/book', controller.getBookExtensions);
    fastify.get('/extensions/gallery', controller.getGalleryExtensions);
    fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
--- a/docker/src/scripts/anime/player.js
+++ b/docker/src/scripts/anime/player.js
@@ -66,16 +66,6 @@ async function loadMetadata() {
        document.getElementById('anime-title-details2').innerText = title;
        document.title = `Watching ${title} - Ep ${currentEpisode}`;

-        fetch("/api/rpc", {
-            method: "POST",
-            headers: {"Content-Type": "application/json"},
-            body: JSON.stringify({
-                details: title,
-                state: `Episode ${currentEpisode}`,
-                mode: "watching"
-            })
-        });
-
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = description;
        document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.';
--- a/docker/src/scripts/books/reader.js
+++ b/docker/src/scripts/books/reader.js
@@ -145,18 +145,6 @@ async function loadChapter() {

        setupProgressTracking(data, source);

-        const res2 = await fetch(`/api/book/${bookId}?source=${source}`);
-        const data2 = await res2.json();
-
-        fetch("/api/rpc", {
-            method: "POST",
-            headers: {"Content-Type": "application/json"},
-            body: JSON.stringify({
-                details: data2.title.romaji ?? data2.title,
-                state: `Chapter ${data.title}`,
-                mode: "reading"
-            })
-        });
        if (data.error) {
            reader.innerHTML = `
                <div class="loading-container">
--- a/docker/src/scripts/list.js
+++ b/docker/src/scripts/list.js
@@ -29,20 +29,32 @@ async function populateSourceFilter() {
    `;

    try {
-        const response = await fetch(`${API_BASE}/extensions`);
-        if (response.ok) {
-            const data = await response.json();
-            const extensions = data.extensions || [];
+        const [animeRes, bookRes] = await Promise.all([
+            fetch(`${API_BASE}/extensions/anime`),
+            fetch(`${API_BASE}/extensions/book`)
+        ]);

-            extensions.forEach(extName => {
-                if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
-                    const option = document.createElement('option');
-                    option.value = extName;
-                    option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
-                    select.appendChild(option);
-                }
-            });
+        const extensions = new Set();
+
+        if (animeRes.ok) {
+            const data = await animeRes.json();
+            (data.extensions || []).forEach(ext => extensions.add(ext));
        }
+
+        if (bookRes.ok) {
+            const data = await bookRes.json();
+            (data.extensions || []).forEach(ext => extensions.add(ext));
+        }
+
+        extensions.forEach(extName => {
+            const lower = extName.toLowerCase();
+            if (lower !== 'anilist' && lower !== 'local') {
+                const option = document.createElement('option');
+                option.value = extName;
+                option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
+                select.appendChild(option);
+            }
+        });
    } catch (error) {
        console.error('Error loading extensions:', error);
    }
--- a/docker/src/scripts/marketplace.js
+++ b/docker/src/scripts/marketplace.js
@@ -1,422 +1,262 @@
-const GITEA_INSTANCE = 'https://git.waifuboard.app';
-const REPO_OWNER = 'ItsSkaiya';
-const REPO_NAME = 'WaifuBoard-Extensions';
-let DETECTED_BRANCH = 'main';
-const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
-
+const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
+const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
 const INSTALLED_EXTENSIONS_API = '/api/extensions';
+const UPDATE_EXTENSIONS_API = '/api/extensions/update';

-const extensionsGrid = document.getElementById('extensions-grid');
+const marketplaceContent = document.getElementById('marketplace-content');
 const filterSelect = document.getElementById('extension-filter');
+const updateAllBtn = document.getElementById('btn-update-all');

-let allExtensionsData = [];
-
-const customModal = document.getElementById('customModal');
+const modal = document.getElementById('customModal');
 const modalTitle = document.getElementById('modalTitle');
 const modalMessage = document.getElementById('modalMessage');
+const modalConfirmBtn = document.getElementById('modalConfirmButton');
+const modalCloseBtn = document.getElementById('modalCloseButton');

-function getRawUrl(filename) {
+let marketplaceMetadata = {};
+let installedExtensions = [];
+let currentTab = 'marketplace';

-    const targetUrl = `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
-
-    const encodedUrl = encodeURIComponent(targetUrl);
-
-    return `/api/proxy?url=${encodedUrl}`;
-}
-
-function updateExtensionState(fileName, installed) {
-    const ext = allExtensionsData.find(e => e.fileName === fileName);
-    if (!ext) return;
-
-    ext.isInstalled = installed;
-    ext.isLocal = installed && ext.isLocal;
-
-    filterAndRenderExtensions(filterSelect?.value || 'All');
-}
-
-function formatExtensionName(fileName) {
-    return fileName.replace('.js', '')
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .replace(/^[a-z]/, (char) => char.toUpperCase());
-}
-
-function getIconUrl(extensionDetails) {
-    return extensionDetails;
-}
-
-async function getExtensionDetails(url) {
+async function loadMarketplace() {
+    showSkeletons();
    try {
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
-        const text = await res.text();
+        const [metaRes, installedRes] = await Promise.all([
+            fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
+            fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
+        ]);

-        const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
-        const match = text.match(regex);
-        let finalHostname = null;
-        if (match && match[2]) {
-            let rawUrl = match[2].trim();
-            if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
-            try {
-                const urlObj = new URL(rawUrl);
-                finalHostname = urlObj.hostname;
-            } catch(e) {
-                console.warn(`Could not parse baseUrl: ${rawUrl}`);
-            }
+        marketplaceMetadata = metaRes.extensions;
+        installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
+
+        initTabs();
+        renderGroupedView();
+
+        if (filterSelect) {
+            filterSelect.addEventListener('change', () => renderGroupedView());
        }

-        const classMatch = text.match(/class\s+(\w+)/);
-        const name = classMatch ? classMatch[1] : null;
-
-        let type = 'Image';
-        if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';
-        else if (text.includes('type = "anime-board"') || text.includes("type = 'anime-board'")) type = 'Anime';
-
-        return { baseUrl: finalHostname, name, type };
-    } catch (e) {
-        return { baseUrl: null, name: null, type: 'Unknown' };
+        if (updateAllBtn) {
+            updateAllBtn.onclick = handleUpdateAll;
+        }
+    } catch (error) {
+        console.error('Error loading marketplace:', error);
+        marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
    }
 }

-function showCustomModal(title, message, isConfirm = false) {
-    return new Promise(resolve => {
+function initTabs() {
+    const tabs = document.querySelectorAll('.tab-button');
+    tabs.forEach(tab => {
+        tab.onclick = () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            currentTab = tab.dataset.tab;

-        modalTitle.textContent = title;
-        modalMessage.textContent = message;
+            if (updateAllBtn) {
+                if (currentTab === 'installed') {
+                    updateAllBtn.classList.remove('hidden');
+                } else {
+                    updateAllBtn.classList.add('hidden');
+                }
+            }

-        const currentConfirmButton = document.getElementById('modalConfirmButton');
-        const currentCloseButton = document.getElementById('modalCloseButton');
-
-        const newConfirmButton = currentConfirmButton.cloneNode(true);
-        currentConfirmButton.parentNode.replaceChild(newConfirmButton, currentConfirmButton);
-
-        const newCloseButton = currentCloseButton.cloneNode(true);
-        currentCloseButton.parentNode.replaceChild(newCloseButton, currentCloseButton);
-
-        if (isConfirm) {
-
-            newConfirmButton.classList.remove('hidden');
-            newConfirmButton.textContent = 'Confirm';
-            newCloseButton.textContent = 'Cancel';
-        } else {
-
-            newConfirmButton.classList.add('hidden');
-            newCloseButton.textContent = 'Close';
-        }
-
-        const closeModal = (confirmed) => {
-            customModal.classList.add('hidden');
-            resolve(confirmed);
+            renderGroupedView();
        };
-
-        newConfirmButton.onclick = () => closeModal(true);
-        newCloseButton.onclick = () => closeModal(false);
-
-        customModal.classList.remove('hidden');
    });
 }

-function renderExtensionCard(extension, isInstalled, isLocalOnly = false) {
+async function handleUpdateAll() {
+    const originalText = updateAllBtn.innerText;
+    try {
+        updateAllBtn.disabled = true;
+        updateAllBtn.innerText = 'Updating...';

-    const extensionName = formatExtensionName(extension.fileName || extension.name);
-    const extensionType = extension.type || 'Unknown';
+        const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
+        if (!res.ok) throw new Error('Update failed');

-    let iconUrl;
+        const data = await res.json();

-    if (extension.baseUrl && extension.baseUrl !== 'Local Install') {
+        if (data.updated && data.updated.length > 0) {

-        iconUrl = `https://www.google.com/s2/favicons?domain=${extension.baseUrl}&sz=128`;
+            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 });
+            }
+        }

-        const displayName = extensionName.replace(/\s/g, '+');
-        iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
+        installedExtensions.forEach(id => {
+            const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
+            if (!existsInMeta) {
+                listToRender.push({
+                    id: id,
+                    name: id.charAt(0).toUpperCase() + id.slice(1),
+                    type: 'Local',
+                    author: 'Unknown',
+                    isInstalled: true
+                });
+            }
+        });
    }

+    listToRender.forEach(ext => {
+        const type = ext.type || 'Other';
+        if (activeFilter !== 'All' && type !== activeFilter) return;
+        if (!groups[type]) groups[type] = [];
+        groups[type].push(ext);
+    });
+
+    const sortedTypes = Object.keys(groups).sort();
+
+    if (sortedTypes.length === 0) {
+        marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
+        return;
+    }
+
+    sortedTypes.forEach(type => {
+        const section = document.createElement('div');
+        section.className = 'category-group';
+
+        const title = document.createElement('h2');
+        title.className = 'marketplace-section-title';
+        title.innerText = type.replace('-', ' ');
+
+        const grid = document.createElement('div');
+        grid.className = 'marketplace-grid';
+
+        groups[type].forEach(ext => grid.appendChild(createCard(ext)));
+
+        section.appendChild(title);
+        section.appendChild(grid);
+        marketplaceContent.appendChild(section);
+    });
+}
+
+function createCard(ext) {
    const card = document.createElement('div');
-    card.className = `extension-card grid-item extension-type-${extensionType.toLowerCase()}`;
-    card.dataset.path = extension.fileName || extension.name;
-    card.dataset.type = extensionType;
+    card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;

-    let buttonHtml;
-    let badgeHtml = '';
+    const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`;

-    if (isInstalled) {
-
-        if (isLocalOnly) {
-            badgeHtml = '<span class="extension-status-badge badge-local">Local</span>';
-        } else {
-            badgeHtml = '<span class="extension-status-badge badge-installed">Installed</span>';
-        }
-        buttonHtml = `
-            <button class="extension-action-button btn-uninstall" data-action="uninstall">Uninstall</button>
-        `;
+    let buttonHtml = '';
+    if (ext.isInstalled) {
+        buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
+    } else if (ext.broken) {
+        buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
    } else {
-
-        buttonHtml = `
-            <button class="extension-action-button btn-install" data-action="install">Install</button>
-        `;
+        buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
    }

    card.innerHTML = `
-        <img class="extension-icon" src="${iconUrl}" alt="${extensionName} Icon" onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name=E&background=1f2937&color=fff&length=1'">
+        <img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
        <div class="card-content-wrapper">
-            <h3 class="extension-name" title="${extensionName}">${extensionName}</h3>
-            ${badgeHtml}
+            <h3 class="extension-name">${ext.name}</h3>
+            <span class="extension-author">by ${ext.author || 'Unknown'}</span>
+            <p class="extension-description">${ext.description || 'No description available.'}</p>
+            <div class="extension-tags">
+                <span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
+                    ${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
+                </span>
+                ${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
+            </div>
        </div>
        ${buttonHtml}
    `;

-    const installButton = card.querySelector('[data-action="install"]');
-    const uninstallButton = card.querySelector('[data-action="uninstall"]');
-
-    if (installButton) {
-        installButton.addEventListener('click', async () => {
-            try {
-                const response = await fetch('/api/extensions/install', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fileName: extension.fileName }),
-                });
-
-                const result = await response.json();
-
-                if (response.ok) {
-                    updateExtensionState(extension.fileName, true);
-
-                    await showCustomModal(
-                        'Installation Successful',
-                        `${extensionName} has been successfully installed.`,
-                        false
-                    );
-                } else {
-
-                    await showCustomModal(
-                        'Installation Failed',
-                        `Installation failed: ${result.error || 'Unknown error.'}`,
-                        false
-                    );
-                }
-            } catch (error) {
-
-                await showCustomModal(
-                    'Installation Failed',
-                    `Network error during installation.`,
-                    false
-                );
-            }
-        });
+    const btn = card.querySelector('.extension-action-button');
+    if (!ext.broken || ext.isInstalled) {
+        btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
    }

-    if (uninstallButton) {
-        uninstallButton.addEventListener('click', async () => {
-
-            const confirmed = await showCustomModal(
-                'Confirm Uninstallation',
-                `Are you sure you want to uninstall ${extensionName}?`,
-                true
-            );
-
-            if (!confirmed) return;
-
-            try {
-                const response = await fetch('/api/extensions/uninstall', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fileName: extension.fileName }),
-                });
-
-                const result = await response.json();
-
-                if (response.ok) {
-                    updateExtensionState(extension.fileName, false);
-
-                    await showCustomModal(
-                        'Uninstallation Successful',
-                        `${extensionName} has been successfully uninstalled.`,
-                        false
-                    );
-                } else {
-
-                    await showCustomModal(
-                        'Uninstallation Failed',
-                        `Uninstallation failed: ${result.error || 'Unknown error.'}`,
-                        false
-                    );
-                }
-            } catch (error) {
-
-                await showCustomModal(
-                    'Uninstallation Failed',
-                    `Network error during uninstallation.`,
-                    false
-                );
-            }
-        });
-    }
-
-    extensionsGrid.appendChild(card);
+    return card;
 }

-async function getInstalledExtensions() {
-    console.log(`Fetching installed extensions from: ${INSTALLED_EXTENSIONS_API}`);
+function showModal(title, message, showConfirm = false, onConfirm = null) {
+    modalTitle.innerText = title;
+    modalMessage.innerText = message;
+    if (showConfirm) {
+        modalConfirmBtn.classList.remove('hidden');
+        modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
+    } else {
+        modalConfirmBtn.classList.add('hidden');
+    }
+    modalCloseBtn.onclick = hideModal;
+    modal.classList.remove('hidden');
+}

+function hideModal() { modal.classList.add('hidden'); }
+
+async function handleInstall(ext) {
    try {
-        const response = await fetch(INSTALLED_EXTENSIONS_API);
-
-        if (!response.ok) {
-            console.error(`Error fetching installed extensions. Status: ${response.status}`);
-            return new Set();
+        const res = await fetch('/api/extensions/install', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url: ext.entry })
+        });
+        if (res.ok) {
+            installedExtensions.push(ext.id.toLowerCase());
+            renderGroupedView();
+            window.NotificationUtils.success(`${ext.name} installed!`);
        }
-
-        const data = await response.json();
-
-        if (!data.extensions || !Array.isArray(data.extensions)) {
-            console.error("Invalid response format from /api/extensions: 'extensions' array missing or incorrect.");
-            return new Set();
-        }
-
-        const installedFileNames = data.extensions
-            .map(name => `${name.toLowerCase()}.js`);
-
-        return new Set(installedFileNames);
-
-    } catch (error) {
-        console.error('Network or JSON parsing error during fetch of installed extensions:', error);
-        return new Set();
-    }
+    } catch (e) { window.NotificationUtils.error('Install failed.'); }
 }

-function filterAndRenderExtensions(filterType) {
-    extensionsGrid.innerHTML = '';
-
-    if (!allExtensionsData || allExtensionsData.length === 0) {
-        console.log('No extension data to filter.');
-        return;
-    }
-
-    const filteredExtensions = allExtensionsData.filter(ext =>
-        filterType === 'All' || ext.type === filterType || (ext.isLocal && filterType === 'Local')
-    );
-
-    filteredExtensions.forEach(ext => {
-        renderExtensionCard(ext, ext.isInstalled, ext.isLocal);
-    });
-
-    if (filteredExtensions.length === 0) {
-        extensionsGrid.innerHTML = `<p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary);">No extensions found for the selected filter (${filterType}).</p>`;
-    }
+function promptUninstall(ext) {
+    showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
 }

-async function loadMarketplace() {
-    extensionsGrid.innerHTML = '';
-
-    for (let i = 0; i < 6; i++) {
-        extensionsGrid.innerHTML += `
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon skeleton" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button skeleton" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>`;
-    }
-
+async function handleUninstall(ext) {
    try {
-
-        const [availableExtensionsRaw, installedExtensionsSet] = await Promise.all([
-            fetch(API_URL_BASE).then(res => {
-                if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
-                return res.json();
-            }),
-            getInstalledExtensions()
-        ]);
-
-        const availableExtensionsJs = availableExtensionsRaw.filter(ext => ext.type === 'file' && ext.name.endsWith('.js'));
-        const detailPromises = [];
-
-        const marketplaceFileNames = new Set(availableExtensionsJs.map(ext => ext.name.toLowerCase()));
-
-        for (const ext of availableExtensionsJs) {
-
-            const downloadUrl = getRawUrl(ext.name);
-
-            const detailsPromise = getExtensionDetails(downloadUrl).then(details => ({
-                ...ext,
-                ...details,
-                fileName: ext.name,
-
-                isInstalled: installedExtensionsSet.has(ext.name.toLowerCase()),
-                isLocal: false,
-            }));
-            detailPromises.push(detailsPromise);
-        }
-
-        const extensionsWithDetails = await Promise.all(detailPromises);
-
-        installedExtensionsSet.forEach(installedName => {
-
-            if (!marketplaceFileNames.has(installedName)) {
-
-                const localExt = {
-                    name: formatExtensionName(installedName),
-                    fileName: installedName,
-                    type: 'Local',
-                    isInstalled: true,
-                    isLocal: true,
-                    baseUrl: 'Local Install',
-                };
-                extensionsWithDetails.push(localExt);
-            }
+        const res = await fetch('/api/extensions/uninstall', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fileName: ext.id + '.js' })
        });
-
-        extensionsWithDetails.sort((a, b) => {
-            if (a.isInstalled !== b.isInstalled) {
-                return b.isInstalled - a.isInstalled;
-
-            }
-
-            const nameA = a.name || '';
-            const nameB = b.name || '';
-
-            return nameA.localeCompare(nameB);
-
-        });
-
-        allExtensionsData = extensionsWithDetails;
-
-        if (filterSelect) {
-            filterSelect.addEventListener('change', (event) => {
-                filterAndRenderExtensions(event.target.value);
-            });
+        if (res.ok) {
+            installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
+            renderGroupedView();
+            window.NotificationUtils.info(`${ext.name} uninstalled.`);
        }
-
-        filterAndRenderExtensions('All');
-
-    } catch (error) {
-        console.error('Error loading the marketplace:', error);
-        extensionsGrid.innerHTML = `
-            <div style="grid-column: 1 / -1; color: #dc2626; text-align: center; padding: 2rem; background: rgba(220,38,38,0.1); border-radius: 12px; margin-top: 1rem;">
-                🚨 Error loading extensions.
-                <p>Could not connect to the extension repository or local endpoint. Detail: ${error.message}</p>
-            </div>
-        `;
-        allExtensionsData = [];
-    }
+    } catch (e) { window.NotificationUtils.error('Uninstall failed.'); }
 }

-customModal.addEventListener('click', (e) => {
-    if (e.target === customModal || e.target.tagName === 'BUTTON') {
-        customModal.classList.add('hidden');
-    }
-});
+function showSkeletons() {
+    marketplaceContent.innerHTML = `
+        <div class="marketplace-grid">
+            ${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
+        </div>
+    `;
+}

 document.addEventListener('DOMContentLoaded', loadMarketplace);
-
-window.addEventListener('scroll', () => {
-    const navbar = document.getElementById('navbar');
-    if (window.scrollY > 0) {
-        navbar.classList.add('scrolled');
-    } else {
-        navbar.classList.remove('scrolled');
-    }
-});
--- a/docker/src/scripts/rpc-inapp.js
+++ b/docker/src/scripts/rpc-inapp.js
@@ -1,9 +0,0 @@
-fetch("/api/rpc", {
-    method: "POST",
-    headers: {"Content-Type": "application/json"},
-    body: JSON.stringify({
-        details: "Browsing",
-        state: `In App`,
-        mode: "idle"
-    })
-});
--- a/docker/src/scripts/titlebar.js
+++ b/docker/src/scripts/titlebar.js
@@ -1,18 +0,0 @@
-if (window.electronAPI?.isElectron) {
-    document.documentElement.classList.add("electron");
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-    document.documentElement.style.visibility = "visible";
-    if (!window.electronAPI?.isElectron) return;
-    document.body.classList.add("electron");
-
-    const titlebar = document.getElementById("titlebar");
-    if (!titlebar) return;
-
-    titlebar.style.display = "flex";
-
-    titlebar.querySelector(".min").onclick = () => window.electronAPI.win.minimize();
-    titlebar.querySelector(".max").onclick = () => window.electronAPI.win.maximize();
-    titlebar.querySelector(".close").onclick = () => window.electronAPI.win.close();
-});
--- a/docker/src/shared/extensions.js
+++ b/docker/src/shared/extensions.js
@@ -46,7 +46,6 @@ async function loadExtensions() {
    }
 }

-
 async function loadExtension(fileName) {
    const homeDir = os.homedir();
    const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
@@ -77,6 +76,7 @@ async function loadExtension(fileName) {
        }

        const name = instance.constructor.name;
+        instance.__fileName = fileName;
        instance.scrape = scrape;
        instance.cheerio = cheerio;
        extensions.set(name, instance);
@@ -114,6 +114,14 @@ async function saveExtensionFile(fileName, downloadUrl) {
            file.on('finish', async () => {
                file.close(async () => {
                    try {
+                        const extName = fileName.replace('.js', '');
+
+                        for (const key of extensions.keys()) {
+                            if (key.toLowerCase() === extName.toLowerCase()) {
+                                extensions.delete(key);
+                                break;
+                            }
+                        }
                        await loadExtension(fileName);
                        resolve();
                    } catch (err) {
--- a/docker/tsconfig.json
+++ b/docker/tsconfig.json
@@ -5,7 +5,7 @@
    "allowJs": true,
    "checkJs": false,
    "strict": true,
-    "outDir": "electron",
+    "outDir": "dist",
    "rootDir": "src",
    "esModuleInterop": true,
    "skipLibCheck": true
--- a/docker/views/anime/anime.html
+++ b/docker/views/anime/anime.html
@@ -17,26 +17,8 @@
            rel="stylesheet"
            href="/views/css/components/updateNotifier.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>
-
        <div class="modal-overlay" id="desc-modal">
            <div class="modal-content">
                <button class="modal-close" onclick="closeModal()">✕</button>
@@ -350,7 +332,6 @@
        </div>

        <script src="/src/scripts/updateNotifier.js"></script>
-        <script src="/src/scripts/rpc-inapp.js"></script>
        <script src="/src/scripts/auth-guard.js"></script>

        <script src="/src/scripts/utils/auth-utils.js"></script>
--- a/docker/views/anime/animes.html
+++ b/docker/views/anime/animes.html
@@ -9,22 +9,9 @@
    <link rel="stylesheet" href="/views/css/components/hero.css">
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body >
-<div id="titlebar"><div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
-
 <nav class="navbar" id="navbar">
    <a href="#" class="nav-brand">
        <div class="brand-icon">
@@ -259,7 +246,6 @@
 <script src="/src/scripts/utils/youtube-player-utils.js"></script>
 <script src="/src/scripts/anime/animes.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/anime/watch.html
+++ b/docker/views/anime/watch.html
@@ -11,21 +11,8 @@
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
    <link rel="icon" href="/public/assets/waifuboards.ico">
-    <link rel="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>
-

 <header class="top-bar">
    <a href="#" id="back-link" class="back-btn">
--- a/docker/views/books/book.html
+++ b/docker/views/books/book.html
@@ -10,20 +10,8 @@
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/books/book.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <div class="modal-overlay" id="add-list-modal">
    <div class="modal-content">
@@ -204,7 +192,6 @@
 </div>

 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>

 <script src="/src/scripts/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
--- a/docker/views/books/books.html
+++ b/docker/views/books/books.html
@@ -7,23 +7,11 @@
    <link rel="stylesheet" href="/views/css/globals.css">
    <link rel="stylesheet" href="/views/css/components/navbar.css">
    <link rel="stylesheet" href="/views/css/components/hero.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
-    <script src="/src/scripts/titlebar.js"></script>
 </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">
@@ -228,7 +216,6 @@
 <script src="/src/scripts/books/books.js"></script>

 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/books/read.html
+++ b/docker/views/books/read.html
@@ -8,20 +8,8 @@
    <link rel="stylesheet" href="/views/css/books/reader.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">
-    <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">
--- a/docker/views/css/components/titlebar.css
+++ b/docker/views/css/components/titlebar.css
@@ -1,195 +0,0 @@
-:root {
-    --titlebar-height: 40px;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html {
-    background: #09090b;
-    visibility: hidden;
-    scrollbar-gutter: stable;
-}
-
-html.electron {
-    margin: 0;
-    box-sizing: border-box;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-html.electron .navbar,
-html.electron .top-bar,
-html.electron .panel-header {
-    top: var(--titlebar-height) !important;
-}
-
-html.electron .panel-content {
-    margin-top: 2rem;
-}
-
-html.electron .calendar-wrapper{
-    margin-top: 4rem;
-}
-
-html.electron .back-btn {
-    top: 55px !important;
-}
-
-#back-link {
-    margin-top: 55px !important;
-}
-
-#titlebar {
-    display: none;
-    height: var(--titlebar-height);
-    background: rgba(9, 9, 11, 0.95);
-    color: white;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 12px;
-    -webkit-app-region: drag;
-    user-select: none;
-    font-family: "Inter", system-ui, sans-serif;
-    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    z-index: 999999;
-    backdrop-filter: blur(12px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.title-left {
-    display: flex;
-    align-items: center !important;
-    gap: 10px;
-}
-
-#titlebar .app-icon {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    background: rgba(139, 92, 246, 0.15);
-    border: 1px solid rgba(139, 92, 246, 0.3);
-    padding: 3px;
-}
-
-#titlebar .app-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
-.app-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.9);
-    letter-spacing: -0.2px;
-}
-
-.title-right {
-    display: flex;
-    height: 100%;
-    gap: 1px;
-}
-
-.title-right button {
-    -webkit-app-region: no-drag;
-    border: none;
-    background: transparent;
-    color: rgba(255, 255, 255, 0.7);
-    width: 46px;
-    height: 100%;
-    cursor: pointer;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-}
-
-.title-right button svg {
-    width: 16px;
-    height: 16px;
-    transition: transform 0.2s;
-}
-
-.title-right button:hover {
-    color: white;
-}
-
-.title-right button:active {
-    transform: scale(0.95);
-}
-
-.title-right .min:hover {
-    background: rgba(139, 92, 246, 0.2);
-}
-
-.title-right .max:hover {
-    background: rgba(34, 197, 94, 0.2);
-}
-
-.title-right .close:hover {
-    background: #e81123;
-    color: white;
-}
-
-.title-right button:hover svg {
-    transform: scale(1.1);
-}
-
-html.electron::-webkit-scrollbar {
-    width: 12px;
-    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 {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-right: 12px;
-}
-
-.user-box img {
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.user-box span {
-    font-size: 13px;
-    opacity: 0.9;
-}
-
-.hidden {
-    display: none;
-}
--- a/docker/views/css/globals.css
+++ b/docker/views/css/globals.css
@@ -300,21 +300,6 @@ body {
    transform: scale(1.05);
 }

-Here is the CSS you need to add to the very bottom of your file.
-
-I have targeted the specific classes you provided (.card, .section, .back-btn) to make them touch-friendly, and I added a specific section to fix the "Who's exploring?" screen from your screenshot.
-1. First: The HTML Tag (Crucial)
-
-Ensure this is in your HTML <head> or the CSS below will not work:
-HTML
-
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-2. The CSS Update
-
-Copy and paste this entire block to the bottom of your CSS file:
-CSS
-
@media (max-width: 768px) {
    :root {
        --nav-height: 60px;
--- a/docker/views/css/marketplace.css
+++ b/docker/views/css/marketplace.css
@@ -25,7 +25,7 @@
    border-radius: 999px;
    background: var(--color-bg-elevated-hover);
    color: var(--color-text-primary);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255,255,255,0.1);
    appearance: none;
    font-weight: 600;

@@ -51,14 +51,14 @@

 .extension-card {
    background: var(--bg-surface);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    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);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    min-height: 140px;
    position: relative;
    overflow: hidden;
@@ -67,7 +67,7 @@
 .extension-card:hover {
    background: var(--color-bg-elevated-hover);
    transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
 }

 .card-content-wrapper {
@@ -128,10 +128,7 @@
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
-    transition:
-        background 0.2s,
-        transform 0.2s,
-        box-shadow 0.2s;
+    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    margin-top: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
@@ -179,7 +176,7 @@
    border-radius: 8px;
    margin-bottom: 0.75rem;

-    border: 2px solid rgba(255, 255, 255, 0.05);
+    border: 2px solid rgba(255,255,255,0.05);
 }
 .skeleton-text.title-skeleton {
    height: 1.1em;
@@ -231,14 +228,10 @@
    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);
+    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;
+    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease-in-out;
    opacity: 0;
 }

@@ -252,7 +245,7 @@
    font-weight: 800;
    margin-top: 0;
    color: var(--color-primary);
-    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 2px solid rgba(255,255,255,0.05);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
 }
@@ -271,15 +264,14 @@
 }

 .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;
+    transition: background 0.2s, transform 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
 }
@@ -302,102 +294,100 @@
    transform: scale(1.02);
 }

-@media (max-width: 768px) {
-    .section-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 1rem;
-    }
-
-    .filter-controls {
-        width: 100%;
-        overflow-x: auto;
-        white-space: nowrap;
-        padding-bottom: 0.5rem;
-
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-    }
-
-    .filter-controls::-webkit-scrollbar {
-        display: none;
-    }
-
-    .filter-select {
-        flex-shrink: 0;
-        padding: 0.6rem 2.2rem 0.6rem 1rem;
-        font-size: 0.9rem;
-    }
-
-    .marketplace-grid {
-        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-        gap: 0.75rem;
-    }
-
-    .extension-card {
-        padding: 0.75rem;
-        min-height: auto;
-    }
-
-    .extension-icon {
-        width: 40px;
-        height: 40px;
-    }
-
-    .extension-name {
-        font-size: 1rem;
-    }
-
-    .extension-status-badge {
-        font-size: 0.65rem;
-    }
-
-    .extension-card:hover {
-        transform: none;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-    }
-
-    .extension-action-button {
-        padding: 0.5rem;
-        font-size: 0.8rem;
-    }
-
-    .modal-content {
-        width: 95%;
-        max-width: none;
-        padding: 1.5rem;
-
-        position: absolute;
-        bottom: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        transform: translateY(100%);
-        margin-bottom: 0;
-    }
-
-    .modal-overlay:not(.hidden) .modal-content {
-        transform: translateY(0);
-    }
-
-    #modalTitle {
-        font-size: 1.3rem;
-        margin-bottom: 1rem;
-    }
-
-    #modalMessage {
-        font-size: 0.95rem;
-        margin-bottom: 1.5rem;
-    }
-
-    .modal-actions {
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-
-    .modal-button {
-        width: 100%;
-        padding: 0.8rem;
-        justify-content: center;
-        display: flex;
-    }
+.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;
+    color: var(--color-text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-transform: capitalize;
+}
+
+.marketplace-section-title::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 20px;
+    background: var(--color-primary);
+    border-radius: 2px;
+}
+
+.category-group {
+    margin-bottom: 3rem;
+}
+
+.hidden {
+    display: none !important;
 }
--- a/docker/views/gallery/gallery.html
+++ b/docker/views/gallery/gallery.html
@@ -12,20 +12,8 @@
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <nav class="navbar" id="navbar">
    <a href="#" class="nav-brand">
@@ -131,7 +119,6 @@

 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/gallery/gallery.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/gallery/image.html
+++ b/docker/views/gallery/image.html
@@ -7,24 +7,12 @@
  <link rel="stylesheet" href="/views/css/components/navbar.css">
  <link rel="stylesheet" href="/views/css/globals.css">
  <link rel="stylesheet" href="/views/css/gallery/gallery.css">
-  <link rel="stylesheet" href="/views/css/components/titlebar.css">
  <link rel="stylesheet" href="/views/css/gallery/image.css">
  <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-  <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-  <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-  <span class="app-title">WaifuBoard</span>
-</div>
-  <div class="title-right">
-    <button class="min">—</button>
-    <button class="max">🗖</button>
-    <button class="close">✕</button>
-  </div>
-</div>

 <nav class="navbar" id="navbar">
  <a href="#" class="nav-brand">
@@ -116,7 +104,6 @@

 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/gallery/image.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/list.html
+++ b/docker/views/list.html
@@ -10,20 +10,8 @@
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/list.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
-    <link rel="stylesheet" href="/views/css/components/titlebar.css">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <nav class="navbar" id="navbar">
    <a href="#" class="nav-brand">
@@ -268,7 +256,6 @@
 </div>

 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 <script src="/src/scripts/utils/auth-utils.js"></script>
 <script src="/src/scripts/utils/notification-utils.js"></script>
--- a/docker/views/marketplace.html
+++ b/docker/views/marketplace.html
@@ -9,20 +9,8 @@
    <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">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>

 <nav class="navbar" id="navbar">
    <a href="#" class="nav-brand">
@@ -36,9 +24,9 @@
        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
+        <button class="nav-button" onclick="window.location.href='/schedule.html'">Schedule</button>
        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button active">Marketplace</button>
+        <button class="nav-button">Marketplace</button>
    </div>

    <div class="nav-right">
@@ -90,47 +78,31 @@

 <main>
    <section class="section">
-
        <header class="section-header">
-            <p class="marketplace-subtitle">Explore, install, and manage all available data source extensions for WaifuBoard.</p>
+            <div class="tabs-container">
+                <button class="tab-button active" data-tab="marketplace">Marketplace</button>
+                <button class="tab-button" data-tab="installed">My Extensions</button>
+            </div>
+
            <div class="filter-controls">
+                <button id="btn-update-all" class="btn-blur hidden" style="margin-right: 10px; width: auto; padding: 0 15px;">
+                    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 Extensions</option>
-                    <option value="Image">Image Boards</option>
-                    <option value="Anime">Anime Boards</option>
-                    <option value="Book">Book Boards</option>
-                    <option value="Local">Local Only</option>
+                    <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 class="marketplace-grid" id="extensions-grid">
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
-            <div class="extension-card skeleton grid-item">
-                <div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
-                <div class="card-content-wrapper">
-                    <div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
-                    <div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
-                </div>
-                <div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
-            </div>
+
+        <div id="marketplace-content">
        </div>
    </section>
+
    <div id="customModal" class="modal-overlay hidden">
        <div class="modal-content">
            <h3 id="modalTitle"></h3>
@@ -143,22 +115,9 @@
    </div>
 </main>

-<div id="updateToast" class="hidden">
-    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
-        Click To Download
-    </a>
-</div>
-
+<script src="/src/scripts/utils/notification-utils.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
-<script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/marketplace.js"></script>
-<script src="/src/scripts/titlebar.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/schedule.html
+++ b/docker/views/schedule.html
@@ -12,21 +12,8 @@
    <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">
-    <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"> <div class="title-left">
-    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
-    <span class="app-title">WaifuBoard</span>
-</div>
-    <div class="title-right">
-        <button class="min">—</button>
-        <button class="max">🗖</button>
-        <button class="close">✕</button>
-    </div>
-</div>
-
    <div class="ambient-bg" id="ambientBg"></div>

 <nav class="navbar" id="navbar">
@@ -152,7 +139,6 @@

    <script src="/src/scripts/updateNotifier.js"></script>
    <script src="/src/scripts/schedule/schedule.js"></script>
-    <script src="/src/scripts/rpc-inapp.js"></script>
    <script src="/src/scripts/auth-guard.js"></script>
 </body>
 </html>
--- a/docker/views/users.html
+++ b/docker/views/users.html
@@ -8,7 +8,6 @@
            rel="stylesheet"
            href="/views/css/components/updateNotifier.css"
        />
-        <link rel="stylesheet" href="/views/css/components/titlebar.css" />
        <link rel="stylesheet" href="/views/css/users.css" />
        <link
            rel="icon"
@@ -16,25 +15,8 @@
            type="image/x-icon"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <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>
Author	SHA1	Message	Date
lenafx	cbacf2ea07	removed electron stuff from docker ver	2025-12-20 00:16:01 +01:00
lenafx	90231f6608	added updateall btn to marketplace	2025-12-20 00:13:10 +01:00
lenafx	a26f03f024	new marketplace page	2025-12-19 23:12:53 +01:00
lenafx	16cf6b3d4f	now on my list page, source dropdown only shows anime and book extensions	2025-12-19 20:01:08 +01:00
lenafx	4811c4535a	removed electron stuff from docker ver	2025-12-19 19:49:07 +01:00
lenafx	d6a99bfeb4	animes & books page data is fetched auto now	2025-12-19 19:23:29 +01:00