.

Author: alanboy

tab-extension/README.md

@@ -9,6 +9,7 @@ A Chrome extension for managing browser tabs and windows, inspired by Cluster Ta
 - **Tab Management**: 
   - Select multiple tabs with checkboxes
   - Close selected tabs in bulk
+  - Move selected tabs to another window in bulk
   - Close individual tabs
 - **Rich Tab Information**:
   - Full URL path (not just domain)

tab-extension/icons/icon128.svg

@@ -95,6 +95,9 @@ function createWindowCard(window) {
           <option value="title">Sort by Title</option>
           <option value="domain">Sort by Domain</option>
         </select>
+        <select class="move-to-dropdown" data-window-id="${window.id}" disabled>
+          <option value="">Move to...</option>
+        </select>
         <button class="btn btn-danger btn-close-selected" data-window-id="${window.id}" disabled>
           Close Selected
         </button>
@@ -142,15 +145,9 @@ function createTabRow(tab, windowId) {
     // Escape the favicon URL for use in HTML attribute
     const escapedFavicon = favicon.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 
-    // Format metadata
+    // Format metadata (only icons, no time)
     let metaHtml = '<div class="tab-meta">';
 
-    // Last accessed time (if available)
-    if (tab.lastAccessed) {
-      const timeAgo = getTimeAgo(tab.lastAccessed);
-      metaHtml += `<span class="tab-meta-item" title="Last accessed">🕐 ${timeAgo}</span>`;
-    }
-    
     // Audible indicator
     if (tab.audible) {
       metaHtml += `<span class="tab-meta-item" title="Playing audio">🔊</span>`;
@@ -163,6 +160,13 @@ function createTabRow(tab, windowId) {
 
     metaHtml += '</div>';
 
+    // Time ago for top right
+    let timeAgoHtml = '';
+    if (tab.lastAccessed) {
+      const timeAgo = getTimeAgo(tab.lastAccessed);
+      timeAgoHtml = `<span class="tab-time" title="Last accessed">${timeAgo}</span>`;
+    }
+    
     return `
       <div class="tab-row" data-tab-id="${tab.id}" data-window-id="${windowId}" draggable="true">
         <input type="checkbox" class="tab-checkbox" data-tab-id="${tab.id}">
@@ -172,6 +176,7 @@ function createTabRow(tab, windowId) {
           <div class="tab-url">${escapeHtml(urlPath)}</div>
           ${metaHtml}
         </div>
+        ${timeAgoHtml}
         <div class="tab-actions">
           <button class="tab-action-btn" data-action="close" data-tab-id="${tab.id}">✕</button>
         </div>
@@ -209,19 +214,39 @@ function setupWindowCardListeners(card, window) {
     sortTabs(windowId, e.target.value);
   });
 
+  // Move to dropdown - populate with other windows
+  const moveToDropdown = card.querySelector('.move-to-dropdown');
+  allWindows.forEach(w => {
+    if (w.id !== windowId) {
+      const option = document.createElement('option');
+      option.value = w.id;
+      option.textContent = w.id === currentWindowId ? 'Current Window' : `Window ${w.id}`;
+      moveToDropdown.appendChild(option);
+    }
+  });
+  
+  moveToDropdown.addEventListener('change', (e) => {
+    if (e.target.value) {
+      moveSelectedTabs(windowId, parseInt(e.target.value));
+      e.target.value = ''; // Reset dropdown
+    }
+  });
+  
   // Select all checkbox
   const selectAllCheckbox = card.querySelector('.select-all-checkbox');
   selectAllCheckbox.addEventListener('change', (e) => {
     const checkboxes = card.querySelectorAll('.tab-checkbox');
     checkboxes.forEach(cb => cb.checked = e.target.checked);
     updateCloseButton(windowId);
+    updateMoveToButton(windowId);
   });
 
   // Tab checkboxes
   const tabCheckboxes = card.querySelectorAll('.tab-checkbox');
   tabCheckboxes.forEach(checkbox => {
     checkbox.addEventListener('change', () => {
       updateCloseButton(windowId);
+      updateMoveToButton(windowId);
       updateSelectAllCheckbox(windowId);
     });
   });
@@ -277,6 +302,14 @@ function updateCloseButton(windowId) {
   closeButton.disabled = checkboxes.length === 0;
 }
 
+// Update move to button state
+function updateMoveToButton(windowId) {
+  const card = document.querySelector(`[data-window-id="${windowId}"]`);
+  const checkboxes = card.querySelectorAll('.tab-checkbox:checked');
+  const moveToDropdown = card.querySelector('.move-to-dropdown');
+  moveToDropdown.disabled = checkboxes.length === 0;
+}
+
 // Update select all checkbox state
 function updateSelectAllCheckbox(windowId) {
   const card = document.querySelector(`[data-window-id="${windowId}"]`);
@@ -300,6 +333,20 @@ async function closeSelectedTabs(windowId) {
   }
 }
 
+// Move selected tabs to another window
+async function moveSelectedTabs(fromWindowId, toWindowId) {
+  const card = document.querySelector(`[data-window-id="${fromWindowId}"]`);
+  const checkedCheckboxes = card.querySelectorAll('.tab-checkbox:checked');
+  const tabIds = Array.from(checkedCheckboxes).map(cb => parseInt(cb.dataset.tabId));
+  
+  if (tabIds.length > 0) {
+    for (const tabId of tabIds) {
+      await chrome.tabs.move(tabId, { windowId: toWindowId, index: -1 });
+    }
+    setTimeout(loadWindows, 100);
+  }
+}
+
 // Extract top-level domain from hostname
 function getTopLevelDomain(url) {
   try {

tab-extension/icons/icon16.svg

@@ -179,11 +179,12 @@ header {
 
 .tab-row {
   display: flex;
-  align-items: center;
-  padding: 8px 14px;
+  align-items: flex-start;
+  padding: 6px 14px;
   border-bottom: 1px solid #f5f5f5;
   transition: background-color 0.15s;
   cursor: move;
+  position: relative;
 }
 
 .tab-row:hover {
@@ -200,6 +201,7 @@ header {
 
 .tab-checkbox {
   margin-right: 10px;
+  margin-top: 2px;
   cursor: pointer;
   width: 14px;
   height: 14px;
@@ -209,6 +211,7 @@ header {
   width: 16px;
   height: 16px;
   margin-right: 10px;
+  margin-top: 1px;
   flex-shrink: 0;
 }
 
@@ -240,23 +243,35 @@ header {
 
 .tab-meta {
   display: flex;
-  gap: 8px;
-  font-size: 10px;
+  gap: 6px;
+  font-size: 11px;
   color: #aaa;
-  margin-top: 2px;
+  margin-top: 1px;
 }
 
 .tab-meta-item {
   display: flex;
   align-items: center;
-  gap: 3px;
+  gap: 2px;
+}
+
+.tab-time {
+  position: absolute;
+  top: 6px;
+  right: 40px;
+  font-size: 10px;
+  color: #aaa;
+  white-space: nowrap;
 }
 
 .tab-actions {
   display: flex;
   gap: 4px;
   opacity: 0;
   transition: opacity 0.2s;
+  margin-left: auto;
+  padding-left: 8px;
+  margin-top: 2px;
 }
 
 .tab-row:hover .tab-actions {