From 54d5a6cea9dc26bf211d4ab4738af51e828cd0b0 Mon Sep 17 00:00:00 2001
From: Mahad Kalam <mahadkalam1234@gmail.com>
Date: Tue, 1 Sep 2026 02:43:49 +0000
Subject: [PATCH 1/3] Consolidate user search combobox behaviour

Amp-Thread-ID: https://ampcode.com/threads/T-01a05ac9-3763-74fe-8ebd-b4cd88c93554
Co-authored-by: Amp <amp@ampcode.com>
---
 app/javascript/components/UserPicker.svelte   | 233 ++++++----------
 .../components/UserSearchCombobox.svelte      | 182 +++++++++++++
 app/javascript/pages/Admin/Timeline.svelte    | 248 +++++++++---------
 test/system/admin/timeline_test.rb            |  56 ++++
 4 files changed, 440 insertions(+), 279 deletions(-)
 create mode 100644 app/javascript/components/UserSearchCombobox.svelte

diff --git a/app/javascript/components/UserPicker.svelte b/app/javascript/components/UserPicker.svelte
index 9986a9b73..c17eb406c 100644
--- a/app/javascript/components/UserPicker.svelte
+++ b/app/javascript/components/UserPicker.svelte
@@ -12,8 +12,8 @@
 </script>
 
 <script lang="ts">
-  import { Debounced } from "runed";
   import Search from "hcicons-svelte/search";
+  import UserSearchCombobox from "./UserSearchCombobox.svelte";
   import { formatUtcDate } from "../utils";
 
   type Accent = "primary" | "green" | "red";
@@ -38,17 +38,8 @@
     emptyText = "No user selected",
   }: Props = $props();
 
-  let query = $state("");
-  let results = $state<UserPickerResult[]>([]);
-  let open = $state(false);
-  let highlight = $state(-1);
-  let searchAbortController: AbortController | null = null;
-  let searchSequence = 0;
-  const debouncedQuery = new Debounced(() => query, 200);
-
   const dropdownBase = "absolute left-0 top-full z-50 mt-1";
   const dropdownPanel = "rounded-lg border border-surface-200 bg-dark";
-  let listboxId = $derived(`${id}-results`);
 
   let selectedClass = $derived(
     accent === "green"
@@ -57,90 +48,6 @@
         ? "border-red/30 bg-red/10"
         : "border-primary/30 bg-primary/10",
   );
-
-  let dropdownClass = $derived(
-    results.length
-      ? `${dropdownBase} max-h-48 w-full overflow-y-auto ${dropdownPanel} shadow-lg`
-      : `${dropdownBase} w-full ${dropdownPanel} p-3 text-center text-sm text-muted shadow-lg`,
-  );
-
-  let activeDescendant = $derived(
-    open && highlight >= 0 && highlight < results.length
-      ? `${id}-result-${results[highlight].id}`
-      : undefined,
-  );
-
-  $effect(() => {
-    void doSearch(debouncedQuery.current);
-  });
-
-  function resetSearch() {
-    open = false;
-    results = [];
-    highlight = -1;
-  }
-
-  async function doSearch(searchQuery: string) {
-    const requestSequence = ++searchSequence;
-    searchAbortController?.abort();
-
-    const trimmed = searchQuery.trim();
-    if (!trimmed) return resetSearch();
-
-    const controller = new AbortController();
-    searchAbortController = controller;
-
-    try {
-      const res = await fetch(
-        `${searchUrl}?query=${encodeURIComponent(trimmed)}`,
-        { signal: controller.signal },
-      );
-      if (!res.ok) throw new Error(`Search failed with ${res.status}`);
-
-      const nextResults = await res.json();
-      if (requestSequence !== searchSequence) return;
-
-      results = nextResults;
-      open = true;
-      highlight = -1;
-    } catch (error) {
-      if (error instanceof Error && error.name === "AbortError") return;
-      if (requestSequence === searchSequence) resetSearch();
-    } finally {
-      if (searchAbortController === controller) searchAbortController = null;
-    }
-  }
-
-  function selectUser(user: UserPickerResult) {
-    selected = user;
-    query = "";
-    open = false;
-  }
-
-  function handleOptionKeydown(e: KeyboardEvent, user: UserPickerResult) {
-    if (e.key !== "Enter" && e.key !== " ") return;
-
-    e.preventDefault();
-    selectUser(user);
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape") {
-      open = false;
-      return;
-    }
-
-    if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Enter")
-      return;
-
-    e.preventDefault();
-
-    if (e.key === "ArrowDown")
-      highlight = Math.min(highlight + 1, results.length - 1);
-    else if (e.key === "ArrowUp") highlight = Math.max(highlight - 1, 0);
-    else if (highlight >= 0 && highlight < results.length)
-      selectUser(results[highlight]);
-  }
 </script>
 
 {#snippet avatar(user: UserPickerResult, className: string)}
@@ -151,65 +58,93 @@
   {/if}
 {/snippet}
 
-<div class="relative">
-  <div class="relative">
-    <div
-      class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted"
-    >
-      <Search size={24} aria-hidden="true" />
-    </div>
-    <label for={id} class="sr-only">{label}</label>
-    <input
-      {id}
-      type="text"
-      {placeholder}
-      bind:value={query}
-      onkeydown={handleKeydown}
-      autocomplete="off"
-      role="combobox"
-      aria-autocomplete="list"
-      aria-controls={listboxId}
-      aria-expanded={open}
-      aria-activedescendant={activeDescendant}
-      class="w-full rounded-lg border border-surface-200 bg-input py-2 pl-10 pr-3 text-sm text-surface-content placeholder-gray-500 focus:border-primary focus:outline-none"
-    />
-  </div>
+<UserSearchCombobox
+  {searchUrl}
+  {id}
+  onselect={(user: UserPickerResult) => (selected = user)}
+>
+  {#snippet children({
+    query,
+    results,
+    open,
+    highlight,
+    searchError,
+    listboxId,
+    activeDescendant,
+    setQuery,
+    select,
+    handleKeydown,
+    handleOptionKeydown,
+  })}
+    <div class="relative">
+      <div class="relative">
+        <div
+          class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted"
+        >
+          <Search size={24} aria-hidden="true" />
+        </div>
+        <label for={id} class="sr-only">{label}</label>
+        <input
+          {id}
+          type="text"
+          {placeholder}
+          value={query}
+          oninput={(event) => setQuery(event.currentTarget.value)}
+          onkeydown={handleKeydown}
+          autocomplete="off"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-controls={listboxId}
+          aria-expanded={open && !searchError}
+          aria-activedescendant={activeDescendant}
+          class="w-full rounded-lg border border-surface-200 bg-input py-2 pl-10 pr-3 text-sm text-surface-content placeholder-gray-500 focus:border-primary focus:outline-none"
+        />
+      </div>
 
