Bugfix:

- Update to @tabler/icons-svelte-runes for a more 'Svente 5' experience.

 - Adjust error handling in load functions, plain error thrown for handling in the error handler.

  - Fix the warning regarding a click handler attached to an <img> on the About page

  - Re-organise component directory

  - Remove unused font declarations from global.css

Features:
 - Add service-worker caching of FilterData API response to allow for filtering to work fully offline

  -

src/lib/components/ui/NoResults.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import noResult from '$lib/assets/img/no-data.svg';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
 	let { title = 'No results', message = 'Try checking your search term' } = $props();
 </script>
 

src/lib/components/ui/TrainService.svelte

@@ -6,7 +6,7 @@
 	import { formatUkTime, calculateDelay } from '$lib/utils/time';
 	import TocStyle from '$lib/components/ui/TocStyle.svelte';
 	import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
-	import { IconChevronDownFilled } from '@tabler/icons-svelte';
+	import { IconChevronDownFilled } from '@tabler/icons-svelte-runes';
 	import { estClass } from '$lib/utils/time';
 	let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
 	let isExpanded = $state(false);

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { IconHelpCircle } from '@tabler/icons-svelte';
+	import { IconHelpCircle } from '@tabler/icons-svelte-runes';
 	import { slide } from 'svelte/transition';
 
 	interface Props {

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

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-	import Textbox from '$lib/components/ui/Textbox.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
 
 	let headcode = $state('');
 

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
+	import LocationSearchBox from '$lib/components/ui/form-elements/LocationSearchBox.svelte';
 
 	let locationValue = $state('');
 

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
 
 	import { fade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
 
 	import { fade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';

src/lib/components/ui/cards/pis/PisCode.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-	import Textbox from '$lib/components/ui/Textbox.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
 
 	let { onsearch }: { onsearch: (c: string) => void } = $props();
 </script>

src/lib/components/ui/cards/pis/PisStartEndCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-	import Textbox from '$lib/components/ui/Textbox.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
+	import Button from '$lib/components/ui/form-elements/Button.svelte';
 
 	let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();
 
@@ -15,7 +15,13 @@
 </script>
 
 <BaseCard header={'Find by Start/End CRS'}>
-	<div class="card-content">
+	<form
+		class="card-content"
+		onsubmit={(e) => {
+			e.preventDefault();
+			onsearch(startValue, endValue);
+		}}
+	>
 		<div class="textbox-container">
 			<div class="textbox-item-wrapper">
 				<Textbox placeholder={'Start'} uppercase={true} maxLength={3} bind:value={startValue} />
@@ -25,10 +31,10 @@
 			</div>
 		</div>
 		<div class="button-wrapper">
-			<Button onclick={() => onsearch(startValue, endValue)}>Search</Button>
+			<Button type={'submit'}>Search</Button>
 			<Button onclick={resetValues}>Reset</Button>
 		</div>
-	</div>
+	</form>
 </BaseCard>
 
 <style>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Textbox from '$lib/components/ui/Textbox.svelte';
+	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import { goto } from '$app/navigation';

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

@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	import { IconChevronRightFilled } from '@tabler/icons-svelte';
+	import { IconChevronRightFilled } from '@tabler/icons-svelte-runes';
 
 	interface Props extends HTMLInputAttributes {
 		value?: string;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
-	import { IconAlertOctagonFilled, IconChevronDownFilled } from '@tabler/icons-svelte';
+	import { IconAlertOctagonFilled, IconChevronDownFilled } from '@tabler/icons-svelte-runes';
 
 	let { messages = [] }: { messages: ApiStationsBoard.BoardMsgs[] } = $props();
 	let isOpen = $state(false);