Initial Commit
This commit is contained in:
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/node_modules
|
||||
/dist
|
||||
BIN
build/waifuboards.ico
Normal file
BIN
build/waifuboards.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
381
index.html
Normal file
381
index.html
Normal file
@@ -0,0 +1,381 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="Content-Security-Policy" content="
|
||||
default-src 'self';
|
||||
script-src 'self' https://cdn.tailwindcss.com;
|
||||
style-src 'self' https://cdn.tailwindcss.com 'unsafe-inline';
|
||||
img-src 'self' https: data:;
|
||||
connect-src 'self' https:;
|
||||
" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Waifu Board</title>
|
||||
<!-- We'll use Tailwind CSS for a modern, professional look -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Simple scrollbar styling for the dark theme */
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #111827;
|
||||
/* Tailwind gray-900 */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1f2937;
|
||||
/* gray-800 */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #4b5563;
|
||||
/* gray-600 */
|
||||
border-radius: 5px;
|
||||
border: 2px solid #1f2937;
|
||||
/* gray-800 */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #6b7280;
|
||||
/* gray-500 */
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Simple focus ring for dark mode */
|
||||
.dark-focus-ring:focus {
|
||||
outline: 2px solid #4f46e5;
|
||||
/* indigo-600 */
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Style for the active source button in the sidebar */
|
||||
.source-button.active {
|
||||
background-color: #4f46e5;
|
||||
/* indigo-600 */
|
||||
color: white;
|
||||
/* Add a ring to the active favicon */
|
||||
outline: 2px solid #4f46e5;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Group hover for showing buttons on image cards */
|
||||
.image-entry:hover .image-buttons {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* --- MODIFIED --- */
|
||||
/* This is the new "Compact" layout (formerly "Grid") */
|
||||
/* It uses a standard, uniform grid */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* --- NEW --- */
|
||||
/* This is the new "Grid" layout (Masonry/Waterfall) */
|
||||
/* It uses CSS columns to create a height-responsive layout */
|
||||
.gallery-masonry {
|
||||
/* Set column count based on screen size */
|
||||
column-count: 2;
|
||||
/* 2 columns on small screens */
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.gallery-masonry {
|
||||
column-count: 3;
|
||||
/* 3 columns on medium screens */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.gallery-masonry {
|
||||
column-count: 4;
|
||||
/* 4 columns on large screens */
|
||||
}
|
||||
}
|
||||
|
||||
/* This tells each card in Masonry how to behave */
|
||||
.gallery-masonry .image-entry {
|
||||
display: inline-block;
|
||||
/* Respect the column flow */
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
/* Vertical gap */
|
||||
break-inside: avoid;
|
||||
/* Prevent cards from breaking across columns */
|
||||
}
|
||||
|
||||
/* --- Toast Notification Styling --- */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 15px 25px 15px 15px;
|
||||
/* Extra padding on the right for the close button */
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
/* Allows 'X' button to align to the right */
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 300px;
|
||||
z-index: 1000;
|
||||
/* Ensure it's above other elements */
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Red style for the 'out of date' notification */
|
||||
.toast.update-available {
|
||||
background-color: #e53935;
|
||||
/* A strong red */
|
||||
}
|
||||
|
||||
/* State for hiding the toast */
|
||||
.toast.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
/* Prevents interaction when hidden */
|
||||
}
|
||||
|
||||
.toast p {
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
/* Allows the text to take up most of the space */
|
||||
}
|
||||
|
||||
/* Styling for the close button */
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
padding: 5px;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="text-gray-200 flex h-screen overflow-hidden">
|
||||
<!-- Sidebar: Main Navigation -->
|
||||
<nav class="w-20 bg-gray-900 flex flex-col items-center flex-shrink-0 p-4 space-y-6">
|
||||
<!-- Home / Browse -->
|
||||
<button id="browse-button" class="nav-button p-3 rounded-xl bg-indigo-600 text-white" title="Browse">
|
||||
<!-- Heroicon: Home -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Favorites -->
|
||||
<button id="favorites-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
title="Favorites">
|
||||
<!-- Heroicon: Star -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.31h5.518a.562.562 0 01.31.95l-4.203 3.03a.563.563 0 00-.182.53l1.501 4.87a.562.562 0 01-.82.624l-4.204-3.03a.563.563 0 00-.576 0l-4.204 3.03a.562.562 0 01-.82-.624l1.501-4.87a.563.563 0 00-.182-.53L2.498 9.87a.562.562 0 01.31-.95h5.518a.563.563 0 00.475-.31L11.48 3.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Search -->
|
||||
<button id="search-icon-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
title="Search">
|
||||
<!-- Heroicon: Magnifying Glass -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- NEW: Settings Button -->
|
||||
<button id="settings-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
title="Settings">
|
||||
<!-- Heroicon: Cog 6 Tooth -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-1.003 1.114-1.114.554-.111 1.085-.111 1.64 0 .554.111 1.023.571 1.114 1.114.09.542.09 1.12 0 1.662-.09.542-.56 1.003-1.114 1.114a3.49 3.49 0 01-1.64 0c-.554-.111-1.023-.571-1.114-1.114-.09-.542-.09-1.12 0-1.662zM21 12a9 9 0 11-18 0 9 9 0 0118 0zM7.16 14.969c.09-.542.56-1.003 1.114-1.114.554-.111 1.085-.111 1.64 0 .554.111 1.023.571 1.114 1.114.09.542.09 1.12 0 1.662-.09.542-.56 1.003-1.114 1.114a3.49 3.49 0 01-1.64 0c-.554-.111-1.023-.571-1.114-1.114-.09-.542-.09-1.12 0-1.662zM14.969 7.16c.09-.542.56-1.003 1.114-1.114.554-.111 1.085-.111 1.64 0 .554.111 1.023.571 1.114 1.114.09.542.09 1.12 0 1.662-.09.542-.56 1.003-1.114 1.114a3.49 3.49 0 01-1.64 0c-.554-.111-1.023-.571-1.114-1.114-.09-.542-.09-1.12 0-1.662z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="h-px w-10 bg-gray-700"></div>
|
||||
|
||||
<!-- Source List (Dynamically Populated) -->
|
||||
<div id="source-list" class="flex flex-col items-center space-y-4" aria-label="Sources">
|
||||
<!-- Source buttons will be injected here by renderer.js -->
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<!-- Contextual Header -->
|
||||
<header class="bg-gray-800 flex-shrink-0 flex items-center justify-between p-4 border-b border-gray-700 h-[69px]">
|
||||
<h1 id="page-title" class="text-xl font-bold text-gray-100">Browse</h1>
|
||||
<div id="header-context" class="text-sm text-gray-400"></div>
|
||||
</header>
|
||||
|
||||
<!-- Page: Browse -->
|
||||
<!-- MODIFIED: Changed overflow-hidden to overflow-y-auto -->
|
||||
<div id="browse-page" class="page flex-1 overflow-y-auto">
|
||||
<!-- Content Gallery: Layout classes will be added by JS -->
|
||||
<main id="content-gallery" class="p-4 w-full" aria-live="polite">
|
||||
<!-- Loading spinner -->
|
||||
<div id="loading-spinner" class="hidden text-center p-10 text-gray-400">
|
||||
<!-- Tailwind Spinner -->
|
||||
<svg class="animate-spin h-8 w-8 text-indigo-400 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
<p class="mt-2">Loading...</p>
|
||||
</div>
|
||||
<!-- Search results will be injected here -->
|
||||
<p id="gallery-placeholder" class="text-gray-400 text-center text-lg">
|
||||
Select a source and click the search icon to browse.
|
||||
</p>
|
||||
|
||||
<!-- NEW: Infinite Scroll Loading Spinner -->
|
||||
<div id="infinite-loading-spinner" class="hidden text-center p-10 text-gray-400">
|
||||
<!-- Tailwind Spinner -->
|
||||
<svg class="animate-spin h-8 w-8 text-indigo-400 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||||
</path>
|
||||
</svg>
|
||||
<p class="mt-2">Loading more...</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Page: Favorites -->
|
||||
<!-- MODIFIED: Changed overflow-hidden to overflow-y-auto -->
|
||||
<div id="favorites-page" class="page hidden flex-1 overflow-y-auto">
|
||||
<!-- Favorites Gallery: Layout classes will be added by JS -->
|
||||
<main id="favorites-gallery" class="p-4 w-full">
|
||||
<!-- Favorite items will be injected here -->
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- NEW: Settings Page -->
|
||||
<div id="settings-page" class="page hidden flex-1 overflow-y-auto p-8">
|
||||
<div class="max-w-2xl mx-auto space-y-8">
|
||||
<h2 class="text-2xl font-bold text-white">Settings</h2>
|
||||
|
||||
<!-- Layout Options -->
|
||||
<div class="bg-gray-800 rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-100 mb-4">
|
||||
Gallery Layout
|
||||
</h3>
|
||||
<fieldset class="space-y-4">
|
||||
<!-- Scroll -->
|
||||
<label for="layout-scroll" class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer">
|
||||
<input type="radio" id="layout-scroll" name="layout" value="scroll"
|
||||
class="h-5 w-5 text-indigo-600 border-gray-500 focus:ring-indigo-500" />
|
||||
<span class="ml-3 flex flex-col">
|
||||
<span class="font-medium text-gray-200">Scroll</span>
|
||||
<span class="text-sm text-gray-400">A single, vertical column of large images.</span>
|
||||
</span>
|
||||
</label>
|
||||
<!-- Grid -->
|
||||
<label for="layout-grid" class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer">
|
||||
<input type="radio" id="layout-grid" name="layout" value="grid"
|
||||
class="h-5 w-5 text-indigo-600 border-gray-500 focus:ring-indigo-500" />
|
||||
<span class="ml-3 flex flex-col">
|
||||
<span class="font-medium text-gray-200">Grid</span>
|
||||
<span class="text-sm text-gray-400">A "Masonry" layout that adapts to image height.</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- MODIFIED: "Table" is now "Compact" -->
|
||||
<label for="layout-compact" class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer">
|
||||
<input type="radio" id="layout-compact" name="layout" value="compact"
|
||||
class="h-5 w-5 text-indigo-600 border-gray-500 focus:ring-indigo-500" />
|
||||
<span class="ml-3 flex flex-col">
|
||||
<span class="font-medium text-gray-200">Compact</span>
|
||||
<span class="text-sm text-gray-400">A responsive grid of static-sized cards.</span>
|
||||
</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Modal -->
|
||||
<div id="search-modal"
|
||||
class="hidden fixed inset-0 z-30 bg-black/70 backdrop-blur-md flex items-start justify-center p-8">
|
||||
<div class="bg-gray-800 p-4 rounded-lg shadow-xl w-full max-w-lg relative">
|
||||
<button id="search-close-button" class="absolute top-3 right-3 p-2 text-gray-400 hover:text-white">
|
||||
<!-- Heroicon: X Mark -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="text-xl font-semibold mb-4">Search</h2>
|
||||
<div class="flex space-x-2">
|
||||
<input type="search" id="search-input" placeholder="Search tags..."
|
||||
class="flex-1 p-3 rounded-lg bg-gray-700 border border-gray-600 text-white placeholder-gray-400 dark-focus-ring" />
|
||||
<button id="search-button"
|
||||
class="px-5 py-3 rounded-lg bg-indigo-600 font-semibold text-white hover:bg-indigo-700 dark-focus-ring">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NEW: Tag Info Modal -->
|
||||
<div id="tag-info-modal"
|
||||
class="hidden fixed inset-0 z-30 bg-black/70 backdrop-blur-md flex items-start justify-center p-8"
|
||||
aria-modal="true">
|
||||
<div class="bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-lg relative">
|
||||
<button id="tag-info-close-button" class="absolute top-3 right-3 p-2 text-gray-400 hover:text-white">
|
||||
<!-- Heroicon: X Mark -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="text-xl font-semibold mb-4">Image Tags</h2>
|
||||
<div id="tag-info-content" class="flex flex-wrap gap-2 max-h-[60vh] overflow-y-auto">
|
||||
<!-- Tags will be injected here by renderer.js -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message Bar (for confirmations) -->
|
||||
<div id="message-bar"
|
||||
class="hidden fixed bottom-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-xl transition-all duration-300 transform translate-y-16">
|
||||
Message
|
||||
</div>
|
||||
|
||||
<div id="updateToast" class="toast hidden">
|
||||
<p>🚨 A new update is available! Version <span id="latestVersionDisplay"></span></p>
|
||||
<button class="close-btn" onclick="hideToast()">X</button>
|
||||
</div>
|
||||
|
||||
<!-- Renderer Script -->
|
||||
<script src="./renderer.js"></script>
|
||||
<script src="./updateNotification.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
300
main.js
Normal file
300
main.js
Normal file
@@ -0,0 +1,300 @@
|
||||
/*
|
||||
main.js (Electron Main Process)
|
||||
MODIFIED: Swapped 'better-sqlite3' for 'sqlite3' to remove C++ dependency.
|
||||
*/
|
||||
const { app, BrowserWindow, ipcMain } = require('electron');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const sqlite3 = require('sqlite3').verbose();
|
||||
// --- NEW: Get paths for *both* dependencies ---
|
||||
const fetchPath = require.resolve('node-fetch');
|
||||
const cheerioPath = require.resolve('cheerio');
|
||||
// --- END NEW ---
|
||||
|
||||
// --- Core paths ---
|
||||
const waifuBoardsPath = path.join(app.getPath('home'), 'WaifuBoards');
|
||||
const pluginsPath = path.join(waifuBoardsPath, 'extensions');
|
||||
const dbPath = path.join(waifuBoardsPath, 'favorites.db');
|
||||
|
||||
// --- Ensure directories exist ---
|
||||
try {
|
||||
if (!fs.existsSync(waifuBoardsPath)) {
|
||||
fs.mkdirSync(waifuBoardsPath);
|
||||
}
|
||||
if (!fs.existsSync(pluginsPath)) {
|
||||
// Use recursive: true in case WaifuBoards doesn't exist yet
|
||||
fs.mkdirSync(pluginsPath, { recursive: true });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to create directories:', error);
|
||||
// We can probably continue, but loading/saving will fail.
|
||||
}
|
||||
|
||||
// --- API Scraper Loader ---
|
||||
// This will hold our instantiated scraper classes, e.g. { 'Gelbooru': new Gelbooru() }
|
||||
const loadedScrapers = {};
|
||||
|
||||
function loadScrapers() {
|
||||
console.log('Loading scrapers...');
|
||||
console.log(`Checking for plugins in: ${pluginsPath}`);
|
||||
|
||||
const files = fs.readdirSync(pluginsPath);
|
||||
files
|
||||
.filter((file) => file.endsWith('.js'))
|
||||
.forEach((file) => {
|
||||
const filePath = path.join(pluginsPath, file);
|
||||
try {
|
||||
// Dynamically require the scraper file
|
||||
const scraperModule = require(filePath);
|
||||
// We assume the export is an object like { Gelbooru: class... }
|
||||
const className = Object.keys(scraperModule)[0];
|
||||
const ScraperClass = scraperModule[className];
|
||||
|
||||
// Basic check to see if it's a valid scraper class
|
||||
if (
|
||||
typeof ScraperClass === 'function' &&
|
||||
ScraperClass.prototype.fetchSearchResult
|
||||
) {
|
||||
// --- MODIFIED: Inject *both* paths ---
|
||||
const instance = new ScraperClass(fetchPath, cheerioPath);
|
||||
// --- END MODIFIED ---
|
||||
|
||||
// Store the instance and its baseUrl
|
||||
loadedScrapers[className] = {
|
||||
instance: instance,
|
||||
baseUrl: instance.baseUrl,
|
||||
};
|
||||
console.log(
|
||||
`Successfully loaded scraper: ${className} from ${instance.baseUrl}`
|
||||
);
|
||||
} else {
|
||||
console.warn(`File ${file} does not export a valid scraper class.`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Failed to load scraper from ${file}:`, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
// --------------------
|
||||
|
||||
// Load scrapers at startup
|
||||
loadScrapers();
|
||||
|
||||
// --- MODIFIED: Initialize sqlite3 (async) ---
|
||||
const db = new sqlite3.Database(dbPath, (err) => {
|
||||
if (err) {
|
||||
console.error('Error opening database:', err.message);
|
||||
} else {
|
||||
console.log('Connected to the favorites database.');
|
||||
runDatabaseMigrations(); // Run migrations after connecting
|
||||
}
|
||||
});
|
||||
|
||||
// --- MODIFIED: Database functions are now async ---
|
||||
function runDatabaseMigrations() {
|
||||
db.serialize(() => {
|
||||
// Create the 'favorites' table
|
||||
db.run(
|
||||
`
|
||||
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 ""
|
||||
)
|
||||
`,
|
||||
(err) => {
|
||||
if (err) console.error('Error creating table:', err.message);
|
||||
}
|
||||
);
|
||||
|
||||
// --- Migration (Add thumbnail_url) ---
|
||||
console.log('Checking database schema for "thumbnail_url"...');
|
||||
db.all('PRAGMA table_info(favorites)', (err, columns) => {
|
||||
if (err) {
|
||||
console.error('Failed to get table info:', err.message);
|
||||
return;
|
||||
}
|
||||
const hasThumbnailColumn = columns.some(
|
||||
(col) => col.name === 'thumbnail_url'
|
||||
);
|
||||
|
||||
if (!hasThumbnailColumn) {
|
||||
console.log(
|
||||
'MIGRATION: Adding "thumbnail_url" column...'
|
||||
);
|
||||
db.run(
|
||||
'ALTER TABLE favorites ADD COLUMN thumbnail_url TEXT NOT NULL DEFAULT ""',
|
||||
(err) => {
|
||||
if (err)
|
||||
console.error('Migration error (thumbnail_url):', err.message);
|
||||
else console.log('MIGRATION: "thumbnail_url" added successfully.');
|
||||
}
|
||||
);
|
||||
} else {
|
||||
console.log('"thumbnail_url" column is up-to-date.');
|
||||
}
|
||||
});
|
||||
|
||||
// --- Migration (Add tags) ---
|
||||
console.log('Checking database schema for "tags" column...');
|
||||
db.all('PRAGMA table_info(favorites)', (err, columns) => {
|
||||
if (err) {
|
||||
console.error('Failed to get table info:', err.message);
|
||||
return;
|
||||
}
|
||||
const hasTagsColumn = columns.some((col) => col.name === 'tags');
|
||||
|
||||
if (!hasTagsColumn) {
|
||||
console.log('MIGRATION: Adding "tags" column...');
|
||||
db.run(
|
||||
'ALTER TABLE favorites ADD COLUMN tags TEXT NOT NULL DEFAULT ""',
|
||||
(err) => {
|
||||
if (err) console.error('Migration error (tags):', err.message);
|
||||
else console.log('MIGRATION: "tags" column added successfully.');
|
||||
}
|
||||
);
|
||||
} else {
|
||||
console.log('"tags" column is up-to-date.');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function createWindow() {
|
||||
// Create the browser window.
|
||||
const mainWindow = new BrowserWindow({
|
||||
width: 1000,
|
||||
height: 800,
|
||||
webPreferences: {
|
||||
// Attach the 'preload.js' script to the window
|
||||
// This is the secure way to expose Node.js functions to the renderer (frontend)
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
// contextIsolation is true by default and is a critical security feature
|
||||
contextIsolation: true,
|
||||
// nodeIntegration should be false
|
||||
nodeIntegration: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Load the index.html file into the window
|
||||
mainWindow.loadFile('index.html');
|
||||
|
||||
// --- Add this line to remove the menu bar ---
|
||||
mainWindow.setMenu(null);
|
||||
}
|
||||
|
||||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create browser windows.
|
||||
app.whenReady().then(() => {
|
||||
// loadScrapers(); // MOVED: This is now called at the top
|
||||
createWindow();
|
||||
|
||||
app.on('activate', function () {
|
||||
// On macOS it's common to re-create a window in the app when the
|
||||
// dock icon is clicked and there are no other windows open.
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
});
|
||||
|
||||
// Quit when all windows are closed, except on macOS.
|
||||
app.on('window-all-closed', function () {
|
||||
if (process.platform !== 'darwin') {
|
||||
db.close((err) => {
|
||||
if (err) console.error('Error closing database:', err.message);
|
||||
});
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
|
||||
// --- IPC Handlers (Backend Functions) ---
|
||||
// These functions listen for calls from the 'preload.js' script
|
||||
|
||||
// NEW: Send the list of loaded scrapers to the frontend
|
||||
ipcMain.handle('api:getSources', () => {
|
||||
// Returns an array of objects: [{ name: 'Gelbooru', url: 'https://gelbooru.com' }, ...]
|
||||
return Object.keys(loadedScrapers).map((name) => {
|
||||
return {
|
||||
name: name,
|
||||
url: loadedScrapers[name].baseUrl,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// MODIFIED: Generic search handler now accepts a page number
|
||||
ipcMain.handle('api:search', async (event, source, query, page) => {
|
||||
try {
|
||||
// Check if the requested source was successfully loaded
|
||||
if (loadedScrapers[source] && loadedScrapers[source].instance) {
|
||||
// Pass the page number to the scraper
|
||||
const results = await loadedScrapers[source].instance.fetchSearchResult(
|
||||
query,
|
||||
page
|
||||
);
|
||||
return { success: true, data: results };
|
||||
} else {
|
||||
throw new Error(`Unknown source or source failed to load: ${source}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error searching ${source}:`, error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
});
|
||||
|
||||
// --- MODIFIED: All db handlers are now async Promises ---
|
||||
|
||||
// Handle request to get all favorites
|
||||
ipcMain.handle('db:getFavorites', () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
db.all('SELECT * FROM favorites', [], (err, rows) => {
|
||||
if (err) {
|
||||
console.error('Error getting favorites:', err.message);
|
||||
resolve([]); // Resolve with empty array on error
|
||||
} else {
|
||||
resolve(rows);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Handle request to add a favorite
|
||||
ipcMain.handle('db:addFavorite', (event, fav) => {
|
||||
return new Promise((resolve) => {
|
||||
const stmt =
|
||||
'INSERT INTO favorites (id, title, image_url, thumbnail_url, tags) VALUES (?, ?, ?, ?, ?)';
|
||||
db.run(
|
||||
stmt,
|
||||
[fav.id, fav.title, fav.imageUrl, fav.thumbnailUrl, fav.tags],
|
||||
function (err) {
|
||||
// Must use 'function' to get 'this'
|
||||
if (err) {
|
||||
if (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 });
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Handle request to remove a favorite
|
||||
ipcMain.handle('db:removeFavorite', (event, id) => {
|
||||
return new Promise((resolve) => {
|
||||
const stmt = 'DELETE FROM favorites WHERE id = ?';
|
||||
db.run(stmt, id, function (err) {
|
||||
// Must use 'function' to get 'this'
|
||||
if (err) {
|
||||
console.error('Error removing favorite:', err.message);
|
||||
resolve({ success: false, error: err.message });
|
||||
} else {
|
||||
resolve({ success: this.changes > 0 });
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
5477
package-lock.json
generated
Normal file
5477
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
40
package.json
Normal file
40
package.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "waifu-board",
|
||||
"version": "1.0.0",
|
||||
"description": "An image board app to store and browse your favorite waifus!",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"rebuild": "npx electron-rebuild",
|
||||
"build": "npx electron-builder",
|
||||
"dist": "electron-builder"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"type": "commonjs",
|
||||
"devDependencies": {
|
||||
"@electron/rebuild": "^3.6.0",
|
||||
"electron": "^39.2.1",
|
||||
"electron-builder": "^24.13.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"cheerio": "^1.1.2",
|
||||
"node-fetch": "^2.7.0",
|
||||
"sqlite3": "^5.1.7"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.yourname.waifuboard",
|
||||
"productName": "Waifu Board",
|
||||
"win": {
|
||||
"target": "portable",
|
||||
"icon": "build/waifuboards.ico"
|
||||
},
|
||||
"files": [
|
||||
"**/*",
|
||||
"!**/*.ts",
|
||||
"!*.map",
|
||||
"!package-lock.json"
|
||||
]
|
||||
}
|
||||
}
|
||||
21
preload.js
Normal file
21
preload.js
Normal file
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
preload.js
|
||||
This script runs in a special, isolated context before the web page (index.html)
|
||||
is loaded. It uses 'contextBridge' to securely expose specific functions
|
||||
from the main process (like database access) to the renderer process (frontend).
|
||||
*/
|
||||
const { contextBridge, ipcRenderer } = require('electron');
|
||||
|
||||
// Expose a 'db' object to the global 'window' object in the renderer
|
||||
contextBridge.exposeInMainWorld('api', {
|
||||
// --- Database Functions ---
|
||||
getFavorites: () => ipcRenderer.invoke('db:getFavorites'),
|
||||
addFavorite: (fav) => ipcRenderer.invoke('db:addFavorite', fav),
|
||||
removeFavorite: (id) => ipcRenderer.invoke('db:removeFavorite', id),
|
||||
|
||||
// --- API Function ---
|
||||
// This is now a generic search function that takes the source
|
||||
search: (source, query) => ipcRenderer.invoke('api:search', source, query),
|
||||
// NEW: This function gets the list of available sources from main.js
|
||||
getSources: () => ipcRenderer.invoke('api:getSources'),
|
||||
});
|
||||
727
renderer.js
Normal file
727
renderer.js
Normal file
@@ -0,0 +1,727 @@
|
||||
/*
|
||||
renderer.js
|
||||
MODIFIED: Now includes infinite scrolling
|
||||
*/
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// --- Page Elements ---
|
||||
const browseButton = document.getElementById('browse-button');
|
||||
const favoritesButton = document.getElementById('favorites-button');
|
||||
const settingsButton = document.getElementById('settings-button');
|
||||
const browsePage = document.getElementById('browse-page');
|
||||
const favoritesPage = document.getElementById('favorites-page');
|
||||
const settingsPage = document.getElementById('settings-page');
|
||||
const pageTitle = document.getElementById('page-title');
|
||||
const headerContext = document.getElementById('header-context');
|
||||
|
||||
// --- Search Modal Elements ---
|
||||
const searchIconButton = document.getElementById('search-icon-button');
|
||||
const searchModal = document.getElementById('search-modal');
|
||||
const searchCloseButton = document.getElementById('search-close-button');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const searchButton = document.getElementById('search-button');
|
||||
|
||||
// --- Gallery Elements ---
|
||||
const sourceList = document.getElementById('source-list');
|
||||
const contentGallery = document.getElementById('content-gallery');
|
||||
const favoritesGallery = document.getElementById('favorites-gallery');
|
||||
const loadingSpinner = document.getElementById('loading-spinner');
|
||||
// NEW: Get the infinite loading spinner
|
||||
const infiniteLoadingSpinner = document.getElementById(
|
||||
'infinite-loading-spinner'
|
||||
);
|
||||
const messageBar = document.getElementById('message-bar');
|
||||
const galleryPlaceholder = document.getElementById('gallery-placeholder');
|
||||
|
||||
// --- Settings Elements ---
|
||||
const layoutRadios = document.querySelectorAll('input[name="layout"]');
|
||||
const layoutScroll = document.getElementById('layout-scroll');
|
||||
const layoutGrid = document.getElementById('layout-grid');
|
||||
const layoutCompact = document.getElementById('layout-compact');
|
||||
|
||||
// --- Tag Info Modal Elements ---
|
||||
const tagInfoModal = document.getElementById('tag-info-modal');
|
||||
const tagInfoCloseButton = document.getElementById(
|
||||
'tag-info-close-button'
|
||||
);
|
||||
const tagInfoContent = document.getElementById('tag-info-content');
|
||||
|
||||
// --- App State ---
|
||||
let currentFavorites = []; // Cache for favorites
|
||||
let currentSource = '';
|
||||
let currentQuery = '';
|
||||
let currentLayout = 'scroll'; // Default layout
|
||||
// --- NEW: State for infinite scroll ---
|
||||
let currentPage = 1;
|
||||
let isLoading = false;
|
||||
let hasNextPage = true;
|
||||
|
||||
// --- Populate Sources Sidebar ---
|
||||
async function populateSources() {
|
||||
console.log('Requesting sources from main process...');
|
||||
const sources = await window.api.getSources(); // e.g., [{ name: 'Gelbooru', url: '...' }]
|
||||
sourceList.innerHTML = ''; // Clear "Loading..."
|
||||
|
||||
if (sources && sources.length > 0) {
|
||||
sources.forEach((source) => {
|
||||
const button = document.createElement('button');
|
||||
button.className =
|
||||
'source-button w-12 h-12 flex items-center justify-center rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white transition-all duration-200';
|
||||
button.dataset.source = source.name;
|
||||
button.title = source.name;
|
||||
|
||||
// Create and add favicon
|
||||
const favicon = document.createElement('img');
|
||||
favicon.className = 'w-8 h-8 rounded';
|
||||
|
||||
// Parse main domain from URL to get correct favicon
|
||||
let mainDomain = source.url; // Default to the full URL
|
||||
try {
|
||||
const hostname = new URL(source.url).hostname; // e.g., 'api.waifu.pics'
|
||||
const parts = hostname.split('.');
|
||||
if (parts.length > 2 && ['api', 'www'].includes(parts[0])) {
|
||||
// Get the last two parts (e.g., 'waifu.pics' from 'api.waifu.pics')
|
||||
mainDomain = parts.slice(1).join('.');
|
||||
} else {
|
||||
// It's already a main domain (e.g., 'gelbooru.com')
|
||||
mainDomain = hostname;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(`Could not parse domain from ${source.url}:`, e);
|
||||
mainDomain = source.name;
|
||||
}
|
||||
// --- END NEW ---
|
||||
|
||||
// Use Google's favicon service. sz=32 requests a 32x32 icon.
|
||||
favicon.src = `https://www.google.com/s2/favicons?domain=${mainDomain}&sz=32`;
|
||||
favicon.alt = source.name;
|
||||
// Fallback in case favicon fails to load
|
||||
favicon.onerror = () => {
|
||||
button.innerHTML = `<span class="font-bold text-sm">${source.name.substring(
|
||||
0,
|
||||
2
|
||||
)}</span>`;
|
||||
favicon.remove();
|
||||
};
|
||||
|
||||
button.appendChild(favicon);
|
||||
sourceList.appendChild(button);
|
||||
});
|
||||
console.log('Sources populated:', sources);
|
||||
|
||||
// Set first source as active by default
|
||||
if (sourceList.children.length > 0) {
|
||||
const firstButton = sourceList.children[0];
|
||||
firstButton.classList.add('active');
|
||||
currentSource = firstButton.dataset.source;
|
||||
updateHeader();
|
||||
}
|
||||
} else {
|
||||
console.warn('No sources were loaded from the main process.');
|
||||
}
|
||||
}
|
||||
|
||||
// --- Source Selection ---
|
||||
sourceList.addEventListener('click', (e) => {
|
||||
const button = e.target.closest('.source-button');
|
||||
if (button) {
|
||||
// ... (remove/add active class) ...
|
||||
sourceList
|
||||
.querySelectorAll('.source-button')
|
||||
.forEach((btn) => btn.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
|
||||
currentSource = button.dataset.source;
|
||||
console.log('Source changed to:', currentSource);
|
||||
updateHeader();
|
||||
// Automatically re-search when changing source if a query exists
|
||||
if (currentQuery) {
|
||||
// This will reset the gallery and start a new search
|
||||
performSearch();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// --- Tab Switching Logic (Sidebar) ---
|
||||
function showPage(pageId) {
|
||||
// Hide all pages
|
||||
document.querySelectorAll('.page').forEach((page) => {
|
||||
page.classList.add('hidden');
|
||||
});
|
||||
// De-activate all icon buttons
|
||||
document.querySelectorAll('.nav-button').forEach((tab) => {
|
||||
tab.classList.remove('bg-indigo-600', 'text-white');
|
||||
tab.classList.add('text-gray-400', 'hover:bg-gray-700');
|
||||
});
|
||||
|
||||
// Show the active page
|
||||
const activePage = document.getElementById(pageId);
|
||||
activePage.classList.remove('hidden');
|
||||
|
||||
// Highlight the active icon button
|
||||
let activeTab;
|
||||
if (pageId === 'browse-page') {
|
||||
activeTab = browseButton;
|
||||
pageTitle.textContent = 'Browse';
|
||||
updateHeader(); // Update header context
|
||||
} else if (pageId === 'favorites-page') {
|
||||
activeTab = favoritesButton;
|
||||
pageTitle.textContent = 'Favorites';
|
||||
headerContext.textContent = ''; // Clear context
|
||||
// When switching to favorites, refresh the list
|
||||
loadFavorites();
|
||||
} else if (pageId === 'settings-page') {
|
||||
activeTab = settingsButton;
|
||||
pageTitle.textContent = 'Settings';
|
||||
headerContext.textContent = ''; // Clear context
|
||||
}
|
||||
activeTab.classList.add('bg-indigo-600', 'text-white');
|
||||
activeTab.classList.remove('text-gray-400', 'hover:bg-gray-700');
|
||||
}
|
||||
|
||||
browseButton.addEventListener('click', () => showPage('browse-page'));
|
||||
favoritesButton.addEventListener('click', () => showPage('favorites-page'));
|
||||
settingsButton.addEventListener('click', () => showPage('settings-page'));
|
||||
|
||||
// --- Search Modal Logic ---
|
||||
searchIconButton.addEventListener('click', () => {
|
||||
searchModal.classList.remove('hidden');
|
||||
searchInput.focus(); // Auto-focus the search bar
|
||||
searchInput.select();
|
||||
});
|
||||
searchCloseButton.addEventListener('click', () => {
|
||||
searchModal.classList.add('hidden');
|
||||
});
|
||||
searchButton.addEventListener('click', () => {
|
||||
// Sanitize search query to allow multiple tags
|
||||
// MODIFIED: This just calls performSearch, which now handles its own state
|
||||
performSearch();
|
||||
});
|
||||
// Close search modal on Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
searchModal.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// --- Tag Info Modal Logic ---
|
||||
tagInfoCloseButton.addEventListener('click', () => {
|
||||
tagInfoModal.classList.add('hidden');
|
||||
});
|
||||
// Close tag modal by clicking the backdrop
|
||||
tagInfoModal.addEventListener('click', (e) => {
|
||||
if (e.target === tagInfoModal) {
|
||||
tagInfoModal.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Function to show the tag info modal
|
||||
function showTagModal(tags) {
|
||||
tagInfoContent.innerHTML = ''; // Clear old tags
|
||||
|
||||
if (!tags || tags.length === 0) {
|
||||
tagInfoContent.innerHTML =
|
||||
'<p class="text-gray-400">No tags available for this image.</p>';
|
||||
tagInfoModal.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
tags.forEach((tag) => {
|
||||
if (tag) {
|
||||
const tagPill = document.createElement('span');
|
||||
tagPill.className =
|
||||
'px-2.5 py-1 bg-gray-700 text-gray-300 text-xs font-medium rounded-full';
|
||||
tagPill.textContent = tag.replace(/_/g, ' '); // Replace underscores
|
||||
fragment.appendChild(tagPill);
|
||||
}
|
||||
});
|
||||
tagInfoContent.appendChild(fragment);
|
||||
tagInfoModal.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// --- Header Update ---
|
||||
function updateHeader() {
|
||||
if (currentSource) {
|
||||
headerContext.textContent = `Source: ${currentSource}`;
|
||||
} else {
|
||||
headerContext.textContent = 'No source selected';
|
||||
}
|
||||
}
|
||||
|
||||
// --- Search Function ---
|
||||
async function performSearch() {
|
||||
if (!currentSource) {
|
||||
showMessage('Please select a source from the sidebar.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// --- NEW: Reset state for a new search ---
|
||||
currentPage = 1;
|
||||
hasNextPage = true;
|
||||
isLoading = false;
|
||||
currentQuery = searchInput.value.trim().replace(/[, ]+/g, ' ');
|
||||
|
||||
if (galleryPlaceholder) galleryPlaceholder.classList.add('hidden');
|
||||
// Clear and apply layout classes
|
||||
applyLayoutToGallery(contentGallery, currentLayout);
|
||||
contentGallery.innerHTML = ''; // Clear previous results
|
||||
updateHeader(); // Update header to show source
|
||||
|
||||
// Close modal after search
|
||||
searchModal.classList.add('hidden');
|
||||
|
||||
// Load the first page of results
|
||||
loadMoreResults();
|
||||
}
|
||||
|
||||
// --- NEW: Infinite Scroll Loader ---
|
||||
async function loadMoreResults() {
|
||||
// Don't load if we're already loading or if there are no more pages
|
||||
if (isLoading || !hasNextPage) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
|
||||
// Show the correct spinner
|
||||
if (currentPage === 1) {
|
||||
loadingSpinner.classList.remove('hidden'); // Show main spinner
|
||||
} else {
|
||||
infiniteLoadingSpinner.classList.remove('hidden'); // Show bottom spinner
|
||||
}
|
||||
|
||||
// Use the new API function with the current page
|
||||
const result = await window.api.search(
|
||||
currentSource,
|
||||
currentQuery,
|
||||
currentPage
|
||||
);
|
||||
|
||||
// Hide all spinners
|
||||
loadingSpinner.classList.add('hidden');
|
||||
infiniteLoadingSpinner.classList.add('hidden');
|
||||
|
||||
if (
|
||||
!result.success ||
|
||||
!result.data.results ||
|
||||
result.data.results.length === 0
|
||||
) {
|
||||
hasNextPage = false; // Stop trying to load more
|
||||
if (currentPage === 1) {
|
||||
// If it's the first page and no results, show "No results"
|
||||
applyLayoutToGallery(contentGallery, currentLayout);
|
||||
contentGallery.innerHTML =
|
||||
'<p class="text-gray-400 text-center text-lg">No results found. Please try another search term.</p>';
|
||||
}
|
||||
// If it's not the first page, we just stop loading (no message needed)
|
||||
isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const validResults = result.data.results.filter((item) => item.image);
|
||||
|
||||
if (validResults.length === 0) {
|
||||
hasNextPage = false; // Stop trying to load more
|
||||
if (currentPage === 1) {
|
||||
applyLayoutToGallery(contentGallery, currentLayout);
|
||||
contentGallery.innerHTML =
|
||||
'<p class="text-gray-400 text-center text-lg">Found results, but none had valid images.</p>';
|
||||
}
|
||||
isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Use a DocumentFragment for performance
|
||||
const fragment = document.createDocumentFragment();
|
||||
validResults.forEach((item) => {
|
||||
const thumbnailUrl = item.image;
|
||||
// const fullImageUrl = getFullImageUrl(thumbnailUrl, currentSource);
|
||||
const displayUrl = item.sampleImageUrl || item.fullImageUrl || thumbnailUrl;
|
||||
|
||||
const card = createImageCard(
|
||||
item.id.toString(),
|
||||
item.tags, // Pass the whole tags array
|
||||
displayUrl, // Pass the new *real* URL
|
||||
thumbnailUrl, // Pass the *real* thumbnail as a fallback
|
||||
'browse'
|
||||
);
|
||||
fragment.appendChild(card);
|
||||
});
|
||||
// Append the new results instead of overwriting
|
||||
contentGallery.appendChild(fragment);
|
||||
|
||||
// Update state for the next scroll
|
||||
hasNextPage = result.data.hasNextPage;
|
||||
currentPage++;
|
||||
isLoading = false;
|
||||
}
|
||||
|
||||
// --- NEW: Scroll Event Listener for Browse Page ---
|
||||
browsePage.addEventListener('scroll', () => {
|
||||
// Check if user is near the bottom of the scrollable area
|
||||
if (
|
||||
browsePage.scrollTop + browsePage.clientHeight >=
|
||||
browsePage.scrollHeight - 600 // Load 600px before the end
|
||||
) {
|
||||
loadMoreResults();
|
||||
}
|
||||
});
|
||||
|
||||
// --- Favorites Logic ---
|
||||
async function loadFavorites() {
|
||||
// Apply layout classes
|
||||
applyLayoutToGallery(favoritesGallery, currentLayout);
|
||||
favoritesGallery.innerHTML =
|
||||
'<div class="text-center p-10"><p class="text-gray-400">Loading favorites...</p></div>';
|
||||
currentFavorites = await window.api.getFavorites();
|
||||
|
||||
if (currentFavorites.length === 0) {
|
||||
// Apply layout classes
|
||||
applyLayoutToGallery(favoritesGallery, currentLayout);
|
||||
favoritesGallery.innerHTML =
|
||||
'<p class="text-gray-400 text-center text-lg">You haven\'t saved any favorites yet.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Apply layout classes
|
||||
applyLayoutToGallery(favoritesGallery, currentLayout);
|
||||
favoritesGallery.innerHTML = ''; // Clear loading message
|
||||
const fragment = document.createDocumentFragment();
|
||||
currentFavorites.forEach((fav) => {
|
||||
const card = createImageCard(
|
||||
fav.id,
|
||||
// Read from the new 'tags' column instead of 'title'
|
||||
fav.tags ? fav.tags.split(',') : [],
|
||||
fav.image_url,
|
||||
fav.thumbnail_url,
|
||||
'fav'
|
||||
);
|
||||
fragment.appendChild(card);
|
||||
});
|
||||
favoritesGallery.appendChild(fragment);
|
||||
}
|
||||
|
||||
async function handleAddFavorite(id, tags, imageUrl, thumbnailUrl) {
|
||||
// Ensure 'tags' is an array before using array methods
|
||||
const safeTags = Array.isArray(tags) ? tags : [];
|
||||
// Title is just the first tag (or a default), for simplicity
|
||||
const title = safeTags.length > 0 ? safeTags[0] : 'Favorite';
|
||||
// Create a string of all tags to store
|
||||
const allTags = safeTags.join(',');
|
||||
|
||||
const result = await window.api.addFavorite({
|
||||
id,
|
||||
title,
|
||||
imageUrl,
|
||||
thumbnailUrl,
|
||||
tags: allTags, // Pass all tags to the backend
|
||||
});
|
||||
if (result.success) {
|
||||
showMessage('Added to favorites!', 'success');
|
||||
} else {
|
||||
showMessage(result.error, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveFavorite(id) {
|
||||
const result = await window.api.removeFavorite(id);
|
||||
if (result.success) {
|
||||
showMessage('Removed from favorites.', 'success');
|
||||
// Find the card to remove, regardless of layout
|
||||
const cardToRemove = document.querySelector(
|
||||
`#favorites-gallery [data-id='${id}']`
|
||||
);
|
||||
if (cardToRemove) {
|
||||
cardToRemove.classList.add('opacity-0', 'scale-90');
|
||||
setTimeout(() => {
|
||||
cardToRemove.remove();
|
||||
if (favoritesGallery.children.length === 0) {
|
||||
// Apply layout classes
|
||||
applyLayoutToGallery(favoritesGallery, currentLayout);
|
||||
favoritesGallery.innerHTML =
|
||||
'<p class="text-gray-400 text-center text-lg">You haven\'t saved any favorites yet.</p>';
|
||||
}
|
||||
}, 300); // Wait for animation
|
||||
}
|
||||
} else {
|
||||
showMessage(result.error, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// --- UI Helpers ---
|
||||
|
||||
/**
|
||||
* REWRITTEN: Creates a professional image card based on current layout.
|
||||
* @param {string} id - The unique ID of the artwork.
|
||||
* @param {string[]} tags - An array of tags.
|
||||
* @param {string} imageUrl - The full URL of the image to display.
|
||||
* @param {string} thumbnailUrl - The fallback thumbnail URL.
|
||||
* @param {'browse' | 'fav'} type - The type of card to create.
|
||||
* @returns {HTMLElement} The card element.
|
||||
*/
|
||||
function createImageCard(id, tags, imageUrl, thumbnailUrl, type) {
|
||||
// Ensure 'tags' is an array before using array methods
|
||||
const safeTags = Array.isArray(tags) ? tags : [];
|
||||
|
||||
// --- All layouts use this as the base card ---
|
||||
const entry = document.createElement('div');
|
||||
entry.dataset.id = id;
|
||||
entry.className = `image-entry group relative bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300`;
|
||||
|
||||
// --- "Compact" layout gets a special style ---
|
||||
if (currentLayout === 'compact') {
|
||||
// Use aspect-ratio to keep cards square and uniform
|
||||
entry.classList.add('aspect-square');
|
||||
}
|
||||
|
||||
// Image container with pulse animation for loading
|
||||
const imageContainer = document.createElement('div');
|
||||
imageContainer.className =
|
||||
'w-full bg-gray-700 animate-pulse relative';
|
||||
|
||||
// For "Compact" layout, image container is also square
|
||||
if (currentLayout === 'compact') {
|
||||
imageContainer.classList.add('h-full');
|
||||
} else {
|
||||
imageContainer.classList.add('min-h-[200px]');
|
||||
}
|
||||
|
||||
entry.appendChild(imageContainer);
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = imageUrl; // Try to load the full-res image first
|
||||
img.alt = safeTags.join(', '); // Use safeTags
|
||||
img.className = 'w-full h-auto object-contain bg-gray-900 opacity-0'; // Start hidden
|
||||
img.loading = 'lazy';
|
||||
img.referrerPolicy = 'no-referrer';
|
||||
|
||||
// "Compact" layout uses "object-cover" to fill the square
|
||||
if (currentLayout === 'compact') {
|
||||
img.className = 'w-full h-full object-cover bg-gray-900 opacity-0';
|
||||
}
|
||||
|
||||
img.onload = () => {
|
||||
imageContainer.classList.remove('animate-pulse', 'bg-gray-700');
|
||||
img.classList.remove('opacity-0');
|
||||
img.classList.add('transition-opacity', 'duration-500');
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
console.warn(`Failed to load full image: ${imageUrl}. Falling back to thumbnail.`);
|
||||
img.src = thumbnailUrl; // Fallback
|
||||
imageContainer.classList.remove('animate-pulse', 'bg-gray-700');
|
||||
img.classList.remove('opacity-0');
|
||||
img.classList.add('transition-opacity', 'duration-500');
|
||||
img.onerror = null; // Prevent infinite loop
|
||||
};
|
||||
imageContainer.appendChild(img);
|
||||
|
||||
// --- Add buttons (overlay on hover) ---
|
||||
const buttonContainer = document.createElement('div');
|
||||
buttonContainer.className =
|
||||
'image-buttons absolute top-3 right-3 flex flex-col space-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200';
|
||||
|
||||
// Add Info Button
|
||||
buttonContainer.appendChild(createInfoButton(safeTags));
|
||||
|
||||
if (type === 'browse') {
|
||||
buttonContainer.appendChild(
|
||||
createAddFavoriteButton(id, safeTags, imageUrl, thumbnailUrl)
|
||||
);
|
||||
} else {
|
||||
buttonContainer.appendChild(createRemoveFavoriteButton(id));
|
||||
}
|
||||
imageContainer.appendChild(buttonContainer); // Add buttons to image container
|
||||
|
||||
return entry;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tries to guess the full-resolution image URL from a thumbnail URL.
|
||||
* This is a "best guess" based on common patterns.
|
||||
* @param {string} thumbnailUrl - The URL of the thumbnail.
|
||||
* @param {string} source - The name of the source (e.g., 'Gelbooru', 'Rule34').
|
||||
* @returns {string} The guessed full-resolution URL.
|
||||
*/
|
||||
function getFullImageUrl(thumbnailUrl, source) {
|
||||
if (!thumbnailUrl) return '';
|
||||
|
||||
try {
|
||||
// Waifu.pics API already provides the full URL
|
||||
if (source === 'WaifuPics') {
|
||||
return thumbnailUrl;
|
||||
}
|
||||
|
||||
// Rule34 (API): preview_url -> file_url
|
||||
if (source === 'Rule34' && thumbnailUrl.includes('thumbnail_')) {
|
||||
return thumbnailUrl
|
||||
.replace('/thumbnails/', '/images/')
|
||||
.replace('thumbnail_', '');
|
||||
}
|
||||
|
||||
// Gelbooru (Scraper): /thumbnails/ -> /images/
|
||||
if (source === 'Gelbooru' && thumbnailUrl.includes('/thumbnails/')) {
|
||||
return thumbnailUrl
|
||||
.replace('/thumbnails/', '/images/')
|
||||
.replace('thumbnail_', '');
|
||||
}
|
||||
|
||||
// Safebooru (Scraper): /thumbnails/ -> /images/
|
||||
if (source === 'Safebooru' && thumbnailUrl.includes('/thumbnails/')) {
|
||||
return thumbnailUrl
|
||||
.replace('/thumbnails/', '/images/')
|
||||
.replace('thumbnail_', '');
|
||||
}
|
||||
|
||||
// Fallback for unknown scrapers
|
||||
if (thumbnailUrl.includes('/thumbnails/')) {
|
||||
return thumbnailUrl
|
||||
.replace('/thumbnails/', '/images/')
|
||||
.replace('thumbnail_', '');
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error('Error parsing full image URL:', e);
|
||||
}
|
||||
// If no rules match, just return the thumbnail URL
|
||||
return thumbnailUrl;
|
||||
}
|
||||
|
||||
// --- Button Creation Helpers ---
|
||||
function createInfoButton(safeTags) {
|
||||
const button = document.createElement('button');
|
||||
button.title = 'Show Info';
|
||||
button.className =
|
||||
'p-2 rounded-full bg-black/50 text-white hover:bg-blue-600 backdrop-blur-sm transition-colors';
|
||||
button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
</svg>`;
|
||||
button.onclick = (e) => {
|
||||
e.stopPropagation(); // Prevent card click
|
||||
showTagModal(safeTags);
|
||||
};
|
||||
return button;
|
||||
}
|
||||
|
||||
function createAddFavoriteButton(id, safeTags, imageUrl, thumbnailUrl) {
|
||||
const button = document.createElement('button');
|
||||
button.title = 'Add to Favorites';
|
||||
button.className =
|
||||
'p-2 rounded-full bg-black/50 text-white hover:bg-indigo-600 backdrop-blur-sm transition-colors';
|
||||
button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.31h5.518a.562.562 0 01.31.95l-4.203 3.03a.563.563 0 00-.182.53l1.501 4.87a.562.562 0 01-.82.624l-4.204-3.03a.563.563 0 00-.576 0l-4.204 3.03a.562.562 0 01-.82-.624l1.501-4.87a.563.563 0 00-.182-.53L2.498 9.87a.562.562 0 01.31-.95h5.518a.563.563 0 00.475-.31L11.48 3.5z" />
|
||||
</svg>`;
|
||||
button.onclick = (e) => {
|
||||
e.stopPropagation(); // Prevent card click
|
||||
handleAddFavorite(id, safeTags, imageUrl, thumbnailUrl);
|
||||
};
|
||||
return button;
|
||||
}
|
||||
|
||||
function createRemoveFavoriteButton(id) {
|
||||
const button = document.createElement('button');
|
||||
button.title = 'Remove from Favorites';
|
||||
button.className =
|
||||
'p-2 rounded-full bg-black/50 text-white hover:bg-red-600 backdrop-blur-sm transition-colors';
|
||||
button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12.578 0a48.108 48.108 0 01-3.478-.397m15.408 0l-2.147-2.147A1.125 1.125 0 0016.34 3H7.66a1.125 1.125 0 00-.795.325L4.772 5.79m14.456 0l-2.29-2.29a1.125 1.125 0 00-.795-.324H8.455a1.125 1.125 0 00-.795.324L5.37 5.79m13.84 0L20.25 7.5" />
|
||||
</svg>`;
|
||||
button.onclick = (e) => {
|
||||
e.stopPropagation(); // Prevent card click
|
||||
handleRemoveFavorite(id);
|
||||
};
|
||||
return button;
|
||||
}
|
||||
// --- END NEW: Button Creation Helpers ---
|
||||
|
||||
/**
|
||||
* Shows a green/red message bar at the bottom of the screen.
|
||||
* @param {string} message - The text to display.
|
||||
* @param {'success' | 'error'} type - The type of message.
|
||||
*/
|
||||
function showMessage(message, type = 'success') {
|
||||
if (!messageBar) return;
|
||||
messageBar.textContent = message;
|
||||
|
||||
// Set color
|
||||
if (type === 'error') {
|
||||
messageBar.classList.remove('bg-green-600');
|
||||
messageBar.classList.add('bg-red-600');
|
||||
} else {
|
||||
messageBar.classList.remove('bg-red-600');
|
||||
messageBar.classList.add('bg-green-600');
|
||||
}
|
||||
|
||||
// Show
|
||||
messageBar.classList.remove('hidden', 'translate-y-16');
|
||||
|
||||
// Hide after 3 seconds
|
||||
setTimeout(() => {
|
||||
messageBar.classList.add('hidden', 'translate-y-16');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// --- NEW: Settings Logic ---
|
||||
function loadSettings() {
|
||||
const savedLayout = localStorage.getItem('waifuBoardLayout') || 'scroll';
|
||||
currentLayout = savedLayout;
|
||||
|
||||
// Check if the saved layout element exists before trying to check it
|
||||
const savedRadio = document.querySelector(
|
||||
`input[name="layout"][value="${savedLayout}"]`
|
||||
);
|
||||
if (savedRadio) {
|
||||
savedRadio.checked = true;
|
||||
} else {
|
||||
// Fallback if saved layout is invalid
|
||||
document.getElementById('layout-scroll').checked = true;
|
||||
currentLayout = 'scroll';
|
||||
localStorage.setItem('waifuBoardLayout', 'scroll');
|
||||
}
|
||||
}
|
||||
|
||||
function handleLayoutChange(e) {
|
||||
const newLayout = e.target.value;
|
||||
localStorage.setItem('waifuBoardLayout', newLayout);
|
||||
currentLayout = newLayout;
|
||||
console.log('Layout changed to:', newLayout);
|
||||
|
||||
// Re-render the current view
|
||||
if (browsePage.classList.contains('hidden')) {
|
||||
loadFavorites(); // Re-render favorites
|
||||
} else {
|
||||
// --- FIX ---
|
||||
// Only re-run the search if there was a query.
|
||||
if (currentQuery) {
|
||||
performSearch(); // Re-render browse (will reset to page 1)
|
||||
} else {
|
||||
applyLayoutToGallery(contentGallery, currentLayout);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyLayoutToGallery(galleryElement, layout) {
|
||||
// Reset all layout classes
|
||||
galleryElement.className = 'p-4 w-full'; // Base classes
|
||||
|
||||
if (layout === 'scroll') {
|
||||
galleryElement.classList.add('max-w-3xl', 'mx-auto', 'space-y-8');
|
||||
} else if (layout === 'grid') {
|
||||
// Use the Masonry layout class
|
||||
galleryElement.classList.add('gallery-masonry');
|
||||
} else if (layout === 'compact') {
|
||||
// Use the standard grid layout (formerly 'gallery-grid')
|
||||
galleryElement.classList.add('gallery-grid');
|
||||
}
|
||||
}
|
||||
|
||||
layoutRadios.forEach((radio) => {
|
||||
radio.addEventListener('change', handleLayoutChange);
|
||||
});
|
||||
// --- END NEW: Settings Logic ---
|
||||
|
||||
// --- Initial Load ---
|
||||
loadSettings(); // NEW: Load settings on startup
|
||||
populateSources(); // Load the sources into the dropdown on startup
|
||||
showPage('browse-page'); // Show the browse page on startup
|
||||
});
|
||||
93
updateNotification.js
Normal file
93
updateNotification.js
Normal file
@@ -0,0 +1,93 @@
|
||||
// --- Configuration ---
|
||||
const GITHUB_OWNER = 'ItsSkaiya'; // e.g., 'google'
|
||||
const GITHUB_REPO = 'WaifuBoard'; // e.g., 'gemini-api-cookbook'
|
||||
const CURRENT_VERSION = '1.0.0'; // Manually set this, or pull from a package.json/config file
|
||||
|
||||
// --- DOM Elements ---
|
||||
const currentVersionDisplay = document.getElementById('currentVersionDisplay');
|
||||
const latestVersionDisplay = document.getElementById('latestVersionDisplay');
|
||||
const updateToast = document.getElementById('updateToast');
|
||||
|
||||
// Display the current version on load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
currentVersionDisplay.textContent = CURRENT_VERSION;
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Shows the update notification toast.
|
||||
* @param {string} latestVersion - The latest version string from GitHub.
|
||||
*/
|
||||
function showToast(latestVersion) {
|
||||
latestVersionDisplay.textContent = latestVersion;
|
||||
updateToast.classList.add('update-available');
|
||||
updateToast.classList.remove('hidden');
|
||||
// NOTE: The toast will NOT close until the user clicks 'X'
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the update notification toast.
|
||||
*/
|
||||
function hideToast() {
|
||||
updateToast.classList.add('hidden');
|
||||
updateToast.classList.remove('update-available');
|
||||
}
|
||||
|
||||
/**
|
||||
* Compares two semantic version strings (e.g., "1.2.3" vs "1.2.4").
|
||||
* Returns true if version A is older than version B.
|
||||
* @param {string} versionA - The current version.
|
||||
* @param {string} versionB - The latest version.
|
||||
* @returns {boolean} True if A is older than B.
|
||||
*/
|
||||
function isVersionOutdated(versionA, versionB) {
|
||||
// Clean up version strings (e.g., remove 'v' prefix) and split by '.'
|
||||
const vA = versionA.replace(/^v/, '').split('.').map(Number);
|
||||
const vB = versionB.replace(/^v/, '').split('.').map(Number);
|
||||
|
||||
for (let i = 0; i < Math.max(vA.length, vB.length); i++) {
|
||||
const numA = vA[i] || 0;
|
||||
const numB = vB[i] || 0;
|
||||
|
||||
if (numA < numB) return true; // A is older
|
||||
if (numA > numB) return false; // A is newer
|
||||
}
|
||||
|
||||
return false; // Versions are the same or incomparable
|
||||
}
|
||||
|
||||
/**
|
||||
* Main function to fetch the latest GitHub release and check for updates.
|
||||
*/
|
||||
async function checkForUpdates() {
|
||||
console.log(`Checking for updates for ${GITHUB_OWNER}/${GITHUB_REPO}...`);
|
||||
const apiUrl = `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/releases/latest`;
|
||||
|
||||
try {
|
||||
const response = await fetch(apiUrl);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`GitHub API error: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// The tag_name often contains the version (e.g., "v1.0.1")
|
||||
const latestVersion = data.tag_name;
|
||||
console.log(`Latest GitHub Release: ${latestVersion}`);
|
||||
|
||||
if (isVersionOutdated(CURRENT_VERSION, latestVersion)) {
|
||||
// Package is out of date! Issue the red toast notification.
|
||||
console.warn('Update available!');
|
||||
showToast(latestVersion);
|
||||
} else {
|
||||
// Package is up to date or newer. Do not show the toast.
|
||||
console.info('Package is up to date.');
|
||||
hideToast(); // Ensure it's hidden in case a previous check showed it
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch GitHub release:', error);
|
||||
// You might want a different toast here for a failure notification
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user