GEN-2: surface Farbschlag images (FarbschlagImage component) in breeding results, animal detail, form picker

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

gerbil-manager-web/src/pages/GerbilFormPage.tsx

@@ -7,6 +7,7 @@ import { GENDERS, GERBIL_STATUSES, type CreateGerbil, type Gender, type GerbilSt
 import { useApi, useMutation } from '../hooks/useApi'
 import { genderLabel, statusLabel } from '../format/labels'
 import { fromDisplayString } from '../genetics'
+import FarbschlagImage from '../components/FarbschlagImage'
 
 interface FormState {
   name: string
@@ -173,6 +174,9 @@ export default function GerbilFormPage() {
 
   if (isEdit && existing.loading) return <p className="muted">{de.common.loading}</p>
 
+  const selectedColorName =
+    (colorVarieties.data ?? []).find((cv) => cv.id === form.colorVarietyId)?.name ?? null
+
   return (
     <section className="page">
       <h2>{isEdit ? t.form.editTitle : t.form.createTitle}</h2>
@@ -265,14 +269,20 @@ export default function GerbilFormPage() {
 
         <label className="field">
           <span>{t.fields.colorVariety}</span>
-          <select value={form.colorVarietyId} onChange={(e) => set('colorVarietyId', e.target.value)}>
-            <option value="">{t.form.none}</option>
-            {(colorVarieties.data ?? []).map((cv) => (
-              <option key={cv.id} value={cv.id}>
-                {cv.name}
-              </option>
-            ))}
-          </select>
+          <span className="farbschlag-value">
+            <select
+              value={form.colorVarietyId}
+              onChange={(e) => set('colorVarietyId', e.target.value)}
+            >
+              <option value="">{t.form.none}</option>
+              {(colorVarieties.data ?? []).map((cv) => (
+                <option key={cv.id} value={cv.id}>
+                  {cv.name}
+                </option>
+              ))}
+            </select>
+            {selectedColorName && <FarbschlagImage name={selectedColorName} size={36} />}
+          </span>
         </label>
 
         <label className="field">