Updated UI style to be more modern

Updated headless browser to get images, videos and gifs!

main.js

@@ -56,8 +56,8 @@ const db = initDatabase(dbPath);
 
 function createWindow() {
   const mainWindow = new BrowserWindow({
-    width: 1000,
+    width: 1324,
-    height: 800,
+    height: 868,
     webPreferences: {
       preload: path.join(__dirname, '/src/preload.js'),
       contextIsolation: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "waifu-board",
-  "version": "v1.3.1",
+  "version": "v1.4.0",
   "description": "An image board app to store and browse your favorite waifus!",
   "main": "main.js",
   "scripts": {

src/extensions/load-extensions.js

@@ -7,14 +7,12 @@ export async function populateSources(sourceList) {
   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.className = 'source-button hover:bg-gray-700 hover:text-white transition-all duration-200';
+      
       button.dataset.source = source.name;
       button.title = source.name;
 
-      const favicon = document.createElement('img');
-      favicon.className = 'w-8 h-8 rounded';
-
       let mainDomain = source.url;
       try {
         const hostname = new URL(source.url).hostname;
@@ -25,32 +23,94 @@ export async function populateSources(sourceList) {
           mainDomain = hostname;
         }
       } catch (e) {
-        console.warn(`Could not parse domain from ${source.url}:`, e);
         mainDomain = source.name;
       }
 
+      const favicon = document.createElement('img');
+      favicon.className = 'source-icon rounded'; 
       favicon.src = `https://www.google.com/s2/favicons?domain=${mainDomain}&sz=32`;
       favicon.alt = source.name;
+
+      const textWrapper = document.createElement('div');
+      textWrapper.className = 'source-text-wrapper';
+
+      const nameSpan = document.createElement('span');
+      nameSpan.className = 'source-name';
+      nameSpan.textContent = source.name;
+
+      const urlSpan = document.createElement('span');
+      urlSpan.className = 'source-url';
+      urlSpan.textContent = mainDomain;
+
+      textWrapper.appendChild(nameSpan);
+      textWrapper.appendChild(urlSpan);
+
       favicon.onerror = () => {
-        button.innerHTML = `<span class="font-bold text-sm">${source.name.substring(
-          0,
-          2
-        )}</span>`;
         favicon.remove();
+        const fallbackIcon = document.createElement('div');
+        fallbackIcon.className = 'source-icon fallback';
+        fallbackIcon.textContent = source.name.substring(0, 1).toUpperCase();
+        button.insertBefore(fallbackIcon, textWrapper);
       };
 
       button.appendChild(favicon);
+      button.appendChild(textWrapper);
+      
       sourceList.appendChild(button);
     });
-    console.log('Sources populated:', sources);
 
     if (sourceList.children.length > 0) {
       const firstButton = sourceList.children[0];
       firstButton.classList.add('active');
       initialSource = firstButton.dataset.source;
     }
+    
+    setupCarousel(sourceList);
+
   } else {
-    console.warn('No sources were loaded from the main process.');
+    console.warn('No sources loaded.');
   }
   return initialSource;
+}
+
+function setupCarousel(element) {
+  element.addEventListener('wheel', (evt) => {
+    if (evt.deltaY !== 0) {
+      if (element.scrollWidth > element.clientWidth) {
+        evt.preventDefault();
+        element.scrollLeft += evt.deltaY;
+      }
+    }
+  });
+
+  let isDown = false;
+  let startX;
+  let scrollLeft;
+
+  element.addEventListener('mousedown', (e) => {
+    isDown = true;
+    element.style.cursor = 'grabbing';
+    startX = e.pageX - element.offsetLeft;
+    scrollLeft = element.scrollLeft;
+  });
+
+  element.addEventListener('mouseleave', () => {
+    isDown = false;
+    element.style.cursor = 'grab';
+  });
+
+  element.addEventListener('mouseup', () => {
+    isDown = false;
+    element.style.cursor = 'grab';
+  });
+
+  element.addEventListener('mousemove', (e) => {
+    if (!isDown) return;
+    e.preventDefault(); 
+    const x = e.pageX - element.offsetLeft;
+    const walk = (x - startX) * 2; 
+    element.scrollLeft = scrollLeft - walk;
+  });
+  
+  element.style.cursor = 'grab';
 }

src/modules/navigation-handler.js

@@ -18,8 +18,7 @@ export function showPage(pageId, domRefs, callbacks, state) {
   });
 
   document.querySelectorAll('.nav-button').forEach((tab) => {
-    tab.classList.remove('bg-indigo-600', 'text-white');
+    tab.classList.remove('active');
-    tab.classList.add('text-gray-400', 'hover:bg-gray-700');
   });
 
   const activePage = document.getElementById(pageId);
@@ -46,7 +45,6 @@ export function showPage(pageId, domRefs, callbacks, state) {
   }
 
   if (activeTab) {
-    activeTab.classList.add('bg-indigo-600', 'text-white');
+    activeTab.classList.add('active');
-    activeTab.classList.remove('text-gray-400', 'hover:bg-gray-700');
   }
 }

