src/lib/stores/icao.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const icao = writable('');

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>

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',