feat: establish frontend foundation

src/shared/ui/AppShell.tsx

@@ -0,0 +1,49 @@
+import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Outlet, NavLink as RouterNavLink, useLocation } from "react-router";
+
+export function AppShell() {
+	const { t } = useTranslation();
+	const { pathname } = useLocation();
+	const items = [
+		{ to: "/accounts", label: t("navigation.accounts") },
+		{ to: "/settings", label: t("navigation.settings") },
+	];
+
+	return (
+		<MantineAppShell
+			header={{ height: 60 }}
+			navbar={{ width: 220, breakpoint: "sm", collapsed: { mobile: true } }}
+			padding="md"
+		>
+			<MantineAppShell.Header className="app-header">
+				<Text fw={700}>{t("appName")}</Text>
+			</MantineAppShell.Header>
+			<MantineAppShell.Navbar p="sm">
+				{items.map((item) => (
+					<NavLink
+						component={RouterNavLink}
+						key={item.to}
+						to={item.to}
+						label={item.label}
+						active={pathname.startsWith(item.to)}
+					/>
+				))}
+			</MantineAppShell.Navbar>
+			<MantineAppShell.Main>
+				<Outlet />
+			</MantineAppShell.Main>
+			<nav className="bottom-nav" aria-label={t("appName")}>
+				{items.map((item) => (
+					<RouterNavLink
+						className={pathname.startsWith(item.to) ? "active" : ""}
+						key={item.to}
+						to={item.to}
+					>
+						{item.label}
+					</RouterNavLink>
+				))}
+			</nav>
+		</MantineAppShell>
+	);
+}

src/shared/ui/StateView.test.tsx

@@ -0,0 +1,36 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { theme } from "../../app/theme";
+import { StateView } from "./StateView";
+
+describe("StateView", () => {
+	afterEach(cleanup);
+
+	it("renders an accessible loading state with a loader", () => {
+		render(
+			<MantineProvider theme={theme}>
+				<StateView loading text="Пожалуйста, подождите." title="Загрузка" />
+			</MantineProvider>,
+		);
+
+		const status = screen.getByRole("status");
+		expect(status).toHaveTextContent("Загрузка");
+		expect(screen.getByLabelText("Загрузка")).toBeInTheDocument();
+	});
+
+	it("renders an accessible error state", () => {
+		render(
+			<MantineProvider theme={theme}>
+				<StateView
+					error
+					text="Попробуйте обновить страницу позже."
+					title="Что-то пошло не так"
+				/>
+				,
+			</MantineProvider>,
+		);
+
+		expect(screen.getByRole("alert")).toHaveTextContent("Что-то пошло не так");
+	});
+});

src/shared/ui/StateView.tsx

@@ -0,0 +1,33 @@
+import { Button, Loader, Paper, Stack, Text, Title } from "@mantine/core";
+import type { ReactNode } from "react";
+
+type StateViewProps = {
+	title: string;
+	text: string;
+	action?: ReactNode;
+	loading?: boolean;
+	error?: boolean;
+};
+
+export function StateView({
+	title,
+	text,
+	action,
+	loading = false,
+	error = false,
+}: StateViewProps) {
+	const role = loading ? "status" : error ? "alert" : undefined;
+
+	return (
+		<Paper p="xl" radius="md" shadow="xs" withBorder role={role}>
+			<Stack align="flex-start" gap="sm">
+				{loading ? <Loader aria-label={title} size="sm" /> : null}
+				<Title order={2}>{title}</Title>
+				<Text c="dimmed">{text}</Text>
+				{action}
+			</Stack>
+		</Paper>
+	);
+}
+
+export { Button };