Merge pull request #71 from flo-bit/fix-timer-stuff

fixes

docs/Beta.md

···
 
 - guestbook card
 
-- analytics?
+- onboarding?
+
+- switch sidebar to a quick list of available cards with search function
+
+- test
+  - selfhosting
+
+- guestbook card
+
+- analytics?
+
+- refresh recently updated blentos (move to top of list, update profiles every 24 hours)
+
+- server side oauth?

src/lib/atproto/settings.ts

···
 import { dev } from '$app/environment';
+import { env } from '$env/dynamic/public';
 
-export const SITE = 'https://blento.app';
+export const SITE = env.PUBLIC_DOMAIN;
 
 type Permissions = {
 	collections: readonly string[];

src/lib/cards/TimerCard/TimerCard.svelte

···
 		eventDiff !== null ? Math.floor((eventDiff % (1000 * 60)) / 1000) : 0
 	);
 
-	let isEventComplete = $derived(cardData.mode === 'event' && eventDiff === 0);
+	// Check if event is in the past (elapsed mode)
+	let isEventPast = $derived.by(() => {
+		if (cardData.mode !== 'event' || !cardData.targetDate) return false;
+		const target = new Date(cardData.targetDate);
+		return now.getTime() > target.getTime();
+	});
+
+	// Elapsed time since past event
+	let elapsedDiff = $derived.by(() => {
+		if (!isEventPast || !cardData.targetDate) return null;
+		const target = new Date(cardData.targetDate);
+		return now.getTime() - target.getTime();
+	});
+
+	let elapsedYears = $derived(
+		elapsedDiff !== null ? Math.floor(elapsedDiff / (1000 * 60 * 60 * 24 * 365)) : 0
+	);
+	let elapsedDays = $derived(
+		elapsedDiff !== null
+			? Math.floor((elapsedDiff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24))
+			: 0
+	);
+	let elapsedHours = $derived(
+		elapsedDiff !== null ? Math.floor((elapsedDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) : 0
+	);
+	let elapsedMinutes = $derived(
+		elapsedDiff !== null ? Math.floor((elapsedDiff % (1000 * 60 * 60)) / (1000 * 60)) : 0
+	);
+	let elapsedSeconds = $derived(
+		elapsedDiff !== null ? Math.floor((elapsedDiff % (1000 * 60)) / 1000) : 0
+	);
 
 	// Get timezone display name
 	let timezoneDisplay = $derived.by(() => {
···
 
 		<!-- Event Countdown Mode -->
 	{:else if cardData.mode === 'event'}
-		{#if eventDiff !== null && !isEventComplete}
+		{#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={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"
···
 				>
 					{#if eventDays > 0}
 						<div class="flex flex-col items-center">
-							<NumberFlow value={eventDays} trend={-1} class="text-4xl font-bold" />
-							<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">days</span
+							<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>
 				</div>
 			</NumberFlowGroup>
-		{:else if isEventComplete}
-			<div
-				class="text-accent-600 dark:text-accent-400 accent:text-accent-900 text-xl font-bold @xs:text-2xl @sm:text-3xl @md:text-4xl"
-			>
-				Event Started!
-			</div>
 		{:else}
 			<div class="text-base-500 text-sm">Set a target date in settings</div>
 		{/if}