refactor: Simplify gallery carousel to viewing-only mode

- Fix carousel close button with stopPropagation
- Remove all action buttons from carousel (copy, delete, source)
- Move download button to top-right of image (floating)
- Remove copy button from gallery grid items
- Simplify carousel to just image viewing with navigation
- Update counter styling to bottom center
- Increase image max height to 85vh for better viewing

Author: theabbie

bookmarks.js

@@ -41,12 +41,17 @@ function renderBookmarks() {
     const displayUrl = new URL(bookmark.url).hostname;
     return `
       <a href="${bookmark.url}" class="bookmark-item" target="_blank">
-        <img src="${favicon}" class="bookmark-favicon" onerror="this.style.display='none'">
+        <img src="${favicon}" class="bookmark-favicon">
         <span class="bookmark-title">${escapeHtml(bookmark.title || bookmark.url)}</span>
         <span class="bookmark-url">${displayUrl}</span>
       </a>
     `;
   }).join('');
+  document.querySelectorAll('.bookmark-favicon').forEach(img => {
+    img.addEventListener('error', function() {
+      this.style.display = 'none';
+    });
+  });
 }
 function escapeHtml(text) {
   const div = document.createElement('div');

gallery.js

@@ -13,6 +13,9 @@ function loadImages() {
     renderGallery();
   });
 }
+function refreshGallery() {
+  loadImages();
+}
 function saveImages() {
   chrome.storage.local.set({ chaosGallery: images });
 }
@@ -86,9 +89,6 @@ function renderGallery() {
             <i data-lucide="download"></i>
           </button>
           <div class="gallery-overlay">
-            <button class="gallery-action-btn gallery-copy-btn" data-image-url="${escapeHtml(image.url)}">
-              <i data-lucide="copy"></i>
-            </button>
             <button class="gallery-action-btn gallery-delete-btn delete" data-image-id="${image.id}">
               <i data-lucide="trash-2"></i>
             </button>
@@ -123,13 +123,6 @@ function attachGalleryEventListeners() {
       downloadImage(imageUrl, imageId);
     });
   });
