refactor(account-operations): split page state views into components

Extract loading/error/loaded state views from the single
AccountOperationsPage.view.tsx into dedicated files under components/.
Document the "one state per view file" rule as a mandatory review
convention in CONVENTIONS.md and UI-PATTERN.md.

Co-Authored-By: opencode <opencode@anthropic.com>

docs/CONVENTIONS.md

@@ -9,6 +9,8 @@
 - Публичный импорт слайса идёт через его `index.ts`.
 - Тесты лежат рядом с исходником как `*.test.tsx`.
 - Зависимости используют exact versions; не добавлять semver ranges.
+- Главный `*.view.tsx` страницы не содержит несколько state-компонентов:
+  каждый state/section — отдельный `*.view.tsx` в `components/` (см. File roles).
 - Полный локальный gate: `npm run verify`. Pre-commit запускает staged formatting, OpenAPI check и FSD dependency checks; commit message должен следовать Conventional Commits.
 
 ## React component style
@@ -37,6 +39,11 @@ Mandatory review conventions:
 - `Component.types.ts` - props и локальные типы.
 - `Component.module.css` - локальные стили.
 
-Большие view files дробить по ответственности. Если section/state можно
+State-компоненты страницы не колоцируются в одном `*.view.tsx`. Каждый
-самостоятельно назвать, вынести его в соседний presentation component вместо
+top-level state (loading, error, empty, loaded) и каждый именуемый section
-накопления смысловой нагрузки в одном файле.
+выносится в отдельный `*.view.tsx` в подпапку `components/`. Имя файла
+отражает state/section: `AccountOperationsPageLoaded.view.tsx`,
+`AccountOperationsPageLoading.view.tsx`, `AccountOperationsPageError.view.tsx`.
+Контейнер (`AccountOperationsPage.tsx`) импортирует их из `./components` и
+выбирает нужный по `viewModel.state`. Нельзя держать несколько state components
+внутри одного файла view — это mandatory review convention.

docs/UI-PATTERN.md

@@ -25,10 +25,12 @@ image state. Простое форматирование одного перед
 существующий formatter остаётся presentation concern; вычисления из всей
 коллекции остаются во VM.
 
-View files дробятся по смысловой нагрузке, а не только по количеству строк. Если
+View files дробятся по смысловой нагрузке, а не только по количеству строк.
-section или state имеет самостоятельный смысл и может быть назван, его нужно
+Каждый top-level state и каждый именуемый section страницы — отдельный
-выносить в nearby presentation component вместо накопления внутри одного
+`*.view.tsx` в `components/`, а не накопление внутри одного большого
-большого `*.view.tsx`.
+`*.view.tsx`. Контейнер импортирует state views из `./components` и выбирает
+нужный по `viewModel.state`. Держать loading/error/empty/loaded components в
+одном файле view нельзя.
 
 Known API errors, retry и stale snapshot остаются local views, а непойманные
 route errors обрабатывает общий route-keyed ErrorBoundary.

src/pages/account-operations/ui/AccountOperationsPage.tsx

@@ -1,18 +1,21 @@
 import type { FC } from "react";
 import { LedgerEntryRow } from "@/entities/broker-operation";
-import {
-	AccountOperationsPageError,
-	AccountOperationsPageLoaded,
-	AccountOperationsPageLoading,
-} from "./AccountOperationsPage.view";
 import { useAccountOperationsPageVm } from "./AccountOperationsPage.vm";
+import { AccountOperationsPageError } from "./components/AccountOperationsPageError.view";
+import { AccountOperationsPageLoaded } from "./components/AccountOperationsPageLoaded.view";
+import { AccountOperationsPageLoading } from "./components/AccountOperationsPageLoading.view";
 
 const AccountOperationsPage: FC = () => {
 	const viewModel = useAccountOperationsPageVm();
 
-	if (viewModel.state === "loading") return <AccountOperationsPageLoading />;
+	if (viewModel.state === "loading") {
-	if (viewModel.state === "error")
+		return <AccountOperationsPageLoading />;
+	}
+
+	if (viewModel.state === "error") {
 		return <AccountOperationsPageError {...viewModel} />;
+	}
+
 	return <AccountOperationsPageLoaded {...viewModel} />;
 };
 

src/pages/account-operations/ui/components/AccountOperationsPageError.view.tsx

@@ -0,0 +1,28 @@
+import { Button } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { StateView } from "@/shared/ui";
+import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
+
+type AccountOperationsPageErrorProps = Extract<
+	AccountOperationsPageViewModel,
+	{ state: "error" }
+>;
+
+const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
+	props,
+) => {
+	const { retry } = props;
+	const { t } = useTranslation();
+
+	return (
+		<StateView
+			error
+			title={t("ledger.errorTitle")}
+			text={t("ledger.errorText")}
+			action={<Button onClick={retry}>{t("ledger.retry")}</Button>}
+		/>
+	);
+};
+
+export { AccountOperationsPageError };

src/pages/account-operations/ui/components/AccountOperationsPageLoaded.view.tsx

@@ -14,46 +14,13 @@ import {
 	operationCategories,
 } from "@/entities/broker-operation";
 import { StateView } from "@/shared/ui";
-import type { AccountOperationsPageViewModel } from "./AccountOperationsPage.vm";
+import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
 
 type AccountOperationsPageLoadedProps = Extract<
 	AccountOperationsPageViewModel,
 	{ state: "loaded" }
 >;
 
-type AccountOperationsPageErrorProps = Extract<
-	AccountOperationsPageViewModel,
-	{ state: "error" }
->;
-
-const AccountOperationsPageLoading: FC = () => {
-	const { t } = useTranslation();
-
-	return (
-		<StateView
-			loading
-			title={t("states.loadingTitle")}
-			text={t("states.loadingText")}
-		/>
-	);
-};
-
-const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
-	props,
-) => {
-	const { retry } = props;
-	const { t } = useTranslation();
-
-	return (
-		<StateView
-			error
-			title={t("ledger.errorTitle")}
-			text={t("ledger.errorText")}
-			action={<Button onClick={retry}>{t("ledger.retry")}</Button>}
-		/>
-	);
-};
-
 const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 	props,
 ) => {
@@ -128,8 +95,4 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 	);
 };
 
-export {
+export { AccountOperationsPageLoaded };
-	AccountOperationsPageError,
-	AccountOperationsPageLoaded,
-	AccountOperationsPageLoading,
-};

src/pages/account-operations/ui/components/AccountOperationsPageLoading.view.tsx

@@ -0,0 +1,17 @@
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { StateView } from "@/shared/ui";
+
+const AccountOperationsPageLoading: FC = () => {
+	const { t } = useTranslation();
+
+	return (
+		<StateView
+			loading
+			title={t("states.loadingTitle")}
+			text={t("states.loadingText")}
+		/>
+	);
+};
+
+export { AccountOperationsPageLoading };