Add live topbar search for hosting accounts and sites.

Wire a JSON /search endpoint and Alpine dropdown so customers can find accounts, linked domains, and orders from the hosting app header.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/Http/Controllers/Hosting/SearchController.php

@@ -0,0 +1,104 @@
+<?php
+
+namespace App\Http\Controllers\Hosting;
+
+use App\Http\Controllers\Controller;
+use App\Models\CustomerHostingOrder;
+use App\Models\HostingAccount;
+use App\Models\HostingAccountMember;
+use App\Models\HostingProduct;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class SearchController extends Controller
+{
+    public function __invoke(Request $request): JsonResponse
+    {
+        $q = trim((string) $request->query('q', ''));
+
+        if (mb_strlen($q) < 2) {
+            return response()->json(['results' => []]);
+        }
+
+        return response()->json([
+            'results' => $this->resultsForUser($request->user(), $q),
+        ]);
+    }
+
+    /** @return list<array{type:string,title:string,subtitle:string,url:string}> */
+    private function resultsForUser($user, string $q): array
+    {
+        $like = '%'.$q.'%';
+        $results = [];
+        $seenUrls = [];
+
+        $push = function (array $item) use (&$results, &$seenUrls): void {
+            if (isset($seenUrls[$item['url']])) {
+                return;
+            }
+            $seenUrls[$item['url']] = true;
+            $results[] = $item;
+        };
+
+        $sharedTypes = [
+            HostingProduct::TYPE_SINGLE_DOMAIN,
+            HostingProduct::TYPE_MULTI_DOMAIN,
+            HostingProduct::TYPE_WORDPRESS,
+        ];
+
+        $sharedAccountIds = HostingAccountMember::query()
+            ->where('user_id', $user->id)
+            ->pluck('hosting_account_id');
+
+        HostingAccount::query()
+            ->where(function ($query) use ($user, $sharedAccountIds) {
+                $query->where('user_id', $user->id);
+                if ($sharedAccountIds->isNotEmpty()) {
+                    $query->orWhereIn('id', $sharedAccountIds);
+                }
+            })
+            ->whereHas('product', fn ($query) => $query->whereIn('type', $sharedTypes))
+            ->where(function ($query) use ($like) {
+                $query->where('username', 'like', $like)
+                    ->orWhere('primary_domain', 'like', $like)
+                    ->orWhereHas('sites', fn ($sites) => $sites->where('domain', 'like', $like));
+            })
+            ->with(['product', 'sites'])
+            ->orderByDesc('updated_at')
+            ->limit(8)
+            ->get()
+            ->each(function (HostingAccount $account) use ($push, $user): void {
+                $sharedDeveloperAccess = (int) $account->user_id !== (int) $user->id;
+                $push([
+                    'type' => 'hosting',
+                    'title' => $account->linkedDomainLabel() ?? $account->username,
+                    'subtitle' => ($account->product?->name ?? 'Hosting').' · '.ucfirst((string) $account->status),
+                    'url' => $sharedDeveloperAccess
+                        ? route('hosting.panel.index', $account)
+                        : route('hosting.accounts.show', $account),
+                ]);
+            });
+
+        CustomerHostingOrder::query()
+            ->forUser($user->id)
+            ->whereHas('product', fn ($query) => $query->whereIn('type', $sharedTypes))
+            ->where(function ($query) use ($like) {
+                $query->where('domain_name', 'like', $like)
+                    ->orWhere('server_ip', 'like', $like);
+            })
+            ->with('product')
+            ->orderByDesc('updated_at')
+            ->limit(5)
+            ->get()
+            ->each(function (CustomerHostingOrder $order) use ($push): void {
+                $push([
+                    'type' => 'order',
+                    'title' => $order->domain_name ?: ($order->product?->name ?? 'Hosting order #'.$order->id),
+                    'subtitle' => 'Hosting order · '.ucwords(str_replace('_', ' ', (string) $order->status)),
+                    'url' => route('hosting.orders.show', $order),
+                ]);
+            });
+
+        return array_slice($results, 0, 12);
+    }
+}

resources/js/app.js

@@ -50,5 +50,50 @@ Alpine.data('afia', (config = {}) => ({
     },
 }));
 
+Alpine.data('topbarSearch', (config = {}) => ({
+    query: '',
+    results: [],
+    open: false,
+    loading: false,
+    active: 0,
+    _abort: null,
+    searchUrl: config.searchUrl || '/search',
+
+    onFocus() {
+        if (this.results.length > 0 || this.query.trim().length >= 2) this.open = true;
+    },
+
+    async search() {
+        const q = this.query.trim();
+        if (q.length < 2) { this.results = []; this.open = false; return; }
+
+        this.loading = true;
+        this.open = true;
+        this.active = 0;
+
+        if (this._abort) this._abort.abort();
+        this._abort = new AbortController();
+
+        try {
+            const res = await fetch(`${this.searchUrl}?q=${encodeURIComponent(q)}`, {
+                signal: this._abort.signal,
+                headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
+            });
+            const data = await res.json();
+            this.results = data.results || [];
+        } catch (e) {
+            if (e.name !== 'AbortError') this.results = [];
+        } finally {
+            this.loading = false;
+        }
+    },
+
+    moveDown() { if (this.active < this.results.length - 1) this.active++; },
+    moveUp() { if (this.active > 0) this.active--; },
+    go() {
+        if (this.results[this.active]) window.location.href = this.results[this.active].url;
+    },
+}));
+
 window.Alpine = Alpine;
 Alpine.start();

