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>

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>