finished gallery section

src/gallery/gallery.controller.ts

@@ -1,5 +1,6 @@
-import {FastifyReply} from 'fastify';
+import {FastifyReply, FastifyRequest} from 'fastify';
 import * as galleryService from './gallery.service';
+import {AddFavoriteBody, RemoveFavoriteParams} from '../types'
 
 export async function search(req: any, reply: FastifyReply) {
     try {
@@ -56,4 +57,89 @@ export async function getInfo(req: any, reply: FastifyReply) {
         console.error("Gallery Info Error:", error.message);
         return reply.code(404).send({ error: "Gallery item not found" });
     }
+}
+
+export async function getFavorites(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const favorites = await galleryService.getFavorites();
+        return { favorites };
+    } catch (err) {
+        const error = err as Error;
+        console.error("Get Favorites Error:", error.message);
+        return reply.code(500).send({ error: "Failed to retrieve favorites" });
+    }
+}
+
+export async function getFavoriteById(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        const { id } = req.params as { id: string };
+
+        const favorite = await galleryService.getFavoriteById(id);
+
+        if (!favorite) {
+            return reply.code(404).send({ error: "Favorite not found" });
+        }
+
+        return { favorite };
+
+    } catch (err) {
+        const error = err as Error;
+        console.error("Get Favorite By ID Error:", error.message);
+        return reply.code(500).send({ error: "Failed to retrieve favorite" });
+    }
+}
+
+
+export async function addFavorite(req: FastifyRequest<{ Body: AddFavoriteBody }>, reply: FastifyReply) {
+    try {
+        const {id, title, image_url, thumbnail_url, tags, provider, headers} = req.body;
+
+        if (!id || !title || !image_url || !thumbnail_url) {
+            return reply.code(400).send({
+                error: "Missing required fields: id, title, image_url, thumbnail_url"
+            });
+        }
+
+        const result = await galleryService.addFavorite({
+            id,
+            title,
+            image_url,
+            thumbnail_url,
+            tags: tags || '',
+            provider: provider || "",
+            headers: headers || ""
+        });
+
+        if (result.success) {
+            return reply.code(201).send(result);
+        } else {
+            return reply.code(409).send(result);
+        }
+
+    } catch (err) {
+        console.error("Add Favorite Error:", (err as Error).message);
+        return reply.code(500).send({ error: "Failed to add favorite" });
+    }
+}
+
+export async function removeFavorite(req: FastifyRequest<{ Params: RemoveFavoriteParams }>, reply: FastifyReply) {
+    try {
+        const { id } = req.params;
+
+        if (!id) {
+            return reply.code(400).send({ error: "Missing favorite ID" });
+        }
+
+        const result = await galleryService.removeFavorite(id);
+
+        if (result.success) {
+            return { success: true, message: "Favorite removed successfully" };
+        } else {
+            return reply.code(404).send({ error: "Favorite not found" });
+        }
+    } catch (err) {
+        const error = err as Error;
+        console.error("Remove Favorite Error:", error.message);
+        return reply.code(500).send({ error: "Failed to remove favorite" });
+    }
 }

src/gallery/gallery.routes.ts

@@ -5,6 +5,10 @@ async function galleryRoutes(fastify: FastifyInstance) {
     fastify.get('/gallery/search', controller.search);
     fastify.get('/gallery/fetch/:id', controller.getInfo);
     fastify.get('/gallery/search/provider', controller.searchInExtension);
+    fastify.get('/gallery/favorites', controller.getFavorites);
+    fastify.get('/gallery/favorites/:id', controller.getFavoriteById);
+    fastify.post('/gallery/favorites', controller.addFavorite);
+    fastify.delete('/gallery/favorites/:id', controller.removeFavorite);
 }
 
 export default galleryRoutes;

src/gallery/gallery.service.ts

@@ -1,5 +1,6 @@
 import { getAllExtensions, getExtension } from '../shared/extensions';
-import { GallerySearchResult, GalleryInfo } from '../types';
+import { GallerySearchResult, GalleryInfo, Favorite, FavoriteResult } from '../types';
+import { getDatabase } from '../shared/database';
 
 export async function searchGallery(query: string, page: number = 1, perPage: number = 48): Promise<GallerySearchResult> {
     const extensions = getAllExtensions();
@@ -7,7 +8,6 @@ export async function searchGallery(query: string, page: number = 1, perPage: nu
     for (const [name, ext] of extensions) {
         if (ext.type === 'image-board' && ext.search) {
             const result = await searchInExtension(name, query, page, perPage);
-            console.log(result);
             if (result.results.length > 0) {
                 return result;
             }
@@ -56,7 +56,7 @@ export async function getGalleryInfo(id: string, providerName?: string): Promise
                     ...info,
                     provider: name
                 };
-            } catch (e) {
+            } catch {
                 continue;
             }
         }
@@ -66,7 +66,6 @@ export async function getGalleryInfo(id: string, providerName?: string): Promise
 }
 
 export async function searchInExtension(providerName: string, query: string, page: number = 1, perPage: number = 48): Promise<GallerySearchResult> {
-
     const ext = getExtension(providerName);
 
     if (!ext || ext.type !== 'image-board' || !ext.search) {
@@ -101,4 +100,92 @@ export async function searchInExtension(providerName: string, query: string, pag
             results: []
         };
     }
+}
+
+export async function getFavorites(): Promise<Favorite[]> {
+    const db = getDatabase("favorites");
+
+    return new Promise((resolve) => {
+        db.all('SELECT * FROM favorites', [], (err: Error | null, rows: Favorite[]) => {
+            if (err) {
+                console.error('Error getting favorites:', err.message);
+                resolve([]);
+            } else {
+                resolve(rows);
+            }
+        });
+    });
+}
+
+export async function getFavoriteById(id: string): Promise<Favorite | null> {
+    const db = getDatabase("favorites");
+
+    return new Promise((resolve) => {
+        db.get(
+            'SELECT * FROM favorites WHERE id = ?',
+            [id],
+            (err: Error | null, row: Favorite | undefined) => {
+                if (err) {
+                    console.error('Error getting favorite by id:', err.message);
+                    resolve(null);
+                } else {
+                    resolve(row || null);
+                }
+            }
+        );
+    });
+}
+
+export async function addFavorite(fav: Favorite): Promise<FavoriteResult> {
+    const db = getDatabase("favorites");
+
+    return new Promise((resolve) => {
+        const stmt = `
+            INSERT INTO favorites (id, title, image_url, thumbnail_url, tags, headers, provider)
+            VALUES (?, ?, ?, ?, ?, ?, ?)
+        `;
+
+        db.run(
+            stmt,
+            [
+                fav.id,
+                fav.title,
+                fav.image_url,
+                fav.thumbnail_url,
+                fav.tags || "",
+                fav.headers || "",
+                fav.provider || ""
+            ],
+            function (err: any) {
+                if (err) {
+                    if (err.code && err.code.includes('SQLITE_CONSTRAINT')) {
+                        resolve({ success: false, error: 'Item is already a favorite.' });
+                    } else {
+                        console.error('Error adding favorite:', err.message);
+                        resolve({ success: false, error: err.message });
+                    }
+                } else {
+                    resolve({ success: true, id: fav.id });
+                }
+            }
+        );
+    });
+}
+
+export async function removeFavorite(id: string): Promise<FavoriteResult> {
+    const db = getDatabase("favorites");
+
+    return new Promise((resolve) => {
+        const stmt = 'DELETE FROM favorites WHERE id = ?';
+
+        db.run(stmt, [id], function (err: Error | null) {
+            if (err) {
+                console.error('Error removing favorite:', err.message);
+                resolve({ success: false, error: err.message });
+            } else {
+                // @ts-ignore - this.changes existe en el contexto de db.run
+                resolve({ success: this.changes > 0 });
+            }
+        });
+    });
 }

