chore: finish frontend ESLint migration #18

Enable every plugin recommended preset and replace Biome with ESLint formatting.

Preserve API contracts and JSX whitespace; verify source, tests, builds and tooling.

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.test.tsx

@@ -7,11 +7,13 @@ import {
 	waitFor,
 	within,
 } from "@testing-library/react";
-import { HttpResponse, http } from "msw";
+import { http, HttpResponse } from "msw";
 import { describe, expect, it, vi } from "vitest";
+
 import { apiQueryClient, configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
+
 import { tbankConnectionQueryOptions } from "../../model/connection-boundary";
 import { TbankConnectionSection } from "./TbankConnectionSection";
 
@@ -54,8 +56,8 @@ const unrelatedQueryKey = apiQueryClient.queryOptions(
 function renderSection(client: QueryClient) {
 	configureAuthClient({
 		accessToken: () => "test-token",
-		refresh: async () => true,
 		clear: vi.fn(),
+		refresh: () => Promise.resolve(true),
 	});
 	return render(
 		<MantineProvider>
@@ -69,12 +71,14 @@ function renderSection(client: QueryClient) {
 function seededClient() {
 	const client = createTestQueryClient();
 	client.setQueryData(brokerageAccountsQueryKey, [
-		{
-			id: "account-1",
-			name: "Основной счет",
-			type: "BROKERAGE",
-			openedOn: null,
-		},
+		(/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+			{
+				id: "account-1",
+				name: "Основной счет",
+				openedOn: null,
+				type: "BROKERAGE",
+			}
+		/* eslint-enable unicorn/no-null */),
 	]);
 	client.setQueryData(portfolioQueryKey, { source: "previous-connection" });
 	client.setQueryData(stockQueryKey, { source: "previous-connection" });
@@ -87,10 +91,8 @@ function seededClient() {
 describe("TbankConnectionSection", () => {
 	it("preserves cached status and a draft entered during a delayed failed refetch", async () => {
 		const status = { connected: true, connectedAt: "2026-08-14T00:00:00Z" };
-		let finishRefetch: (() => void) | undefined;
-		const response = new Promise<void>((resolve) => {
-			finishRefetch = resolve;
-		});
+
+		const { promise: response, resolve: finishRefetch } = Promise.withResolvers<void>();
 		let reads = 0;
 		server.use(
 			http.get("*/api/v1/tbank-connection", async () => {
@@ -141,7 +143,9 @@ describe("TbankConnectionSection", () => {
 				reads += 1;
 				return reads === 1
 					? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
-					: HttpResponse.json({ connected: false, connectedAt: null });
+					: HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+							{ connected: false, connectedAt: null }
+							/* eslint-enable unicorn/no-null */));
 			}),
 		);
 		renderSection(createTestQueryClient());
@@ -238,22 +242,21 @@ describe("TbankConnectionSection", () => {
 
 	it("cancels an in-flight previous-boundary query and ignores its late response", async () => {
 		const client = seededClient();
-		let finishPrevious: ((value: { source: string }) => void) | undefined;
-		let aborted = false;
-		const previousResponse = new Promise<{ source: string }>((resolve) => {
-			finishPrevious = resolve;
-		});
+
+		let isAborted = false;
+		const { promise: previousResponse, resolve: finishPrevious } = Promise.withResolvers<{ source: string }>();
 		const previousRequest = client
-			.fetchQuery({
-				queryKey: operationsQueryKey,
+			.query({
 				queryFn: ({ signal }) => {
 					signal.addEventListener("abort", () => {
-						aborted = true;
+						isAborted = true;
 					});
 					return previousResponse;
 				},
+				queryKey: operationsQueryKey,
 			})
-			.catch(() => undefined);
+			// eslint-disable-next-line unicorn/prefer-await -- Attach the handler immediately and retain the pending promise for queue/race ordering.
+			.catch(() => {});
 		renderSection(client);
 
 		await screen.findByText("Не подключено");
@@ -262,7 +265,7 @@ describe("TbankConnectionSection", () => {
 		});
 		fireEvent.click(screen.getByRole("button", { name: "Подключить" }));
 
-		await waitFor(() => expect(aborted).toBe(true));
+		await waitFor(() => expect(isAborted).toBe(true));
 		await previousRequest;
 		finishPrevious?.({ source: "previous-connection" });
 		await Promise.resolve();
@@ -298,10 +301,8 @@ describe("TbankConnectionSection", () => {
 
 	it("keeps DELETE recovery inside the dialog and preserves cache until successful retry", async () => {
 		let deletes = 0;
-		let finishDelete: (() => void) | undefined;
-		const response = new Promise<void>((resolve) => {
-			finishDelete = resolve;
-		});
+
+		const { promise: response, resolve: finishDelete } = Promise.withResolvers<void>();
 		server.use(
 			http.get("*/api/v1/tbank-connection", () =>
 				HttpResponse.json({
@@ -327,6 +328,7 @@ describe("TbankConnectionSection", () => {
 			name: "Удалить подключение?",
 		});
 		await waitFor(() =>
+			// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
 			expect(dialog.contains(document.activeElement)).toBe(true),
 		);
 		const confirm = within(dialog).getByRole("button", { name: /^Удалить$/ });
@@ -340,7 +342,7 @@ describe("TbankConnectionSection", () => {
 		document.body.tabIndex = -1;
 		document.body.focus();
 		document.body.removeAttribute("tabindex");
-		expect(document.activeElement).toBe(document.body);
+		expect(document.body).toHaveFocus();
 		finishDelete?.();
 
 		expect(await within(dialog).findByRole("alert")).toHaveTextContent(

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx

@@ -1,4 +1,5 @@
 import type { FC } from "react";
+
 import {
 	TbankConnectionError,
 	TbankConnectionLoading,
@@ -9,9 +10,7 @@ import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded";
 const TbankConnectionSection: FC = () => {
 	const viewModel = useTbankConnectionViewModel();
 	if (viewModel.state === "loading") return <TbankConnectionLoading />;
-	if (viewModel.state === "error")
-		return <TbankConnectionError retry={viewModel.retry} />;
-	return <TbankConnectionSectionLoaded {...viewModel} />;
+	return viewModel.state === "error" ? <TbankConnectionError retry={viewModel.retry} /> : <TbankConnectionSectionLoaded {...viewModel} />;
 };
 
 export { TbankConnectionSection };

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.test.tsx

@@ -1,6 +1,7 @@
 import { MantineProvider } from "@mantine/core";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
+
 import {
 	TbankConnectionError,
 	TbankConnectionLoading,
@@ -23,7 +24,7 @@ describe("TbankConnectionSection state views", () => {
 				<TbankConnectionError retry={retry} />
 			</MantineProvider>,
 		);
-		screen.getByRole("button", { name: "Повторить" }).click();
+		fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
 		expect(retry).toHaveBeenCalledOnce();
 	});
 });

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.tsx

@@ -1,6 +1,7 @@
+import type { FC } from "react";
+
 import { Alert, Button, Skeleton } from "@mantine/core";
 import { LoadingSkeleton } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 type TbankConnectionErrorProps = {
@@ -13,7 +14,7 @@ const TbankConnectionLoading: FC = () => {
 	return (
 		<LoadingSkeleton label={t("states.loadingTitle")}>
 			<Skeleton height={20} width="45%" />
-			<Skeleton height={36} width={140} radius="sm" />
+			<Skeleton height={36} radius="sm" width={140} />
 		</LoadingSkeleton>
 	);
 };
@@ -24,7 +25,7 @@ const TbankConnectionError: FC<TbankConnectionErrorProps> = (props) => {
 
 	return (
 		<Alert color="red" title={t("tbank.statusError")}>
-			<Button variant="subtle" onClick={retry}>
+			<Button onClick={retry} variant="subtle">
 				{t("tbank.retry")}
 			</Button>
 		</Alert>

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts

@@ -1,4 +1,5 @@
 import { useAuthenticatedQuery } from "@/shared/api";
+
 import { tbankConnectionQueryOptions } from "../../model/connection-boundary";
 
 function useTbankConnectionViewModel() {
@@ -6,15 +7,14 @@ function useTbankConnectionViewModel() {
 		...tbankConnectionQueryOptions(),
 	});
 	if (!status.data) {
-		if (status.isPending) return { state: "loading" as const };
-		return { state: "error" as const, retry: () => status.refetch() };
+		return status.isPending ? { state: "loading" as const } : { retry: () => status.refetch(), state: "error" as const };
 	}
 	return {
+		refreshError: status.isError,
+		refreshing: status.isFetching,
+		retry: () => status.refetch(),
 		state: "loaded" as const,
 		status: status.data,
-		refreshing: status.isFetching,
-		refreshError: status.isError,
-		retry: () => status.refetch(),
 	};
 }
 

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx

@@ -1,3 +1,5 @@
+import type { FC } from "react";
+
 import {
 	Alert,
 	Button,
@@ -7,21 +9,22 @@ import {
 	Text,
 } from "@mantine/core";
 import { useQueryClient } from "@tanstack/react-query";
-import type { FC } from "react";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { apiErrorCode, apiQueryClient } from "@/shared/api";
+
 import {
 	commitTbankConnectionBoundary,
 	type TbankConnectionStatus,
 } from "../../model/connection-boundary";
 
 type TbankConnectionSectionLoadedProps = {
-	status: TbankConnectionStatus;
-	refreshing: boolean;
 	refreshError: boolean;
+	refreshing: boolean;
 	retry: () => void;
+	status: TbankConnectionStatus;
 };
 
 const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
@@ -30,21 +33,21 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
 	const { status } = props;
 	const { t } = useTranslation();
 	const queryClient = useQueryClient();
-	const [deleteOpened, setDeleteOpened] = useState(false);
-	const deleteButton = useRef<HTMLButtonElement>(null);
-	const [requestError, setRequestError] = useState<string | null>(null);
+	const [isDeleteOpened, setIsDeleteOpened] = useState(false);
+	const removalButtonRef = useRef<HTMLButtonElement>(null);
+	const [requestError, setRequestError] = useState<null | string>(null);
 	const {
-		register,
-		handleSubmit,
-		reset,
 		formState: { errors },
+		handleSubmit,
+		register,
+		reset,
 	} = useForm<{ token: string }>();
 	const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
+		onError: error => setRequestError(apiErrorCode(error) ?? "REQUEST_ERROR"),
 		onSuccess: (data) => {
 			commitTbankConnectionBoundary(queryClient, data);
 			reset();
 		},
-		onError: (error) => setRequestError(apiErrorCode(error) ?? "REQUEST_ERROR"),
 	});
 	const remove = apiQueryClient.useMutation(
 		"delete",
@@ -53,23 +56,24 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
 			onSuccess: () => {
 				commitTbankConnectionBoundary(queryClient, {
 					connected: false,
-					connectedAt: null,
+					connectedAt: /* eslint-disable-line unicorn/no-null -- The disconnected API snapshot requires a null connection timestamp. */ null,
 				});
-				setDeleteOpened(false);
+				setIsDeleteOpened(false);
 			},
 		},
 	);
-	const pending = update.isPending || remove.isPending;
-	const connected = status.connected;
+	const unavailableMessage = requestError === "TBANK_UNAVAILABLE" ? "tbank.unavailable" : "tbank.requestError";
+	const isPending = update.isPending || remove.isPending;
+	const isConnected = status.connected;
 	useEffect(() => {
-		if (deleteOpened && remove.isError) deleteButton.current?.focus();
-	}, [deleteOpened, remove.isError]);
+		if (isDeleteOpened && remove.isError) removalButtonRef.current?.focus();
+	}, [isDeleteOpened, remove.isError]);
 
 	return (
 		<Stack mt="xl">
 			<Text fw={600}>{t("tbank.title")}</Text>
 			<Text size="sm">
-				{connected
+				{isConnected
 					? t("tbank.connected", {
 							date: new Date(status.connectedAt ?? "").toLocaleDateString(
 								"ru-RU",
@@ -77,22 +81,22 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
 						})
 					: t("tbank.disconnected")}
 			</Text>
-			<Text size="sm" c="dimmed">
+			<Text c="dimmed" size="sm">
 				{t("tbank.hint")}
 			</Text>
 			{props.refreshing && (
-				<Text role="status" size="sm" c="dimmed">
+				<Text c="dimmed" role="status" size="sm">
 					{t("tbank.refreshing")}
 				</Text>
 			)}
 			{props.refreshError && (
-				<Alert color="orange" role="status" aria-live="polite">
+				<Alert aria-live="polite" color="orange" role="status">
 					<Stack gap="sm">
 						<Text>{t("tbank.refreshError")}</Text>
 						<Button
-							variant="default"
+							disabled={props.refreshing || isPending}
 							onClick={props.retry}
-							disabled={props.refreshing || pending}
+							variant="default"
 						>
 							{t("tbank.retry")}
 						</Button>
@@ -105,7 +109,7 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
 					update.mutate({ body: { token } });
 				})}
 			>
-				<fieldset disabled={pending}>
+				<fieldset disabled={isPending}>
 					<Stack>
 						<PasswordInput
 							label={t("tbank.token")}
@@ -117,23 +121,21 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
 								{t(
 									requestError === "INVALID_TBANK_TOKEN"
 										? "tbank.invalidToken"
-										: requestError === "TBANK_UNAVAILABLE"
-											? "tbank.unavailable"
-											: "tbank.requestError",
+										: unavailableMessage,
 								)}
 							</Alert>
 						)}
-						<Button type="submit" loading={update.isPending}>
-							{t(connected ? "tbank.replace" : "tbank.connect")}
+						<Button loading={update.isPending} type="submit">
+							{t(isConnected ? "tbank.replace" : "tbank.connect")}
 						</Button>
-						{connected && (
+						{isConnected && (
 							<Button
-								variant="outline"
 								color="red"
 								onClick={() => {
 									remove.reset();
-									setDeleteOpened(true);
+									setIsDeleteOpened(true);
 								}}
+								variant="outline"
 							>
 								{t("tbank.delete")}
 							</Button>
@@ -142,12 +144,12 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
 				</fieldset>
 			</form>
 			<Modal
-				opened={deleteOpened}
-				onClose={() => !pending && setDeleteOpened(false)}
+				closeButtonProps={{ "aria-label": t("tbank.close"), "disabled": isPending }}
+				closeOnClickOutside={!isPending}
+				closeOnEscape={!isPending}
+				onClose={() => !isPending && setIsDeleteOpened(false)}
+				opened={isDeleteOpened}
 				title={t("tbank.deleteTitle")}
-				closeOnClickOutside={!pending}
-				closeOnEscape={!pending}
-				closeButtonProps={{ "aria-label": t("tbank.close"), disabled: pending }}
 			>
 				<Stack>
 					<Text>{t("tbank.deleteText")}</Text>
@@ -155,11 +157,11 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
 						<Alert color="red">{t("tbank.requestError")}</Alert>
 					)}
 					<Button
-						ref={deleteButton}
 						color="red"
+						disabled={isPending}
 						loading={remove.isPending}
-						disabled={pending}
 						onClick={() => remove.mutate({})}
+						ref={removalButtonRef}
 					>
 						{t("tbank.deleteConfirm")}
 					</Button>