update globalsearch

app/Livewire/GlobalSearch.php

@@ -22,6 +22,8 @@ class GlobalSearch extends Component
 {
     public $searchQuery = '';
 
+    private $previousTrimmedQuery = '';
+
     public $isModalOpen = false;
 
     public $searchResults = [];
@@ -86,6 +88,7 @@ public function closeSearchModal()
     {
         $this->isModalOpen = false;
         $this->searchQuery = '';
+        $this->previousTrimmedQuery = '';
         $this->searchResults = [];
     }
 
@@ -101,25 +104,49 @@ public static function clearTeamCache($teamId)
 
     public function updatedSearchQuery()
     {
-        $query = strtolower(trim($this->searchQuery));
+        $trimmedQuery = trim($this->searchQuery);
+
+        // If only spaces were added/removed, don't trigger a search
+        if ($trimmedQuery === $this->previousTrimmedQuery) {
+            return;
+        }
+
+        $this->previousTrimmedQuery = $trimmedQuery;
+
+        // If search query is empty, just clear results without processing
+        if (empty($trimmedQuery)) {
+            $this->searchResults = [];
+            $this->isCreateMode = false;
+            $this->creatableItems = [];
+            $this->autoOpenResource = null;
+            $this->isSelectingResource = false;
+            $this->cancelResourceSelection();
+
+            return;
+        }
+
+        $query = strtolower($trimmedQuery);
 
         // Reset keyboard navigation index
         $this->dispatch('reset-selected-index');
 
-        if (str_starts_with($query, 'new')) {
+        // Only enter create mode if query is exactly "new" or starts with "new " (space after)
+        if ($query === 'new' || str_starts_with($query, 'new ')) {
             $this->isCreateMode = true;
             $this->loadCreatableItems();
-            $this->searchResults = [];
 
             // Check for sub-commands like "new project", "new server", etc.
-            // Use original query (not trimmed) to ensure exact match without trailing spaces
+            $detectedType = $this->detectSpecificResource($query);
-            $detectedType = $this->detectSpecificResource(strtolower($this->searchQuery));
             if ($detectedType) {
                 $this->navigateToResource($detectedType);
             } else {
                 // If no specific resource detected, reset selection state
                 $this->cancelResourceSelection();
             }
+
+            // Also search for existing resources that match the query
+            // This allows users to find resources with "new" in their name
+            $this->search();
         } else {
             $this->isCreateMode = false;
             $this->creatableItems = [];
@@ -624,6 +651,8 @@ private function search()
         // Search for matching creatable resources to show as suggestions (if no priority item)
         if (! $priorityCreatableItem) {
             $this->loadCreatableItems();
+
+            // Search in regular creatable items (apps, databases, quick actions)
             $creatableSuggestions = collect($this->creatableItems)
                 ->filter(function ($item) use ($query) {
                     $searchText = strtolower($item['name'].' '.$item['description'].' '.($item['type'] ?? ''));
@@ -648,7 +677,37 @@ private function search()
                     $item['is_creatable_suggestion'] = true;
 
                     return $item;
+                });
+
+            // Also search in services (loaded on-demand)
+            $serviceSuggestions = collect($this->services)
+                ->filter(function ($item) use ($query) {
+                    $searchText = strtolower($item['name'].' '.$item['description'].' '.($item['type'] ?? ''));
+
+                    return preg_match('/\b'.preg_quote($query, '/').'/i', $searchText);
                 })
+                ->map(function ($item) use ($query) {
+                    // Calculate match priority: name > type > description
+                    $name = strtolower($item['name']);
+                    $type = strtolower($item['type'] ?? '');
+                    $description = strtolower($item['description']);
+
+                    if (preg_match('/\b'.preg_quote($query, '/').'/i', $name)) {
+                        $item['match_priority'] = 1;
+                    } elseif (preg_match('/\b'.preg_quote($query, '/').'/i', $type)) {
+                        $item['match_priority'] = 2;
+                    } else {
+                        $item['match_priority'] = 3;
+                    }
+
+                    $item['is_creatable_suggestion'] = true;
+
+                    return $item;
+                });
+
+            // Merge and sort all suggestions
+            $creatableSuggestions = $creatableSuggestions
+                ->merge($serviceSuggestions)
                 ->sortBy('match_priority')
                 ->take(10)
                 ->values()
@@ -914,31 +973,18 @@ private function loadCreatableItems()
             ]);
         }
 
-        // === Services Category ===
-
-        if ($user->can('createAnyResource')) {
-            // Load all services
-            $allServices = get_service_templates();
-
-            foreach ($allServices as $serviceKey => $service) {
-                $items->push([
-                    'name' => str($serviceKey)->headline()->toString(),
-                    'description' => data_get($service, 'slogan', 'Deploy '.str($serviceKey)->headline()),
-                    'type' => 'one-click-service-'.$serviceKey,
-                    'category' => 'Services',
-                    'resourceType' => 'service',
-                ]);
-            }
-        }
-
         $this->creatableItems = $items->toArray();
     }
 
     public function navigateToResource($type)
     {
-        // Find the item by type
+        // Find the item by type - check regular items first, then services
         $item = collect($this->creatableItems)->firstWhere('type', $type);
 
+        if (! $item) {
+            $item = collect($this->services)->firstWhere('type', $type);
+        }
+
         if (! $item) {
             return;
         }
@@ -1227,12 +1273,52 @@ public function getSelectedResourceNameProperty()
             $this->loadCreatableItems();
         }
 
-        // Find the item by type
+        // Find the item by type - check regular items first, then services
         $item = collect($this->creatableItems)->firstWhere('type', $this->selectedResourceType);
 
+        if (! $item) {
+            $item = collect($this->services)->firstWhere('type', $this->selectedResourceType);
+        }
+
         return $item ? $item['name'] : null;
     }
 
