Add Excel-like filter conditions to column filters

Add Condition tab with: equals, not equals, contains, starts with, ends with, greater than, less than, between

src/components/ColumnFilterPopover.tsx

@@ -1,7 +1,15 @@
 import React, { useState, useMemo } from 'react';
-import { Search, Check, X } from 'lucide-react';
+import { Search, Check, X, Filter } from 'lucide-react';
 import { cn } from '../lib/utils';
 
+type FilterType = 'equals' | 'notEquals' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'between';
+
+interface FilterCondition {
+  type: FilterType;
+  value: string;
+  value2?: string;
+}
+
 interface ColumnFilterPopoverProps {
   uniqueValues: string[];
   selectedValues: string[];
@@ -24,6 +32,17 @@ export function ColumnFilterPopover({
   className
 }: ColumnFilterPopoverProps) {
   const [search, setSearch] = useState('');
+  const [activeTab, setActiveTab] = useState<'values' | 'condition'>('values');
+  const [condition, setCondition] = useState<FilterCondition>({ type: 'equals', value: '' });
+  const [conditionResult, setConditionResult] = useState<string[]>([]);
+
+  const isDraggingRef = React.useRef(false);
+  const dragStartRef = React.useRef<number | null>(null);
+  const hoveredIndexRef = React.useRef<number | null>(null);
+  const selectedValuesRef = React.useRef<string[]>(selectedValues);
+  const onSelectAllRef = React.useRef(onSelectAll);
+  const filteredValuesRef = React.useRef<string[]>([]);
+  const didDragRef = React.useRef(false);
   const [isDragging, setIsDragging] = useState(false);
   const [dragStart, setDragStart] = useState<number | null>(null);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
@@ -36,19 +55,57 @@ export function ColumnFilterPopover({
     );
   }, [uniqueValues, search]);
 
-  const isAllSelected = selectedValues.length === uniqueValues.length && uniqueValues.length > 0;
+  filteredValuesRef.current = filteredValues;
-
-  const isDraggingRef = React.useRef(false);
-  const dragStartRef = React.useRef<number | null>(null);
-  const hoveredIndexRef = React.useRef<number | null>(null);
-  const selectedValuesRef = React.useRef<string[]>(selectedValues);
-  const onSelectAllRef = React.useRef(onSelectAll);
-  const filteredValuesRef = React.useRef(filteredValues);
-  const didDragRef = React.useRef(false);
-
   selectedValuesRef.current = selectedValues;
   onSelectAllRef.current = onSelectAll;
-  filteredValuesRef.current = filteredValues;
+
+  const isAllSelected = selectedValues.length === uniqueValues.length && uniqueValues.length > 0;
+
+  const applyCondition = () => {
+    const results: string[] = [];
+    const valNum = parseFloat(condition.value);
+    const val2Num = condition.value2 ? parseFloat(condition.value2) : 0;
+
+    filteredValues.forEach(v => {
+      const strVal = String(v || '');
+      const numVal = parseFloat(v);
+
+      let matches = false;
+
+      switch (condition.type) {
+        case 'equals':
+          matches = strVal.toLowerCase() === condition.value.toLowerCase();
+          break;
+        case 'notEquals':
+          matches = strVal.toLowerCase() !== condition.value.toLowerCase();
+          break;
+        case 'contains':
+          matches = strVal.toLowerCase().includes(condition.value.toLowerCase());
+          break;
+        case 'startsWith':
+          matches = strVal.toLowerCase().startsWith(condition.value.toLowerCase());
+          break;
+        case 'endsWith':
+          matches = strVal.toLowerCase().endsWith(condition.value.toLowerCase());
+          break;
+        case 'greaterThan':
+          matches = !isNaN(numVal) && !isNaN(valNum) && numVal > valNum;
+          break;
+        case 'lessThan':
+          matches = !isNaN(numVal) && !isNaN(valNum) && numVal < valNum;
+          break;
+        case 'between':
+          matches = !isNaN(numVal) && !isNaN(val2Num) && numVal >= valNum && numVal <= val2Num;
+          break;
+      }
+
+      if (matches) results.push(v);
+    });
+
+    setConditionResult(results);
+    onSelectAll(results);
+    setActiveTab('values');
+  };
 
   const handleMouseDown = (index: number) => {
     isDraggingRef.current = true;
@@ -73,7 +130,6 @@ export function ColumnFilterPopover({
         const start = dragStartRef.current;
         const end = hoveredIndexRef.current;
         
-        // Only trigger special drag-select if it covered more than one item
         if (start !== null && end !== null && start !== end) {
           const s = Math.min(start, end);
           const e = Math.max(start, end);
@@ -81,8 +137,6 @@ export function ColumnFilterPopover({
           const newSelected = new Set([...selectedValuesRef.current]);
           itemsToSelect.forEach(v => newSelected.add(v));
           onSelectAllRef.current(Array.from(newSelected));
-          
-          // Set flag to prevent subsequent click event from toggling the end item
           didDragRef.current = true;
           setTimeout(() => { didDragRef.current = false; }, 100);
         }
@@ -102,113 +156,196 @@ export function ColumnFilterPopover({
   return (
     <div
       className={cn(
-        "absolute top-full left-0 mt-1 w-64 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100",
+        "absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100",
         className
       )}
       onClick={(e) => e.stopPropagation()}
     >
       {title && <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">{title}</div>}
 
-      <div className="relative">
+      <div className="flex gap-1 border-b border-slate-700 pb-2">
-        <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
-        <input
-          type="text"
-          placeholder="Filter values..."
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500"
-          autoFocus
-        />
-        {search && (
-          <button
-            onClick={() => setSearch('')}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
-          >
-            <X className="w-3 h-3" />
-          </button>
-        )}
-      </div>
-
-      <div 
-        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}
-              onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
-              onMouseEnter={() => handleMouseEnter(idx)}
-              onClick={(e) => {
-                // If a drag operation just happened, ignore the click to avoid double-selection issues
-                if (didDragRef.current) return;
-                
-                if (e.shiftKey && lastClickedIndex !== null) {
-                  const start = Math.min(lastClickedIndex, idx);
-                  const end = Math.max(lastClickedIndex, idx);
-                  const itemsToSelect = filteredValues.slice(start, end + 1);
-                  const newSelected = new Set([...selectedValues, ...itemsToSelect]);
-                  onSelectAll(Array.from(newSelected));
-                } else {
-                  onToggle(val);
-                }
-                setLastClickedIndex(idx);
-              }}
-              onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); setLastClickedIndex(idx); } }}
-              className={cn(
-                "flex items-center gap-2 p-1.5 rounded cursor-pointer group transition-colors select-none",
-                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>
-          );
-        })}
-        {filteredValues.length === 0 && (
-          <div className="text-[10px] text-slate-500 text-center py-4 italic">No values found</div>
-        )}
-      </div>
-
-      <div className="flex items-center justify-between pt-2 border-t border-slate-700 mt-1">
-        <div className="flex items-center gap-3">
-          <button
-            onClick={() => {
-              if (isAllSelected) {
-                onSelectAll([]);
-              } else {
-                onSelectAll(uniqueValues);
-              }
-            }}
-            className="text-[10px] font-black text-indigo-400 hover:text-indigo-300 transition-colors uppercase tracking-tight"
-          >
-            {isAllSelected ? 'Deselect All' : 'Select All'}
-          </button>
-          <span className="text-slate-600 font-bold">•</span>
-          <button
-            onClick={onClear}
-            className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
-          >
-            Clear Current
-          </button>
-        </div>
         <button
-          onClick={onClose}
+          onClick={() => setActiveTab('values')}
-          className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95 uppercase"
+          className={cn(
+            "flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors",
+            activeTab === 'values' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
+          )}
         >
-          OK
+          Values ({selectedValues.length})
+        </button>
+        <button
+          onClick={() => setActiveTab('condition')}
+          className={cn(
+            "flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors flex items-center justify-center gap-1",
+            activeTab === 'condition' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
+          )}
+        >
+          <Filter className="w-3 h-3" />
+          Condition
         </button>
       </div>
+
+      {activeTab === 'values' ? (
+        <>
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
+            <input
+              type="text"
+              placeholder="Filter values..."
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500"
+              autoFocus
+            />
+            {search && (
+              <button
+                onClick={() => setSearch('')}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            )}
+          </div>
+
+          <div 
+            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}
+                  onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
+                  onMouseEnter={() => handleMouseEnter(idx)}
+                  onClick={(e) => {
+                    if (didDragRef.current) return;
+                    if (e.shiftKey && lastClickedIndex !== null) {
+                      const start = Math.min(lastClickedIndex, idx);
+                      const end = Math.max(lastClickedIndex, idx);
+                      const itemsToSelect = filteredValues.slice(start, end + 1);
+                      const newSelected = new Set([...selectedValues, ...itemsToSelect]);
+                      onSelectAll(Array.from(newSelected));
+                    } else {
+                      onToggle(val);
+                    }
+                    setLastClickedIndex(idx);
+                  }}
+                  onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); setLastClickedIndex(idx); } }}
+                  className={cn(
+                    "flex items-center gap-2 p-1.5 rounded cursor-pointer group transition-colors select-none",
+                    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>
+              );
+            })}
+            {filteredValues.length === 0 && (
+              <div className="text-[10px] text-slate-500 text-center py-4 italic">No values found</div>
+            )}
+          </div>
+
+          <div className="flex items-center justify-between pt-2 border-t border-slate-700 mt-1">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => {
+                  if (isAllSelected) {
+                    onSelectAll([]);
+                  } else {
+                    onSelectAll(uniqueValues);
+                  }
+                }}
+                className="text-[10px] font-black text-indigo-400 hover:text-indigo-300 transition-colors uppercase tracking-tight"
+              >
+                {isAllSelected ? 'Deselect All' : 'Select All'}
+              </button>
+              <span className="text-slate-600 font-bold">•</span>
+              <button
+                onClick={onClear}
+                className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
+              >
+                Clear
+              </button>
+            </div>
+            <button
+              onClick={onClose}
+              className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95 uppercase"
+            >
+              OK
+            </button>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="space-y-2">
+            <div>
+              <label className="text-[10px] text-slate-400 uppercase">Condition Type</label>
+              <select
+                value={condition.type}
+                onChange={e => setCondition({ ...condition, type: e.target.value as FilterType })}
+                className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+              >
+                <option value="equals">Equals (=)</option>
+                <option value="notEquals">Not Equals (≠)</option>
+                <option value="contains">Contains</option>
+                <option value="startsWith">Starts With</option>
+                <option value="endsWith">Ends With</option>
+                <option value="greaterThan">Greater Than (&gt;)</option>
+                <option value="lessThan">Less Than (&lt;)</option>
+                <option value="between">Between</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="text-[10px] text-slate-400 uppercase">Value</label>
+              <input
+                type="text"
+                value={condition.value}
+                onChange={e => setCondition({ ...condition, value: e.target.value })}
+                placeholder="Enter value..."
+                className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+              />
+            </div>
+
+            {condition.type === 'between' && (
+              <div>
+                <label className="text-[10px] text-slate-400 uppercase">And</label>
+                <input
+                  type="text"
+                  value={condition.value2 || ''}
+                  onChange={e => setCondition({ ...condition, value2: e.target.value })}
+                  placeholder="Enter second value..."
+                  className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+                />
+              </div>
+            )}
+
+            <button
+              onClick={applyCondition}
+              className="w-full py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors"
+            >
+              Apply Condition
+            </button>
+          </div>
+
+          {conditionResult.length > 0 && (
+            <div className="text-[10px] text-green-400 text-center pt-2 border-t border-slate-700">
+              Found {conditionResult.length} matching value{conditionResult.length !== 1 ? 's' : ''}
+            </div>
+          )}
+        </>
+      )}
     </div>
   );
 }