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/components/BreedingResultView.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { de } from '../strings/de'
 import type { BreedingResult } from '../genetics'
+import FarbschlagImage from './FarbschlagImage'
 
 function warningText(code: string): string {
   const map = de.genetics.warnings as Record<string, string>
@@ -44,6 +45,7 @@ export default function BreedingResultView({ result, title }: BreedingResultView
           <ul className="farbschlag-cards">
             {result.byFarbschlag.map((f) => (
               <li key={f.farbschlag} className="farbschlag-card">
+                <FarbschlagImage name={f.farbschlag} />
                 <span className="farbschlag-card__name">{f.farbschlag}</span>
                 <span className="farbschlag-card__prob">
                   {f.probability.percent}

gerbil-manager-web/src/components/FarbschlagImage.css

@@ -0,0 +1,20 @@
+.farbschlag-thumb {
+  object-fit: cover;
+  border-radius: 0.4rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  vertical-align: middle;
+}
+
+/* With a leading thumbnail, let the name grow so the probability stays right. */
+.farbschlag-card .farbschlag-card__name {
+  flex: 1;
+}
+
+/* Inline image + name (e.g. on the animal detail Stammdaten row). */
+.farbschlag-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+

gerbil-manager-web/src/components/FarbschlagImage.tsx

@@ -0,0 +1,25 @@
+import { farbschlagImageUrl, findVariety } from '../genetics'
+import './FarbschlagImage.css'
+
+export interface FarbschlagImageProps {
+  /** Variety name; may include " Schecke"/" Rex" modifiers (stripped for lookup). */
+  name: string
+  size?: number
+}
+
+/** Thumbnail for a Farbschlag, or null if the variety has no catalog image. */
+export default function FarbschlagImage({ name, size = 40 }: FarbschlagImageProps) {
+  const baseName = name.replace(/\s+(Schecke|Rex)\b/g, '').trim()
+  const url = farbschlagImageUrl(findVariety(baseName)?.image ?? findVariety(name)?.image)
+  if (!url) return null
+  return (
+    <img
+      className="farbschlag-thumb"
+      src={url}
+      alt={name}
+      width={size}
+      height={size}
+      loading="lazy"
+    />
+  )
+}