feat(frontend): Open linked friends from encounter detail with o

Pressing o on the encounter detail page did nothing because no open-mode
config existed for the /encounters/:id route. Add an encounter-friend
open mode mirroring the collective member pattern: a store of the
encounter's linked friend IDs, keyboard hint badges on each friend chip,
a hint panel, and a help-dialog entry. Pressing o then a hint number now
navigates to the corresponding friend.

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

Author: enko

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

@@ -7,8 +7,14 @@ import { goto } from '$app/navigation';
 import MarkdownView from '$lib/editor/markdown-view.svelte';
 import { createI18n } from '$lib/i18n/index.js';
 import { encounters } from '$lib/stores/encounters';
+import {
+  isOpenEncounterFriendModeActive,
+  openEncounterFriendModePrefix,
+  visibleEncounterFriendIds,
+} from '$lib/stores/ui';
 import type { Encounter } from '$shared';
 import FriendAvatar from '../friends/friend-avatar.svelte';
+import KeyboardHintBadge from '../keyboard-hint-badge.svelte';
 import { encounterDisplayTitle, encounterTypeLabel } from './encounter-display';
 import EncounterTypeIcon from './encounter-type-icon.svelte';
 
@@ -26,6 +32,11 @@ let showDeleteConfirm = $state(false);
 
 let displayTitle = $derived(encounterDisplayTitle($i18n.t, encounter));
 
