refactor: clarify frontend module ownership

src/features/instrument-details/index.ts

@@ -1,10 +1,15 @@
 export { section, type SectionState } from "./model/section";
 export { useInstrumentParameters } from "./model/useInstrumentParameters";
 export { InstrumentChart } from "./ui/InstrumentChart/InstrumentChart.view";
-export { default as instrumentDetailsStyles } from "./ui/InstrumentDetails.module.css";
 export { InstrumentEvents } from "./ui/InstrumentEvents.view";
 export { InstrumentHeader } from "./ui/InstrumentHeader/InstrumentHeader.view";
-export { InstrumentMetric } from "./ui/InstrumentMetric.view";
+export {
+	InstrumentMetrics,
+	InstrumentPage,
+	InstrumentPrice,
+	InstrumentTerms,
+} from "./ui/InstrumentLayout.view";
+export { InstrumentMetric } from "./ui/InstrumentMetric/InstrumentMetric.view";
 export { InstrumentPageState } from "./ui/InstrumentPageState.view";
 export { InstrumentPosition } from "./ui/InstrumentPosition.view";
 export { InstrumentQuoteStatus } from "./ui/InstrumentQuoteStatus.view";

src/features/instrument-details/model/types.ts

@@ -1,10 +1,13 @@
+import type { BondCandles, BondPosition } from "@/entities/bond";
 import type { BrokerageOperation } from "@/entities/broker-operation";
-import type { paths } from "@/shared/api";
+import type { StockCandles, StockPosition } from "@/entities/stock";
 
 import type { SectionState } from "./section";
 
-type Candles = NonNullable<
-	paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"]
+type Candles = Pick<BondCandles | StockCandles,
+	"candles"
+	| "currency"
+	| "historyFrom"
 >;
 
 type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
@@ -33,8 +36,6 @@ type InstrumentPositionVm = {
 	positionState: SectionState;
 };
 
-type Position = NonNullable<
-	paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]
->;
+type Position = BondPosition | StockPosition;
 
 export type { InstrumentChartProps, InstrumentEventsVm, InstrumentPositionVm };

src/features/instrument-details/ui/InstrumentDetails.module.css

@@ -75,15 +75,14 @@
 	overflow-wrap: anywhere;
 }
 .metricsGrid {
+	--instrument-metric-padding: var(--mantine-spacing-sm);
+	--instrument-metric-background: var(--wl-color-subtle);
+	--instrument-metric-radius: var(--mantine-radius-md);
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
 	gap: var(--mantine-spacing-lg);
 }
-.metricsGrid > div {
-	padding: var(--mantine-spacing-sm);
-	background: var(--wl-color-subtle);
-	border-radius: var(--mantine-radius-md);
-}
+
 @media (max-width: 48em) {
 	.metricsGrid {
 		grid-template-columns: repeat(2, minmax(0, 1fr));

src/features/instrument-details/ui/InstrumentLayout.view.tsx

@@ -0,0 +1,31 @@
+import type { FC, PropsWithChildren } from "react";
+
+import { Stack, Text, type TextProps, Title } from "@mantine/core";
+
+import classes from "./InstrumentDetails.module.css";
+
+type InstrumentPriceProps = PropsWithChildren<Pick<TextProps, "mt">>;
+
+type InstrumentTermsProps = PropsWithChildren<{ title: string }>;
+
+const InstrumentPage: FC<PropsWithChildren> = props => (
+	<Stack className={classes.page} gap="lg">{props.children}</Stack>
+);
+
+const InstrumentPrice: FC<InstrumentPriceProps> = props => (
+	<Text className={classes.price} mt={props.mt}>{props.children}</Text>
+);
+
+const InstrumentMetrics: FC<PropsWithChildren> = props => (
+	<div className={classes.metricsGrid}>{props.children}</div>
+);
+
+const InstrumentTerms: FC<InstrumentTermsProps> = props => (
+	<div className={classes.embeddedSection}>
+		<Title mb="md" order={2} size="h3">{props.title}</Title>
+
+		{props.children}
+	</div>
+);
+
+export { InstrumentMetrics, InstrumentPage, InstrumentPrice, InstrumentTerms };

src/features/instrument-details/ui/InstrumentMetric/InstrumentMetric.module.css

@@ -0,0 +1,5 @@
+.metric {
+	padding: var(--instrument-metric-padding, 0);
+	background: var(--instrument-metric-background, transparent);
+	border-radius: var(--instrument-metric-radius, 0);
+}

src/features/instrument-details/ui/InstrumentMetric/InstrumentMetric.view.tsx

@@ -2,10 +2,12 @@ import type { FC } from "react";
 
 import { Text } from "@mantine/core";
 
+import classes from "./InstrumentMetric.module.css";
+
 type InstrumentMetricProps = { label: string; value: string };
 
 const InstrumentMetric: FC<InstrumentMetricProps> = props => (
-	<div>
+	<div className={classes.metric}>
 		<Text c="dimmed" size="xs">
 			{props.label}
 		</Text>