some initial backend scaffolding

resources/js/Components/Layouts/AuthenticatedLayout.svelte

@@ -6,18 +6,19 @@
     //eslint-disable-next-line
 	let { children }: { children: Snippet } = $props();
 
-    const searchChanged = () => {
-        if ($page.url !== '/search') {
+    const searchChanged = (event: InputEvent) => {
+        if (!$page.url.includes('/search')) {
             globalState.lastPage = $page.url
-            router.visit('/search', {
+            router.visit('/search/', {
                 preserveState: true,
             })
         }
-        if ($page.url === '/search' && globalState.searchQuery === '') {
+        if ($page.url.includes('/search') && event.data === '') {
             router.visit(globalState.lastPage ?? '/', {
                 preserveState: true,
             })
         }
+        globalState.onSearchChanged?.(event)
     }
 </script>
 

resources/js/Library/PassState.svelte.ts

@@ -4,6 +4,7 @@ export const globalState: {
     title?: Snippet;
     searchQuery?: string;
     lastPage?: string;
+    onSearchChanged?: (event: InputEvent) => void;
 } = $state({
 
 })

resources/js/Pages/Search.svelte

@@ -4,9 +4,16 @@
 
 <script lang="ts">
     import { globalState } from "@/Library/PassState.svelte";
+    import {default as _} from 'lodash';
 
     let { appName } = $props();
     globalState.title = title;
+
+    const onSearchChanged = (event: InputEvent) => {
+
+    }
+
+    globalState.onSearchChanged = _.throttle(onSearchChanged, 500);
 </script>
 
 <svelte:head>