Add shop countdown

[bbarni2020]

No description provided.

[Copilot]

Pull request overview

This PR adds a countdown timer to the market page to display when the shop will open. The countdown is implemented using Svelte 5's reactive state management with proper lifecycle hooks for cleanup.

Key changes:

• Implements a countdown timer that updates every second until a target date (December 15, 2025)
• Uses Svelte lifecycle hooks (onMount, onDestroy) for proper interval management
• Adds a responsive UI component displaying days, hours, minutes, and seconds

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

[Copilot]

The target date is hardcoded. Consider moving this to a configuration file, environment variable, or making it dynamically fetched from the backend. This will make it easier to update the shop opening date without code changes.

Suggested change

	let { data } = $props();
	let timeLeft = $state({ days: 0, hours: 0, minutes: 0, seconds: 0 });
	let interval: ReturnType<typeof setInterval>;
	const targetDate = new Date('2025-12-15T23:59:00-05:00').getTime();
	import { PUBLIC_SHOP_OPEN_DATE } from '$env/static/public';
	let { data } = $props();
	let timeLeft = $state({ days: 0, hours: 0, minutes: 0, seconds: 0 });
	let interval: ReturnType<typeof setInterval>;
	const targetDate = new Date(PUBLIC_SHOP_OPEN_DATE).getTime();

[Copilot]

When the countdown reaches zero, the message "Shop Opens In" may be confusing since the shop should now be open. Consider conditionally rendering different content after the countdown completes, such as "Shop is Now Open!" or hiding the countdown entirely.

[Copilot]

The countdown timer updates every second, which may cause screen readers to constantly announce changes. Consider adding aria-live="polite" to the countdown container and possibly throttling announcements (e.g., only announcing significant changes like minute updates) for better accessibility.

[Copilot]

[nitpick] The four time unit boxes have duplicated markup. Consider refactoring this into a reusable component or using an array with {#each} block to reduce code duplication and improve maintainability. For example:

{#each [
  { value: timeLeft.days, label: 'DAYS' },
  { value: timeLeft.hours, label: 'HOURS' },
  { value: timeLeft.minutes, label: 'MINS' },
  { value: timeLeft.seconds, label: 'SECS' }
] as unit}
  <div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
    <span class="mb-2 text-4xl md:text-5xl">{unit.value}</span>
    <span class="text-xs text-primary-400 md:text-sm">{unit.label}</span>
  </div>
{/each}

Suggested change

	<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
	<span class="mb-2 text-4xl md:text-5xl">{timeLeft.days}</span>
	<span class="text-xs text-primary-400 md:text-sm">DAYS</span>
	</div>
	<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
	<span class="mb-2 text-4xl md:text-5xl">{timeLeft.hours}</span>
	<span class="text-xs text-primary-400 md:text-sm">HOURS</span>
	</div>
	<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
	<span class="mb-2 text-4xl md:text-5xl">{timeLeft.minutes}</span>
	<span class="text-xs text-primary-400 md:text-sm">MINS</span>
	</div>
	<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
	<span class="mb-2 text-4xl md:text-5xl">{timeLeft.seconds}</span>
	<span class="text-xs text-primary-400 md:text-sm">SECS</span>
	</div>
	{#each [
	{ value: timeLeft.days, label: 'DAYS' },
	{ value: timeLeft.hours, label: 'HOURS' },
	{ value: timeLeft.minutes, label: 'MINS' },
	{ value: timeLeft.seconds, label: 'SECS' }
	] as unit}
	<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
	<span class="mb-2 text-4xl md:text-5xl">{unit.value}</span>
	<span class="text-xs text-primary-400 md:text-sm">{unit.label}</span>
	</div>
	{/each}

[Copilot]

The interval variable is declared but not initialized, which may cause TypeScript strict mode errors. Consider either initializing it as undefined explicitly (let interval: ReturnType<typeof setInterval> | undefined;) or using TypeScript's definite assignment assertion (let interval!: ReturnType<typeof setInterval>;). The first approach is generally safer and more explicit.

Suggested change

	let interval: ReturnType<typeof setInterval>;
	let interval: ReturnType<typeof setInterval> | undefined = undefined;