refactor: simplify frontend state and mutation boundaries

src/entities/bank-card/ui/BankCardForm/BankCardForm.vm.ts

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { useBankMutations } from "../../api/mutations";
+import { useCreateBankCard, useUpdateBankCard } from "../../api/mutations";
 import { type BankCard, useBankCard } from "../../api/queries";
 import { bankMoneyValue, bankToday } from "../../model/form-validation";
 import { bankCardSchema, type BankCardValues } from "../../model/form.schema";
@@ -20,7 +20,8 @@ function useBankCardFormVm(props: BankCardFormProps) {
 	const [error, setError] = useState<unknown>();
 	const [latest, setLatest] = useState<BankCard>();
 	const fresh = useBankCard(props.card?.id);
-	const mutation = useBankMutations();
+	const cardCreation = useCreateBankCard();
+	const updateCard = useUpdateBankCard();
 
 	const methods = useForm<BankCardValues>({
 		defaultValues: {
@@ -68,7 +69,7 @@ function useBankCardFormVm(props: BankCardFormProps) {
 			};
 
 			if (props.card)
-				await mutation.updateCard.mutateAsync({
+				await updateCard.mutateAsync({
 					body: {
 						...metadata,
 						...(!props.card.archivedAt && financial),
@@ -77,7 +78,7 @@ function useBankCardFormVm(props: BankCardFormProps) {
 					id: props.card.id,
 				});
 			else
-				await mutation.createCard.mutateAsync({
+				await cardCreation.mutateAsync({
 					id: intent,
 					...metadata,
 					...financial,

src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.test.tsx

@@ -1,92 +0,0 @@
-import { render } from "@testing-library/react";
-import { OperationIcon } from "@wealthledger/icons";
-import { expect, it } from "vitest";
-
-import { bankOperationAppearance } from "../../model/operation-appearance";
-
-const BankOperationIcon = (props: {
-	categoryName?: null | string;
-	kind: "expense" | "refund" | "topup" | "transfer";
-}) => (
-	<OperationIcon
-		{...bankOperationAppearance(props.kind, props.categoryName)}
-	/>
-);
-
-it("matches normalized category names, falls back after renaming and distinguishes operation kinds", () => {
-	const { container, rerender } = render(
-		<BankOperationIcon categoryName="Жильё" kind="expense" />,
-	);
-
-	// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
-	const path = () => container.querySelector("path")?.getAttribute("d");
-	const housing = path();
-	rerender(<BankOperationIcon categoryName="  ЖИЛЬЕ  " kind="expense" />);
-	expect(path()).toBe(housing);
-	rerender(<BankOperationIcon categoryName="Другое" kind="expense" />);
-	const fallback = path();
-	expect(fallback).not.toBe(housing);
-
-	for (const categoryName of [
-		"Моя категория",
-		"constructor",
-		null,
-	]) {
-		rerender(<BankOperationIcon categoryName={categoryName} kind="expense" />);
-		expect(path()).toBe(fallback);
-	}
-
-	const paths = [fallback, housing];
-
-	for (const kind of ["topup", "transfer", "refund"] as const) {
-		rerender(<BankOperationIcon categoryName="Жильё" kind={kind} />);
-		expect(path()).toBeTruthy();
-		paths.push(path());
-	}
-
-	expect(new Set(paths).size).toBe(5);
-	// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
-	expect(container.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
-});
-
-it("provides a distinct icon for every existing named category", () => {
-	const { container, rerender } = render(
-		<BankOperationIcon categoryName="Другое" kind="expense" />,
-	);
-
-	// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
-	const paths = new Set([container.querySelector("path")?.getAttribute("d")]);
-
-	for (const categoryName of [
-		"Алкоголь",
-		"Вклады",
-		"Жильё",
-		"Здоровье",
-		"Инвестиции и накопления",
-		"Кафе",
-		"Образование",
-		"Переводы",
-		"Погашение кредита",
-		"Подписки",
-		"Покупки",
-		"Продукты",
-		"Путешествия",
-		"Развлечения",
-		"Связь и интернет",
-		"Снятие наличных",
-		"Ставки",
-		"Страхование",
-		"Табак",
-		"Такси",
-		"Транспорт",
-		"Хостинг и ИИ-сервисы",
-		"Цифровые покупки",
-	]) {
-		rerender(<BankOperationIcon categoryName={categoryName} kind="expense" />);
-		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
-		const path = container.querySelector("path")?.getAttribute("d");
-		expect(path).toBeTruthy();
-		expect(paths.has(path), categoryName).toBe(false);
-		paths.add(path);
-	}
-});

src/entities/bank-card/ui/CategoryManager/CategoryManager.vm.ts

@@ -5,7 +5,10 @@ import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { useBankMutations } from "../../api/mutations";
+import {
+	useCreateExpenseCategory,
+	useUpdateExpenseCategory,
+} from "../../api/mutations";
 import { type ExpenseCategory, useBankCategories } from "../../api/queries";
 import { categorySchema } from "../../model/category.schema";
 import { useBankFormFocus } from "../useBankFormFocus";
@@ -22,7 +25,8 @@ function useCategoryManagerVm(props: CategoryManagerProps) {
 	const [opened, setOpened] = useState(true);
 	const { t } = useTranslation();
 	const categories = useBankCategories();
-	const mutation = useBankMutations();
+	const categoryCreation = useCreateExpenseCategory();
+	const updateCategory = useUpdateExpenseCategory();
 	const [editing, setEditing] = useState<ExpenseCategory>();
 	const editSessionRef = useRef(0);
 	const [error, setError] = useState<unknown>();
@@ -43,12 +47,12 @@ function useCategoryManagerVm(props: CategoryManagerProps) {
 
 			try {
 				if (editing)
-					await mutation.updateCategory.mutateAsync({
+					await updateCategory.mutateAsync({
 						body: { name: values.name, version: editing.version },
 						id: editing.id,
 					});
 				else {
-					const result = await mutation.createCategory.mutateAsync({
+					const result = await categoryCreation.mutateAsync({
 						name: values.name,
 					});