refactor: colocate frontend component files

src/pages/accounts/ui/AccountsPage/AccountsPage.test.tsx

@@ -0,0 +1,165 @@
+import { MantineProvider } from "@mantine/core";
+import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import { HttpResponse, http } from "msw";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it, vi } from "vitest";
+import { brokerageAccountsQueryKey } from "@/entities/brokerage-account";
+import { configureAuthClient } from "@/shared/api";
+import { createTestQueryClient } from "@/test/query";
+import { server } from "@/test/server";
+import { AccountsPage } from "./AccountsPage";
+import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
+import { AccountsPageError } from "./components/AccountsPageError.view";
+import { AccountsPageLoading } from "./components/AccountsPageLoading.view";
+
+const account = {
+	id: "account-1",
+	name: "Основной",
+	type: "BROKERAGE",
+	openedOn: "2026-01-01",
+} as const;
+
+function configureTestAuth() {
+	configureAuthClient({
+		accessToken: () => "test-token",
+		refresh: async () => true,
+		clear: vi.fn(),
+	});
+}
+
+function renderPage(queryClient: QueryClient) {
+	configureTestAuth();
+	return render(
+		<QueryClientProvider client={queryClient}>
+			<MantineProvider>
+				<MemoryRouter>
+					<AccountsPage />
+				</MemoryRouter>
+			</MantineProvider>
+		</QueryClientProvider>,
+	);
+}
+
+describe("AccountsPage", () => {
+	it.each([
+		["loading", AccountsPageLoading, "status"],
+		["empty", AccountsPageEmpty, undefined],
+	] as const)("renders only the %s state", (_name, State, role) => {
+		render(
+			<MantineProvider>
+				<State />
+			</MantineProvider>,
+		);
+		if (role) expect(screen.getByRole(role)).toBeInTheDocument();
+		else
+			expect(
+				screen.getByRole("heading", { name: "Нет инвестиционных счетов" }),
+			).toBeInTheDocument();
+	});
+
+	it("routes connection errors to settings and keeps retry available", () => {
+		const retry = vi.fn();
+		render(
+			<MantineProvider>
+				<MemoryRouter>
+					<AccountsPageError code="TBANK_UNAVAILABLE" retry={retry} />
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+		screen.getByRole("button", { name: "Повторить" }).click();
+		expect(retry).toHaveBeenCalledOnce();
+		expect(
+			screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
+		).toHaveAttribute("href", "/settings");
+	});
+
+	it("keeps the cached account list visible during a background refresh", async () => {
+		let requestCount = 0;
+		let resolveRefresh: ((response: Response) => void) | undefined;
+		server.use(
+			http.get("*/api/v1/brokerage-accounts", () => {
+				requestCount += 1;
+				if (requestCount === 1) return HttpResponse.json([account]);
+				return new Promise<Response>((resolve) => {
+					resolveRefresh = resolve;
+				});
+			}),
+		);
+		const queryClient = createTestQueryClient();
+		renderPage(queryClient);
+
+		await screen.findByText(account.name);
+		void queryClient.invalidateQueries({
+			queryKey: brokerageAccountsQueryKey,
+		});
+
+		await waitFor(() => expect(requestCount).toBe(2));
+		expect(screen.getByText(account.name)).toBeInTheDocument();
+		expect(
+			screen.getByRole("status", { name: "Обновляем данные" }),
+		).toBeInTheDocument();
+
+		resolveRefresh?.(HttpResponse.json([account]));
+	});
+
+	it("keeps the cached account list and offers retry after a refresh error", async () => {
+		let requestCount = 0;
+		server.use(
+			http.get("*/api/v1/brokerage-accounts", () => {
+				requestCount += 1;
+				if (requestCount === 1) return HttpResponse.json([account]);
+				if (requestCount === 2)
+					return HttpResponse.json(
+						{ code: "TBANK_UNAVAILABLE" },
+						{ status: 503 },
+					);
+				return HttpResponse.json([account]);
+			}),
+		);
+		const queryClient = createTestQueryClient();
+		renderPage(queryClient);
+
+		await screen.findByText(account.name);
+		void queryClient.invalidateQueries({
+			queryKey: brokerageAccountsQueryKey,
+		});
+
+		const warning = await screen.findByText(
+			"Не удалось обновить данные. Показаны последние полученные.",
+		);
+		expect(warning).toBeInTheDocument();
+		expect(screen.getByText(account.name)).toBeInTheDocument();
+
+		screen.getByRole("button", { name: "Повторить" }).click();
+		await waitFor(() => expect(requestCount).toBe(3));
+	});
+
+	it("keeps a cached empty account list visible after a refresh error", async () => {
+		let requestCount = 0;
+		server.use(
+			http.get("*/api/v1/brokerage-accounts", () => {
+				requestCount += 1;
+				if (requestCount === 1) return HttpResponse.json([]);
+				return HttpResponse.json(
+					{ code: "TBANK_UNAVAILABLE" },
+					{ status: 503 },
+				);
+			}),
+		);
+		const queryClient = createTestQueryClient();
+		renderPage(queryClient);
+
+		await screen.findByText("Нет инвестиционных счетов");
+		void queryClient.invalidateQueries({
+			queryKey: brokerageAccountsQueryKey,
+		});
+
+		expect(
+			await screen.findByText(
+				"Не удалось обновить данные. Показаны последние полученные.",
+			),
+		).toBeInTheDocument();
+		expect(screen.getByText("Нет инвестиционных счетов")).toBeInTheDocument();
+	});
+});

src/pages/accounts/ui/AccountsPage/AccountsPage.tsx

@@ -0,0 +1,30 @@
+import type { FC } from "react";
+import { useAccountsPageViewModel } from "./AccountsPage.vm";
+import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
+import { AccountsPageError } from "./components/AccountsPageError.view";
+import { AccountsPageLoaded } from "./components/AccountsPageLoaded.view";
+import { AccountsPageLoading } from "./components/AccountsPageLoading.view";
+
+const AccountsPage: FC = () => {
+	const viewModel = useAccountsPageViewModel();
+	if (viewModel.state === "loading") return <AccountsPageLoading />;
+	if (viewModel.state === "error") return <AccountsPageError {...viewModel} />;
+	if (viewModel.state === "empty")
+		return (
+			<AccountsPageEmpty
+				refreshing={viewModel.refreshing}
+				refreshError={viewModel.refreshError}
+				retry={viewModel.retry}
+			/>
+		);
+	return (
+		<AccountsPageLoaded
+			accounts={viewModel.accounts}
+			refreshing={viewModel.refreshing}
+			refreshError={viewModel.refreshError}
+			retry={viewModel.retry}
+		/>
+	);
+};
+
+export { AccountsPage };

src/pages/accounts/ui/AccountsPage/AccountsPage.vm.ts

@@ -0,0 +1,34 @@
+import {
+	brokerageAccountCards,
+	useBrokerageAccounts,
+} from "@/entities/brokerage-account";
+import { apiErrorCode } from "@/shared/api";
+
+function useAccountsPageViewModel() {
+	const accounts = useBrokerageAccounts();
+	if (!accounts.data) {
+		if (accounts.isFetching) return { state: "loading" as const };
+		if (accounts.isError)
+			return {
+				state: "error" as const,
+				code: apiErrorCode(accounts.error),
+				retry: () => accounts.refetch(),
+			};
+	}
+	if (!accounts.data?.length)
+		return {
+			state: "empty" as const,
+			refreshing: accounts.isFetching,
+			refreshError: accounts.isError,
+			retry: () => accounts.refetch(),
+		};
+	return {
+		state: "loaded" as const,
+		accounts: brokerageAccountCards(accounts.data),
+		refreshing: accounts.isFetching,
+		refreshError: accounts.isError,
+		retry: () => accounts.refetch(),
+	};
+}
+
+export { useAccountsPageViewModel };

src/pages/accounts/ui/AccountsPage/components/AccountsPageEmpty.view.tsx

@@ -0,0 +1,23 @@
+import { Stack } from "@mantine/core";
+import { StateView } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import {
+	AccountsRefreshState,
+	type AccountsRefreshStateProps,
+} from "./AccountsRefreshState.view";
+
+const AccountsPageEmpty: FC<AccountsRefreshStateProps> = (props) => {
+	const { t } = useTranslation();
+	return (
+		<Stack>
+			<AccountsRefreshState {...props} />
+			<StateView
+				title={t("accounts.emptyTitle")}
+				text={t("accounts.emptyText")}
+			/>
+		</Stack>
+	);
+};
+
+export { AccountsPageEmpty };

src/pages/accounts/ui/AccountsPage/components/AccountsPageError.view.tsx

@@ -0,0 +1,59 @@
+import { Button, Stack } from "@mantine/core";
+import { StateView } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+
+type AccountsPageErrorProps = { code?: string; retry?: () => void };
+
+const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
+	const { code, retry } = props;
+	const { t } = useTranslation();
+	const settingsAction = (
+		<Button component={Link} to="/settings" variant="light">
+			{t("accounts.openSettings")}
+		</Button>
+	);
+	if (code === "TBANK_NOT_CONNECTED")
+		return (
+			<StateView
+				error
+				title={t("accounts.notConnectedTitle")}
+				text={t("accounts.notConnectedText")}
+				action={settingsAction}
+			/>
+		);
+	if (code === "INVALID_TBANK_TOKEN")
+		return (
+			<StateView
+				error
+				title={t("accounts.invalidTokenTitle")}
+				text={t("accounts.invalidTokenText")}
+				action={settingsAction}
+			/>
+		);
+	if (code === "TBANK_UNAVAILABLE")
+		return (
+			<StateView
+				error
+				title={t("accounts.unavailableTitle")}
+				text={t("accounts.unavailableText")}
+				action={
+					<Stack align="flex-start">
+						<Button onClick={retry}>{t("accounts.retry")}</Button>
+						{settingsAction}
+					</Stack>
+				}
+			/>
+		);
+	return (
+		<StateView
+			error
+			title={t("states.errorTitle")}
+			text={t("states.errorText")}
+			action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
+		/>
+	);
+};
+
+export { AccountsPageError };

