refactor: tighten types and reuse instrument UI

src/features/instrument-details/index.ts

@@ -1,8 +1,11 @@
 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 { InstrumentPageState } from "./ui/InstrumentPageState.view";
 export { InstrumentPosition } from "./ui/InstrumentPosition.view";
+export { InstrumentQuoteStatus } from "./ui/InstrumentQuoteStatus.view";
 export { InstrumentSection } from "./ui/InstrumentSection.view";

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

@@ -11,16 +11,18 @@ function useInstrumentParameters(incomeFilter: "coupons" | "dividends") {
 		value => value === parameters.get("period"),
 	) ?? "month";
 
-	const filters: { categories: OperationCategory[]; value: string }[] = [
-		{ categories: [], value: "all" },
+	const defaultFilter: { categories: OperationCategory[]; value: string } = { categories: [], value: "all" };
+
+	const filters = [
+		defaultFilter,
 		{ categories: ["trade"], value: "trades" },
 		{ categories: ["income"], value: incomeFilter },
 		{ categories: ["tax", "fee", "transfer", "other"], value: "other" },
-	];
+	] satisfies { categories: OperationCategory[]; value: string }[];
 
 	const { categories, value: filter } = filters.find(
 		item => item.value === parameters.get("events"),
-	) ?? filters[0];
+	) ?? defaultFilter;
 
 	const setParameter = (key: string, value: string) => {
 		const next = new URLSearchParams(parameters);

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

@@ -60,3 +60,32 @@
 		grid-column: 1 / -1;
 	}
 }
+
+.page {
+	max-width: 1120px;
+	margin: 0 auto;
+	min-width: 0;
+}
+.price {
+	font-size: clamp(2rem, 4vw, 3.2rem);
+	font-weight: 700;
+	letter-spacing: -0.04em;
+	font-variant-numeric: tabular-nums;
+	line-height: 1.2;
+	overflow-wrap: anywhere;
+}
+.metricsGrid {
+	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/InstrumentMetric.view.tsx

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+
+import { Text } from "@mantine/core";
+
+type InstrumentMetricProps = { label: string; value: string };
+
+const InstrumentMetric: FC<InstrumentMetricProps> = props => (
+	<div>
+		<Text c="dimmed" size="xs">
+			{props.label}
+		</Text>
+
+		<Text fw={600} size="lg">
+			{props.value}
+		</Text>
+	</div>
+);
+
+export { InstrumentMetric };

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

@@ -0,0 +1,33 @@
+import type { FC } from "react";
+
+import { Badge, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import { formatSnapshotTime } from "@/shared/lib";
+
+type InstrumentQuoteStatusProps = {
+	quote?: { priceAt: null | string; tradingStatus: null | string };
+};
+
+const InstrumentQuoteStatus: FC<InstrumentQuoteStatusProps> = (props) => {
+	const { quote } = props;
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<Badge color="gray" variant="light">
+				{t(`stock.trading.${quote?.tradingStatus}`, {
+					defaultValue: t("stock.trading.unknown"),
+				})}
+			</Badge>
+
+			{!!quote?.priceAt && (
+				<Text c="dimmed" size="xs">
+					{t("stock.priceAt", { date: formatSnapshotTime(quote.priceAt) })}
+				</Text>
+			)}
+		</>
+	);
+};
+
+export { InstrumentQuoteStatus };