Global Search Structure

Reconfigured the global search to include more than one model. Refactored the search front-end to work inline instead of inside a model/popup.

.gitignore

@@ -22,3 +22,4 @@ Homestead.json
 Homestead.yaml
 npm-debug.log
 yarn-error.log
+config/psysh

app/Livewire/GlobalSearch.php

@@ -3,19 +3,74 @@
 namespace App\Livewire;
 
 use App\Models\Mod;
+use App\Models\User;
+use Illuminate\Support\Str;
 use Illuminate\View\View;
 use Livewire\Component;
 
 class GlobalSearch extends Component
 {
+    /**
+     * The search query.
+     */
     public string $query = '';
 
+    /**
+     * Whether to show the search result dropdown.
+     */
+    public bool $showDropdown = false;
+
+    /**
+     * Whether to show the "no results found" message.
+     */
+    public bool $noResults = false;
+
     public function render(): View
     {
-        $results = $this->query ? Mod::search($this->query)->get() : collect();
-
         return view('livewire.global-search', [
-            'results' => $results,
+            'results' => $this->executeSearch($this->query),
         ]);
     }
+
+    /**
+     * Execute the search against each of the searchable models.
+     */
+    protected function executeSearch(string $query): array
+    {
+        $query = Str::trim($query);
+        $results = ['data' => [], 'total' => 0];
+
+        if (Str::length($query)) {
+            $results['data'] = [
+                'user' => User::search($query)->get(),
+                'mod' => Mod::search($query)->get(),
+            ];
+            $results['total'] = $this->countTotalResults($results['data']);
+        }
+
+        $this->showDropdown = Str::length($query) > 0;
+        $this->noResults = $results['total'] === 0 && $this->showDropdown;
+
+        return $results;
+    }
+
+    /**
+     * Count the total number of results across all models.
+     */
+    protected function countTotalResults($results): int
+    {
+        return collect($results)->reduce(function ($carry, $result) {
+            return $carry + $result->count();
+        }, 0);
+    }
+
+    /**
+     * Clear the search query and hide the dropdown.
+     */
+    public function clearSearch(): void
+    {
+        $this->query = '';
+        $this->showDropdown = false;
+        $this->noResults = false;
+    }
 }

app/Models/User.php

@@ -74,7 +74,7 @@ class User extends Authenticatable implements MustVerifyEmail
 
     public function isMod(): bool
     {
-        return Str::lower($this->role?->name) === 'moderator' || $this->isAdmin();
+        return Str::lower($this->role?->name) === 'moderator';
     }
 
     public function isAdmin(): bool

composer.json