resources/views/partials/topbar.blade.php

@@ -4,12 +4,35 @@
         <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden shrink-0 text-slate-500 hover:text-slate-700">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
         </button>
-        {{-- Search mailboxes --}}
-        <form method="GET" action="{{ route('hosting.dashboard') }}" class="relative hidden w-full max-w-md lg:block">
-            <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.2-5.2m0 0A7.5 7.5 0 1 0 5.2 5.2a7.5 7.5 0 0 0 10.6 10.6Z"/></svg>
-            <input type="text" name="q" value="{{ request('q') }}" placeholder="Search hosting…"
-                   class="w-full rounded-xl border border-slate-200 bg-slate-50 py-2 pl-9 pr-3 text-sm text-slate-700 placeholder-slate-400 transition focus:border-indigo-300 focus:bg-white focus:ring-2 focus:ring-indigo-100 focus:outline-none">
-        </form>
+        {{-- Search hosting accounts, domains, orders --}}
+        <div class="relative hidden w-full max-w-md lg:block" x-data="topbarSearch({ searchUrl: @js(route('hosting.search')) })" @click.outside="open = false" @keydown.escape.window="open = false">
+            <div class="relative">
+                <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.2-5.2m0 0A7.5 7.5 0 1 0 5.2 5.2a7.5 7.5 0 0 0 10.6 10.6Z"/></svg>
+                <input type="text" x-model="query" @focus="onFocus()" @input.debounce.200ms="search()" @keydown.arrow-down.prevent="moveDown()" @keydown.arrow-up.prevent="moveUp()" @keydown.enter.prevent="go()" placeholder="Search hosting…"
+                       class="w-full rounded-xl border border-slate-200 bg-slate-50 py-2 pl-9 pr-3 text-sm text-slate-700 placeholder-slate-400 transition focus:border-indigo-300 focus:bg-white focus:ring-2 focus:ring-indigo-100 focus:outline-none">
+            </div>
+            <div x-show="open && (results.length > 0 || (query.length >= 2 && !loading))" x-cloak x-transition.opacity.duration.150ms class="absolute left-0 top-full z-30 mt-1.5 w-full overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg">
+                <template x-if="loading"><div class="px-4 py-3 text-center text-xs text-slate-400">Searching…</div></template>
+                <template x-if="!loading && results.length === 0 && query.length >= 2"><div class="px-4 py-3 text-center text-xs text-slate-500">No results for "<span x-text="query" class="font-medium"></span>"</div></template>
+                <template x-if="!loading && results.length > 0">
+                    <ul class="max-h-72 overflow-y-auto py-1">
+                        <template x-for="(item, idx) in results" :key="item.url">
+                            <li>
+                                <a :href="item.url" :class="idx === active ? 'bg-indigo-50 text-indigo-700' : 'text-slate-700'" @mouseenter="active = idx" class="flex items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-indigo-50">
+                                    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-teal-100 text-teal-600">
+                                        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"/></svg>
+                                    </span>
+                                    <span class="min-w-0 flex-1">
+                                        <span class="block truncate font-medium leading-tight" x-text="item.title"></span>
+                                        <span class="block truncate text-xs text-slate-400" x-text="item.subtitle"></span>
+                                    </span>
+                                </a>
+                            </li>
+                        </template>
+                    </ul>
+                </template>
+            </div>
+        </div>
     </div>
     <div class="flex items-center gap-2.5">
         @auth

routes/web.php

@@ -9,6 +9,7 @@ use App\Http\Controllers\Hosting\HostingPanelController;
 use App\Http\Controllers\Hosting\HostingProductController;
 use App\Http\Controllers\Hosting\HostingTerminalSessionController;
 use App\Http\Controllers\Hosting\OverviewController;
+use App\Http\Controllers\Hosting\SearchController;
 use App\Http\Controllers\Hosting\TeamController;
 use Illuminate\Support\Facades\Route;
 
@@ -28,6 +29,7 @@ Route::get('/sso/logout-frontchannel', [SsoLoginController::class, 'frontchannel
 Route::get('/signed-out', fn () => auth()->check() ? redirect()->route('hosting.dashboard') : view('hosting.signed-out'))->name('hosting.signed-out');
 
 Route::middleware(['auth'])->group(function () use ($serversApp) {
+    Route::get('/search', SearchController::class)->name('hosting.search');
     Route::get('/dashboard', [OverviewController::class, 'index'])->name('hosting.dashboard');
 
     Route::redirect('/hosting', '/dashboard')->name('hosting.index');