refactor: share source sync status presentation

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")}

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}