feat: Absender-Zuordnungen bearbeiten und loeschen

Der Loesch-Endpunkt war da, aber ohne Knopf in der Oberflaeche, und
Bearbeiten fehlte ganz – eine falsch eingetippte Zuordnung liess sich also
nicht mehr korrigieren.

Jede Zuordnung ist jetzt eine eigene Zeile mit Erkennungstext und Konto;
der Speichern-Knopf erscheint erst bei einer Aenderung. Dazu ein PUT auf
/mail/senders/{id} im Backend.

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

web/src/api.js

@@ -182,6 +182,7 @@ export const api = {
   fetchMailSource: (id) => request(`/mail/sources/${id}/fetch`, { method: "POST" }),
   listMailSenders: (id) => request(`/mail/sources/${id}/senders`),
   createMailSender: (id, body) => request(`/mail/sources/${id}/senders`, { method: "POST", body }),
+  updateMailSender: (id, body) => request(`/mail/senders/${id}`, { method: "PUT", body }),
   deleteMailSender: (id) => request(`/mail/senders/${id}`, { method: "DELETE" }),
 
   // Kategorien (Gruppen + Kategorien)

web/src/locales/de.json

@@ -533,6 +533,8 @@
     "skippedTitle": "Diese Mails wurden übergangen",
     "skippedHint": "Für sie passt keine Absender-Zuordnung. Trag einen Teil der Adresse oder des Betreffs unten ein, dann werden sie beim nächsten Abruf übernommen.",
     "fetchedNone": "Keine Mails im gewählten Ordner gefunden. Stimmt der Ordner? Beim ersten Abruf werden die letzten 14 Tage durchsucht.",
-    "senderHint": "Gesucht wird in Absender, Betreff und im Anfang des Textes. Damit greift es auch bei weitergeleiteten Mails, wo im Absender deine eigene Adresse steht."
+    "senderHint": "Gesucht wird in Absender, Betreff und im Anfang des Textes. Damit greift es auch bei weitergeleiteten Mails, wo im Absender deine eigene Adresse steht.",
+    "deleteSender": "Zuordnung entfernen",
+    "deleteSenderConfirm": "Zuordnung „{{text}}“ entfernen? Bereits erfasste Zahlungen bleiben."
   }
 }

web/src/locales/en.json

@@ -533,6 +533,8 @@
     "skippedTitle": "These emails were skipped",
     "skippedHint": "No sender mapping matched them. Enter part of the address or the subject below and they will be picked up on the next fetch.",
     "fetchedNone": "No emails found in the selected folder. Is the folder right? The first fetch looks at the last 14 days.",
-    "senderHint": "Searched in sender, subject and the start of the body. That way it also works for forwarded emails, where the sender is your own address."
+    "senderHint": "Searched in sender, subject and the start of the body. That way it also works for forwarded emails, where the sender is your own address.",
+    "deleteSender": "Remove mapping",
+    "deleteSenderConfirm": "Remove mapping “{{text}}”? Payments already captured stay."
   }
 }

web/src/pages/settings/Postfaecher.jsx

@@ -108,6 +108,19 @@ export default function Postfaecher() {
     try { await api.deleteMailSource(quelle.id); laden(); } catch (e) { toast(e.message, "error"); }
   }
 
+  async function absenderAendern(a, daten) {
+    try { await api.updateMailSender(a.id, daten); laden(); } catch (e) { toast(e.message, "error"); }
+  }
+
+  async function absenderLoeschen(a) {
+    if (!(await confirm({
+      title: t("mailbox.deleteSender"),
+      message: t("mailbox.deleteSenderConfirm", { text: a.from_contains || "*" }),
+      danger: true, confirmLabel: t("common.delete"),
+    }))) return;
+    try { await api.deleteMailSender(a.id); laden(); } catch (e) { toast(e.message, "error"); }
+  }
+
   async function absenderAnlegen(quelle, daten) {
     try {
       await api.createMailSender(quelle.id, daten);
@@ -132,13 +145,16 @@ export default function Postfaecher() {
               ? `${t("mailbox.lastError")}: ${q.last_error}`
               : q.last_poll_at ? t("mailbox.lastPoll") : t("mailbox.neverPolled")}
           </div>
-          <div className="muted small" style={{ marginTop: "var(--sp-2)" }}>
-            {(absender[q.id] || []).length === 0
-              ? t("mailbox.noSenders")
-              : (absender[q.id] || []).map((a) => {
-                  const konto = konten.find((k) => k.id === a.account_id);
-                  return `${a.from_contains || "*"} → ${konto ? konto.name : t("mailbox.noAccount")}`;
-                }).join(" · ")}
+          <div style={{ marginTop: "var(--sp-2)" }}>
+            {(absender[q.id] || []).length === 0 ? (
+              <p className="muted small">{t("mailbox.noSenders")}</p>
+            ) : (
+              (absender[q.id] || []).map((a) => (
+                <SenderRow key={a.id} absender={a} konten={konten} t={t}
+                           onSave={(d) => absenderAendern(a, d)}
+                           onDelete={() => absenderLoeschen(a)} />
+              ))
+            )}
           </div>
           <SenderForm konten={konten} onAdd={(d) => absenderAnlegen(q, d)} t={t} />
           {uebergangen.length > 0 && (
@@ -256,6 +272,38 @@ export default function Postfaecher() {
   );
 }
 
+/** Eine bestehende Zuordnung: Text und Konto änderbar, dazu löschbar. */
+function SenderRow({ absender, konten, t, onSave, onDelete }) {
+  const [text, setText] = useState(absender.from_contains || "");
+  const [konto, setKonto] = useState(absender.account_id ? String(absender.account_id) : "");
+  const geaendert =
+    text !== (absender.from_contains || "") ||
+    konto !== (absender.account_id ? String(absender.account_id) : "");
+
+  return (
+    <div className="sender-row">
+      <input value={text} onChange={(e) => setText(e.target.value)}
+             placeholder={t("mailbox.fromPlaceholder")} />
+      <select value={konto} onChange={(e) => setKonto(e.target.value)}>
+        <option value="">{t("mailbox.noAccount")}</option>
+        {konten.map((k) => <option key={k.id} value={k.id}>{k.name}</option>)}
+      </select>
+      <div className="mail-actions" style={{ marginTop: 4 }}>
+        {geaendert && (
+          <button type="button" className="btn sm primary"
+                  onClick={() => onSave({ from_contains: text.trim() || null,
+                                          account_id: konto ? Number(konto) : null })}>
+            {t("common.save")}
+          </button>
+        )}
+        <button type="button" className="btn sm danger" onClick={onDelete}>
+          <Icon name="trash" size={14} /> {t("common.delete")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 /** Absender einem Konto zuordnen – ohne das weiss Certain nicht, wohin gebucht wird. */
 function SenderForm({ konten, onAdd, t }) {
   const [von, setVon] = useState("");

web/src/styles.css

@@ -1155,3 +1155,9 @@ tr.row-active { background: var(--surface-2); }
    (.btn-pair gibt seinen Knoepfen flex:1 – dort wird ein umgebrochener
    Papierkorb zum roten Balken). */
 .mail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
+
+/* Zuordnung Erkennungstext -> Konto. Gestapelt, weil die Einstellungs-
+   spalte schmal ist; nebeneinander bricht der Text auf ein Wort je Zeile. */
+.sender-row { padding: var(--sp-2) 0; border-top: 1px dashed var(--border); }
+.sender-row input, .sender-row select { width: 100%; }
+.sender-row select { margin-top: 4px; }