feat: Schlagwörter je Kategorie + auf-/zuklappbares Kategorie-Dropdown

- Manuelle Schlagwörter je Kategorie (Popup mit Chips, Doppelklick zum Bearbeiten)
- Treffer über Empfänger ODER Verwendungszweck; längstes Schlagwort gewinnt;
  Kind-Filter (Ausgabe/Einnahme); wirken nur bei künftigen Importen
- Lernende Korrektur-Erkennung: ab 5 Anwendungen und >= 1/3 Korrekturen
  erscheint eine Prüf-Meldung in den Einstellungen (Behalten/Entfernen)
- Neue CategorySelect-Komponente (Baum + Suche, per Portal) ersetzt die
  nativen optgroup-Selects in Buchungen und Import-Prüfansicht
- Migration 0006 (source/applied_count/overridden_count/confirmed, match_field any)
- Endpunkte, i18n DE/EN, Tests (test_keywords: 7 neu, gesamt 27 grün)

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

web/src/pages/Categories.jsx

@@ -8,12 +8,141 @@ import IconChip from "../components/IconChip";
 import Modal from "../components/Modal";
 import IconPicker, { CATEGORY_ICONS } from "../components/IconPicker";
 
+// Popup zum Pflegen der Schlagwörter einer Kategorie. Wörter werden beim Import
+// gegen Empfänger/Verwendungszweck geprüft und ordnen Buchungen automatisch zu.
+function KeywordModal({ category, onClose }) {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [words, setWords] = useState([]);
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [editId, setEditId] = useState(null);
+  const [editVal, setEditVal] = useState("");
+
+  async function laden() {
+    try { setWords(await api.listKeywords(category.id)); }
+    catch (err) { toast(err.message, "error"); }
+  }
+  useEffect(() => { laden(); }, [category.id]);
+
+  async function hinzufuegen() {
+    const w = input.trim();
+    if (!w) return;
+    setBusy(true);
+    try {
+      await api.addKeyword(category.id, w);
+      setInput("");
+      await laden();
+    } catch (err) {
+      toast(err.message, "error");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function entfernen(id) {
+    try {
+      await api.deleteKeyword(id);
+      setWords((ws) => ws.filter((x) => x.id !== id));
+    } catch (err) {
+      toast(err.message, "error");
+    }
+  }
+
+  function starteBearbeiten(w) {
+    setEditId(w.id);
+    setEditVal(w.word);
+  }
+  function abbrechenBearbeiten() {
+    setEditId(null);
+    setEditVal("");
+  }
+  async function speichernBearbeiten(id) {
+    const val = editVal.trim();
+    const orig = words.find((x) => x.id === id);
+    if (!val || (orig && val === orig.word)) { abbrechenBearbeiten(); return; }
+    try {
+      await api.updateKeyword(id, val);
+      abbrechenBearbeiten();
+      await laden();
+    } catch (err) {
+      toast(err.message, "error");
+      abbrechenBearbeiten();
+      await laden();
+    }
+  }
+
+  return (
+    <Modal
+      title={t("categories.keywordsTitle", { name: category.name })}
+      onClose={onClose}
+      footer={<button className="btn primary" onClick={onClose}>{t("common.close")}</button>}
+    >
+      <p className="muted small" style={{ marginTop: 0 }}>{t("categories.keywordsHint")}</p>
+      <div className="kw-add">
+        {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
+        <input
+          autoFocus
+          value={input}
+          placeholder={t("categories.keywordAdd")}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); hinzufuegen(); } }}
+        />
+        <button className="btn" onClick={hinzufuegen} disabled={busy || !input.trim()}>
+          <Icon name="plus" size={15} />
+        </button>
+      </div>
+      {words.length === 0 ? (
+        <div className="muted small">{t("categories.keywordEmpty")}</div>
+      ) : (
+        <>
+          <div className="kw-chips">
+            {words.map((w) =>
+              editId === w.id ? (
+                <span className="kw-chip editing" key={w.id}>
+                  {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
+                  <input
+                    autoFocus
+                    value={editVal}
+                    onFocus={(e) => e.target.select()}
+                    onChange={(e) => setEditVal(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") { e.preventDefault(); speichernBearbeiten(w.id); }
+                      else if (e.key === "Escape") { e.preventDefault(); abbrechenBearbeiten(); }
+                    }}
+                    onBlur={() => speichernBearbeiten(w.id)}
+                  />
+                </span>
+              ) : (
+                <span
+                  className="kw-chip"
+                  key={w.id}
+                  title={t("categories.keywordEditHint")}
+                  onDoubleClick={() => starteBearbeiten(w)}
+                >
+                  {w.word}
+                  <button type="button" title={t("common.delete")} onClick={() => entfernen(w.id)}>
+                    <Icon name="close" size={13} />
+                  </button>
+                </span>
+              )
+            )}
+          </div>
+          <p className="muted small" style={{ marginTop: "var(--sp-2)", marginBottom: 0 }}>
+            {t("categories.keywordEditHint")}
+          </p>
+        </>
+      )}
+    </Modal>
+  );
+}
+
 export default function Categories() {
   const { t } = useTranslation();
   const confirm = useConfirm();
   const toast = useToast();
   const [groups, setGroups] = useState([]);
   const [modal, setModal] = useState(null); // {type:'group'|'category', editing, groupId, form}
+  const [keywordCat, setKeywordCat] = useState(null); // Kategorie fürs Schlagwort-Popup
 
   async function laden() {
     try {
@@ -103,6 +232,9 @@ export default function Categories() {
               <div className="cat-row" key={c.id}>
                 <IconChip name={c.icon} color={c.color} size={28} />
                 <span className="grow">{c.name}</span>
+                <button className="btn sm ghost" title={t("categories.keywordsBtn")} onClick={() => setKeywordCat(c)}>
+                  <Icon name="tags" size={14} />
+                </button>
                 <button className="btn sm ghost" title={t("common.edit")} onClick={() => openCategory(g.id, c)}>
                   <Icon name="edit" size={14} />
                 </button>
@@ -164,6 +296,8 @@ export default function Categories() {
           </form>
         </Modal>
       )}
+
+      {keywordCat && <KeywordModal category={keywordCat} onClose={() => setKeywordCat(null)} />}
     </div>
   );
 }

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 CategorySelect from "../components/CategorySelect";
 import { formatMoney } from "../format";
 
 const DATE_FORMATS = [
@@ -421,14 +422,15 @@ export default function Import() {
                           {accounts.filter((a) => a.id !== Number(accountId)).map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
                         </select>
                       ) : (
-                        <select value={r.category_id || ""} onChange={(e) => updateRow(idx, { category_id: e.target.value ? Number(e.target.value) : null })} style={{ minWidth: 150 }}>
-                          <option value="">{t("transactions.uncategorized")}</option>
-                          {(r.type === "income" ? incomeGroups : expenseGroups).map((g) => (
-                            <optgroup key={g.id} label={g.name}>
-                              {g.categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
-                            </optgroup>
-                          ))}
-                        </select>
+                        <CategorySelect
+                          groups={r.type === "income" ? incomeGroups : expenseGroups}
+                          value={r.category_id || ""}
+                          onChange={(id) => updateRow(idx, { category_id: id != null ? Number(id) : null })}
+                          allowNone
+                          noneLabel={t("transactions.uncategorized")}
+                          placeholder={t("transactions.uncategorized")}
+                          minWidth={180}
+                        />
                       )}
                     </td>
                   </tr>

web/src/pages/Settings.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSettings } from "../settings";
 import { useAuth } from "../auth";
@@ -10,6 +11,22 @@ export default function Settings() {
   const s = useSettings();
   const { isAdmin } = useAuth();
   const toast = useToast();
+  const [flagged, setFlagged] = useState([]);
+
+  async function ladenFlagged() {
+    try { setFlagged(await api.flaggedKeywords()); }
+    catch { /* still ignorieren – nicht kritisch für die Einstellungen */ }
+  }
+  useEffect(() => { ladenFlagged(); }, []);
+
+  async function keywordBehalten(id) {
+    try { await api.confirmKeyword(id); setFlagged((f) => f.filter((x) => x.id !== id)); }
+    catch (err) { toast(err.message, "error"); }
+  }
+  async function keywordEntfernen(id) {
+    try { await api.deleteKeyword(id); setFlagged((f) => f.filter((x) => x.id !== id)); }
+    catch (err) { toast(err.message, "error"); }
+  }
 
   async function set(key, value) {
     try {
@@ -32,6 +49,30 @@ export default function Settings() {
     <div>
       <h1>{t("settings.title")}</h1>
 
+      {flagged.length > 0 && (
+        <div className="card" style={{ maxWidth: 520, marginBottom: "var(--sp-4)", borderColor: "var(--danger)" }}>
+          <h2 style={{ display: "flex", alignItems: "center", gap: "var(--sp-2)", marginTop: 0 }}>
+            <Icon name="alert" size={18} /> {t("settings.keywordReview")}
+          </h2>
+          <p className="muted small">{t("settings.keywordReviewHint")}</p>
+          {flagged.map((f) => (
+            <div className="kw-flag" key={f.id}>
+              <div className="kw-flag-main">
+                <div className="ellipsis">
+                  <span className="kw-flag-word">{f.word}</span>
+                  <Icon name="chevron-right" size={12} /> {f.category_name}
+                </div>
+                <div className="muted small">
+                  {t("settings.keywordCorrected", { overridden: f.overridden_count, applied: f.applied_count })}
+                </div>
+              </div>
+              <button className="btn sm" onClick={() => keywordBehalten(f.id)}>{t("settings.keep")}</button>
+              <button className="btn sm danger" onClick={() => keywordEntfernen(f.id)}>{t("settings.remove")}</button>
+            </div>
+          ))}
+        </div>
+      )}
+
       <div className="card" style={{ maxWidth: 520 }}>
         <label>
           <span>{t("settings.baseCurrency")}</span>

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 CategorySelect from "../components/CategorySelect";
 import { centsToInput, parseAmountToCents, todayIso } from "../format";
 
 const TYPES = ["expense", "income", "transfer"];
@@ -321,14 +322,14 @@ export default function Transactions() {
             ) : (
               <label>
                 <span>{t("transactions.category")}</span>
-                <select value={form.category_id} onChange={(e) => setForm({ ...form, category_id: e.target.value })}>
-                  <option value="">{t("transactions.uncategorized")}</option>
-                  {catOptions.map((g) => (
-                    <optgroup key={g.id} label={g.name}>
-                      {g.categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
-                    </optgroup>
-                  ))}
-                </select>
+                <CategorySelect
+                  groups={catOptions}
+                  value={form.category_id}
+                  onChange={(id) => setForm({ ...form, category_id: id != null ? String(id) : "" })}
+                  allowNone
+                  noneLabel={t("transactions.uncategorized")}
+                  placeholder={t("transactions.uncategorized")}
+                />
               </label>
             )}
 
@@ -357,13 +358,12 @@ export default function Transactions() {
                 {form.budget_as_expense && (
                   <label>
                     <span>{t("transactions.budgetCategory")}</span>
-                    <select value={form.budget_category_id} onChange={(e) => setForm({ ...form, budget_category_id: e.target.value })}>
-                      {expenseGroups.map((g) => (
-                        <optgroup key={g.id} label={g.name}>
-                          {g.categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
-                        </optgroup>
-                      ))}
-                    </select>
+                    <CategorySelect
+                      groups={expenseGroups}
+                      value={form.budget_category_id}
+                      onChange={(id) => setForm({ ...form, budget_category_id: id != null ? String(id) : "" })}
+                      placeholder={t("transactions.budgetCategory")}
+                    />
                   </label>
                 )}
               </div>