From 441903800f07b474c035df5981dd72fe2201a56b Mon Sep 17 00:00:00 2001
From: laraproto <laraproto@proton.me>
Date: Wed, 6 Nov 2024 00:06:30 +0200
Subject: [PATCH] search page sillies

---
 composer.json                                 |  2 +-
 package.json                                  |  3 ++-
 resources/css/app.scss                        |  4 ++++
 .../Layouts/AuthenticatedLayout.svelte        | 19 ++++++++++++++++---
 resources/js/Library/PassState.svelte.ts      |  6 +++++-
 resources/js/Pages/Home.svelte                |  2 +-
 resources/js/Pages/Search.svelte              | 18 ++++++++++++++++++
 resources/js/app.ts                           |  2 +-
 routes/web.php                                |  4 ++++
 tsconfig.json                                 |  2 ++
 vite.config.js                                |  8 ++++++++
 11 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 resources/js/Pages/Search.svelte

diff --git a/composer.json b/composer.json
index 43c99db..0829c6f 100644
--- a/composer.json
+++ b/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": {
diff --git a/package.json b/package.json
index 4866d33..2456395 100644
--- a/package.json
+++ b/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 ."
 	},
diff --git a/resources/css/app.scss b/resources/css/app.scss
index ef1adcf..d7b0707 100644
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -6,3 +6,7 @@
 body {
 	@apply bg-zinc-900 text-white;
 }
+
+.main-content {
+    @apply py-8 px-10;
+}
diff --git a/resources/js/Components/Layouts/AuthenticatedLayout.svelte b/resources/js/Components/Layouts/AuthenticatedLayout.svelte
index 93c0a94..d605e4b 100644
--- a/resources/js/Components/Layouts/AuthenticatedLayout.svelte
+++ b/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()}
diff --git a/resources/js/Library/PassState.svelte.ts b/resources/js/Library/PassState.svelte.ts
index 0833f99..769a2fd 100644
--- a/resources/js/Library/PassState.svelte.ts
+++ b/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({
 
 })
+
diff --git a/resources/js/Pages/Home.svelte b/resources/js/Pages/Home.svelte
index b463ef8..92d7b71 100644
--- a/resources/js/Pages/Home.svelte
+++ b/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">
diff --git a/resources/js/Pages/Search.svelte b/resources/js/Pages/Search.svelte
new file mode 100644
index 0000000..efe82e7
--- /dev/null
+++ b/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}
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 2c4f577..54daab6 100644
--- a/resources/js/app.ts
+++ b/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';
 
diff --git a/routes/web.php b/routes/web.php
index 32f95e3..1de70bd 100644
--- a/routes/web.php
+++ b/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');
diff --git a/tsconfig.json b/tsconfig.json
index 5823e3b..635ea18 100644
--- a/tsconfig.json
+++ b/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. */
diff --git a/vite.config.js b/vite.config.js
index 87b4ffe..35b011c 100644
--- a/vite.config.js
+++ b/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'),
             }
         ]
     }