From 0bc8bc36b7263b7f0120a08df840b290b40d8116 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Wed, 30 Sep 2026 07:40:23 +0300
Subject: [PATCH] refactor: share source sync status presentation

---
 .../BrokerageAccountList.tsx                  | 55 ++++++++++++-------
 .../BrokerageEventsPreview.tsx                | 25 ++++-----
 .../ui/InstrumentSection.view.tsx             | 15 ++---
 .../InvestmentRefreshState.view.tsx           | 10 +---
 .../AccountEventsPageLoaded.view.tsx          | 10 +---
 .../AccountIncomePageLoaded.view.tsx          | 10 +---
 .../AccountOperationsPageLoaded.view.tsx      | 11 +---
 .../components/IncomeSummary.view.tsx         | 25 +++++----
 .../components/RecentOperations.view.tsx      | 25 ++++-----
 .../SourceSyncStatus.test.tsx                 | 46 ++++++++++++++++
 .../ui/SourceSyncStatus/SourceSyncStatus.tsx  | 37 +++++++++++++
 src/shared/ui/index.ts                        |  1 +
 12 files changed, 168 insertions(+), 102 deletions(-)
 create mode 100644 src/shared/ui/SourceSyncStatus/SourceSyncStatus.test.tsx
 create mode 100644 src/shared/ui/SourceSyncStatus/SourceSyncStatus.tsx
 create mode 100644 src/shared/ui/index.ts

diff --git a/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx b/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx
index 345a18d..8d1e01b 100644
--- a/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx
+++ b/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx
@@ -5,7 +5,8 @@ import { WalletIcon } from "@wealthledger/icons";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
-import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib";
+import { formatDate, formatMoney } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 import type { BrokerageAccountCard } from "../../model/display";
 
@@ -53,6 +54,39 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
 	);
 };
 
+type BrokerageAccountSourceStatusProps = {
+	source: BrokerageAccountCard["source"];
+};
+
+const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
+	props,
+) => {
+	const { source } = props;
+	const { t } = useTranslation();
+
+	const isSyncing
+		= source?.sync.state === "running" || source?.sync.state === "queued";
+
+	const errorText
+		= source?.sync.state === "failed" ? t("accounts.refreshError") : null;
+
+	return (
+		<>
+			<SourceSyncStatus
+				errorText={errorText}
+				lastSuccessfulAt={source?.lastSuccessfulAt}
+				stale={source?.freshness === "stale"}
+			/>
+
+			{isSyncing && (
+				<Text role="status" size="xs">
+					{t("accounts.refreshing")}
+				</Text>
+			)}
+		</>
+	);
+};
+
 const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
 	const { accounts } = props;
 	const { t } = useTranslation();
@@ -90,24 +124,7 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
 
 						<BrokerageAccountSummary summary={summary} />
 