src/pages/accounts/ui/AccountsPage/components/AccountsPageLoaded.view.tsx

@@ -0,0 +1,43 @@
+import { Button, Stack, Text, Title } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import {
+	type BrokerageAccountCard,
+	BrokerageAccountList,
+} from "@/entities/brokerage-account";
+import {
+	AccountsRefreshState,
+	type AccountsRefreshStateProps,
+} from "./AccountsRefreshState.view";
+
+type AccountsPageLoadedProps = AccountsRefreshStateProps & {
+	accounts: BrokerageAccountCard[];
+};
+
+const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
+	const { accounts, ...refresh } = props;
+	const { t } = useTranslation();
+	return (
+		<Stack gap="lg">
+			<Stack gap={4}>
+				<Title order={1}>{t("accounts.title")}</Title>
+				<Text c="dimmed" size="sm">
+					{t("accounts.subtitle")}
+				</Text>
+			</Stack>
+			<AccountsRefreshState {...refresh} />
+			<Button
+				component={Link}
+				to="/accounts/all"
+				variant="light"
+				w="fit-content"
+			>
+				{t("accounts.openAll")}
+			</Button>
+			<BrokerageAccountList accounts={accounts} />
+		</Stack>
+	);
+};
+
+export { AccountsPageLoaded };

