FEAT-14b: Charakterbogen on animal detail (persist) + Abgabe composer; feed traits+note into sale-ad; e2e smoke

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

@@ -7,6 +7,7 @@ import { useApi, useMutation } from '../hooks/useApi'
 import { formatDate, genderLabel, statusLabel } from '../format/labels'
 import { fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
 import FarbschlagImage from '../components/FarbschlagImage'
+import Charakterbogen from '../components/Charakterbogen'
 // FEAT-6 (Oscar): Tab-Inhalte + Profilfoto
 import GerbilHealthTab from '../components/GerbilHealthTab'
 import GerbilPhotosTab from '../components/GerbilPhotosTab'
@@ -43,6 +44,13 @@ export default function GerbilDetailPage() {
 
   const gerbil = useApi(() => getGerbil(id), [id])
   const forSale = useMutation(() => updateGerbil(id, { status: 'ForSale' }))
+  // FEAT-14: Charakterbogen (persisted on the Gerbil).
+  const [charTraits, setCharTraits] = useState<string[]>([])
+  const [charNote, setCharNote] = useState('')
+  const [charInit, setCharInit] = useState<string | null>(null)
+  const saveCharacter = useMutation(() =>
+    updateGerbil(id, { characterTraits: charTraits, characterNote: charNote.trim() || null }),
+  )
   const colorVarieties = useApi(() => listColorVarieties(), [])
   const enclosures = useApi(() => listEnclosures(), [])
   const contacts = useApi(() => listContacts(), [])
@@ -82,6 +90,13 @@ export default function GerbilDetailPage() {
   const lookup = (map: Map<string, string>, key: string | null) => (key ? (map.get(key) ?? '—') : '—')
   const storedColorName = g.colorVarietyId ? (colorName.get(g.colorVarietyId) ?? null) : null
 
+  // Seed the Charakterbogen once from the loaded gerbil (adjust-state-during-render).
+  if (charInit !== g.id) {
+    setCharInit(g.id)
+    setCharTraits(g.characterTraits ?? [])
+    setCharNote(g.characterNote ?? '')
+  }
+
   return (
     <section className="page">
       <header className="page-head">
@@ -181,6 +196,28 @@ export default function GerbilDetailPage() {
         <p className="muted">{t.detail.genotypeNotSet}</p>
       )}
 
+      <h3>{de.character.sectionTitle}</h3>
+      <Charakterbogen
+        traits={charTraits}
+        note={charNote}
+        onTraitsChange={setCharTraits}
+        onNoteChange={setCharNote}
+      />
+      <div className="form-actions">
+        <button
+          type="button"
+          className="btn btn--primary"
+          disabled={saveCharacter.pending}
+          onClick={async () => {
+            const r = await saveCharacter.run()
+            if (r.ok) gerbil.reload()
+          }}
+        >
+          {saveCharacter.pending ? t.form.saving : de.character.save}
+        </button>
+        {saveCharacter.error && <span className="error-text">{saveCharacter.error}</span>}
+      </div>
+
       <h3 className="visually-hidden">{t.detail.moreData}</h3>
       <div className="tabs" role="tablist">
         {(['photos', 'health', 'weight'] as const).map((key) => (