search page sillies

composer.json

@@ -56,7 +56,7 @@
 		],
 		"dev": [
 			"Composer\\Config::disableProcessTimeout",
-			"npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite"
+			"pnpx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"pnpm run vite:dev\" --names=server,queue,logs,vite"
 		]
 	},
 	"extra": {

package.json

@@ -4,9 +4,10 @@
 	"scripts": {
 		"build": "tsc && vite build && vite build --ssr",
 		"php:serve": "php artisan serve",
+        "php:queue": "php artisan queue:listen --tries=1",
 		"php:pail": "php artisan pail",
 		"vite:dev": "vite",
-		"dev": "concurrently -k -p \"[{name}]\" -c \"blue.bold,green.bold,red.bold\" \"npm:php:serve\" \"npm:php:pail\" \"npm:vite:dev\"",
+		"dev": "concurrently -k -p \"[{name}]\" -c \"blue.bold,green.bold,red.bold,orange.bold\" \"pnpm:php:serve\" \"pnpm:php:pail\" \"pnpm:vite:dev\" \"pnpm:php:queue\"",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint ."
 	},

resources/css/app.scss

@@ -6,3 +6,7 @@
 body {
 	@apply bg-zinc-900 text-white;
 }
+
+.main-content {
+    @apply py-8 px-10;
+}

resources/js/Components/Layouts/AuthenticatedLayout.svelte

@@ -1,10 +1,23 @@
 <script lang="ts">
-	import { inertia, page } from '@inertiajs/svelte';
+    import {inertia, page, router} from '@inertiajs/svelte';
     import { globalState } from "@/Library/PassState.svelte";
     import type {Snippet} from "svelte";
 
     //eslint-disable-next-line
 	let { children }: { children: Snippet } = $props();
+
+    const searchChanged = () => {
+        if ($page.url !== '/search') {
+            router.visit('/search', {
+                preserveState: true,
+            })
+        }
+        if ($page.url === '/search' && globalState.searchQuery === '') {
+            router.visit('/', {
+                preserveState: true,
+            })
+        }
+    }
 </script>
 
 <div class="flex flex-col h-screen">
@@ -14,14 +27,14 @@
             <a href="/" use:inertia class="hover:underline">Home</a>
 		</nav>
 
-        <main class="w-10/12 px-10 py-8 overflow-y-auto">
+        <main class="w-10/12 px-10 py-8 overflow-y-auto main-content">
             <div class="flex items-center justify-between mb-4">
                 <div class="mr-4">
                     {@render globalState.title?.()}
                 </div>
                 <div class="relative flex-grow">
                     <span class="material-icons text-gray-900 absolute left-3 top-1/2 transform -translate-y-1/2">search</span>
-                    <input type="text" placeholder="Search..." class="w-full p-2 pl-10 rounded-full bg-gray-200 text-black" />
+                    <input type="text" placeholder="Search..." bind:value={globalState.searchQuery} oninput={searchChanged} class="w-full p-2 pl-10 rounded-full bg-gray-200 text-black" />
                 </div>
             </div>
             {@render children()}

resources/js/Library/PassState.svelte.ts

@@ -1,5 +1,9 @@
+import type { Snippet } from 'svelte';
+
 export const globalState: {
-    title?: any
+    title?: Snippet;
+    searchQuery?: string;
 } = $state({
 
 })
+

resources/js/Pages/Home.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	export { default as layout } from '@/Components/Layouts/AuthenticatedLayout.svelte';
+	export { default as layout } from '@components/Layouts/AuthenticatedLayout.svelte';
 </script>
 
 <script lang="ts">

resources/js/Pages/Search.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+    export { default as layout } from '@components/Layouts/AuthenticatedLayout.svelte';
+</script>
+
+<script lang="ts">
+    import { globalState } from "@/Library/PassState.svelte";
+
+    let { appName } = $props();
+    globalState.title = title;
+</script>
+
+<svelte:head>
+    <title>Search {globalState.searchQuery} - {appName}</title>
+</svelte:head>
+
+{#snippet title()}
+    <h1 class="text-4xl font-bold">Search</h1>
+{/snippet}

resources/js/app.ts

@@ -1,5 +1,5 @@
 import './bootstrap';
-import '../css/app.scss';
+import '@css/app.scss';
 import { createInertiaApp, ResolvedComponent } from '@inertiajs/svelte';
 import { hydrate, mount } from 'svelte';
 

routes/web.php

@@ -6,3 +6,7 @@ use Inertia\Inertia;
 Route::get('/', function () {
     return Inertia::render('Home');
 })->name('home');
+
+Route::get('/search', function () {
+    return Inertia::render('Search');
+})->name('search');

tsconfig.json

@@ -31,6 +31,8 @@
 		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 		"paths": {
 			"@/*": ["./resources/js/*"],
+            "@components/*": ["./resources/js/Components/*"],
+            "@css/*": ["./resources/css/*"],
 			"ziggy-js": ["./vendor/tightenco/ziggy"]
 		} /* Specify a set of entries that re-map imports to additional lookup locations. */,
 		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */

vite.config.js

@@ -24,6 +24,14 @@ export default defineConfig({
             {
                 find: 'ziggy-js',
                 replacement: path.resolve(__dirname, 'vendor/tightenco/ziggy/'),
+            },
+            {
+                find: '@css',
+                replacement: path.resolve(__dirname, 'resources/css'),
+            },
+            {
+                find: '@components',
+                replacement: path.resolve(__dirname, 'resources/js/Components'),
             }
         ]
     }