-  {#if open}
-    <div id={listboxId} class={dropdownClass} role="listbox" aria-label={label}>
-      {#if results.length}
-        {#each results as user, i}
-          <div
-            id={`${id}-result-${user.id}`}
-            role="option"
-            tabindex="-1"
-            aria-selected={i === highlight}
-            class="flex w-full cursor-pointer items-center gap-3 p-3 transition-colors hover:bg-surface-100/50 {i ===
-            highlight
-              ? 'bg-surface-100/50'
-              : ''}"
-            onclick={() => selectUser(user)}
-            onkeydown={(e) => handleOptionKeydown(e, user)}
-          >
-            {@render avatar(user, "h-8 w-8 rounded-full")}
-            <div class="text-left">
-              <div class="font-medium text-surface-content">
-                {user.display_name}
-              </div>
-              <div class="text-xs text-muted">
-                ID: {user.id}{user.created_at
-                  ? ` · Created: ${formatUtcDate(user.created_at) ?? user.created_at}`
-                  : ""}
+      {#if open && !searchError}
+        <div
+          id={listboxId}
+          class={results.length
+            ? `${dropdownBase} max-h-48 w-full overflow-y-auto ${dropdownPanel} shadow-lg`
+            : `${dropdownBase} w-full ${dropdownPanel} p-3 text-center text-sm text-muted shadow-lg`}
+          role="listbox"
+          aria-label={label}
+        >
+          {#if results.length}
+            {#each results as user, i}
+              <div
+                id={`${id}-result-${user.id}`}
+                role="option"
+                tabindex="-1"
+                aria-selected={i === highlight}
+                class="flex w-full cursor-pointer items-center gap-3 p-3 transition-colors hover:bg-surface-100/50 {i ===
+                highlight
+                  ? 'bg-surface-100/50'
+                  : ''}"
+                onclick={() => select(user)}
+                onkeydown={(event) => handleOptionKeydown(event, user)}
+              >
+                {@render avatar(user, "h-8 w-8 rounded-full")}
+                <div class="text-left">
+                  <div class="font-medium text-surface-content">
+                    {user.display_name}
+                  </div>
+                  <div class="text-xs text-muted">
+                    ID: {user.id}{user.created_at
+                      ? ` · Created: ${formatUtcDate(user.created_at) ?? user.created_at}`
+                      : ""}
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        {/each}
-      {:else}
-        No users found
+            {/each}
+          {:else}
+            No users found
+          {/if}
+        </div>
       {/if}
     </div>
-  {/if}
-</div>
+  {/snippet}
+</UserSearchCombobox>
 
 <div class="mt-4">
   {#if selected}
diff --git a/app/javascript/components/UserSearchCombobox.svelte b/app/javascript/components/UserSearchCombobox.svelte
new file mode 100644
index 000000000..2b714e9bb
--- /dev/null
+++ b/app/javascript/components/UserSearchCombobox.svelte
@@ -0,0 +1,182 @@
+<script lang="ts" module>
+  export type UserSearchComboboxState<Result> = {
+    query: string;
+    results: Result[];
+    open: boolean;
+    highlight: number;
+    searching: boolean;
+    searchError: boolean;
+    listboxId: string;
+    activeDescendant: string | undefined;
+    setQuery: (query: string) => void;
+    select: (result: Result) => void;
+    handleKeydown: (event: KeyboardEvent) => void;
+    handleOptionKeydown: (event: KeyboardEvent, result: Result) => void;
+    openResults: () => void;
+    closeResults: () => void;
+  };
+</script>
+
+<script lang="ts" generics="Result extends { id: number }">
+  import { onDestroy, type Snippet } from "svelte";
+  import { Debounced } from "runed";
+
+  let {
+    searchUrl,
+    id,
+    onselect,
+    searchWhen = (query: string) => query.length > 0,
+    children,
+  }: {
+    searchUrl: string;
+    id: string;
+    onselect: (result: Result) => void;
+    searchWhen?: (query: string) => boolean;
+    children: Snippet<[UserSearchComboboxState<Result>]>;
+  } = $props();
+
+  let query = $state("");
+  let results = $state<Result[]>([]);
+  let open = $state(false);
+  let highlight = $state(-1);
+  let searching = $state(false);
+  let searchError = $state(false);
+  let searchAbortController: AbortController | null = null;
+  let searchSequence = 0;
+  const debouncedQuery = new Debounced(() => query, 200);
+
+  const listboxId = $derived(`${id}-results`);
+  const activeDescendant = $derived(
+    open && highlight >= 0 && highlight < results.length
+      ? `${id}-result-${results[highlight].id}`
+      : undefined,
+  );
+
+  $effect(() => {
+    void search(debouncedQuery.current);
+  });
+
+  onDestroy(() => searchAbortController?.abort());
+
+  function invalidateSearch() {
+    searchSequence += 1;
+    searchAbortController?.abort();
+    searchAbortController = null;
+    searching = false;
+  }
+
+  function resetResults() {
+    open = false;
+    results = [];
+    highlight = -1;
+    searchError = false;
+  }
+
+  function setQuery(nextQuery: string) {
+    query = nextQuery;
+    invalidateSearch();
+
+    if (!searchWhen(nextQuery.trim())) resetResults();
+  }
+
+  async function search(searchQuery: string) {
+    const trimmed = searchQuery.trim();
+    if (!searchWhen(trimmed)) return resetResults();
+
+    const requestSequence = ++searchSequence;
+    searchAbortController?.abort();
+    const controller = new AbortController();
+    searchAbortController = controller;
+    searching = true;
+    searchError = false;
+
+    try {
+      const separator = searchUrl.includes("?") ? "&" : "?";
+      const response = await fetch(
+        `${searchUrl}${separator}query=${encodeURIComponent(trimmed)}`,
+        { signal: controller.signal },
+      );
+      if (!response.ok)
+        throw new Error(`Search failed with ${response.status}`);
+
+      const nextResults: Result[] = await response.json();
+      if (requestSequence !== searchSequence) return;
+
+      results = nextResults;
+      open = true;
+      highlight = -1;
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") return;
+      if (requestSequence !== searchSequence) return;
+
+      results = [];
+      open = true;
+      highlight = -1;
+      searchError = true;
+    } finally {
+      if (requestSequence === searchSequence) searching = false;
+      if (searchAbortController === controller) searchAbortController = null;
+    }
+  }
+
+  function select(result: Result) {
+    onselect(result);
+    query = "";
+    invalidateSearch();
+    resetResults();
+  }
+
+  function handleOptionKeydown(event: KeyboardEvent, result: Result) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+
+    event.preventDefault();
+    select(result);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      open = false;
+      return;
+    }
+
+    if (
+      event.key !== "ArrowDown" &&
+      event.key !== "ArrowUp" &&
+      event.key !== "Enter"
+    )
+      return;
+
+    event.preventDefault();
+
+    if (event.key === "ArrowDown")
+      highlight = Math.min(highlight + 1, results.length - 1);
+    else if (event.key === "ArrowUp") highlight = Math.max(highlight - 1, 0);
+    else if (highlight >= 0 && highlight < results.length)
+      select(results[highlight]);
+  }
+
+  function openResults() {
+    if (results.length || searchError) open = true;
+  }
+
+  function closeResults() {
+    open = false;
+  }
+</script>
+
+{@render children({
+  query,
+  results,
+  open,
+  highlight,
+  searching,
+  searchError,
+  listboxId,
+  activeDescendant,
+  setQuery,
+  select,
+  handleKeydown,
+  handleOptionKeydown,
+  openResults,
+  closeResults,
+})}
diff --git a/app/javascript/pages/Admin/Timeline.svelte b/app/javascript/pages/Admin/Timeline.svelte
index a4e22ca32..fd92e4e51 100644
--- a/app/javascript/pages/Admin/Timeline.svelte
+++ b/app/javascript/pages/Admin/Timeline.svelte
@@ -4,6 +4,7 @@
   import AdminUserMention from "../../components/AdminUserMention.svelte";
   import Button from "../../components/Button.svelte";
   import TextInput from "../../components/TextInput.svelte";
+  import UserSearchCombobox from "../../components/UserSearchCombobox.svelte";
   import { adminTimeline, users } from "../../api";
 
   type UserSummary = {
@@ -101,12 +102,6 @@
     });
 
   let selected = $state<UserSummary[]>(untrack(() => selected_users));
-  let query = $state("");
-  let results = $state<UserSummary[]>([]);
-  let searching = $state(false);
-  let searchError = $state(false);
-  let showResults = $state(false);
-  let searchSequence = 0;
   const canMutate = $derived(
     ["admin", "superadmin", "ultraadmin"].includes(current_user.admin_level),
   );
@@ -188,46 +183,13 @@
   $effect(() => {
     selected = selected_users;
   });
-  $effect(() => {
-    const value = query.trim();
-    const sequence = ++searchSequence;
-    if (value.length < 2 && !/^\d+$/.test(value)) {
-      results = [];
-      showResults = false;
-      searching = false;
-      return;
-    }
-    const timer = setTimeout(async () => {
-      searching = true;
-      searchError = false;
-      try {
-        const response = await fetch(
-          adminTimeline.searchUsers.path({ query: { query: value } }),
-        );
-        if (!response.ok) throw new Error();
-        if (sequence === searchSequence) {
-          results = await response.json();
-          showResults = true;
-        }
-      } catch {
-        if (sequence === searchSequence) {
-          searchError = true;
-          showResults = true;
-        }
-      } finally {
-        if (sequence === searchSequence) searching = false;
-      }
-    }, 300);
-    return () => clearTimeout(timer);
-  });
 
   function selectUser(user: UserSummary) {
     if (!selected.some(({ id }) => id === user.id))
       selected = [...selected, user];
-    query = "";
-    results = [];
-    showResults = false;
   }
+  const canSearchUsers = (query: string) =>
+    query.length >= 2 || /^\d+$/.test(query);
   async function applyPreset(period: string) {
     const response = await fetch(
       adminTimeline.leaderboardUsers.path({ query: { period } }),
@@ -236,26 +198,6 @@
       return alert("Could not load preset users. Please try again.");
     selected = (await response.json()).users;
   }
-  async function handleSearchKeydown(event: KeyboardEvent) {
-    if (event.key === "Escape") {
-      query = "";
-      showResults = false;
-    }
-    if (event.key === "Enter") {
-      event.preventDefault();
-      if (results[0]) return selectUser(results[0]);
-      const value = query.trim();
-      if (value.length < 2 && !/^\d+$/.test(value)) return;
-      searching = true;
-      const response = await fetch(
-        adminTimeline.searchUsers.path({ query: { query: value, limit: 1 } }),
-      );
-      searching = false;
-      if (!response.ok) return;
-      const [user] = await response.json();
-      if (user) selectUser(user);
-    }
-  }
   async function setTrust(column: Column) {
     if (!canMutate) return alert("you dont have human rights to do that");
     let options =
@@ -312,77 +254,123 @@
         value={date}
       />
       <div class="flex items-center gap-3">
-        <div class="relative flex-1">
-          <div class="relative">
-            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-muted">
-              {#if searching}<svg
-                  class="h-4 w-4 animate-spin"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  aria-label="Searching"
-                  ><circle
-                    class="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    stroke-width="4"
-                  ></circle><path
-                    class="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  ></path></svg
-                >{:else}<svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                  ><path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  ></path></svg
-                >{/if}
-            </span>
-            <TextInput
-              bind:value={query}
-              onkeydown={handleSearchKeydown}
-              onfocus={() => query.length >= 2 && (showResults = true)}
-              onblur={() => setTimeout(() => (showResults = false), 200)}
-              autocomplete="off"
-              placeholder="Add user by name/email/id..."
-              class="w-full rounded-md bg-darker py-2 pl-10 pr-3 text-sm text-surface-content placeholder-gray-300 focus:border-transparent focus:outline-none"
-            />
-          </div>
-          {#if showResults}<div
-              class="absolute left-0 top-full z-50 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border border-surface-200 bg-dark shadow-lg"
-            >
-              {#if searchError}<div class="px-4 py-2 text-sm text-red">
-                  Error searching users
-                </div>{:else if results.length === 0}<div
-                  class="px-4 py-2 text-sm text-muted"
+        <UserSearchCombobox
+          searchUrl={adminTimeline.searchUsers.path()}
+          id="timeline-user-search"
+          onselect={selectUser}
+          searchWhen={canSearchUsers}
+        >
+          {#snippet children({
+            query,
+            results,
+            open,
+            highlight,
+            searching,
+            searchError,
+            listboxId,
+            activeDescendant,
+            setQuery,
+            select,
+            handleKeydown,
+            handleOptionKeydown,
+            openResults,
+            closeResults,
+          })}
+            <div class="relative flex-1">
+              <div class="relative">
+                <span
+                  class="absolute left-3 top-1/2 -translate-y-1/2 text-muted"
                 >
-                  No users found
-                </div>{/if}
-              {#each results as user}<button
-                  type="button"
-                  onmousedown={(event) => event.preventDefault()}
-                  onclick={() => selectUser(user)}
-                  class="my-1 mx-2 flex w-[calc(100%-1rem)] cursor-pointer items-center rounded-lg border border-transparent px-3 py-2 text-sm text-surface-content transition-colors hover:border-surface-200 hover:bg-darkless"
+                  {#if searching}<svg
+                      class="h-4 w-4 animate-spin"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      aria-label="Searching"
+                      ><circle
+                        class="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="4"
+                      ></circle><path
+                        class="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path></svg
+                    >{:else}<svg
+                      class="h-4 w-4"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                      ><path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                      ></path></svg
+                    >{/if}
+                </span>
+                <label for="timeline-user-search" class="sr-only">
+                  Search users
+                </label>
+                <TextInput
+                  id="timeline-user-search"
+                  value={query}
+                  oninput={(event) => setQuery(event.currentTarget.value)}
+                  onkeydown={handleKeydown}
+                  onfocus={openResults}
+                  onblur={() => setTimeout(closeResults, 200)}
+                  autocomplete="off"
+                  placeholder="Add user by name/email/id..."
+                  role="combobox"
+                  aria-autocomplete="list"
+                  aria-controls={listboxId}
+                  aria-expanded={open}
+                  aria-activedescendant={activeDescendant}
+                  class="w-full rounded-md bg-darker py-2 pl-10 pr-3 text-sm text-surface-content placeholder-gray-300 focus:border-transparent focus:outline-none"
+                />
+              </div>
+              {#if open}<div
+                  id={listboxId}
+                  class="absolute left-0 top-full z-50 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border border-surface-200 bg-dark shadow-lg"
+                  role="listbox"
+                  aria-label="Search users"
                 >
-                  {#if user.avatar_url}<img
-                      src={user.avatar_url}
-                      alt={user.display_name}
-                      class="mr-3 h-5 w-5 rounded-full"
-                    />{/if}<span>{user.display_name}</span><span
-                    class="ml-auto rounded-full bg-surface-100 px-2 py-1 text-xs text-muted"
-                    >#{user.id}</span
-                  >
-                </button>{/each}
-            </div>{/if}
-        </div>
+                  {#if searchError}<div class="px-4 py-2 text-sm text-red">
+                      Error searching users
+                    </div>{:else if results.length === 0}<div
+                      class="px-4 py-2 text-sm text-muted"
+                    >
+                      No users found
+                    </div>{/if}
+                  {#each results as user, index}<button
+                      id={`timeline-user-search-result-${user.id}`}
+                      type="button"
+                      role="option"
+                      aria-selected={index === highlight}
+                      onmousedown={(event) => event.preventDefault()}
+                      onclick={() => select(user)}
+                      onkeydown={(event) => handleOptionKeydown(event, user)}
+                      class="my-1 mx-2 flex w-[calc(100%-1rem)] cursor-pointer items-center rounded-lg border px-3 py-2 text-sm text-surface-content transition-colors hover:border-surface-200 hover:bg-darkless {index ===
+                      highlight
+                        ? 'border-surface-200 bg-darkless'
+                        : 'border-transparent'}"
+                    >
+                      {#if user.avatar_url}<img
+                          src={user.avatar_url}
+                          alt={user.display_name}
+                          class="mr-3 h-5 w-5 rounded-full"
+                        />{/if}<span>{user.display_name}</span><span
+                        class="ml-auto rounded-full bg-surface-100 px-2 py-1 text-xs text-muted"
+                        >#{user.id}</span
+                      >
+                    </button>{/each}
+                </div>{/if}
+            </div>
+          {/snippet}
+        </UserSearchCombobox>
         <Button
           unstyled
           type="button"
diff --git a/test/system/admin/timeline_test.rb b/test/system/admin/timeline_test.rb
index 3700a051a..f6c2680c5 100644
--- a/test/system/admin/timeline_test.rb
+++ b/test/system/admin/timeline_test.rb
@@ -33,6 +33,62 @@ class AdminTimelineTest < ApplicationSystemTestCase
     assert_includes marker[:style], "top: 504px"
   end
 
+  test "ignores stale searches and selects a user with the keyboard without refetching on Enter" do
+    slow_user = create(:user, username: "timeline_slow_result")
+    fast_user = create(:user, username: "timeline_fast_result")
+
+    visit admin_timeline_path(date: DATE.iso8601)
+
+    page.execute_script(<<~JS)
+      const originalFetch = window.fetch.bind(window);
+      window.__timelineSearchQueries = [];
+      window.fetch = async (...args) => {
+        const requestUrl = typeof args[0] === "string" ? args[0] : args[0].url;
+        const url = new URL(requestUrl, window.location.origin);
+        if (url.pathname !== "/admin/timeline/search_users") {
+          return originalFetch(...args);
+        }
+
+        const query = url.searchParams.get("query");
+        window.__timelineSearchQueries.push(query);
+        const response = await originalFetch(...args);
+        if (query === #{slow_user.username.to_json}) {
+          document.body.dataset.timelineSlowResponseReady = "true";
+          await new Promise((resolve) => setTimeout(resolve, 1_000));
+        }
+        return response;
+      };
+    JS
+
+    search = find("#timeline-user-search")
+    search.set slow_user.username
+    assert_selector "body[data-timeline-slow-response-ready='true']"
+
+    request_count = page.evaluate_script("window.__timelineSearchQueries.length")
+    search.send_keys :enter
+    assert_equal request_count,
+      page.evaluate_script("window.__timelineSearchQueries.length")
+
+    search.set fast_user.username
+    option = find("[role='option']", text: fast_user.display_name)
+    assert_equal "listbox", find("##{search[:'aria-controls']}")[:role]
+
+    sleep 1.1
+    assert_selector "[role='option']", text: fast_user.display_name
+    assert_no_selector "[role='option']", text: slow_user.display_name
+
+    search.send_keys :down
+    option = find("[role='option']", text: fast_user.display_name)
+    assert_equal "true", option[:"aria-selected"]
+    assert_equal option[:id], search[:"aria-activedescendant"]
+
+    search.send_keys :enter
+    assert_no_selector "[role='listbox']"
+    assert_text fast_user.display_name
+    assert_includes find("input[name='user_ids']", visible: false).value,
+      fast_user.id.to_s
+  end
+
   # test "shows a NOW line and centers the grid on the current time when viewing today" do
   #   visit admin_timeline_path
 

From 2ae8578d7cfe0cdc7b87c0aac76604172ed01934 Mon Sep 17 00:00:00 2001
From: Mahad Kalam <mahadkalam1234@gmail.com>
Date: Tue, 1 Sep 2026 02:59:39 +0000
Subject: [PATCH 2/3] Fix user search dismissal and Enter handling

Amp-Thread-ID: https://ampcode.com/threads/T-01a05ac9-3763-74fe-8ebd-b4cd88c93554
Co-authored-by: Amp <amp@ampcode.com>
---
 .../components/UserSearchCombobox.svelte      |  4 +-
 app/javascript/pages/Admin/Timeline.svelte    | 14 ++-
 test/system/admin/timeline_test.rb            | 97 +++++++++++++------
 3 files changed, 86 insertions(+), 29 deletions(-)

diff --git a/app/javascript/components/UserSearchCombobox.svelte b/app/javascript/components/UserSearchCombobox.svelte
index 2b714e9bb..0c4e17a99 100644
--- a/app/javascript/components/UserSearchCombobox.svelte
+++ b/app/javascript/components/UserSearchCombobox.svelte
@@ -135,7 +135,7 @@
 
   function handleKeydown(event: KeyboardEvent) {
     if (event.key === "Escape") {
-      open = false;
+      closeResults();
       return;
     }
 
@@ -160,6 +160,8 @@
   }
 
   function closeResults() {
+    debouncedQuery.cancel();
+    invalidateSearch();
     open = false;
   }
 </script>
diff --git a/app/javascript/pages/Admin/Timeline.svelte b/app/javascript/pages/Admin/Timeline.svelte
index fd92e4e51..63e6a75fc 100644
--- a/app/javascript/pages/Admin/Timeline.svelte
+++ b/app/javascript/pages/Admin/Timeline.svelte
@@ -319,7 +319,19 @@
                   id="timeline-user-search"
                   value={query}
                   oninput={(event) => setQuery(event.currentTarget.value)}
-                  onkeydown={handleKeydown}
+                  onkeydown={(event) => {
+                    if (
+                      event.key === "Enter" &&
+                      open &&
+                      highlight === -1 &&
+                      results[0]
+                    ) {
+                      event.preventDefault();
+                      select(results[0]);
+                    } else {
+                      handleKeydown(event);
+                    }
+                  }}
                   onfocus={openResults}
                   onblur={() => setTimeout(closeResults, 200)}
                   autocomplete="off"
diff --git a/test/system/admin/timeline_test.rb b/test/system/admin/timeline_test.rb
index f6c2680c5..6f7f7445c 100644
--- a/test/system/admin/timeline_test.rb
+++ b/test/system/admin/timeline_test.rb
@@ -33,42 +33,17 @@ class AdminTimelineTest < ApplicationSystemTestCase
     assert_includes marker[:style], "top: 504px"
   end
 
-  test "ignores stale searches and selects a user with the keyboard without refetching on Enter" do
+  test "ignores stale searches and selects a user with the listbox keyboard behavior" do
     slow_user = create(:user, username: "timeline_slow_result")
     fast_user = create(:user, username: "timeline_fast_result")
 
     visit admin_timeline_path(date: DATE.iso8601)
-
-    page.execute_script(<<~JS)
-      const originalFetch = window.fetch.bind(window);
-      window.__timelineSearchQueries = [];
-      window.fetch = async (...args) => {
-        const requestUrl = typeof args[0] === "string" ? args[0] : args[0].url;
-        const url = new URL(requestUrl, window.location.origin);
-        if (url.pathname !== "/admin/timeline/search_users") {
-          return originalFetch(...args);
-        }
-
-        const query = url.searchParams.get("query");
-        window.__timelineSearchQueries.push(query);
-        const response = await originalFetch(...args);
-        if (query === #{slow_user.username.to_json}) {
-          document.body.dataset.timelineSlowResponseReady = "true";
-          await new Promise((resolve) => setTimeout(resolve, 1_000));
-        }
-        return response;
-      };
-    JS
+    track_timeline_searches(delay_query: slow_user.username)
 
     search = find("#timeline-user-search")
     search.set slow_user.username
     assert_selector "body[data-timeline-slow-response-ready='true']"
 
-    request_count = page.evaluate_script("window.__timelineSearchQueries.length")
-    search.send_keys :enter
-    assert_equal request_count,
-      page.evaluate_script("window.__timelineSearchQueries.length")
-
     search.set fast_user.username
     option = find("[role='option']", text: fast_user.display_name)
     assert_equal "listbox", find("##{search[:'aria-controls']}")[:role]
@@ -89,6 +64,48 @@ class AdminTimelineTest < ApplicationSystemTestCase
       fast_user.id.to_s
   end
 
+  test "Enter selects the first result without another request" do
+    user = create(:user, username: "timeline_enter_result")
+
+    visit admin_timeline_path(date: DATE.iso8601)
+    track_timeline_searches
+
+    search = find("#timeline-user-search")
+    search.set user.username
+    option = find("[role='option']", text: user.display_name)
+    assert_equal "false", option[:"aria-selected"]
+
+    request_count = page.evaluate_script("window.__timelineSearchQueries.length")
+    search.send_keys :enter
+    sleep 0.3
+
+    assert_equal request_count,
+      page.evaluate_script("window.__timelineSearchQueries.length")
+    assert_no_selector "[role='listbox']"
+    assert_includes find("input[name='user_ids']", visible: false).value,
+      user.id.to_s
+  end
+
+  test "Escape aborts a delayed search without reopening results" do
+    user = create(:user, username: "timeline_escape")
+
+    visit admin_timeline_path(date: DATE.iso8601)
+    track_timeline_searches(delay_query: user.username)
+
+    search = find("#timeline-user-search")
+    search.set user.username
+    assert_selector "body[data-timeline-slow-response-ready='true']"
+
+    search.send_keys :escape
+    assert_selector "body[data-timeline-search-aborted='true']"
+    sleep 1.1
+
+    assert_equal "false", search[:"aria-expanded"]
+    assert_no_selector "[role='listbox']"
+    assert_equal [ user.username ],
+      page.evaluate_script("window.__timelineSearchQueries")
+  end
+
   # test "shows a NOW line and centers the grid on the current time when viewing today" do
   #   visit admin_timeline_path
 
@@ -110,6 +127,32 @@ class AdminTimelineTest < ApplicationSystemTestCase
 
   private
 
+  def track_timeline_searches(delay_query: nil)
+    page.execute_script(<<~JS)
+      const originalFetch = window.fetch.bind(window);
+      window.__timelineSearchQueries = [];
+      window.fetch = async (...args) => {
+        const requestUrl = typeof args[0] === "string" ? args[0] : args[0].url;
+        const url = new URL(requestUrl, window.location.origin);
+        if (url.pathname !== "/admin/timeline/search_users") {
+          return originalFetch(...args);
+        }
+
+        const query = url.searchParams.get("query");
+        window.__timelineSearchQueries.push(query);
+        args[1]?.signal?.addEventListener("abort", () => {
+          document.body.dataset.timelineSearchAborted = "true";
+        });
+        const response = await originalFetch(...args);
+        if (query === #{delay_query.to_json}) {
+          document.body.dataset.timelineSlowResponseReady = "true";
+          await new Promise((resolve) => setTimeout(resolve, 1_000));
+        }
+        return response;
+      };
+    JS
+  end
+
   def create_heartbeat(user, time:)
     create(
       :heartbeat,

From b9ff7b9a08bf3ae5b8861d61e0e7c293bf74deed Mon Sep 17 00:00:00 2001
From: Mahad Kalam <mahadkalam1234@gmail.com>
Date: Tue, 1 Sep 2026 03:09:02 +0000
Subject: [PATCH 3/3] Handle Enter while user search is pending

Amp-Thread-ID: https://ampcode.com/threads/T-01a05ac9-3763-74fe-8ebd-b4cd88c93554
Co-authored-by: Amp <amp@ampcode.com>
---
 .../components/UserSearchCombobox.svelte      | 22 +++++++++++++++++++
 app/javascript/pages/Admin/Timeline.svelte    | 10 +++------
 test/system/admin/timeline_test.rb            | 19 ++++++++++++++++
 3 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/app/javascript/components/UserSearchCombobox.svelte b/app/javascript/components/UserSearchCombobox.svelte
index 0c4e17a99..849656b4b 100644
--- a/app/javascript/components/UserSearchCombobox.svelte
+++ b/app/javascript/components/UserSearchCombobox.svelte
@@ -10,6 +10,7 @@
     activeDescendant: string | undefined;
     setQuery: (query: string) => void;
     select: (result: Result) => void;
+    selectFirstResult: () => void;
     handleKeydown: (event: KeyboardEvent) => void;
     handleOptionKeydown: (event: KeyboardEvent, result: Result) => void;
     openResults: () => void;
@@ -43,6 +44,7 @@
   let searchError = $state(false);
   let searchAbortController: AbortController | null = null;
   let searchSequence = 0;
+  let selectFirstWhenResultsAvailable = false;
   const debouncedQuery = new Debounced(() => query, 200);
 
   const listboxId = $derived(`${id}-results`);
@@ -70,11 +72,13 @@
     results = [];
     highlight = -1;
     searchError = false;
+    selectFirstWhenResultsAvailable = false;
   }
 
   function setQuery(nextQuery: string) {
     query = nextQuery;
     invalidateSearch();
+    selectFirstWhenResultsAvailable = false;
 
     if (!searchWhen(nextQuery.trim())) resetResults();
   }
@@ -103,6 +107,10 @@
       if (requestSequence !== searchSequence) return;
 
       results = nextResults;
+      if (selectFirstWhenResultsAvailable) {
+        selectFirstWhenResultsAvailable = false;
+        if (nextResults[0]) return select(nextResults[0]);
+      }
       open = true;
       highlight = -1;
     } catch (error) {
@@ -113,6 +121,7 @@
       open = true;
       highlight = -1;
       searchError = true;
+      selectFirstWhenResultsAvailable = false;
     } finally {
       if (requestSequence === searchSequence) searching = false;
       if (searchAbortController === controller) searchAbortController = null;
@@ -126,6 +135,17 @@
     resetResults();
   }
 
+  function selectFirstResult() {
+    if (open && results[0]) return select(results[0]);
+    if (!searchWhen(query.trim())) return;
+
+    selectFirstWhenResultsAvailable = true;
+    if (debouncedQuery.pending) {
+      debouncedQuery.cancel();
+      void search(query);
+    }
+  }
+
   function handleOptionKeydown(event: KeyboardEvent, result: Result) {
     if (event.key !== "Enter" && event.key !== " ") return;
 
@@ -162,6 +182,7 @@
   function closeResults() {
     debouncedQuery.cancel();
     invalidateSearch();
+    selectFirstWhenResultsAvailable = false;
     open = false;
   }
 </script>
@@ -177,6 +198,7 @@
   activeDescendant,
   setQuery,
   select,
+  selectFirstResult,
   handleKeydown,
   handleOptionKeydown,
   openResults,
diff --git a/app/javascript/pages/Admin/Timeline.svelte b/app/javascript/pages/Admin/Timeline.svelte
index 63e6a75fc..2f83f3ae8 100644
--- a/app/javascript/pages/Admin/Timeline.svelte
+++ b/app/javascript/pages/Admin/Timeline.svelte
@@ -271,6 +271,7 @@
             activeDescendant,
             setQuery,
             select,
+            selectFirstResult,
             handleKeydown,
             handleOptionKeydown,
             openResults,
@@ -320,14 +321,9 @@
                   value={query}
                   oninput={(event) => setQuery(event.currentTarget.value)}
                   onkeydown={(event) => {
-                    if (
-                      event.key === "Enter" &&
-                      open &&
-                      highlight === -1 &&
-                      results[0]
-                    ) {
+                    if (event.key === "Enter" && highlight === -1) {
                       event.preventDefault();
-                      select(results[0]);
+                      selectFirstResult();
                     } else {
                       handleKeydown(event);
                     }
diff --git a/test/system/admin/timeline_test.rb b/test/system/admin/timeline_test.rb
index 6f7f7445c..47e685050 100644
--- a/test/system/admin/timeline_test.rb
+++ b/test/system/admin/timeline_test.rb
@@ -86,6 +86,25 @@ class AdminTimelineTest < ApplicationSystemTestCase
       user.id.to_s
   end
 
+  test "Enter during debounce selects the pending first result with one request" do
+    user = create(:user, username: "timeline_pending")
+
+    visit admin_timeline_path(date: DATE.iso8601)
+    track_timeline_searches
+
+    search = find("#timeline-user-search")
+    search.set user.username
+    search.send_keys :enter
+
+    assert_selector \
+      "input[name='user_ids'][value='#{@admin.id},#{user.id}']",
+      visible: false
+    sleep 0.3
+    assert_equal [ user.username ],
+      page.evaluate_script("window.__timelineSearchQueries")
+    assert_no_selector "[role='listbox']"
+  end
+
   test "Escape aborts a delayed search without reopening results" do
     user = create(:user, username: "timeline_escape")