feat: keyboard navigation for mention and slash command dropdowns

Arrow up/down cycles through items with highlight. Enter selects
the highlighted item. Escape dismisses the dropdown. Index resets
when the query changes.

web/src/components/MentionDropdown.tsx

@@ -3,10 +3,11 @@ import type { Member } from "../stores/member.ts";
 interface MentionDropdownProps {
   query: string;
   members: Member[];
+  selectedIndex: number;
   onSelect: (username: string) => void;
 }
 
-export function MentionDropdown({ query, members, onSelect }: MentionDropdownProps) {
+export function MentionDropdown({ query, members, selectedIndex, onSelect }: MentionDropdownProps) {
   const q = query.toLowerCase();
   const filtered = members
     .filter(
@@ -23,7 +24,7 @@ export function MentionDropdown({ query, members, onSelect }: MentionDropdownPro
       <div className="px-2 py-1 text-xs text-gb-fg-s font-mono border-b border-gb-bg-t">
         MENTION
       </div>
-      {filtered.map((m) => (
+      {filtered.map((m, i) => (
         <button
           key={m.id}
           type="button"
@@ -31,12 +32,18 @@ export function MentionDropdown({ query, members, onSelect }: MentionDropdownPro
             e.preventDefault();
             onSelect(m.username);
           }}
-          className="w-full px-2 py-1 text-left text-sm font-mono flex items-center gap-2 hover:bg-gb-orange hover:text-gb-bg transition-colors"
+          className={`w-full px-2 py-1 text-left text-sm font-mono flex items-center gap-2 transition-colors ${
+            i === selectedIndex
+              ? "bg-gb-orange text-gb-bg"
+              : "hover:bg-gb-orange hover:text-gb-bg"
+          }`}
         >
-          <span className="text-gb-green">●</span>
+          <span className={i === selectedIndex ? "text-gb-bg" : "text-gb-green"}>●</span>
           <span className="truncate">{m.display_name || m.username}</span>
           {m.display_name && m.display_name !== m.username && (
-            <span className="text-gb-fg-f text-xs">({m.username})</span>
+            <span className={`text-xs ${i === selectedIndex ? "text-gb-bg" : "text-gb-fg-f"}`}>
+              ({m.username})
+            </span>
           )}
         </button>
       ))}