feat: make brokerage account list compact (#111)

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx

@@ -1,11 +1,10 @@
 import type { FC } from "react";
 
-import { Card, Group, SimpleGrid, Stack, Text } from "@mantine/core";
-import { WalletIcon } from "@wealthledger/icons";
+import { Group, Stack, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
-import { formatDate, formatMoney } from "@/shared/lib";
+import { formatMoney } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";
 
 import type { BrokerageAccountCard } from "../../model/display";
@@ -39,7 +38,7 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
 		<Stack className={classes.summary} gap={4}>
 			{summary.totals.map(total => (
 				<Text className={classes.total} fw={700} key={total.currency}>
-					{formatMoney(total)}
+					{formatMoney(total, { withRoundedCents: true })}
 				</Text>
 			))}
 
@@ -92,81 +91,75 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
 	const { t } = useTranslation();
 
 	return (
-		<SimpleGrid className={classes.list} cols={1} spacing="lg">
-			{accounts.map(({ account, positionCounts, source, summary }) => (
-				<Card
-					className={classes.card}
-					component={Link}
-					key={account.id}
-					padding="xl"
-					radius="lg"
-					to={`/accounts/${account.id}`}
-					withBorder
-				>
-					<Stack className={classes.identity} gap="sm">
-						<Group gap="sm" justify="space-between" wrap="nowrap">
-							<Text className={classes.kicker} fw={700} size="xs">
-								{t(accountTypeKey(account.type))}
-							</Text>
+		<Stack className={classes.list} component="ul" gap="sm">
+			{accounts.map(({ account, positionCounts, source, summary }) => {
+				const accountType = t(accountTypeKey(account.type));
 
-							<WalletIcon className={classes.accountIcon} />
-						</Group>
+				return (
+					<li key={account.id}>
+						<Link className={classes.row} to={`/accounts/${account.id}`}>
+							<Stack className={classes.identity} gap={2}>
+								<Text className={classes.name} component="h2" fw={600}>
+									{account.name}
+								</Text>
 
-						<Text className={classes.name} component="h2" fw={700}>
-							{account.name}
-						</Text>
-					</Stack>
+								{account.name !== accountType && (
+									<Text className={classes.accountType} size="xs">
+										{accountType}
+									</Text>
+								)}
+							</Stack>
 
-					<Stack className={classes.balance} gap="xs">
-						<Text c="dimmed" size="sm">
-							{t("accounts.currentValue")}
-						</Text>
+							<Stack className={classes.balance} gap={2}>
+								<Text c="dimmed" size="xs">
+									{t("accounts.currentValue")}
+								</Text>
 
-						<BrokerageAccountSummary summary={summary} />
+								<BrokerageAccountSummary summary={summary} />
+							</Stack>
 
-						<BrokerageAccountSourceStatus source={source} />
-					</Stack>
+							<Group className={classes.details} gap="md">
+								{!!positionCounts && (
+									<Group
+										className={classes.positions}
+										component="dl"
+										gap="md"
+									>
+										<div>
+											<Text c="dimmed" component="dt" size="sm">
+												{t("accounts.stocks")}
+											</Text>
 
-					{!!positionCounts && (
-						<dl className={classes.positions}>
-							<div className={classes.stocks}>
-								<dt>{t("accounts.stocks")}</dt>
+											<Text component="dd" fw={600} size="sm">
+												{new Intl.NumberFormat("ru-RU").format(
+													positionCounts.stocks,
+												)}
+											</Text>
+										</div>
 
-								<dd>
-									{new Intl.NumberFormat("ru-RU").format(positionCounts.stocks)}
-								</dd>
-							</div>
+										<div>
+											<Text c="dimmed" component="dt" size="sm">
+												{t("accounts.bonds")}
+											</Text>
 
-							<div className={classes.bonds}>
-								<dt>{t("accounts.bonds")}</dt>
+											<Text component="dd" fw={600} size="sm">
+												{new Intl.NumberFormat("ru-RU").format(
+													positionCounts.bonds,
+												)}
+											</Text>
+										</div>
+									</Group>
+								)}
 
-								<dd>
-									{new Intl.NumberFormat("ru-RU").format(positionCounts.bonds)}
-								</dd>
-							</div>
-						</dl>
-					)}
-
-					<Group className={classes.footer} gap="sm" justify="space-between">
-						{!!account.openedOn && (
-							<Text c="dimmed" size="xs">
-								{t("accounts.openedOn", {
-									date: formatDate(account.openedOn),
-								})}
-							</Text>
-						)}
-
-						<Text className={classes.open} component="span" fw={600} size="sm">
-							{t("accounts.openAccount")}
-
-							<span aria-hidden="true" className={classes.arrow}>
-								→
-							</span>
-						</Text>
-					</Group>
-				</Card>
-			))}
-		</SimpleGrid>
+								<Stack className={classes.status} gap={2}>
+									<BrokerageAccountSourceStatus source={source} />
+								</Stack>
+							</Group>
+						</Link>
+					</li>
+				);
+			})}
+		</Stack>
 	);
 };