-  document.querySelectorAll('.gallery-copy-btn').forEach(btn => {
-    btn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      const imageUrl = btn.dataset.imageUrl;
-      copyImageUrl(imageUrl);
-    });
-  });
   document.querySelectorAll('.gallery-delete-btn').forEach(btn => {
     btn.addEventListener('click', (e) => {
       e.stopPropagation();
@@ -185,6 +178,7 @@ function isThisYear(date) {
   return date.getFullYear() === new Date().getFullYear();
 }
 let currentCarouselIndex = 0;
+let carouselKeyHandler = null;
 function openCarousel(imageId) {
   currentCarouselIndex = images.findIndex(img => img.id === imageId);
   if (currentCarouselIndex === -1) currentCarouselIndex = 0;
@@ -195,52 +189,45 @@ function showCarousel() {
   if (!image) return;
   const existing = document.querySelector('.gallery-carousel');
   if (existing) existing.remove();
+  if (carouselKeyHandler) {
+    document.removeEventListener('keydown', carouselKeyHandler);
+  }
   const carousel = document.createElement('div');
   carousel.className = 'gallery-carousel';
   carousel.innerHTML = `
     <div class="gallery-carousel-content">
       <button class="gallery-carousel-close">
         <i data-lucide="x"></i>
       </button>
+      
       ${currentCarouselIndex > 0 ? `
         <button class="gallery-carousel-nav gallery-carousel-prev">
           <i data-lucide="chevron-left"></i>
         </button>
       ` : ''}
+      
       ${currentCarouselIndex < images.length - 1 ? `
         <button class="gallery-carousel-nav gallery-carousel-next">
           <i data-lucide="chevron-right"></i>
         </button>
       ` : ''}
-      <div class="gallery-carousel-image-container">
+      
+      <div class="gallery-carousel-image-wrapper">
         <img src="${escapeHtml(image.url)}" alt="Gallery image" class="gallery-carousel-image">
+        <button class="gallery-carousel-download-btn" data-image-url="${escapeHtml(image.url)}" data-image-id="${image.id}" title="Download image">
+          <i data-lucide="download"></i>
+        </button>
       </div>
-      <div class="gallery-carousel-info">
-        <div class="gallery-carousel-counter">${currentCarouselIndex + 1} / ${images.length}</div>
-        <div class="gallery-carousel-title">${escapeHtml(image.pageTitle || 'Untitled')}</div>
-        <div class="gallery-carousel-actions">
-          ${image.pageUrl ? `<a href="${escapeHtml(image.pageUrl)}" target="_blank" class="gallery-carousel-btn">
-            <i data-lucide="external-link"></i> Source
-          </a>` : ''}
-          <button class="gallery-carousel-btn gallery-carousel-download" data-image-url="${escapeHtml(image.url)}" data-image-id="${image.id}">
-            <i data-lucide="download"></i> Download
-          </button>
-          <button class="gallery-carousel-btn gallery-carousel-copy" data-image-url="${escapeHtml(image.url)}">
-            <i data-lucide="copy"></i> Copy URL
-          </button>
-          <button class="gallery-carousel-btn gallery-carousel-delete delete" data-image-id="${image.id}">
-            <i data-lucide="trash-2"></i> Delete
-          </button>
-        </div>
-      </div>
+      
+      <div class="gallery-carousel-counter">${currentCarouselIndex + 1} / ${images.length}</div>
     </div>
   `;
   carousel.addEventListener('click', (e) => {
     if (e.target === carousel) {
       closeCarousel();
     }
   });
-  const handleKeyPress = (e) => {
+  carouselKeyHandler = (e) => {
     if (e.key === 'Escape') {
       closeCarousel();
     } else if (e.key === 'ArrowLeft' && currentCarouselIndex > 0) {
@@ -249,52 +236,50 @@ function showCarousel() {
       nextImage();
     }
   };
-  document.addEventListener('keydown', handleKeyPress);
-  carousel.dataset.keyHandler = 'attached';
+  document.addEventListener('keydown', carouselKeyHandler);
   document.body.appendChild(carousel);
   lucide.createIcons();
   attachCarouselEventListeners();
 }
 function attachCarouselEventListeners() {
   const closeBtn = document.querySelector('.gallery-carousel-close');
   if (closeBtn) {
-    closeBtn.addEventListener('click', closeCarousel);
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      closeCarousel();
+    });
   }
   const prevBtn = document.querySelector('.gallery-carousel-prev');
   if (prevBtn) {
-    prevBtn.addEventListener('click', prevImage);
+    prevBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      prevImage();
+    });
   }
   const nextBtn = document.querySelector('.gallery-carousel-next');
   if (nextBtn) {
-    nextBtn.addEventListener('click', nextImage);
+    nextBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      nextImage();
+    });
   }
-  const downloadBtn = document.querySelector('.gallery-carousel-download');
+  const downloadBtn = document.querySelector('.gallery-carousel-download-btn');
   if (downloadBtn) {
-    downloadBtn.addEventListener('click', () => {
+    downloadBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
       const imageUrl = downloadBtn.dataset.imageUrl;
       const imageId = parseInt(downloadBtn.dataset.imageId);
       downloadImage(imageUrl, imageId);
     });
   }
-  const copyBtn = document.querySelector('.gallery-carousel-copy');
-  if (copyBtn) {
-    copyBtn.addEventListener('click', () => {
-      const imageUrl = copyBtn.dataset.imageUrl;
-      copyImageUrl(imageUrl);
-    });
-  }
-  const deleteBtn = document.querySelector('.gallery-carousel-delete');
-  if (deleteBtn) {
-    deleteBtn.addEventListener('click', () => {
-      const imageId = parseInt(deleteBtn.dataset.imageId);
-      deleteImageFromCarousel(imageId);
-    });
-  }
 }
 function closeCarousel() {
   const carousel = document.querySelector('.gallery-carousel');
   if (carousel) {
-    document.removeEventListener('keydown', handleKeyPress);
+    if (carouselKeyHandler) {
+      document.removeEventListener('keydown', carouselKeyHandler);
+      carouselKeyHandler = null;
+    }
     carousel.remove();
   }
 }
@@ -412,7 +397,8 @@ window.galleryFunctions = {
   prevImage,
   deleteImageFromCarousel,
   downloadImage,
-  downloadDateImages
+  downloadDateImages,
+  refreshGallery
 };
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.action === 'addToGallery') {

newtab.html

@@ -1535,6 +1535,8 @@
     .gallery-action-btn svg {
       width: 18px;
       height: 18px;
+      color: white;
+      stroke: white;
     }
 
     .gallery-info {
@@ -1722,6 +1724,13 @@
       z-index: 5;
     }
 
+    .gallery-download-btn svg {
+      width: 16px;
+      height: 16px;
+      color: white;
+      stroke: white;
+    }
+
     .gallery-item:hover .gallery-download-btn {
       opacity: 1;
     }
@@ -1731,9 +1740,9 @@
       border-color: rgba(139, 92, 246, 0.6);
     }
 
