refactor: share source sync status presentation

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