feat(frontend): Open first result on Enter in list search boxes

On the friends, encounters, and collectives list pages, pressing Enter
while focused in the search/filter box now navigates to the first item in
the currently filtered list. The handler lives on each input directly
because the global shortcut layer suppresses keys while an input is
focused.

Also tag the encounters search input with data-search-input so the `/`
shortcut focuses it like the other lists. Collectives opens the first
client-side sorted item to match what is rendered.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: enko

apps/frontend/src/lib/components/collectives/collective-list.svelte

@@ -8,6 +8,7 @@ import MagnifyingGlass from 'svelte-heros-v2/MagnifyingGlass.svelte';
 import Plus from 'svelte-heros-v2/Plus.svelte';
 import Users from 'svelte-heros-v2/Users.svelte';
 import XMark from 'svelte-heros-v2/XMark.svelte';
+import { goto } from '$app/navigation';
 import type { CollectiveListParams } from '$lib/api/collectives';
 import { createI18n } from '$lib/i18n/index.js';
 import { collectives, collectivesList, collectiveTypes } from '$lib/stores/collectives';
@@ -143,6 +144,13 @@ let sortedItems = $derived.by(() => {
   });
   return items;
 });
+
+// Open the first result when pressing Enter in the search box
+function openFirstResult() {
+  const first = sortedItems[0];
+  if (!first) return;
+  goto(`/collectives/${first.id}`);
+}
 </script>
 
 <div class="space-y-4">
@@ -154,6 +162,7 @@ let sortedItems = $derived.by(() => {
       type="text"
       value={searchQuery}
       oninput={(e) => handleSearchInput(e.currentTarget.value)}
+      onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); openFirstResult(); } }}
       placeholder={$i18n.t('collectives.searchPlaceholder')}
       class="w-full pl-12 pr-12 py-3 text-base font-body text-gray-900 placeholder-gray-400 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-forest focus:border-transparent"
       autocomplete="off"

apps/frontend/src/lib/components/encounters/encounter-list.svelte

@@ -5,13 +5,14 @@ import ChevronLeft from 'svelte-heros-v2/ChevronLeft.svelte';
 import ChevronRight from 'svelte-heros-v2/ChevronRight.svelte';
 import MagnifyingGlass from 'svelte-heros-v2/MagnifyingGlass.svelte';
 import Plus from 'svelte-heros-v2/Plus.svelte';
+import { goto } from '$app/navigation';
 import type { EncounterListParams } from '$lib/api/encounters';
 import { createI18n } from '$lib/i18n/index.js';
 import { encounters, encountersList } from '$lib/stores/encounters';
 import { visibleEncounterIds } from '$lib/stores/ui';
 import { ENCOUNTER_TYPES, type EncounterType } from '$shared';
-import { encounterTypeLabel } from './encounter-display';
 import EncounterCard from './encounter-card.svelte';
+import { encounterTypeLabel } from './encounter-display';
 
 const i18n = createI18n();
 
@@ -42,6 +43,13 @@ $effect(() => {
   visibleEncounterIds.set(ids);
 });
 
+// Open the first result when pressing Enter in the search box
+function openFirstResult() {
+  const first = encounterItems[0];
+  if (!first) return;
+  goto(`/encounters/${first.id}`);
+}
+
 // Load encounters on mount (not in $effect to avoid infinite loop)
 onMount(() => {
   loadEncounters();
@@ -116,8 +124,10 @@ function goToPage(page: number) {
           type="text"
           value={searchQuery}
           oninput={(e) => handleSearchInput(e.currentTarget.value)}
+          onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); openFirstResult(); } }}
           placeholder={$i18n.t('encounters.searchPlaceholder')}
           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-forest focus:border-transparent font-body text-sm"
+          data-search-input
         />
       </div>
     </div>

apps/frontend/src/lib/components/friends/friend-list.svelte

@@ -9,6 +9,7 @@ import MagnifyingGlass from 'svelte-heros-v2/MagnifyingGlass.svelte';
 import Plus from 'svelte-heros-v2/Plus.svelte';
 import Users from 'svelte-heros-v2/Users.svelte';
 import XMark from 'svelte-heros-v2/XMark.svelte';
+import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import * as friendsApi from '$lib/api/friends';
 import { createI18n } from '$lib/i18n/index.js';
@@ -390,6 +391,16 @@ let gridItems = $derived.by<FriendGridItem[]>(() => {
     return $friendList.map(toFriendGridItem);
   }
 });
+
+// Open the first result when pressing Enter in the search box
+function openFirstResult() {
+  const first = gridItems[0];
+  if (!first) return;
+  const url = returnUrl
+    ? `/friends/${first.id}?from=${encodeURIComponent(returnUrl)}`
+    : `/friends/${first.id}`;
+  goto(url);
+}
 </script>
 
 <div class="space-y-4">
@@ -401,6 +412,7 @@ let gridItems = $derived.by<FriendGridItem[]>(() => {
       type="text"
       value={searchQuery}
       oninput={(e) => handleSearchInput(e.currentTarget.value)}
+      onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); openFirstResult(); } }}
       placeholder={$i18n.t('friendList.searchPlaceholder')}
       class="w-full pl-12 pr-12 py-3 text-base font-body text-gray-900 placeholder-gray-400 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-forest focus:border-transparent"
       autocomplete="off"