From 78835d1e4012df2a729914e9bfba77bb89bfd29d Mon Sep 17 00:00:00 2001
From: Guido <guido.schmit03@gmail.com>
Date: Fri, 21 Aug 2026 20:42:14 +0200
Subject: [PATCH] feat: Konto-Auswahl mit Symbol und Farbe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Das native <select> zeigte nur den Namen im Systemstil. Bei einem Dutzend
Konten erkennt man seines am Symbol deutlich schneller – und beim Import
sieht man sofort, ob man in das gemeinte Konto liest.

Neue Komponente AccountSelect nach dem Muster von CategorySelect, mit
denselben Klassen und per Portal gerendert. Eingesetzt beim Import, in
Filter und Formular der Buchungen sowie beim Zielkonto eines Uebertrags.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/components/AccountSelect.jsx | 133 +++++++++++++++++++++++++++
 web/src/pages/Import.jsx             |   6 +-
 web/src/pages/Transactions.jsx       |  26 +++---
 3 files changed, 148 insertions(+), 17 deletions(-)
 create mode 100644 web/src/components/AccountSelect.jsx

diff --git a/web/src/components/AccountSelect.jsx b/web/src/components/AccountSelect.jsx
new file mode 100644
index 0000000..61c0d7a
--- /dev/null
+++ b/web/src/components/AccountSelect.jsx
@@ -0,0 +1,133 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+
+import Icon from "./Icon";
+import IconChip from "./IconChip";
+
+// Konto-Auswahl mit Symbol und Kontofarbe. Das native <select> zeigte nur den
+// Namen im Systemstil; bei einem Dutzend Konten erkennt man seines am Symbol
+// deutlich schneller. Nutzt dieselben Klassen wie CategorySelect und wird per
+// Portal gerendert, damit es in Tabellen nicht abgeschnitten wird.
+export default function AccountSelect({
+  accounts = [],
+  value,
+  onChange,
+  allowNone = false,
+  noneLabel = "—",
+  placeholder = "—",
+  showCurrency = true,
+  minWidth = 0,
+  disabled = false,
+}) {
+  const { t } = useTranslation();
+  const selectedId = value === "" || value == null ? null : Number(value);
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState(null);
+  const btnRef = useRef(null);
+  const panelRef = useRef(null);
+
+  const sel = accounts.find((a) => a.id === selectedId) || null;
+
+  function computePos() {
+    const el = btnRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const width = Math.max(r.width, 240);
+    const spaceBelow = window.innerHeight - r.bottom;
+    const spaceAbove = r.top;
+    const desired = 320;
+    let top;
+    let maxHeight;
+    if (spaceBelow >= 200 || spaceBelow >= spaceAbove) {
+      maxHeight = Math.min(desired, spaceBelow - 10);
+      top = r.bottom + 4;
+    } else {
+      maxHeight = Math.min(desired, spaceAbove - 10);
+      top = r.top - 4 - maxHeight;
+    }
+    let left = r.left;
+    if (left + width > window.innerWidth - 8) left = window.innerWidth - 8 - width;
+    if (left < 8) left = 8;
+    setPos({ left, top, width, maxHeight });
+  }
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDown = (e) => {
+      if (panelRef.current?.contains(e.target) || btnRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    // Scrollen IN der Liste darf sie nicht schliessen – nur Scrollen daneben.
+    const onScrollResize = (e) => {
+      if (e?.target && panelRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScrollResize, true);
+    window.addEventListener("resize", onScrollResize);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScrollResize, true);
+      window.removeEventListener("resize", onScrollResize);
+    };
+  }, [open]);
+
+  function choose(id) {
+    onChange(id);
+    setOpen(false);
+  }
+
+  const zeile = (a) => (
+    <span className="catsel-value">
+      <IconChip name={a.icon} color={a.color} size={22} />
+      <span className="ellipsis">{a.name}{showCurrency ? ` (${a.currency})` : ""}</span>
+    </span>
+  );
+
+  return (
+    <div className="catsel" style={{ minWidth }}>
+      <button
+        type="button"
+        ref={btnRef}
+        className={`catsel-btn${open ? " open" : ""}`}
+        onClick={() => (open ? setOpen(false) : (computePos(), setOpen(true)))}
+        disabled={disabled}
+      >
+        {sel ? zeile(sel) : <span className="catsel-value muted ellipsis">{placeholder}</span>}
+        <Icon name="chevron-down" size={15} className="catsel-caret" />
+      </button>
+
+      {open && pos && createPortal(
+        <div ref={panelRef} className="catsel-panel"
+             style={{ left: pos.left, top: pos.top, width: pos.width, maxHeight: pos.maxHeight }}>
+          <div className="catsel-list">
+            {allowNone && (
+              <button type="button"
+                      className={`catsel-opt${selectedId == null ? " selected" : ""}`}
+                      onClick={() => choose(null)}>
+                <span className="muted ellipsis">{noneLabel}</span>
+                {selectedId == null && <Icon name="check" size={15} className="catsel-check" />}
+              </button>
+            )}
+            {accounts.map((a) => (
+              <button type="button" key={a.id}
+                      className={`catsel-opt${a.id === selectedId ? " selected" : ""}`}
+                      onClick={() => choose(a.id)}>
+                {zeile(a)}
+                {a.id === selectedId && <Icon name="check" size={15} className="catsel-check" />}
+              </button>
+            ))}
+            {accounts.length === 0 && (
+              <div className="catsel-empty muted">{t("accounts.empty")}</div>
+            )}
+          </div>
+        </div>,
+        document.body,
+      )}
+    </div>
+  );
+}
diff --git a/web/src/pages/Import.jsx b/web/src/pages/Import.jsx
index 2cdf8be..a822382 100644
--- a/web/src/pages/Import.jsx
+++ b/web/src/pages/Import.jsx
@@ -5,6 +5,7 @@ import { useSettings } from "../settings";
 import { useConfirm } from "../confirm";
 import { useToast } from "../toast";
 import Icon from "../components/Icon";
