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/app/ui/AppBreadcrumbs/AccountBreadcrumbs.tsx

@@ -1,6 +1,9 @@
 import type { FC } from "react";
+
 import { useTranslation } from "react-i18next";
+
 import { useBrokerageAccounts } from "@/entities/brokerage-account";
+
 import { BreadcrumbTrail } from "./BreadcrumbTrail";
 
 type AccountBreadcrumbsProps = {
@@ -12,11 +15,11 @@ const AccountBreadcrumbs: FC<AccountBreadcrumbsProps> = (props) => {
 	const { accountId, section } = props;
 	const { data: accounts } = useBrokerageAccounts();
 	const { t } = useTranslation();
-	const accountName =
-		accountId === "all"
+	const accountName
+		= accountId === "all"
 			? t("accounts.all")
-			: (accounts?.find((account) => account.id === accountId)?.name ??
-				t("breadcrumbs.accountFallback"));
+			: (accounts?.find(account => account.id === accountId)?.name
+				?? t("breadcrumbs.accountFallback"));
 	const accountPath = `/accounts/${accountId}`;
 	const items = [
 		{ label: t("breadcrumbs.accounts"), to: "/accounts" },

src/app/ui/AppBreadcrumbs/AccountScopeSwitch.tsx

@@ -1,7 +1,9 @@
-import { Select } from "@mantine/core";
 import type { FC } from "react";
+
+import { Select } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router";
+
 import { useBrokerageAccounts } from "@/entities/brokerage-account";
 
 type AccountScopeSwitchProps = { accountId: string; section?: string };
@@ -13,31 +15,31 @@ const AccountScopeSwitch: FC<AccountScopeSwitchProps> = (props) => {
 	const navigate = useNavigate();
 	const { search } = useLocation();
 	const data = [
-		{ value: "all", label: t("accounts.all") },
-		...(accounts ?? []).map((account) => ({
-			value: account.id,
+		{ label: t("accounts.all"), value: "all" },
+		...(accounts ?? []).map(account => ({
 			label: account.name,
+			value: account.id,
 		})),
 	];
-	if (!data.some((item) => item.value === accountId))
-		data.push({ value: accountId, label: t("breadcrumbs.accountFallback") });
+	if (data.every(item => item.value !== accountId))
+		data.push({ label: t("breadcrumbs.accountFallback"), value: accountId });
 	return (
 		<Select
-			label={t("accounts.scope")}
-			value={accountId}
-			data={data}
 			allowDeselect={false}
+			data={data}
+			label={t("accounts.scope")}
 			maw={360}
-			w="100%"
 			onChange={(value) => {
 				if (!value || value === accountId) return;
 				const filters = new URLSearchParams(search);
 				filters.delete("cursor");
 				void navigate({
-					pathname: `/accounts/${encodeURIComponent(value)}${section ? `/${section}` : ""}`,
+					pathname: ["/accounts", encodeURIComponent(value), section].filter(Boolean).join("/"),
 					search: filters.toString(),
 				});
 			}}
+			value={accountId}
+			w="100%"
 		/>
 	);
 };

src/app/ui/AppBreadcrumbs/AppBreadcrumbs.test.tsx

@@ -2,6 +2,7 @@ import { MantineProvider } from "@mantine/core";
 import { render, screen, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
 import { afterEach, describe, expect, it, vi } from "vitest";
+
 import { AppBreadcrumbs } from "./AppBreadcrumbs";
 
 const { useBrokerageAccounts } = vi.hoisted(() => ({

src/app/ui/AppBreadcrumbs/AppBreadcrumbs.tsx

@@ -1,7 +1,9 @@
-import { Stack } from "@mantine/core";
 import type { FC } from "react";
+
+import { Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { useMatch } from "react-router";
+
 import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
 import { AccountScopeSwitch } from "./AccountScopeSwitch";
 import { BondBreadcrumbs } from "./BondBreadcrumbs";
@@ -12,19 +14,19 @@ import { StockBreadcrumbs } from "./StockBreadcrumbs";
 const AppBreadcrumbs: FC = () => {
 	const { t } = useTranslation();
 	const operations = useMatch({
-		path: "/accounts/:accountId/operations",
 		end: true,
+		path: "/accounts/:accountId/operations",
 	});
-	const events = useMatch({ path: "/accounts/:accountId/events", end: true });
-	const income = useMatch({ path: "/accounts/:accountId/income", end: true });
-	const account = useMatch({ path: "/accounts/:accountId", end: true });
+	const events = useMatch({ end: true, path: "/accounts/:accountId/events" });
+	const income = useMatch({ end: true, path: "/accounts/:accountId/income" });
+	const account = useMatch({ end: true, path: "/accounts/:accountId" });
 	const card = useMatch("/cards/:cardId");
 	const cards = useMatch("/cards");
-	const accounts = useMatch({ path: "/accounts", end: true });
-	const settings = useMatch({ path: "/settings", end: true });
+	const accounts = useMatch({ end: true, path: "/accounts" });
+	const settings = useMatch({ end: true, path: "/settings" });
 
-	const stock = useMatch({ path: "/stocks/:stockId", end: true });
-	const bond = useMatch({ path: "/bonds/:bondId", end: true });
+	const stock = useMatch({ end: true, path: "/stocks/:stockId" });
+	const bond = useMatch({ end: true, path: "/bonds/:bondId" });
 	if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
 	if (stock)
 		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
@@ -78,9 +80,7 @@ const AppBreadcrumbs: FC = () => {
 	if (cards) return <BreadcrumbTrail items={[{ label: t("bank.title") }]} />;
 	if (accounts)
 		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
-	if (settings)
-		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
-	return null;
+	return settings ? <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} /> : undefined;
 };
 
 export { AppBreadcrumbs };

src/app/ui/AppBreadcrumbs/BondBreadcrumbs.tsx

@@ -1,6 +1,9 @@
 import type { FC } from "react";
+
 import { useTranslation } from "react-i18next";
+
 import { useBond } from "@/entities/bond";
+
 import { BreadcrumbTrail } from "./BreadcrumbTrail";
 
 type BondBreadcrumbsProps = { identifier: string };

src/app/ui/AppBreadcrumbs/BreadcrumbTrail.tsx

@@ -1,11 +1,13 @@
-import { Breadcrumbs } from "@mantine/core";
 import type { FC } from "react";
+
+import { Breadcrumbs } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+
 import classes from "./AppBreadcrumbs.module.css";
 
-type Crumb = { label: string; to?: string };
 type BreadcrumbTrailProps = { items: Crumb[] };
+type Crumb = { label: string; to?: string };
 
 const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
 	const { items } = props;
@@ -18,16 +20,18 @@ const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
 			data-depth={items.length}
 			separator={<span aria-hidden="true">→</span>}
 		>
-			{items.map((item) =>
-				item.to ? (
-					<Link className={classes.link} key={item.to} to={item.to}>
-						{item.label}
-					</Link>
-				) : (
-					<span aria-current="page" key={item.label}>
-						{item.label}
-					</span>
-				),
+			{items.map(item =>
+				item.to
+					? (
+							<Link className={classes.link} key={item.to} to={item.to}>
+								{item.label}
+							</Link>
+						)
+					: (
+							<span aria-current="page" key={item.label}>
+								{item.label}
+							</span>
+						),
 			)}
 		</Breadcrumbs>
 	);

src/app/ui/AppBreadcrumbs/CardBreadcrumbs.tsx

@@ -1,6 +1,9 @@
 import type { FC } from "react";
+
 import { useTranslation } from "react-i18next";
+
 import { useBankCard } from "@/entities/bank-card";
+
 import { BreadcrumbTrail } from "./BreadcrumbTrail";
 
 type CardBreadcrumbsProps = { identifier: string };

src/app/ui/AppBreadcrumbs/StockBreadcrumbs.tsx

@@ -1,6 +1,9 @@
 import type { FC } from "react";
+
 import { useTranslation } from "react-i18next";
+
 import { useStock } from "@/entities/stock";
+
 import { BreadcrumbTrail } from "./BreadcrumbTrail";
 
 type StockBreadcrumbsProps = { identifier: string };