feat(global-search): integrate projects and environments into global search functionality

- Added retrieval and mapping of projects and environments to the global search results.
- Enhanced search result structure to include resource counts and descriptions for projects and environments.
- Updated the UI to reflect the new search capabilities, improving user experience when searching for resources.

app/Livewire/GlobalSearch.php

@@ -3,6 +3,8 @@
 namespace App\Livewire;
 
 use App\Models\Application;
+use App\Models\Environment;
+use App\Models\Project;
 use App\Models\Server;
 use App\Models\Service;
 use App\Models\StandaloneClickhouse;
@@ -335,11 +337,81 @@ class GlobalSearch extends Component
                     ];
                 });
 
+            // Get all projects
+            $projects = Project::ownedByCurrentTeam()
+                ->withCount(['environments', 'applications', 'services'])
+                ->get()
+                ->map(function ($project) {
+                    $resourceCount = $project->applications_count + $project->services_count;
+                    $resourceSummary = $resourceCount > 0
+                        ? "{$resourceCount} resource".($resourceCount !== 1 ? 's' : '')
+                        : 'No resources';
+
+                    return [
+                        'id' => $project->id,
+                        'name' => $project->name,
+                        'type' => 'project',
+                        'uuid' => $project->uuid,
+                        'description' => $project->description,
+                        'link' => $project->navigateTo(),
+                        'project' => null,
+                        'environment' => null,
+                        'resource_count' => $resourceSummary,
+                        'environment_count' => $project->environments_count,
+                        'search_text' => strtolower($project->name.' '.$project->description.' project'),
+                    ];
+                });
+
+            // Get all environments
+            $environments = Environment::query()
+                ->whereHas('project', function ($query) {
+                    $query->where('team_id', auth()->user()->currentTeam()->id);
+                })
+                ->with('project')
+                ->withCount(['applications', 'services'])
+                ->get()
+                ->map(function ($environment) {
+                    $resourceCount = $environment->applications_count + $environment->services_count;
+                    $resourceSummary = $resourceCount > 0
+                        ? "{$resourceCount} resource".($resourceCount !== 1 ? 's' : '')
+                        : 'No resources';
+
+                    // Build description with project context
+                    $descriptionParts = [];
+                    if ($environment->project) {
+                        $descriptionParts[] = "Project: {$environment->project->name}";
+                    }
+                    if ($environment->description) {
+                        $descriptionParts[] = $environment->description;
+                    }
+                    if (empty($descriptionParts)) {
+                        $descriptionParts[] = $resourceSummary;
+                    }
+
+                    return [
+                        'id' => $environment->id,
+                        'name' => $environment->name,
+                        'type' => 'environment',
+                        'uuid' => $environment->uuid,
+                        'description' => implode(' • ', $descriptionParts),
+                        'link' => route('project.resource.index', [
+                            'project_uuid' => $environment->project->uuid,
+                            'environment_uuid' => $environment->uuid,
+                        ]),
+                        'project' => $environment->project->name ?? null,
+                        'environment' => null,
+                        'resource_count' => $resourceSummary,
+                        'search_text' => strtolower($environment->name.' '.$environment->description.' '.$environment->project->name.' environment'),
+                    ];
+                });
+
             // Merge all collections
             $items = $items->merge($applications)
                 ->merge($services)
                 ->merge($databases)
-                ->merge($servers);
+                ->merge($servers)
+                ->merge($projects)
+                ->merge($environments);
 
             return $items->toArray();
         });

app/Models/Environment.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use App\Traits\ClearsGlobalSearchCache;
 use App\Traits\HasSafeStringAttribute;
 use OpenApi\Attributes as OA;
 
