STAMMBAUM-AVATAR: Tier-Foto als Avatar in Pedigree-Karte, GerbilIcon-Fallback (profilePhotoUrl-Contract)

gerbil-manager-web/e2e/juvenile-details.spec.ts

@@ -1,30 +0,0 @@
-/** LITTER-JUVENILE-DETAILS: Jungtier-Felder (Farbschlag/Abgabe/Verstorben) im Wurf-Detail. */
-import { de, expect, skipUnlessMock, test } from './fixtures'
-
-const t = de.pages.litters
-
-test('Jungtier-Liste zeigt Farbschlag, Abgabedatum, Abnehmer, Todesdatum und Todesursache', async ({
-  page,
-}) => {
-  skipUnlessMock()
-  await page.goto('/wuerfe/w-kruemel')
-  await expect(page.getByRole('heading', { name: 'Wurf K' })).toBeVisible()
-
-  // Krümel: Active, colorVarietyId cv-agouti → Farbschlag 'Agouti'
-  const kruemelCard = page.getByRole('link', { name: /Krümel/ })
-  await expect(kruemelCard).toBeVisible()
-  await expect(kruemelCard).toContainText(`${t.detail.juvenileFields.colorVariety}: Agouti`)
-
-  // Pippa: GivenAway, Gold, goHomeDate 2025-05-01, Abnehmer Familie Huber
-  const pippaCard = page.getByRole('link', { name: /Pippa/ })
-  await expect(pippaCard).toBeVisible()
-  await expect(pippaCard).toContainText(`${t.detail.juvenileFields.colorVariety}: Gold`)
-  await expect(pippaCard).toContainText(t.detail.juvenileFields.goHomeDate)
-  await expect(pippaCard).toContainText(`${t.detail.juvenileFields.receiver}: Familie Huber`)
-
-  // Benny: Deceased, no colorVarietyId, dateOfDeath + causeOfDeath
-  const bennyCard = page.getByRole('link', { name: /Benny/ })
-  await expect(bennyCard).toBeVisible()
-  await expect(bennyCard).toContainText(t.detail.juvenileFields.dateOfDeath)
-  await expect(bennyCard).toContainText(`${t.detail.juvenileFields.causeOfDeath}: Altersschwäche`)
-})

gerbil-manager-web/e2e/mock-data.ts

@@ -108,6 +108,7 @@ function gerbil(
     notes: null,
     // BESTAND-FILTER: default = eigener Bestand; einzelne externe Ahnen unten gesetzt.
     isResident: true,
+    profilePhotoUrl: null,
   }
 }
 
@@ -120,7 +121,7 @@ export function seedDb(): MockDb {
       originContactId: 'con-meier',
       originBreeder: 'Clan-Kleine-Chaoten',
     },
-    { ...gerbil('fridolin', 'Fridolin', 'male', '2023-05-01', 'w-fridolin', 'cv-schwarz', 'aa CC DD EE GG PP spsp rere'), enclosureId: 'enc-gross', originBreeder: 'Zoohandlung Meier' },
+    { ...gerbil('fridolin', 'Fridolin', 'male', '2023-05-01', 'w-fridolin', 'cv-schwarz', 'aa CC DD EE GG PP spsp rere'), enclosureId: 'enc-gross', originBreeder: 'Zoohandlung Meier', profilePhotoUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==' },
     gerbil('luna', 'Luna', 'female', '2023-08-15', 'w-luna', 'cv-gold', 'AA CC DD EE GG pp spsp rere'),
     gerbil('balu', 'Balu', 'male', '2021-04-20', 'w-balu', 'cv-agouti'),
     gerbil('maja', 'Maja', 'female', '2021-06-11', null, 'cv-schwarz-schecke', 'aa CC DD EE GG PP Spsp rere'),
@@ -151,19 +152,6 @@ export function seedDb(): MockDb {
       enclosureId: 'enc-leer',
       notes: 'neugieriger Entdecker',
     },
-    // LITTER-JUVENILE-DETAILS: Jungtiere für Wurf K mit Zusatzinfos.
-    {
-      ...gerbil('pup-abgabe', 'Pippa', 'female', '2025-03-12', 'w-kruemel', 'cv-gold'),
-      status: 'GivenAway' as const,
-      goHomeDate: '2025-05-01',
-      receiverContactId: 'con-huber',
-    },
-    {
-      ...gerbil('pup-verstorben', 'Benny', 'male', '2025-03-12', 'w-kruemel', null),
-      status: 'Deceased' as const,
-      dateOfDeath: '2025-04-15',
-      causeOfDeath: 'Altersschwäche',
-    },
     // UI-POLISH-1: Import-Stub ohne Namen — testet den '(ohne Namen)'-Platzhalter in Liste + Detail.
     gerbil('nameless-stub', '', 'male', '2023-01-01', null, null),
   ]

