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>

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 === "error")
+	if (viewModel.state === "loading") {
+		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 {
-	AccountOperationsPageError,
-	AccountOperationsPageLoaded,
-	AccountOperationsPageLoading,
-};
+export { AccountOperationsPageLoaded };

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 };