added modal to animes & books, fixed some styles

src/scripts/anime/anime.js

@@ -1,552 +1,335 @@
-const animeId = window.location.pathname.split('/').pop();
+const searchInput = document.getElementById('search-input');
-let player;
+const searchResults = document.getElementById('search-results');
-let totalEpisodes = 0;
+let searchTimeout;
-let currentPage = 1;
+let availableExtensions = [];
-const itemsPerPage = 12;
-let extensionName;
-let currentAnimeData = null;
-let isInList = false;
-let currentListEntry = null;
 
-const API_BASE = '/api';
+searchInput.addEventListener('input', (e) => {
+    const query = e.target.value;
+    clearTimeout(searchTimeout);
+    if (query.length < 2) {
+        searchResults.classList.remove('active');
+        searchResults.innerHTML = '';
+        searchInput.style.borderRadius = '99px';
+        return;
+    }
+    searchTimeout = setTimeout(() => {
+
+        fetchSearh(query);
+    }, 300);
+});
+
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('.search-wrapper')) {
+        searchResults.classList.remove('active');
+        searchInput.style.borderRadius = '99px';
+    }
+});
+
+async function fetchSearh(query) {
+    try {
+        let apiUrl = `/api/search?q=${encodeURIComponent(query)}`;
+        let extensionName = null;
+        let finalQuery = query;
+
+        const parts = query.split(':');
+        if (parts.length >= 2) {
+            const potentialExtension = parts[0].trim().toLowerCase();
+
+            const foundExtension = availableExtensions.find(ext => ext.toLowerCase() === potentialExtension);
+
+            if (foundExtension) {
+                extensionName = foundExtension;
+
+                finalQuery = parts.slice(1).join(':').trim();
+
+                if (finalQuery.length === 0) {
+                    renderSearchResults([]);
+                    return;
+                }
+
+                apiUrl = `/api/search/${extensionName}?q=${encodeURIComponent(finalQuery)}`;
+            }
+        }
+
+        const res = await fetch(apiUrl);
+        const data = await res.json();
+
+        const resultsWithExtension = (data.results || []).map(anime => {
+            if (extensionName) {
+                return {
+                    ...anime,
+                    isExtensionResult: true,
+                    extensionName: extensionName
+                };
+            }
+            return anime;
+        });
+
+        renderSearchResults(resultsWithExtension);
+    } catch (err) {
+        console.error("Search Error:", err);
+    }
+}
+
+async function loadContinueWatching() {
+    const token = localStorage.getItem('token');
+    if (!token) return;
+
+    try {
+        const res = await fetch('/api/list/filter?status=watching&entry_type=ANIME', {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
+            }
+        });
+
+        if (!res.ok) return;
+
+        const data = await res.json();
+        const list = data.results || [];
+
+        renderContinueWatching('my-status', list);
+
+    } catch (err) {
+        console.error('Continue Watching Error:', err);
+    }
+}
+
+function renderContinueWatching(id, list) {
+    const container = document.getElementById(id);
+    if (!container) return;
+
+    container.innerHTML = '';
+
+    if (list.length === 0) {
+        container.innerHTML = `<div style="padding:1rem; color:#888">No watching anime</div>`;
+        return;
+    }
+
+    list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
+
+    list.forEach(item => {
+        const el = document.createElement('div');
+        el.className = 'card';
+
+        el.onclick = () => {
+            const ep = item.progress || 1;
+
+            if (item.source === 'anilist') {
+                window.location.href = `http://localhost:54322/watch/${item.entry_id}/${ep + 1}`;
+            } else {
+                window.location.href = `http://localhost:54322/watch/${item.entry_id}/${ep + 1}?${item.source}`;
+            }
+        };
+
+        const progressText = item.total_episodes
+            ? `${item.progress || 0}/${item.total_episodes}`
+            : `${item.progress || 0}`;
+
+        el.innerHTML = `
+            <div class="card-img-wrap">
+                <img src="${item.poster}" loading="lazy">
+            </div>
+            <div class="card-content">
+                <h3>${item.title}</h3>
+                <p>Ep ${progressText} - ${item.source}</p>            </div>
+        `;
+
+        container.appendChild(el);
+    });
+}
+
+function renderSearchResults(results) {
+    searchResults.innerHTML = '';
+    if (results.length === 0) {
+        searchResults.innerHTML = '<div style="padding:1rem; color:#888; text-align:center">No results found</div>';
+    } else {
+        results.forEach(anime => {
+            const title = getTitle(anime);
+            const img = anime.coverImage.medium || anime.coverImage.large;
+            const rating = anime.averageScore ? `${anime.averageScore}%` : 'N/A';
+            const year = anime.seasonYear || '';
+            const format = anime.format || 'TV';
+
+            let href;
+            if (anime.isExtensionResult) {
+                href = `/anime/${anime.extensionName}/${anime.id}`;
+            } else {
+                href = `/anime/${anime.id}`;
+            }
+
+            const item = document.createElement('a');
+            item.className = 'search-item';
+            item.href = href;
+            item.innerHTML = `
+                        <img src="${img}" class="search-poster" alt="${title}">
+                        <div class="search-info">
+                            <div class="search-title">${title}</div>
+                            <div class="search-meta">
+                                <span class="rating-pill">${rating}</span>
+                                <span>• ${year}</span>
+                                <span>• ${format}</span>
+                            </div>
+                        </div>
+                    `;
+            searchResults.appendChild(item);
+        });
+    }
+    searchResults.classList.add('active');
+    searchInput.style.borderRadius = '12px 12px 0 0';
+}
+
+function scrollCarousel(id, direction) {
+    const container = document.getElementById(id);
+    if(container) {
+        const scrollAmount = container.clientWidth * 0.75;
+        container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
+    }
+}
+
+let trendingAnimes = [];
+let currentHeroIndex = 0;
+let player;
+let heroInterval;
 
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
-function getAuthToken() {
+function onYouTubeIframeAPIReady() {
-    return localStorage.getItem('token');
+    player = new YT.Player('player', {
+        height: '100%', width: '100%',
+        playerVars: { 'autoplay': 1, 'controls': 0, 'mute': 1, 'loop': 1, 'showinfo': 0, 'modestbranding': 1 },
+        events: { 'onReady': (e) => { e.target.mute(); if(trendingAnimes.length) updateHeroVideo(trendingAnimes[currentHeroIndex]); } }
+    });
 }
 
-function getAuthHeaders() {
+async function fetchContent(isUpdate = false) {
-    const token = getAuthToken();
-    return {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${token}`
-    };
-}
-
-function getSimpleAuthHeaders() {
-    const token = getAuthToken();
-    return {
-        'Authorization': `Bearer ${token}`
-    };
-}
-
-// Lógica de chequeo de lista corregida para usar /list/entry/{id} y esperar 'found'
-async function checkIfInList() {
-    const entryId = window.location.pathname.split('/').pop();
-    const source = extensionName || 'anilist';
-    const entryType = 'ANIME';
-
-    const fetchUrl = `${API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`;
-
     try {
-        const response = await fetch(fetchUrl, {
-            headers: getSimpleAuthHeaders()
 
-        });
+        const resExt = await fetch('/api/extensions/anime');
-
+        const dataExt = await resExt.json();
-        if (response.ok) {
+        if (dataExt.extensions) {
-            const data = await response.json();
+            availableExtensions = dataExt.extensions;
-
+            console.log("Extensiones de anime disponibles cargadas:", availableExtensions);
-            if (data.found && data.entry) { // Esperamos 'found'
-                isInList = true;
-                currentListEntry = data.entry;
-            } else {
-                isInList = false;
-                currentListEntry = null;
-            }
-            updateAddToListButton();
         }
 
-    } catch (error) {
+        const trendingRes = await fetch('/api/trending');
-        console.error('Error checking single list entry:', error);
+        const trendingData = await trendingRes.json();
+
+        if (trendingData.results && trendingData.results.length > 0) {
+            trendingAnimes = trendingData.results;
+            if (!isUpdate) {
+                updateHeroUI(trendingAnimes[0]);
+                startHeroCycle();
+            }
+            renderList('trending', trendingAnimes);
+        } else if (!isUpdate) {
+            setTimeout(() => fetchContent(false), 2000);
+        }
+
+        const topRes = await fetch('/api/top-airing');
+        const topData = await topRes.json();
+        if (topData.results && topData.results.length > 0) {
+            renderList('top-airing', topData.results);
+        }
+
+    } catch (e) {
+        console.error("Fetch Error:", e);
+        if(!isUpdate) setTimeout(() => fetchContent(false), 5000);
     }
 }
 
-function updateAddToListButton() {
+function startHeroCycle() {
-    const btn = document.getElementById('add-to-list-btn');
+    if(heroInterval) clearInterval(heroInterval);
-    if (!btn) return;
+    heroInterval = setInterval(() => {
+        if(trendingAnimes.length > 0) {
+            currentHeroIndex = (currentHeroIndex + 1) % trendingAnimes.length;
+            updateHeroUI(trendingAnimes[currentHeroIndex]);
+        }
+    }, 10000);
+}
 
-    if (isInList) {
+function getTitle(anime) {
-        btn.innerHTML = `
+    return anime.title.english || anime.title.romaji || "Unknown Title";
-            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+}
-                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+
-            </svg>
+function updateHeroUI(anime) {
-            In Your List
+    if(!anime) return;
-        `;
+    const title = getTitle(anime);
-        btn.style.background = 'rgba(34, 197, 94, 0.2)';
+    const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
-        btn.style.color = '#22c55e';
+    const year = anime.seasonYear || '';
-        btn.style.borderColor = 'rgba(34, 197, 94,  0.3)';
+    const type = anime.format || 'TV';
+    const desc = anime.description || 'No description available.';
+    const poster = anime.coverImage ? anime.coverImage.extraLarge : '';
+    const banner = anime.bannerImage || poster;
+
+    document.getElementById('hero-title').innerText = title;
+    document.getElementById('hero-desc').innerHTML = desc;
+    document.getElementById('hero-score').innerText = score;
+    document.getElementById('hero-year').innerText = year;
+    document.getElementById('hero-type').innerText = type;
+    document.getElementById('hero-poster').src = poster;
+
+    const watchBtn = document.getElementById('watch-btn');
+    if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
+
+    const bgImg = document.getElementById('hero-bg-media');
+    if(bgImg && bgImg.src !== banner) bgImg.src = banner;
+
+    updateHeroVideo(anime);
+
+    document.getElementById('hero-loading-ui').style.display = 'none';
+    document.getElementById('hero-real-ui').style.display = 'block';
+}
+
+function updateHeroVideo(anime) {
+    if (!player || !player.loadVideoById) return;
+    const videoContainer = document.getElementById('player');
+    if (anime.trailer && anime.trailer.site === 'youtube' && anime.trailer.id) {
+        if(player.getVideoData && player.getVideoData().video_id !== anime.trailer.id) {
+            player.loadVideoById(anime.trailer.id);
+            player.mute();
+        }
+        videoContainer.style.opacity = "1";
     } else {
-        btn.innerHTML = '+ Add to List';
+        videoContainer.style.opacity = "0";
-        btn.style.background = null;
+        player.stopVideo();
-        btn.style.color = null;
-        btn.style.borderColor = null;
     }
 }
 
-// Función openAddToListModal actualizada con todos los campos extendidos
+function renderList(id, list) {
-function openAddToListModal() {
+    const container = document.getElementById(id);
-    // Referencias
+    const firstId = list.length > 0 ? list[0].id : null;
-    const modalTitle = document.getElementById('modal-title');
+    const currentFirstId = container.firstElementChild?.dataset?.id;
-    const deleteBtn = document.getElementById('modal-delete-btn');
+    if (currentFirstId && parseInt(currentFirstId) === firstId && container.children.length === list.length) {
-
+        return;
-    // Mapeo de prefijos (usamos 'entry-' para el HTML del modal extendido)
-    const statusEl = document.getElementById('entry-status');
-    const progressEl = document.getElementById('entry-progress');
-    const scoreEl = document.getElementById('entry-score');
-    const startDateEl = document.getElementById('entry-start-date');
-    const endDateEl = document.getElementById('entry-end-date');
-    const repeatCountEl = document.getElementById('entry-repeat-count');
-    const notesEl = document.getElementById('entry-notes');
-    const privateEl = document.getElementById('entry-is-private');
-
-
-    if (isInList && currentListEntry) {
-        const statusReverseMap = {
-            CURRENT: 'WATCHING'
-        };
-
-        statusEl.value = statusReverseMap[currentListEntry.status] || currentListEntry.status || 'PLANNING';
-        progressEl.value = currentListEntry.progress || 0;
-        scoreEl.value = currentListEntry.score || '';
-
-        // Campos extendidos
-        startDateEl.value = currentListEntry.start_date ? currentListEntry.start_date.split('T')[0] : '';
-        endDateEl.value = currentListEntry.end_date ? currentListEntry.end_date.split('T')[0] : '';
-        repeatCountEl.value = currentListEntry.repeat_count || 0;
-        notesEl.value = currentListEntry.notes || '';
-        privateEl.checked = currentListEntry.is_private === true || currentListEntry.is_private === 1;
-
-        modalTitle.textContent = 'Edit List Entry';
-        deleteBtn.style.display = 'block';
-    } else {
-        // Valores por defecto
-        statusEl.value = 'PLANNING';
-        progressEl.value = 0;
-        scoreEl.value = '';
-        startDateEl.value = '';
-        endDateEl.value = '';
-        repeatCountEl.value = 0;
-        notesEl.value = '';
-        privateEl.checked = false;
-
-        modalTitle.textContent = 'Add to List';
-        deleteBtn.style.display = 'none';
     }
 
-    progressEl.max = totalEpisodes || 999;
+    container.innerHTML = '';
-    document.getElementById('add-list-modal').classList.add('active');
+    list.forEach(anime => {
+        const title = getTitle(anime);
+        const cover = anime.coverImage ? anime.coverImage.large : '';
+        const ep = anime.nextAiringEpisode ? 'Ep ' + anime.nextAiringEpisode.episode : (anime.episodes ? anime.episodes + ' Eps' : 'TV');
+        const score = anime.averageScore || '--';
+
+        const el = document.createElement('div');
+        el.className = 'card';
+        el.dataset.id = anime.id;
+
+        el.onclick = () => window.location.href = `/anime/${anime.id}`;
+        el.innerHTML = `
+                    <div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
+                    <div class="card-content">
+                        <h3>${title}</h3>
+                        <p>${score}% • ${ep}</p>
+                    </div>
+                `;
+        container.appendChild(el);
+    });
 }
 
-function closeAddToListModal() {
+fetchContent();
-    document.getElementById('add-list-modal').classList.remove('active');
+loadContinueWatching();
-}
+setInterval(() => fetchContent(true), 60000);
-
-// Función saveToList actualizada con todos los campos extendidos
-async function saveToList() {
-    const uiStatus = document.getElementById('entry-status').value;
-
-    const anilistStatusMap = {
-        WATCHING: 'CURRENT',
-        COMPLETED: 'COMPLETED',
-        PLANNING: 'PLANNING',
-        PAUSED: 'PAUSED',
-        DROPPED: 'DROPPED',
-        REPEATING: 'REPEATING'
-    };
-
-    const status = anilistStatusMap[uiStatus];
-    const progress = parseInt(document.getElementById('entry-progress').value) || 0;
-    const scoreValue = document.getElementById('entry-score').value;
-    const score = scoreValue ? parseFloat(scoreValue) : null;
-
-    // Nuevos campos
-    const start_date = document.getElementById('entry-start-date').value || null;
-    const end_date = document.getElementById('entry-end-date').value || null;
-    const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
-    const notes = document.getElementById('entry-notes').value || null;
-    const is_private = document.getElementById('entry-is-private').checked;
-
-    try {
-        const response = await fetch(`${API_BASE}/list/entry`, {
-            method: 'POST',
-            headers: getAuthHeaders(),
-            body: JSON.stringify({
-                entry_id: animeId,
-                source: extensionName || 'anilist',
-                entry_type: 'ANIME',
-                status: status,
-                progress: progress,
-                score: score,
-                // Campos extendidos
-                start_date: start_date,
-                end_date: end_date,
-                repeat_count: repeat_count,
-                notes: notes,
-                is_private: is_private
-            })
-        });
-
-        if (!response.ok) {
-            throw new Error('Failed to save entry');
-        }
-
-        const data = await response.json();
-
-        isInList = true;
-        currentListEntry = data.entry;
-        updateAddToListButton();
-        closeAddToListModal();
-        showNotification(isInList ? 'Updated successfully!' : 'Added to your list!', 'success');
-    } catch (error) {
-        console.error('Error saving to list:', error);
-        showNotification('Failed to save. Please try again.', 'error');
-    }
-}
-
-async function deleteFromList() {
-    if (!confirm('Remove this anime from your list?')) return;
-
-    const source = extensionName || 'anilist';
-    const entryType = 'ANIME';
-
-    try {
-        const response = await fetch(`${API_BASE}/list/entry/${animeId}?source=${source}&entry_type=${entryType}`, {
-            method: 'DELETE',
-            headers: getSimpleAuthHeaders()
-
-        });
-
-        if (!response.ok) {
-            throw new Error('Failed to delete entry');
-        }
-
-        isInList = false;
-        currentListEntry = null;
-        updateAddToListButton();
-        closeAddToListModal();
-        showNotification('Removed from your list', 'success');
-    } catch (error) {
-        console.error('Error deleting from list:', error);
-        showNotification('Failed to remove. Please try again.', 'error');
-    }
-}
-
-function showNotification(message, type = 'info') {
-    const notification = document.createElement('div');
-    notification.style.cssText = `
-        position: fixed;
-        top: 100px;
-        right: 20px;
-        background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
-        color: white;
-        padding: 1rem 1.5rem;
-        border-radius: 12px;
-        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-        z-index: 9999;
-        font-weight: 600;
-        animation: slideInRight 0.3s ease;
-    `;
-    notification.textContent = message;
-    document.body.appendChild(notification);
-
-    setTimeout(() => {
-        notification.style.animation = 'slideOutRight 0.3s ease';
-        setTimeout(() => notification.remove(), 300);
-    }, 3000);
-}
-
-async function loadAnime() {
-    try {
-        const path = window.location.pathname;
-        const parts = path.split("/").filter(Boolean);
-        let animeId;
-
-        if (parts.length === 3) {
-            extensionName = parts[1];
-            animeId = parts[2];
-        } else {
-            animeId = parts[1];
-        }
-
-        const fetchUrl = extensionName
-            ? `/api/anime/${animeId}?source=${extensionName}`
-            : `/api/anime/${animeId}?source=anilist`;
-        const res = await fetch(fetchUrl, { headers: getSimpleAuthHeaders() });
-        const data = await res.json();
-
-        if (data.error) {
-            document.getElementById('title').innerText = "Anime Not Found";
-            return;
-        }
-
-        currentAnimeData = data;
-
-        const title = data.title?.english || data.title?.romaji || data.title || "Unknown Title";
-        document.title = `${title} | WaifuBoard`;
-        document.getElementById('title').innerText = title;
-
-        let posterUrl = '';
-
-        if (extensionName) {
-            posterUrl = data.image || '';
-        } else {
-            posterUrl = data.coverImage?.extraLarge || '';
-        }
-
-        if (posterUrl) {
-            document.getElementById('poster').src = posterUrl;
-        }
-
-        const rawDesc = data.description || data.summary || "No description available.";
-        handleDescription(rawDesc);
-
-        const score = extensionName ? (data.score ? data.score * 10 : '?') : data.averageScore;
-        document.getElementById('score').innerText = (score || '?') + '% Score';
-
-        document.getElementById('year').innerText =
-            extensionName ? (data.year || '????') : (data.seasonYear || data.startDate?.year || '????');
-
-        document.getElementById('genres').innerText =
-            data.genres?.length > 0 ? data.genres.slice(0, 3).join(' • ') : '';
-
-        document.getElementById('format').innerText = data.format || 'TV';
-
-        document.getElementById('status').innerText = data.status || 'Unknown';
-
-        const extensionPill = document.getElementById('extension-pill');
-        if (extensionName && extensionPill) {
-            extensionPill.textContent = `${extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase()}`;
-            extensionPill.style.display = 'inline-flex';
-        } else if (extensionPill) {
-            extensionPill.style.display = 'none';
-        }
-
-        let seasonText = '';
-        if (extensionName) {
-            seasonText = data.season || 'Unknown';
-        } else {
-            if (data.season && data.seasonYear) {
-                seasonText = `${data.season} ${data.seasonYear}`;
-            } else if (data.startDate?.year) {
-                const months = ['', 'Winter', 'Winter', 'Spring', 'Spring', 'Spring', 'Summer', 'Summer', 'Summer', 'Fall', 'Fall', 'Fall', 'Winter'];
-                const month = data.startDate.month || 1;
-                const estimatedSeason = months[month] || '';
-                seasonText = `${estimatedSeason} ${data.startDate.year}`.trim();
-            }
-        }
-        document.getElementById('season').innerText = seasonText || 'Unknown';
-
-        const studio = extensionName
-            ? data.studio || "Unknown"
-            : (data.studios?.nodes?.[0]?.name ||
-                data.studios?.edges?.[0]?.node?.name ||
-                'Unknown Studio');
-
-        document.getElementById('studio').innerText = studio;
-
-        const charContainer = document.getElementById('char-list');
-        charContainer.innerHTML = '';
-
-        let characters = [];
-
-        if (extensionName) {
-            characters = data.characters || [];
-        } else {
-            if (data.characters?.nodes?.length > 0) {
-                characters = data.characters.nodes.slice(0, 5);
-            } else if (data.characters?.edges?.length > 0) {
-                characters = data.characters.edges
-                    .filter(edge => edge?.node?.name?.full)
-                    .slice(0, 5)
-                    .map(edge => edge.node);
-            }
-        }
-
-        if (characters.length > 0) {
-            characters.slice(0, 5).forEach(char => {
-                const name = char?.name?.full || char?.name;
-                if (name) {
-                    charContainer.innerHTML += `
-                        <div class="character-item">
-                            <div class="char-dot"></div> ${name}
-                        </div>`;
-                }
-            });
-        } else {
-            charContainer.innerHTML = `
-                <div class="character-item" style="color: #666;">
-                    No character data available
-                </div>`;
-        }
-
-        document.getElementById('watch-btn').onclick = () => {
-            window.location.href = `/watch/${animeId}/1`;
-        };
-
-        if (data.trailer && data.trailer.site === 'youtube') {
-            window.onYouTubeIframeAPIReady = function() {
-                player = new YT.Player('player', {
-                    height: '100%',
-                    width: '100%',
-                    videoId: data.trailer.id,
-                    playerVars: {
-                        autoplay: 1, controls: 0, mute: 1,
-                        loop: 1, playlist: data.trailer.id,
-                        showinfo: 0, modestbranding: 1, disablekb: 1
-                    },
-                    events: { onReady: (e) => e.target.playVideo() }
-                });
-            };
-        } else {
-            const banner = extensionName
-                ? (data.image || '')
-                : (data.bannerImage || data.coverImage?.extraLarge || '');
-
-            if (banner) {
-                document.querySelector('.video-background').innerHTML =
-                    `<img src="${banner}" style="width:100%; height:100%; object-fit:cover;">`;
-            }
-        }
-
-        if (extensionName) {
-            totalEpisodes = data.episodes || 1;
-        } else {
-            if (data.nextAiringEpisode?.episode) {
-                totalEpisodes = data.nextAiringEpisode.episode - 1;
-            } else if (data.episodes) {
-                totalEpisodes = data.episodes;
-            } else {
-                totalEpisodes = 12;
-            }
-        }
-
-        totalEpisodes = Math.min(Math.max(totalEpisodes, 1), 5000);
-        document.getElementById('episodes').innerText = totalEpisodes;
-
-        renderEpisodes();
-
-        await checkIfInList();
-
-    } catch (err) {
-        console.error('Error loading anime:', err);
-        document.getElementById('title').innerText = "Error loading anime";
-    }
-}
-
-function handleDescription(text) {
-    const tmp = document.createElement("DIV");
-    tmp.innerHTML = text;
-    const cleanText = tmp.textContent || tmp.innerText || "";
-
-    const sentences = cleanText.match(/[^\.!\?]+[\.!\?]+/g) || [cleanText];
-
-    document.getElementById('full-description').innerHTML = text;
-
-    if (sentences.length > 4) {
-        const shortText = sentences.slice(0, 4).join(' ');
-        document.getElementById('description-preview').innerText = shortText + '...';
-        document.getElementById('read-more-btn').style.display = 'inline-flex';
-    } else {
-        document.getElementById('description-preview').innerHTML = text;
-        document.getElementById('read-more-btn').style.display = 'none';
-    }
-}
-
-function openModal() {
-    document.getElementById('desc-modal').classList.add('active');
-    document.body.style.overflow = 'hidden';
-}
-
-function closeModal() {
-    document.getElementById('desc-modal').classList.remove('active');
-    document.body.style.overflow = '';
-}
-
-document.getElementById('desc-modal').addEventListener('click', (e) => {
-    if (e.target.id === 'desc-modal') closeModal();
-});
-
-function renderEpisodes() {
-    const grid = document.getElementById('episodes-grid');
-    grid.innerHTML = '';
-
-    const start = (currentPage - 1) * itemsPerPage + 1;
-    const end = Math.min(start + itemsPerPage - 1, totalEpisodes);
-
-    for(let i = start; i <= end; i++) {
-        createEpisodeButton(i, grid);
-    }
-    updatePaginationControls();
-}
-
-function createEpisodeButton(num, container) {
-    const btn = document.createElement('div');
-    btn.className = 'episode-btn';
-    btn.innerText = `Ep ${num}`;
-    btn.onclick = () =>
-        window.location.href = `/watch/${animeId}/${num}` + (extensionName ? `?${extensionName}` : "");
-
-    container.appendChild(btn);
-}
-
-function updatePaginationControls() {
-    const totalPages = Math.ceil(totalEpisodes / itemsPerPage);
-    document.getElementById('page-info').innerText = `Page ${currentPage} of ${totalPages}`;
-    document.getElementById('prev-page').disabled = currentPage === 1;
-    document.getElementById('next-page').disabled = currentPage === totalPages;
-
-    document.getElementById('pagination-controls').style.display = 'flex';
-}
-
-function changePage(delta) {
-    currentPage += delta;
-    renderEpisodes();
-}
-
-const searchInput = document.getElementById('ep-search');
-searchInput.addEventListener('input', (e) => {
-    const val = parseInt(e.target.value);
-    const grid = document.getElementById('episodes-grid');
-
-    if (val > 0 && val <= totalEpisodes) {
-        grid.innerHTML = '';
-        createEpisodeButton(val, grid);
-        document.getElementById('pagination-controls').style.display = 'none';
-    } else if (!e.target.value) {
-        renderEpisodes();
-    } else {
-        grid.innerHTML = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
-        document.getElementById('pagination-controls').style.display = 'none';
-    }
-});
-
-document.addEventListener('DOMContentLoaded', () => {
-    const modal = document.getElementById('add-list-modal');
-    if (modal) {
-        modal.addEventListener('click', (e) => {
-            if (e.target.id === 'add-list-modal') {
-                closeAddToListModal();
-            }
-        });
-    }
-});
-
-const style = document.createElement('style');
-style.textContent = `
-    @keyframes slideInRight {
-        from { transform: translateX(400px); opacity: 0; }
-        to { transform: translateX(0); opacity: 1; }
-    }
-    @keyframes slideOutRight {
-        from { transform: translateX(0); opacity: 1; }
-        to { transform: translateX(400px); opacity: 0; }
-    }
-`;
-document.head.appendChild(style);
-
-loadAnime();

src/scripts/anime/animes.js

@@ -3,6 +3,291 @@ const searchResults = document.getElementById('search-results');
 let searchTimeout;
 let availableExtensions = [];
 
+let currentAnimeData = null;
+
+let isInList = false;
+let currentListEntry = null;
+let totalEpisodes = 0;
+
+const API_BASE = '/api';
+
+function getAuthToken() {
+    return localStorage.getItem('token');
+}
+
+function getAuthHeaders() {
+    const token = getAuthToken();
+    return {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+    };
+}
+
+function getSimpleAuthHeaders() {
+    const token = getAuthToken();
+    return {
+        'Authorization': `Bearer ${token}`
+    };
+}
+
+function getTitle(anime) {
+    return anime.title.english || anime.title.romaji || "Unknown Title";
+}
+
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 100px;
+        right: 20px;
+        background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        z-index: 9999;
+        font-weight: 600;
+        animation: slideInRight 0.3s ease;
+    `;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+        notification.style.animation = 'slideOutRight 0.3s ease';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
+
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideInRight {
+        from { transform: translateX(400px); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes slideOutRight {
+        from { transform: translateX(0); opacity: 1; }
+        to { transform: translateX(400px); opacity: 0; }
+    }
+`;
+document.head.appendChild(style);
+
+async function checkIfInList(animeId) {
+    const source = 'anilist';
+    const entryType = 'ANIME';
+
+    const fetchUrl = `${API_BASE}/list/entry/${animeId}?source=${source}&entry_type=${entryType}`;
+
+    try {
+        const response = await fetch(fetchUrl, {
+            headers: getSimpleAuthHeaders()
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+
+            if (data.found && data.entry) {
+                isInList = true;
+                currentListEntry = data.entry;
+            } else {
+                isInList = false;
+                currentListEntry = null;
+            }
+            return true;
+        }
+        return false;
+    } catch (error) {
+        console.error('Error checking single list entry:', error);
+        return false;
+    }
+}
+
+function updateAddToListButton() {
+    const btn = document.querySelector('.hero-buttons .btn-blur');
+    if (!btn) return;
+
+    if (isInList) {
+        btn.innerHTML = `
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            </svg>
+            In Your List
+        `;
+        btn.style.background = 'rgba(34, 197, 94, 0.2)';
+        btn.style.color = '#22c55e';
+        btn.style.borderColor = 'rgba(34, 197, 94,  0.3)';
+    } else {
+        btn.innerHTML = '+ Add to List';
+        btn.style.background = null;
+        btn.style.color = null;
+        btn.style.borderColor = null;
+    }
+}
+
+async function openAddToListModal() {
+    if (!getAuthToken()) {
+        showNotification('Please log in to manage your list.', 'error');
+        return;
+    }
+    if (!currentAnimeData) return;
+
+    await checkIfInList(currentAnimeData.id);
+
+    const modalTitle = document.getElementById('modal-title');
+    const deleteBtn = document.getElementById('modal-delete-btn');
+
+    const statusEl = document.getElementById('entry-status');
+    const progressEl = document.getElementById('entry-progress');
+    const scoreEl = document.getElementById('entry-score');
+    const startDateEl = document.getElementById('entry-start-date');
+    const endDateEl = document.getElementById('entry-end-date');
+    const repeatCountEl = document.getElementById('entry-repeat-count');
+    const notesEl = document.getElementById('entry-notes');
+    const privateEl = document.getElementById('entry-is-private');
+
+    if (isInList && currentListEntry) {
+        const statusReverseMap = { CURRENT: 'WATCHING' };
+
+        statusEl.value = statusReverseMap[currentListEntry.status] || currentListEntry.status || 'PLANNING';
+        progressEl.value = currentListEntry.progress || 0;
+        scoreEl.value = currentListEntry.score || '';
+
+        startDateEl.value = currentListEntry.start_date ? currentListEntry.start_date.split('T')[0] : '';
+        endDateEl.value = currentListEntry.end_date ? currentListEntry.end_date.split('T')[0] : '';
+        repeatCountEl.value = currentListEntry.repeat_count || 0;
+        notesEl.value = currentListEntry.notes || '';
+        privateEl.checked = currentListEntry.is_private === true || currentListEntry.is_private === 1;
+
+        modalTitle.textContent = 'Edit List Entry';
+        deleteBtn.style.display = 'block';
+    } else {
+        statusEl.value = 'PLANNING';
+        progressEl.value = 0;
+        scoreEl.value = '';
+        startDateEl.value = '';
+        endDateEl.value = '';
+        repeatCountEl.value = 0;
+        notesEl.value = '';
+        privateEl.checked = false;
+
+        modalTitle.textContent = 'Add to List';
+        deleteBtn.style.display = 'none';
+    }
+
+    totalEpisodes = currentAnimeData.episodes || 999;
+
+    progressEl.max = totalEpisodes;
+    document.getElementById('add-list-modal').classList.add('active');
+}
+
+function closeAddToListModal() {
+    document.getElementById('add-list-modal').classList.remove('active');
+}
+
+async function saveToList() {
+    const uiStatus = document.getElementById('entry-status').value;
+
+    const anilistStatusMap = {
+        WATCHING: 'CURRENT',
+        COMPLETED: 'COMPLETED',
+        PLANNING: 'PLANNING',
+        PAUSED: 'PAUSED',
+        DROPPED: 'DROPPED',
+        REPEATING: 'REPEATING'
+    };
+
+    const status = anilistStatusMap[uiStatus];
+    const progress = parseInt(document.getElementById('entry-progress').value) || 0;
+    const scoreValue = document.getElementById('entry-score').value;
+    const score = scoreValue ? parseFloat(scoreValue) : null;
+
+    const start_date = document.getElementById('entry-start-date').value || null;
+    const end_date = document.getElementById('entry-end-date').value || null;
+    const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
+    const notes = document.getElementById('entry-notes').value || null;
+    const is_private = document.getElementById('entry-is-private').checked;
+
+    const animeId = currentAnimeData ? currentAnimeData.id : null;
+    if (!animeId) return;
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry`, {
+            method: 'POST',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({
+                entry_id: animeId,
+                source: 'anilist',
+
+                entry_type: 'ANIME',
+                status: status,
+                progress: progress,
+                score: score,
+                start_date: start_date,
+                end_date: end_date,
+                repeat_count: repeat_count,
+                notes: notes,
+                is_private: is_private
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to save entry');
+        }
+
+        const data = await response.json();
+
+        isInList = true;
+        currentListEntry = data.entry;
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification(isInList ? 'Updated successfully!' : 'Added to your list!', 'success');
+    } catch (error) {
+        console.error('Error saving to list:', error);
+        showNotification('Failed to save. Please try again.', 'error');
+    }
+}
+
+async function deleteFromList() {
+    if (!confirm('Remove this anime from your list?')) return;
+
+    const animeId = currentAnimeData ? currentAnimeData.id : null;
+    if (!animeId) return;
+
+    const source = 'anilist';
+    const entryType = 'ANIME';
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry/${animeId}?source=${source}&entry_type=${entryType}`, {
+            method: 'DELETE',
+            headers: getSimpleAuthHeaders()
+
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to delete entry');
+        }
+
+        isInList = false;
+        currentListEntry = null;
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification('Removed from your list', 'success');
+    } catch (error) {
+        console.error('Error deleting from list:', error);
+        showNotification('Failed to remove. Please try again.', 'error');
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById('add-list-modal');
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target.id === 'add-list-modal') {
+                closeAddToListModal();
+            }
+        });
+    }
+});
+
 searchInput.addEventListener('input', (e) => {
     const query = e.target.value;
     clearTimeout(searchTimeout);
@@ -106,7 +391,6 @@ function renderContinueWatching(id, list) {
         return;
     }
 
-    // ✅ ordenar por fecha
     list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
 
     list.forEach(item => {
@@ -123,7 +407,6 @@ function renderContinueWatching(id, list) {
             }
         };
 
-
         const progressText = item.total_episodes
             ? `${item.progress || 0}/${item.total_episodes}`
             : `${item.progress || 0}`;
@@ -253,12 +536,11 @@ function startHeroCycle() {
     }, 10000);
 }
 
-function getTitle(anime) {
+async function updateHeroUI(anime) {
-    return anime.title.english || anime.title.romaji || "Unknown Title";
-}
-
-function updateHeroUI(anime) {
     if(!anime) return;
+
+    currentAnimeData = anime;
+
     const title = getTitle(anime);
     const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
     const year = anime.seasonYear || '';
@@ -277,6 +559,20 @@ function updateHeroUI(anime) {
     const watchBtn = document.getElementById('watch-btn');
     if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
 
+    const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
+    if(addToListBtn) {
+
+        addToListBtn.onclick = openAddToListModal;
+
+        const success = await checkIfInList(anime.id);
+        if (success) {
+            updateAddToListButton();
+        } else {
+            updateAddToListButton();
+
+        }
+    }
+
     const bgImg = document.getElementById('hero-bg-media');
     if(bgImg && bgImg.src !== banner) bgImg.src = banner;
 

src/scripts/books/book.js

@@ -55,7 +55,6 @@ function applyChapterFromUrlFilter() {
     currentPage = 1;
 }
 
-
 function getBookEntryType(bookData) {
     if (!bookData) return 'MANGA';
 
@@ -63,7 +62,6 @@ function getBookEntryType(bookData) {
     return (format === 'MANGA' || format === 'ONE_SHOT' || format === 'MANHWA') ? 'MANGA' : 'NOVEL';
 }
 
-// CORRECCIÓN: Usar el endpoint /list/entry/{id} y esperar 'found'
 async function checkIfInList() {
     if (!currentBookData) return;
 
@@ -72,7 +70,6 @@ async function checkIfInList() {
 
     const entryType = getBookEntryType(currentBookData);
 
-    // URL CORRECTA: /list/entry/{id}?source={source}&entry_type={entryType}
     const fetchUrl = `${API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`;
 
     try {
@@ -83,7 +80,6 @@ async function checkIfInList() {
         if (response.ok) {
             const data = await response.json();
 
-            // LÓGICA CORRECTA: Comprobar data.found
             if (data.found && data.entry) {
 
                 isInList = true;
@@ -94,7 +90,7 @@ async function checkIfInList() {
             }
             updateAddToListButton();
         } else if (response.status === 404) {
-            // Manejar 404 como 'no encontrado' si la API lo devuelve así
+
             isInList = false;
             currentListEntry = null;
             updateAddToListButton();
@@ -128,37 +124,27 @@ function updateAddToListButton() {
     }
 }
 
-/**
- * REFACTORIZADO para usar la estructura del modal completo.
- * Asume que el HTML usa IDs como 'entry-status', 'entry-progress', 'entry-score', etc.
- */
 function openAddToListModal() {
     if (!currentBookData) return;
 
     const totalUnits = currentBookData.chapters || currentBookData.volumes || 999;
     const entryType = getBookEntryType(currentBookData);
 
-    // Referencias a los elementos del nuevo modal (usando 'entry-' prefix)
     const modalTitle = document.getElementById('modal-title');
     const deleteBtn = document.getElementById('modal-delete-btn');
     const progressLabel = document.getElementById('progress-label');
 
-    // **VERIFICACIÓN CRÍTICA**
     if (!modalTitle || !deleteBtn || !progressLabel) {
         console.error("Error: Uno o más elementos críticos del modal (título, botón eliminar, o etiqueta de progreso) no se encontraron. Verifique los IDs en el HTML.");
         return;
     }
 
-    // --- Población de Datos ---
-
     if (isInList && currentListEntry) {
-        // Datos comunes
+
         document.getElementById('entry-status').value = currentListEntry.status || 'PLANNING';
         document.getElementById('entry-progress').value = currentListEntry.progress || 0;
         document.getElementById('entry-score').value = currentListEntry.score || '';
 
-        // Nuevos datos
-        // Usar formato ISO si viene como ISO, o limpiar si es necesario. Tu ejemplo JSON no tenía fechas.
         document.getElementById('entry-start-date').value = currentListEntry.start_date ? currentListEntry.start_date.split('T')[0] : '';
         document.getElementById('entry-end-date').value = currentListEntry.end_date ? currentListEntry.end_date.split('T')[0] : '';
         document.getElementById('entry-repeat-count').value = currentListEntry.repeat_count || 0;
@@ -168,7 +154,7 @@ function openAddToListModal() {
         modalTitle.textContent = 'Edit Library Entry';
         deleteBtn.style.display = 'block';
     } else {
-        // Valores por defecto
+
         document.getElementById('entry-status').value = 'PLANNING';
         document.getElementById('entry-progress').value = 0;
         document.getElementById('entry-score').value = '';
@@ -182,8 +168,6 @@ function openAddToListModal() {
         deleteBtn.style.display = 'none';
     }
 
-    // --- Configuración de Etiquetas y Máximo ---
-
     if (progressLabel) {
         if (entryType === 'MANGA') {
             progressLabel.textContent = 'Chapters Read';
@@ -200,11 +184,8 @@ function closeAddToListModal() {
     document.getElementById('add-list-modal').classList.remove('active');
 }
 
-/**
- * REFACTORIZADO para guardar TODOS los campos del modal.
- */
 async function saveToList() {
-    // Datos comunes
+
     const uiStatus = document.getElementById('entry-status').value;
 
     const anilistStatusMap = {
@@ -221,14 +202,12 @@ async function saveToList() {
     const scoreValue = document.getElementById('entry-score').value;
     const score = scoreValue ? parseFloat(scoreValue) : null;
 
-    // Nuevos datos
     const start_date = document.getElementById('entry-start-date').value || null;
     const end_date = document.getElementById('entry-end-date').value || null;
     const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
     const notes = document.getElementById('entry-notes').value || null;
     const is_private = document.getElementById('entry-is-private').checked;
 
-
     if (!currentBookData) {
         showNotification('Cannot save: Book data not loaded.', 'error');
         return;
@@ -248,7 +227,7 @@ async function saveToList() {
                 status: status,
                 progress: progress,
                 score: score,
-                // Nuevos campos
+
                 start_date: start_date,
                 end_date: end_date,
                 repeat_count: repeat_count,
@@ -264,7 +243,8 @@ async function saveToList() {
         const data = await response.json();
 
         isInList = true;
-        currentListEntry = data.entry; // Usar la respuesta del servidor si está disponible
+        currentListEntry = data.entry;
+
         updateAddToListButton();
         closeAddToListModal();
         showNotification(isInList ? 'Updated successfully!' : 'Added to your library!', 'success');
@@ -274,16 +254,15 @@ async function saveToList() {
     }
 }
 
-// CORRECCIÓN: Usar el endpoint /list/entry/{id} con los parámetros correctos.
 async function deleteFromList() {
     if (!confirm('Remove this book from your library?')) return;
 
     const idToDelete = extensionName ? bookSlug : bookId;
     const source = extensionName || 'anilist';
-    const entryType = getBookEntryType(currentBookData); // Obtener el tipo de entrada
+    const entryType = getBookEntryType(currentBookData);
 
     try {
-        // URL CORRECTA para DELETE: /list/entry/{id}?source={source}&entry_type={entryType}
+
         const response = await fetch(`${API_BASE}/list/entry/${idToDelete}?source=${source}&entry_type=${entryType}`, {
             method: 'DELETE',
             headers: getSimpleAuthHeaders()
@@ -611,7 +590,7 @@ function openReader(bookId, chapterId, provider) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    // El ID del modal sigue siendo 'add-list-modal' para mantener la compatibilidad con el código original.
+
     const modal = document.getElementById('add-list-modal');
     if (modal) {
         modal.addEventListener('click', (e) => {

src/scripts/books/books.js

@@ -3,6 +3,14 @@ let currentHeroIndex = 0;
 let heroInterval;
 let availableExtensions = [];
 
+let currentBookData = null;
+
+let isInList = false;
+let currentListEntry = null;
+let totalUnits = 0;
+
+const API_BASE = '/api';
+
 window.addEventListener('scroll', () => {
     const nav = document.getElementById('navbar');
     if (window.scrollY > 50) nav.classList.add('scrolled');
@@ -100,6 +108,7 @@ function renderSearchResults(results) {
             item.className = 'search-item';
             let href;
             if (book.isExtensionResult) {
+
                 href = `/book/${book.extensionName}/${book.id}`;
             } else {
                 href = `/book/${book.id}`;
@@ -173,8 +182,310 @@ function startHeroCycle() {
     }, 8000);
 }
 
+function getAuthToken() {
+    return localStorage.getItem('token');
+}
+
+function getAuthHeaders() {
+    const token = getAuthToken();
+    return {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+    };
+}
+
+function getSimpleAuthHeaders() {
+    const token = localStorage.getItem('token');
+    return {
+        'Authorization': `Bearer ${token}`
+    };
+}
+
+function getBookEntryType(bookData) {
+    if (!bookData) return 'MANGA';
+
+    const format = bookData.format?.toUpperCase() || 'MANGA';
+    return (format === 'MANGA' || format === 'ONE_SHOT' || format === 'MANHWA') ? 'MANGA' : 'NOVEL';
+}
+
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 100px;
+        right: 20px;
+        background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        z-index: 9999;
+        font-weight: 600;
+        animation: slideInRight 0.3s ease;
+    `;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+        notification.style.animation = 'slideOutRight 0.3s ease';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
+
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideInRight {
+        from { transform: translateX(400px); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes slideOutRight {
+        from { transform: translateX(0); opacity: 1; }
+        to { transform: translateX(400px); opacity: 0; }
+    }
+`;
+document.head.appendChild(style);
+
+async function checkIfInList(bookId) {
+    if (!currentBookData) return false;
+
+    const entryId = bookId;
+    const source = 'anilist';
+    const entryType = getBookEntryType(currentBookData);
+
+    const fetchUrl = `${API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`;
+
+    try {
+        const response = await fetch(fetchUrl, {
+            headers: getSimpleAuthHeaders()
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+
+            if (data.found && data.entry) {
+                isInList = true;
+                currentListEntry = data.entry;
+            } else {
+                isInList = false;
+                currentListEntry = null;
+            }
+            return true;
+        }
+        return false;
+    } catch (error) {
+        console.error('Error checking single list entry:', error);
+        return false;
+    }
+}
+
+function updateAddToListButton() {
+    const btn = document.querySelector('.hero-buttons .btn-blur');
+    if (!btn) return;
+
+    if (isInList) {
+        btn.innerHTML = `
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            </svg>
+            In Your Library
+        `;
+        btn.style.background = 'rgba(34, 197, 94, 0.2)';
+        btn.style.color = '#22c55e';
+        btn.style.borderColor = 'rgba(34, 197, 94,  0.3)';
+        btn.onclick = openAddToListModal;
+
+    } else {
+        btn.innerHTML = '+ Add to Library';
+        btn.style.background = null;
+        btn.style.color = null;
+        btn.style.borderColor = null;
+        btn.onclick = openAddToListModal;
+
+    }
+}
+
+async function openAddToListModal() {
+    if (!getAuthToken()) {
+        showNotification('Please log in to manage your library.', 'error');
+        return;
+    }
+    if (!currentBookData) return;
+
+    await checkIfInList(currentBookData.id);
+
+    const totalUnits = currentBookData.chapters || currentBookData.volumes || 999;
+    const entryType = getBookEntryType(currentBookData);
+
+    const modalTitle = document.getElementById('modal-title');
+    const deleteBtn = document.getElementById('modal-delete-btn');
+    const progressLabel = document.getElementById('progress-label');
+
+    let actualProgressLabel = progressLabel;
+    if (!actualProgressLabel) {
+
+        const progressInput = document.getElementById('entry-progress');
+        if (progressInput) actualProgressLabel = progressInput.previousElementSibling;
+    }
+
+    if (isInList && currentListEntry) {
+        document.getElementById('entry-status').value = currentListEntry.status || 'PLANNING';
+        document.getElementById('entry-progress').value = currentListEntry.progress || 0;
+        document.getElementById('entry-score').value = currentListEntry.score || '';
+
+        document.getElementById('entry-start-date').value = currentListEntry.start_date ? currentListEntry.start_date.split('T')[0] : '';
+        document.getElementById('entry-end-date').value = currentListEntry.end_date ? currentListEntry.end_date.split('T')[0] : '';
+        document.getElementById('entry-repeat-count').value = currentListEntry.repeat_count || 0;
+        document.getElementById('entry-notes').value = currentListEntry.notes || '';
+        document.getElementById('entry-is-private').checked = currentListEntry.is_private === true || currentListEntry.is_private === 1;
+
+        modalTitle.textContent = 'Edit Library Entry';
+        deleteBtn.style.display = 'block';
+    } else {
+        document.getElementById('entry-status').value = 'PLANNING';
+        document.getElementById('entry-progress').value = 0;
+        document.getElementById('entry-score').value = '';
+        document.getElementById('entry-start-date').value = '';
+        document.getElementById('entry-end-date').value = '';
+        document.getElementById('entry-repeat-count').value = 0;
+        document.getElementById('entry-notes').value = '';
+        document.getElementById('entry-is-private').checked = false;
+
+        modalTitle.textContent = 'Add to Library';
+        deleteBtn.style.display = 'none';
+    }
+
+    if (actualProgressLabel) {
+        if (entryType === 'MANGA') {
+            actualProgressLabel.textContent = 'Chapters Read';
+        } else {
+            actualProgressLabel.textContent = 'Volumes/Parts Read';
+        }
+    }
+
+    document.getElementById('entry-progress').max = totalUnits;
+    document.getElementById('add-list-modal').classList.add('active');
+}
+
+function closeAddToListModal() {
+    document.getElementById('add-list-modal').classList.remove('active');
+}
+
+async function saveToList() {
+    const uiStatus = document.getElementById('entry-status').value;
+
+    const anilistStatusMap = {
+        CURRENT: 'CURRENT',
+        COMPLETED: 'COMPLETED',
+        PLANNING: 'PLANNING',
+        PAUSED: 'PAUSED',
+        DROPPED: 'DROPPED',
+        REPEATING: 'REPEATING'
+    };
+
+    const status = anilistStatusMap[uiStatus] || uiStatus;
+
+    const progress = parseInt(document.getElementById('entry-progress').value) || 0;
+    const scoreValue = document.getElementById('entry-score').value;
+    const score = scoreValue ? parseFloat(scoreValue) : null;
+
+    const start_date = document.getElementById('entry-start-date').value || null;
+    const end_date = document.getElementById('entry-end-date').value || null;
+    const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
+    const notes = document.getElementById('entry-notes').value || null;
+    const is_private = document.getElementById('entry-is-private').checked;
+
+    if (!currentBookData) {
+        showNotification('Cannot save: Book data not loaded.', 'error');
+        return;
+    }
+
+    const entryType = getBookEntryType(currentBookData);
+    const idToSave = currentBookData.id;
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry`, {
+            method: 'POST',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({
+                entry_id: idToSave,
+                source: 'anilist',
+
+                entry_type: entryType,
+                status: status,
+                progress: progress,
+                score: score,
+                start_date: start_date,
+                end_date: end_date,
+                repeat_count: repeat_count,
+                notes: notes,
+                is_private: is_private
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to save entry');
+        }
+
+        const data = await response.json();
+
+        isInList = true;
+        currentListEntry = data.entry;
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification(isInList ? 'Updated successfully!' : 'Added to your library!', 'success');
+    } catch (error) {
+        console.error('Error saving to list:', error);
+        showNotification('Failed to save. Please try again.', 'error');
+    }
+}
+
+async function deleteFromList() {
+    if (!confirm('Remove this book from your library?')) return;
+
+    const idToDelete = currentBookData ? currentBookData.id : null;
+    if (!idToDelete) return;
+
+    const source = 'anilist';
+    const entryType = getBookEntryType(currentBookData);
+
+    try {
+        const response = await fetch(`${API_BASE}/list/entry/${idToDelete}?source=${source}&entry_type=${entryType}`, {
+            method: 'DELETE',
+            headers: getSimpleAuthHeaders()
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to delete entry');
+        }
+
+        isInList = false;
+        currentListEntry = null;
+        updateAddToListButton();
+        closeAddToListModal();
+        showNotification('Removed from your library', 'success');
+    } catch (error) {
+        console.error('Error deleting from list:', error);
+        showNotification('Failed to remove. Please try again.', 'error');
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById('add-list-modal');
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target.id === 'add-list-modal') {
+                closeAddToListModal();
+            }
+        });
+    }
+});
+
 function updateHeroUI(book) {
     if(!book) return;
+
+    currentBookData = book;
+    totalUnits = book.chapters || book.volumes || 999;
+
     const title = book.title.english || book.title.romaji;
     const desc = book.description || "No description available.";
     const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';
@@ -194,9 +505,19 @@ function updateHeroUI(book) {
 
     const readBtn = document.getElementById('read-btn');
     if (readBtn) {
-
         readBtn.onclick = () => window.location.href = `/book/${book.id}`;
     }
+
+    const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
+    if(addToListBtn) {
+
+        addToListBtn.onclick = openAddToListModal;
+
+        checkIfInList(book.id).then(() => {
+            updateAddToListButton();
+        });
+    }
+
 }
 
 async function loadContinueReading() {
@@ -234,7 +555,6 @@ function renderContinueReading(id, list) {
         return;
     }
 
-    // ordenar por updated_at DESC
     list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
 
     list.forEach(item => {
@@ -251,7 +571,6 @@ function renderContinueReading(id, list) {
             }
         };
 
-
         const progressText = item.total_episodes
             ? `${item.progress || 0}/${item.total_episodes}`
             : `${item.progress || 0}`;
@@ -270,7 +589,6 @@ function renderContinueReading(id, list) {
     });
 }
 
-
 function renderList(id, list) {
     const container = document.getElementById(id);
     container.innerHTML = '';

src/scripts/books/reader.js

@@ -203,7 +203,6 @@ function loadManga(pages) {
         isLongStrip = true;
     }
 
-
     const useDouble = config.manga.mode === 'double' ||
         (config.manga.mode === 'auto' && !isLongStrip && shouldUseDoublePage(pages));
 
@@ -478,7 +477,6 @@ prevBtn.addEventListener('click', () => {
     loadChapter();
 });
 
-
 nextBtn.addEventListener('click', () => {
     const newChapter = String(parseInt(chapter) + 1);
     updateURL(newChapter);
@@ -636,8 +634,10 @@ function setupProgressTracking(data, source) {
             entry_type: data.type === 'manga' ? 'MANGA' : 'NOVEL',
             status: 'CURRENT',
             progress: source === 'anilist'
-                ? Math.floor(chapterNumber)   // ✅ AniList solo enteros
+                ? Math.floor(chapterNumber)
-                : chapterNumber               // ✅ Local acepta decimales
+
+                : chapterNumber
+
         };
 
         try {
@@ -654,7 +654,6 @@ function setupProgressTracking(data, source) {
         }
     }
 
-
     function checkProgress() {
         const scrollTop = window.scrollY;
         const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
@@ -673,12 +672,10 @@ function setupProgressTracking(data, source) {
         }
     }
 
-    // remove previous listener just in case
     window.removeEventListener('scroll', checkProgress);
     window.addEventListener('scroll', checkProgress);
 }
 
-
 if (!bookId || !chapter || !provider) {
     reader.innerHTML = `
         <div class="loading-container">

views/anime/animes.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/views/css/globals.css">
     <link rel="stylesheet" href="/views/css/components/navbar.css">
     <link rel="stylesheet" href="/views/css/components/hero.css">
+    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
@@ -41,7 +42,6 @@
         <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
     </div>
 
-    <!-- Mejorado el contenedor de usuario con dropdown más completo -->
     <div class="nav-right">
         <div class="search-wrapper">
             <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -123,6 +123,73 @@
     </div>
 </div>
 
+<div class="modal-overlay" id="add-list-modal">
+    <div class="modal-content modal-list">
+        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
+        <h2 class="modal-title" id="modal-title">Add to List</h2>
+
+        <div class="modal-body">
+            <div class="modal-fields-grid">
+
+                <div class="form-group">
+                    <label>Status</label>
+                    <select id="entry-status" class="form-input">
+                        <option value="WATCHING">Watching</option>
+                        <option value="COMPLETED">Completed</option>
+                        <option value="PLANNING">Plan to Watch</option>
+                        <option value="PAUSED">Paused</option>
+                        <option value="DROPPED">Dropped</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label>Episodes Watched</label>
+                    <input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
+                </div>
+
+                <div class="form-group">
+                    <label>Your Score (0-10)</label>
+                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
+                </div>
+
+                <div class="form-group full-width">
+                    <div class="date-group">
+                        <div class="date-input-pair">
+                            <label for="entry-start-date">Start Date</label>
+                            <input type="date" id="entry-start-date" class="form-input">
+                        </div>
+                        <div class="date-input-pair">
+                            <label for="entry-end-date">End Date</label>
+                            <input type="date" id="entry-end-date" class="form-input">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="entry-repeat-count">Rewatch Count</label>
+                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
+                </div>
+
+                <div class="form-group notes-group">
+                    <label for="entry-notes">Notes</label>
+                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
+                </div>
+
+                <div class="form-group checkbox-group">
+                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
+                    <label for="entry-is-private">Mark as Private</label>
+                </div>
+
+            </div>
+        </div>
+
+        <div class="modal-actions">
+            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
+            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
+            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
+        </div>
+    </div>
+</div>
 <main>
     <section class="section">
         <div class="section-header">

views/books/books.html

@@ -8,6 +8,7 @@
     <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>
@@ -111,6 +112,71 @@
     </div>
 </div>
 
+<div class="modal-overlay" id="add-list-modal">
+    <div class="modal-content modal-list">
+        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
+        <h2 class="modal-title" id="modal-title">Add to Library</h2>
+
+        <div class="modal-body">
+            <div class="modal-fields-grid">
+
+                <div class="form-group">
+                    <label for="entry-status">Status</label>
+                    <select id="entry-status" class="form-input">
+                        <option value="CURRENT">Reading</option>
+                        <option value="COMPLETED">Completed</option>
+                        <option value="PLANNING">Plan to Read</option>
+                        <option value="PAUSED">Paused</option>
+                        <option value="DROPPED">Dropped</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label for="entry-progress" id="progress-label">Chapters Read</label>
+                    <input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
+                </div>
+
+                <div class="form-group">
+                    <label for="entry-score">Score (0-10)</label>
+                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
+                </div>
+
+                <div class="form-group full-width date-group">
+                    <div class="date-input-pair">
+                        <label for="entry-start-date">Start Date</label>
+                        <input type="date" id="entry-start-date" class="form-input">
+                    </div>
+                    <div class="date-input-pair">
+                        <label for="entry-end-date">End Date</label>
+                        <input type="date" id="entry-end-date" class="form-input">
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="entry-repeat-count">Re-read Count</label>
+                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
+                </div>
+
+                <div class="form-group notes-group">
+                    <label for="entry-notes">Notes</label>
+                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
+                </div>
+
+                <div class="form-group checkbox-group">
+                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
+                    <label for="entry-is-private">Mark as Private</label>
+                </div>
+
+            </div>
+        </div>
+
+        <div class="modal-actions">
+            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
+            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
+            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
+        </div>
+    </div>
+</div>
 <main>
     <section class="section">
         <div class="section-header">

views/css/components/anilist-modal.css

@@ -11,7 +11,7 @@
 }
 
 .modal-content {
-    background: var(--bg-amoled);
+    background: var(--color-bg-amoled);
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: var(--radius-lg);
     max-width: 900px;
@@ -56,8 +56,8 @@
 }
 
 .modal-close:hover {
-    background: var(--danger);
+    background: var(--color-danger);
-    border-color: var(--danger);
+    border-color: var(--color-danger);
 }
 
 .modal-title {
@@ -65,7 +65,7 @@
     font-weight: 800;
     padding: 1.5rem 2rem 0.5rem;
     margin-bottom: 0;
-    color: var(--text-primary);
+    color: var(--color-text-primary);
     border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 
@@ -77,7 +77,6 @@
     flex-grow: 1;
 }
 
-/* GRUPO PRINCIPAL DE CAMPOS */
 .modal-fields-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -91,7 +90,6 @@
     gap: 0.5rem;
 }
 
-/* Column Span Overrides */
 .form-group.notes-group {
     grid-column: 1 / span 2;
 }
@@ -104,19 +102,18 @@
     grid-column: 1 / -1;
 }
 
-
 .form-group label {
     font-size: 0.8rem;
     font-weight: 700;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .form-input {
-    background: var(--bg-field);
+    background: var(--color-bg-field);
     border: 1px solid rgba(255,255,255,0.1);
-    color: var(--text-primary);
+    color: var(--color-text-primary);
     padding: 0.8rem 1rem;
     border-radius: 8px;
     font-family: inherit;
@@ -126,8 +123,8 @@
 
 .form-input:focus {
     outline: none;
-    border-color: var(--accent);
+    border-color: var(--color-primary);
-    box-shadow: 0 0 10px var(--accent-glow);
+    box-shadow: 0 0 10px var(--color-primary-glow);
 }
 
 .notes-textarea {
@@ -140,7 +137,6 @@
     gap: 1rem;
 }
 
-/* CLAVE: Hace que la etiqueta de fecha esté encima del input */
 .date-input-pair {
     flex: 1;
     min-width: 0;
@@ -159,7 +155,7 @@
     width: 18px;
     height: 18px;
     border: 1px solid rgba(255,255,255,0.2);
-    background: var(--bg-base);
+    background: var(--color-bg-base);
     border-radius: 4px;
     cursor: pointer;
     -webkit-appearance: none;
@@ -170,8 +166,8 @@
 }
 
 .form-checkbox:checked {
-    background: var(--accent);
+    background: var(--color-primary);
-    border-color: var(--accent);
+    border-color: var(--color-primary);
 }
 
 .form-checkbox:checked::after {
@@ -184,7 +180,6 @@
     font-size: 14px;
 }
 
-/* ACCIONES (Barra inferior pegajosa) */
 .modal-actions {
     display: flex;
     gap: 1rem;
@@ -193,7 +188,7 @@
     flex-shrink: 0;
     padding: 1rem 2rem;
     border-top: 1px solid rgba(255,255,255,0.05);
-    background: var(--bg-amoled);
+    background: var(--color-bg-amoled);
     position: sticky;
     bottom: 0;
     z-index: 10;
@@ -211,7 +206,7 @@
 }
 
 .btn-primary {
-    background: var(--accent);
+    background: var(--color-primary);
     color: white;
 }
 
@@ -230,7 +225,7 @@
 }
 
 .btn-danger {
-    background: var(--danger);
+    background: var(--color-danger);
     color: white;
     margin-right: auto;
 }
@@ -248,7 +243,6 @@
     opacity: 1;
 }
 
-/* --- Media Queries (Responsive) --- */
 @media (max-width: 900px) {
     .modal-content {
         max-width: 95%;
@@ -271,3 +265,4 @@
         padding-right: 1.5rem;
     }
 }
+

views/gallery/image.html

@@ -97,7 +97,7 @@
     <div id="item-main-content" class="item-content"></div>
 
     <div id="similar-section" class="similar-section">
-      <p style="text-align:center;color:var(--text-secondary);opacity:0.7;padding:3rem 0;">Loading similar images...</p>
+      <p style="text-align:center;color:var(--color-text-secondary);opacity:0.7;padding:3rem 0;">Loading similar images...</p>
     </div>
   </section>
 </main>