fix: polish accounts portfolio summary (#159)

src/pages/accounts/ui/AccountsPage/AccountsPage.test.tsx

@@ -110,7 +110,9 @@ describe("AccountsPage", () => {
 		renderPage(client);
 
 		expect(await screen.findByText("175,30 ₽")).toBeInTheDocument();
-		expect(screen.getAllByText("20,00 USD")).not.toHaveLength(0);
+		expect(screen.getAllByText("20,00 $")).not.toHaveLength(0);
+		expect(screen.queryByText("Ваши инвестиции по счетам"))
+			.not.toBeInTheDocument();
 		expect(screen.getByText("5 счетов")).toBeInTheDocument();
 		expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
 		expect(screen.getByText(

src/pages/accounts/ui/AccountsPage/components/AccountsPageLoaded.module.css

@@ -0,0 +1,21 @@
+.summary {
+	min-width: 0;
+	padding-bottom: var(--mantine-spacing-lg);
+	border-bottom: 1px solid var(--wl-color-border);
+}
+
+.primaryTotal {
+	font-size: clamp(1.75rem, 4vw, 2.25rem);
+	font-variant-numeric: tabular-nums;
+	line-height: 1.2;
+	overflow-wrap: anywhere;
+}
+
+.otherTotal {
+	font-variant-numeric: tabular-nums;
+	overflow-wrap: anywhere;
+}
+
+.meta {
+	padding-top: var(--mantine-spacing-xs);
+}

src/pages/accounts/ui/AccountsPage/components/AccountsPageLoaded.view.tsx

@@ -1,6 +1,6 @@
 import type { FC } from "react";
 
-import { Button, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { Button, Group, Stack, Text, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
@@ -13,6 +13,8 @@ import {
 import { formatMoney } from "@/shared/lib";
 import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
 
+import classes from "./AccountsPageLoaded.module.css";
+
 const DECIMAL_BASE = 10n;
 const DECIMAL_PART_COUNT = 2;
 const ZERO = 0n;
@@ -87,52 +89,55 @@ function sumDecimals(values: string[]) {
 const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
 	const { excludedCount, totals } = accountTotals(props.accounts);
+	const primaryTotal = totals.find(total => total.currency === "RUB") ?? totals[0];
+	const otherTotals = totals.filter(total => total !== primaryTotal);
 
 	return (
 		<Stack gap="lg">
-			<Stack gap={4}>
-				<Title order={1}>{t("accounts.title")}</Title>
+			<Title order={1}>{t("accounts.title")}</Title>
 
+			<Stack className={classes.summary} gap="xs">
 				<Text c="dimmed" size="sm">
-					{t("accounts.subtitle")}
+					{t("accounts.currentValue")}
 				</Text>
-			</Stack>
 
-			<Stack gap="xs">
-				<SimpleGrid cols={{ base: 1, xs: 2 }} spacing="xs">
-					<Stack gap={4}>
-						<Text c="dimmed" size="sm">
-							{t("accounts.currentValue")}
-						</Text>
-
-						{totals.length > 0
-							? totals.map(total => (
-									<Text fw={700} key={total.currency} size="lg">
-										{formatMoney(total, { withRoundedCents: true })}
-									</Text>
-								))
-							: <Text c="dimmed">{t("accounts.summaryNoTotals")}</Text>}
-					</Stack>
-
-					<Stack gap={4}>
-						<Text fw={600}>{t("accounts.count", {
-							count: props.accounts.length,
-						})}
-						</Text>
-
-						{excludedCount > 0 && (
-							<Text c="dimmed" size="sm">
-								{t("accounts.summaryExcluded", { count: excludedCount })}
+				{primaryTotal
+					? (
+							<Text className={classes.primaryTotal} fw={700}>
+								{formatMoney(primaryTotal, { withRoundedCents: true })}
 							</Text>
+						)
+					: (
+							<Text c="dimmed">{t("accounts.summaryNoTotals")}</Text>
 						)}
-					</Stack>
-				</SimpleGrid>
 
-				<SourceSyncStatus
-					lastAttempt={props.meta.lastAttempt}
-					lastSuccessfulAt={props.meta.lastSuccessfulAt}
-					stale={props.meta.freshness === "stale"}
-				/>
+				{otherTotals.length > 0 && (
+					<Group gap="md" wrap="wrap">
+						{otherTotals.map(total => (
+							<Text className={classes.otherTotal} key={total.currency}>
+								{formatMoney(total, { withRoundedCents: true })}
+							</Text>
+						))}
+					</Group>
+				)}
+
+				<Group className={classes.meta} gap="xs" wrap="wrap">
+					<Text c="dimmed" size="xs">
+						{t("accounts.count", { count: props.accounts.length })}
+					</Text>
+
+					<SourceSyncStatus
+						lastAttempt={props.meta.lastAttempt}
+						lastSuccessfulAt={props.meta.lastSuccessfulAt}
+						stale={props.meta.freshness === "stale"}
+					/>
+				</Group>
+
+				{excludedCount > 0 && (
+					<Text c="dimmed" size="sm">
+						{t("accounts.summaryExcluded", { count: excludedCount })}
+					</Text>
+				)}
 
 				{!!props.readRetry && <ReadRetry {...props.readRetry} />}
 			</Stack>