fix(i18n): translate category names in tasks and budget displays

Category group headers in tasks and bar chart labels / transaction meta
in budget were showing raw German database keys instead of going through
CATEGORY_LABELS() i18n mapping.

Closes #11

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.7.6] - 2026-04-04
+
+### Fixed
+- Fix untranslated category names in tasks (group headers), budget (bar chart labels, transaction meta) - all displayed category strings now go through i18n mapping (#11)
+
 ## [0.7.5] - 2026-04-04
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oikos",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.",
   "main": "server/index.js",
   "type": "module",

public/pages/budget.js

@@ -254,7 +254,7 @@ function renderCategoryBars(byCategory) {
 
     return `
       <div class="budget-bar-row">
-        <div class="budget-bar-row__label" title="${esc(c.category)}">${esc(c.category)}</div>
+        <div class="budget-bar-row__label" title="${esc(CATEGORY_LABELS()[c.category] ?? c.category)}">${esc(CATEGORY_LABELS()[c.category] ?? c.category)}</div>
         <div class="budget-bar-row__track">
           <div class="budget-bar-row__fill ${cls}" style="width:${pct}%;"></div>
         </div>
@@ -291,7 +291,7 @@ function renderEntries() {
         <div class="budget-entry__indicator ${indClass}"></div>
         <div class="budget-entry__body">
           <div class="budget-entry__title">${esc(e.title)}</div>
-          <div class="budget-entry__meta">${date} · ${esc(e.category)}${recurTag}</div>
+          <div class="budget-entry__meta">${date} · ${esc(CATEGORY_LABELS()[e.category] ?? e.category)}${recurTag}</div>
         </div>
         <div class="budget-entry__amount ${amtClass}">${sign}${formatAmount(e.amount)}</div>
         <button class="budget-entry__delete" data-action="delete" data-id="${e.id}" aria-label="${t('budget.deleteLabel')}">

public/pages/tasks.js

@@ -226,10 +226,11 @@ function renderTaskGroups(tasks, groupMode) {
   }
 
   const groups = groupBy(tasks, groupMode);
+  const catLabelsMap = CATEGORY_LABELS();
   return groups.map(([name, groupTasks]) => `
     <div class="task-group">
       <div class="task-group__header">
-        <span class="task-group__title">${name}</span>
+        <span class="task-group__title">${catLabelsMap[name] ?? name}</span>
         <span class="task-group__count">${groupTasks.length}</span>
       </div>
       ${groupTasks.map((t) => renderSwipeRow(t, renderTaskCard(t))).join('')}