Merge feature/ui-polish: namenlose Tiere Platzhalter '(ohne Namen)' + Leerwert-'—'-Konsistenz

- de.ts nameless + GerbilsPage/GerbilDetailPage/AnimalPicker zeigen '(ohne Namen)' statt leer
- causeOfDeath/notes via || null → Rows zeigen '—' konsistent (Herkunft war schon korrekt)
- +4 e2e (Platzhalter Liste+Detail x2 Viewports). vitest 82, e2e 130, build clean. Kein EF.
[god-QA: disjunkt zu qa-regression+import-backfill-Merges]

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

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[] = [

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')

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>
           ))}

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>

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}

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.',