From 215f4a0e2a690568f9c186a9f23f23910fea225a Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Wed, 18 Jun 2025 21:24:16 +0100
Subject: [PATCH] FEAT: Implemented ICAO into svelte stores

---
 src/lib/stores/icao.ts    |  3 +++
 src/routes/+layout.svelte | 32 ++++++++++----------------------
 src/routes/+page.svelte   |  7 +------
 3 files changed, 14 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/stores/icao.ts

diff --git a/src/lib/stores/icao.ts b/src/lib/stores/icao.ts
new file mode 100644
index 0000000..8da2fcf
--- /dev/null
+++ b/src/lib/stores/icao.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const icao = writable('');
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d40dba1..71ec0da 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,33 +5,21 @@
     import Section from '$lib/components/Section.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
 
-    import { goto } from '$app/navigation';
+    import { icao } from '$lib/stores/icao';
+
+    let icaoInput = $state<string>('');
 
-    // ICAO input state handler
-    let icao = $state('');
     $effect(() => {
-        const params = new URLSearchParams();
-
-        if (icao.length === 4) {
-            // If the ICAO code is exactly 4 characters long, add it to the URL parameters
-            if (icao) params.set('icao', icao);
-
-            // This will trigger a navigation and reload the page data from the server
-            goto(`?${params.toString()}`, {
-                keepFocus: true,
-                replaceState: true,
-                noScroll: true
-            });
+         // Watch for changes to icaoInput and update the store if exactly 4 chars
+        if (icaoInput.length === 4) {
+            icao.set(icaoInput);
         } else {
-            // Otherwise, clear the parameter
-             goto(`?${params.toString()}`, {
-                keepFocus: true,
-                replaceState: true,
-                noScroll: true
-            });
+            icao.set('');
         }
     });
 
+   
+
     let { children } = $props();
 </script>
 
@@ -71,7 +59,7 @@
                                 maxlength="4"
                                 required
                                 placeholder="EGKK"
-                                bind:value={icao}
+                                bind:value={icaoInput}
                             />
                         </div>
                     </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1b1216a..9941a42 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,14 +4,9 @@
     import { toasts } from 'svelte-toasts';
     import Loading from '$lib/components/Loading.svelte';
 
-    import { page } from '$app/stores';
-    import { derived } from 'svelte/store';
-
-    // Get the ICAO parameter from the URL
-    const icao = derived(page, ($page) => $page.url.searchParams.get('icao'));
+    import { icao } from '$lib/stores/icao';
 </script>
 
-
 <div style="display: none;">
     {toasts.add({
         title: 'Welcome',