-    .gallery-download-btn svg {
-      width: 16px;
-      height: 16px;
+    .gallery-download-btn:hover svg {
+      color: white;
+      stroke: white;
     }
 
     .gallery-image-wrapper {
@@ -1833,88 +1842,63 @@
       right: 40px;
     }
 
-    .gallery-carousel-image-container {
+    .gallery-carousel-image-wrapper {
+      position: relative;
       max-width: 90vw;
-      max-height: 70vh;
+      max-height: 85vh;
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
     .gallery-carousel-image {
       max-width: 100%;
-      max-height: 70vh;
+      max-height: 85vh;
       object-fit: contain;
       border-radius: 8px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
     }
 
-    .gallery-carousel-info {
+    .gallery-carousel-download-btn {
       position: absolute;
-      bottom: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgba(24, 24, 27, 0.95);
-      border: 1px solid rgba(63, 63, 70, 0.6);
-      border-radius: 12px;
-      padding: 20px;
-      max-width: 800px;
-      width: 90%;
-      backdrop-filter: blur(16px);
-    }
-
-    .gallery-carousel-counter {
-      color: #71717a;
-      font-size: 12px;
-      margin-bottom: 8px;
-      text-align: center;
-    }
-
-    .gallery-carousel-title {
-      color: #fafafa;
-      font-size: 16px;
-      font-weight: 600;
-      margin-bottom: 16px;
-      text-align: center;
-    }
-
-    .gallery-carousel-actions {
-      display: flex;
-      gap: 8px;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-
-    .gallery-carousel-btn {
+      top: 20px;
+      right: 20px;
+      width: 48px;
+      height: 48px;
+      background: rgba(0, 0, 0, 0.7);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 8px;
+      color: white;
+      cursor: pointer;
       display: flex;
       align-items: center;
-      gap: 6px;
-      padding: 10px 16px;
-      background: rgba(63, 63, 70, 0.4);
-      border: 1px solid rgba(63, 63, 70, 0.6);
-      border-radius: 6px;
-      color: #a1a1aa;
-      font-size: 13px;
-      cursor: pointer;
+      justify-content: center;
       transition: all 0.2s;
-      text-decoration: none;
+      z-index: 10;
     }
 
-    .gallery-carousel-btn:hover {
-      background: rgba(63, 63, 70, 0.6);
-      color: #fafafa;
-      border-color: rgba(63, 63, 70, 0.8);
+    .gallery-carousel-download-btn:hover {
+      background: rgba(139, 92, 246, 0.9);
+      border-color: rgba(139, 92, 246, 0.6);
+      transform: scale(1.05);
     }
 
-    .gallery-carousel-btn.delete:hover {
-      background: rgba(239, 68, 68, 0.2);
-      color: #ef4444;
-      border-color: rgba(239, 68, 68, 0.5);
+    .gallery-carousel-download-btn svg {
+      width: 22px;
+      height: 22px;
     }
 
-    .gallery-carousel-btn svg {
-      width: 16px;
-      height: 16px;
+    .gallery-carousel-counter {
+      position: absolute;
+      bottom: 30px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fafafa;
+      font-size: 14px;
+      background: rgba(0, 0, 0, 0.7);
+      padding: 8px 16px;
+      border-radius: 20px;
+      backdrop-filter: blur(8px);
     }
 
     .about-container {

tray.js

@@ -9,6 +9,9 @@ trayToggle.addEventListener('click', (e) => {
   bottomTray.classList.toggle('collapsed');
   trayToggle.classList.toggle('expanded');
   chrome.storage.sync.set({ trayExpanded });
+  if (trayExpanded && window.galleryFunctions) {
+    window.galleryFunctions.refreshGallery();
+  }
 });
 document.addEventListener('click', (e) => {
   if (trayExpanded && !bottomTray.contains(e.target) && e.target !== trayToggle) {
@@ -29,6 +32,9 @@ trayTabs.forEach(tab => {
     tabPanels.forEach(panel => panel.classList.remove('active'));
     document.getElementById(`${tabName}Panel`).classList.add('active');
     chrome.storage.sync.set({ activeTab: tabName });
+    if (tabName === 'gallery' && window.galleryFunctions) {
+      window.galleryFunctions.refreshGallery();
+    }
   });
 });
 chrome.storage.sync.get(['trayExpanded', 'activeTab'], (result) => {