src/updateNotification.js

@@ -1,6 +1,6 @@
 const GITHUB_OWNER = 'ItsSkaiya'; 
 const GITHUB_REPO = 'WaifuBoard'; 
-const CURRENT_VERSION = 'v1.3.1'; 
+const CURRENT_VERSION = 'v1.4.0'; 
 const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000; 
 
 let currentVersionDisplay;

src/utils/headless-browser.js

@@ -6,14 +6,15 @@ class HeadlessBrowser {
 
     const win = new BrowserWindow({
       show: false, 
-      width: 800,
+      width: 1920, 
-      height: 600,
+      height: 1080,
       webPreferences: {
         offscreen: true,  
         contextIsolation: false,  
         nodeIntegration: false,
-        images: true,  
+        images: false, 
         webgl: false,   
+        backgroundThrottling: false,
       },
     });
 
@@ -21,6 +22,26 @@ class HeadlessBrowser {
       const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';
       win.webContents.setUserAgent(userAgent);
 
+      const session = win.webContents.session;
+      const filter = { urls: ['*://*/*'] };
+      
+      session.webRequest.onBeforeRequest(filter, (details, callback) => {
+        const url = details.url.toLowerCase();
+        
+        const blockExtensions = [
+          '.css', '.woff', '.woff2', '.ttf', '.svg', '.eot', 
+          'google-analytics', 'doubleclick', 'facebook', 'twitter', 'adsystem' 
+        ];
+
+        const isBlocked = blockExtensions.some(ext => url.includes(ext));
+
+        if (isBlocked) {
+          return callback({ cancel: true }); 
+        }
+
+        return callback({ cancel: false });
+      });
+
       await win.loadURL(url, { userAgent });
 
       if (waitSelector) {
@@ -53,8 +74,7 @@ class HeadlessBrowser {
             clearTimeout(timer);
             resolve(true);
           } else {
-            // FIX: Use setTimeout because requestAnimationFrame stops in hidden windows
+            setTimeout(check, 50); 
-            setTimeout(check, 100); 
           }
         };
         check();

views/index.html

@@ -2,323 +2,195 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-  <meta http-equiv="Content-Security-Policy" content="
+    <meta http-equiv="Content-Security-Policy"
-        default-src 'self'; 
+        content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; connect-src 'self' https:;" />
-        script-src 'self' https://cdn.tailwindcss.com; 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        style-src 'self' https://cdn.tailwindcss.com 'unsafe-inline'; 
+    <title>Waifu Board</title>
-        img-src 'self' https: data:;
+    <link rel="stylesheet" href="./styles/home.css">
-        connect-src 'self' https:;
-      " />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Waifu Board</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    body {
-      font-family: 'Inter', sans-serif;
-      background-color: #111827;
-
-    }
-
-    ::-webkit-scrollbar {
-      width: 10px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background: #1f2937;
-
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background: #4b5563;
-
-      border-radius: 5px;
-      border: 2px solid #1f2937;
-
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-      background: #6b7280;
-
-    }
-
-    .hidden {
-      display: none;
-    }
-
-
-    .dark-focus-ring:focus {
-      outline: 2px solid #4f46e5;
-
-      outline-offset: 2px;
-    }
-
-
-    .source-button.active {
-      background-color: #4f46e5;
-
-      color: white;
-
-      outline: 2px solid #4f46e5;
-      outline-offset: 2px;
-    }
-
-
-    .image-entry:hover .image-buttons {
-      opacity: 1;
-    }
-
-
-
-
-    .gallery-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 1rem;
-    }
-
-
-
-
-    .gallery-masonry {
-
-      column-count: 2;
-
-      column-gap: 1rem;
-    }
-
-    @media (min-width: 768px) {
-      .gallery-masonry {
-        column-count: 3;
-
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .gallery-masonry {
-        column-count: 4;
-
-      }
-    }
-
-
-    .gallery-masonry .image-entry {
-      display: inline-block;
-
-      width: 100%;
-      margin-bottom: 1rem;
-
-      break-inside: avoid;
-
-    }
-
-
-    .toast {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      padding: 15px;
-      border-radius: 5px;
-      color: white;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-
-
-      display: flex;
-      align-items: flex-start;
-
-      min-width: 350px;
-      z-index: 1000;
-      transition: opacity 0.3s ease-in-out;
-    }
-
-    .toast-content {
-      flex-grow: 1;
-    }
-
-    .toast p {
-      margin: 0 0 5px 0;
-    }
-
-    .toast.update-available {
-      background-color: #e53935;
-    }
-
-    .toast.hidden {
-      opacity: 0;
-      pointer-events: none;
-    }
-  </style>
 </head>
 
-<body class="text-gray-200 flex h-screen overflow-hidden">
+<body>
-  <nav class="w-20 bg-gray-900 flex flex-col items-center flex-shrink-0 p-4 space-y-6">
-    <button id="browse-button" class="nav-button p-3 rounded-xl bg-indigo-600 text-white" title="Browse">
-      <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>
-    <button id="favorites-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
-      title="Favorites">
-      <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>
-    <button id="search-icon-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
-      title="Search">
-      <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>
 
-    <button id="settings-button" class="nav-button p-3 rounded-xl text-gray-400 hover:bg-gray-700 hover:text-white"
+    <aside class="sidebar">
-      title="Settings">
+        <br>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        <nav style="display: flex; flex-direction: column; gap: 0.5rem;">
-        class="w-6 h-6">
+            <button id="browse-button" class="nav-button active" title="Browse">
-        <path stroke-linecap="round" stroke-linejoin="round"
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          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" />
+                    <rect x="3" y="3" width="7" height="7"></rect>
-      </svg>
+                    <rect x="14" y="3" width="7" height="7"></rect>
-    </button>
+                    <rect x="14" y="14" width="7" height="7"></rect>
+                    <rect x="3" y="14" width="7" height="7"></rect>
+                </svg>
+                <span>Browse</span>
+            </button>
 
-    <div class="h-px w-10 bg-gray-700"></div>
+            <button id="favorites-button" class="nav-button" title="Favorites">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path
+                        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
+                    </path>
+                </svg>
+                <span>Favorites</span>
+            </button>
+        </nav>
 
-    <div id="source-list" class="flex flex-col items-center space-y-4" aria-label="Sources">
+        <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
-    </div>
+            <button id="settings-button" class="nav-button" title="Settings">
-  </nav>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="3"></circle>
+                    <path
+                        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
+                    </path>
+                </svg>
+                <span>Settings</span>
+            </button>
+        </nav>
+    </aside>
 
-  <div class="flex-1 flex flex-col overflow-hidden">
+    <div class="main-wrapper">
-    <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>
+        <header class="top-header">
-      <div id="header-context" class="text-sm text-gray-400"></div>
+            <div style="position: relative;">
-    </header>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+                <input type="text" id="search-input" placeholder="Search across sources..."
+                    style="padding-left: 2.5rem;" />
+            </div>
+
+            <button id="search-button" class="hidden"></button>
+            <button id="search-icon-button" class="hidden"></button>
+            <button id="search-close-button" class="hidden"></button>
+            <div id="header-context" class="hidden"></div>
+            <h1 id="page-title" class="hidden">Home</h1>
+        </header>
+
+        <div class="content-view">
+
+            <div id="browse-page" class="page">
+
+                <h3
+                    style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;">
+                    Sources</h3>
+                <div id="source-list">
+                </div>
+
+                <h3
+                    style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin: 2rem 0 1rem 0;">
+                    Library</h3>
+                <main id="content-gallery" class="gallery-masonry">
+                    <div id="gallery-placeholder" class="loading-state" style="width: 100%; grid-column: 1 / -1;">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="1">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                            <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                            <polyline points="21 15 16 10 5 21"></polyline>
+                        </svg>
+                        <p>Select a source above to load content</p>
+                    </div>
+
+                    <div id="loading-spinner" class="hidden loading-state" style="width: 100%; grid-column: 1 / -1;">
+                        <svg style="width:32px; height:32px; color: var(--accent); animation: spin 1s linear infinite;"
+                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path
+                                d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83">
+                            </path>
+                        </svg>
+                        <p>Fetching images...</p>
+                    </div>
+                    <div id="infinite-loading-spinner" class="hidden loading-state"
+                        style="width: 100%; grid-column: 1 / -1;">
+                        <p>Loading more...</p>
+                    </div>
+                </main>
+            </div>
+
+            <div id="favorites-page" class="page hidden">
+                <div style="margin-bottom: 2rem;">
+                    <h2 style="margin-bottom: 0.5rem;">Your Favorites</h2>
+                    <p style="color: var(--text-secondary);">Your personally curated collection.</p>
+                </div>
+                <main id="favorites-gallery" class="gallery-masonry"></main>
+            </div>
+
+            <div id="settings-page" class="page hidden">
+                <div style="margin-bottom: 2rem;">
+                    <h2>Settings</h2>
+                    <p style="color: var(--text-secondary);">Customize your viewing experience.</p>
+                </div>
+
+                <div class="settings-grid">
+                    <div class="settings-card">
+                        <h3>Layout Style</h3>
+                        <fieldset>
+                            <label>
+                                <input type="radio" name="layout" value="scroll" id="layout-scroll">
+                                <div>
+                                    <strong>Scroll View</strong>
+                                    <div style="font-size: 0.8rem; color: var(--text-tertiary);">Single column feed
+                                    </div>
+                                </div>
+                            </label>
+                            <label>
+                                <input type="radio" name="layout" value="grid" id="layout-grid">
+                                <div>
+                                    <strong>Masonry Grid</strong>
+                                    <div style="font-size: 0.8rem; color: var(--text-tertiary);">Staggered dynamic
+                                        heights</div>
+                                </div>
+                            </label>
+                            <label>
+                                <input type="radio" name="layout" value="compact" id="layout-compact">
+                                <div>
+                                    <strong>Compact Grid</strong>
+                                    <div style="font-size: 0.8rem; color: var(--text-tertiary);">Uniform square tiles
+                                    </div>
+                                </div>
+                            </label>
+                        </fieldset>
+                    </div>
+                </div>
+            </div>
 
-    <div id="browse-page" class="page flex-1 overflow-y-auto">
-      <main id="content-gallery" class="p-4 w-full" aria-live="polite">
-        <div id="loading-spinner" class="hidden text-center p-10 text-gray-400">
-          <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>
-        <p id="gallery-placeholder" class="text-gray-400 text-center text-lg">
+    </div>
-          Select a source and click the search icon to browse.
-        </p>
 
-        <div id="infinite-loading-spinner" class="hidden text-center p-10 text-gray-400">
+    <div id="tag-info-modal" class="hidden">
-          <svg class="animate-spin h-8 w-8 text-indigo-400 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none"
+        <div>
-            viewBox="0 0 24">
+            <button id="tag-info-close-button">&times;</button>
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <h3 style="margin-top:0; margin-bottom: 1rem;">Tags</h3>
-            <path class="opacity-75" fill="currentColor"
+            <div id="tag-info-content" class="tag-cloud"></div>
-              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>
 
-    <div id="favorites-page" class="page hidden flex-1 overflow-y-auto">
+    <div id="search-modal" class="hidden"></div>
-      <main id="favorites-gallery" class="p-4 w-full">
+
-      </main>
+    <div id="message-bar" class="toast hidden">Message</div>
+    <div id="updateToast" class="toast hidden" style="border-left-color: #eab308;">
+        <p>Update Available: <span id="latestVersionDisplay">v1.x</span></p>
     </div>
 
-    <div id="settings-page" class="page hidden flex-1 overflow-y-auto p-8">
+    <style>
-      <div class="max-w-2xl mx-auto space-y-8">
+        @keyframes spin {
-        <h2 class="text-2xl font-bold text-white">Settings</h2>
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
 
-        <div class="bg-gray-800 rounded-lg p-6">
+    <script type="module" src="../src/renderer.js"></script>
-          <h3 class="text-lg font-semibold text-gray-100 mb-4">
+    <script type="module" src="../scripts/main.js"></script>
-            Gallery Layout
+    <script src="../src/updateNotification.js"></script>
-          </h3>
+    <script>
-          <fieldset class="space-y-4">
+        // Simple Enter key handler for search
-            <label for="layout-scroll" class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer">
+        const searchInput = document.getElementById('search-input');
-              <input type="radio" id="layout-scroll" name="layout" value="scroll"
+        const searchBtn = document.getElementById('search-button');
-                class="h-5 w-5 text-indigo-600 border-gray-500 focus:ring-indigo-500" />
+        searchInput.addEventListener('keydown', (e) => {
-              <span class="ml-3 flex flex-col">
+            if (e.key === 'Enter') searchBtn.click();
-                <span class="font-medium text-gray-200">Scroll</span>
+        });
-                <span class="text-sm text-gray-400">A single, vertical column of large images.</span>
+    </script>
-              </span>
-            </label>
-            <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>
-
-            <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>
-
-  <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">
-        <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>
-
-  <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">
-        <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">
-      </div>
-    </div>
-  </div>
-
-  <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>An update is required for Waifu Board! newest version - <span id="latestVersionDisplay"></span></p>
-  </div>
-
-  <script type="module" src="../src/renderer.js"></script>
-  <script src="../src/updateNotification.js"></script>
 </body>
 
 </html>

views/styles/home.css

@@ -0,0 +1,573 @@
+:root {
+    --bg-base: #09090b;
+
+    --bg-sidebar: #101012;
+
+    --bg-surface: #18181b;
+
+    --bg-surface-hover: #27272a;
+
+    --accent: #8b5cf6;
+
+    --accent-glow: rgba(139, 92, 246, 0.3);
+    --accent-gradient: linear-gradient(135deg, #8b5cf6, #6366f1);
+
+    --text-primary: #f4f4f5;
+    --text-secondary: #a1a1aa;
+    --text-tertiary: #52525b;
+
+    --border: #27272a;
+    --border-hover: #3f3f46;
+
+    --radius-md: 8px;
+    --radius-lg: 16px;
+    --radius-full: 9999px;
+
+    --sidebar-width-collapsed: 72px;
+    --sidebar-width-expanded: 240px;
+    --header-height: 70px;
+}
+
+* {
+    box-sizing: border-box;
+    outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-base);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    height: 100vh;
+    display: flex;
+    overflow: hidden;
+}
+
+
+.sidebar {
+    width: var(--sidebar-width-collapsed);
+    background: var(--bg-sidebar);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem 0.75rem;
+    gap: 0.5rem;
+    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+    z-index: 50;
+    flex-shrink: 0;
+}
+
+.sidebar:hover {
+    width: var(--sidebar-width-expanded);
+}
+
+.main-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+}
+
+
+.brand-logo {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem;
+    margin-bottom: 2rem;
+    overflow: hidden;
+    color: var(--text-primary);
+    font-weight: 800;
+    font-size: 1.25rem;
+    letter-spacing: -0.5px;
+    cursor: default;
+}
+
+.brand-icon {
+    min-width: 32px;
+    height: 32px;
+    background: var(--accent-gradient);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+    margin-right: 1rem;
+    box-shadow: 0 0 15px var(--accent-glow);
+    color: white;
+}
+
+.nav-button {
+
+    display: flex;
+    align-items: center;
+    padding: 0.85rem;
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    background: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+    overflow: hidden;
+    position: relative;
+}
+
+.nav-button:hover {
+    background: var(--bg-surface);
+    color: var(--text-primary);
+}
+
+.nav-button.active {
+    background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent);
+    border-left: 3px solid var(--accent);
+    color: var(--accent);
+}
+
+
+.nav-button svg {
+    min-width: 24px;
+    width: 24px;
+    height: 24px;
+    margin-right: 1rem;
+}
+
+
+.nav-button span {
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.sidebar:hover .nav-button span {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+
+.top-header {
+    height: var(--header-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 2rem;
+    position: sticky;
+    top: 0;
+    z-index: 40;
+}
+
+
+.search-box {
+    display: contents;
+}
+
+
+#search-input {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-full);
+    padding: 0.5rem 1rem;
+    color: var(--text-primary);
+    width: 350px;
+    transition: 0.2s;
+    font-size: 0.9rem;
+}
+
+#search-input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-glow);
+}
+
+
+.content-view {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 2rem 2rem 2rem;
+}
+
+.page {
+
+    max-width: 1600px;
+    margin: 0 auto;
+    animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+
+
+
+#source-list {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
+    padding-bottom: 1rem;
+    scrollbar-width: none;
+
+    align-items: center;
+    flex-direction: row;
+
+}
+
+#source-list::-webkit-scrollbar {
+    display: none;
+}
+
+.source-button {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+
+
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+
+    padding: 0.75rem 1rem;
+    min-width: 200px;
+
+    width: auto;
+
+    height: auto;
+
+
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+    overflow: hidden;
+    text-align: left;
+}
+
+.source-button:hover {
+    background: var(--bg-surface-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    color: var(--text-primary);
+}
+
+.source-button.active {
+    border-color: var(--accent);
+    background: linear-gradient(to right, rgba(139, 92, 246, 0.05), transparent);
+    color: var(--text-primary);
+}
+
+
+.source-button img,
+.source-button .brand-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    object-fit: cover;
+    flex-shrink: 0;
+
+}
+
+
+.source-text-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    line-height: 1.3;
+}
+
+.source-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 0.95rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.source-url {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+.gallery-masonry {
+    column-count: 2;
+    column-gap: 1rem;
+}
+
+@media (min-width: 768px) {
+    .gallery-masonry {
+        column-count: 3;
+    }
+}
+
+@media (min-width: 1024px) {
+    .gallery-masonry {
+        column-count: 4;
+    }
+}
+
+@media (min-width: 1400px) {
+    .gallery-masonry {
+        column-count: 5;
+    }
+}
+
+.image-entry {
+    margin-bottom: 1rem;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    position: relative;
+    background: var(--bg-surface);
+    break-inside: avoid;
+    transition: transform 0.2s;
+    cursor: zoom-in;
+    display: inline-block;
+    width: 100%;
+
+}
+
+.image-entry:hover {
+    transform: scale(1.02);
+    z-index: 2;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+.image-entry img {
+    width: 100%;
+    height: auto;
+    display: block;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.image-entry img.loaded {
+    opacity: 1;
+}
+
+
+.image-entry img:not(.loaded) {
+    opacity: 1;
+}
+
+
+
+.image-buttons {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 2rem 1rem 1rem 1rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    opacity: 0;
+    transition: 0.2s;
+    top: auto;
+
+    right: auto;
+
+    flex-direction: row;
+
+}
+
+.image-entry:hover .image-buttons {
+    opacity: 1;
+}
+
+
+.image-buttons button {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(4px);
+    cursor: pointer;
+    transition: 0.2s;
+    padding: 0;
+
+}
+
+.image-buttons button:hover {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+.image-buttons button svg {
+    width: 16px;
+    height: 16px;
+}
+
+
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+
+.settings-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+}
+
+.settings-card h3 {
+    margin-top: 0;
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+
+fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+label {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    margin-bottom: 0.5rem;
+    transition: 0.2s;
+}
+
+label:hover {
+    background: var(--bg-surface-hover);
+}
+
+input[type="radio"] {
+    accent-color: var(--accent);
+    margin-top: 4px;
+    width: 1.2em;
+    height: 1.2em;
+}
+
+
+.hidden {
+    display: none !important;
+}
+
+.loading-state {
+    text-align: center;
+    padding: 4rem;
+    color: var(--text-tertiary);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+
+
+#tag-info-modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#tag-info-modal.hidden {
+    display: none;
+}
+
+#tag-info-modal>div {
+
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    padding: 2rem;
+    border-radius: var(--radius-lg);
+    width: 90%;
+    max-width: 500px;
+    position: relative;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+}
+
+#tag-info-close-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    color: var(--text-tertiary);
+    cursor: pointer;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 1rem;
+}
+
+
+#tag-info-content span {
+    background: var(--bg-surface-hover);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+}
+
+
+.toast {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background: var(--bg-sidebar);
+    border: 1px solid var(--border);
+    border-left: 4px solid var(--accent);
+    padding: 1rem 1.5rem;
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    transform: translateY(20px);
+    opacity: 0;
+    pointer-events: none;
+    transition: 0.3s;
+}
+
+.toast:not(.hidden) {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: all;
+}
+
+#message-bar:not(.hidden) {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: all;
+}