refactor: colocate frontend component files

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