feat(frontend): auto-refresh status

frontend/src/lib/components/StatusList.svelte

@@ -1,8 +1,26 @@
 <script lang="ts">
 	import type { Watchpoint } from '$lib/dataprovider';
 	import StatusEntry from '$lib/components/StatusEntry.svelte';
+	import { invalidate } from '$app/navigation';
+	import { onDestroy, onMount } from 'svelte';
+	import { env } from '$env/dynamic/public';
 
 	export let data: Array<Watchpoint> | undefined;
+
+	let interval;
+
+	const reload = () => {
+		invalidate('app:statusList');
+	};
+
+	onMount(() => {
+		const refreshRate = Number(env.PUBLIC_STATUS_REFRESH_RATE);
+		interval = setInterval(reload, refreshRate > 100 ? refreshRate : 2000);
+	});
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
 </script>
 
 <div class="list-container">
@@ -15,7 +33,7 @@
 	{/if}
 </div>
 
-<style lang='scss'>
+<style lang="scss">
 	.list-container {
 		display: grid;
 		grid-template-columns: 1fr;

frontend/src/lib/dataprovider.ts

@@ -15,7 +15,10 @@ export interface StatusData {
 	watchpoints?: Array<Watchpoint>;
 }
 
-export const loadStatus = async (): Promise<StatusData> => {
+export const loadStatus = async (fetch: {
+	(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
+	(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
+}): Promise<StatusData> => {
 	try {
 		const res = await fetch(`${PUBLIC_API_URL}/status`);
 		if (res.status !== 200) {

frontend/src/routes/+page.ts

@@ -1,8 +1,10 @@
+import type { PageLoad } from './$types';
+
 import { loadStatus } from '$lib/dataprovider';
 
-/** @type {import('./$types').PageLoad} */
-export const load = async () => {
+export const load = (async ({ fetch, depends }) => {
+	depends('app:statusList');
 	return {
-		status: await loadStatus()
+		status: await loadStatus(fetch)
 	};
-};
+}) satisfies PageLoad;