fix(sync-button): prevent time-ago casing flicker

Author: PavelLaptev

apps/desktop/src/components/SyncButton.svelte

@@ -49,11 +49,11 @@
 		}
 	}}
 >
-	<span class="capitalize">
+	<span>
 		{#if loading}
 			Fetching...
 		{:else if lastFetched}
-			<TimeAgo date={lastFetched} addSuffix={true} />
+			<TimeAgo date={lastFetched} addSuffix={true} capitalize={true} />
 		{:else}
 			Refetch
 		{/if}

packages/ui/src/lib/components/TimeAgo.svelte

@@ -6,19 +6,26 @@
 		date?: Date;
 		addSuffix?: boolean;
 		showTooltip?: boolean;
+		capitalize?: boolean;
 	}
 
-	const { date, addSuffix, showTooltip = true }: Props = $props();
+	const { date, addSuffix, showTooltip = true, capitalize = false }: Props = $props();
 	const store = $derived(createTimeAgoStore(date, addSuffix));
 	const absoluteTime = $derived(date ? getAbsoluteTimestamp(date) : '');
+
+	function formatText(value: string | undefined): string {
+		if (!value) return '';
+		if (!capitalize) return value;
+		return `${value[0].toUpperCase()}${value.slice(1)}`;
+	}
 </script>
 
 {#if store}
 	{#if showTooltip && date}
 		<Tooltip text={absoluteTime}>
-			<span>{$store}</span>
+			<span>{formatText($store)}</span>
 		</Tooltip>
 	{:else}
-		{$store}
+		{formatText($store)}
 	{/if}
 {/if}