From 55c298ad1feb5acc7c66f8cb8bfdb4c08d5b65e8 Mon Sep 17 00:00:00 2001
From: Gulum <gulum@rismer.de>
Date: Sat, 6 Jun 2026 17:32:26 +0200
Subject: [PATCH] UI-POLISH-1: namenlose Tiere + Leerwert-Konsistenz

- de.ts: nameless = '(ohne Namen)' (neuer Platzhalter-String)
- GerbilsPage: g.name || t.nameless in Karten-Name + Checkbox-Aria
- GerbilDetailPage: g.name || nameless im h2-Header; g.causeOfDeath/notes via || null (leer-string-sicher wie Herkunft)
- AnimalPicker: g.name || nameless im Picker-Button

e2e: +1 nameless-stub in mock-data; 2 neue Tests (Liste + Detail-Header)

Gate: vitest 82/82, e2e 130/130, tsc clean
---
 gerbil-manager-web/e2e/mock-data.ts                |  2 ++
 gerbil-manager-web/e2e/tiere.spec.ts               | 13 +++++++++++++
 gerbil-manager-web/src/components/AnimalPicker.tsx |  4 +++-
 gerbil-manager-web/src/pages/GerbilDetailPage.tsx  |  6 +++---
 gerbil-manager-web/src/pages/GerbilsPage.tsx       |  4 ++--
 gerbil-manager-web/src/strings/de.ts               |  1 +
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/gerbil-manager-web/e2e/mock-data.ts b/gerbil-manager-web/e2e/mock-data.ts
index efdfec4..ef9f19a 100644
--- a/gerbil-manager-web/e2e/mock-data.ts
+++ b/gerbil-manager-web/e2e/mock-data.ts
@@ -149,6 +149,8 @@ export function seedDb(): MockDb {
       enclosureId: 'enc-leer',
       notes: 'neugieriger Entdecker',
     },
+    // UI-POLISH-1: Import-Stub ohne Namen — testet den '(ohne Namen)'-Platzhalter in Liste + Detail.
+    gerbil('nameless-stub', '', 'male', '2023-01-01', null, null),
   ]
 
   const litters: Litter[] = [
diff --git a/gerbil-manager-web/e2e/tiere.spec.ts b/gerbil-manager-web/e2e/tiere.spec.ts
index 052b865..469edc9 100644
--- a/gerbil-manager-web/e2e/tiere.spec.ts
+++ b/gerbil-manager-web/e2e/tiere.spec.ts
@@ -127,6 +127,19 @@ test('Detailseite: Herkunft zeigt Kontaktlink wenn originContactId gesetzt (WURF
   await expect(originLink).toHaveAttribute('href', '/kontakte/con-meier')
 })
 
+test('Namenlose Tiere zeigen Platzhalter in der Liste (UI-POLISH-1)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse')
+  // 'nameless-stub' hat name='' → Platzhalter '(ohne Namen)' soll als Link sichtbar sein
+  await expect(page.getByRole('link', { name: de.pages.gerbils.nameless })).toBeVisible()
+})
+
+test('Namenlose Tiere zeigen Platzhalter im Detail-Header (UI-POLISH-1)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/nameless-stub')
+  await expect(page.getByRole('heading', { name: de.pages.gerbils.nameless })).toBeVisible()
+})
+
 test('Tier bearbeiten — Notizen ändern', async ({ page }) => {
   skipUnlessMock()
   await page.goto('/rennmaeuse/kruemel/bearbeiten')
diff --git a/gerbil-manager-web/src/components/AnimalPicker.tsx b/gerbil-manager-web/src/components/AnimalPicker.tsx
index 052b24f..abf7294 100644
--- a/gerbil-manager-web/src/components/AnimalPicker.tsx
+++ b/gerbil-manager-web/src/components/AnimalPicker.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react'
 import { de } from '../strings/de'
+
+const nameless = de.pages.gerbils.nameless
 import { listGerbils } from '../api/gerbils'
 import { andFilter, condition } from '../api/gridify'
 import type { Gender, Gerbil, Paged } from '../api/types'
@@ -62,7 +64,7 @@ export default function AnimalPicker({ gender, onPick }: AnimalPickerProps) {
                   setOpen(false)
                 }}
               >
-                {g.name}
+                {g.name || nameless}
               </button>
             </li>
           ))}
diff --git a/gerbil-manager-web/src/pages/GerbilDetailPage.tsx b/gerbil-manager-web/src/pages/GerbilDetailPage.tsx
index ad3dd66..e6ea159 100644
--- a/gerbil-manager-web/src/pages/GerbilDetailPage.tsx
+++ b/gerbil-manager-web/src/pages/GerbilDetailPage.tsx
@@ -102,7 +102,7 @@ export default function GerbilDetailPage() {
       <header className="page-head">
         <div>
           <GerbilProfilePhoto gerbilId={g.id} />
-          <h2>{g.name}</h2>
+          <h2>{g.name || de.pages.gerbils.nameless}</h2>
           <span className={`badge badge--${g.status.toLowerCase()}`}>{statusLabel(g.status)}</span>
           {g.isResident === false && (
             <span className="badge badge--external" title={de.pages.gerbils.externalTitle}>
@@ -153,7 +153,7 @@ export default function GerbilDetailPage() {
         {g.status === 'Deceased' && (
           <>
             <Row label={t.fields.dateOfDeath} value={formatDate(g.dateOfDeath)} />
-            <Row label={t.fields.causeOfDeath} value={g.causeOfDeath} />
+            <Row label={t.fields.causeOfDeath} value={g.causeOfDeath || null} />
           </>
         )}
         {g.status === 'GivenAway' && (
@@ -190,7 +190,7 @@ export default function GerbilDetailPage() {
           }
         />
         <Row label={t.fields.receiver} value={lookup(contactName, g.receiverContactId)} />
-        <Row label={t.fields.notes} value={g.notes} />
+        <Row label={t.fields.notes} value={g.notes || null} />
       </dl>
 
       <h3>{t.detail.genetics}</h3>
diff --git a/gerbil-manager-web/src/pages/GerbilsPage.tsx b/gerbil-manager-web/src/pages/GerbilsPage.tsx
index 0f14964..b0c0604 100644
--- a/gerbil-manager-web/src/pages/GerbilsPage.tsx
+++ b/gerbil-manager-web/src/pages/GerbilsPage.tsx
@@ -256,11 +256,11 @@ export default function GerbilsPage() {
                 className="gerbil-row__check"
                 checked={selected.has(g.id)}
                 onChange={() => toggleSelect(g.id)}
-                aria-label={g.name}
+                aria-label={g.name || t.nameless}
               />
               <Link to={`/rennmaeuse/${g.id}`} className="gerbil-card">
                 <span className="gerbil-card__name">
-                  {g.name}
+                  {g.name || t.nameless}
                   {g.isResident === false && (
                     <span className="badge badge--external" title={t.externalTitle}>
                       {t.externalBadge}
diff --git a/gerbil-manager-web/src/strings/de.ts b/gerbil-manager-web/src/strings/de.ts
index 454c379..3b74beb 100644
--- a/gerbil-manager-web/src/strings/de.ts
+++ b/gerbil-manager-web/src/strings/de.ts
@@ -38,6 +38,7 @@ export const de = {
   pages: {
     gerbils: {
       title: 'Rennmäuse',
+      nameless: '(ohne Namen)',
       // Liste
       newButton: 'Neue Rennmaus',
       empty: 'Keine Rennmäuse gefunden.',