+import AccountSelect from "../components/AccountSelect";
 import CategorySelect from "../components/CategorySelect";
 import DataTable from "../components/DataTable";
 import { gruppenFuer } from "../kategorien";
@@ -387,9 +388,8 @@ export default function Import() {
         <div className="row">
           <label className="grow">
             <span>{t("import.account")}</span>
-            <select value={accountId} onChange={(e) => setAccountId(e.target.value)}>
-              {accounts.map((a) => <option key={a.id} value={a.id}>{a.name} ({a.currency})</option>)}
-            </select>
+            <AccountSelect accounts={accounts} value={accountId}
+                           onChange={(id) => setAccountId(id != null ? String(id) : "")} />
           </label>
           <label className="grow">
             <span>{t("import.file")}</span>
diff --git a/web/src/pages/Transactions.jsx b/web/src/pages/Transactions.jsx
index 31de8e5..b1d4570 100644
--- a/web/src/pages/Transactions.jsx
+++ b/web/src/pages/Transactions.jsx
@@ -8,6 +8,7 @@ import Icon from "../components/Icon";
 import IconChip from "../components/IconChip";
 import Money from "../components/Money";
 import Modal from "../components/Modal";
+import AccountSelect from "../components/AccountSelect";
 import CategorySelect from "../components/CategorySelect";
 import DataTable from "../components/DataTable";
 import { gruppenFuer } from "../kategorien";
@@ -269,10 +270,11 @@ export default function Transactions() {
       ) : (
         <>
           <div className="card filter-bar">
-            <select value={filter.account_id} onChange={(e) => setFilter({ ...filter, account_id: e.target.value })}>
-              <option value="">{t("transactions.allAccounts")}</option>
-              {accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
-            </select>
+            <AccountSelect accounts={accounts} value={filter.account_id} allowNone
+                           noneLabel={t("transactions.allAccounts")}
+                           placeholder={t("transactions.allAccounts")} showCurrency={false}
+                           minWidth={190}
+                           onChange={(id) => setFilter({ ...filter, account_id: id != null ? String(id) : "" })} />
             <select value={filter.type} onChange={(e) => setFilter({ ...filter, type: e.target.value })}>
               <option value="">{t("transactions.allTypes")}</option>
               <option value="expense">{t("transactions.expense")}</option>
@@ -318,10 +320,8 @@ export default function Transactions() {
             <div className="row">
               <label className="grow">
                 <span>{form.type === "transfer" ? t("transactions.fromAccount") : t("transactions.account")}</span>
-                <select value={form.account_id} onChange={(e) => setForm({ ...form, account_id: e.target.value })} required>
-                  <option value="" disabled>—</option>
-                  {accounts.map((a) => <option key={a.id} value={a.id}>{a.name} ({a.currency})</option>)}
-                </select>
+                <AccountSelect accounts={accounts} value={form.account_id}
+                               onChange={(id) => setForm({ ...form, account_id: id != null ? String(id) : "" })} />
               </label>
               <label style={{ minWidth: 150 }}>
                 <span>{t("transactions.date")}</span>
@@ -332,12 +332,10 @@ export default function Transactions() {
             {form.type === "transfer" ? (
               <label>
                 <span>{t("transactions.toAccount")}</span>
-                <select value={form.to_account_id} onChange={(e) => setForm({ ...form, to_account_id: e.target.value })} required>
-                  <option value="" disabled>—</option>
-                  {accounts.filter((a) => String(a.id) !== form.account_id).map((a) => (
-                    <option key={a.id} value={a.id}>{a.name} ({a.currency})</option>
-                  ))}
-                </select>
+                <AccountSelect
+                  accounts={accounts.filter((a) => String(a.id) !== form.account_id)}
+                  value={form.to_account_id}
+                  onChange={(id) => setForm({ ...form, to_account_id: id != null ? String(id) : "" })} />
               </label>
             ) : (
               <label>