Scarriffle/certain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Kategorien-Seite als durchgehende Liste statt abgesetzter Gruppen-Karten

Browse Source 
Gruppen erscheinen nur noch als dezente Zwischenüberschrift; die Kategorien
laufen als schlichte Zeilen mit dünnem Trenner durch (eine Karte).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Guido
2026-08-19 21:40:32 +02:00
co-authored by Claude Opus 4.8
parent 37f64999cd
commit a3ab03aeec
2 changed files with 48 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/Categories.jsx
+26 -23
View File
@@ -209,28 +209,28 @@ export default function Categories() {
</button>
</div>
{groups.map((g) => (
<div className="card cat-group" key={g.id}>
<div className="cat-group-head">
<IconChip name={g.icon} color={g.color} />
<h2 className="grow">{g.name}</h2>
<span className={`badge ${g.kind === "income" ? "ok" : ""}`}>
{g.kind === "income" ? t("categories.income") : t("categories.expense")}
</span>
<button className="btn sm ghost" title={t("categories.newCategory")} onClick={() => openCategory(g.id)}>
<Icon name="plus" size={15} />
</button>
<button className="btn sm ghost" title={t("common.edit")} onClick={() => openGroup(g)}>
<Icon name="edit" size={15} />
</button>
<button className="btn sm danger" title={t("common.delete")} onClick={() => loeschenGruppe(g)}>
<Icon name="trash" size={15} />
</button>
</div>
<div className="cat-list">
<div className="card">
{groups.map((g) => (
<div className="cat-section" key={g.id}>
<div className="cat-section-head">
<IconChip name={g.icon} color={g.color} size={24} />
<span className="cat-section-name">{g.name}</span>
<span className={`badge ${g.kind === "income" ? "ok" : ""}`}>
{g.kind === "income" ? t("categories.income") : t("categories.expense")}
</span>
<button className="btn sm ghost" title={t("categories.newCategory")} onClick={() => openCategory(g.id)}>
<Icon name="plus" size={15} />
</button>
<button className="btn sm ghost" title={t("common.edit")} onClick={() => openGroup(g)}>
<Icon name="edit" size={15} />
</button>
<button className="btn sm danger" title={t("common.delete")} onClick={() => loeschenGruppe(g)}>
<Icon name="trash" size={15} />
</button>
</div>
{g.categories.map((c) => (
<div className="cat-row" key={c.id}>
<IconChip name={c.icon} color={c.color} size={28} />
<IconChip name={c.icon} color={c.color} size={26} />
<span className="grow">{c.name}</span>
<button className="btn sm ghost" title={t("categories.keywordsBtn")} onClick={() => setKeywordCat(c)}>
<Icon name="tags" size={14} />
@@ -243,10 +243,13 @@ export default function Categories() {
</button>
</div>
))}
{g.categories.length === 0 && <div className="muted small">{t("categories.emptyGroup")}</div>}
{g.categories.length === 0 && (
<div className="muted small" style={{ padding: "var(--sp-2) 4px" }}>{t("categories.emptyGroup")}</div>
)}
</div>
</div>
))}
))}
{groups.length === 0 && <div className="empty-state">{t("categories.emptyGroup")}</div>}
</div>
{modal && (
<Modal