feat: Add Image Gallery with date grouping and carousel viewer

- Create gallery.js with complete image management system
- Add Gallery tab to productivity tray with grid layout
- Implement context menu 'Save to Chaos Gallery' for images
- Add date-based grouping (Today, Yesterday, week days, dates)
- Build full-screen carousel viewer with keyboard navigation
- Add individual image download with hover button
- Implement bulk download by date with staggered downloads
- Create enhanced empty state with step-by-step instructions
- Add copy URL, delete, and view source actions
- Integrate carousel with arrow navigation and ESC to close
- Store images in chrome.storage.local with metadata
- Add comprehensive CSS styling for gallery components
- Update About tab with Gallery feature documentation
- Update README with Gallery usage and features

Author: theabbie

README.md

@@ -22,7 +22,8 @@ Transform your new tab into a mesmerizing double pendulum physics simulation wit
 - ✅ **Smart To-Do List** - Priority levels, filters, completion tracking, and quick add
 - 🔖 **Bookmarks Manager** - Search and access all your bookmarks instantly
 - 🎨 **Custom Widgets** - Create your own HTML/CSS/JS widgets with drag, resize, and minimize
-- 🎯 **Context Menu Integration** - Right-click any text or link to add to your to-do list
+- 🖼️ **Image Gallery** - Save images from any webpage with right-click context menu
+- 🎯 **Context Menu Integration** - Right-click any text, link, or image to save to Chaos Tab
 - 💫 **Collapsible Tray** - Slides up from bottom, stays out of the way until needed
 - 🌐 **Online Indicator** - Real-time connection status with glowing indicator
 
@@ -124,6 +125,17 @@ Transform your new tab into a mesmerizing double pendulum physics simulation wit
 - Shadow DOM isolation for safe rendering
 - All widgets sync across devices
 
+**🖼️ Gallery Tab:**
+- Right-click any image on any webpage → "Save to Chaos Gallery"
+- Images saved with source URL and page title
+- Grid layout with hover actions
+- View full-size image in modal
+- Copy image URL to clipboard
+- Delete individual images
+- Clear all images at once
+- Stores images locally in browser storage
+- Shows when image was saved (relative time)
+
 **🔖 Bookmarks Tab:**
 - View all Chrome bookmarks in one place
 - Fast search by title or URL
@@ -206,7 +218,7 @@ curl -sL https://unpkg.com/pell@1.0.6/dist/pell.min.js -o pell.min.js
 ### Building
 After downloading external dependencies, create a distribution package:
 ```bash
-zip -r chaos-tab-v1.0.0.zip manifest.json newtab.html newtab.js background.js tray.js notes.js todos.js bookmarks.js widgets.js icons/ external/ -x "*.DS_Store"
+zip -r chaos-tab-v1.0.0.zip manifest.json newtab.html newtab.js background.js tray.js notes.js todos.js bookmarks.js widgets.js gallery.js icons/ external/ -x "*.DS_Store"
 ```
 
 ## Privacy

background.js

@@ -10,6 +10,12 @@ chrome.runtime.onInstalled.addListener(() => {
     title: 'Add Link to To-Do List',
     contexts: ['link']
   });
+
+  chrome.contextMenus.create({
+    id: 'saveToGallery',
+    title: 'Save to Chaos Gallery',
+    contexts: ['image']
+  });
 });
 
 chrome.contextMenus.onClicked.addListener((info, tab) => {
@@ -34,6 +40,8 @@ chrome.contextMenus.onClicked.addListener((info, tab) => {
       sourceUrl: info.pageUrl
     };
     addTodoItem(todoItem);
+  } else if (info.menuItemId === 'saveToGallery') {
+    saveImageToGallery(info, tab);
   }
 });
 
@@ -44,3 +52,33 @@ function addTodoItem(item) {
     chrome.storage.sync.set({ chaosTodos: todos });
   });
 }
+
+function saveImageToGallery(info, tab) {
+  const imageData = {
+    url: info.srcUrl,
+    srcUrl: info.srcUrl,
+    pageUrl: info.pageUrl,
+    pageTitle: tab.title,
+    timestamp: Date.now()
+  };
+
+  // Send message to the new tab page to add the image
+  chrome.tabs.query({ url: 'chrome-extension://*/newtab.html' }, (tabs) => {
+    tabs.forEach(t => {
+      chrome.tabs.sendMessage(t.id, {
+        action: 'addToGallery',
+        imageData: imageData
+      });
+    });
+  });
+
+  // Also store it directly in case no tab is open
+  chrome.storage.local.get(['chaosGallery'], (result) => {
+    const images = result.chaosGallery || [];
+    images.unshift({
+      id: Date.now(),
+      ...imageData
+    });
+    chrome.storage.local.set({ chaosGallery: images });
+  });
+}