From e7635d8149aa71f8fa0fc34e6a7d4f3fa5e94ef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojt=C4=9Bch=20K=C5=99i=C5=BEan?= <voytxt@voytxt.com>
Date: Sat, 13 Jun 2026 22:35:32 +0200
Subject: [PATCH] fix hydration mismatch in clock and countdown

---
 .../utilities/ClockCard/ClockCard.svelte      |  61 +++---
 .../CountdownCard/CountdownCard.svelte        | 197 +++++++++---------
 2 files changed, 132 insertions(+), 126 deletions(-)

diff --git a/src/lib/cards/utilities/ClockCard/ClockCard.svelte b/src/lib/cards/utilities/ClockCard/ClockCard.svelte
index 12fb2722..d27460f1 100644
--- a/src/lib/cards/utilities/ClockCard/ClockCard.svelte
+++ b/src/lib/cards/utilities/ClockCard/ClockCard.svelte
@@ -3,6 +3,7 @@
 	import type { ContentComponentProps } from '../../types';
 	import type { ClockCardData } from './index';
 	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 
 	let { item }: ContentComponentProps = $props();
 
@@ -56,32 +57,34 @@
 	});
 </script>
 
-<div class="@container flex h-full w-full flex-col items-center justify-center p-4">
-	<NumberFlowGroup>
-		<div
-			class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-center text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
-			style="font-variant-numeric: tabular-nums;"
-		>
-			<NumberFlow value={clockHours} format={{ minimumIntegerDigits: 2 }} />
-			<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
-			<NumberFlow
-				value={clockMinutes}
-				format={{ minimumIntegerDigits: 2 }}
-				digits={{ 1: { max: 5 } }}
-				trend={1}
-			/>
-			<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
-			<NumberFlow
-				value={clockSeconds}
-				format={{ minimumIntegerDigits: 2 }}
-				digits={{ 1: { max: 5 } }}
-				trend={1}
-			/>
-		</div>
-	</NumberFlowGroup>
-	{#if timezoneDisplay}
-		<div class="text-base-500 dark:text-base-400 accent:text-base-600 mt-1 text-xs @sm:text-sm">
-			{timezoneDisplay}
-		</div>
-	{/if}
-</div>
+{#if browser}
+	<div class="@container flex h-full w-full flex-col items-center justify-center p-4">
+		<NumberFlowGroup>
+			<div
+				class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-center text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+				style="font-variant-numeric: tabular-nums;"
+			>
+				<NumberFlow value={clockHours} format={{ minimumIntegerDigits: 2 }} />
+				<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
+				<NumberFlow
+					value={clockMinutes}
+					format={{ minimumIntegerDigits: 2 }}
+					digits={{ 1: { max: 5 } }}
+					trend={1}
+				/>
+				<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
+				<NumberFlow
+					value={clockSeconds}
+					format={{ minimumIntegerDigits: 2 }}
+					digits={{ 1: { max: 5 } }}
+					trend={1}
+				/>
+			</div>
+		</NumberFlowGroup>
+		{#if timezoneDisplay}
+			<div class="text-base-500 dark:text-base-400 accent:text-base-600 mt-1 text-xs @sm:text-sm">
+				{timezoneDisplay}
+			</div>
+		{/if}
+	</div>
+{/if}
diff --git a/src/lib/cards/utilities/CountdownCard/CountdownCard.svelte b/src/lib/cards/utilities/CountdownCard/CountdownCard.svelte
index a1fa2f1b..df9ddb4c 100644
--- a/src/lib/cards/utilities/CountdownCard/CountdownCard.svelte
+++ b/src/lib/cards/utilities/CountdownCard/CountdownCard.svelte
@@ -3,6 +3,7 @@
 	import type { ContentComponentProps } from '../../types';
 	import type { CountdownCardData } from './index';
 	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 
 	let { item }: ContentComponentProps = $props();
 
@@ -66,120 +67,122 @@
 	);
 </script>
 
-<div class="@container flex h-full w-full flex-col items-center justify-center p-4">
-	{#if isEventPast && elapsedDiff !== null}
-		<!-- Elapsed time since past event -->
-		<NumberFlowGroup>
-			<div
-				class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-baseline gap-4 text-center @sm:gap-6 @md:gap-8"
-				style="font-variant-numeric: tabular-nums;"
-			>
-				{#if elapsedYears > 0}
+{#if browser}
+	<div class="@container flex h-full w-full flex-col items-center justify-center p-4">
+		{#if isEventPast && elapsedDiff !== null}
+			<!-- Elapsed time since past event -->
+			<NumberFlowGroup>
+				<div
+					class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-baseline gap-4 text-center @sm:gap-6 @md:gap-8"
+					style="font-variant-numeric: tabular-nums;"
+				>
+					{#if elapsedYears > 0}
+						<div class="flex flex-col items-center">
+							<NumberFlow
+								value={elapsedYears}
+								trend={1}
+								class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+							/>
+							<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs"
+								>{elapsedYears === 1 ? 'year' : 'years'}</span
+							>
+						</div>
+					{/if}
+					{#if elapsedYears > 0 || elapsedDays > 0}
+						<div class="flex flex-col items-center">
+							<NumberFlow
+								value={elapsedDays}
+								trend={1}
+								class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+							/>
+							<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs"
+								>{elapsedDays === 1 ? 'day' : 'days'}</span
+							>
+						</div>
+					{/if}
 					<div class="flex flex-col items-center">
 						<NumberFlow
-							value={elapsedYears}
+							value={elapsedHours}
 							trend={1}
+							format={{ minimumIntegerDigits: 2 }}
 							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
 						/>
-						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs"
-							>{elapsedYears === 1 ? 'year' : 'years'}</span
-						>
+						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">hrs</span>
 					</div>
-				{/if}
-				{#if elapsedYears > 0 || elapsedDays > 0}
 					<div class="flex flex-col items-center">
 						<NumberFlow
-							value={elapsedDays}
+							value={elapsedMinutes}
 							trend={1}
+							format={{ minimumIntegerDigits: 2 }}
+							digits={{ 1: { max: 5 } }}
 							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
 						/>
-						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs"
-							>{elapsedDays === 1 ? 'day' : 'days'}</span
-						>
+						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">min</span>
+					</div>
+					<div class="flex flex-col items-center">
+						<NumberFlow
+							value={elapsedSeconds}
+							trend={1}
+							format={{ minimumIntegerDigits: 2 }}
+							digits={{ 1: { max: 5 } }}
+							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+						/>
+						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">sec</span>
 					</div>
-				{/if}
-				<div class="flex flex-col items-center">
-					<NumberFlow
-						value={elapsedHours}
-						trend={1}
-						format={{ minimumIntegerDigits: 2 }}
-						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
-					/>
-					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">hrs</span>
-				</div>
-				<div class="flex flex-col items-center">
-					<NumberFlow
-						value={elapsedMinutes}
-						trend={1}
-						format={{ minimumIntegerDigits: 2 }}
-						digits={{ 1: { max: 5 } }}
-						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
-					/>
-					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">min</span>
-				</div>
-				<div class="flex flex-col items-center">
-					<NumberFlow
-						value={elapsedSeconds}
-						trend={1}
-						format={{ minimumIntegerDigits: 2 }}
-						digits={{ 1: { max: 5 } }}
-						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
-					/>
-					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">sec</span>
 				</div>
-			</div>
-		</NumberFlowGroup>
-	{:else if eventDiff !== null}
-		<!-- Countdown to future event -->
-		<NumberFlowGroup>
-			<div
-				class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-baseline gap-4 text-center @sm:gap-6 @md:gap-8"
-				style="font-variant-numeric: tabular-nums;"
-			>
-				{#if eventDays > 0}
+			</NumberFlowGroup>
+		{:else if eventDiff !== null}
+			<!-- Countdown to future event -->
+			<NumberFlowGroup>
+				<div
+					class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-baseline gap-4 text-center @sm:gap-6 @md:gap-8"
+					style="font-variant-numeric: tabular-nums;"
+				>
+					{#if eventDays > 0}
+						<div class="flex flex-col items-center">
+							<NumberFlow
+								value={eventDays}
+								trend={-1}
+								class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+							/>
+							<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs"
+								>{eventDays === 1 ? 'day' : 'days'}</span
+							>
+						</div>
+					{/if}
 					<div class="flex flex-col items-center">
 						<NumberFlow
-							value={eventDays}
+							value={eventHours}
 							trend={-1}
+							format={{ minimumIntegerDigits: 2 }}
 							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
 						/>
-						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs"
-							>{eventDays === 1 ? 'day' : 'days'}</span
-						>
+						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">hrs</span>
+					</div>
+					<div class="flex flex-col items-center">
+						<NumberFlow
+							value={eventMinutes}
+							trend={-1}
+							format={{ minimumIntegerDigits: 2 }}
+							digits={{ 1: { max: 5 } }}
+							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+						/>
+						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">min</span>
+					</div>
+					<div class="flex flex-col items-center">
+						<NumberFlow
+							value={eventSeconds}
+							trend={-1}
+							format={{ minimumIntegerDigits: 2 }}
+							digits={{ 1: { max: 5 } }}
+							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+						/>
+						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">sec</span>
 					</div>
-				{/if}
-				<div class="flex flex-col items-center">
-					<NumberFlow
-						value={eventHours}
-						trend={-1}
-						format={{ minimumIntegerDigits: 2 }}
-						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
-					/>
-					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">hrs</span>
-				</div>
-				<div class="flex flex-col items-center">
-					<NumberFlow
-						value={eventMinutes}
-						trend={-1}
-						format={{ minimumIntegerDigits: 2 }}
-						digits={{ 1: { max: 5 } }}
-						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
-					/>
-					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">min</span>
-				</div>
-				<div class="flex flex-col items-center">
-					<NumberFlow
-						value={eventSeconds}
-						trend={-1}
-						format={{ minimumIntegerDigits: 2 }}
-						digits={{ 1: { max: 5 } }}
-						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
-					/>
-					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">sec</span>
 				</div>
-			</div>
-		</NumberFlowGroup>
-	{:else}
-		<div class="text-base-500 text-sm">Set a target date in settings</div>
-	{/if}
-</div>
+			</NumberFlowGroup>
+		{:else}
+			<div class="text-base-500 text-sm">Set a target date in settings</div>
+		{/if}
+	</div>
+{/if}