+// Track visible friend IDs for keyboard open mode (o)
+$effect(() => {
+  visibleEncounterFriendIds.set(encounter.friends.map((f) => f.id));
+});
+
 function formatDate(dateStr: string): string {
   const date = new Date(dateStr);
   return date.toLocaleDateString(undefined, {
@@ -112,18 +123,21 @@ async function handleDelete() {
       <span class="text-sm font-body font-normal text-white/80">({encounter.friends.length})</span>
     </h2>
     <div class="flex flex-wrap gap-3 p-3 bg-gray-50 rounded-lg">
-      {#each encounter.friends as friend (friend.id)}
-        <a
-          href="/friends/{friend.id}"
-          class="inline-flex items-center gap-2 bg-white border border-gray-200 px-3 py-2 rounded-lg hover:border-forest transition-colors"
-        >
-          <FriendAvatar
-            displayName={friend.displayName}
-            photoUrl={friend.photoUrl}
-            size="sm"
-          />
-          <span class="font-body text-sm text-gray-900">{friend.displayName}</span>
-        </a>
+      {#each encounter.friends as friend, index (friend.id)}
+        <div class="relative">
+          <KeyboardHintBadge {index} isActive={$isOpenEncounterFriendModeActive} prefix={$openEncounterFriendModePrefix} variant="card" />
+          <a
+            href="/friends/{friend.id}"
+            class="inline-flex items-center gap-2 bg-white border border-gray-200 px-3 py-2 rounded-lg hover:border-forest transition-colors"
+          >
+            <FriendAvatar
+              displayName={friend.displayName}
+              photoUrl={friend.photoUrl}
+              size="sm"
+            />
+            <span class="font-body text-sm text-gray-900">{friend.displayName}</span>
+          </a>
+        </div>
       {/each}
     </div>
   </section>

apps/frontend/src/lib/shortcuts/components/help-dialog.svelte

@@ -247,6 +247,24 @@ const i18n = createI18n();
                 <span class="text-gray-700">{$i18n.t('shortcuts.help.editEncounter')}</span>
                 <kbd class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm font-mono">e</kbd>
               </div>
+              <div class="flex justify-between items-center">
+                <span class="text-gray-700">{$i18n.t('shortcuts.help.openItem19', { item: $i18n.t('shortcuts.help.friend') })}</span>
+                <div class="flex gap-1">
+                  <kbd class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm font-mono">o</kbd>
+                  <span class="text-gray-400">{$i18n.t('shortcuts.help.then')}</span>
+                  <kbd class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm font-mono">1-9</kbd>
+                </div>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-gray-700">{$i18n.t('shortcuts.help.openItem10', { item: $i18n.t('shortcuts.help.friend') })}</span>
+                <div class="flex gap-1">
+                  <kbd class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm font-mono">o</kbd>
+                  <span class="text-gray-400">{$i18n.t('shortcuts.help.then')}</span>
+                  <kbd class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm font-mono">a-z</kbd>
+                  <span class="text-gray-400">{$i18n.t('shortcuts.help.then')}</span>
+                  <kbd class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm font-mono">1-9</kbd>
+                </div>
+              </div>
             </div>
           </div>
         {/if}

apps/frontend/src/lib/shortcuts/config.ts

@@ -1,16 +1,19 @@
 import {
   FILTER_CATEGORY_KEYS,
   isOpenCollectiveModeActive,
+  isOpenEncounterFriendModeActive,
   isOpenEncounterModeActive,
   isOpenFriendLinkModeActive,
   isOpenMemberModeActive,
   isOpenModeActive,
   openCollectiveModePrefix,
+  openEncounterFriendModePrefix,
   openEncounterModePrefix,
   openFriendLinkModePrefix,
   openMemberModePrefix,
   openModePrefix,
   visibleCollectiveIds,
+  visibleEncounterFriendIds,
   visibleEncounterIds,
   visibleFriendDetailLinks,
   visibleFriendIds,
@@ -126,6 +129,14 @@ export const OPEN_MODE_CONFIGS: OpenModeConfig[] = [
     basePath: '/friends',
     modeName: 'member',
   },
+  {
+    routeMatch: /^\/encounters\/[^/]+$/,
+    itemIdsStore: visibleEncounterFriendIds,
+    prefixStore: openEncounterFriendModePrefix,
+    activeStore: isOpenEncounterFriendModeActive,
+    basePath: '/friends',
+    modeName: 'encounterFriend',
+  },
   {
     routeMatch: '/friends',
     itemIdsStore: visibleFriendIds,

apps/frontend/src/lib/shortcuts/handlers/index.ts

@@ -5,6 +5,7 @@ import {
   isDeleteCircleModeActive,
   isEditCircleModeActive,
   isOpenCollectiveModeActive,
+  isOpenEncounterFriendModeActive,
   isOpenEncounterModeActive,
   isOpenFriendLinkModeActive,
   isOpenMemberModeActive,
@@ -133,6 +134,12 @@ export function createKeydownHandler(callbacks: KeydownHandlerCallbacks) {
         isOpenFriendLinkModeActive.set(true);
         return;
       }
+      if (pathname.match(/^\/encounters\/[^/]+$/) && !pathname.endsWith('/new')) {
+        e.preventDefault();
+        callbacks.setPendingKey('o');
+        isOpenEncounterFriendModeActive.set(true);
+        return;
+      }
     }
 
     // Start filter sequence (only on friends list page)

apps/frontend/src/lib/shortcuts/keyboard-shortcuts.svelte

@@ -10,11 +10,13 @@ import {
   isEditCircleModeActive,
   isFilterModeActive,
   isOpenCollectiveModeActive,
+  isOpenEncounterFriendModeActive,
   isOpenEncounterModeActive,
   isOpenFriendLinkModeActive,
   isOpenMemberModeActive,
   isOpenModeActive,
   openCollectiveModePrefix,
+  openEncounterFriendModePrefix,
   openEncounterModePrefix,
   openFriendLinkModePrefix,
   openMemberModePrefix,
@@ -67,6 +69,8 @@ function clearPending() {
   openMemberModePrefix.set(null);
   isOpenFriendLinkModeActive.set(false);
   openFriendLinkModePrefix.set(null);
+  isOpenEncounterFriendModeActive.set(false);
+  openEncounterFriendModePrefix.set(null);
 }
 
 // The handler is recreated when showHelp changes so guards get fresh state
@@ -120,6 +124,8 @@ const handleKeydown = $derived(
   <HintModePanel title={$i18n.t('shortcuts.panels.openCollective')} prefix={$openCollectiveModePrefix} itemDescription={$i18n.t('shortcuts.items.collective')} />
 {:else if pendingKey === 'o' && isOnFriendDetailPage}
   <HintModePanel title={$i18n.t('shortcuts.panels.openLink')} prefix={$openFriendLinkModePrefix} itemDescription={$i18n.t('shortcuts.items.link')} />
+{:else if pendingKey === 'o' && isOnEncounterDetailPage}
+  <HintModePanel title={$i18n.t('shortcuts.panels.openFriend')} prefix={$openEncounterFriendModePrefix} itemDescription={$i18n.t('shortcuts.items.friend')} />
 {:else if pendingKey === 'f'}
   <FilterPanel />
 {:else if pendingKey === 'e' && isOnCirclesPage}

apps/frontend/src/lib/stores/ui.ts

@@ -214,6 +214,26 @@ export const openEncounterModePrefix = writable<string | null>(null);
  */
 export const visibleEncounterIds = writable<string[]>([]);
 
+// =============================================================================
+// Encounter Friend Open Mode State (keyboard-driven friend opening on encounter detail)
+// =============================================================================
+
+/**
+ * Tracks if "open encounter friend mode" is active for quick keyboard navigation
+ * to the friends linked on an encounter detail page
+ */
+export const isOpenEncounterFriendModeActive = writable(false);
+
+/**
+ * Tracks the current letter prefix in open encounter friend mode (e.g., 'a', 'b', 'c')
+ */
+export const openEncounterFriendModePrefix = writable<string | null>(null);
+
+/**
+ * List of friend IDs linked to the current encounter (for open mode navigation)
+ */
+export const visibleEncounterFriendIds = writable<string[]>([]);
+
 /**
  * Mapping of keyboard keys to filter category field names
  */