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