From cead772af0a6153eef44b0634e175b5061ad2a63 Mon Sep 17 00:00:00 2001
From: Daksh Shahani <dakshitshahani@gmail.com>
Date: Wed, 22 Jul 2026 13:57:25 -0700
Subject: [PATCH 1/5] feat(query): add categorical column metadata and value
 extraction

---
 src/services/query.ts | 58 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/services/query.ts b/src/services/query.ts
index c6eea5f..9786230 100644
--- a/src/services/query.ts
+++ b/src/services/query.ts
@@ -331,6 +331,64 @@ export interface FlattenedApplicant {
   [key: string]: string | number | boolean | Date | null | Record<string, boolean> | undefined; // extra keys for group-by results
 }
 
+export const CATEGORICAL_COLUMNS: ReadonlySet<string> = new Set([
+  "applicationStatus",
+  "educationLevel",
+  "major",
+  "role",
+  "dietaryRestriction",
+  "culturalBackground",
+  "school",
+  "gender",
+  "countryOfResidence",
+  "academicYear",
+  "canadianStatus",
+  "disability",
+  "haveTransExperience",
+  "indigenousIdentification",
+  "jobPosition",
+  "travellingToHackathon",
+  "engagementSource",
+  "ageByHackathon",
+  "graduation",
+]);
+
+export const MULTI_VALUE_COLUMNS: ReadonlySet<string> = new Set([
+  "major",
+  "gender",
+  "dietaryRestriction",
+  "culturalBackground",
+  "role",
+  "engagementSource",
+]);
+
+export const extractColumnValues = (
+  applicants: FlattenedApplicant[],
+): Record<string, string[]> => {
+  const result: Record<string, string[]> = {};
+  for (const column of CATEGORICAL_COLUMNS) {
+    const values = new Set<string>();
+    const isMultiValue = MULTI_VALUE_COLUMNS.has(column);
+    for (const applicant of applicants) {
+      const raw = applicant[column];
+      if (raw === null || raw === undefined) continue;
+      if (isMultiValue) {
+        for (const token of String(raw).split(",")) {
+          const trimmed = token.trim();
+          if (trimmed) values.add(trimmed);
+        }
+      } else {
+        const trimmed = String(raw).trim();
+        if (trimmed) values.add(trimmed);
+      }
+    }
+    result[column] = [...values].sort((a, b) =>
+      a.localeCompare(b, undefined, { sensitivity: "base" }),
+    );
+  }
+  return result;
+};
+
 /**
  * Calculates all hackers' points from day-of events asynchronously
  *

From 1af7dbd2abde8ee8afa54b3935707fbe1662b29d Mon Sep 17 00:00:00 2001
From: Daksh Shahani <dakshitshahani@gmail.com>
Date: Wed, 22 Jul 2026 14:22:44 -0700
Subject: [PATCH 2/5] feat(query): expose columnValueOptions on QueryProvider
 and pass to FilterRows

---
 src/components/features/query/query-filters.tsx | 2 ++
 src/providers/query-provider.tsx                | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/features/query/query-filters.tsx b/src/components/features/query/query-filters.tsx
index e52dd7d..e29596d 100644
--- a/src/components/features/query/query-filters.tsx
+++ b/src/components/features/query/query-filters.tsx
@@ -23,6 +23,7 @@ export function QueryFilters({ availableColumns }: QueryFiltersProps) {
     sorting,
     onSortingChange,
     applicants,
+    columnValueOptions,
   } = useQuery();
 
   const handleColumnsChange = (columns: string[]) => {
@@ -113,6 +114,7 @@ export function QueryFilters({ availableColumns }: QueryFiltersProps) {
           <FilterRows
             columns={columns}
             columnTypes={columnTypes}
+            columnValueOptions={columnValueOptions}
             filterSelections={filterSelections}
             onAddFilter={onFilterAdd}
             onRemoveFilter={onFilterRemove}
diff --git a/src/providers/query-provider.tsx b/src/providers/query-provider.tsx
index 91ac870..47a245e 100644
--- a/src/providers/query-provider.tsx
+++ b/src/providers/query-provider.tsx
@@ -11,6 +11,7 @@ import type {
 import type { FlattenedApplicant } from "@/services/query";
 import {
   calculateApplicantPoints,
+  extractColumnValues,
   flattenApplicantData,
   subscribeToApplicants,
 } from "@/services/query";
@@ -138,6 +139,8 @@ interface QueryContextType {
   // Final data after processing
   tableData: FlattenedApplicant[];
 
+  columnValueOptions: Record<string, string[]>;
+
   // Actions
   onColumnToggle: (column: string) => void;
   onGroupByChange: (selection: GroupBySelection | undefined) => void;
@@ -182,6 +185,8 @@ export function QueryProvider({ children }: QueryProviderProps) {
   const [filterSelections, setFilterSelections] = useState<FilterRowsSelection[]>([]);
   const [sorting, setSorting] = useState<SortingState>([]);
 
+  const columnValueOptions = useMemo(() => extractColumnValues(applicants), [applicants]);
+
   const tableData = useMemo(() => {
     let filtered = applicants;
     if (filterSelections.length > 0) {
@@ -288,6 +293,7 @@ export function QueryProvider({ children }: QueryProviderProps) {
     filterSelections,
     sorting,
     tableData,
+    columnValueOptions,
     onColumnToggle: handleColumnToggle,
     onGroupByChange: setGroupBySelection,
     onFilterAdd: handleFilterAdd,

From 8cbdd03343fd00811fb94a82ce2f25be22b44f70 Mon Sep 17 00:00:00 2001
From: Daksh Shahani <dakshitshahani@gmail.com>
Date: Wed, 22 Jul 2026 14:42:25 -0700
Subject: [PATCH 3/5] feat(query): prefix-filtered combobox for categorical
 filter values

---
 .../features/query/popovers/filter-rows.tsx   |  45 +++++--
 src/components/ui/combobox.tsx                | 112 ++++++++++++++++++
 2 files changed, 150 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ui/combobox.tsx

diff --git a/src/components/features/query/popovers/filter-rows.tsx b/src/components/features/query/popovers/filter-rows.tsx
index d782e84..d8976c1 100644
--- a/src/components/features/query/popovers/filter-rows.tsx
+++ b/src/components/features/query/popovers/filter-rows.tsx
@@ -1,5 +1,6 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Combobox } from "@/components/ui/combobox";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
@@ -11,9 +12,12 @@ import {
 } from "@/components/ui/select";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { FilterRowsSelection } from "@/lib/firebase/types";
+import { CATEGORICAL_COLUMNS } from "@/services/query";
 import { Check, Pencil, Plus, X } from "lucide-react";
 import { useState } from "react";
 
+const BOOLEAN_OPTIONS = ["true", "false"];
+
 /**
  * Set of possible operators for filtering rows based on data type.
  */
