refactor: enforce frontend view model boundaries

src/pages/cards/ui/CardsPage/CardsPage.test.tsx

@@ -18,6 +18,7 @@ import { server } from "@/test/server";
 import { CardsPage } from "./CardsPage";
 
 const money = (value: string) => ({ currency: "RUB", value });
+
 function renderCards(isFail = false, hasCategoryFailure = false) {
 	configureAuthClient({
 		accessToken: () => "test",
@@ -32,7 +33,8 @@ function renderCards(isFail = false, hasCategoryFailure = false) {
 			isFail ? HttpResponse.error() : HttpResponse.json([]),
 		),
 		http.get("*/api/v1/bank-cards/summary", () =>
-			HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+			/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+			HttpResponse.json(
 				{
 					cardId: null,
 					categories: [],
@@ -40,10 +42,12 @@ function renderCards(isFail = false, hasCategoryFailure = false) {
 					month: "2026-09",
 					net: money("0"),
 					refunds: money("0"),
-				}
-				/* eslint-enable unicorn/no-null */)),
+				},
+				/* eslint-enable unicorn/no-null */
+			),
 		),
 	);
+
 	return render(
 		<QueryClientProvider client={createTestQueryClient()}>
 			<MantineProvider env="test">
@@ -54,6 +58,7 @@ function renderCards(isFail = false, hasCategoryFailure = false) {
 		</QueryClientProvider>,
 	);
 }
