refactor: align frontend ownership boundaries

Close audit gaps across API drift, query policy, UI, and tests.

src/shared/ui/AppShell.module.css

@@ -0,0 +1,33 @@
+.header {
+	align-items: center;
+	display: flex;
+	padding: 0 var(--mantine-spacing-md);
+}
+
+.bottomNav {
+	display: none;
+}
+
+@media (max-width: 47.99375em) {
+	.bottomNav {
+		background: var(--mantine-color-white);
+		border-top: 1px solid var(--mantine-color-gray-3);
+		bottom: 0;
+		display: flex;
+		justify-content: space-around;
+		left: 0;
+		padding: var(--mantine-spacing-sm);
+		position: fixed;
+		right: 0;
+		z-index: 200;
+	}
+
+	.active {
+		color: var(--mantine-primary-color-filled);
+		font-weight: 600;
+	}
+
+	.main {
+		padding-bottom: 5rem;
+	}
+}

src/shared/ui/AppShell.tsx

@@ -2,6 +2,7 @@ import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
 import type { FC, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet, NavLink as RouterNavLink, useLocation } from "react-router";
+import classes from "./AppShell.module.css";
 
 type AppShellProps = {
 	contentAboveOutlet?: ReactNode;
@@ -22,7 +23,7 @@ const AppShell: FC<AppShellProps> = (props) => {
 			navbar={{ width: 220, breakpoint: "sm", collapsed: { mobile: true } }}
 			padding="md"
 		>
-			<MantineAppShell.Header className="app-header">
+			<MantineAppShell.Header className={classes.header}>
 				<Text fw={700}>{t("appName")}</Text>
 			</MantineAppShell.Header>
 			<MantineAppShell.Navbar p="sm">
@@ -36,14 +37,16 @@ const AppShell: FC<AppShellProps> = (props) => {
 					/>
 				))}
 			</MantineAppShell.Navbar>
-			<MantineAppShell.Main>
+			<MantineAppShell.Main className={classes.main}>
 				{contentAboveOutlet}
 				<Outlet />
 			</MantineAppShell.Main>
-			<nav className="bottom-nav" aria-label={t("appName")}>
+			<nav className={classes.bottomNav} aria-label={t("appName")}>
 				{items.map((item) => (
 					<RouterNavLink
-						className={pathname.startsWith(item.to) ? "active" : ""}
+						className={
+							pathname.startsWith(item.to) ? classes.active : undefined
+						}
 						key={item.to}
 						to={item.to}
 					>

src/shared/ui/StateView.test.tsx

@@ -1,12 +1,10 @@
 import { MantineProvider } from "@mantine/core";
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import { LoadingSkeleton } from "./LoadingSkeleton";
 import { StateView } from "./StateView";
 
 describe("StateView", () => {
-	afterEach(cleanup);
-
 	it("renders an accessible structural loading region", () => {
 		render(
 			<MantineProvider>

src/shared/ui/StateView.tsx

@@ -1,4 +1,4 @@
-import { Button, Paper, Stack, Text, Title } from "@mantine/core";
+import { Paper, Stack, Text, Title } from "@mantine/core";
 import type { FC, ReactNode } from "react";
 
 type StateViewProps = {
@@ -23,4 +23,4 @@ const StateView: FC<StateViewProps> = (props) => {
 	);
 };
 
-export { Button, StateView };
+export { StateView };

src/shared/ui/index.ts

@@ -1,3 +1,3 @@
 export { AppShell } from "./AppShell";
 export { LoadingSkeleton } from "./LoadingSkeleton";
-export { Button, StateView } from "./StateView";
+export { StateView } from "./StateView";