Features:

- Add preferences for WakeLock and AutoRefresh
 - Add WakeLock and AutoRefresh to Board
 - Attempt adding transitions to Board elements

UI:
 - Add '3D' styling to preference toggles

src/routes/board/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
 	import { quickLinks } from '$lib/quick-links.svelte';
+	import { invalidateAll } from '$app/navigation';
 	import StationAlertCard from '$lib/components/ui/station-board/StationAlertCard.svelte';
 
 	import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
@@ -8,6 +9,77 @@
 	let { data } = $props();
 	let now = $state(new Date());
 
+	// Handle auto-refreshing & Wake-lock
+	$effect(() => {
+		let intervalId: number | undefined;
+		let wakeLock: WakeLockSentinel | null = null;
+
+		const requestWakeLock = async () => {
+			if ('wakeLock' in navigator && !wakeLock) {
+				try {
+					wakeLock = await navigator.wakeLock.request('screen');
+					console.log("Wake lock obtained");
+				} catch (error) {
+					console.warn("Wake lock request rejected: ", error);
+				} 
+			}
+		};
+
+		const releaseWakeLock = async () => {
+			if (wakeLock) {
+				try {
+					await wakeLock.release();
+					console.log("Wake lock released");
+				} catch (error) {
+					console.error("Wake lock release failed: ", error);
+				}
+				wakeLock = null;
+			}
+		};
+
+		const startPolling = async () => {
+			await requestWakeLock();
+			if (intervalId) return;
+			intervalId = window.setInterval(async () => {
+				try {
+					console.log("Invalidating data")
+					await invalidateAll();
+				} catch (error) {
+					console.error("Background data fetch failed: ", error)
+				}
+			}, 61000);
+			console.log("Polling started")
+		};
+
+		const stopPolling = async () => {
+			if (intervalId) {
+				window.clearInterval(intervalId);
+				intervalId = undefined;
+				console.log("Polling ended")
+			}
+			await releaseWakeLock();
+		};
+
+		const handleVisibilityChange = () => {
+			if (document.hidden) {
+				stopPolling();
+			} else {
+				startPolling();
+			}
+		};
+
+		if (!document.hidden) {
+			startPolling();
+		}
+
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
+		return () => {
+			stopPolling();
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+		};
+	})
+
 	onMount(() => {
 		const interval = setInterval(() => {
 			now = new Date();
@@ -16,19 +88,20 @@
 		return () => clearInterval(interval);
 	});
 
-	// Update 'QuickLinks'
-	$effect(() => {
-		if (data.BoardLocation) {
-			const id = data.BoardLocation?.c ?? data.BoardLocation?.t;
-			if (id) {
-				// Untrack, as we do not need to handle changes to quickLinks - this is WRITE_ONLY
-				untrack(() => {
-					quickLinks.recordVisit(id);
-					console.log(`QuickLink visit recorded: ${JSON.stringify(data.BoardLocation)}`);
-				});
-			}
-		}
-	});
+	const currentBoardId = $derived(
+        data.BoardLocation ? (data.BoardLocation.c ?? data.BoardLocation.t) : null
+    );
+
+	// Update 'QuickLinks' when currentBoardId changes
+$effect(() => {
+        if (currentBoardId) {
+            // Keep the execution and logs inside untrack to isolate dependencies completely
+            untrack(() => {
+                quickLinks.recordVisit(currentBoardId);
+                console.log(`QuickLink visit recorded: ${JSON.stringify(data.BoardLocation)}`);
+            });
+        }
+    });
 
 	// Wake Lock API Handling
 	// Load Data Invalidation Handling

src/routes/preferences/+page.svelte

@@ -23,6 +23,18 @@
 					checked={prefs.current.ShowPassingTrains}
 					onchange={(checked) => prefs.toggleShowPassingTrains(checked)}
 				/>
+				<Toggle
+					label={'Keep screen awake on live pages'}
+					id={'toggle-board-wake-lock'}
+					checked={prefs.current.BoardWakeLock}
+					onchange={(checked) => prefs.toggleBoardWakeLock(checked)}
+				/>
+				<Toggle
+					label={'Auto-refresh data'}
+					id={'toggle-auto-refresh'}
+					checked={prefs.current.AutoRefresh}
+					onchange={(checked) => prefs.toggleAutoRefresh(checked)}
+				/>
 			</div>
 		</section>
 	</BaseCard>