refactor: clarify frontend module ownership

src/pages/stock/ui/StockPage/components/StockCompany.view.tsx

@@ -0,0 +1,120 @@
+import type { FC } from "react";
+
+import {
+	Alert,
+	Button,
+	Group,
+	Stack,
+	Text,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import {
+	InstrumentMetric,
+	InstrumentMetrics,
+	InstrumentSection as StockSection,
+} from "@/features/instrument-details";
+
+import type { StockPageVm } from "../StockPage.vm";
+
+const compactMetricFormatter = new Intl.NumberFormat("ru-RU", {
+	maximumFractionDigits: 2,
+	notation: "compact",
+});
+
+const metricFormatter = new Intl.NumberFormat("ru-RU", {
+	maximumFractionDigits: 2,
+	notation: "standard",
+});
+
+type StockCompanyProps = Pick<StockPageVm, "company" | "companyState"> & {
+	stock: NonNullable<StockPageVm["stock"]>;
+};
+
+const StockCompany: FC<StockCompanyProps> = (props) => {
+	const { stock } = props;
+	const { t } = useTranslation();
+	let companyMetricsContent;
+
+	if (props.company) {
+		if (props.company.metrics.length > 0) {
+			companyMetricsContent = (
+				<InstrumentMetrics>
+					{props.company.metrics.map((metric) => {
+						const label = [t(`stock.metrics.${metric.key}`), metric.period].filter(Boolean).join(" · ");
+						const formatter = metric.unit === "money" ? compactMetricFormatter : metricFormatter;
+						const value = `${formatter.format(metric.value)} ${metricUnit(metric, t("stock.currencyUnknown"))}`;
+
+						return (
+							<InstrumentMetric key={metric.key} label={label} value={value} />
+						);
+					})}
+				</InstrumentMetrics>
+			);
+		}
+		else {
+			companyMetricsContent = <Text c="dimmed">{t("stock.noFundamentals")}</Text>;
+		}
+	}
+
+	return (
+		<StockSection
+			embedded
+			state={props.companyState}
+			title={t("stock.company")}
+		>
+			<Group gap="xl" mb="md">
+				{!!stock.sector && (
+					<Text size="sm">
+						{t("stock.sector")}:{" "}
+						{t(`stock.sectors.${stock.sector}`, {
+							defaultValue: stock.sector,
+						})}
+					</Text>
+				)}
+
+				{stock.lot !== null && <Text size="sm">{t("stock.lot", { value: stock.lot })}</Text>}
+			</Group>
+
+			{!!props.company && (
+				<Stack gap="lg">
+					{props.company.unavailable.length > 0 && (
+						<Alert aria-live="polite" color="orange" role="status">
+							<Group justify="space-between">
+								<Text size="sm">{t("stock.partialCompany")}</Text>
+
+								<Button
+									onClick={props.companyState.retry}
+									size="xs"
+									variant="default"
+								>
+									{t("accounts.retry")}
+								</Button>
+							</Group>
+						</Alert>
+					)}
+
+					{companyMetricsContent}
+
+					<Text c="dimmed" size="xs">
+						{t("stock.periodNote")}
+					</Text>
+				</Stack>
+			)}
+		</StockSection>
+	);
+};
+
+function metricUnit(
+	metric: NonNullable<StockPageVm["company"]>["metrics"][number],
+	unknownCurrency: string,
+) {
+	if (metric.unit === "money")
+		return metric.currency === "RUB"
+			? "₽"
+			: (metric.currency ?? unknownCurrency);
+
+	return metric.unit === "percent" ? "%" : "×";
+}
+
+export { StockCompany };

src/pages/stock/ui/StockPage/components/StockQuote.view.tsx

@@ -0,0 +1,98 @@
+import type { FC } from "react";
+
+import {
+	Group,
+	Skeleton,
+	Text,
+} from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
+import { useTranslation } from "react-i18next";
+
+import {
+	InstrumentPrice,
+	InstrumentQuoteStatus,
+} from "@/features/instrument-details";
+import {
+	formatDate,
+	formatDecimal,
+	formatMoney,
+} from "@/shared/lib";
+
+import type { StockPageVm } from "../StockPage.vm";
+
+import classes from "../StockPage.module.css";
+
+type StockQuoteProps = Pick<StockPageVm, "quote" | "quoteState">;
+
+const StockQuote: FC<StockQuoteProps> = (props) => {
+	const { t } = useTranslation();
+
+	const appearanceClass = props.quote?.change?.value.startsWith("-")
+		? classes.negative
+		: classes.positive;
+
+	let quoteContent;
+
+	if (props.quoteState.loading) {
+		quoteContent = (
+			<LoadingSkeleton label={t("stock.loadingPrice")}>
+				<Skeleton h={55} mt="lg" w="50%" />
+			</LoadingSkeleton>
+		);
+	}
+	else {
+		quoteContent = (
+			<div aria-live="polite">
+				<InstrumentPrice mt="lg">
+					{formatMoney(props.quote?.price)}
+				</InstrumentPrice>
+
+				{!!props.quote?.change && (
+					<Text className={appearanceClass} fw={600}>
+						{props.quote.change.value.startsWith("-") ? "" : "+"}
+
+						{formatMoney(props.quote.change)}
+
+						{props.quote.changePercent === null
+							? ""
+							: ` (${formatDecimal(props.quote.changePercent)} %)`}
+					</Text>
+				)}
+
+				{props.quote?.previousCloseDate
+					? (
+							<Text c="dimmed" size="xs">
+								{t("stock.changeBase", {
+									date: formatDate(props.quote.previousCloseDate),
+								})}
+							</Text>
+						)
+					: (
+							<Text c="dimmed" size="xs">
+								{t("stock.noComparison")}
+							</Text>
+						)}
+
+				<Group gap="sm" mt="sm">
+					<InstrumentQuoteStatus quote={props.quote} />
+				</Group>
+
+				{!!props.quote?.unavailable.length && (
+					<Text c="dimmed" mt="xs" size="xs">
+						{t("stock.partialQuote")}
+					</Text>
+				)}
+
+				{!!props.quoteState.refreshing && (
+					<Text c="dimmed" role="status" size="xs">
+						{t("accounts.refreshing")}
+					</Text>
+				)}
+			</div>
+		);
+	}
+
+	return quoteContent;
+};
+
+export { StockQuote };