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,16 +104,27 @@ 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}
+        className="max-h-48 overflow-y-auto space-y-0.5 pr-1 custom-scrollbar"
+      >
+        {filteredValues.map((val, idx) => {
+          const isDragSelected = isDragging && dragStart !== null && hoveredIndex !== null &&
+            ((idx >= dragStart && idx <= hoveredIndex) || (idx <= dragStart && idx >= hoveredIndex));
+          return (
             <div
               key={val}
               role="checkbox"
               aria-checked={selectedValues.includes(val)}
               tabIndex={0}
-            onClick={() => onToggle(val)}
+              onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
+              onMouseEnter={() => handleMouseEnter(idx)}
+              onClick={(e) => { if (!isDragging) onToggle(val); }}
               onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); } }}
-            className="flex items-center gap-2 p-1.5 hover:bg-slate-700/50 rounded cursor-pointer group"
+              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",
@@ -82,7 +134,8 @@ export function ColumnFilterPopover({
               </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>
         )}