From 8e1c8b554f94306eee317f4b4b97ab67c6f54080 Mon Sep 17 00:00:00 2001
From: Julian Tabel <juliantabel.jt@gmail.com>
Date: Sun, 8 Feb 2026 20:04:26 +0100
Subject: [PATCH] Use PokemonSelector autocomplete for route encounter form

Replace the manual search input + select dropdown with the existing
PokemonSelector component, matching the boss team editor UX.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ...selector-autocomplete-for-route-encount.md |  5 ++-
 .../admin/RouteEncounterFormModal.tsx         | 37 +++----------------
 2 files changed, 9 insertions(+), 33 deletions(-)

diff --git a/.beans/nuzlocke-tracker-mg46--use-pokemonselector-autocomplete-for-route-encount.md b/.beans/nuzlocke-tracker-mg46--use-pokemonselector-autocomplete-for-route-encount.md
index 728a24c..2384565 100644
--- a/.beans/nuzlocke-tracker-mg46--use-pokemonselector-autocomplete-for-route-encount.md
+++ b/.beans/nuzlocke-tracker-mg46--use-pokemonselector-autocomplete-for-route-encount.md
@@ -1,10 +1,11 @@
 ---
 # nuzlocke-tracker-mg46
 title: Use PokemonSelector autocomplete for route encounters
-status: todo
+status: completed
 type: feature
+priority: normal
 created_at: 2026-02-08T12:33:11Z
-updated_at: 2026-02-08T12:33:11Z
+updated_at: 2026-02-08T19:04:07Z
 parent: nuzlocke-tracker-iu5b
 ---
 
diff --git a/frontend/src/components/admin/RouteEncounterFormModal.tsx b/frontend/src/components/admin/RouteEncounterFormModal.tsx
index d7fb3fe..8c1695a 100644
--- a/frontend/src/components/admin/RouteEncounterFormModal.tsx
+++ b/frontend/src/components/admin/RouteEncounterFormModal.tsx
@@ -1,6 +1,6 @@
 import { type FormEvent, useState } from 'react'
 import { FormModal } from './FormModal'
-import { usePokemonList } from '../../hooks/useAdmin'
+import { PokemonSelector } from './PokemonSelector'
 import type { RouteEncounterDetail, CreateRouteEncounterInput, UpdateRouteEncounterInput } from '../../types'
 
 interface RouteEncounterFormModalProps {
@@ -20,16 +20,12 @@ export function RouteEncounterFormModal({
   onDelete,
   isDeleting,
 }: RouteEncounterFormModalProps) {
-  const [search, setSearch] = useState('')
   const [pokemonId, setPokemonId] = useState(encounter?.pokemonId ?? 0)
   const [encounterMethod, setEncounterMethod] = useState(encounter?.encounterMethod ?? '')
   const [encounterRate, setEncounterRate] = useState(String(encounter?.encounterRate ?? ''))
   const [minLevel, setMinLevel] = useState(String(encounter?.minLevel ?? ''))
   const [maxLevel, setMaxLevel] = useState(String(encounter?.maxLevel ?? ''))
 
-  const { data } = usePokemonList(search || undefined)
-  const pokemonOptions = data?.items ?? []
-
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault()
     if (encounter) {
@@ -60,32 +56,11 @@ export function RouteEncounterFormModal({
       isDeleting={isDeleting}
     >
       {!encounter && (
-        <div>
-          <label className="block text-sm font-medium mb-1">Pokemon</label>
-          <input
-            type="text"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search pokemon..."
-            className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600 mb-2"
-          />
-          {pokemonOptions.length > 0 && (
-            <select
-              required
-              value={pokemonId || ''}
-              onChange={(e) => setPokemonId(Number(e.target.value))}
-              size={Math.min(pokemonOptions.length, 6)}
-              className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
-            >
-              {!pokemonId && <option value="">Select a pokemon...</option>}
-              {pokemonOptions.map((p) => (
-                <option key={p.id} value={p.id}>
-                  #{p.nationalDex} {p.name} ({p.types.join('/')})
-                </option>
-              ))}
-            </select>
-          )}
-        </div>
+        <PokemonSelector
+          label="Pokemon"
+          selectedId={pokemonId || null}
+          onChange={(id) => setPokemonId(id ?? 0)}
+        />
       )}
       <div>
         <label className="block text-sm font-medium mb-1">Encounter Method</label>