feat: Die Notiz laesst sich direkt in der Liste schreiben

Bisher musste man dafuer die ganze Buchung aufmachen. Jetzt steht in der
Notiz-Spalte ein Feld: hineinschreiben, Enter oder wegklicken - fertig.
Escape nimmt die Aenderung zurueck, leeren loescht die Notiz.

Und sie steht nicht mehr doppelt da. Die dritte Zeile unter der Buchung
zeigte dieselbe Notiz wie die neue Spalte; sie faellt weg, der
Verwendungszweck darueber bleibt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/pages/Transactions.jsx

@@ -6,6 +6,7 @@ import { useConfirm } from "../confirm";
 import { useToast } from "../toast";
 import Icon from "../components/Icon";
 import IconChip from "../components/IconChip";
+import EditableText from "../components/EditableText";
 import Money from "../components/Money";
 import TagSelect from "../components/TagSelect";
 import Modal from "../components/Modal";
@@ -134,6 +135,15 @@ export default function Transactions() {
     }
   }
 
+  async function notizSetzen(tx, text) {
+    try {
+      const neu = await api.updateTransaction(tx.id, { notes: text || null });
+      setTxns((r) => r.map((x) => (x.id === tx.id ? neu : x)));
+    } catch (err) {
+      toast(err.message, "error");
+    }
+  }
+
   // Je Zeile eine Warteschlange. Die Auswahl bleibt nach einem Klick offen –
   // man vergibt selten genau einen Tag –, also kommen zwei Klicks schnell
   // hintereinander. Ohne die Reihung ueberholten sich die beiden Anfragen, und
@@ -468,14 +478,6 @@ export default function Transactions() {
                 )}
               </div>
               {l.sub && <div className="named-sub ellipsis">{l.sub}</div>}
-              {/* Von Hand geschrieben und deshalb aussagekraeftiger als jeder
-                  Banktext: „Amazon" kann Einrichtung sein, Werkzeug oder ein
-                  Geschenk. */}
-              {tx.notes && (
-                <div className="named-sub ellipsis buchungsnotiz" title={tx.notes}>
-                  <Icon name="edit" size={11} /> {tx.notes}
-                </div>
-              )}
               {/* Die fruehere Marke mit dem Gegenkonto ist entfallen: Das
                   Gegenkonto steht jetzt im Titel, wo man es sucht. */}
               {/* Nachträglich erkannt: Auf einem anderen Konto steht der
@@ -509,10 +511,13 @@ export default function Transactions() {
       // will sie aber spaeter sehen, ohne jede Zeile aufzuklappen.
       key: "notes", header: t("transactions.notes"), width: 180,
       filterText: (tx) => tx.notes || "",
-      render: (tx) => (tx.notes
-        // Ganzer Text im Tooltip: Die Spalte ist schmal, die Notiz darf lang sein.
-        ? <span className="ellipsis" title={tx.notes}>{tx.notes}</span>
-        : <span className="muted">—</span>),
+      render: (tx) => (
+        <EditableText
+          value={tx.notes}
+          placeholder={t("transactions.notesCell")}
+          onSave={(text) => notizSetzen(tx, text)}
+        />
+      ),
     },
     {
       // Eigene Spalte, damit die Auswahl in der Zeile steht und nicht unter dem