src/scripts/gallery/gallery.js

@@ -1,251 +1,378 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const providerSelector = document.getElementById('provider-selector');
-    const searchInput = document.getElementById('gallery-search-input');
-    const resultsContainer = document.getElementById('gallery-results');
-    const loadMoreBtn = document.getElementById('load-more-btn');
+const providerSelector = document.getElementById('provider-selector');
+const searchInput = document.getElementById('main-search-input');
+const resultsContainer = document.getElementById('gallery-results');
 
-    let currentPage = 1;
-    let currentProvider = '';
-    let currentQuery = '';
-    const perPage = 48;
+let currentPage = 1;
+let currentProvider = '';
+let currentQuery = '';
+const perPage = 48;
+let isLoading = false;
+let favorites = new Set();
+let favoritesMode = false;
 
-    let msnry = null;
+let msnry = null;
 
-    // --- MASONRY INITIALIZATION ---
-    function initializeMasonry() {
-        if (typeof Masonry === 'undefined') {
-            setTimeout(initializeMasonry, 100);
-            return;
+const sentinel = document.createElement('div');
+sentinel.id = 'infinite-scroll-sentinel';
+sentinel.style.height = '1px';
+sentinel.style.marginBottom = '300px';
+sentinel.style.display = 'none';
+resultsContainer.parentNode.appendChild(sentinel);
+
+function initializeMasonry() {
+    if (typeof Masonry === 'undefined') {
+        setTimeout(initializeMasonry, 100);
+        return;
+    }
+    if (msnry) msnry.destroy();
+    msnry = new Masonry(resultsContainer, {
+        itemSelector: '.gallery-card',
+        columnWidth: '.gallery-card',
+        percentPosition: true,
+        gutter: 0,
+        transitionDuration: '0.4s'
+    });
+    msnry.layout();
+}
+initializeMasonry();
+
+function getTagsArray(item) {
+    if (Array.isArray(item.tags)) return item.tags;
+    if (typeof item.tags === 'string') {
+        return item.tags
+            .split(',')
+            .map(t => t.trim())
+            .filter(t => t.length > 0);
+    }
+    return [];
+}
+
+function getProxiedImageUrl(item) {
+    const imageUrl = item.image || item.image_url;
+
+    if (!imageUrl || !item.headers) {
+        return imageUrl;
+    }
+
+    let proxyUrl = `/api/proxy?url=${encodeURIComponent(imageUrl)}`;
+
+    const headers = item.headers;
+    const lowerCaseHeaders = {};
+    for (const key in headers) {
+        if (Object.prototype.hasOwnProperty.call(headers, key)) {
+            lowerCaseHeaders[key.toLowerCase()] = headers[key];
+        }
+    }
+
+    const referer = lowerCaseHeaders.referer;
+    if (referer) {
+        proxyUrl += `&referer=${encodeURIComponent(referer)}`;
+    }
+
+    const origin = lowerCaseHeaders.origin;
+    if (origin) {
+        proxyUrl += `&origin=${encodeURIComponent(origin)}`;
+    }
+
+    const userAgent = lowerCaseHeaders['user-agent'];
+    if (userAgent) {
+        proxyUrl += `&userAgent=${encodeURIComponent(userAgent)}`;
+    }
+
+    return proxyUrl;
+}
+
+async function loadFavorites() {
+    try {
+        const res = await fetch('/api/gallery/favorites');
+        if (!res.ok) return;
+        const data = await res.json();
+        favorites.clear();
+        (data.favorites || []).forEach(fav => favorites.add(fav.id));
+    } catch (err) {
+        console.error('Error loading favorites:', err);
+    }
+}
+
+async function toggleFavorite(item) {
+    const id = item.id;
+    const isFav = favorites.has(id);
+
+    try {
+        if (isFav) {
+            await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`, { method: 'DELETE' });
+            favorites.delete(id);
+        } else {
+            const tagsArray = getTagsArray(item);
+
+            const serializedHeaders = item.headers ? JSON.stringify(item.headers) : "";
+
+            await fetch('/api/gallery/favorites', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    id: item.id,
+                    title: item.title || tagsArray.join(', ') || 'Untitled',
+                    image_url: item.image || item.image_url,
+                    thumbnail_url: item.image || item.image_url,
+                    tags: tagsArray.join(','),
+                    provider: item.provider || "",
+                    headers: serializedHeaders
+                })
+            });
+
+            favorites.add(id);
         }
 
-        if (msnry) {
-            msnry.destroy();
-        }
-
-        msnry = new Masonry(resultsContainer, {
-            itemSelector: '.gallery-card',
-            columnWidth: '.gallery-card',
-            percentPosition: true,
-            gutter: 0,
-            transitionDuration: '0.4s'
+        document.querySelectorAll(`.gallery-card[data-id="${CSS.escape(id)}"] .fav-btn`).forEach(btn => {
+            btn.classList.toggle('favorited', !isFav);
+            btn.innerHTML = !isFav
+                ? '<i class="fas fa-heart"></i>'
+                : '<i class="far fa-heart"></i>';
         });
+
+        if (providerSelector.value === 'favorites' && isFav) {
+            setTimeout(() => searchGallery(false), 300);
+        }
+
+    } catch (err) {
+        console.error('Error toggling favorite:', err);
+        alert('Error updating favorite');
+    }
+}
+
+function createGalleryCard(item) {
+    const card = document.createElement('a');
+    card.className = 'gallery-card grid-item';
+    card.href = `/gallery/${item.provider || currentProvider || 'unknown'}/${encodeURIComponent(item.id)}`;
+    card.dataset.id = item.id;
+
+    const img = document.createElement('img');
+    img.className = 'gallery-card-img';
+
+    img.src = getProxiedImageUrl(item);
+
+    img.alt = getTagsArray(item).join(', ') || 'Image';
+    img.loading = 'lazy';
+
+    const favBtn = document.createElement('button');
+    favBtn.className = 'fav-btn';
+    const isFav = favorites.has(item.id);
+    favBtn.classList.toggle('favorited', isFav);
+    favBtn.innerHTML = isFav ? '<i class="fas fa-heart"></i>' : '<i class="far fa-heart"></i>';
+    favBtn.onclick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        toggleFavorite(item);
+    };
+
+    card.appendChild(favBtn);
+    card.appendChild(img);
+
+    if (currentProvider !== 'favorites') {
+        const badge = document.createElement('div');
+        badge.className = 'provider-badge';
+        badge.textContent = item.provider || 'Global';
+        card.appendChild(badge);
+    } else {
+        const badge = document.createElement('div');
+        badge.className = 'provider-badge';
+        badge.textContent = 'Favorites';
+        badge.style.background = 'rgba(255,107,107,0.7)';
+        card.appendChild(badge);
+    }
+
+    img.onload = img.onerror = () => {
+        card.classList.add('is-loaded');
+        if (msnry) msnry.layout();
+    };
+
+    return card;
+}
+
+function showSkeletons(count, append = false) {
+    const skeleton = `<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>`;
+    if (!append) {
+        resultsContainer.innerHTML = '';
+        initializeMasonry();
+    }
+    const elements = [];
+    for (let i = 0; i < count; i++) {
+        const div = document.createElement('div');
+        div.innerHTML = skeleton;
+        const el = div.firstChild;
+        resultsContainer.appendChild(el);
+        elements.push(el);
+    }
+    if (msnry) {
+        msnry.appended(elements);
         msnry.layout();
     }
+    sentinel.style.display = 'none';
+    observer.unobserve(sentinel);
+}
 
-    initializeMasonry();
+async function searchGallery(isLoadMore = false) {
+    if (isLoading) return;
 
-    // --- UTILS ---
+    const query = searchInput.value.trim();
+    const provider = providerSelector.value;
+    const page = isLoadMore ? currentPage + 1 : 1;
 
-    /**
-     * Crea un elemento de tarjeta de resultado de galería.
-     */
-    function createGalleryCard(item) {
-        const card = document.createElement('a');
-        card.className = 'gallery-card grid-item';
+    favoritesMode = (provider === 'favorites');
 
-        const itemProvider = item.provider || currentProvider;
+    currentQuery = query;
+    currentProvider = provider;
 
-        // **********************************************
-        // CAMBIO: Nueva URL para la página de visualización
-        card.href = `/gallery/${itemProvider}/${item.id}`;
-        // **********************************************
-
-        const img = document.createElement('img');
-        img.className = 'gallery-card-img';
-        img.src = item.image;
-        img.alt = item.tags ? item.tags.join(', ') : 'Gallery Image';
-        img.loading = 'lazy';
-
-        img.onload = () => {
-            if (msnry) {
-                msnry.layout();
-                card.classList.add('is-loaded');
-            }
-        };
-        img.onerror = () => {
-            if (msnry) {
-                msnry.layout();
-                card.classList.add('is-loaded');
-            }
-        };
-
-        card.appendChild(img);
-
-        return card;
+    if (!isLoadMore) {
+        currentPage = 1;
+        showSkeletons(perPage);
+    } else {
+        showSkeletons(8, true);
     }
 
-    /**
-     * Muestra las tarjetas de esqueleto. (Sin cambios)
-     */
-    function showSkeletons(count, append = false) {
-        const skeletonMarkup = `<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>`;
+    isLoading = true;
 
-        if (!append) {
-            resultsContainer.innerHTML = '';
-            initializeMasonry();
-        }
+    try {
+        let data;
 
-        let newElements = [];
-        for (let i = 0; i < count; i++) {
-            const tempDiv = document.createElement('div');
-            tempDiv.innerHTML = skeletonMarkup.trim();
-            const skeletonEl = tempDiv.firstChild;
-            resultsContainer.appendChild(skeletonEl);
-            newElements.push(skeletonEl);
-        }
+        if (favoritesMode) {
+            const res = await fetch('/api/gallery/favorites');
+            data = await res.json();
 
-        if (msnry) {
-            msnry.appended(newElements);
-            msnry.layout();
-        }
-        loadMoreBtn.style.display = 'none';
-    }
-
-    // --- FETCH DATA --- (Sin cambios en loadExtensions y searchGallery)
-    async function loadExtensions() {
-        try {
-            const response = await fetch('/api/extensions/gallery');
-            const data = await response.json();
-
-            providerSelector.innerHTML = '';
-
-            if (data.extensions && data.extensions.length > 0) {
-                const defaultOption = document.createElement('option');
-                defaultOption.value = '';
-                defaultOption.textContent = 'Global Search';
-                providerSelector.appendChild(defaultOption);
-
-                data.extensions.forEach(ext => {
-                    const option = document.createElement('option');
-                    option.value = ext;
-                    option.textContent = ext;
-                    providerSelector.appendChild(option);
-                });
-
-                currentProvider = '';
-
-            } else {
-                providerSelector.innerHTML = '<option value="">No extensions found</option>';
+            let favoritesResults = data.favorites || [];
+            if (query) {
+                const lowerQuery = query.toLowerCase();
+                favoritesResults = favoritesResults.filter(fav =>
+                    (fav.title && fav.title.toLowerCase().includes(lowerQuery)) ||
+                    (fav.tags && fav.tags.toLowerCase().includes(lowerQuery))
+                );
             }
-        } catch (error) {
-            console.error('Error loading gallery extensions:', error);
-            providerSelector.innerHTML = '<option value="">Error loading extensions</option>';
-        }
-    }
 
+            data.results = favoritesResults.map(fav => ({
+                id: fav.id,
+                image: fav.image_url,
+                image_url: fav.image_url,
+                provider: fav.provider,
+                tags: fav.tags
+            }));
+            data.hasNextPage = false;
 
-    async function searchGallery(isLoadMore = false) {
-        const query = searchInput.value.trim();
-        const provider = providerSelector.value;
-        const page = isLoadMore ? currentPage + 1 : 1;
-
-        if (!isLoadMore && currentQuery === query && currentProvider === provider && currentPage === 1) {
-            return;
-        }
-
-        currentQuery = query;
-        currentProvider = provider;
-
-        if (!isLoadMore) {
-            currentPage = 1;
-            showSkeletons(perPage, false);
+        } else if (provider && provider !== '') {
+            const res = await fetch(`/api/gallery/search/provider?provider=${provider}&q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`);
+            data = await res.json();
         } else {
-            showSkeletons(8, true);
+            const res = await fetch(`/api/gallery/search?q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`);
+            data = await res.json();
         }
 
-        try {
-            let url;
-            if (provider && provider !== '') {
-                url = `/api/gallery/search/provider?provider=${provider}&q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`;
-            } else {
-                url = `/api/gallery/search?q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`;
-            }
+        const results = data.results || [];
 
-            const response = await fetch(url);
-            const data = await response.json();
+        const skeletons = resultsContainer.querySelectorAll('.gallery-card.skeleton');
+        const toRemove = isLoadMore ? Array.from(skeletons).slice(-8) : skeletons;
+        if (msnry) msnry.remove(toRemove);
+        toRemove.forEach(el => el.remove());
 
-            let newRealElements = [];
-            if (data.results && data.results.length > 0) {
-                data.results.forEach(item => {
-                    newRealElements.push(createGalleryCard(item));
-                });
-            }
+        const newCards = results.map(item => createGalleryCard(item));
+        newCards.forEach(card => resultsContainer.appendChild(card));
+        if (msnry) msnry.appended(newCards);
 
-            const allSkeletons = Array.from(resultsContainer.querySelectorAll('.gallery-card.skeleton'));
-            let skeletonsToRemove = isLoadMore ? allSkeletons.slice(-8) : allSkeletons;
-
-            if (msnry) {
-                msnry.remove(skeletonsToRemove);
-                skeletonsToRemove.forEach(s => s.remove());
-            }
-
-            if (newRealElements.length > 0) {
-                newRealElements.forEach(el => resultsContainer.appendChild(el));
-
-                if (msnry) {
-                    msnry.appended(newRealElements);
-                }
-                currentPage = isLoadMore ? currentPage + 1 : 1;
-
-            } else if (!isLoadMore) {
-                resultsContainer.innerHTML = '<p style="text-align:center; color: var(--text-secondary); padding: 2rem;">No results found for this search.</p>';
-            }
-
-            if (msnry) {
-                msnry.layout();
-            }
-
-            if (data.hasNextPage) {
-                loadMoreBtn.style.display = 'block';
-            } else {
-                loadMoreBtn.style.display = 'none';
-            }
-
-        } catch (error) {
-            console.error('Error during gallery search:', error);
-            if (!isLoadMore) {
-                resultsContainer.innerHTML = '<p style="text-align:center; color: red; padding: 2rem;">An error occurred while fetching results.</p>';
-            }
-            loadMoreBtn.style.display = 'none';
+        if (results.length === 0 && !isLoadMore) {
+            const msg = favoritesMode
+                ? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
+                : 'No results found';
+            resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
         }
+
+        if (msnry) msnry.layout();
+
+        if (!favoritesMode && data.hasNextPage) {
+            sentinel.style.display = 'block';
+            observer.observe(sentinel);
+        } else {
+            sentinel.style.display = 'none';
+            observer.unobserve(sentinel);
+        }
+
+        if (isLoadMore) currentPage++;
+        else currentPage = 1;
+
+    } catch (err) {
+        console.error('Error:', err);
+        if (!isLoadMore) {
+            resultsContainer.innerHTML = '<p style="text-align:center;color:red;padding:4rem;">Error loading gallery</p>';
+        }
+    } finally {
+        isLoading = false;
     }
+}
 
+async function loadExtensions() {
+    try {
+        const res = await fetch('/api/extensions/gallery');
+        const data = await res.json();
 
-    // --- EVENT LISTENERS (Sin cambios) ---
+        providerSelector.innerHTML = '';
 
-    providerSelector.addEventListener('change', () => {
+        const global = document.createElement('option');
+        global.value = '';
+        global.textContent = 'Global Search';
+        providerSelector.appendChild(global);
+
+        const favoritesOption = document.createElement('option');
+        favoritesOption.value = 'favorites';
+        favoritesOption.textContent = 'Favorites';
+        providerSelector.appendChild(favoritesOption);
+
+        (data.extensions || []).forEach(ext => {
+            const opt = document.createElement('option');
+            opt.value = ext;
+            opt.textContent = ext.charAt(0).toUpperCase() + ext.slice(1);
+            providerSelector.appendChild(opt);
+        });
+
+    } catch (err) {
+        console.error('Error loading extensions:', err);
+    }
+}
+
+providerSelector.addEventListener('change', () => {
+    if (providerSelector.value === 'favorites') {
+        searchInput.placeholder = "Search in favorites...";
+    } else {
+        searchInput.placeholder = "Search in gallery...";
+    }
+    searchGallery(false);
+});
+
+let searchTimeout;
+
+searchInput.addEventListener('input', () => {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
         searchGallery(false);
-    });
-
-    let searchTimeout;
-    searchInput.addEventListener('input', () => {
+    }, 500);
+});
+searchInput.addEventListener('keydown', e => {
+    if (e.key === 'Enter') {
         clearTimeout(searchTimeout);
-        searchTimeout = setTimeout(() => {
-            searchGallery(false);
-        }, 500);
-    });
-    searchInput.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
-            clearTimeout(searchTimeout);
-            searchGallery(false);
-        }
-    });
+        searchGallery(false);
+    }
+});
 
-    loadMoreBtn.addEventListener('click', () => {
+const observer = new IntersectionObserver(entries => {
+    if (entries[0].isIntersecting && !isLoading && !favoritesMode) {
+        observer.unobserve(sentinel);
         searchGallery(true);
-    });
+    }
+}, { rootMargin: '1000px' });
 
+loadFavorites().then(() => {
     loadExtensions().then(() => {
         searchGallery(false);
     });
+});
 
-    const navbar = document.getElementById('navbar');
-    window.addEventListener('scroll', () => {
-        if (window.scrollY > 50) {
-            navbar.classList.add('scrolled');
-        } else {
-            navbar.classList.remove('scrolled');
-        }
-    });
-
+window.addEventListener('scroll', () => {
+    document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50);
 });

src/scripts/gallery/image.js

@@ -1,139 +1,302 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const itemContentContainer = document.getElementById('item-content');
+const itemMainContentContainer = document.getElementById('item-main-content');
+let currentItem = null;
 
-    // Función para parsear la URL y obtener :provider y :id
-    function getUrlParams() {
-        // La URL esperada es /gallery/providerName/itemId
-        const pathSegments = window.location.pathname.split('/').filter(segment => segment);
-
-        // Verifica si la estructura es /gallery/provider/id
-        if (pathSegments.length >= 3 && pathSegments[0] === 'gallery') {
-            return {
-                provider: pathSegments[1],
-                id: pathSegments.slice(2).join('/') // El ID puede contener barras, así que unimos el resto
-            };
-        }
-        return null;
+function getProxiedItemUrl(url, headers = null) {
+    if (!url || !headers) {
+        return url;
     }
 
-    async function fetchGalleryItem(provider, id) {
-        try {
-            // Llama al endpoint de la API con los parámetros obtenidos
-            const url = `/api/gallery/fetch/${id}?provider=${provider}`;
-            const response = await fetch(url);
+    let proxyUrl = `/api/proxy?url=${encodeURIComponent(url)}`;
 
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || `Failed to fetch item from ${provider}.`);
-            }
-
-            const data = await response.json();
-
-            // Verifica los campos clave del nuevo formato de respuesta
-            if (!data.fullImage) {
-                throw new Error("Invalid item structure: Missing 'fullImage' URL.");
-            }
-
-            // Normalizar los datos para la plantilla (usando 'publishedBy' como título si 'title' no existe)
-            data.title = data.publishedBy || data.id;
-
-            renderItem(data);
-
-        } catch (error) {
-            console.error("Fetch Gallery Item Error:", error);
-            renderError(`The requested item could not be found or an error occurred. (${error.message})`);
+    const lowerCaseHeaders = {};
+    for (const key in headers) {
+        if (Object.prototype.hasOwnProperty.call(headers, key)) {
+            lowerCaseHeaders[key.toLowerCase()] = headers[key];
         }
     }
 
-    /**
-     * Renderiza el contenido del ítem de la galería.
-     * @param {Object} item - Objeto de respuesta de la API.
-     */
-    function renderItem(item) {
-        const title = item.title;
-        document.getElementById('page-title').textContent = `WaifuBoard - ${title}`;
+    const referer = lowerCaseHeaders.referer;
+    if (referer) {
+        proxyUrl += `&referer=${encodeURIComponent(referer)}`;
+    }
 
-        // Limpiar el esqueleto
-        itemContentContainer.innerHTML = '';
+    const origin = lowerCaseHeaders.origin;
+    if (origin) {
+        proxyUrl += `&origin=${encodeURIComponent(origin)}`;
+    }
 
-        const imageUrl = item.fullImage || item.resizedImageUrl; // Usar fullImage para la más alta resolución
+    const userAgent = lowerCaseHeaders['user-agent'];
+    if (userAgent) {
+        proxyUrl += `&userAgent=${encodeURIComponent(userAgent)}`;
+    }
 
-        const itemHTML = `
-            <div class="image-col">
-                <img id="main-image" class="item-image" src="${imageUrl}" alt="${title}">
+    return proxyUrl;
+}
+
+function getUrlParams() {
+    const path = window.location.pathname.split('/').filter(s => s);
+    if (path.length < 3 || path[0] !== 'gallery') return null;
+
+    if (path[1] === 'favorites' && path[2]) {
+        return { fromFavorites: true, id: path[2] };
+    } else {
+        return { provider: path[1], id: path.slice(2).join('/') };
+    }
+}
+
+async function toggleFavorite() {
+    if (!currentItem?.id) return;
+
+    const btn = document.getElementById('fav-btn');
+    const wasFavorited = btn.classList.contains('favorited');
+
+    try {
+        if (wasFavorited) {
+            await fetch(`/api/gallery/favorites/${encodeURIComponent(currentItem.id)}`, { method: 'DELETE' });
+        } else {
+            const serializedHeaders = currentItem.headers ? JSON.stringify(currentItem.headers) : "";
+            const tagsString = Array.isArray(currentItem.tags) ? currentItem.tags.join(',') : (currentItem.tags || '');
+
+            await fetch('/api/gallery/favorites', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    id: currentItem.id,
+                    title: currentItem.title || 'Waifu',
+                    image_url: currentItem.originalImage,
+                    thumbnail_url: currentItem.originalImage,
+                    tags: tagsString,
+                    provider: currentItem.provider || "",
+                    headers: serializedHeaders
+                })
+            });
+        }
+
+        btn.classList.toggle('favorited', !wasFavorited);
+        btn.innerHTML = !wasFavorited
+            ? `<i class="fas fa-heart"></i> Saved!`
+            : `<i class="far fa-heart"></i> Save Image`;
+
+    } catch (err) {
+        console.error('Error toggling favorite:', err);
+        alert('Error updating favorites');
+    }
+}
+
+function copyLink() {
+    navigator.clipboard.writeText(window.location.href);
+    const btn = document.getElementById('copy-link-btn');
+    const old = btn.innerHTML;
+    btn.innerHTML = `<i class="fas fa-check"></i> Copied!`;
+    setTimeout(() => btn.innerHTML = old, 2000);
+}
+
+async function loadSimilarImages(item) {
+    if (!item.tags || item.tags.length === 0) {
+        document.getElementById('similar-section').innerHTML = '<p style="text-align:center;color:var(--text-secondary);padding:3rem 0;">No tags available to search for similar images.</p>';
+        return;
+    }
+
+    const firstTag = item.tags[0];
+    const container = document.getElementById('similar-section');
+
+    try {
+        const res = await fetch(`/api/gallery/search?q=${encodeURIComponent(firstTag)}&perPage=20`);
+        if (!res.ok) throw new Error();
+
+        const data = await res.json();
+        const results = (data.results || [])
+            .filter(r => r.id !== item.id)
+            .slice(0, 15);
+
+        if (results.length === 0) {
+            container.innerHTML = '<p style="text-align:center;color:var(--text-secondary);padding:3rem 0;">No similar images found.</p>';
+            return;
+        }
+
+        container.innerHTML = `
+            <h3 style="text-align:center;margin:2rem 0 1.5rem;font-size:1.7rem;">
+                More images tagged with "<span style="color:var(--accent);">${firstTag}</span>"
+            </h3>
+            <div class="similar-grid">
+                ${results.map(img => {
+            const imageUrl = img.image || img.image_url || img.thumbnail_url;
+            const proxiedUrl = getProxiedItemUrl(imageUrl, img.headers);
+
+            return `
+                        <a href="/gallery/${img.provider || 'unknown'}/${encodeURIComponent(img.id)}" class="similar-card">
+                            <img src="${proxiedUrl}" alt="Similar" loading="lazy">
+                            <div class="similar-overlay">${img.provider || 'Global'}</div>
+                        </a>
+                    `;
+        }).join('')}
             </div>
+        `;
+
+    } catch (err) {
+        container.innerHTML = '<p style="text-align:center;color:var(--text-secondary);opacity:0.6;padding:3rem 0;">Could not load similar images.</p>';
+    }
+}
+
+function renderItem(item) {
+    const proxiedFullImage = getProxiedItemUrl(item.fullImage, item.headers);
+
+    let sourceText;
+    if (item.fromFavorites) {
+        sourceText = item.headers && item.provider && item.provider !== 'Favorites'
+            ? `Source: ${item.provider}`
+            : 'Favorites';
+    } else {
+        sourceText = `Source: ${item.provider}`;
+    }
+
+    const originalProviderText = (item.fromFavorites && item.provider && item.provider !== 'Favorites')
+        ? ` (Original: ${item.provider})`
+        : '';
+
+    itemMainContentContainer.innerHTML = `
+        <div class="item-content-flex-wrapper">
+            <div class="image-col">
+                <img class="item-image loaded" src="${proxiedFullImage}" alt="${item.title}">
+            </div>
+
             <div class="info-col">
                 <div class="info-header">
-                    <span class="provider-name">Source: ${item.provider} / Published By: ${item.publishedBy || 'N/A'}</span>
-                    <h1>${title}</h1>
+                    <span class="provider-name">
+                        ${sourceText}${originalProviderText} 
+                    </span>
+                    <h1>${item.title}</h1>
+                </div>
+
+                <div class="actions-row">
+                    <button id="fav-btn" class="action-btn fav-action">
+                        <i class="far fa-heart"></i> Save Image
+                    </button>
+
+                    <button id="copy-link-btn" class="action-btn copy-link-btn">
+                        <i class="fas fa-link"></i> Copy Link
+                    </button>
                 </div>
 
                 <div class="tags-section">
                     <h3>Tags</h3>
-                    <div class="tag-list" id="tag-list">
-                        </div>
+                    <div class="tag-list">
+                        ${item.tags.length > 0
+        ? item.tags.map(tag => `
+                                <a class="tag-item">${tag}</a>
+                            `).join('')
+        : '<span style="opacity:0.6;color:var(--text-secondary);">No tags</span>'
+    }
+                    </div>
                 </div>
-                
-                <a href="${imageUrl}" download="${title.replace(/ /g, '_')}_${item.id.replace(/-/g, '_')}.jpg" class="download-btn">
-                    <i class="fa-solid fa-download"></i> Download Full Image
-                </a>
             </div>
-        `;
+        </div>
+    `;
 
-        itemContentContainer.innerHTML = itemHTML;
+    document.getElementById('fav-btn').addEventListener('click', toggleFavorite);
+    document.getElementById('copy-link-btn').addEventListener('click', copyLink);
 
-        // Renderizar Tags
-        const tagListContainer = document.getElementById('tag-list');
-        if (item.tags && item.tags.length > 0) {
-            item.tags.forEach(tag => {
-                const tagEl = document.createElement('a');
-                tagEl.className = 'tag-item';
-                tagEl.textContent = tag;
-                // Enlazar a una búsqueda en la galería por el tag y el provider
-                tagEl.href = `/art?provider=${item.provider}&q=${encodeURIComponent(tag)}`;
-                tagListContainer.appendChild(tagEl);
-            });
-        } else {
-            tagListContainer.innerHTML = '<p class="tag-item" style="background:none; color:var(--text-secondary);">No tags available.</p>';
-        }
+    loadSimilarImages(item);
+}
 
-        // Habilitar fade-in de la imagen una vez que se carga
-        const mainImage = document.getElementById('main-image');
-        mainImage.onload = () => {
-            mainImage.classList.add('loaded');
+function renderError(msg) {
+    itemMainContentContainer.innerHTML = `
+        <div style="text-align:center;padding:8rem 1rem;">
+            <i class="fa-solid fa-heart-crack" style="font-size:5rem;color:#ff6b6b;opacity:0.7;"></i>
+            <h2 style="margin:2rem 0;color:var(--text-primary);">Image Not Available</h2>
+            <p style="color:var(--text-secondary);max-width:600px;margin:0 auto 2rem;">${msg}</p>
+            <a href="/gallery" style="padding:1rem 2.5rem;background:var(--accent);color:white;border-radius:99px;text-decoration:none;font-weight:600;">
+                Back to Gallery
+            </a>
+        </div>
+    `;
+
+    document.getElementById('similar-section').style.display = 'none';
+}
+
+async function loadFromFavorites(id) {
+    try {
+        const res = await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`);
+        if (!res.ok) throw new Error('Not found');
+
+        const { favorite: fav } = await res.json();
+
+        const item = {
+            id: fav.id,
+            title: fav.title || 'No title',
+            fullImage: fav.image_url,
+            originalImage: fav.image_url,
+            tags: typeof fav.tags === 'string' ? fav.tags.split(',').map(t => t.trim()).filter(Boolean) : (fav.tags || []),
+            provider: 'Favorites',
+            fromFavorites: true,
+            headers: fav.headers
         };
-        // Para imágenes que ya están en caché
-        if (mainImage.complete) {
-            mainImage.classList.add('loaded');
+
+        currentItem = item;
+        renderItem(item);
+        document.getElementById('page-title').textContent = `WaifuBoard - ${item.title}`;
+
+        document.getElementById('fav-btn')?.classList.add('favorited');
+        const btn = document.getElementById('fav-btn');
+        if (btn) {
+            btn.innerHTML = `<i class="fa-solid fa-heart"></i> Saved!`;
         }
-    }
 
-    function renderError(message) {
-        itemContentContainer.innerHTML = `
-            <div style="text-align:center; padding: 5rem 0; width: 100%;">
-                <i class="fa-solid fa-circle-exclamation" style="font-size: 3rem; color: #ff5c5c;"></i>
-                <h2 style="color: #ff5c5c; margin-top: 1rem;">Item Not Found</h2>
-                <p style="color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem;">${message}</p>
-                <a href="/art" class="btn-primary" style="margin-top: 2rem;">Go back to Gallery</a>
-            </div>
-        `;
+    } catch (err) {
+        renderError('This image is no longer in your favorites.');
     }
+}
 