+    public function getServicesProperty()
+    {
+        // Cache services in a static property to avoid reloading on every access
+        static $cachedServices = null;
+
+        if ($cachedServices !== null) {
+            return $cachedServices;
+        }
+
+        $user = auth()->user();
+
+        if (! $user->can('createAnyResource')) {
+            $cachedServices = [];
+
+            return $cachedServices;
+        }
+
+        // Load all services
+        $allServices = get_service_templates();
+        $items = collect();
+
+        foreach ($allServices as $serviceKey => $service) {
+            $items->push([
+                'name' => str($serviceKey)->headline()->toString(),
+                'description' => data_get($service, 'slogan', 'Deploy '.str($serviceKey)->headline()),
+                'type' => 'one-click-service-'.$serviceKey,
+                'category' => 'Services',
+                'resourceType' => 'service',
+            ]);
+        }
+
+        $cachedServices = $items->toArray();
+
+        return $cachedServices;
+    }
+
     public function render()
     {
         return view('livewire.global-search');

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

@@ -1,14 +1,20 @@
 <div x-data="{
     modalOpen: false,
     selectedIndex: -1,
+    isSearching: false,
+    isLoadingInitialData: false,
     openModal() {
         this.modalOpen = true;
         this.selectedIndex = -1;
-        @this.openSearchModal();
+        this.isLoadingInitialData = true;
+        // Dispatch event to load initial data
+        $wire.dispatch('loadInitialData');
     },
     closeModal() {
         this.modalOpen = false;
         this.selectedIndex = -1;
+        this.isSearching = false;
+        this.isLoadingInitialData = false;
         // Ensure scroll is restored
         document.body.style.overflow = '';
         @this.closeSearchModal();
@@ -36,6 +42,46 @@
             this.selectedIndex = -1;
         });
 
