diff --git a/scripts/lazy-route-bundle-baseline.json b/scripts/lazy-route-bundle-baseline.json
index 6838a7f..06978a1 100644
--- a/scripts/lazy-route-bundle-baseline.json
+++ b/scripts/lazy-route-bundle-baseline.json
@@ -2,7 +2,7 @@
"src/app/routes/ProtectedLayout.tsx": 3057,
"src/pages/account-events/index.ts": 4364,
"src/pages/account-operations/index.ts": 13854,
- "src/pages/account/index.ts": 24695,
+ "src/pages/account/index.ts": 25407,
"src/pages/accounts/index.ts": 6145,
"src/pages/login/index.ts": 662,
"src/pages/not-found/index.ts": 877,
diff --git a/src/pages/account/ui/AccountPage.module.css b/src/pages/account/ui/AccountPage.module.css
index 26cff9d..98c49fb 100644
--- a/src/pages/account/ui/AccountPage.module.css
+++ b/src/pages/account/ui/AccountPage.module.css
@@ -56,12 +56,37 @@
white-space: nowrap;
}
-.stockMeta {
+.stockMeta,
+.bondMeta {
padding-top: var(--mantine-spacing-xs);
margin-top: var(--mantine-spacing-sm);
border-top: 1px solid var(--mantine-color-gray-2);
}
+.bondCard {
+ padding: var(--mantine-spacing-md);
+}
+
+.bondMain {
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr) auto;
+ gap: var(--mantine-spacing-sm);
+ align-items: center;
+}
+
+.bondIdentity,
+.bondValue {
+ min-width: 0;
+}
+
+.bondIdentifiers {
+ overflow-wrap: anywhere;
+}
+
+.bondValue {
+ white-space: nowrap;
+}
+
.mono {
font-family: var(--mantine-font-family-monospace);
}
diff --git a/src/pages/account/ui/AccountPage.test.tsx b/src/pages/account/ui/AccountPage.test.tsx
index 935e7d9..2ef1891 100644
--- a/src/pages/account/ui/AccountPage.test.tsx
+++ b/src/pages/account/ui/AccountPage.test.tsx
@@ -165,9 +165,12 @@ describe("AccountPage states", () => {
expect(screen.getByText("10 ₽")).toBeInTheDocument();
expect(screen.getByText("-1 ₽")).toBeInTheDocument();
expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
- expect(screen.getByText("Средняя цена: 11 ₽")).toBeInTheDocument();
- expect(screen.getByText("Доля: 100 %")).toBeInTheDocument();
- expect(screen.getByText("RU000A0JX0J2")).toBeInTheDocument();
+ expect(
+ screen.getByText("Средняя цена: 11 ₽ · Доля: 100 %"),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText("Количество: 1 · RU000A0JX0J2"),
+ ).toBeInTheDocument();
expect(screen.queryByText("—")).not.toBeInTheDocument();
expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
"src",
@@ -289,6 +292,34 @@ describe("AccountPage states", () => {
expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
});
+ it("renders bond cards in expanded layout with bond-specific classes", () => {
+ renderPage(
+ ,
+ );
+ expect(screen.getByText("О")).toBeInTheDocument();
+ expect(screen.getByText("+50 ₽")).toBeInTheDocument();
+ expect(
+ screen.getByText("Средняя цена: 950 ₽ · Доля: 100 %"),
+ ).toBeInTheDocument();
+ });
+
it("renders the bonds section as a single-column grid on any screen width", () => {
renderPage(
= (props) => {
const { position, wide = false, variant } = props;
const { t } = useTranslation();
- const isStock = variant === "stock";
+ const isExpanded = variant === "stock" || variant === "bond";
+ const ec =
+ variant === "bond"
+ ? {
+ card: classes.bondCard,
+ main: classes.bondMain,
+ identity: classes.bondIdentity,
+ identifiers: classes.bondIdentifiers,
+ value: classes.bondValue,
+ meta: classes.bondMeta,
+ }
+ : {
+ card: classes.stockCard,
+ main: classes.stockMain,
+ identity: classes.stockIdentity,
+ identifiers: classes.stockIdentifiers,
+ value: classes.stockValue,
+ meta: classes.stockMeta,
+ };
const returnClass = position.returnTone
? classes[position.returnTone]
: undefined;
@@ -46,24 +64,24 @@ const PositionCard: FC = (props) => {
.filter(Boolean)
.join(" · ");
- if (isStock)
+ if (isExpanded)
return (
-
-
+
+
-
+
{position.displayName}
-
+
{identifierText}
-
+
{position.currentValue ? (
{formatMoney(position.currentValue)}
@@ -77,7 +95,7 @@ const PositionCard: FC = (props) => {
{secondaryText ? (
-
+
{secondaryText}
) : null}
diff --git a/src/pages/account/ui/components/PositionSection.view.tsx b/src/pages/account/ui/components/PositionSection.view.tsx
index 6289f26..aa3c229 100644
--- a/src/pages/account/ui/components/PositionSection.view.tsx
+++ b/src/pages/account/ui/components/PositionSection.view.tsx
@@ -20,7 +20,13 @@ const PositionSection: FC = (props) => {
key={`${position.figi}-${position.displayName}-${position.quantity}`}
position={position}
wide={section.wide}
- variant={section.kind === "stocks" ? "stock" : undefined}
+ variant={
+ section.kind === "stocks"
+ ? "stock"
+ : section.kind === "bonds"
+ ? "bond"
+ : undefined
+ }
/>
))}