Merge feature/stammbaum-litters (STAMMBAUM-LITTERS): Würfe des Wurzeltiers links im Viewer + Link

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

@@ -22,9 +22,10 @@ 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 { listLitters } from '../api/litters'
 import { listColorVarieties } from '../api/lookups'
 import { getInbreedingCoefficient } from '../api/pedigree'
-import type { Gender, Gerbil } from '../api/types'
+import type { Gender, Gerbil, Litter } from '../api/types'
 import { useApi } from '../hooks/useApi'
 import { formatDate, genderLabel } from '../format/labels'
 import { UNKNOWN_FARBSCHLAG, fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
@@ -156,6 +157,13 @@ export default function StammbaumPage() {
       ? `${(inbreeding.data * 100).toLocaleString('de-DE', { maximumFractionDigits: 1 })} %`
       : t.inbreeding.unavailable
 
+  /* ── Würfe des Wurzeltiers (STAMMBAUM-LITTERS): aktualisiert bei Umwurzeln ── */
+  const rootLitters = useApi(
+    () => listLitters({ filter: `fatherId=${id}|motherId=${id}`, orderBy: 'date desc', pageSize: 50 }),
+    [id],
+  )
+  const rootLitterItems = rootLitters.data?.items ?? []
+
   /* ── react-d3-tree-Daten ── */
   const nodesByPath = useMemo(() => (root ? collectNodes(root) : null), [root])
   const datum = useMemo(() => (root ? toRawNodeDatum(root, t.unknown) : null), [root, t])
@@ -315,25 +323,30 @@ export default function StammbaumPage() {
           </button>
         </div>
 
-        <div className="stammbaum-canvas" ref={canvasRef}>
-          {view && (
-            <Tree
-              key={id}
-              data={datum}
-              renderCustomNodeElement={renderNode}
-              orientation="horizontal"
-              pathFunc="step"
-              translate={view.translate}
-              zoom={view.zoom}
-              scaleExtent={{ min: ZOOM_MIN, max: ZOOM_MAX }}
-              zoomable
-              draggable
-              collapsible={false}
-              nodeSize={{ x: NODE_X, y: NODE_Y }}
-              separation={{ siblings: 1, nonSiblings: 1 }}
-              onUpdate={handleTreeUpdate}
-            />
+        <div className="stammbaum-layout">
+          {rootLitterItems.length > 0 && (
+            <LittersPanel litters={rootLitterItems} t={t} />
           )}
+          <div className="stammbaum-canvas" ref={canvasRef}>
+            {view && (
+              <Tree
+                key={id}
+                data={datum}
+                renderCustomNodeElement={renderNode}
+                orientation="horizontal"
+                pathFunc="step"
+                translate={view.translate}
+                zoom={view.zoom}
+                scaleExtent={{ min: ZOOM_MIN, max: ZOOM_MAX }}
+                zoomable
+                draggable
+                collapsible={false}
+                nodeSize={{ x: NODE_X, y: NODE_Y }}
+                separation={{ siblings: 1, nonSiblings: 1 }}
+                onUpdate={handleTreeUpdate}
+              />
+            )}
+          </div>
         </div>
         <ul className="stammbaum-hints">
           <li>{t.tapHint}</li>
@@ -417,6 +430,36 @@ function PedigreeCard({
   )
 }
 
+/* ── Würfe-Panel (STAMMBAUM-LITTERS) ─────────────────────────────── */
+
+function LittersPanel({
+  litters,
+  t,
+}: {
+  litters: Litter[]
+  t: { littersTitle: string; littersJunge: string }
+}) {
+  return (
+    <aside className="stammbaum-litters-panel" aria-label={t.littersTitle}>
+      <div className="stammbaum-litters-panel__title">{t.littersTitle}</div>
+      <ul className="stammbaum-litters-panel__list">
+        {litters.map((l) => (
+          <li key={l.id}>
+            <Link to={`/wuerfe/${l.id}`} className="stammbaum-litters-panel__link">
+              <span className="stammbaum-litters-panel__name">{l.name}</span>
+              {l.totalBorn != null && (
+                <span className="stammbaum-litters-panel__born">
+                  {l.totalBorn} {t.littersJunge}
+                </span>
+              )}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  )
+}
+
 function SexIcon({ gender }: { gender: Gender }) {
   const symbol = gender === 'male' ? '♂' : gender === 'female' ? '♀' : '?'
   return (