+        // Listen for loading state changes
+        $wire.on('loadInitialData', () => {
+            this.isLoadingInitialData = true;
+            $wire.openSearchModal().finally(() => {
+                this.isLoadingInitialData = false;
+                // Focus input after data is loaded
+                setTimeout(() => this.$refs.searchInput?.focus(), 50);
+            });
+        });
+
+        // Use Livewire lifecycle hooks for accurate loading state
+        const componentId = $wire.__instance.id;
+
+        Livewire.hook('message.sent', (message, component) => {
+            // Only handle messages for this component instance
+            if (component.id !== componentId) return;
+
+            // Check if this is a searchQuery update
+            if (message.updateQueue && message.updateQueue.some(update => update.payload.name === 'searchQuery')) {
+                this.isSearching = true;
+            }
+        });
+
+        Livewire.hook('message.processed', (message, component) => {
+            // Only handle messages for this component instance
+            if (component.id !== componentId) return;
+
+            // Check if this was a searchQuery update
+            if (message.updateQueue && message.updateQueue.some(update => update.payload.name === 'searchQuery')) {
+                this.isSearching = false;
+            }
+        });
+
+        // Also clear loading state when search is emptied
+        this.$watch('$wire.searchQuery', (value) => {
+            if (!value || value.length === 0) {
+                this.isSearching = false;
+            }
+        });
+
         // Create named handlers for proper cleanup
         const openGlobalSearchHandler = () => this.openModal();
         const slashKeyHandler = (e) => {
@@ -62,19 +108,13 @@
                 }
             }
         };
