refactor: share source sync status presentation

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 && (

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" && (