refactor: enforce frontend view model boundaries

src/pages/settings/ui/SettingsPage.tsx

@@ -1,31 +0,0 @@
-import type { FC } from "react";
-
-import { Button, Stack, Title } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router";
-
-import { useAuth } from "@/features/auth";
-import { TbankConnectionSection } from "@/features/tbank-connection";
-
-const SettingsPage: FC = () => {
-	const { t } = useTranslation();
-	const { logout } = useAuth();
-	const navigate = useNavigate();
-
-	return (
-		<Stack>
-			<Title order={1}>{t("settings.title")}</Title>
-			<TbankConnectionSection />
-			<Button
-				onClick={async () => {
-					await logout();
-					await navigate("/login", { replace: true });
-				}}
-			>
-				{t("auth.logout")}
-			</Button>
-		</Stack>
-	);
-};
-
-export { SettingsPage };

src/pages/settings/ui/SettingsPage/SettingsPage.tsx

@@ -0,0 +1,23 @@
+import type { FC } from "react";
+
+import { Button, Stack, Title } from "@mantine/core";
+
+import { TbankConnectionSection } from "@/features/tbank-connection";
+
+import { useSettingsPageVm } from "./SettingsPage.vm";
+
+const SettingsPage: FC = () => {
+	const { onLogout, t } = useSettingsPageVm();
+
+	return (
+		<Stack>
+			<Title order={1}>{t("settings.title")}</Title>
+
+			<TbankConnectionSection />
+
+			<Button onClick={onLogout}>{t("auth.logout")}</Button>
+		</Stack>
+	);
+};
+
+export { SettingsPage };

src/pages/settings/ui/SettingsPage/SettingsPage.vm.ts

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+
+import { useAuth } from "@/features/auth";
+
+function useSettingsPageVm() {
+	const { t } = useTranslation();
+	const { logout } = useAuth();
+	const navigate = useNavigate();
+
+	const onLogout = async () => {
+		await logout();
+		await navigate("/login", { replace: true });
+	};
+
+	return { onLogout, t };
+}
+
+export { useSettingsPageVm };