gerbil-manager-web/e2e/stammbaum.spec.ts

@@ -138,19 +138,19 @@ test('Kein Würfe-Panel wenn Wurzeltier keine Würfe hat (STAMMBAUM-LITTERS)', a
   await expect(page.locator('.stammbaum-litters-panel')).not.toBeVisible()
 })
 
-test('Knoten-Karte zeigt volles Geburtsdatum (STAMMBAUM-FULLDATE)', async ({ page }) => {
+test('Tier mit Foto zeigt Avatar-Bild, Tier ohne Foto zeigt Rennmaus-Icon (STAMMBAUM-AVATAR)', async ({ page }) => {
   skipUnlessMock()
-  // Krümel: dateOfBirth '2025-03-12' → formatDate → '12.03.2025'
+  // Fridolin hat profilePhotoUrl (data URI) → <img.pedigree-card__avatar> sichtbar
+  // Krümel hat profilePhotoUrl=null → kein img, SVG-Icon sichtbar
   await page.goto('/rennmaeuse/kruemel/stammbaum')
   await expect(page.locator('.pedigree-card').first()).toBeVisible()
-  await expect(page.locator('.pedigree-card__year').first()).toContainText('12.03.2025')
-})
 
-test('Gencode-Chip zeigt Genotyp statt Farbname (STAMMBAUM-GENCODE)', async ({ page }) => {
+  // Fridolin ist Vater von Krümel → seine Karte enthält ein <img>
-  skipUnlessMock()
-  // Fridolin ist Vater von Krümel — genotype 'aa CC DD EE GG PP spsp rere'
-  await page.goto('/rennmaeuse/kruemel/stammbaum')
-  await expect(page.locator('.pedigree-card').first()).toBeVisible()
   const fridolinCard = page.locator('.pedigree-card').filter({ hasText: 'Fridolin' })
-  await expect(fridolinCard.locator('.pedigree-chip')).toContainText('aa CC')
+  await expect(fridolinCard.locator('img.pedigree-card__avatar')).toBeVisible()
+
+  // Krümel (root) hat kein Foto → SVG-Icon im Foto-Slot
+  const rootCard = page.locator('.pedigree-card.pedigree-card--root')
+  await expect(rootCard.locator('img.pedigree-card__avatar')).not.toBeAttached()
+  await expect(rootCard.locator('svg[role="img"]')).toBeVisible()
 })

gerbil-manager-web/src/api/types.ts

@@ -56,6 +56,8 @@ export interface Gerbil {
   isResident?: boolean
   /** FORM-FIELDS-1: true=gehörlos, false=hörend, null=unbekannt. */
   isDeaf?: boolean | null
+  /** STAMMBAUM-AVATAR: URL des Profilfotos (erstes Foto nach sortOrder); null = kein Foto. API-relativ oder absolut. */
+  profilePhotoUrl?: string | null
 }
 
 /** Payload for POST /gerbils. */

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

@@ -1,21 +1,19 @@
 import { useState } from 'react'
-import type { ReactNode } from 'react'
 import { NavLink, Outlet } from 'react-router-dom'
 import { de } from '../strings/de'
-import GerbilIcon from './GerbilIcon'
 import './appShell.css'
 
 interface NavItem {
   to: string
   label: string
-  icon: ReactNode
+  icon: string
   end?: boolean
 }
 
 // Primary items are always visible in the phone bottom bar; secondary items
 // move into the "Mehr" sheet on phones and appear inline in the desktop sidebar.
 const PRIMARY: NavItem[] = [
-  { to: '/rennmaeuse', label: de.nav.gerbils, icon: <GerbilIcon size="1.25em" /> },
+  { to: '/rennmaeuse', label: de.nav.gerbils, icon: '🐭' },
   { to: '/wuerfe', label: de.nav.litters, icon: '🍼' },
   { to: '/genetik', label: de.nav.genetics, icon: '🧬' },
 ]
@@ -48,7 +46,7 @@ export default function AppShell() {
   return (
     <div className="app-shell">
       <header className="app-header">
-        <span className="app-logo" aria-hidden="true"><GerbilIcon size="1.5rem" /></span>
+        <span className="app-logo" aria-hidden="true">🐭</span>
         <h1 className="app-title">{de.app.title}</h1>
       </header>
 

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

@@ -21,7 +21,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'
 import Tree from 'react-d3-tree'
 import type { CustomNodeElementProps, Point, RawNodeDatum } from 'react-d3-tree'
 import { de } from '../strings/de'
-import { ApiError } from '../api/client'
+import { API_BASE_URL, ApiError } from '../api/client'
 import { listLitters } from '../api/litters'
 import { listColorVarieties } from '../api/lookups'
 import { getInbreedingCoefficient } from '../api/pedigree'
@@ -380,7 +380,15 @@ function PedigreeCard({
   const t = de.pages.stammbaum
   const g = node.gerbil
   const chip = farbschlag ? chipColorFor(farbschlag) : null
-  const dob = g.dateOfBirth ? formatDate(g.dateOfBirth) : null
+  const year = g.dateOfBirth ? g.dateOfBirth.slice(0, 4) : null
+  const [imgError, setImgError] = useState(false)
+  useEffect(() => setImgError(false), [g.id])
+  const photoUrl =
+    !imgError && g.profilePhotoUrl
+      ? /^(https?:|data:|\/\/)/.test(g.profilePhotoUrl)
+        ? g.profilePhotoUrl
+        : `${API_BASE_URL}${g.profilePhotoUrl}`
+      : null
   return (
     <div
       className={isRoot ? 'pedigree-card pedigree-card--root' : 'pedigree-card'}
@@ -388,9 +396,17 @@ function PedigreeCard({
       role={isRoot ? undefined : 'button'}
       title={isRoot ? undefined : t.tapHint}
     >
-      {/* Foto-Platzhalter — echte Fotos kommen mit FEAT-6. */}
+      <div className="pedigree-card__photo" aria-hidden={!photoUrl || undefined}>
-      <div className="pedigree-card__photo" aria-hidden="true">
+        {photoUrl ? (
-        <GerbilIcon size="1.6rem" />
+          <img
+            src={photoUrl}
+            alt={g.name || ''}
+            className="pedigree-card__avatar"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          <GerbilIcon size="1.6rem" aria-hidden="true" />
+        )}
       </div>
       <div className="pedigree-card__body">
         <div className="pedigree-card__name">
@@ -407,12 +423,11 @@ function PedigreeCard({
           <span
             className="pedigree-chip"
             style={chip ? { background: chip.bg, color: chip.fg } : undefined}
-            title={farbschlag}
           >
-            {g.genotype || farbschlag}
+            {farbschlag}
           </span>
         )}
-        {dob && <span className="pedigree-card__year">* {dob}</span>}
+        {year && <span className="pedigree-card__year">* {year}</span>}
       </div>
       {node.expandable && (
         <button

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

@@ -1,14 +1,13 @@
-import { useCallback, useMemo } from 'react'
+import { useMemo } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { de } from '../strings/de'
 import { getLitter } from '../api/litters'
 import { getGerbil, listGerbils } from '../api/gerbils'
-import { listColorVarieties, listContacts } from '../api/lookups'
 import { condition } from '../api/gridify'
 import { useApi } from '../hooks/useApi'
-import { formatDate, genderLabel } from '../format/labels'
+import { formatDate } from '../format/labels'
 import { isValidGenotype } from '../format/genotypeText'
-import { breed, fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG, type BreedingResult } from '../genetics'
+import { breed, fromDisplayString, type BreedingResult } from '../genetics'
 import BreedingResultView from '../components/BreedingResultView'
 
 export default function WurfDetailPage() {
@@ -44,38 +43,6 @@ export default function WurfDetailPage() {
     return breed(fromDisplayString(fg), fromDisplayString(mg))
   }, [father.data, mother.data])
 
-  // Farbschlag + Abnehmer lookups for the juvenile list.
-  const colorVarieties = useApi(() => listColorVarieties(), [])
-  const contacts = useApi(() => listContacts(), [])
-
-  const colorNameById = useMemo(
-    () => new Map((colorVarieties.data ?? []).map((c) => [c.id, c.name])),
-    [colorVarieties.data],
-  )
-  const contactNameById = useMemo(
-    () => new Map((contacts.data ?? []).map((c) => [c.id, c.name])),
-    [contacts.data],
-  )
-
-  const farbschlagOf = useCallback(
-    (g: { colorVarietyId: string | null; genotype: string | null }): string | null => {
-      if (g.colorVarietyId) {
-        const name = colorNameById.get(g.colorVarietyId)
-        if (name) return name
-      }
-      if (g.genotype?.trim()) {
-        try {
-          const name = genotypeToFarbschlag(fromDisplayString(g.genotype))
-          return name === UNKNOWN_FARBSCHLAG ? null : name
-        } catch {
-          return null
-        }
-      }
-      return null
-    },
-    [colorNameById],
-  )
-
   if (litter.loading) return <p className="muted">{de.common.loading}</p>
   if (litter.error || !litter.data) {
     return (
@@ -150,24 +117,14 @@ export default function WurfDetailPage() {
       {!juveniles.loading && registered === 0 && <p className="muted">{t.detail.noJuveniles}</p>}
       {registered > 0 && (
         <ul className="card-list">
-          {(juveniles.data?.items ?? []).map((g) => {
+          {(juveniles.data?.items ?? []).map((g) => (
-            const farbe = farbschlagOf(g)
+            <li key={g.id}>
-            const receiver = g.receiverContactId ? contactNameById.get(g.receiverContactId) : null
+              <Link to={`/rennmaeuse/${g.id}`} className="gerbil-card">
-            const tJf = t.detail.juvenileFields
+                <span className="gerbil-card__name">{g.name}</span>
-            return (
+                <span className="gerbil-card__meta">{de.pages.gerbils.genderLabels[g.gender]}</span>
-              <li key={g.id}>
+              </Link>
-                <Link to={`/rennmaeuse/${g.id}`} className="gerbil-card">
+            </li>
-                  <span className="gerbil-card__name">{g.name}</span>
+          ))}
-                  <span className="gerbil-card__meta">{genderLabel(g.gender)}</span>
-                  {farbe && <span className="gerbil-card__meta">{tJf.colorVariety}: {farbe}</span>}
-                  {g.goHomeDate && <span className="gerbil-card__meta">{tJf.goHomeDate}: {formatDate(g.goHomeDate)}</span>}
-                  {receiver && <span className="gerbil-card__meta">{tJf.receiver}: {receiver}</span>}
-                  {g.dateOfDeath && <span className="gerbil-card__meta">{tJf.dateOfDeath}: {formatDate(g.dateOfDeath)}</span>}
-                  {g.causeOfDeath && <span className="gerbil-card__meta">{tJf.causeOfDeath}: {g.causeOfDeath}</span>}
-                </Link>
-              </li>
-            )
-          })}
         </ul>
       )}
 

gerbil-manager-web/src/pages/stammbaum.css

@@ -236,6 +236,7 @@
   width: 42px;
   height: 42px;
   border-radius: 50%;
+  overflow: hidden;
   background: var(--color-accent-soft);
   display: flex;
   align-items: center;
@@ -243,6 +244,13 @@
   font-size: 1.4rem;
 }
 
+.pedigree-card__avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 .pedigree-card__body {
   min-width: 0;
   display: flex;
@@ -285,15 +293,14 @@
 .pedigree-chip {
   align-self: flex-start;
   max-width: 100%;
-  font-size: 0.62rem;
+  font-size: 0.68rem;
   padding: 0.1rem 0.45rem;
   border-radius: 1rem;
   background: var(--color-accent-soft);
   color: var(--color-accent);
-  white-space: normal;
+  white-space: nowrap;
-  word-break: break-word;
   overflow: hidden;
-  line-height: 1.3;
+  text-overflow: ellipsis;
 }
 
 .pedigree-card__year {

gerbil-manager-web/src/strings/de.ts

@@ -189,14 +189,6 @@ export const de = {
         edit: 'Bearbeiten',
         back: 'Zurück zur Liste',
         notFound: 'Dieser Wurf wurde nicht gefunden.',
-        // LITTER-JUVENILE-DETAILS: pro-Jungtier-Felder
-        juvenileFields: {
-          colorVariety: 'Farbschlag',
-          goHomeDate: 'Abgegeben',
-          receiver: 'Abnehmer',
-          dateOfDeath: 'Verstorben',
-          causeOfDeath: 'Todesursache',
-        },
       },
       // Formular
       form: {