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/pages/cards/ui/CardsPage/CardsPage.view.tsx

@@ -1,3 +1,5 @@
+import type { FC } from "react";
+
 import {
 	ActionIcon,
 	Button,
@@ -12,79 +14,91 @@ import {
 } from "@mantine/core";
 import { AddIcon } from "@wealthledger/icons";
 import { LoadingSkeleton, StateView } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+
 import {
 	BankCardFace,
 	BankFeedback,
 	BankPeriodPicker,
 	BankSummaryView,
 } from "@/entities/bank-card";
-import classes from "./CardsPage.module.css";
+
 import type { CardsPageVm } from "./CardsPage.vm";
 
+import classes from "./CardsPage.module.css";
+
 type CardsPageViewProps = { vm: CardsPageVm };
 const CardsPageView: FC<CardsPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
-	return (
-		<Stack gap="lg">
-			<Group gap="sm">
-				<Title order={1}>{t("bank.title")}</Title>
-				<ActionIcon
-					size="lg"
-					variant="light"
-					aria-label={t("bank.addCard")}
-					title={t("bank.addCard")}
-					onClick={() => vm.setAdding(true)}
-				>
-					<AddIcon size={20} strokeWidth={2} />
-				</ActionIcon>
-			</Group>
-			<Switch
-				label={t("bank.showArchive")}
-				checked={vm.archive}
-				onChange={(event) => vm.setArchive(event.currentTarget.checked)}
-			/>
-			{vm.items ? (
-				vm.items.length ? (
+
+	function renderCards() {
+		if (vm.items) {
+			if (vm.items.length > 0) {
+				return (
 					<SimpleGrid cols={{ base: 1, sm: 2 }}>
-						{vm.items.map((card) => (
+						{vm.items.map(card => (
 							<Paper
-								key={card.id}
-								component={Link}
-								to={card.to}
-								p={0}
 								className={classes.card}
+								component={Link}
+								key={card.id}
+								p={0}
+								to={card.to}
 							>
 								<BankCardFace card={card} />
 							</Paper>
 						))}
 					</SimpleGrid>
-				) : (
-					<StateView
-						title={t("bank.empty")}
-						text={t(vm.archive ? "bank.emptyHint" : "bank.noActive")}
-						action={
-							<Button onClick={() => vm.setAdding(true)}>
-								{t("bank.addCard")}
-							</Button>
-						}
-					/>
-				)
-			) : vm.cards.isLoading ? (
+				);
+			}
+			return (
+				<StateView
+					action={(
+						<Button onClick={() => vm.setAdding(true)}>
+							{t("bank.addCard")}
+						</Button>
+					)}
+					text={t(vm.archive ? "bank.emptyHint" : "bank.noActive")}
+					title={t("bank.empty")}
+				/>
+			);
+		}
+		if (vm.cards.isLoading) {
+			return (
 				<LoadingSkeleton label={t("bank.loading")}>
 					<SimpleGrid cols={{ base: 1, sm: 2 }}>
 						<Skeleton h={250} />
 						<Skeleton h={250} />
 					</SimpleGrid>
 				</LoadingSkeleton>
-			) : null}
+			);
+		}
+	}
+	return (
+		<Stack gap="lg">
+			<Group gap="sm">
+				<Title order={1}>{t("bank.title")}</Title>
+				<ActionIcon
+					aria-label={t("bank.addCard")}
+					onClick={() => vm.setAdding(true)}
+					size="lg"
+					title={t("bank.addCard")}
+					variant="light"
+				>
+					<AddIcon size={20} strokeWidth={2} />
+				</ActionIcon>
+			</Group>
+			<Switch
+				checked={vm.archive}
+				label={t("bank.showArchive")}
+				onChange={event => vm.setArchive(event.currentTarget.checked)}
+			/>
+			{renderCards()}
 			{vm.cards.isError && (
 				<Group role="alert">
 					<Text>{t(vm.items ? "bank.refreshError" : "bank.error")}</Text>
-					<Button variant="default" onClick={() => void vm.cards.refetch()}>
+					<Button onClick={() => void vm.cards.refetch()} variant="default">
 						{t("bank.retry")}
 					</Button>
 				</Group>
@@ -93,26 +107,26 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 				<Text role="status">{t("bank.refreshing")}</Text>
 			)}
 			<Group align="flex-end" justify="space-between">
-				<BankPeriodPicker period={vm.period} onChange={vm.setPeriod} />
+				<BankPeriodPicker onChange={vm.setPeriod} period={vm.period} />
 				{Boolean(vm.categories.data?.length || vm.cards.data?.length) && (
 					<Button
-						variant="subtle"
 						color="gray"
-						onClick={() => vm.setManagingCategories(true)}
-						leftSection={
+						leftSection={(
 							<svg
-								width="18"
-								height="18"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								strokeWidth="1.7"
-								strokeLinejoin="round"
 								aria-hidden="true"
+								fill="none"
+								height="18"
+								stroke="currentColor"
+								strokeLinejoin="round"
+								strokeWidth="1.7"
+								viewBox="0 0 24 24"
+								width="18"
 							>
 								<path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" />
 							</svg>
-						}
+						)}
+						onClick={() => vm.setManagingCategories(true)}
+						variant="subtle"
 					>
 						{t("bank.categories")}
 					</Button>
@@ -121,16 +135,16 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 			<BankSummaryView
 				all
 				data={vm.summary.data}
-				loading={vm.summary.isLoading}
 				error={vm.summary.isError}
 				fetching={vm.summary.isFetching}
+				loading={vm.summary.isLoading}
 				retry={() => void vm.summary.refetch()}
 			/>
 			{vm.categories.isError && (
 				<BankFeedback
-					loadingError
-					error={vm.categories.error}
 					cached={Boolean(vm.categories.data)}
+					error={vm.categories.error}
+					loadingError
 					retry={() => void vm.categories.refetch()}
 				/>
 			)}