fix: repair memory-list project filter + add type-ahead project dropdown

The memory list page threw a Next.js server-side exception whenever a project filter was applied. The filter built a raw Drizzle `sql` fragment that interpolated a JS string[] into `ANY(${accessibleIds}::uuid[])`, which doesn't bind as a Postgres array literal — the same array-binding bug class already fixed in #1 (commits 3019446, b3f7e60) for memory.list/snippet.list. The search path avoided it by using the `pg` tag; the plain list path did not. Fix: resolve the typed project key to a single project id from the user's accessible set (owned ∪ shared, owned winning on key collision to match project.identify and the search path), then filter with a plain `eq(memories.projectId, resolvedId)` — fully parameterized, no raw array interpolation. Returns empty when the key matches no readable project. This also makes the list view's collision semantics consistent with the search view. Feature: replace the plain "Project key…" text input with a type-ahead combobox (_project-combobox.tsx) populated with the user's accessible project keys, narrowing as they type; selecting a suggestion applies the filter immediately. Free-typed keys still submit. getAccessibleProjects is hoisted to the page and reused for both the dropdown options and the list WHERE clause (no extra query on the list path). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-01 16:17:47 -07:00
parent 4c1cff160d
commit 8d51fbff7a
2 changed files with 184 additions and 18 deletions
@@ -0,0 +1,151 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+
+const field =
+  "block w-full rounded-md bg-surface-1 border border-border " +
+  "text-fg placeholder:text-fg-subtle " +
+  "focus:border-accent-400 focus:outline-none " +
+  "disabled:opacity-50 transition-colors h-9 px-3 text-sm";
+
+/**
+ * Type-ahead project filter. A text input whose value submits as `name`
+ * (default "project") via the enclosing GET form, plus a dropdown of the
+ * projects the user can read that narrows as they type. Selecting a
+ * suggestion fills the box and submits the form so the filter applies
+ * immediately; free text is still allowed (the input value is what
+ * submits), so an arbitrary key keeps working even if it isn't listed.
+ */
+export function ProjectCombobox({
+  name = "project",
+  defaultValue = "",
+  options,
+  className = "",
+}: {
+  name?: string;
+  defaultValue?: string;
+  options: string[];
+  className?: string;
+}) {
+  const [value, setValue] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(0);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listId = useId();
+
+  // Case-insensitive substring match. An empty box shows the full list so
+  // the control doubles as a "browse my projects" dropdown.
+  const q = value.trim().toLowerCase();
+  const matches = q
+    ? options.filter((o) => o.toLowerCase().includes(q))
+    : options;
+
+  // Close when focus/click leaves the widget.
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: PointerEvent) {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+
+  function commit(next: string) {
+    setValue(next);
+    setOpen(false);
+    // Write the DOM value synchronously before submitting: setValue only
+    // schedules a re-render (React batches it), so the input's serialized
+    // value would still be the pre-selection text when requestSubmit reads
+    // it. The upcoming render sets the same value, so there's no flicker.
+    if (inputRef.current) inputRef.current.value = next;
+    // requestSubmit fires a real submit (unlike form.submit()).
+    inputRef.current?.form?.requestSubmit();
+  }
+
+  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        setActive(0);
+      } else {
+        setActive((i) => Math.min(i + 1, matches.length - 1));
+      }
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      // Only intercept Enter to pick a highlighted suggestion; otherwise
+      // let it fall through and submit the form with the typed value.
+      if (open && matches[active]) {
+        e.preventDefault();
+        commit(matches[active]);
+      }
+    } else if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        setOpen(false);
+      }
+    }
+  }
+
+  const showList = open && matches.length > 0;
+
+  return (
+    <div ref={rootRef} className={`relative ${className}`}>
+      <input
+        ref={inputRef}
+        type="text"
+        name={name}
+        value={value}
+        placeholder="Project key…"
+        autoComplete="off"
+        spellCheck={false}
+        role="combobox"
+        aria-expanded={showList}
+        aria-controls={listId}
+        aria-autocomplete="list"
+        aria-activedescendant={
+          showList ? `${listId}-opt-${active}` : undefined
+        }
+        className={field}
+        onChange={(e) => {
+          setValue(e.target.value);
+          setOpen(true);
+          setActive(0);
+        }}
+        onFocus={() => setOpen(true)}
+        onKeyDown={onKeyDown}
+      />
+      {showList ? (
+        <ul
+          id={listId}
+          role="listbox"
+          className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border border-border bg-surface-1 py-1 shadow-lg"
+        >
+          {matches.map((opt, i) => (
+            <li
+              key={opt}
+              id={`${listId}-opt-${i}`}
+              role="option"
+              aria-selected={i === active}
+              className={`cursor-pointer px-3 py-1.5 font-mono text-sm text-fg ${
+                i === active ? "bg-surface-2" : ""
+              }`}
+              // pointerdown (not click) so the choice registers before the
+              // input's blur/outside-pointerdown handler closes the list.
+              onPointerDown={(e) => {
+                e.preventDefault();
+                commit(opt);
+              }}
+              onMouseEnter={() => setActive(i)}
+            >
+              {opt}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}