Replace free-text encounter method input with dropdown selector

Use the predefined METHOD_ORDER/METHOD_CONFIG from EncounterMethodBadge
to populate a select dropdown with all known encounter methods plus an
"Other" option for custom values. Shows a colored badge preview on
selection. Correctly handles editing encounters with non-standard methods.

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

frontend/src/components/EncounterMethodBadge.tsx

@@ -1,4 +1,4 @@
-const METHOD_CONFIG: Record<string, { label: string; color: string }> = {
+export const METHOD_CONFIG: Record<string, { label: string; color: string }> = {
   starter: {
     label: 'Starter',
     color:

frontend/src/components/admin/RouteEncounterFormModal.tsx

@@ -1,6 +1,7 @@
 import { type FormEvent, useState } from 'react'
 import { FormModal } from './FormModal'
 import { PokemonSelector } from './PokemonSelector'
+import { METHOD_ORDER, METHOD_CONFIG, getMethodLabel } from '../EncounterMethodBadge'
 import type { RouteEncounterDetail, CreateRouteEncounterInput, UpdateRouteEncounterInput } from '../../types'
 
 interface RouteEncounterFormModalProps {
@@ -21,7 +22,13 @@ export function RouteEncounterFormModal({
   isDeleting,
 }: RouteEncounterFormModalProps) {
   const [pokemonId, setPokemonId] = useState(encounter?.pokemonId ?? 0)
-  const [encounterMethod, setEncounterMethod] = useState(encounter?.encounterMethod ?? '')
+
+  const initialMethod = encounter?.encounterMethod ?? ''
+  const isKnownMethod = METHOD_ORDER.includes(initialMethod)
+  const [selectedMethod, setSelectedMethod] = useState(isKnownMethod ? initialMethod : initialMethod ? 'other' : '')
+  const [customMethod, setCustomMethod] = useState(isKnownMethod ? '' : initialMethod)
+  const encounterMethod = selectedMethod === 'other' ? customMethod : selectedMethod
+
   const [encounterRate, setEncounterRate] = useState(String(encounter?.encounterRate ?? ''))
   const [minLevel, setMinLevel] = useState(String(encounter?.minLevel ?? ''))
   const [maxLevel, setMaxLevel] = useState(String(encounter?.maxLevel ?? ''))
@@ -64,14 +71,40 @@ export function RouteEncounterFormModal({
       )}
       <div>
         <label className="block text-sm font-medium mb-1">Encounter Method</label>
-        <input
-          type="text"
+        <select
           required
-          value={encounterMethod}
-          onChange={(e) => setEncounterMethod(e.target.value)}
-          placeholder="e.g. Walking, Surfing, Fishing"
+          value={selectedMethod}
+          onChange={(e) => {
+            setSelectedMethod(e.target.value)
+            if (e.target.value !== 'other') setCustomMethod('')
+          }}
           className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
-        />
+        >
+          <option value="">Select method...</option>
+          {METHOD_ORDER.map((m) => (
+            <option key={m} value={m}>
+              {getMethodLabel(m)}
+            </option>
+          ))}
+          <option value="other">Other...</option>
+        </select>
+        {selectedMethod && selectedMethod !== 'other' && (
+          <span
+            className={`inline-block mt-1 text-[9px] px-1.5 py-0.5 font-medium rounded-full whitespace-nowrap ${METHOD_CONFIG[selectedMethod]?.color ?? ''}`}
+          >
+            {getMethodLabel(selectedMethod)}
+          </span>
+        )}
+        {selectedMethod === 'other' && (
+          <input
+            type="text"
+            required
+            value={customMethod}
+            onChange={(e) => setCustomMethod(e.target.value)}
+            placeholder="Custom method name"
+            className="w-full mt-2 px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+          />
+        )}
       </div>
       <div>
         <label className="block text-sm font-medium mb-1">Encounter Rate (%)</label>