feat: implement localStorage persistence for user preferences in categories, statistics, transactions, and sidebar components; enhance UI with collapsible elements and improved layout

This commit is contained in:
Julien Froidefond
2025-12-21 08:24:04 +01:00
parent b3e99a15d2
commit c358845033
6 changed files with 135 additions and 22 deletions

View File

@@ -29,6 +29,7 @@ import {
} from "@/lib/store-db";
import type { Category, Transaction } from "@/lib/types";
import { invalidateAllCategoryQueries } from "@/lib/cache-utils";
import { useLocalStorage } from "@/hooks/use-local-storage";
interface RecategorizationResult {
transaction: Transaction;
@@ -58,6 +59,12 @@ export default function CategoriesPage() {
const [isRecatDialogOpen, setIsRecatDialogOpen] = useState(false);
const [isRecategorizing, setIsRecategorizing] = useState(false);
// Persister l'état "tout déplier" dans le localStorage
const [expandAllByDefault, setExpandAllByDefault] = useLocalStorage(
"categories-expand-all-by-default",
true
);
// Organiser les catégories par parent
const { parentCategories, childrenByParent, orphanCategories } =
useMemo(() => {
@@ -97,13 +104,17 @@ export default function CategoriesPage() {
};
}, [metadata?.categories]);
// Initialiser tous les parents comme ouverts
// Initialiser tous les parents selon la préférence sauvegardée
useEffect(() => {
if (parentCategories.length > 0 && expandedParents.size === 0) {
setExpandedParents(new Set(parentCategories.map((p: Category) => p.id)));
if (expandAllByDefault) {
setExpandedParents(new Set(parentCategories.map((p: Category) => p.id)));
} else {
setExpandedParents(new Set());
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [parentCategories.length]);
}, [parentCategories.length, expandAllByDefault]);
const refresh = useCallback(() => {
invalidateAllCategoryQueries(queryClient);
@@ -162,10 +173,12 @@ export default function CategoriesPage() {
const expandAll = () => {
setExpandedParents(new Set(parentCategories.map((p: Category) => p.id)));
setExpandAllByDefault(true);
};
const collapseAll = () => {
setExpandedParents(new Set());
setExpandAllByDefault(false);
};
const allExpanded =