@@ -39,6 +43,7 @@ const CONDITION_OPTIONS: Record<string, { value: string; label: string }[]> = {
 interface FilterRowsProps {
   columns: string[];
   columnTypes: Record<string, string>;
+  columnValueOptions: Record<string, string[]>;
   filterSelections: FilterRowsSelection[];
   onAddFilter: (filter: FilterRowsSelection) => void;
   onRemoveFilter: (filterId: string) => void;
@@ -53,6 +58,7 @@ interface FilterRowsProps {
 export function FilterRows({
   columns,
   columnTypes,
+  columnValueOptions,
   filterSelections,
   onAddFilter,
   onRemoveFilter,
@@ -283,13 +289,38 @@ export function FilterRows({
                   ))}
                 </SelectContent>
               </Select>
-              <Input
-                className="max-w-[160px] text-sm"
-                placeholder="Enter value…"
-                value={newFilterValue}
-                onChange={(e) => setNewFilterValue(e.target.value)}
-                disabled={!newFilterCondition}
-              />
+              {(() => {
+                const isBoolean = type === "boolean";
+                const isCategorical = CATEGORICAL_COLUMNS.has(newFilterColumn);
+                const options = isBoolean
+                  ? BOOLEAN_OPTIONS
+                  : isCategorical
+                    ? (columnValueOptions[newFilterColumn] ?? [])
+                    : [];
+
+                if (isBoolean || isCategorical) {
+                  return (
+                    <Combobox
+                      className="max-w-[160px] text-sm"
+                      placeholder="Enter value…"
+                      value={newFilterValue}
+                      onChange={setNewFilterValue}
+                      options={options}
+                      disabled={!newFilterCondition}
+                    />
+                  );
+                }
+
+                return (
+                  <Input
+                    className="max-w-[160px] text-sm"
+                    placeholder="Enter value…"
+                    value={newFilterValue}
+                    onChange={(e) => setNewFilterValue(e.target.value)}
+                    disabled={!newFilterCondition}
+                  />
+                );
+              })()}
               <Button
                 size="icon"
                 variant="ghost"
diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
new file mode 100644
index 0000000..dc38358
--- /dev/null
+++ b/src/components/ui/combobox.tsx
@@ -0,0 +1,112 @@
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { useEffect, useRef, useState } from "react";
+
+interface ComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: string[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Combobox({
+  value,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  className,
+}: ComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [highlight, setHighlight] = useState(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const search = value.trim().toLowerCase();
+  const filtered = search ? options.filter((o) => o.toLowerCase().startsWith(search)) : options;
+  const showDropdown =
+    open && filtered.length > 0 && !(filtered.length === 1 && filtered[0] === value.trim());
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reset highlight when the search term changes
+  useEffect(() => {
+    setHighlight(0);
+  }, [search]);
+
+  const pick = (item: string) => {
+    onChange(item);
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!showDropdown) {
+      if (e.key === "ArrowDown" && filtered.length > 0) setOpen(true);
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlight((h) => (h + 1) % filtered.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlight((h) => (h - 1 + filtered.length) % filtered.length);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filtered[highlight]) pick(filtered[highlight]);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Popover open={showDropdown} onOpenChange={setOpen}>
+      <PopoverAnchor>
+        <Input
+          ref={inputRef}
+          disabled={disabled}
+          placeholder={placeholder}
+          value={value}
+          className={className}
+          onChange={(e) => {
+            onChange(e.target.value);
+            setOpen(true);
+          }}
+          onFocus={() => setOpen(true)}
+          onBlur={() => {
+            setTimeout(() => {
+              if (!inputRef.current?.contains(document.activeElement)) setOpen(false);
+            }, 0);
+          }}
+          onKeyDown={onKeyDown}
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        className="w-[var(--radix-popover-trigger-width)] p-1"
+        align="start"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <div className="max-h-60 overflow-y-auto">
+          {filtered.map((opt, i) => (
+            <button
+              type="button"
+              key={opt}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                pick(opt);
+              }}
+              onMouseEnter={() => setHighlight(i)}
+              className={cn(
+                "flex w-full cursor-default items-center rounded-sm px-2 py-1.5 text-left text-sm",
+                i === highlight ? "bg-accent text-accent-foreground" : "hover:bg-accent/50",
+              )}
+            >
+              {opt}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

From 39d23543816b9668b6bb69c0fb89b469242503ae Mon Sep 17 00:00:00 2001
From: Daksh Shahani <dakshitshahani@gmail.com>
Date: Wed, 22 Jul 2026 14:57:10 -0700
Subject: [PATCH 4/5] fix(query): onClick fixed (ai fix lol)

---
 src/components/ui/combobox.tsx | 64 +++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
index dc38358..84d39b9 100644
--- a/src/components/ui/combobox.tsx
+++ b/src/components/ui/combobox.tsx
@@ -26,8 +26,7 @@ export function Combobox({
 
   const search = value.trim().toLowerCase();
   const filtered = search ? options.filter((o) => o.toLowerCase().startsWith(search)) : options;
-  const showDropdown =
-    open && filtered.length > 0 && !(filtered.length === 1 && filtered[0] === value.trim());
+  const showDropdown = open && filtered.length > 0;
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: reset highlight when the search term changes
   useEffect(() => {
@@ -61,7 +60,7 @@ export function Combobox({
   };
 
   return (
-    <Popover open={showDropdown} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverAnchor>
         <Input
           ref={inputRef}
@@ -74,6 +73,7 @@ export function Combobox({
             setOpen(true);
           }}
           onFocus={() => setOpen(true)}
+          onClick={() => setOpen(true)}
           onBlur={() => {
             setTimeout(() => {
               if (!inputRef.current?.contains(document.activeElement)) setOpen(false);
@@ -82,31 +82,39 @@ export function Combobox({
           onKeyDown={onKeyDown}
         />
       </PopoverAnchor>
-      <PopoverContent
-        className="w-[var(--radix-popover-trigger-width)] p-1"
-        align="start"
-        onOpenAutoFocus={(e) => e.preventDefault()}
-      >
-        <div className="max-h-60 overflow-y-auto">
-          {filtered.map((opt, i) => (
-            <button
-              type="button"
-              key={opt}
-              onMouseDown={(e) => {
-                e.preventDefault();
-                pick(opt);
-              }}
-              onMouseEnter={() => setHighlight(i)}
-              className={cn(
-                "flex w-full cursor-default items-center rounded-sm px-2 py-1.5 text-left text-sm",
-                i === highlight ? "bg-accent text-accent-foreground" : "hover:bg-accent/50",
-              )}
-            >
-              {opt}
-            </button>
-          ))}
-        </div>
-      </PopoverContent>
+      {filtered.length > 0 && (
+        <PopoverContent
+          className="w-[var(--radix-popover-trigger-width)] p-1"
+          align="start"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onPointerDownOutside={(e) => {
+            if (inputRef.current?.contains(e.target as Node)) e.preventDefault();
+          }}
+          onFocusOutside={(e) => {
+            if (inputRef.current?.contains(e.target as Node)) e.preventDefault();
+          }}
+        >
+          <div className="max-h-60 overflow-y-auto">
+            {filtered.map((opt, i) => (
+              <button
+                type="button"
+                key={opt}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  pick(opt);
+                }}
+                onMouseEnter={() => setHighlight(i)}
+                className={cn(
+                  "flex w-full cursor-default items-center rounded-sm px-2 py-1.5 text-left text-sm",
+                  i === highlight ? "bg-accent text-accent-foreground" : "hover:bg-accent/50",
+                )}
+              >
+                {opt}
+              </button>
+            ))}
+          </div>
+        </PopoverContent>
+      )}
     </Popover>
   );
 }

From bd81868d3909e2e68d730b53a49be324e2d8412e Mon Sep 17 00:00:00 2001
From: Daksh Shahani <dakshitshahani@gmail.com>
Date: Thu, 23 Jul 2026 16:36:49 -0700
Subject: [PATCH 5/5] refactor(query): clearer operator labels

---
 .../features/query/popovers/filter-rows.tsx      | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/features/query/popovers/filter-rows.tsx b/src/components/features/query/popovers/filter-rows.tsx
index d8976c1..646ade9 100644
--- a/src/components/features/query/popovers/filter-rows.tsx
+++ b/src/components/features/query/popovers/filter-rows.tsx
@@ -23,20 +23,20 @@ const BOOLEAN_OPTIONS = ["true", "false"];
  */
 const CONDITION_OPTIONS: Record<string, { value: string; label: string }[]> = {
   string: [
-    { value: "matches", label: "matches" },
-    { value: "does_not_match", label: "does not match" },
-    { value: "equals", label: "equals" },
-    { value: "not_equals", label: "is not equal to" },
+    { value: "matches", label: "contains" },
+    { value: "does_not_match", label: "does not contain" },
+    { value: "equals", label: "exactly equals" },
+    { value: "not_equals", label: "is not exactly equal to" },
   ],
   number: [
-    { value: "equals", label: "equals" },
-    { value: "not_equals", label: "is not equal to" },
+    { value: "equals", label: "exactly equals" },
+    { value: "not_equals", label: "is not exactly equal to" },
     { value: "greater_than", label: "greater than" },
     { value: "less_than", label: "less than" },
   ],
   boolean: [
-    { value: "equals", label: "equals" },
-    { value: "not_equals", label: "is not equal to" },
+    { value: "equals", label: "exactly equals" },
+    { value: "not_equals", label: "is not exactly equal to" },
   ],
 };