Add drag selection to filter dropdowns

src/components/ColumnFilterPopover.tsx

@@ -24,6 +24,10 @@ export function ColumnFilterPopover({
   className
 }: ColumnFilterPopoverProps) {
   const [search, setSearch] = useState('');
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState<number | null>(null);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const listRef = React.useRef<HTMLDivElement>(null);
   
   const filteredValues = useMemo(() => {
     return uniqueValues.filter(v => 
@@ -33,6 +37,43 @@ export function ColumnFilterPopover({
 
   const isAllSelected = selectedValues.length === uniqueValues.length && uniqueValues.length > 0;
 
+  const handleMouseDown = (index: number) => {
+    setIsDragging(true);
+    setDragStart(index);
+  };
+
+  const handleMouseEnter = (index: number) => {
+    if (isDragging && dragStart !== null) {
+      setHoveredIndex(index);
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (isDragging && dragStart !== null && hoveredIndex !== null) {
+      const start = Math.min(dragStart, hoveredIndex);
+      const end = Math.max(dragStart, hoveredIndex);
+      const itemsToSelect = filteredValues.slice(start, end + 1).map(v => v);
+      const newSelected = new Set([...selectedValues]);
+      itemsToSelect.forEach(v => newSelected.add(v));
+      onSelectAll(Array.from(newSelected));
+    }
+    setIsDragging(false);
+    setDragStart(null);
+    setHoveredIndex(null);
+  };
+
+  React.useEffect(() => {
+    const handleGlobalMouseUp = () => {
+      if (isDragging) {
+        handleMouseUp();
+      }
+    };
+    if (isDragging) {
+      document.addEventListener('mouseup', handleGlobalMouseUp);
+      return () => document.removeEventListener('mouseup', handleGlobalMouseUp);
+    }
+  }, [isDragging, dragStart, hoveredIndex]);
+
   return (
     <div
       className={cn(
@@ -63,26 +104,38 @@ export function ColumnFilterPopover({
         )}
       </div>
 
-      <div className="max-h-48 overflow-y-auto space-y-0.5 pr-1 custom-scrollbar">
+      <div 
-        {filteredValues.map(val => (
+        ref={listRef}
-          <div
+        className="max-h-48 overflow-y-auto space-y-0.5 pr-1 custom-scrollbar"
-            key={val}
+      >
-            role="checkbox"
+        {filteredValues.map((val, idx) => {
-            aria-checked={selectedValues.includes(val)}
+          const isDragSelected = isDragging && dragStart !== null && hoveredIndex !== null &&
-            tabIndex={0}
+            ((idx >= dragStart && idx <= hoveredIndex) || (idx <= dragStart && idx >= hoveredIndex));
-            onClick={() => onToggle(val)}
+          return (
-            onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); } }}
+            <div
-            className="flex items-center gap-2 p-1.5 hover:bg-slate-700/50 rounded cursor-pointer group"
+              key={val}
-          >
+              role="checkbox"
-            <div className={cn(
+              aria-checked={selectedValues.includes(val)}
-              "w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
+              tabIndex={0}
-              selectedValues.includes(val) ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
+              onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
-            )}>
+              onMouseEnter={() => handleMouseEnter(idx)}
-              {selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
+              onClick={(e) => { if (!isDragging) onToggle(val); }}
+              onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); } }}
+              className={cn(
+                "flex items-center gap-2 p-1.5 rounded cursor-pointer group transition-colors",
+                isDragSelected ? "bg-blue-600/40" : "hover:bg-slate-700/50"
+              )}
+            >
+              <div className={cn(
+                "w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
+                selectedValues.includes(val) ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
+              )}>
+                {selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
+              </div>
+              <span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
             </div>
-            <span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
+          );
-          </div>
+        })}
-        ))}
         {filteredValues.length === 0 && (
           <div className="text-[10px] text-slate-500 text-center py-4 italic">No values found</div>
         )}