@@ -19,6 +20,7 @@ use OpenApi\Attributes as OA;
 )]
 class Environment extends BaseModel
 {
+    use ClearsGlobalSearchCache;
     use HasSafeStringAttribute;
 
     protected $guarded = [];

app/Models/Project.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use App\Traits\ClearsGlobalSearchCache;
 use App\Traits\HasSafeStringAttribute;
 use OpenApi\Attributes as OA;
 use Visus\Cuid2\Cuid2;
@@ -24,6 +25,7 @@ use Visus\Cuid2\Cuid2;
 )]
 class Project extends BaseModel
 {
+    use ClearsGlobalSearchCache;
     use HasSafeStringAttribute;
 
     protected $guarded = [];

app/Traits/ClearsGlobalSearchCache.php

@@ -10,77 +10,119 @@ trait ClearsGlobalSearchCache
     protected static function bootClearsGlobalSearchCache()
     {
         static::saving(function ($model) {
-            // Only clear cache if searchable fields are being changed
+            try {
-            if ($model->hasSearchableChanges()) {
+                // Only clear cache if searchable fields are being changed
-                $teamId = $model->getTeamIdForCache();
+                if ($model->hasSearchableChanges()) {
-                if (filled($teamId)) {
+                    $teamId = $model->getTeamIdForCache();
-                    GlobalSearch::clearTeamCache($teamId);
+                    if (filled($teamId)) {
+                        GlobalSearch::clearTeamCache($teamId);
+                    }
                 }
+            } catch (\Throwable $e) {
+                // Silently fail cache clearing - don't break the save operation
+                ray('Failed to clear global search cache on saving: '.$e->getMessage());
             }
         });
 
         static::created(function ($model) {
-            // Always clear cache when model is created
+            try {
-            $teamId = $model->getTeamIdForCache();
+                // Always clear cache when model is created
-            if (filled($teamId)) {
+                $teamId = $model->getTeamIdForCache();
-                GlobalSearch::clearTeamCache($teamId);
+                if (filled($teamId)) {
+                    GlobalSearch::clearTeamCache($teamId);
+                }
+            } catch (\Throwable $e) {
+                // Silently fail cache clearing - don't break the create operation
+                ray('Failed to clear global search cache on creation: '.$e->getMessage());
             }
         });
 
         static::deleted(function ($model) {
-            // Always clear cache when model is deleted
+            try {
-            $teamId = $model->getTeamIdForCache();
+                // Always clear cache when model is deleted
-            if (filled($teamId)) {
+                $teamId = $model->getTeamIdForCache();
-                GlobalSearch::clearTeamCache($teamId);
+                if (filled($teamId)) {
+                    GlobalSearch::clearTeamCache($teamId);
+                }
+            } catch (\Throwable $e) {
+                // Silently fail cache clearing - don't break the delete operation
+                ray('Failed to clear global search cache on deletion: '.$e->getMessage());
             }
         });
     }
 
     private function hasSearchableChanges(): bool
     {
-        // Define searchable fields based on model type
+        try {
-        $searchableFields = ['name', 'description'];
+            // Define searchable fields based on model type
+            $searchableFields = ['name', 'description'];
 
-        // Add model-specific searchable fields
+            // Add model-specific searchable fields
-        if ($this instanceof \App\Models\Application) {
+            if ($this instanceof \App\Models\Application) {
-            $searchableFields[] = 'fqdn';
+                $searchableFields[] = 'fqdn';
-            $searchableFields[] = 'docker_compose_domains';
+                $searchableFields[] = 'docker_compose_domains';
-        } elseif ($this instanceof \App\Models\Server) {
+            } elseif ($this instanceof \App\Models\Server) {
-            $searchableFields[] = 'ip';
+                $searchableFields[] = 'ip';
-        } elseif ($this instanceof \App\Models\Service) {
+            } elseif ($this instanceof \App\Models\Service) {
-            // Services don't have direct fqdn, but name and description are covered
+                // Services don't have direct fqdn, but name and description are covered
-        }
+            } elseif ($this instanceof \App\Models\Project || $this instanceof \App\Models\Environment) {
-        // Database models only have name and description as searchable
+                // Projects and environments only have name and description as searchable
-
-        // Check if any searchable field is dirty
-        foreach ($searchableFields as $field) {
-            if ($this->isDirty($field)) {
-                return true;
             }
-        }
+            // Database models only have name and description as searchable
 
-        return false;
+            // Check if any searchable field is dirty
+            foreach ($searchableFields as $field) {
+                // Check if attribute exists before checking if dirty
+                if (array_key_exists($field, $this->getAttributes()) && $this->isDirty($field)) {
+                    return true;
+                }
+            }
+
+            return false;
+        } catch (\Throwable $e) {
+            // If checking changes fails, assume changes exist to be safe
+            ray('Failed to check searchable changes: '.$e->getMessage());
+
+            return true;
+        }
     }
 
     private function getTeamIdForCache()
     {
-        // For database models, team is accessed through environment.project.team
+        try {
-        if (method_exists($this, 'team')) {
+            // For Project models (has direct team_id)
-            if ($this instanceof \App\Models\Server) {
+            if ($this instanceof \App\Models\Project) {
-                $team = $this->team;
+                return $this->team_id ?? null;
-            } else {
-                $team = $this->team();
             }
-            if (filled($team)) {
+
-                return is_object($team) ? $team->id : null;
+            // For Environment models (get team_id through project)
+            if ($this instanceof \App\Models\Environment) {
+                return $this->project?->team_id;
             }
-        }
 
-        // For models with direct team_id property
+            // For database models, team is accessed through environment.project.team
-        if (property_exists($this, 'team_id') || isset($this->team_id)) {
+            if (method_exists($this, 'team')) {
-            return $this->team_id;
+                if ($this instanceof \App\Models\Server) {
-        }
+                    $team = $this->team;
+                } else {
+                    $team = $this->team();
+                }
+                if (filled($team)) {
+                    return is_object($team) ? $team->id : null;
+                }
+            }
 
-        return null;
+            // For models with direct team_id property
+            if (property_exists($this, 'team_id') || isset($this->team_id)) {
+                return $this->team_id ?? null;
+            }
+
+            return null;
+        } catch (\Throwable $e) {
+            // If we can't determine team ID, return null
+            ray('Failed to get team ID for cache: '.$e->getMessage());
+
+            return null;
+        }
     }
 }

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

@@ -80,41 +80,42 @@
     <!-- Modal overlay -->
     <template x-teleport="body">
         <div x-show="modalOpen" x-cloak
-            class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen">
+            class="fixed top-0 left-0 z-99 flex items-start justify-center w-screen h-screen pt-[20vh]">
-            <div @click="closeModal()" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs">
+            <div @click="closeModal()" class="absolute inset-0 w-full h-full bg-black/50 backdrop-blur-sm">
             </div>
-            <div x-show="modalOpen" x-trap.inert="modalOpen" 
+            <div x-show="modalOpen" x-trap.inert="modalOpen" x-init="$watch('modalOpen', value => { document.body.style.overflow = value ? 'hidden' : '' })"
-                 x-init="$watch('modalOpen', value => { document.body.style.overflow = value ? 'hidden' : '' })" 
+                x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-4 scale-95"
-                 x-transition:enter="ease-out duration-100"
+                x-transition:enter-end="opacity-100 translate-y-0 scale-100" x-transition:leave="ease-in duration-150"
-                x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
+                x-transition:leave-start="opacity-100 translate-y-0 scale-100"
-                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                x-transition:leave-end="opacity-0 -translate-y-4 scale-95" class="relative w-full max-w-2xl mx-4"
-                x-transition:leave="ease-in duration-100"
-                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-                x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300"
                 @click.stop>
 
-                <div class="flex justify-between items-center pb-3">
+                <!-- Search input (always visible) -->
-                    <h3 class="pr-8 text-2xl font-bold">Search</h3>
+                <div class="relative">
-                    <button @click="closeModal()"
+                    <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
-                        class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
+                        <svg class="w-5 h-5 text-neutral-400" xmlns="http://www.w3.org/2000/svg" fill="none"
-                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                            viewBox="0 0 24 24" stroke="currentColor">
-                            stroke-width="1.5" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                         </svg>
+                    </div>
+                    <input type="text" wire:model.live.debounce.500ms="searchQuery"
+                        placeholder="Search for resources, servers, projects, and environments" x-ref="searchInput"
+                        x-init="$watch('modalOpen', value => { if (value) setTimeout(() => $refs.searchInput.focus(), 100) })"
+                        class="w-full pl-12 pr-12 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-coollabs dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500" />
+                    <button @click="closeModal()"
+                        class="absolute inset-y-0 right-2 flex items-center justify-center px-2 text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 rounded">
+                        ESC
                     </button>
                 </div>
 
-                <div class="relative w-auto">
+                <!-- Search results (with background) -->
-                    <input type="text" wire:model.live.debounce.500ms="searchQuery"
+                @if (strlen($searchQuery) >= 1)
-                        placeholder="Type to search for applications, services, databases, and servers..."
+                    <div
-                        x-ref="searchInput" x-init="$watch('modalOpen', value => { if (value) setTimeout(() => $refs.searchInput.focus(), 100) })" class="w-full input mb-4" />
+                        class="mt-2 bg-white dark:bg-coolgray-100 rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 overflow-hidden">
-
-                    <!-- Search results -->
-                    <div class="relative min-h-[330px] max-h-[400px] overflow-y-auto scrollbar">
                         <!-- Loading indicator -->
                         <div wire:loading.flex wire:target="searchQuery"
-                            class="min-h-[330px] items-center justify-center">
+                            class="min-h-[200px] items-center justify-center p-8">
                             <div class="text-center">
                                 <svg class="animate-spin mx-auto h-8 w-8 text-neutral-400"
                                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -131,59 +132,52 @@
                         </div>
 
                         <!-- Results content - hidden while loading -->
-                        <div wire:loading.remove wire:target="searchQuery">
+                        <div wire:loading.remove wire:target="searchQuery"
+                            class="max-h-[60vh] overflow-y-auto scrollbar">
                             @if (strlen($searchQuery) >= 2 && count($searchResults) > 0)
-                                <div class="space-y-1 my-4 pb-4">
+                                <div class="py-2">
                                     @foreach ($searchResults as $index => $result)
                                         <a href="{{ $result['link'] ?? '#' }}"
-                                            class="search-result-item block p-3 mx-1 hover:bg-neutral-200 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:ring-1 focus:ring-coollabs focus:bg-neutral-100 dark:focus:bg-coolgray-200 ">
+                                            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-neutral-100 dark:focus:bg-coolgray-200 border-l-2 border-transparent hover:border-coollabs focus:border-coollabs">
-                                            <div class="flex items-center justify-between">
+                                            <div class="flex items-center justify-between gap-3">
-                                                <div class="flex-1">
+                                                <div class="flex-1 min-w-0">
-                                                    <div class="flex items-center gap-2">
+                                                    <div class="flex items-center gap-2 mb-1">
-                                                        <span class="font-medium text-neutral-900 dark:text-white">
+                                                        <span
+                                                            class="font-medium text-neutral-900 dark:text-white truncate">
                                                             {{ $result['name'] }}
                                                         </span>
-                                                        @if ($result['type'] === 'server')
+                                                        <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">
-                                                                class="px-2 py-0.5 text-xs rounded bg-coolgray-100 text-white">
+                                                            @if ($result['type'] === 'application')
-                                                                Server
-                                                            </span>
-                                                        @endif
-                                                    </div>
-                                                    <div class="flex items-center gap-2">
-                                                        @if (!empty($result['project']) && !empty($result['environment']))
-                                                            <span
-                                                                class="text-xs text-neutral-500 dark:text-neutral-400">
-                                                                {{ $result['project'] }} / {{ $result['environment'] }}
-                                                            </span>
-                                                        @endif
-                                                        @if ($result['type'] === 'application')
-                                                            <span
-                                                                class="px-2 py-0.5 text-xs rounded bg-coolgray-100 text-white">
                                                                 Application
-                                                            </span>
+                                                            @elseif ($result['type'] === 'service')
-                                                        @elseif ($result['type'] === 'service')
-                                                            <span
-                                                                class="px-2 py-0.5 text-xs rounded bg-coolgray-100 text-white">
                                                                 Service
-                                                            </span>
+                                                            @elseif ($result['type'] === 'database')
-                                                        @elseif ($result['type'] === 'database')
-                                                            <span
-                                                                class="px-2 py-0.5 text-xs rounded bg-coolgray-100 text-white">
                                                                 {{ ucfirst($result['subtype'] ?? 'Database') }}
-                                                            </span>
+                                                            @elseif ($result['type'] === 'server')
-                                                        @endif
+                                                                Server
+                                                            @elseif ($result['type'] === 'project')
+                                                                Project
+                                                            @elseif ($result['type'] === 'environment')
+                                                                Environment
+                                                            @endif
+                                                        </span>
                                                     </div>
-                                                    @if (!empty($result['description']))
+                                                    @if (!empty($result['project']) && !empty($result['environment']))
                                                         <div
-                                                            class="text-sm text-neutral-600 dark:text-neutral-400 mt-0.5">
+                                                            class="text-xs text-neutral-500 dark:text-neutral-400 mb-1">
-                                                            {{ Str::limit($result['description'], 100) }}
+                                                            {{ $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 ml-2 h-4 w-4 text-neutral-400" fill="none"
+                                                    class="shrink-0 h-5 w-5 text-neutral-300 dark:text-neutral-600 self-center"
-                                                    viewBox="0 0 24 24" stroke="currentColor">
+                                                    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>
@@ -192,41 +186,29 @@
                                     @endforeach
                                 </div>
                             @elseif (strlen($searchQuery) >= 2 && count($searchResults) === 0)
-                                <div class="flex items-center justify-center min-h-[330px]">
+                                <div class="flex items-center justify-center py-12 px-4">
                                     <div class="text-center">
-                                        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+                                        <p class="mt-4 text-sm font-medium text-neutral-900 dark:text-white">
-                                            No results found for "<strong>{{ $searchQuery }}</strong>"
+                                            No results found
                                         </p>
-                                        <p class="text-xs text-neutral-500 dark:text-neutral-500 mt-2">
+                                        <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
                                             Try different keywords or check the spelling
                                         </p>
                                     </div>
                                 </div>
                             @elseif (strlen($searchQuery) > 0 && strlen($searchQuery) < 2)
-                                <div class="flex items-center justify-center min-h-[330px]">
+                                <div class="flex items-center justify-center py-12 px-4">
                                     <div class="text-center">
                                         <p class="text-sm text-neutral-600 dark:text-neutral-400">
                                             Type at least 2 characters to search
                                         </p>
                                     </div>
                                 </div>
-                            @else
-                                <div class="flex items-center justify-center min-h-[330px]">
-                                    <div class="text-center">
-                                        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-                                            Start typing to search
-                                        </p>
-                                        <p class="text-xs text-neutral-500 dark:text-neutral-500 mt-2">
-                                            Search for applications, services, databases, and servers
-                                        </p>
-                                    </div>
-                                </div>
                             @endif
                         </div>
                     </div>
-                </div>
+                @endif
             </div>
         </div>
-</div>
+    </template>
-</template>
 </div>