feat: Uebertraege lassen sich endlich bedienen

Der Uebertrags-Dienst und seine fuenf Endpunkte gab es seit Wochen – ohne
einen einzigen Aufrufer in der Oberflaeche. Man konnte also nirgends sagen,
dass zwei Buchungen derselbe Uebertrag sind, und eine gefundene Verknuepfung
auch nicht wieder loesen.

Jetzt: eine Karte "Moegliche Uebertraege" im Eingang mit beiden Seiten
nebeneinander, Verbinden und Ignorieren; in der Buchungsliste eine Marke mit
dem Gegenkonto und ein Knopf zum Loesen. Das Gegenkonto kommt vom Server mit –
die andere Buchung steht oft gar nicht in der gefilterten Liste, und
"Uebertrag" ohne Angabe wohin sagt nichts.

Ausserdem wird nach dem Buchen aus dem Eingang nach Uebertraegen gesucht, so
wie bisher nur nach einem Import. Seit die Bankanbindung ihre Umsaetze in den
Eingang legt, entsteht die Gegenseite naemlich erst dort; ohne diesen Aufruf
wuerde sie nie gefunden. Ein Fehler dabei kippt das Buchen nicht.

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

web/src/pages/Eingang.jsx

@@ -6,6 +6,7 @@ import CategorySelect from "../components/CategorySelect";
 import Icon from "../components/Icon";
 import IconChip from "../components/IconChip";
 import Money from "../components/Money";
+import Uebertragsvorschlaege from "../components/Uebertragsvorschlaege";
 import { useToast } from "../toast";
 import { useConfirm } from "../confirm";
 import { useSettings } from "../settings";
@@ -102,6 +103,10 @@ export default function Eingang() {
         )}
       </div>
 
+      {/* Nach dem Buchen entsteht die Gegenseite eines Übertrags erst –
+          deshalb steht der Vorschlag hier und nicht in der Buchungsliste. */}
+      <Uebertragsvorschlaege baseCurrency={baseCurrency} onChange={laden} />
+
       {rows.length === 0 ? (
         <div className="card"><div className="empty-state">{t("inbox.empty")}</div></div>
       ) : (

web/src/pages/Transactions.jsx

@@ -41,6 +41,8 @@ export default function Transactions() {
   const toast = useToast();
 
   const [txns, setTxns] = useState([]);
+  // Je Buchungs-ID die Gegenseite, falls sie Teil eines Übertrags ist.
+  const [links, setLinks] = useState({});
   const [accounts, setAccounts] = useState([]);
   const [groups, setGroups] = useState([]);
   const [filter, setFilter] = useState({ account_id: "", type: "" });
@@ -66,7 +68,30 @@ export default function Transactions() {
   }
   async function ladenBuchungen() {
     try {
-      setTxns(await api.listTransactions({ account_id: filter.account_id, type: filter.type }));
+      // Verknüpfungen getrennt: Sie sind eine Schicht über den Buchungen,
+      // kein Feld an ihnen – deshalb auch ein eigener Abruf.
+      const [liste, verkn] = await Promise.all([
+        api.listTransactions({ account_id: filter.account_id, type: filter.type }),
+        api.transactionLinks().catch(() => ({})),
+      ]);
+      setTxns(liste);
+      setLinks(verkn);
+    } catch (err) {
+      toast(err.message, "error");
+    }
+  }
+
+  async function loesen(tx) {
+    const link = links[String(tx.id)];
+    if (!link) return;
+    if (!(await confirm({
+      title: t("transfers.release"),
+      message: t("transfers.releaseConfirm"),
+      confirmLabel: t("transfers.release"),
+    }))) return;
+    try {
+      await api.releaseTransfer(link.link_id);
+      ladenBuchungen();
     } catch (err) {
       toast(err.message, "error");
     }
@@ -218,6 +243,15 @@ export default function Transactions() {
             <div className="named-text">
               <div className="ellipsis">{l.title}</div>
               {l.sub && <div className="named-sub ellipsis">{l.sub}</div>}
+              {/* Verknüpft heisst: zählt nicht als Ausgabe oder Einnahme.
+                  Ohne das Gegenkonto sagt „Übertrag" nichts. */}
+              {links[String(tx.id)] && (
+                <div className="named-sub ellipsis uebertrag-marke">
+                  <Icon name="arrow-left-right" size={12} />{" "}
+                  {accountById[links[String(tx.id)].other_account_id]?.name
+                    || t("transfers.linked")}
+                </div>
+              )}
             </div>
           </div>
         );
@@ -247,6 +281,12 @@ export default function Transactions() {
           <button className="btn sm ghost" title={t("common.edit")} onClick={() => openEdit(tx)}>
             <Icon name="edit" size={14} />
           </button>
+          {links[String(tx.id)] && (
+            <button className="btn sm ghost" title={t("transfers.release")}
+                    onClick={() => loesen(tx)}>
+              <Icon name="arrow-left-right" size={14} />
+            </button>
+          )}
           <button className="btn sm danger" title={t("common.delete")} onClick={() => loeschen(tx)}>
             <Icon name="trash" size={14} />
           </button>
@@ -254,7 +294,7 @@ export default function Transactions() {
       ),
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  ], [accountById, categoryById, baseCurrency, formatDate, t]);
+  ], [accountById, categoryById, baseCurrency, formatDate, links, t]);
 
   return (
     <div>