fix(frontend): Svelte 5 reactivity, each block keys, and path resolution

Add proper keys to #each blocks across 15+ components to fix reordering bugs. Replace new Date() with SvelteDate in reactive contexts. Use $derived for computed values (totalPages). Use resolve() from $app/paths for all internal navigation hrefs. Add ARIA labels and keyboard accessibility to NavBar mobile menu. Remove unused handleRetry from UserPaymentModal.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
2026-06-04 01:08:36 +01:00
co-authored by Sisyphus
parent c76c3f52f7
commit 6c16d65476
33 changed files with 417 additions and 300 deletions
@@ -1,6 +1,6 @@
<script lang="ts">
import { authStore } from '$lib/stores/auth.svelte';
import { SvelteDate } from 'svelte/reactivity';
import { SvelteDate, SvelteSet } from 'svelte/reactivity';
import { toast } from 'svelte-sonner';
import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
@@ -51,7 +51,7 @@
let workingHoursCache: Record<string, Record<string, any>> = {};
let availableHoursCache: Record<string, Record<string, any>> = {};
let loadingMonths: Record<string, boolean> = {};
let loadingMonthKeys: Set<string> = new Set();
let loadingMonthKeys = new SvelteSet<string>();
let initialLoadDone = $state(false);
let rescheduleAutoSelectDone = $state(false);
@@ -220,7 +220,7 @@
if (loadingMonths[monthKey]) return;
if (loadingMonthKeys.has(monthKey)) return;
loadingMonthKeys = new Set(loadingMonthKeys).add(monthKey);
loadingMonthKeys.add(monthKey);
loadingMonths[monthKey] = true;
hoursMonthGeneration++;
@@ -265,7 +265,7 @@
toast.error('Failed to load availability');
} finally {
delete loadingMonths[monthKey];
loadingMonthKeys = new Set([...loadingMonthKeys].filter((k) => k !== monthKey));
loadingMonthKeys.delete(monthKey);
loadingHours = false;
}
}
@@ -280,7 +280,7 @@
workingHoursCache = {};
availableHoursCache = {};
loadingMonths = {};
loadingMonthKeys = new Set();
loadingMonthKeys = new SvelteSet<string>();
rescheduleAutoSelectDone = false;
placeholder = new CalendarDate(
new SvelteDate().getFullYear(),