+
 describe("CardsPage", () => {
 	it("preserves exact negative opening amount and the creation intent through unknown failure", async () => {
 		renderCards();
@@ -67,12 +72,15 @@ describe("CardsPage", () => {
 		server.use(
 			http.post("*/api/v1/bank-cards", async ({ request }) => {
 				submitted.push((await request.json()) as Record<string, unknown>);
+
 				if (submitted.length === 1) {
 					const deferred = Promise.withResolvers<void>();
 					resolve = deferred.resolve;
 					await deferred.promise;
+
 					return HttpResponse.error();
 				}
+
 				return HttpResponse.json({ id: submitted[0].id }, { status: 201 });
 			}),
 		);
@@ -111,14 +119,16 @@ describe("CardsPage", () => {
 			expect(screen.queryByRole("dialog")).not.toBeInTheDocument(),
 		);
 		expect(submitted[0]).toEqual(submitted[1]);
-		expect(submitted[0]).toMatchObject((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+		/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+		expect(submitted[0]).toMatchObject(
 			{
 				bankName: null,
 				lastFour: null,
 				name: "Повседневная",
 				openingBalance: money("-92233720368547758.08"),
-			}
-			/* eslint-enable unicorn/no-null */));
+			},
+			/* eslint-enable unicorn/no-null */
+		);
 	});
 	it("uses archive only for card list and keeps all-card summary including negative net", async () => {
 		renderCards();
@@ -126,20 +136,22 @@ describe("CardsPage", () => {
 		server.use(
 			http.get("*/api/v1/bank-cards", ({ request }) => {
 				requests.push(new URL(request.url).search);
+
+				/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
 				return HttpResponse.json([
-					(/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-						{
-							archivedAt: "2026-09-01",
-							balance: money("0"),
-							bankName: null,
-							id: "demo",
-							lastFour: null,
-							name: "Запасная",
-							openingBalance: money("0"),
-							openingDate: "2026-01-01",
-							version: 1,
-						}
-					/* eslint-enable unicorn/no-null */),
+					{
+						archivedAt: "2026-09-01",
+						balance: money("0"),
+						bankName: null,
+						id: "demo",
+						lastFour: null,
+						name: "Запасная",
+						openingBalance: money("0"),
+						openingDate: "2026-01-01",
+						version: 1,
+					},
+					/* eslint-enable unicorn/no-null */
 				]);
 			}),
 		);
@@ -162,15 +174,19 @@ describe("CardsPage", () => {
 		server.use(
 			http.get("*/api/v1/bank-cards/summary", ({ request }) => {
 				requests.push(new URL(request.url).search);
-				return HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+				/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+				return HttpResponse.json(
 					{
 						cardId: null,
 						categories: [],
 						expenses: money("0"),
 						net: money("0"),
 						refunds: money("0"),
-					}
-					/* eslint-enable unicorn/no-null */));
+					},
+					/* eslint-enable unicorn/no-null */
+				);
 			}),
 		);
 		fireEvent.click(screen.getByLabelText("Период"));

src/pages/cards/ui/CardsPage/CardsPage.tsx

@@ -7,12 +7,15 @@ import { useCardsPageVm } from "./CardsPage.vm";
 
 const CardsPage: FC = () => {
 	const vm = useCardsPageVm();
+
 	return (
 		<>
 			<CardsPageView vm={vm} />
-			{vm.adding && <BankCardForm onClose={() => vm.setAdding(false)} />}
+
+			{vm.adding && <BankCardForm onClose={vm.closeAdding} />}
+
 			{vm.managingCategories && (
-				<CategoryManager onClose={() => vm.setManagingCategories(false)} />
+				<CategoryManager onClose={vm.closeCategories} />
 			)}
 		</>
 	);

src/pages/cards/ui/CardsPage/CardsPage.view.tsx

@@ -12,7 +12,7 @@ import {
 	Text,
 	Title,
 } from "@mantine/core";
-import { AddIcon } from "@wealthledger/icons";
+import { AddIcon, CategoriesIcon } from "@wealthledger/icons";
 import { LoadingSkeleton, StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
@@ -27,61 +27,78 @@ import {
 import type { CardsPageVm } from "./CardsPage.vm";
 
 import classes from "./CardsPage.module.css";
+import { useCardsPageViewVm } from "./CardsPageView.vm";
 
 type CardsPageViewProps = { vm: CardsPageVm };
-const CardsPageView: FC<CardsPageViewProps> = (props) => {
-	const { vm } = props;
-	const { t } = useTranslation();
 
-	function renderCards() {
-		if (vm.items) {
-			if (vm.items.length > 0) {
-				return (
-					<SimpleGrid cols={{ base: 1, sm: 2 }}>
-						{vm.items.map(card => (
-							<Paper
-								className={classes.card}
-								component={Link}
-								key={card.id}
-								p={0}
-								to={card.to}
-							>
-								<BankCardFace card={card} />
-							</Paper>
-						))}
-					</SimpleGrid>
-				);
-			}
+const CardsPageViewCards: FC<CardsPageViewProps> = (props) => {
+	const { t } = useTranslation();
+	const { vm } = props;
+	const { onAddCard } = useCardsPageViewVm(props);
+
+	if (vm.items) {
+		if (vm.items.length > 0) {
 			return (
-				<StateView
-					action={(
-						<Button onClick={() => vm.setAdding(true)}>
-							{t("bank.addCard")}
-						</Button>
-					)}
-					text={t(vm.archive ? "bank.emptyHint" : "bank.noActive")}
-					title={t("bank.empty")}
-				/>
-			);
-		}
-		if (vm.cards.isLoading) {
-			return (
-				<LoadingSkeleton label={t("bank.loading")}>
-					<SimpleGrid cols={{ base: 1, sm: 2 }}>
-						<Skeleton h={250} />
-						<Skeleton h={250} />
-					</SimpleGrid>
-				</LoadingSkeleton>
+				<SimpleGrid cols={{ base: 1, sm: 2 }}>
+					{vm.items.map(card => (
+						<Paper
+							className={classes.card}
+							component={Link}
+							key={card.id}
+							p={0}
+							to={card.to}
+						>
+							<BankCardFace card={card} />
+						</Paper>
+					))}
+				</SimpleGrid>
 			);
 		}
+
+		const text = t(vm.archive ? "bank.emptyHint" : "bank.noActive");
+
+		return (
+			<StateView
+				action={<Button onClick={onAddCard}>{t("bank.addCard")}</Button>}
+				text={text}
+				title={t("bank.empty")}
+			/>
+		);
 	}
+
+	if (vm.cards.isLoading) {
+		return (
+			<LoadingSkeleton label={t("bank.loading")}>
+				<SimpleGrid cols={{ base: 1, sm: 2 }}>
+					<Skeleton h={250} />
+
+					<Skeleton h={250} />
+				</SimpleGrid>
+			</LoadingSkeleton>
+		);
+	}
+};
+
+const CardsPageView: FC<CardsPageViewProps> = (props) => {
+	const {
+		onAddCard,
+		onArchiveChange,
+		onCategories,
+		retryCards,
+		retryCategories,
+		retrySummary,
+		t,
+		vm,
+	} = useCardsPageViewVm(props);
+
 	return (
 		<Stack gap="lg">
 			<Group gap="sm">
 				<Title order={1}>{t("bank.title")}</Title>
+
 				<ActionIcon
 					aria-label={t("bank.addCard")}
-					onClick={() => vm.setAdding(true)}
+					onClick={onAddCard}
 					size="lg"
 					title={t("bank.addCard")}
 					variant="light"
@@ -89,63 +106,59 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 					<AddIcon size={20} strokeWidth={2} />
 				</ActionIcon>
 			</Group>
+
 			<Switch
 				checked={vm.archive}
 				label={t("bank.showArchive")}
-				onChange={event => vm.setArchive(event.currentTarget.checked)}
+				onChange={onArchiveChange}
 			/>
-			{renderCards()}
+
+			<CardsPageViewCards {...props} />
+
 			{vm.cards.isError && (
 				<Group role="alert">
 					<Text>{t(vm.items ? "bank.refreshError" : "bank.error")}</Text>
-					<Button onClick={() => void vm.cards.refetch()} variant="default">
+
+					<Button onClick={retryCards} variant="default">
 						{t("bank.retry")}
 					</Button>
 				</Group>
 			)}
+
 			{vm.cards.data && vm.cards.isFetching && (
 				<Text role="status">{t("bank.refreshing")}</Text>
 			)}
+
 			<Group align="flex-end" justify="space-between">
 				<BankPeriodPicker onChange={vm.setPeriod} period={vm.period} />
+
 				{Boolean(vm.categories.data?.length || vm.cards.data?.length) && (
 					<Button
 						color="gray"
-						leftSection={(
-							<svg
-								aria-hidden="true"
-								fill="none"
-								height="18"
-								stroke="currentColor"
-								strokeLinejoin="round"
-								strokeWidth="1.7"
-								viewBox="0 0 24 24"
-								width="18"
-							>
-								<path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" />
-							</svg>
-						)}
-						onClick={() => vm.setManagingCategories(true)}
+						leftSection={<CategoriesIcon size={18} strokeWidth="1.7" />}
+						onClick={onCategories}
 						variant="subtle"
 					>
 						{t("bank.categories")}
 					</Button>
 				)}
 			</Group>
+
 			<BankSummaryView
 				all
 				data={vm.summary.data}
 				error={vm.summary.isError}
 				fetching={vm.summary.isFetching}
 				loading={vm.summary.isLoading}
-				retry={() => void vm.summary.refetch()}
+				retry={retrySummary}
 			/>
+
 			{vm.categories.isError && (
 				<BankFeedback
 					cached={Boolean(vm.categories.data)}
 					error={vm.categories.error}
 					loadingError
-					retry={() => void vm.categories.refetch()}
+					retry={retryCategories}
 				/>
 			)}
 		</Stack>

src/pages/cards/ui/CardsPage/CardsPage.vm.ts

@@ -9,6 +9,7 @@ import {
 } from "@/entities/bank-card";
 
 type CardsPageVm = ReturnType<typeof useCardsPageVm>;
+
 function useCardsPageVm() {
 	const [parameters, setParameters] = useSearchParams();
 	const period = bankPeriod(parameters);
@@ -18,11 +19,14 @@ function useCardsPageVm() {
 	const [adding, setAdding] = useState(false);
 	const cards = useBankCards(archive);
 	const summary = useBankSummary(period);
+
 	return {
 		adding,
 		archive,
 		cards,
 		categories,
+		closeAdding: () => setAdding(false),
+		closeCategories: () => setManagingCategories(false),
 		items: cards.data?.map(card => ({
 			...card,
 			to: `/cards/${card.id}?${new URLSearchParams(period)}`,

src/pages/cards/ui/CardsPage/CardsPageView.vm.ts

@@ -0,0 +1,35 @@
+import type { ComponentProps } from "react";
+
+import { Switch } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import type { CardsPageVm } from "./CardsPage.vm";
+
+type CardsPageViewProps = { vm: CardsPageVm };
+
+function useCardsPageViewVm(props: CardsPageViewProps) {
+	const { vm } = props;
+	const { t } = useTranslation();
+	const onAddCard = () => vm.setAdding(true);
+
+	const onArchiveChange: ComponentProps<typeof Switch>["onChange"] = event =>
+		vm.setArchive(event.currentTarget.checked);
+
+	const retryCards = () => void vm.cards.refetch();
+	const onCategories = () => vm.setManagingCategories(true);
+	const retrySummary = () => void vm.summary.refetch();
+	const retryCategories = () => void vm.categories.refetch();
+
+	return {
+		onAddCard,
+		onArchiveChange,
+		onCategories,
+		retryCards,
+		retryCategories,
+		retrySummary,
+		t,
+		vm,
+	};
+}
+
+export { useCardsPageViewVm };