refactor: share source sync status presentation

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>

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