-    // --- Inicialización ---
+async function loadFromProvider(provider, id) {
+    try {
+        const res = await fetch(`/api/gallery/fetch/${id}?provider=${provider}`);
+        if (!res.ok) throw new Error();
+
+        const data = await res.json();
+        if (!data.fullImage) throw new Error();
+
+        const item = {
+            id,
+            title: data.title || data.publishedBy || 'Beautiful Art',
+            fullImage: data.fullImage,
+            originalImage: data.fullImage,
+            tags: data.tags || [],
+            provider,
+            headers: data.headers
+        };
+
+        currentItem = item;
+        renderItem(item);
+        document.getElementById('page-title').textContent = `WaifuBoard - ${item.title}`;
+
+        const favRes = await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`);
+        if (favRes.ok) {
+            document.getElementById('fav-btn')?.classList.add('favorited');
+            const btn = document.getElementById('fav-btn');
+            if (btn) {
+                btn.innerHTML = `<i class="fa-solid fa-heart"></i> Saved!`;
+            }
+        }
+
+    } catch (err) {
+        renderError('Image not found.');
+    }
+}
+
+if (itemMainContentContainer) {
     const params = getUrlParams();
-    if (params && params.provider && params.id) {
-        fetchGalleryItem(params.provider, params.id);
+    if (!params) {
+        renderError('Invalid URL');
+    } else if (params.fromFavorites) {
+        loadFromFavorites(params.id);
     } else {
-        renderError("Invalid URL format. Expected: /gallery/&lt;provider&gt;/&lt;id&gt;");
+        loadFromProvider(params.provider, params.id);
     }
+} else {
+    document.getElementById('item-content').innerHTML = `<p style="text-align:center;padding:5rem;color:red;">Error: HTML container 'item-main-content' not found. Please update gallery-image.html.</p>`;
+    document.getElementById('similar-section').style.display = 'none';
+}
 
-    // Estilo de Navbar (reutilizado)
-    const navbar = document.getElementById('navbar');
-    window.addEventListener('scroll', () => {
-        if (window.scrollY > 50) {
-            navbar.classList.add('scrolled');
-        } else {
-            navbar.classList.remove('scrolled');
-        }
-    });
+window.addEventListener('scroll', () => {
+    document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50);
 });

src/shared/database.js

@@ -1,48 +1,166 @@
 const sqlite3 = require('sqlite3').verbose();
-const path = require('path');
+const os = require("os");
+const path = require("path");
+const fs = require("fs");
 
-const DB_PATH = path.join(__dirname, '..', 'metadata', 'anilist_anime.db');
-let db = null;
+const databases = new Map();
 
-function initDatabase() {
-    db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => {
+const DEFAULT_PATHS = {
+    anilist: path.join(__dirname, '..', 'metadata', 'anilist_anime.db'),
+    favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db")
+};
+
+function ensureFavoritesDB(dbPath) {
+    const dir = path.dirname(dbPath);
+
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+
+    const exists = fs.existsSync(dbPath);
+
+    const db = new sqlite3.Database(
+        dbPath,
+        sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE
+    );
+
+    return new Promise((resolve, reject) => {
+
+        if (!exists) {
+            const schema = `
+                CREATE TABLE IF NOT EXISTS favorites (
+                                                         id TEXT PRIMARY KEY,
+                                                         title TEXT NOT NULL,
+                                                         image_url TEXT NOT NULL,
+                                                         thumbnail_url TEXT NOT NULL DEFAULT "",
+                                                         tags TEXT NOT NULL DEFAULT "",
+                                                         headers TEXT NOT NULL DEFAULT "",
+                                                         provider TEXT NOT NULL DEFAULT ""
+                );
+            `;
+
+            db.exec(schema, (err) => {
+                if (err) reject(err);
+                else resolve(true);
+            });
+
+            return;
+        }
+
+        db.all(`PRAGMA table_info(favorites)`, (err, cols) => {
+            if (err) return reject(err);
+
+            const hasHeaders  = cols.some(c => c.name === "headers");
+            const hasProvider = cols.some(c => c.name === "provider");
+
+            const queries = [];
+
+            if (!hasHeaders) {
+                queries.push(
+                    `ALTER TABLE favorites ADD COLUMN headers TEXT NOT NULL DEFAULT ""`
+                );
+            }
+
+            if (!hasProvider) {
+                queries.push(
+                    `ALTER TABLE favorites ADD COLUMN provider TEXT NOT NULL DEFAULT ""`
+                );
+            }
+
+            if (queries.length === 0) {
+                return resolve(false);
+            }
+
+            db.exec(queries.join(";"), (err) => {
+                if (err) reject(err);
+                else resolve(true);
+            });
+        });
+    });
+}
+
+function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
+    if (databases.has(name)) {
+        return databases.get(name);
+    }
+
+    const finalPath = dbPath || DEFAULT_PATHS[name] || DEFAULT_PATHS.anilist;
+
+    if (name === "favorites") {
+        ensureFavoritesDB(finalPath)
+            .catch(err => console.error("Error creando favorites:", err));
+    }
+
+    const mode = readOnly ? sqlite3.OPEN_READONLY : (sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE);
+
+    const db = new sqlite3.Database(finalPath, mode, (err) => {
         if (err) {
-            console.error("Database Error:", err.message);
+            console.error(`Database Error (${name}):`, err.message);
         } else {
-            console.log("Connected to local AniList database.");
+            console.log(`Connected to ${name} database at ${finalPath}`);
         }
     });
+
+    databases.set(name, db);
     return db;
 }
 
-function getDatabase() {
-    if (!db) {
-        throw new Error("Database not initialized. Call initDatabase() first.");
+function getDatabase(name = 'anilist') {
+    if (!databases.has(name)) {
+        return initDatabase(name, null, name === 'anilist');
     }
-    return db;
+    return databases.get(name);
 }
 
-function queryOne(sql, params = []) {
+function queryOne(sql, params = [], dbName = 'anilist') {
     return new Promise((resolve, reject) => {
-        getDatabase().get(sql, params, (err, row) => {
+        getDatabase(dbName).get(sql, params, (err, row) => {
             if (err) reject(err);
             else resolve(row);
         });
     });
 }
 
-function queryAll(sql, params = []) {
+function queryAll(sql, params = [], dbName = 'anilist') {
     return new Promise((resolve, reject) => {
-        getDatabase().all(sql, params, (err, rows) => {
+        getDatabase(dbName).all(sql, params, (err, rows) => {
             if (err) reject(err);
             else resolve(rows || []);
         });
     });
 }
 
+function run(sql, params = [], dbName = 'anilist') {
+    return new Promise((resolve, reject) => {
+        getDatabase(dbName).run(sql, params, function(err) {
+            if (err) reject(err);
+            else resolve({ changes: this.changes, lastID: this.lastID });
+        });
+    });
+}
+
+function closeDatabase(name = null) {
+    if (name) {
+        const db = databases.get(name);
+        if (db) {
+            db.close();
+            databases.delete(name);
+            console.log(`Closed ${name} database`);
+        }
+    } else {
+        for (const [dbName, db] of databases) {
+            db.close();
+            console.log(`Closed ${dbName} database`);
+        }
+        databases.clear();
+    }
+}
+
 module.exports = {
     initDatabase,
     getDatabase,
     queryOne,
-    queryAll
+    queryAll,
+    run,
+    closeDatabase
 };

src/types.ts

@@ -255,4 +255,34 @@ export interface GalleryInfoRequest extends FastifyRequest {
     query: {
         provider?: string;
     };
+}
+
+export interface AddFavoriteBody {
+    id: string;
+    title: string;
+    image_url: string;
+    thumbnail_url: string;
+    tags?: string;
+    provider: string;
+    headers: string;
+}
+
+export interface RemoveFavoriteParams {
+    id: string;
+}
+
+export interface Favorite {
+    id: string;
+    title: string;
+    image_url: string;
+    thumbnail_url: string;
+    tags: string;
+    provider: string;
+    headers: string;
+}
+
+export interface FavoriteResult {
+    success: boolean;
+    error?: string;
+    id?: string;
 }

src/views/views.routes.ts

@@ -29,6 +29,11 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(stream);
     });
 
+    fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => {
+        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery-image.html'));
+        reply.type('text/html').send(stream);
+    });
+
     fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
         const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime.html'));
         reply.type('text/html').send(stream);