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>
   );
 }