-						{!!source?.lastSuccessfulAt && (
-							<Text c="dimmed" size="xs">
-								{t("investment.sourceTime", {
-									date: formatSnapshotTime(source.lastSuccessfulAt),
-								})}
-							</Text>
-						)}
-
-						{(source?.sync.state === "running"
-							|| source?.sync.state === "queued") && (
-							<Text role="status" size="xs">
-								{t("accounts.refreshing")}
-							</Text>
-						)}
-
-						{source?.sync.state === "failed" && <Text size="xs">{t("accounts.refreshError")}</Text>}
-
-						{source?.freshness === "stale" && <Text size="xs">{t("investment.stale")}</Text>}
+						<BrokerageAccountSourceStatus source={source} />
 					</Stack>
 
 					{!!positionCounts && (
diff --git a/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx b/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx
index 80d87a0..40e3734 100644
--- a/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx
+++ b/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx
@@ -5,7 +5,7 @@ import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
-import { formatSnapshotTime } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 import type { BrokerageEvent } from "../../api/useBrokerageEvents";
 
@@ -33,22 +33,19 @@ const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
 	const { events } = props;
 	const { t } = useTranslation();
 
+	const errorText
+		= events.state === "loaded" && events.refreshError
+			? t("accounts.refreshError")
+			: null;
+
 	return (
 		<Stack gap="sm">
 			{events.state === "loaded" && (
-				<>
-					{!!events.lastSuccessfulAt && (
-						<Text c="dimmed" size="xs">
-							{t("investment.sourceTime", {
-								date: formatSnapshotTime(events.lastSuccessfulAt),
-							})}
-						</Text>
-					)}
-
-					{!!events.stale && <Text size="xs">{t("investment.stale")}</Text>}
-
-					{!!events.refreshError && <Text role="status">{t("accounts.refreshError")}</Text>}
-				</>
+				<SourceSyncStatus
+					errorText={errorText}
+					lastSuccessfulAt={events.lastSuccessfulAt}
+					stale={events.stale}
+				/>
 			)}
 
 			{events.state === "loading" && (
diff --git a/src/features/instrument-details/ui/InstrumentSection.view.tsx b/src/features/instrument-details/ui/InstrumentSection.view.tsx
index 9119dd3..64694b9 100644
--- a/src/features/instrument-details/ui/InstrumentSection.view.tsx
+++ b/src/features/instrument-details/ui/InstrumentSection.view.tsx
@@ -13,7 +13,7 @@ import {
 import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
-import { formatSnapshotTime } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 import type { SectionState } from "../model/section";
 
@@ -80,18 +80,13 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
 				{props.controls}
 			</Group>
 
-			{!!props.state.stale && <Text size="xs">{t("investment.stale")}</Text>}
+			<SourceSyncStatus
+				lastSuccessfulAt={props.state.lastSuccessfulAt}
+				stale={props.state.stale}
+			/>
 
 			{!!props.state.partial && <Text role="status">{t("investment.partial")}</Text>}
 
-			{!!props.state.lastSuccessfulAt && (
-				<Text c="dimmed" size="xs">
-					{t("investment.sourceTime", {
-						date: formatSnapshotTime(props.state.lastSuccessfulAt),
-					})}
-				</Text>
-			)}
-
 			{!!props.state.refreshing && (
 				<Text c="dimmed" role="status" size="xs">
 					{t("accounts.refreshing")}
diff --git a/src/features/tbank-connection/ui/InvestmentRefreshState/InvestmentRefreshState.view.tsx b/src/features/tbank-connection/ui/InvestmentRefreshState/InvestmentRefreshState.view.tsx
index 796d95a..72b1f17 100644
--- a/src/features/tbank-connection/ui/InvestmentRefreshState/InvestmentRefreshState.view.tsx
+++ b/src/features/tbank-connection/ui/InvestmentRefreshState/InvestmentRefreshState.view.tsx
@@ -3,7 +3,7 @@ import type { FC } from "react";
 import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
-import { formatSnapshotTime } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 type InvestmentRefreshStateProps = {
 	labelScope?: "accounts" | "portfolio";
@@ -20,13 +20,7 @@ const InvestmentRefreshState: FC<InvestmentRefreshStateProps> = (props) => {
 
 	return (
 		<>
-			{!!props.lastSuccessfulAt && (
-				<Text c="dimmed" size="xs">
-					{t("investment.sourceTime", {
-						date: formatSnapshotTime(props.lastSuccessfulAt),
-					})}
-				</Text>
-			)}
+			<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
 
 			<Button
 				disabled={refreshing}
diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx
index 649e9e1..624ab0c 100644
--- a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx
+++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx
@@ -16,7 +16,7 @@ import {
 	BrokerageEventCard,
 	brokerageEventKey,
 } from "@/entities/brokerage-event";
-import { formatSnapshotTime } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
 
@@ -55,13 +55,7 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
 
 	return (
 		<Stack gap="lg">
-			{!!props.lastSuccessfulAt && (
-				<Text c="dimmed" size="xs">
-					{t("investment.sourceTime", {
-						date: formatSnapshotTime(props.lastSuccessfulAt),
-					})}
-				</Text>
-			)}
+			<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
 
 			<Title order={1}>{t("events.title")}</Title>
 
diff --git a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx
index 91d91d1..219c1f6 100644
--- a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx
+++ b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx
@@ -13,7 +13,7 @@ import { StateView } from "@wealthledger/ui";
 import { FormProvider } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { formatSnapshotTime } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
 
@@ -47,13 +47,7 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 
 	return (
 		<Stack className={classes.page} gap="lg">
-			{!!props.lastSuccessfulAt && (
-				<Text c="dimmed" size="xs">
-					{t("investment.sourceTime", {
-						date: formatSnapshotTime(props.lastSuccessfulAt),
-					})}
-				</Text>
-			)}
+			<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
 
 			<Title order={1}>{t("income.title")}</Title>
 
diff --git a/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx b/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx
index af02e2d..504c644 100644
--- a/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx
+++ b/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx
@@ -7,7 +7,6 @@ import {
 	MultiSelect,
 	Progress,
 	Stack,
-	Text,
 	Title,
 } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
@@ -15,7 +14,7 @@ import { StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
 import { LedgerEntryRow, operationCategories } from "@/entities/broker-operation";
-import { formatSnapshotTime } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
 
@@ -63,13 +62,7 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 
 	return (
 		<Stack gap="lg">
-			{!!props.lastSuccessfulAt && (
-				<Text c="dimmed" size="xs">
-					{t("investment.sourceTime", {
-						date: formatSnapshotTime(props.lastSuccessfulAt),
-					})}
-				</Text>
-			)}
+			<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
 
 			<Title order={1}>{t("ledger.title")}</Title>
 
diff --git a/src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx b/src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx
index 9f4af99..7a7afcf 100644
--- a/src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx
+++ b/src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx
@@ -7,7 +7,8 @@ import { Link } from "react-router";
 
 import type { IncomeSummary as IncomeSummaryData } from "@/entities/income";
 
-import { formatMoney, formatSnapshotTime } from "@/shared/lib";
+import { formatMoney } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 type IncomeSummaryProps
 	= | {
@@ -25,6 +26,12 @@ type IncomeSummaryProps
 
 const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 	const { t } = useTranslation();
+
+	const errorText
+		= props.state === "loaded" && props.refreshError
+			? t("income.refreshError")
+			: null;
+
 	if (props.state === "loading" || props.state === "partial")
 		return (
 			<Text c="dimmed" role="status">
@@ -59,17 +66,11 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 
 	return (
 		<Stack gap="xs">
-			{!!props.lastSuccessfulAt && (
-				<Text c="dimmed" size="xs">
-					{t("investment.sourceTime", {
-						date: formatSnapshotTime(props.lastSuccessfulAt),
-					})}
-				</Text>
-			)}
-
-			{!!props.stale && <Text size="xs">{t("investment.stale")}</Text>}
-
-			{!!props.refreshError && <Text role="status">{t("income.refreshError")}</Text>}
+			<SourceSyncStatus
+				errorText={errorText}
+				lastSuccessfulAt={props.lastSuccessfulAt}
+				stale={props.stale}
+			/>
 
 			{props.summary.totalsByCurrency.map(total => (
 				<Paper key={total.currency} p="sm" withBorder>
diff --git a/src/pages/account/ui/AccountPage/components/RecentOperations.view.tsx b/src/pages/account/ui/AccountPage/components/RecentOperations.view.tsx
index 0ba28bc..7e6acf1 100644
--- a/src/pages/account/ui/AccountPage/components/RecentOperations.view.tsx
+++ b/src/pages/account/ui/AccountPage/components/RecentOperations.view.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
 import { LedgerEntryRow } from "@/entities/broker-operation";
-import { formatSnapshotTime } from "@/shared/lib";
+import { SourceSyncStatus } from "@/shared/ui";
 
 import type { AccountPageRecentOperations } from "../../../model/previews";
 
@@ -18,22 +18,19 @@ const RecentOperations: FC<RecentOperationsProps> = (props) => {
 	const { t } = useTranslation();
 	const { operations } = props;
 
+	const errorText
+		= operations.state === "loaded" && operations.refreshError
+			? t("accounts.refreshError")
+			: null;
+
 	return (
 		<Stack gap="sm">
 			{operations.state === "loaded" && (
-				<>
-					{!!operations.lastSuccessfulAt && (
-						<Text c="dimmed" size="xs">
-							{t("investment.sourceTime", {
-								date: formatSnapshotTime(operations.lastSuccessfulAt),
-							})}
-						</Text>
-					)}
-
-					{!!operations.stale && <Text size="xs">{t("investment.stale")}</Text>}
-
-					{!!operations.refreshError && <Text role="status">{t("accounts.refreshError")}</Text>}
-				</>
+				<SourceSyncStatus
+					errorText={errorText}
+					lastSuccessfulAt={operations.lastSuccessfulAt}
+					stale={operations.stale}
+				/>
 			)}
 
 			{operations.state === "loading" && (
diff --git a/src/shared/ui/SourceSyncStatus/SourceSyncStatus.test.tsx b/src/shared/ui/SourceSyncStatus/SourceSyncStatus.test.tsx
new file mode 100644
index 0000000..d5b4caa
--- /dev/null
+++ b/src/shared/ui/SourceSyncStatus/SourceSyncStatus.test.tsx
@@ -0,0 +1,46 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { SourceSyncStatus, type SourceSyncStatusProps } from "./SourceSyncStatus";
+
+function renderStatus(props: SourceSyncStatusProps) {
+	render(
+		<MantineProvider>
+			<SourceSyncStatus {...props} />
+		</MantineProvider>,
+	);
+}
+
+describe("SourceSyncStatus", () => {
+	it("renders nothing without source data", () => {
+		renderStatus({});
+
+		expect(screen.queryByRole("status")).not.toBeInTheDocument();
+		expect(screen.queryByText(/Данные/)).not.toBeInTheDocument();
+	});
+
+	it("renders the source timestamp", () => {
+		renderStatus({ lastSuccessfulAt: "2026-02-03T10:15:00.000Z" });
+
+		expect(screen.getByText(/Данные на/)).toBeInTheDocument();
+	});
+
+	it("announces the caller-provided error text as a status", () => {
+		renderStatus({ errorText: "Обновление не удалось" });
+
+		expect(screen.getByRole("status")).toHaveTextContent("Обновление не удалось");
+	});
+
+	it("keeps the notices next to the timestamp they belong to", () => {
+		renderStatus({
+			errorText: "Обновление не удалось",
+			lastSuccessfulAt: "2026-02-03T10:15:00.000Z",
+			stale: true,
+		});
+
+		expect(screen.getByText(/Данные на/)).toBeInTheDocument();
+		expect(screen.getByText("Данные требуют обновления")).toBeInTheDocument();
+		expect(screen.getByRole("status")).toHaveTextContent("Обновление не удалось");
+	});
+});
diff --git a/src/shared/ui/SourceSyncStatus/SourceSyncStatus.tsx b/src/shared/ui/SourceSyncStatus/SourceSyncStatus.tsx
new file mode 100644
index 0000000..7f68dc5
--- /dev/null
+++ b/src/shared/ui/SourceSyncStatus/SourceSyncStatus.tsx
@@ -0,0 +1,37 @@
+import type { FC } from "react";
+
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import { formatSnapshotTime } from "@/shared/lib";
+
+// Owns the "when did the source last answer" line and the two notices that
+// always travel with it. Surfaces keep their own busy indicator: a list card
+// shows a muted line, a page header a progress bar — that is a product call.
+type SourceSyncStatusProps = {
+	errorText?: null | string;
+	lastSuccessfulAt?: null | string;
+	stale?: boolean;
+};
+
+const SourceSyncStatus: FC<SourceSyncStatusProps> = (props) => {
+	const { t } = useTranslation();
+
+	return (
+		<>
+			{!!props.lastSuccessfulAt && (
+				<Text c="dimmed" size="xs">
+					{t("investment.sourceTime", {
+						date: formatSnapshotTime(props.lastSuccessfulAt),
+					})}
+				</Text>
+			)}
+
+			{!!props.stale && <Text size="xs">{t("investment.stale")}</Text>}
+
+			{!!props.errorText && <Text role="status">{props.errorText}</Text>}
+		</>
+	);
+};
+
+export { SourceSyncStatus, type SourceSyncStatusProps };
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
new file mode 100644
index 0000000..98b77c7
--- /dev/null
+++ b/src/shared/ui/index.ts
@@ -0,0 +1 @@
+export { SourceSyncStatus } from "./SourceSyncStatus/SourceSyncStatus";