refactor: align frontend ownership boundaries

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

src/shared/api/authenticated-query.test.tsx

@@ -1,31 +1,12 @@
-import { MantineProvider } from "@mantine/core";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderHook, waitFor } from "@testing-library/react";
 import { HttpResponse, http } from "msw";
-import type { FC, PropsWithChildren } from "react";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";
+import { createQueryWrapper } from "@/test/query";
 import { server } from "@/test/server";
 import { useAuthenticatedQuery } from "./authenticated-query";
 import { apiQueryClient, configureAuthClient } from "./client";
 
-function createWrapper() {
-	const client = new QueryClient();
-	const TestWrapper: FC<PropsWithChildren> = (props) => {
-		const { children } = props;
-
-		return (
-			<MantineProvider>
-				<QueryClientProvider client={client}>{children}</QueryClientProvider>
-			</MantineProvider>
-		);
-	};
-
-	return TestWrapper;
-}
-
 describe("useAuthenticatedQuery", () => {
-	afterEach(() => configureAuthClient(null));
-
 	it("keeps protected queries idle without a session and loads after session configuration", async () => {
 		const requests = vi.fn();
 		server.use(
@@ -47,7 +28,7 @@ describe("useAuthenticatedQuery", () => {
 				useAuthenticatedQuery(
 					apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts"),
 				),
-			{ wrapper: createWrapper() },
+			{ wrapper: createQueryWrapper().wrapper },
 		);
 
 		await new Promise((resolve) => setTimeout(resolve, 0));

src/shared/api/client.test.ts

@@ -1,11 +1,9 @@
 import { HttpResponse, http } from "msw";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { server } from "@/test/server";
 import { apiClient, configureAuthClient } from "./client";
 
 describe("apiClient authentication", () => {
-	afterEach(() => configureAuthClient(null));
-
 	it("refreshes once and retries an unauthorized protected request", async () => {
 		let token = "expired";
 		const refresh = vi.fn(async () => {

src/shared/api/generated/schema.d.ts

@@ -232,7 +232,7 @@ export interface components {
         TbankConnectionStatusDto: {
             connected: boolean;
             /** Format: date-time */
-            connectedAt: Record<string, never> | null;
+            connectedAt: string | null;
         };
         PutTbankConnectionDto: {
             token: string;

src/shared/api/index.ts

@@ -1,2 +1,4 @@
 export { useAuthenticatedQuery } from "./authenticated-query";
 export { apiClient, apiQueryClient, configureAuthClient } from "./client";
+export type { paths } from "./generated/schema";
+export { apiErrorCode } from "./problem-details";

src/shared/api/problem-details.ts

@@ -0,0 +1,7 @@
+function apiErrorCode(error: unknown): string | undefined {
+	return typeof error === "object" && error !== null && "code" in error
+		? String(error.code)
+		: undefined;
+}
+
+export { apiErrorCode };

src/shared/api/spec/openapi.json

@@ -1275,7 +1275,7 @@
             "type": "boolean"
           },
           "connectedAt": {
-            "type": "object",
+            "type": "string",
             "nullable": true,
             "format": "date-time"
           }
@@ -1960,4 +1960,4 @@
       }
     }
   }
-}
+}

src/shared/lib/display.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { formatMoney, instrumentLogoUrl } from "./display";
+
+describe("shared display helpers", () => {
+	it("formats decimal strings without financial arithmetic", () => {
+		expect(formatMoney({ value: "-1234567.89", currency: "RUB" })).toBe(
+			"-1 234 567,89 ₽",
+		);
+		expect(formatMoney({ value: "10", currency: "RUB" })).toBe("10 ₽");
+		expect(formatMoney({ value: "0.5", currency: "USD" })).toBe("0,5 USD");
+		expect(formatMoney(null)).toBe("—");
+	});
+
+	it("builds the brand logo url from an upstream file name", () => {
+		expect(instrumentLogoUrl("sber3.png")).toBe(
+			"https://invest-brands.cdn-tinkoff.ru/sber3x160.png",
+		);
+		expect(instrumentLogoUrl(" RU000A0JPNM1.png ")).toBe(
+			"https://invest-brands.cdn-tinkoff.ru/RU000A0JPNM1x160.png",
+		);
+		expect(instrumentLogoUrl(null)).toBeNull();
+		expect(instrumentLogoUrl("  ")).toBeNull();
+	});
+});

src/shared/lib/display.ts

@@ -0,0 +1,35 @@
+type Money = { currency: string; value: string };
+
+function formatDecimal(value: string): string {
+	const [integer, fraction] = value.split(".");
+	const sign = integer.startsWith("-") ? "-" : "";
+	const grouped = (sign ? integer.slice(1) : integer).replace(
+		/\B(?=(\d{3})+(?!\d))/g,
+		" ",
+	);
+	return `${sign}${grouped}${fraction ? `,${fraction}` : ""}`;
+}
+
+function formatMoney(money: Money | null): string {
+	if (!money) return "—";
+	return `${formatDecimal(money.value)} ${money.currency === "RUB" ? "₽" : money.currency}`;
+}
+
+function formatSnapshotTime(value: string): string {
+	return new Intl.DateTimeFormat("ru-RU", {
+		dateStyle: "medium",
+		timeStyle: "short",
+		timeZone: "UTC",
+	}).format(new Date(value));
+}
+
+const logoSize = 160;
+
+function instrumentLogoUrl(logoName: string | null | undefined): string | null {
+	const stem = logoName?.trim().replace(/\.png$/i, "");
+	return stem
+		? `https://invest-brands.cdn-tinkoff.ru/${stem}x${logoSize}.png`
+		: null;
+}
+
+export { formatMoney, formatSnapshotTime, instrumentLogoUrl };

src/shared/lib/index.ts

@@ -0,0 +1,5 @@
+export {
+	formatMoney,
+	formatSnapshotTime,
+	instrumentLogoUrl,
+} from "./display";

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