user icon to navbar

main.js

@@ -24,6 +24,7 @@ function createWindow() {
 
     win.setMenu(null);
     win.loadURL('http://localhost:54322');
+    win.webContents.openDevTools();
 }
 
 ipcMain.on("win:minimize", () => win.minimize());

src/api/user/user.controller.ts

@@ -1,15 +1,37 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
 import * as userService from './user.service';
+import {queryOne} from '../../shared/database';
 import jwt from "jsonwebtoken";
 
-interface UserIdBody { userId: number; }
 interface UserIdParams { id: string; }
 interface CreateUserBody { username: string; profilePictureUrl?: string; }
 interface UpdateUserBody { username?: string; profilePictureUrl?: string | null; password?: string; }
-interface ConnectBody { accessToken: string; anilistUserId: number; expiresIn: number; }
 
 interface DBRunResult { changes: number; lastID: number; }
 
+export async function getMe(req: any, reply: any) {
+    const userId = req.user?.id;
+
+    if (!userId) {
+        return reply.code(401).send({ error: "Unauthorized" });
+    }
+
+    const user = await queryOne(
+        `SELECT username, profile_picture_url FROM User WHERE id = ?`,
+        [userId],
+        'userdata' // ✅ DB correcta
+    );
+
+    if (!user) {
+        return reply.code(404).send({ error: "User not found" });
+    }
+
+    return reply.send({
+        username: user.username,
+        avatar: user.profile_picture_url
+    });
+}
+
 export async function login(req: FastifyRequest, reply: FastifyReply) {
     const { userId } = req.body as { userId: number };
 

src/api/user/user.routes.ts

@@ -2,6 +2,7 @@ import { FastifyInstance } from 'fastify';
 import * as controller from './user.controller';
 
 async function userRoutes(fastify: FastifyInstance) {
+    fastify.get('/me',controller.getMe);
     fastify.post("/login", controller.login);
     fastify.get('/users', controller.getAllUsers);
     fastify.post('/users', controller.createUser);

src/scripts/auth-guard.js

@@ -1,7 +1,81 @@
-(function () {
+;(() => {
-    const token = localStorage.getItem("token");
+    const token = localStorage.getItem("token")
 
     if (!token && window.location.pathname !== "/") {
-        window.location.href = "/";
+        window.location.href = "/"
     }
-})();
+})()
+
+async function loadMeUI() {
+    const token = localStorage.getItem("token")
+    if (!token) return
+
+    try {
+        const res = await fetch("/api/me", {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        })
+
+        if (!res.ok) return
+
+        const user = await res.json()
+
+        const navUser = document.getElementById("nav-user")
+        const navUsername = document.getElementById("nav-username")
+        const navAvatar = document.getElementById("nav-avatar")
+        const dropdownAvatar = document.getElementById("dropdown-avatar")
+
+        if (!navUser || !navUsername || !navAvatar) return
+
+        navUser.style.display = "flex"
+        navUsername.textContent = user.username
+
+        const avatarUrl = user.avatar || "/public/assets/default-avatar.png"
+        navAvatar.src = avatarUrl
+        if (dropdownAvatar) {
+            dropdownAvatar.src = avatarUrl
+        }
+
+        setupDropdown()
+    } catch (e) {
+        console.error("Failed to load user UI:", e)
+    }
+}
+
+function setupDropdown() {
+    const userAvatarBtn = document.querySelector(".user-avatar-btn")
+    const navDropdown = document.getElementById("nav-dropdown")
+    const navLogout = document.getElementById("nav-logout")
+
+    if (!userAvatarBtn || !navDropdown || !navLogout) return
+
+    userAvatarBtn.addEventListener("click", (e) => {
+        e.stopPropagation()
+        navDropdown.classList.toggle("active")
+    })
+
+    document.addEventListener("click", (e) => {
+        if (!navDropdown.contains(e.target)) {
+            navDropdown.classList.remove("active")
+        }
+    })
+
+    navDropdown.addEventListener("click", (e) => {
+        e.stopPropagation()
+    })
+
+    navLogout.addEventListener("click", () => {
+        localStorage.removeItem("token")
+        window.location.href = "/"
+    })
+
+    const dropdownLinks = navDropdown.querySelectorAll("a.dropdown-item")
+    dropdownLinks.forEach((link) => {
+        link.addEventListener("click", () => {
+            navDropdown.classList.remove("active")
+        })
+    })
+}
+
+loadMeUI()

views/anime/animes.html

@@ -23,7 +23,7 @@
 </div>
 
 <nav class="navbar" id="navbar">
-    <a href="/" class="nav-brand">
+    <a href="#" class="nav-brand">
         <div class="brand-icon">
             <img src="/public/assets/waifuboards.ico" alt="WF Logo">
         </div>
@@ -39,18 +39,55 @@
         <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
     </div>
 
-    <div class="search-wrapper">
+    <!-- Mejorado el contenedor de usuario con dropdown más completo -->
-        <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+    <div class="nav-right">
-        <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
+        <div class="search-wrapper">
+            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <circle cx="11" cy="11" r="8"/>
+                <path d="M21 21l-4.35-4.35"/>
+            </svg>
+            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
+            <div class="search-results" id="search-results"></div>
+        </div>
 
-        <div class="search-results" id="search-results"></div>
+        <div class="nav-user" id="nav-user" style="display:none;">
+            <div class="user-avatar-btn">
+                <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
+                <div class="online-indicator"></div>
+            </div>
+
+            <div class="nav-dropdown" id="nav-dropdown">
+                <div class="dropdown-header">
+                    <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
+                    <div class="dropdown-user-info">
+                        <div class="dropdown-username" id="nav-username"></div>
+                    </div>
+                </div>
+
+                <a href="/my-list" class="dropdown-item">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    <span>My List</span>
+                </a>
+                <button class="dropdown-item logout-item" id="nav-logout">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                        <polyline points="16 17 21 12 16 7"/>
+                        <line x1="21" y1="12" x2="9" y2="12"/>
+                    </svg>
+                    <span>Logout</span>
+                </button>
+            </div>
+        </div>
     </div>
 </nav>
 
-
 <div class="hero-wrapper">
     <div class="hero-background">
-        <img id="hero-bg-media" src="" alt="">
+        <img id="hero-bg-media" src="/placeholder.svg" alt="">
         <div id="player" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120vw; height: 120vh; pointer-events: none; opacity: 0; transition: opacity 1s;"></div>
     </div>
     <div class="hero-vignette"></div>
@@ -58,7 +95,7 @@
     <div class="hero-content">
         <div class="hero-poster-card">
             <div class="skeleton poster-skeleton" id="hero-poster-skeleton"></div>
-            <img id="hero-poster" src="" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
+            <img id="hero-poster" src="/placeholder.svg" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
         </div>
         <div class="hero-text">
             <div id="hero-loading-ui">

views/books/books.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WaifuBoard Books</title>
+    <link rel="stylesheet" href="/views/css/anime/home.css">
     <link rel="stylesheet" href="/views/css/titlebar.css">
     <link rel="stylesheet" href="/views/css/books/books.css">
     <script src="/src/scripts/books/books.js" defer></script>
@@ -24,7 +25,7 @@
 </div>
 
 <nav class="navbar" id="navbar">
-    <a href="/" class="nav-brand">
+    <a href="#" class="nav-brand">
         <div class="brand-icon">
             <img src="/public/assets/waifuboards.ico" alt="WF Logo">
         </div>
@@ -40,10 +41,45 @@
         <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
     </div>
 
-    <div class="search-wrapper">
+    <div class="nav-right">
-        <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        <div class="search-wrapper">
-        <input type="text" class="search-input" id="search-input" placeholder="Search manga..." autocomplete="off">
+            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-        <div class="search-results" id="search-results"></div>
+            <input type="text" class="search-input" id="search-input" placeholder="Search books..." autocomplete="off">
+            <div class="search-results" id="search-results"></div>
+        </div>
+
+        <div class="nav-user" id="nav-user" style="display:none;">
+            <div class="user-avatar-btn">
+                <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
+                <div class="online-indicator"></div>
+            </div>
+
+            <div class="nav-dropdown" id="nav-dropdown">
+                <div class="dropdown-header">
+                    <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
+                    <div class="dropdown-user-info">
+                        <div class="dropdown-username" id="nav-username"></div>
+                    </div>
+                </div>
+
+                <a href="/my-list" class="dropdown-item">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    <span>My List</span>
+                </a>
+                <button class="dropdown-item logout-item" id="nav-logout">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                        <polyline points="16 17 21 12 16 7"/>
+                        <line x1="21" y1="12" x2="9" y2="12"/>
+                    </svg>
+                    <span>Logout</span>
+                </button>
+            </div>
+        </div>
     </div>
 </nav>
 

views/css/anime/home.css

@@ -11,13 +11,16 @@
     --nav-height: 80px;
 }
 
-* { box-sizing: border-box; outline: none; }
+* {
+    box-sizing: border-box;
+    outline: none;
+}
 
 body {
     margin: 0;
     background-color: var(--bg-base);
     color: var(--text-primary);
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: "Inter", system-ui, sans-serif;
     overflow-x: hidden;
 }
 
@@ -31,14 +34,14 @@ body {
     align-items: center;
     justify-content: space-between;
     padding: 0 3rem;
-    background: linear-gradient(to bottom, rgba(9,9,11,0.9) 0%, rgba(9,9,11,0) 100%);
+    background: linear-gradient(to bottom, rgba(9, 9, 11, 0.9) 0%, rgba(9, 9, 11, 0) 100%);
     transition: background 0.3s;
 }
 
 .navbar.scrolled {
     background: rgba(9, 9, 11, 0.85);
     backdrop-filter: blur(12px);
-    border-bottom: 1px solid rgba(255,255,255,0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .nav-brand {
@@ -73,10 +76,10 @@ body {
 .nav-center {
     display: flex;
     gap: 0.5rem;
-    background: rgba(255,255,255,0.03);
+    background: rgba(255, 255, 255, 0.03);
     padding: 0.4rem;
     border-radius: 999px;
-    border: 1px solid rgba(255,255,255,0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .nav-button {
@@ -90,13 +93,15 @@ body {
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.nav-button:hover { color: white; }
+.nav-button:hover {
+    color: white;
+}
 .nav-button.active {
     background: rgba(255, 255, 255, 0.1);
     color: white;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(8px);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .search-wrapper {
@@ -105,8 +110,8 @@ body {
 }
 .search-input {
     width: 100%;
-    background: rgba(255,255,255,0.05);
+    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 0.7rem 1rem 0.7rem 2.5rem;
     border-radius: 99px;
     color: white;
@@ -114,7 +119,7 @@ body {
     transition: 0.2s;
 }
 .search-input:focus {
-    background: rgba(255,255,255,0.1);
+    background: rgba(255, 255, 255, 0.1);
     border-color: var(--accent);
     box-shadow: 0 0 15px var(--accent-glow);
 }
@@ -134,90 +139,243 @@ body {
     overflow: hidden;
 }
 
-.hero-background { position: absolute; inset: 0; z-index: 0; }
+.hero-background {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+}
 
 #hero-bg-media {
-    width: 100%; height: 100%; object-fit: cover; opacity: 0.6;
+    width: 100%;
-    transform: scale(1.1); transition: opacity 1s ease;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.6;
+    transform: scale(1.1);
+    transition: opacity 1s ease;
 }
 
 .hero-vignette {
-    position: absolute; inset: 0;
+    position: absolute;
+    inset: 0;
     background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%),
     linear-gradient(to top, var(--bg-base) 10%, transparent 60%);
     z-index: 1;
 }
 
 .hero-content {
-    position: relative; z-index: 10; height: 100%;
+    position: relative;
-    max-width: 1600px; margin: 0 auto; padding: 0 3rem;
+    z-index: 10;
-    display: flex; align-items: flex-end; padding-bottom: 6rem; gap: 3rem;
+    height: 100%;
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 0 3rem;
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: 6rem;
+    gap: 3rem;
 }
 
 .hero-poster-card {
-    width: 260px; height: 380px; border-radius: var(--radius-lg);
+    width: 260px;
-    overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
+    height: 380px;
-    border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    flex-shrink: 0;
     background: #1a1a1a;
 }
-.hero-poster-card img { width: 100%; height: 100%; object-fit: cover; }
+.hero-poster-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
 
-.hero-text { flex: 1; max-width: 800px; margin-bottom: 1rem; animation: fadeInUp 0.8s ease; }
+.hero-text {
+    flex: 1;
+    max-width: 800px;
+    margin-bottom: 1rem;
+    animation: fadeInUp 0.8s ease;
+}
 
 .hero-title {
-    font-size: 4rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0;
+    font-size: 4rem;
-    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
+    font-weight: 900;
-    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    line-height: 1.1;
+    margin: 0 0 1rem 0;
+    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
 
-.hero-meta { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; font-size: 1.1rem; font-weight: 600; }
+.hero-meta {
-.score-badge { color: #22c55e; background: rgba(34, 197, 94, 0.1); padding: 0.2rem 0.8rem; border-radius: 6px; border: 1px solid rgba(34, 197, 94, 0.2); }
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+.score-badge {
+    color: #22c55e;
+    background: rgba(34, 197, 94, 0.1);
+    padding: 0.2rem 0.8rem;
+    border-radius: 6px;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+}
 
 .hero-desc {
-    font-size: 1.1rem; line-height: 1.6; color: #e4e4e7; margin-bottom: 2rem;
+    font-size: 1.1rem;
-    max-width: 650px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+    line-height: 1.6;
-    overflow: hidden; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    color: #e4e4e7;
+    margin-bottom: 2rem;
+    max-width: 650px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
-.hero-buttons { display: flex; gap: 1rem; }
+.hero-buttons {
+    display: flex;
+    gap: 1rem;
+}
 
-.btn-primary, .btn-blur {
+.btn-primary,
-    padding: 1rem 2.5rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
+.btn-blur {
-    border: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
+    padding: 1rem 2.5rem;
+    border-radius: 999px;
+    font-weight: 700;
+    font-size: 1rem;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     transition: transform 0.2s;
 }
-.btn-primary { background: white; color: black; }
+.btn-primary {
-.btn-primary:hover { transform: scale(1.05); }
+    background: white;
-.btn-blur { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: white; border: 1px solid rgba(255,255,255,0.2); }
+    color: black;
-.btn-blur:hover { background: rgba(255, 255, 255, 0.2); }
+}
+.btn-primary:hover {
+    transform: scale(1.05);
+}
+.btn-blur {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.btn-blur:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
 
-.section { max-width: 1700px; margin: 0 auto; padding: 2rem 3rem; }
+.section {
-.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+    max-width: 1700px;
-.section-title { font-size: 1.8rem; font-weight: 800; }
+    margin: 0 auto;
+    padding: 2rem 3rem;
+}
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+.section-title {
+    font-size: 1.8rem;
+    font-weight: 800;
+}
 
-.carousel-wrapper { position: relative; }
+.carousel-wrapper {
-.carousel { display: flex; gap: 1.25rem; overflow-x: auto; padding: 1rem 0; scroll-behavior: smooth; scrollbar-width: none; }
+    position: relative;
-.carousel::-webkit-scrollbar { display: none; }
+}
+.carousel {
+    display: flex;
+    gap: 1.25rem;
+    overflow-x: auto;
+    padding: 1rem 0;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+}
+.carousel::-webkit-scrollbar {
+    display: none;
+}
 
 .scroll-btn {
-    position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px;
+    position: absolute;
-    border-radius: 50%; background: rgba(20, 20, 23, 0.9); border: 1px solid rgba(255,255,255,0.1);
+    top: 50%;
-    color: white; z-index: 20; cursor: pointer; display: flex; align-items: center; justify-content: center;
+    transform: translateY(-50%);
-    opacity: 0; transition: 0.3s;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: rgba(20, 20, 23, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    z-index: 20;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: 0.3s;
+}
+.carousel-wrapper:hover .scroll-btn {
+    opacity: 1;
+}
+.scroll-btn:hover {
+    background: var(--accent);
+}
+.scroll-btn.left {
+    left: -25px;
+}
+.scroll-btn.right {
+    right: -25px;
 }
-.carousel-wrapper:hover .scroll-btn { opacity: 1; }
-.scroll-btn:hover { background: var(--accent); }
-.scroll-btn.left { left: -25px; }
-.scroll-btn.right { right: -25px; }
 
-.card { min-width: 220px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
+.card {
-.card:hover { transform: translateY(-8px); }
+    min-width: 220px;
-.card-img-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; position: relative; margin-bottom: 0.8rem; background: #222; }
+    cursor: pointer;
-.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
+    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-.card:hover .card-img-wrap img { transform: scale(1.05); }
+}
+.card:hover {
+    transform: translateY(-8px);
+}
+.card-img-wrap {
+    width: 100%;
+    aspect-ratio: 2 / 3;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    position: relative;
+    margin-bottom: 0.8rem;
+    background: #222;
+}
+.card-img-wrap img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.4s;
+}
+.card:hover .card-img-wrap img {
+    transform: scale(1.05);
+}
 
-.card-content h3 { margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.card-content h3 {
-.card-content p { margin: 4px 0 0 0; font-size: 0.85rem; color: var(--text-secondary); }
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.card-content p {
+    margin: 4px 0 0 0;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
 
 .skeleton {
     background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
@@ -226,12 +384,39 @@ body {
     border-radius: 6px;
     display: inline-block;
 }
-.text-skeleton { height: 1em; width: 70%; margin-bottom: 0.5rem; }
+.text-skeleton {
-.title-skeleton { height: 3em; width: 80%; margin-bottom: 1rem; }
+    height: 1em;
-.poster-skeleton { width: 100%; height: 100%; }
+    width: 70%;
+    margin-bottom: 0.5rem;
+}
+.title-skeleton {
+    height: 3em;
+    width: 80%;
+    margin-bottom: 1rem;
+}
+.poster-skeleton {
+    width: 100%;
+    height: 100%;
+}
 
-@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+@keyframes shimmer {
-@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
 
 .search-wrapper {
     position: relative;
@@ -241,8 +426,8 @@ body {
 
 .search-input {
     width: 100%;
-    background: rgba(255,255,255,0.05);
+    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 0.7rem 1rem 0.7rem 2.5rem;
     border-radius: 99px;
     color: white;
@@ -273,14 +458,14 @@ body {
     right: 0;
     background: rgba(15, 15, 18, 0.95);
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-top: none;
     border-radius: 0 0 12px 12px;
     padding: 0.5rem;
     display: none;
     flex-direction: column;
     gap: 0.25rem;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     max-height: 400px;
     overflow-y: auto;
 }
@@ -302,7 +487,7 @@ body {
 }
 
 .search-item:hover {
-    background: rgba(255,255,255,0.1);
+    background: rgba(255, 255, 255, 0.1);
 }
 
 .search-poster {
@@ -345,6 +530,216 @@ body {
     width: 6px;
 }
 .search-results::-webkit-scrollbar-thumb {
-    background: rgba(255,255,255,0.2);
+    background: rgba(255, 255, 255, 0.2);
     border-radius: 3px;
 }
+
+.nav-right {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+/* Estilos mejorados del dropdown de usuario */
+.nav-user {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.user-avatar-btn {
+    position: relative;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.user-avatar-btn:hover {
+    transform: scale(1.05);
+}
+
+#nav-avatar {
+    width: 44px;
+    height: 44px;
+    object-fit: cover;
+    border-radius: 50%;
+    border: 2px solid var(--accent);
+    background: var(--bg-surface);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 0 0 var(--accent-glow);
+}
+
+.user-avatar-btn:hover #nav-avatar {
+    box-shadow: 0 0 0 4px var(--accent-glow);
+    border-color: #a78bfa;
+}
+
+.online-indicator {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    width: 12px;
+    height: 12px;
+    background: #22c55e;
+    border: 2px solid var(--bg-base);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.6;
+    }
+}
+
+.nav-dropdown {
+    position: absolute;
+    top: calc(100% + 12px);
+    right: 0;
+    background: rgba(18, 18, 21, 0.98);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 16px;
+    padding: 0;
+    min-width: 260px;
+    display: none;
+    flex-direction: column;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1);
+    z-index: 9999;
+    overflow: hidden;
+    animation: dropdownSlide 0.2s ease-out;
+}
+
+@keyframes dropdownSlide {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.nav-dropdown.active {
+    display: flex;
+}
+
+.dropdown-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: rgba(139, 92, 246, 0.08);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.dropdown-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    object-fit: cover;
+    border: 2px solid var(--accent);
+    background: var(--bg-surface);
+}
+
+.dropdown-user-info {
+    flex: 1;
+    overflow: hidden;
+}
+
+.dropdown-username {
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 2px;
+}
+
+.dropdown-status {
+    font-size: 0.75rem;
+    color: #22c55e;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.dropdown-status::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    background: #22c55e;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.dropdown-divider {
+    height: 1px;
+    background: rgba(255, 255, 255, 0.06);
+    margin: 4px 0;
+}
+
+.dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    color: var(--text-primary);
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+    background: transparent;
+    width: 100%;
+    text-align: left;
+    font-family: inherit;
+}
+
+.dropdown-item svg {
+    flex-shrink: 0;
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+}
+
+.dropdown-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: white;
+    padding-left: 20px;
+}
+
+.dropdown-item:hover svg {
+    color: var(--accent);
+    transform: translateX(2px);
+}
+
+.dropdown-item:active {
+    transform: scale(0.98);
+}
+
+.logout-item {
+    color: #ef4444;
+    margin-top: 4px;
+}
+
+.logout-item svg {
+    color: #ef4444;
+}
+
+.logout-item:hover {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+}
+
+.logout-item:hover svg {
+    color: #f87171;
+    transform: translateX(2px);
+}

views/css/titlebar.css

@@ -9,11 +9,16 @@
 html {
     background: #09090b;
     visibility: hidden;
+    /* Agregado scrollbar-gutter para reservar espacio estable */
+    scrollbar-gutter: stable;
 }
 
 html.electron {
     margin: 0;
     box-sizing: border-box;
+    /* Overflow optimizado para evitar desplazamiento horizontal */
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 html.electron .navbar,
@@ -39,12 +44,13 @@ html.electron .back-btn {
     padding: 0 12px;
     -webkit-app-region: drag;
     user-select: none;
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: "Inter", system-ui, sans-serif;
     border-bottom: 1px solid rgba(139, 92, 246, 0.2);
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
+    /* Cambiado a width: 100vw para ocupar todo el viewport sin considerar scrollbar */
+    width: 100vw;
     z-index: 999999;
     backdrop-filter: blur(12px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -133,8 +139,11 @@ html.electron .back-btn {
     transform: scale(1.1);
 }
 
+/* Scrollbar mejorado para no afectar el layout */
 html.electron::-webkit-scrollbar {
     width: 12px;
+    /* Posicionamiento absoluto para overlay */
+    position: absolute;
 }
 
 html.electron::-webkit-scrollbar-track {
@@ -151,3 +160,33 @@ html.electron::-webkit-scrollbar-thumb {
 html.electron::-webkit-scrollbar-thumb:hover {
     background: rgba(139, 92, 246, 0.5);
 }
+
+/* Asegurar que body también maneje el overflow correctamente */
+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;
+}

views/gallery/gallery.html

@@ -27,7 +27,7 @@
 </div>
 
 <nav class="navbar" id="navbar">
-    <a href="/" class="nav-brand">
+    <a href="#" class="nav-brand">
         <div class="brand-icon">
             <img src="/public/assets/waifuboards.ico" alt="WF Logo">
         </div>
@@ -37,19 +37,55 @@
     <div class="nav-center">
         <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
         <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button active" onclick="window.location.href='/gallery'">Gallery</button>
+        <button class="nav-button active">Gallery</button>
         <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-        <button class="nav-button">My List</button>
+        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
         <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
     </div>
 
-    <div class="search-wrapper" style="width: 350px;">
+    <!-- Mejorado el contenedor de usuario con dropdown más completo -->
-        <input type="text" id="main-search-input" class="search-input" placeholder="Search in gallery..." autocomplete="off">
+    <div class="nav-right">
-        <div class="search-results">
+        <div class="search-wrapper" style="width: 350px;">
-            <button id="favorites-toggle-nav" class="fav-toggle-btn" title="Mostrar favoritos" style="margin: 10px; width: auto; font-size: 0.85rem;">
+            <input type="text" id="main-search-input" class="search-input" placeholder="Search in gallery..." autocomplete="off">
-                <i class="far fa-heart"></i>
+            <div class="search-results">
-                <span class="fav-text">Favorites Mode</span>
+                <button id="favorites-toggle-nav" class="fav-toggle-btn" title="Mostrar favoritos" style="margin: 10px; width: auto; font-size: 0.85rem;">
-            </button>
+                    <i class="far fa-heart"></i>
+                    <span class="fav-text">Favorites Mode</span>
+                </button>
+            </div>
+        </div>
+
+        <div class="nav-user" id="nav-user" style="display:none;">
+            <div class="user-avatar-btn">
+                <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
+                <div class="online-indicator"></div>
+            </div>
+
+            <div class="nav-dropdown" id="nav-dropdown">
+                <div class="dropdown-header">
+                    <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
+                    <div class="dropdown-user-info">
+                        <div class="dropdown-username" id="nav-username"></div>
+                    </div>
+                </div>
+
+                <a href="/my-list" class="dropdown-item">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    <span>My List</span>
+                </a>
+                <button class="dropdown-item logout-item" id="nav-logout">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                        <polyline points="16 17 21 12 16 7"/>
+                        <line x1="21" y1="12" x2="9" y2="12"/>
+                    </svg>
+                    <span>Logout</span>
+                </button>
+            </div>
         </div>
     </div>
 </nav>

views/gallery/image.html

@@ -26,7 +26,7 @@
 </div>
 
 <nav class="navbar" id="navbar">
-  <a href="/" class="nav-brand">
+  <a href="#" class="nav-brand">
     <div class="brand-icon">
       <img src="/public/assets/waifuboards.ico" alt="WF Logo">
     </div>
@@ -34,18 +34,54 @@
   </a>
 
   <div class="nav-center">
-    <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
+    <button class="nav-button">Anime</button>
     <button class="nav-button" onclick="window.location.href='/books'">Books</button>
     <button class="nav-button active" onclick="window.location.href='/gallery'">Gallery</button>
     <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-    <button class="nav-button">My List</button>
+    <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
     <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
   </div>
 
-  <div class="search-wrapper" id="global-search-wrapper" style="visibility: hidden;width: 250px;">
+  <!-- Mejorado el contenedor de usuario con dropdown más completo -->
-    <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+  <div class="nav-right">
-    <input type="text" class="search-input" placeholder="Search site..." autocomplete="off">
+    <div class="search-wrapper" id="global-search-wrapper" style="visibility: hidden;width: 250px;">
-    <div class="search-results"></div>
+      <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+      <input type="text" class="search-input" placeholder="Search site..." autocomplete="off">
+      <div class="search-results"></div>
+    </div>
+
+    <div class="nav-user" id="nav-user" style="display:none;">
+      <div class="user-avatar-btn">
+        <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
+        <div class="online-indicator"></div>
+      </div>
+
+      <div class="nav-dropdown" id="nav-dropdown">
+        <div class="dropdown-header">
+          <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
+          <div class="dropdown-user-info">
+            <div class="dropdown-username" id="nav-username"></div>
+          </div>
+        </div>
+
+        <a href="/my-list" class="dropdown-item">
+          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+            <polyline points="17 21 17 13 7 13 7 21"/>
+            <polyline points="7 3 7 8 15 8"/>
+          </svg>
+          <span>My List</span>
+        </a>
+        <button class="dropdown-item logout-item" id="nav-logout">
+          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+            <polyline points="16 17 21 12 16 7"/>
+            <line x1="21" y1="12" x2="9" y2="12"/>
+          </svg>
+          <span>Logout</span>
+        </button>
+      </div>
+    </div>
   </div>
 </nav>
 <a href="/gallery" class="back-btn">

views/list.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <title>My Lists - WaifuBoard</title>
+    <link rel="stylesheet" href="/views/css/anime/home.css">
     <link rel="stylesheet" href="/views/css/list.css">
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/titlebar.css">
@@ -23,7 +24,7 @@
 </div>
 
 <nav class="navbar" id="navbar">
-    <a href="/" class="nav-brand">
+    <a href="#" class="nav-brand">
         <div class="brand-icon">
             <img src="/public/assets/waifuboards.ico" alt="WF Logo">
         </div>
@@ -36,13 +37,52 @@
         <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 active">My List</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Marketplace</button>
+        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
     </div>
 
-    <div class="search-wrapper" style="visibility: hidden;">
+    <!-- Mejorado el contenedor de usuario con dropdown más completo -->
-        <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+    <div class="nav-right">
-        <input type="text" class="search-input" id="search-input" placeholder="Search extensions..." autocomplete="off">
+        <div class="search-wrapper" style="visibility: hidden;">
-        <div class="search-results" id="search-results"></div>
+            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <circle cx="11" cy="11" r="8"/>
+                <path d="M21 21l-4.35-4.35"/>
+            </svg>
+            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
+            <div class="search-results" id="search-results"></div>
+        </div>
+
+        <div class="nav-user" id="nav-user" style="display:none;">
+            <div class="user-avatar-btn">
+                <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
+                <div class="online-indicator"></div>
+            </div>
+
+            <div class="nav-dropdown" id="nav-dropdown">
+                <div class="dropdown-header">
+                    <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
+                    <div class="dropdown-user-info">
+                        <div class="dropdown-username" id="nav-username"></div>
+                    </div>
+                </div>
+
+                <a href="/my-list" class="dropdown-item">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    <span>My List</span>
+                </a>
+                <button class="dropdown-item logout-item" id="nav-logout">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                        <polyline points="16 17 21 12 16 7"/>
+                        <line x1="21" y1="12" x2="9" y2="12"/>
+                    </svg>
+                    <span>Logout</span>
+                </button>
+            </div>
+        </div>
     </div>
 </nav>
 

views/marketplace.html

@@ -24,7 +24,7 @@
 </div>
 
 <nav class="navbar" id="navbar">
-    <a href="/" class="nav-brand">
+    <a href="#" class="nav-brand">
         <div class="brand-icon">
             <img src="/public/assets/waifuboards.ico" alt="WF Logo">
         </div>
@@ -40,10 +40,48 @@
         <button class="nav-button active">Marketplace</button>
     </div>
 
-    <div class="search-wrapper" style="visibility: hidden;">
+    <div class="nav-right">
-        <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        <div class="search-wrapper" style="visibility: hidden;">
-        <input type="text" class="search-input" id="search-input" placeholder="Search extensions..." autocomplete="off">
+            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-        <div class="search-results" id="search-results"></div>
+                <circle cx="11" cy="11" r="8"/>
+                <path d="M21 21l-4.35-4.35"/>
+            </svg>
+            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
+            <div class="search-results" id="search-results"></div>
+        </div>
+
+        <div class="nav-user" id="nav-user" style="display:none;">
+            <div class="user-avatar-btn">
+                <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
+                <div class="online-indicator"></div>
+            </div>
+
+            <div class="nav-dropdown" id="nav-dropdown">
+                <div class="dropdown-header">
+                    <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
+                    <div class="dropdown-user-info">
+                        <div class="dropdown-username" id="nav-username"></div>
+                    </div>
+                </div>
+
+                <a href="/my-list" class="dropdown-item">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    <span>My List</span>
+                </a>
+                <button class="dropdown-item logout-item" id="nav-logout">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                        <polyline points="16 17 21 12 16 7"/>
+                        <line x1="21" y1="12" x2="9" y2="12"/>
+                    </svg>
+                    <span>Logout</span>
+                </button>
+            </div>
+        </div>
     </div>
 </nav>
 

views/schedule.html

@@ -8,6 +8,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/views/css/anime/home.css">
     <link rel="stylesheet" href="/views/css/schedule/schedule.css">
     <link rel="stylesheet" href="/views/css/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/titlebar.css">
@@ -27,24 +28,67 @@
 
     <div class="ambient-bg" id="ambientBg"></div>
 
-    <nav class="navbar" id="navbar">
+<nav class="navbar" id="navbar">
-        <a href="/" class="nav-brand">
+    <a href="#" class="nav-brand">
-            <div class="brand-icon">
+        <div class="brand-icon">
-                <img src="/public/assets/waifuboards.ico" alt="WB" onerror="this.style.display='none'; this.parentNode.innerHTML='<svg width=\'20\' height=\'20\' viewBox=\'0 0 24 24\' fill=\'white\'><path d=\'M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z\'/></svg>'">
+            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-            </div>
+        </div>
-            WaifuBoard
+        WaifuBoard
-        </a>
+    </a>
 
-        <div class="nav-center">
+    <div class="nav-center">
-            <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
+        <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='/books'">Books</button>
-            <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
+        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-            <button class="nav-button active">Schedule</button>
+        <button class="nav-button active">Schedule</button>
-            <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
+        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-            <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
+        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
+    </div>
+
+    <div class="nav-right">
+        <div class="search-wrapper" style="visibility: hidden;">
+            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <circle cx="11" cy="11" r="8"/>
+                <path d="M21 21l-4.35-4.35"/>
+            </svg>
+            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
+            <div class="search-results" id="search-results"></div>
         </div>
 
-    </nav>
+        <div class="nav-user" id="nav-user" style="display:none;">
+            <div class="user-avatar-btn">
+                <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
+                <div class="online-indicator"></div>
+            </div>
+
+            <div class="nav-dropdown" id="nav-dropdown">
+                <div class="dropdown-header">
+                    <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
+                    <div class="dropdown-user-info">
+                        <div class="dropdown-username" id="nav-username"></div>
+                    </div>
+                </div>
+
+                <a href="/my-list" class="dropdown-item">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    <span>My List</span>
+                </a>
+                <button class="dropdown-item logout-item" id="nav-logout">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                        <polyline points="16 17 21 12 16 7"/>
+                        <line x1="21" y1="12" x2="9" y2="12"/>
+                    </svg>
+                    <span>Logout</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</nav>
 
     <div class="calendar-wrapper">
         <div class="calendar-controls">

views/users.html

@@ -167,7 +167,7 @@
     Click To Download
   </a>
 </div>
-
+<script>localStorage.removeItem("token")</script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/users.js"></script>
 </body>