Adjust poll frequency

- 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/lib/components/ui/LiveIndicator.svelte

@@ -0,0 +1,49 @@
+<div class="cont">
+    <div class="flash"></div>
+    <span class="txt">Live</span>
+</div>
+
+<style>
+    .cont {
+        display: inline-flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        font-family: 'URW Gothic', sans-serif;
+        font-weight: 600;
+        letter-spacing: 0.15ch;
+    }
+
+    .flash {
+        height: 0.6rem;
+        width: 0.6rem;
+        margin: 0 0.35rem;
+        border-radius: 50%;
+        background-color: forestgreen;
+        animation: live-pulse 1s ease-in-out infinite;
+    }
+
+    .txt {
+        animation: live-text-pulse 1s ease-in-out infinite;
+    }
+
+    @keyframes live-pulse {
+        0%, 100% {
+            box-shadow: 0 0 14px forestgreen;
+            filter: opacity(1);
+        }
+        50% {
+            box-shadow: 0 0 2px forestgreen;
+            filter: opacity(0.2);
+        }
+    }
+
+    @keyframes live-text-pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.65;
+        }
+    }
+</style>

src/lib/components/ui/cards/NearbyStationsCard.svelte

@@ -15,7 +15,7 @@
 <BaseCard header={'Nearby Stations'}>
 	<div class="card-content">
 		{#if !prefs.current.NearToMe}
-			<Button onclick={() => prefs.toggleLocation(true)}>Enable Location</Button>
+			<Button onclick={() => prefs.toggleNearToMe(true)}>Enable Location</Button>
 		{:else if nearestStationsState.error && nearestStationsState.list.length === 0}
 			<p class="msg">{nearestStationsState.error}</p>
 		{:else if nearestStationsState.loading && nearestStationsState.list.length === 0}

src/lib/components/ui/form-elements/Toggle.svelte

@@ -66,6 +66,7 @@
 		border-radius: 1rem;
 		cursor: pointer;
 		transition: background-color 0.2s ease;
+		box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
 	}
 
 	.toggle-thumb {
@@ -77,8 +78,8 @@
 		background-color: var(--color-accent);
 		border-radius: 50%;
 		transition: transform 0.2s ease;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-		filter: brightness(0.95);
+		filter: brightness(1.45);
 	}
 
 	.toggle-input:checked + .toggle-track {

src/lib/components/ui/station-board/StaffServicesTable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
 	import { formatUkTime, estClass, delayClassFromTimePair } from '$lib/utils/time';
+	import { fade } from 'svelte/transition';
 
 	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
 
@@ -48,6 +49,8 @@
 	{#each services as service (getRowKey(service))}
 		<tbody>
 			<tr
+				in:fade={{duration: 150, delay:150}}
+				out:fade={{duration:150}}
 				class="service-row"
 				class:serviceCancelled={service.c}
 				class:servicePass={service.wtp}
@@ -123,14 +126,14 @@
 			</tr>
 
 			{#if service.o}
-				<tr class="toc-coach-row">
+				<tr class="toc-coach-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
 					<td colspan="8">
 						{service.o}
 					</td>
 				</tr>
 			{/if}
 			{#if service.c && service.cr?.r}
-				<tr class="cancel-row">
+				<tr class="cancel-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
 					<td colspan="8">
 						{service.cr.r}
 						{#if service.cr.l}
@@ -141,7 +144,7 @@
 				</tr>
 			{/if}
 			{#if service.dr?.r}
-				<tr class="delay-row">
+				<tr class="delay-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
 					<td colspan="9">
 						{service.dr.r}
 						{#if service.dr.l}

src/lib/preferences.svelte.ts

@@ -3,13 +3,17 @@ import { browser } from '$app/environment';
 export interface Preferences {
 	NearToMe: boolean;
 	ShowPassingTrains: boolean;
+	BoardWakeLock: boolean;
+	AutoRefresh: boolean;
 }
 
 const STORAGE_KEY = 'ob_pref';
 
 const DEFAULT_PREFS: Preferences = {
 	NearToMe: false,
-	ShowPassingTrains: true
+	ShowPassingTrains: true,
+	BoardWakeLock: true,
+	AutoRefresh: true,
 };
 
 function loadPrefs(): Preferences {
@@ -50,6 +54,14 @@ class PreferencesStore {
 	toggleShowPassingTrains(enabled: boolean) {
 		this.current.ShowPassingTrains = enabled;
 	}
+
+	toggleBoardWakeLock(enabled: boolean) {
+		this.current.BoardWakeLock = enabled;
+	}
+
+	toggleAutoRefresh(enabled: boolean) {
+		this.current.AutoRefresh = enabled;
+	}
 }
 
 export const prefs = new PreferencesStore();

src/routes/board/+page.svelte

@@ -1,12 +1,88 @@
 <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';
 	import StaffServicesTable from '$lib/components/ui/station-board/StaffServicesTable.svelte';
+	import LiveIndicator from '$lib/components/ui/LiveIndicator.svelte';
 	let { data } = $props();
 	let now = $state(new Date());
+	let live = $state(false);
+
+	// 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)
+					live = false;
+				}
+			}, 60100);
+			live = true;
+			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(() => {
@@ -16,30 +92,33 @@
 		return () => clearInterval(interval);
 	});
 
-	// Update 'QuickLinks'
+	const currentBoardId = $derived(
-	$effect(() => {
+        data.BoardLocation ? (data.BoardLocation.c ?? data.BoardLocation.t) : null
-		if (data.BoardLocation) {
+    );
-			const id = data.BoardLocation?.c ?? data.BoardLocation?.t;
+
-			if (id) {
+	// Update 'QuickLinks' when currentBoardId changes
-				// Untrack, as we do not need to handle changes to quickLinks - this is WRITE_ONLY
+$effect(() => {
-				untrack(() => {
+        if (currentBoardId) {
-					quickLinks.recordVisit(id);
+            // Keep the execution and logs inside untrack to isolate dependencies completely
-					console.log(`QuickLink visit recorded: ${JSON.stringify(data.BoardLocation)}`);
+            untrack(() => {
-				});
+                quickLinks.recordVisit(currentBoardId);
-			}
+                console.log(`QuickLink visit recorded: ${JSON.stringify(data.BoardLocation)}`);
-		}
+            });
-	});
+        }
+    });
 
 	// Wake Lock API Handling
 	// Load Data Invalidation Handling
 	// Refresh countdown logic
 </script>
-
 <section class="board-wrapper">
 	<div class="time-data">
 		<span class="time-loaded">Updated: {formatUkDateTime(data.boardData.producedAt, true)}</span>
 		<span class="time-now">{formatUkTime(now, true)}</span>
 	</div>
+	{#if live}
+		<LiveIndicator />
+	{/if}
 	{#if data.boardData.data.m?.length}
 		<StationAlertCard messages={data.boardData.data.m} />
 	{/if}

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>