From 79e4ebb06bdfeb2b615abb062eea2311b2f5a70c Mon Sep 17 00:00:00 2001 From: ZProger Date: Mon, 24 Aug 2026 23:56:54 +0300 Subject: [PATCH] fix: sort category lists alphabetically on the Categories page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Expense/income lists were rendered in server sort_order (chart palette slot order), which looks arbitrary for browsing/managing categories. Sorts by translated name instead, locale-aware — same approach BudgetFormModal's category picker already uses. Display-only; sort_order itself is untouched since the dashboard donut chart still relies on it. Co-Authored-By: Claude Sonnet 5 --- frontend/package.json | 2 +- frontend/src/pages/CategoriesPage.tsx | 15 ++++++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 5bac112..3134725 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "aurum-frontend", "private": true, - "version": "0.23.1", + "version": "0.23.2", "type": "module", "scripts": { "dev": "vite", diff --git a/frontend/src/pages/CategoriesPage.tsx b/frontend/src/pages/CategoriesPage.tsx index cb519ba..98736bf 100644 --- a/frontend/src/pages/CategoriesPage.tsx +++ b/frontend/src/pages/CategoriesPage.tsx @@ -5,11 +5,20 @@ import { Button } from "@/components/ui/Button"; import { CategoryFormModal } from "@/components/categories/CategoryFormModal"; import { CategoryList } from "@/components/categories/CategoryList"; import { useCategories, useDeleteCategory } from "@/hooks/useCategories"; +import { translateCategoryName } from "@/lib/categoryLabels"; import { useTranslation } from "@/lib/i18n"; import type { Category, CategoryKind } from "@/types"; +// Alphabetical by displayed (translated) name — same locale-aware sort +// BudgetFormModal's category picker uses, so a default category shown as +// its localized name sorts by that, not its raw stored English name. +function byName(language: string) { + return (a: Category, b: Category) => + translateCategoryName(a.name).localeCompare(translateCategoryName(b.name), language); +} + export function CategoriesPage() { - const { t } = useTranslation(); + const { t, language } = useTranslation(); const { data: categories, isLoading } = useCategories(); const deleteCategory = useDeleteCategory(); @@ -38,8 +47,8 @@ export function CategoriesPage() { } } - const expenseCategories = (categories ?? []).filter((category) => category.kind === "expense"); - const incomeCategories = (categories ?? []).filter((category) => category.kind === "income"); + const expenseCategories = (categories ?? []).filter((category) => category.kind === "expense").sort(byName(language)); + const incomeCategories = (categories ?? []).filter((category) => category.kind === "income").sort(byName(language)); return (