feat(portfolio): add expanded layout for bond position cards

Add variant="bond" to PositionCard with bond-specific CSS classes
(.bondCard, .bondMain, etc.) matching the stock expanded layout.
PositionSection now passes variant based on section kind.
Bond cards render 3-column grid (logo | identity | value) with
meta row, identical to stock cards.

src/pages/account/ui/components/PositionCard.view.tsx

@@ -9,13 +9,31 @@ import { PositionLogo } from "./PositionLogo.view";
 type PositionCardProps = {
 	position: AccountPagePosition;
 	wide?: boolean;
-	variant?: "stock";
+	variant?: "stock" | "bond";
 };
 
 const PositionCard: FC<PositionCardProps> = (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<PositionCardProps> = (props) => {
 		.filter(Boolean)
 		.join(" · ");
 
-	if (isStock)
+	if (isExpanded)
 		return (
-			<Card className={`${classes.tile} ${classes.stockCard}`} withBorder>
-				<div className={classes.stockMain}>
+			<Card className={`${classes.tile} ${ec.card}`} withBorder>
+				<div className={ec.main}>
 					<PositionLogo
 						key={position.logoSrc ?? "no-logo"}
 						src={position.logoSrc}
 						label={position.displayName}
 					/>
-					<Stack gap={2} miw={0} className={classes.stockIdentity}>
+					<Stack gap={2} miw={0} className={ec.identity}>
 						<Text fw={600} lineClamp={1}>
 							{position.displayName}
 						</Text>
-						<Text c="dimmed" size="xs" className={classes.stockIdentifiers}>
+						<Text c="dimmed" size="xs" className={ec.identifiers}>
 							{identifierText}
 						</Text>
 					</Stack>
-					<Stack gap={2} align="flex-end" className={classes.stockValue}>
+					<Stack gap={2} align="flex-end" className={ec.value}>
 						{position.currentValue ? (
 							<Text fw={700} size="lg">
 								{formatMoney(position.currentValue)}
@@ -77,7 +95,7 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 					</Stack>
 				</div>
 				{secondaryText ? (
-					<Text c="dimmed" size="xs" className={classes.stockMeta}>
+					<Text c="dimmed" size="xs" className={ec.meta}>
 						{secondaryText}
 					</Text>
 				) : null}

src/pages/account/ui/components/PositionSection.view.tsx

@@ -20,7 +20,13 @@ const PositionSection: FC<PositionSectionProps> = (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
+						}
 					/>
 				))}
 			</SimpleGrid>