feat: add multi-window merge + make selection UI nicer

Author: jmininger

src/App.css

@@ -11,9 +11,15 @@
 }
 
 .window-item {
-  border: 1px solid #ccc;
-  margin-bottom: 10px;
-  padding: 5px;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #ccc;
+}
+
+.window-item.selected { /* {{ edit: Style for selected window-item }} */
+  background-color: #e0f7fa;
 }
 
 .window-label {
@@ -41,3 +47,37 @@
   flex-grow: 1;
 }
 
+.active-tab {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.tab-dropdown { /* {{ edit: Make dropdown scrollable when overflow }} */
+  max-height: 200px;
+  overflow-y: auto;
+  position: absolute;
+  background-color: white;
+  border: 1px solid #ccc;
+  list-style: none;
+  padding: 5px;
+  margin-top: 5px;
+  z-index: 1000; /* {{ edit: Ensure dropdown appears above other elements }} */
+}
+
+.tab-dropdown .tab-item {
+  padding: 5px 10px;
+}
+
+/* Adjust the merge button for better usability */
+.merge-button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.merge-button:disabled { /* {{ edit: Style disabled merge button }} */
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+

src/App.jsx

@@ -1,5 +1,5 @@
 // App.jsx
-import React, { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import WindowItem from './WindowItem';
 import {
   getAllWindows,
@@ -36,22 +36,22 @@ function App() {
 
   // Merge the selected windows
   const mergeWindows = async () => {
-    if (selectedWindowIds.length !== 2) {
-      alert('Please select exactly two windows to merge.');
+    if (selectedWindowIds.length < 2) { // {{ edit: Allow merging two or more windows }}
+      alert('Please select two or more windows to merge.');
       return;
     }
 
-    const [windowId1, windowId2] = selectedWindowIds.map(Number);
+    const [targetWindowId, ...otherWindowIds] = selectedWindowIds.map(Number);
 
-    // Get all tabs from the second window
-    const tabs = await queryTabs({ windowId: windowId2 });
-    const tabIds = tabs.map((tab) => tab.id);
+    // Get all tabs from the other windows
+    const allOtherTabs = await Promise.all(otherWindowIds.map(id => queryTabs({ windowId: id })));
+    const tabIdsToMove = allOtherTabs.flat().map(tab => tab.id);
 
-    // Move tabs to the first window
-    await moveTabs(tabIds, { windowId: windowId1, index: -1 });
+    // Move tabs to the target window
+    await moveTabs(tabIdsToMove, { windowId: targetWindowId, index: -1 });
 
-    // Close the second window
-    await removeWindow(windowId2);
+    // Close the other windows
+    await Promise.all(otherWindowIds.map(id => removeWindow(id)));
 
     // Refresh the window list
     await fetchWindows();
@@ -69,7 +69,11 @@ function App() {
           onSelect={handleWindowSelect}
         />
       ))}
-      <button onClick={mergeWindows} className="merge-button">
+      <button
+        onClick={mergeWindows}
+        className="merge-button"
+        disabled={selectedWindowIds.length < 2} // {{ edit: Disable button if fewer than two windows are selected }}
+      >
         Merge Selected Windows
       </button>
     </div>

src/WindowItem.jsx

@@ -1,25 +1,64 @@
 // WindowItem.jsx
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react'; // {{ edit: Import useRef and useEffect }}
+import PropTypes from 'prop-types'; // {{ edit: Import PropTypes for props validation }}
 import TabItem from './TabItem';
 
 function WindowItem({ window, isSelected, onSelect }) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef(null); // {{ edit: Create ref for dropdown }}
+  const activeTab = window.tabs.find(tab => tab.active);
+
+  // {{ edit: Handle click outside to close dropdown }}
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownOpen(false);
+      }
+    };
+
+    if (dropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [dropdownOpen]);
+
   return (
-    <div className="window-item">
-      <label>
-        <input
-          type="checkbox"
-          checked={isSelected}
-          onChange={() => onSelect(window.id.toString())}
-        />
-        <span className="window-label"> Window {window.id}</span>
-      </label>
-      <ul className="tab-list">
-        {window.tabs.map((tab) => (
-          <TabItem key={tab.id} tab={tab} />
-        ))}
-      </ul>
+    <div
+      className={`window-item ${isSelected ? 'selected' : ''}`} // {{ edit: Add 'selected' class based on isSelected prop }}
+      onClick={() => onSelect(window.id.toString())}
+    >
+      <span className="window-label">{activeTab.title}</span> 
+      {activeTab && (
+        <div className="active-tab" onClick={(e) => e.stopPropagation()} ref={dropdownRef}>
+          <TabItem tab={activeTab} />
+          <button onClick={() => setDropdownOpen(!dropdownOpen)}>
+            {dropdownOpen ? '▲' : '▼'}
+          </button>
+          {dropdownOpen && (
+            <ul className="tab-dropdown">
+              {window.tabs.map(tab => ( // {{ edit: Include all tabs in dropdown }}
+                <TabItem key={tab.id} tab={tab} />
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
     </div>
   );
 }
 
+WindowItem.propTypes = { // {{ edit: Define prop types for WindowItem }}
+  window: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    tabs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  }).isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
 export default WindowItem;