-        const escapeKeyHandler = async (e) => {
+        const escapeKeyHandler = (e) => {
             if (e.key === 'Escape' && this.modalOpen) {
                 // If search query is empty, close the modal
-                const searchQuery = await @this.get('searchQuery');
+                if (!$wire.searchQuery || $wire.searchQuery === '') {
-                if (searchQuery === '') {
+                    // Check if we're in a selection state using Alpine-accessible Livewire state
-                    // Check if we're in a selection state - go back to main menu first
+                    if ($wire.isSelectingResource) {
-                    const selectingServer = await @this.get('selectingServer');
+                        $wire.cancelResourceSelection();
-                    const selectingProject = await @this.get('selectingProject');
-                    const selectingEnvironment = await @this.get('selectingEnvironment');
-                    const selectingDestination = await @this.get('selectingDestination');
-
-                    if (selectingServer || selectingProject || selectingEnvironment || selectingDestination) {
-                        @this.call('cancelResourceSelection');
                         setTimeout(() => this.$refs.searchInput?.focus(), 100);
                     } else {
                         // Close the modal if in main menu
@@ -82,7 +122,7 @@
                     }
                 } else {
                     // If search query has text, just clear it
-                    @this.set('searchQuery', '');
+                    $wire.searchQuery = '';
                     setTimeout(() => this.$refs.searchInput?.focus(), 100);
                 }
             }
@@ -159,8 +199,8 @@ class="fixed top-0 left-0 z-99 flex items-start justify-center w-screen h-screen
                     </div>
                     <input type="text" wire:model.live.debounce.200ms="searchQuery"
                         placeholder="Search resources (type new for create things)..." x-ref="searchInput"
-                        x-init="$watch('modalOpen', value => { if (value) setTimeout(() => $refs.searchInput.focus(), 100) })"
+                        x-init="$watch('modalOpen', value => { if (value) setTimeout(() => $refs.searchInput.focus(), 100) })" :disabled="isLoadingInitialData"
-                        class="w-full pl-12 pr-32 py-4 text-base bg-white dark:bg-coolgray-100 border-none rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500" />
+                        class="w-full pl-12 pr-32 py-4 text-base bg-white dark:bg-coolgray-100 border-none rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 disabled:opacity-50 disabled:cursor-not-allowed" />
                     <div class="absolute inset-y-0 right-2 flex items-center gap-2 pointer-events-none">
                         <span class="text-xs font-medium text-neutral-400 dark:text-neutral-500">
                             / or ⌘K to focus
@@ -172,31 +212,53 @@ class="pointer-events-auto px-2 py-1 text-xs font-medium text-neutral-500 dark:t
                     </div>
                 </div>
 
+                <!-- Initial Loading State when opening modal -->
+                <div x-show="isLoadingInitialData && !$wire.searchQuery" x-cloak
+                    class="mt-2 bg-white dark:bg-coolgray-100 rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 overflow-hidden">
+                    <div class="flex items-center justify-center min-h-[200px] p-8">
+                        <div class="text-center">
+                            <svg class="animate-spin mx-auto h-8 w-8 text-neutral-400 mb-3"
+                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                                    stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor"
+                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                                </path>
+                            </svg>
+                            <p class="text-xs text-neutral-500 dark:text-neutral-500 mt-1">
+                                Please wait while we fetch your data
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
                 <!-- Search results (with background) -->
                 @if (strlen($searchQuery) >= 1)
                     <div
                         class="mt-2 bg-white dark:bg-coolgray-100 rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 overflow-hidden">
-                        <!-- Loading indicator -->
+                        <!-- Loading indicator with skeleton loaders -->
-                        <div wire:loading.flex wire:target="searchQuery"
+                        <div x-show="isSearching" x-cloak class="min-h-[200px] flex flex-col p-4">
-                            class="min-h-[200px] items-center justify-center p-8">
+                            <!-- Show skeleton loaders instead of just spinner -->
-                            <div class="text-center">
+                            <div class="animate-pulse">
-                                <svg class="animate-spin mx-auto h-8 w-8 text-neutral-400"
+                                @for ($i = 0; $i < 3; $i++)
-                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <div
-                                    <circle class="opacity-25" cx="12" cy="12" r="10"
+                                        class="px-4 py-3 {{ $i > 0 ? 'border-t border-neutral-100 dark:border-coolgray-200' : '' }}">
-                                        stroke="currentColor" stroke-width="4"></circle>
+                                        <div class="flex items-center gap-3">
-                                    <path class="opacity-75" fill="currentColor"
+                                            <div class="w-10 h-10 bg-neutral-200 dark:bg-coolgray-300 rounded-lg"></div>
-                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                                            <div class="flex-1">
-                                    </path>
+                                                <div class="h-4 bg-neutral-200 dark:bg-coolgray-300 rounded w-32 mb-2">
-                                </svg>
+                                                </div>
-                                <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+                                                <div class="h-3 bg-neutral-100 dark:bg-coolgray-400 rounded w-48"></div>
-                                    Searching...
+                                            </div>
-                                </p>
+                                            <div class="w-4 h-4 bg-neutral-100 dark:bg-coolgray-400 rounded"></div>
+                                        </div>
+                                    </div>
+                                @endfor
                             </div>
                         </div>
 
-                        <!-- Results content - hidden while loading -->
+                        <!-- Results content - show when not searching -->
-                        <div wire:loading.remove wire:target="searchQuery"
+                        <div x-show="!isSearching" x-cloak class="max-h-[60vh] overflow-y-auto scrollbar">
-                            class="max-h-[60vh] overflow-y-auto scrollbar">
                             @if ($isSelectingResource)
                                 <!-- Resource Selection Flow -->
                                 <div class="p-6">
@@ -516,15 +578,71 @@ class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:bo
                             @elseif ($isCreateMode && count($this->filteredCreatableItems) > 0 && !$autoOpenResource)
                                 <!-- Create new resources section -->
                                 <div class="py-2">
-                                    {{-- <div
+                                    {{-- Show existing resources first if any match --}}
-                                        class="px-4 py-2 bg-yellow-50 dark:bg-yellow-900/20 border-b border-yellow-100 dark:border-yellow-800">
+                                    @php
-                                        <h3 class="text-sm font-semibold text-yellow-900 dark:text-yellow-100">
+                                        $existingResources = collect($searchResults)->filter(fn($r) => !isset($r['is_creatable_suggestion']))->count();
-                                            Create New Resources
+                                    @endphp
-                                        </h3>
+                                    @if ($existingResources > 0)
-                                        <p class="text-xs text-yellow-700 dark:text-yellow-300 mt-0.5">
+                                        <!-- Existing Resources Section -->
-                                            Click on any item below to create a new resource
+                                        <div class="px-4 pt-3 pb-1">
-                                        </p>
+                                            <h4
-                                    </div> --}}
+                                                class="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
+                                                Existing Resources
+                                            </h4>
+                                        </div>
+                                        @foreach ($searchResults as $result)
+                                            @if (!isset($result['is_creatable_suggestion']))
+                                                <a href="{{ $result['link'] ?? '#' }}"
+                                                    class="search-result-item block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:bg-yellow-50 dark:focus:bg-yellow-900/20 border-transparent hover:border-coollabs focus:border-yellow-500 dark:focus:border-yellow-400">
+                                                    <div class="flex items-center justify-between gap-3">
+                                                        <div class="flex-1 min-w-0">
+                                                            <div class="flex items-center gap-2 mb-1">
+                                                                <span
+                                                                    class="font-medium text-neutral-900 dark:text-white truncate">
+                                                                    {{ $result['name'] }}
+                                                                </span>
+                                                                <span
+                                                                    class="px-2 py-0.5 text-xs rounded-full bg-neutral-100 dark:bg-coolgray-300 text-neutral-700 dark:text-neutral-300 shrink-0">
+                                                                    @if ($result['type'] === 'application')
+                                                                        Application
+                                                                    @elseif ($result['type'] === 'service')
+                                                                        Service
+                                                                    @elseif ($result['type'] === 'database')
+                                                                        {{ ucfirst($result['subtype'] ?? 'Database') }}
+                                                                    @elseif ($result['type'] === 'server')
+                                                                        Server
+                                                                    @elseif ($result['type'] === 'project')
+                                                                        Project
+                                                                    @elseif ($result['type'] === 'environment')
+                                                                        Environment
+                                                                    @endif
+                                                                </span>
+                                                            </div>
+                                                            @if (!empty($result['project']) && !empty($result['environment']))
+                                                                <div
+                                                                    class="text-xs text-neutral-500 dark:text-neutral-400 mb-1">
+                                                                    {{ $result['project'] }} /
+                                                                    {{ $result['environment'] }}
+                                                                </div>
+                                                            @endif
+                                                            @if (!empty($result['description']))
+                                                                <div
+                                                                    class="text-sm text-neutral-600 dark:text-neutral-400">
+                                                                    {{ Str::limit($result['description'], 80) }}
+                                                                </div>
+                                                            @endif
+                                                        </div>
+                                                        <svg xmlns="http://www.w3.org/2000/svg"
+                                                            class="shrink-0 h-5 w-5 text-neutral-300 dark:text-neutral-600 self-center"
+                                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                                stroke-width="2" d="M9 5l7 7-7 7" />
+                                                        </svg>
+                                                    </div>
+                                                </a>
+                                            @endif
+                                        @endforeach
+                                    @endif
 
                                     @php
                                         $grouped = collect($this->filteredCreatableItems)->groupBy('category');
@@ -695,6 +813,9 @@ class="shrink-0 h-5 w-5 text-neutral-300 dark:text-neutral-600 self-center"
                                         <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
                                             Try different keywords or check the spelling
                                         </p>
+                                        <p class="mt-2 text-xs text-neutral-400 dark:text-neutral-500">
+                                            💡 Tip: Search for service names like "wordpress", "postgres", or "redis"
+                                        </p>
                                     </div>
                                 </div>
                             @endif
@@ -957,4 +1078,5 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5
             </div>
         </template>
     </div>
+
 </div>