feat: highlight selected triage card + arrow key navigation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

services/travel-memories/app/templates/phase2.html

@@ -4,7 +4,9 @@
      @keydown.j.window="tagFocused('journal')"
      @keydown.s.window="tagFocused('story')"
      @keydown.x.window="tagFocused('skip')"
-     @keydown.space.prevent.window="tagFocused('skip')">
+     @keydown.space.prevent.window="tagFocused('skip')"
+     @keydown.arrowleft.prevent.window="navigate(-1)"
+     @keydown.arrowright.prevent.window="navigate(1)">
 
   <div class="flex items-center justify-between mb-4">
     <h1 class="text-xl font-bold">Triage</h1>
@@ -139,8 +141,26 @@ function triageApp(albumId) {
   return {
     focused: null,
 
+    init() {
+      const first = document.querySelector('.photo-card');
+      if (first) this.select(first);
+    },
+
     select(el) {
+      if (this.focused) this.focused.classList.remove('ring-4', 'ring-white', 'ring-offset-2', 'z-10');
       this.focused = el;
+      if (el) {
+        el.classList.add('ring-4', 'ring-white', 'ring-offset-2', 'z-10');
+        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    },
+
+    navigate(dir) {
+      const cards = [...document.querySelectorAll('.photo-card')];
+      if (!cards.length) return;
+      const idx = this.focused ? cards.indexOf(this.focused) : -1;
+      const next = cards[Math.max(0, Math.min(cards.length - 1, idx + dir))];
+      if (next) this.select(next);
     },
 
     async tagFocused(tag) {