src/pages/accounts/ui/AccountsPage/components/AccountsPageLoading.view.tsx

@@ -0,0 +1,37 @@
+import { Card, Group, SimpleGrid, Skeleton, Stack } from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+const AccountsPageLoading: FC = () => {
+	const { t } = useTranslation();
+	return (
+		<LoadingSkeleton label={t("states.loadingTitle")}>
+			<Skeleton height={32} width="30%" />
+			<Skeleton height={20} width="45%" />
+			<SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg" aria-hidden="true">
+				{[0, 1].map((index) => (
+					<Card key={index} padding="xl" radius="lg" withBorder>
+						<Stack gap="xl">
+							<Stack gap="sm">
+								<Skeleton height={24} width="35%" />
+								<Skeleton height={28} width="65%" />
+							</Stack>
+							<Stack gap="xs">
+								<Skeleton height={16} width="30%" />
+								<Skeleton height={40} width="60%" />
+							</Stack>
+							<Group grow>
+								<Skeleton height={56} />
+								<Skeleton height={56} />
+							</Group>
+							<Skeleton height={20} />
+						</Stack>
+					</Card>
+				))}
+			</SimpleGrid>
+		</LoadingSkeleton>
+	);
+};
+
+export { AccountsPageLoading };

src/pages/accounts/ui/AccountsPage/components/AccountsRefreshState.view.tsx

@@ -0,0 +1,39 @@
+import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+type AccountsRefreshStateProps = {
+	refreshing?: boolean;
+	refreshError?: boolean;
+	retry?: () => void;
+};
+
+const AccountsRefreshState: FC<AccountsRefreshStateProps> = (props) => {
+	const { refreshing = false, refreshError = false, retry } = props;
+	const { t } = useTranslation();
+	if (!refreshing && !refreshError) return null;
+	return (
+		<>
+			{refreshing ? (
+				<Group gap="xs" role="status" aria-label={t("accounts.refreshing")}>
+					<Loader size="sm" />
+					<Text c="dimmed" size="sm">
+						{t("accounts.refreshing")}
+					</Text>
+				</Group>
+			) : null}
+			{refreshError ? (
+				<Alert color="orange">
+					<Stack gap="sm">
+						<Text>{t("accounts.refreshError")}</Text>
+						<Button onClick={retry} variant="light">
+							{t("accounts.retry")}
+						</Button>
+					</Stack>
+				</Alert>
+			) : null}
+		</>
+	);
+};
+
+export { AccountsRefreshState, type AccountsRefreshStateProps };