@@ -49,6 +49,9 @@
         }
     },
     "scripts": {
+        "phpstan": [
+            "./vendor/bin/phpstan analyse --debug --memory-limit=2G"
+        ],
         "post-autoload-dump": [
             "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
             "@php artisan package:discover --ansi",

config/scout.php

@@ -19,7 +19,7 @@ return [
     |
     */
 
-    'driver' => env('SCOUT_DRIVER', 'algolia'),
+    'driver' => env('SCOUT_DRIVER', 'meilisearch'),
 
     /*
     |--------------------------------------------------------------------------
@@ -137,9 +137,13 @@ return [
         'host' => env('MEILISEARCH_HOST', 'http://localhost:7700'),
         'key' => env('MEILISEARCH_KEY'),
         'index-settings' => [
+            User::class => [
+                'filterableAttributes' => [],
+                'sortableAttributes' => [],
+            ],
             Mod::class => [
-                'filterableAttributes' => ['featured'],
+                'filterableAttributes' => [],
-                'sortableAttributes' => ['created_at', 'updated_at'],
+                'sortableAttributes' => [],
             ],
         ],
     ],

database/factories/LicenseFactory.php

@@ -13,8 +13,8 @@ class LicenseFactory extends Factory
     public function definition(): array
     {
         return [
-            'name' => $this->faker->name(),
+            'name' => fake()->name(),
-            'link' => $this->faker->url,
+            'link' => fake()->url(),
             'created_at' => Carbon::now(),
             'updated_at' => Carbon::now(),
         ];

database/factories/ModFactory.php

@@ -7,27 +7,31 @@ use App\Models\Mod;
 use App\Models\User;
 use Illuminate\Database\Eloquent\Factories\Factory;
 use Illuminate\Support\Str;
+use Random\RandomException;
 
 class ModFactory extends Factory
 {
     protected $model = Mod::class;
 
+    /**
+     * @throws RandomException
+     */
     public function definition(): array
     {
-        $name = $this->faker->words(3, true);
+        $name = fake()->catchPhrase();
 
         return [
             'user_id' => User::factory(),
             'name' => $name,
             'slug' => Str::slug($name),
-            'teaser' => $this->faker->sentence,
+            'teaser' => fake()->sentence(),
-            'description' => $this->faker->sentences(6, true),
+            'description' => fake()->paragraphs(random_int(4, 20), true),
             'license_id' => License::factory(),
-            'source_code_link' => $this->faker->url(),
+            'source_code_link' => fake()->url(),
-            'featured' => $this->faker->boolean,
+            'featured' => fake()->boolean(),
-            'contains_ai_content' => $this->faker->boolean,
+            'contains_ai_content' => fake()->boolean(),
-            'contains_ads' => $this->faker->boolean,
+            'contains_ads' => fake()->boolean(),
-            'disabled' => $this->faker->boolean,
+            'disabled' => fake()->boolean(),
             'created_at' => now(),
             'updated_at' => now(),
         ];

database/factories/ModVersionFactory.php

@@ -16,13 +16,13 @@ class ModVersionFactory extends Factory
     {
         return [
             'mod_id' => Mod::factory(),
-            'version' => $this->faker->numerify('1.#.#'),
+            'version' => fake()->numerify('1.#.#'),
-            'description' => $this->faker->text(),
+            'description' => fake()->text(),
-            'link' => $this->faker->url(),
+            'link' => fake()->url(),
             'spt_version_id' => SptVersion::factory(),
-            'virus_total_link' => $this->faker->url(),
+            'virus_total_link' => fake()->url(),
-            'downloads' => $this->faker->randomNumber(),
+            'downloads' => fake()->randomNumber(),
-            'disabled' => $this->faker->boolean,
+            'disabled' => fake()->boolean(),
             'created_at' => Carbon::now(),
             'updated_at' => Carbon::now(),
         ];

database/factories/UserFactory.php

@@ -19,7 +19,7 @@ class UserFactory extends Factory
     public function definition(): array
     {
         return [
-            'name' => fake()->name(),
+            'name' => fake()->userName(),
             'email' => fake()->unique()->safeEmail(),
             'email_verified_at' => now(),
             'password' => static::$password ??= Hash::make('password'),

package-lock.json

@@ -1013,9 +1013,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001638",
+            "version": "1.0.30001640",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001638.tgz",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz",
-            "integrity": "sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==",
+            "integrity": "sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==",
             "dev": true,
             "funding": [
                 {
@@ -1161,9 +1161,9 @@
             "license": "MIT"
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.812",
+            "version": "1.4.816",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.812.tgz",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz",
-            "integrity": "sha512-7L8fC2Ey/b6SePDFKR2zHAy4mbdp1/38Yk5TsARO66W3hC5KEaeKMMHoxwtuH+jcu2AYLSn9QX04i95t6Fl1Hg==",
+            "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==",
             "dev": true,
             "license": "ISC"
         },
@@ -1581,9 +1581,9 @@
             "license": "MIT"
         },
         "node_modules/lru-cache": {
-            "version": "10.2.2",
+            "version": "10.3.0",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
-            "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+            "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
             "dev": true,
             "license": "ISC",
             "engines": {
@@ -1833,9 +1833,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.38",
+            "version": "8.4.39",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-            "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+            "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
             "dev": true,
             "funding": [
                 {
@@ -1854,7 +1854,7 @@
             "license": "MIT",
             "dependencies": {
                 "nanoid": "^3.3.7",
-                "picocolors": "^1.0.0",
+                "picocolors": "^1.0.1",
                 "source-map-js": "^1.2.0"
             },
             "engines": {
@@ -2535,9 +2535,9 @@
             "license": "Apache-2.0"
         },
         "node_modules/update-browserslist-db": {
-            "version": "1.0.16",
+            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
-            "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==",
+            "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
             "dev": true,
             "funding": [
                 {
@@ -2573,14 +2573,14 @@
             "license": "MIT"
         },
         "node_modules/vite": {
-            "version": "5.3.1",
+            "version": "5.3.3",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
-            "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==",
+            "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "esbuild": "^0.21.3",
-                "postcss": "^8.4.38",
+                "postcss": "^8.4.39",
                 "rollup": "^4.13.0"
             },
             "bin": {

public/vendor/livewire/livewire.esm.js

@@ -8660,7 +8660,7 @@ function extractDestinationFromLink(linkEl) {
   return createUrlObjectFromString(linkEl.getAttribute("href"));
 }
 function createUrlObjectFromString(urlString) {
-  return new URL(urlString, document.baseURI);
+  return urlString !== null && new URL(urlString, document.baseURI);
 }
 function getUriStringFromUrlObject(urlObject) {
   return urlObject.pathname + urlObject.search + urlObject.hash;
@@ -9087,12 +9087,16 @@ function navigate_default(Alpine19) {
     let shouldPrefetchOnHover = modifiers.includes("hover");
     shouldPrefetchOnHover && whenThisLinkIsHoveredFor(el, 60, () => {
       let destination = extractDestinationFromLink(el);
+      if (!destination)
+        return;
       prefetchHtml(destination, (html, finalDestination) => {
         storeThePrefetchedHtmlForWhenALinkIsClicked(html, destination, finalDestination);
       });
     });
     whenThisLinkIsPressed(el, (whenItIsReleased) => {
       let destination = extractDestinationFromLink(el);
+      if (!destination)
+        return;
       prefetchHtml(destination, (html, finalDestination) => {
         storeThePrefetchedHtmlForWhenALinkIsClicked(html, destination, finalDestination);
       });

public/vendor/livewire/livewire.js

@@ -7305,7 +7305,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     return createUrlObjectFromString(linkEl.getAttribute("href"));
   }
   function createUrlObjectFromString(urlString) {
-    return new URL(urlString, document.baseURI);
+    return urlString !== null && new URL(urlString, document.baseURI);
   }
   function getUriStringFromUrlObject(urlObject) {
     return urlObject.pathname + urlObject.search + urlObject.hash;
@@ -7730,12 +7730,16 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       let shouldPrefetchOnHover = modifiers.includes("hover");
       shouldPrefetchOnHover && whenThisLinkIsHoveredFor(el, 60, () => {
         let destination = extractDestinationFromLink(el);
+        if (!destination)
+          return;
         prefetchHtml(destination, (html, finalDestination) => {
           storeThePrefetchedHtmlForWhenALinkIsClicked(html, destination, finalDestination);
         });
       });
       whenThisLinkIsPressed(el, (whenItIsReleased) => {
         let destination = extractDestinationFromLink(el);
+        if (!destination)
+          return;
         prefetchHtml(destination, (html, finalDestination) => {
           storeThePrefetchedHtmlForWhenALinkIsClicked(html, destination, finalDestination);
         });

public/vendor/livewire/manifest.json

@@ -1,2 +1,2 @@
 
-{"/livewire.js":"87e1046f"}
+{"/livewire.js":"c4fc8c5d"}

resources/views/components/global-search-result-mod.blade.php

@@ -0,0 +1,9 @@
+<a href="/mod/{{ $result->id }}/{{ $result->slug }}" class="{{ $linkClass }}" role="listitem" tabindex="0">
+    @if(empty($result->thumbnail))
+        <img src="https://placehold.co/450x450/EEE/31343C?font=source-sans-pro&text={{ $result->name }}" alt="{{ $result->name }}" class="block dark:hidden h-6 w-6 flex-none border border-gray-200 group-hover/global-search-link:border-gray-400">
+        <img src="https://placehold.co/450x450/31343C/EEE?font=source-sans-pro&text={{ $result->name }}" alt="{{ $result->name }}" class="hidden dark:block h-6 w-6 flex-none border border-gray-700 group-hover/global-search-link:border-gray-600">
+    @else
+        <img src="{{ Storage::url($result->thumbnail) }}" alt="{{ $result->name }}" class="h-6 w-6 flex-none">
+    @endif
+    <p>{{ $result->name }}</p>
+</a>

resources/views/components/global-search-result-user.blade.php

@@ -0,0 +1,3 @@
+<a href="#/{{ Str::slug($result->name) }}" class="{{ $linkClass }}">
+    <p>{{ $result->name }}</p>
+</a>

resources/views/components/global-search-results.blade.php

@@ -0,0 +1,32 @@
+<div id="search-results" aria-live="polite" class="{{ $showDropdown ? 'block' : 'hidden' }} absolute z-10 top-11 w-full mx-auto max-w-2xl transform overflow-hidden rounded-md bg-white dark:bg-gray-900 shadow-2xl border border-gray-300 dark:border-gray-700 transition-all">
+    @if($showDropdown)
+        <h2 class="sr-only">{{ __('Search Results') }}</h2>
+        <div class="max-h-96 scroll-py-2 overflow-y-auto" role="list">
+            @foreach($results['data'] as $typeName => $typeResults)
+                @if($typeResults->count())
+                    <h4 class="flex flex-row gap-1.5 py-2.5 px-4 text-[0.6875rem] font-semibold uppercase text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-950">
+                        <span>{{ Str::plural($typeName) }}</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                        </svg>
+                    </h4>
+                    @foreach($typeResults as $result)
+                        @component('components.global-search-result-' . Str::lower($typeName), [
+                            'result' => $result,
+                            'linkClass' => 'group/global-search-link flex flex-row gap-3 py-1.5 px-4 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-100 ease-in-out',
+                        ])
+                        @endcomponent
+                    @endforeach
+                @endif
+            @endforeach
+        </div>
+    @endif
+    @if($noResults)
+        <div class="px-6 py-14 text-center sm:px-14">
+            <svg class="mx-auto h-6 w-6 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+            </svg>
+            <p class="mt-4 text-sm text-gray-900 dark:text-gray-200">{{ __("We couldn't find any content with that query. Please try again.") }}</p>
+        </div>
+    @endif
+</div>

resources/views/layouts/app.blade.php

@@ -29,7 +29,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles
 </head>
-<body class="font-sans antialiased" x-data="{ searchOpen: false }">
+<body class="font-sans antialiased">
 
 <x-warning/>
 
@@ -53,9 +53,7 @@
 
 <x-footer/>
 
-@livewire('global-search')
 @stack('modals')
-
 @livewireScriptConfig
 </body>
 </html>

resources/views/livewire/global-search.blade.php

@@ -1,39 +1,23 @@
-<div class="relative z-10" role="dialog" aria-modal="true">
+<div class="flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end">
-    <div x-cloak x-show="searchOpen" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-gray-900 dark:bg-gray-400 bg-opacity-80 dark:bg-opacity-80 transition-opacity"></div>
+    <div class="w-full max-w-lg lg:max-w-md">
-    <div x-cloak x-show="searchOpen" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @keyup.escape.window="searchOpen = false" class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
+        <label for="search" class="sr-only">{{ __('Search') }}</label>
-        <div @click.outside="searchOpen = false" class="mx-auto max-w-2xl transform divide-y divide-gray-100 dark:divide-gray-500 overflow-hidden rounded-xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+        <search class="relative group" role="search">
-            <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-                <svg class="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"/>
+                    <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
                 </svg>
-                <input wire:model.live="query" id="global-search" type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 dark:text-white placeholder:text-gray-400 focus:ring-0 sm:text-sm" placeholder="{{ __('Search for a mod...') }}">
             </div>
-
+            <input id="global-search"
-            @if($results->count() && $this->query)
+                type="search"
-                <ul class="max-h-80 scroll-py-2 divide-y divide-gray-100 dark:divide-gray-500 overflow-y-auto">
+                wire:model.live="query"
-                    <h2 class="sr-only">{{ __('Search Results') }}</h2>
+                @keydown.escape.window="$wire.clearSearch()"
-                    @foreach($results as $result)
+                placeholder="{{ __('Search') }}"
-                        <li class="text-sm group">
+                aria-controls="search-results"
-                            <a href="/mod/{{ $result->id }}/{{ $result->slug }}" class="block w-full group flex select-none items-center rounded-md p-3 text-gray-700 hover:text-black focus:text-black dark:text-gray-400 dark:hover:text-white">
+                aria-expanded="{{ $showDropdown ? 'true' : 'false' }}"
-                                @if(empty($result->thumbnail))
+                aria-label="{{ __('Search') }}"
-                                    <img src="https://placehold.co/450x450/EEE/31343C?font=source-sans-pro&text={{ $result->name }}" alt="{{ $result->name }}" class="block dark:hidden h-6 w-6 flex-none">
+                class="block w-full rounded-md border-0 bg-white dark:bg-gray-700 py-1.5 pl-10 pr-3 text-gray-900 dark:text-gray-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 dark:focus:bg-gray-200 dark:focus:text-black dark:focus:ring-0 sm:text-sm sm:leading-6"
-                                    <img src="https://placehold.co/450x450/31343C/EEE?font=source-sans-pro&text={{ $result->name }}" alt="{{ $result->name }}" class="hidden dark:block h-6 w-6 flex-none">
+            />
-                                @else
+            <x-global-search-results :showDropdown="$showDropdown" :noResults="$noResults" :results="$results" />
-                                    <img src="{{ Storage::url($result->thumbnail) }}" alt="{{ $result->name }}" class="h-6 w-6 flex-none">
+        </search>
-                                @endif
-                                <span class="ml-3 flex-auto truncate">{{ $result->name }}</span>
-                                <span class="ml-3 flex-none text-xs font-semibold text-gray-400">Mod</span> </a>
-                        </li>
-                    @endforeach
-                </ul>
-            @elseif(!$results->count() && $this->query)
-                <div class="px-6 py-14 text-center sm:px-14">
-                    <svg class="mx-auto h-6 w-6 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/>
-                    </svg>
-                    <p class="mt-4 text-sm text-gray-900 dark:text-gray-200">{{ __("We couldn't find any content with that query. Please try again.") }}</p>
-                </div>
-            @endif
-        </div>
     </div>
 </div>

resources/views/navigation-menu.blade.php

@@ -16,19 +16,9 @@
                     </div>
                 </div>
             </div>
-            <div class="flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end">
+
-                <div class="w-full max-w-lg lg:max-w-xs">
+            @livewire('global-search')
-                    <label for="search" class="sr-only">{{ __('Search') }}</label>
+
-                    <div class="relative group">
-                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-                            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                                <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
-                            </svg>
-                        </div>
-                        <input id="search" name="search" class="block w-full rounded-md border-0 bg-white dark:bg-gray-700 py-1.5 pl-10 pr-3 text-gray-900 dark:text-gray-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 dark:focus:bg-gray-200 dark:focus:text-black dark:focus:ring-0 sm:text-sm sm:leading-6" placeholder="{{ __('Search') }}" type="search">
-                    </div>
-                </div>
-            </div>
             <div class="flex lg:hidden">
                 {{-- Mobile Menu Button --}}
                 <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" :aria-expanded="mobileMenuOpen">