refactor: clarify frontend module ownership

src/pages/bond/ui/BondPage/BondPage.view.tsx

@@ -7,19 +7,21 @@ import {
 	Skeleton,
 	Stack,
 	Text,
-	Title,
 } from "@mantine/core";
 import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
 import {
 	InstrumentChart,
-	instrumentDetailsStyles,
 	InstrumentEvents,
 	InstrumentHeader,
 	InstrumentMetric,
+	InstrumentMetrics,
+	InstrumentPage,
 	InstrumentPosition,
+	InstrumentPrice,
 	InstrumentQuoteStatus,
+	InstrumentTerms,
 } from "@/features/instrument-details";
 import {
 	formatDate,
@@ -75,11 +77,11 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 					{t("bond.percentOfNominal")}
 				</Text>
 
-				<Text className={instrumentDetailsStyles.price}>
+				<InstrumentPrice>
 					{vm.quote?.pricePercent == undefined
 						? t("bond.unknown")
 						: `${formatDecimal(vm.quote.pricePercent)} %`}
-				</Text>
+				</InstrumentPrice>
 
 				{vm.quote?.changePercentagePoints != undefined && (
 					<Text fw={600}>
@@ -131,7 +133,7 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 	}
 
 	return (
-		<Stack className={instrumentDetailsStyles.page} gap="lg">
+		<InstrumentPage>
 			<InstrumentHeader
 				logoSrc={vm.logoSrc}
 				name={bond.name}
@@ -168,12 +170,9 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 					</Text>
 				)}
 
-				<div className={instrumentDetailsStyles.embeddedSection}>
-					<Title mb="md" order={2} size="h3">
-						{t("bond.terms")}
-					</Title>
+				<InstrumentTerms title={t("bond.terms")}>
 
-					<div className={instrumentDetailsStyles.metricsGrid}>
+					<InstrumentMetrics>
 						<InstrumentMetric
 							label={t("bond.nominal")}
 							value={formatMoney(bond.nominal)}
@@ -191,8 +190,8 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 						<InstrumentMetric label={t("bond.couponFrequency")} value={couponFrequency} />
 
 						<InstrumentMetric label={t("bond.lot")} value={lotSize} />
-					</div>
-				</div>
+					</InstrumentMetrics>
+				</InstrumentTerms>
 			</InstrumentHeader>
 
 			<BondMetrics metrics={vm.metrics} state={vm.metricsState} />
@@ -218,7 +217,7 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 				incomeLabel={t("bond.coupons")}
 				vm={vm}
 			/>
-		</Stack>
+		</InstrumentPage>
 	);
 };
 

src/pages/bond/ui/BondPage/components/BondMetrics.view.tsx

@@ -5,8 +5,18 @@ import { useTranslation } from "react-i18next";
 
 import type { BondMetrics as Metrics } from "@/entities/bond";
 
-import { instrumentDetailsStyles, InstrumentMetric, InstrumentSection, type SectionState } from "@/features/instrument-details";
-import { formatDate, formatDecimal, formatMoney, formatSnapshotTime } from "@/shared/lib";
+import {
+	InstrumentMetric,
+	InstrumentMetrics,
+	InstrumentSection,
+	type SectionState,
+} from "@/features/instrument-details";
+import {
+	formatDate,
+	formatDecimal,
+	formatMoney,
+	formatSnapshotTime,
+} from "@/shared/lib";
 
 type BondMetricsProps = { metrics?: Metrics; state: SectionState };
 
@@ -72,7 +82,7 @@ const BondMetrics: FC<BondMetricsProps> = (props) => {
 		<InstrumentSection state={state} title={t("bond.metrics")}>
 			{!!metrics && (
 				<Stack gap="md">
-					<div className={instrumentDetailsStyles.metricsGrid}>
+					<InstrumentMetrics>
 						<InstrumentMetric label={t("bond.creditRating")} value={rating} />
 
 						<InstrumentMetric
@@ -92,7 +102,7 @@ const BondMetrics: FC<BondMetricsProps> = (props) => {
 						<InstrumentMetric label={t("bond.effectiveYield")} value={effectiveYield} />
 
 						<InstrumentMetric label={t("bond.couponYield")} value={couponYield} />
-					</div>
+					</InstrumentMetrics>
 
 					{!!metrics.creditRating && (
 						<Group gap="xs">