From b95c59be8145ac20222bdb9a8f49197e958032c8 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 6 Dec 2025 08:07:52 -0500
Subject: [PATCH] feat: reimplement server icon customization feature

- Add user_set_icon and user_set_icon_color to Server model fillable
- Add icon modal properties and methods to Overview component
- Add clickable icon button next to server hostname in layout
- Add icon picker modal with search, color selection, and preview
- Support for 100+ Remix icons across various categories
- Icons persist to database and display on page load
---
 .../Servers/Proxmox/Livewire/Overview.php     |  46 +-
 extensions/Servers/Proxmox/Models/Server.php  |   2 +
 .../Proxmox/views/components/layout.blade.php | 422 +++++++++++++++++-
 3 files changed, 466 insertions(+), 4 deletions(-)

diff --git a/extensions/Servers/Proxmox/Livewire/Overview.php b/extensions/Servers/Proxmox/Livewire/Overview.php
index 0ee3cc31d..78397b16b 100644
--- a/extensions/Servers/Proxmox/Livewire/Overview.php
+++ b/extensions/Servers/Proxmox/Livewire/Overview.php
@@ -22,8 +22,10 @@ class Overview extends Component
     public $isEditingPassword = false;
     public $passwordError = '';
 
-    // Legacy property - kept to prevent errors for users with stale Livewire state
+    // Server icon customization
     public bool $showIconModal = false;
+    public string $selectedIcon = '';
+    public string $selectedIconColor = '';
 
     public string $cpuTimeRange = 'hour';
     public string $cpuAggregation = 'average';
@@ -51,6 +53,10 @@ class Overview extends Component
 
         $this->hostname = $server->hostname ?? ($this->status->name ?? '');
         
+        // Load icon customization
+        $this->selectedIcon = $server->user_set_icon ?? '';
+        $this->selectedIconColor = $server->user_set_icon_color ?? '';
+        
         // Load notes from Proxmox VM description
         try {
             $proxmox = new Proxmox;
@@ -61,6 +67,44 @@ class Overview extends Component
         }
     }
 
+    public function openIconModal(): void
+    {
+        $this->showIconModal = true;
+    }
+
+    public function closeIconModal(): void
+    {
+        $this->showIconModal = false;
+    }
+
+    public function saveIcon(string $icon, string $color): void
+    {
+        $this->server->update([
+            'user_set_icon' => $icon ?: null,
+            'user_set_icon_color' => $color ?: null,
+        ]);
+        
+        $this->selectedIcon = $icon;
+        $this->selectedIconColor = $color;
+        $this->showIconModal = false;
+        
+        $this->notify('Server icon updated successfully', 'success');
+    }
+
+    public function resetIcon(): void
+    {
+        $this->server->update([
+            'user_set_icon' => null,
+            'user_set_icon_color' => null,
+        ]);
+        
+        $this->selectedIcon = '';
+        $this->selectedIconColor = '';
+        $this->showIconModal = false;
+        
+        $this->notify('Server icon reset to default', 'success');
+    }
+
     public function checkStatus()
     {
         $currentStatus = $this->status->status;
diff --git a/extensions/Servers/Proxmox/Models/Server.php b/extensions/Servers/Proxmox/Models/Server.php
index 9dc1b3c62..508534ae6 100644
--- a/extensions/Servers/Proxmox/Models/Server.php
+++ b/extensions/Servers/Proxmox/Models/Server.php
@@ -20,6 +20,8 @@ class Server extends Model
         'status',
         'hostname',
         'password',
+        'user_set_icon',
+        'user_set_icon_color',
     ];
 
     public function node()
diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 74edf9834..3b0b5d56d 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -38,9 +38,149 @@
             @endphp
             
             <div class="flex flex-col gap-4 pb-6 pt-6 lg:flex-row lg:items-center lg:justify-between">
-                <span class="text-2xl font-bold">
-                    {{ $server->hostname }}
-                </span>
+                <div class="flex items-center gap-3">
+                    <!-- Server Icon -->
+                    <button 
+                        wire:click="openIconModal"
+                        class="flex-shrink-0 size-10 rounded-lg bg-background-secondary border border-neutral hover:border-primary/50 hover:bg-background-secondary/80 transition-all duration-200 flex items-center justify-center group"
+                        title="Click to customize server icon"
+                    >
+                        @if($server->user_set_icon)
+                            @php
+                                $iconStyle = $server->user_set_icon_color ? 'color: ' . $server->user_set_icon_color : '';
+                            @endphp
+                            @switch($server->user_set_icon)
+                                @case('ri-server-line')<x-ri-server-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-computer-line')<x-ri-computer-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-mac-line')<x-ri-mac-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-macbook-line')<x-ri-macbook-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-device-line')<x-ri-device-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-hard-drive-2-line')<x-ri-hard-drive-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-hard-drive-line')<x-ri-hard-drive-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-hard-drive-3-line')<x-ri-hard-drive-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-database-2-line')<x-ri-database-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-database-line')<x-ri-database-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-cloud-line')<x-ri-cloud-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-cloud-fill')<x-ri-cloud-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-cloudy-line')<x-ri-cloudy-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-cloudy-2-line')<x-ri-cloudy-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-terminal-box-line')<x-ri-terminal-box-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-terminal-line')<x-ri-terminal-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-code-box-line')<x-ri-code-box-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-code-line')<x-ri-code-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-code-s-slash-line')<x-ri-code-s-slash-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-cpu-line')<x-ri-cpu-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-chip-line')<x-ri-chip-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-memory-stick-line')<x-ri-memory-stick-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-ram-line')<x-ri-ram-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-ram-2-line')<x-ri-ram-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-global-line')<x-ri-global-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-earth-line')<x-ri-earth-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-planet-line')<x-ri-planet-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-router-line')<x-ri-router-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-wifi-line')<x-ri-wifi-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-signal-tower-line')<x-ri-signal-tower-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-base-station-line')<x-ri-base-station-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-shield-line')<x-ri-shield-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-shield-check-line')<x-ri-shield-check-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-shield-star-line')<x-ri-shield-star-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-lock-line')<x-ri-lock-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-lock-2-line')<x-ri-lock-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-rocket-line')<x-ri-rocket-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-rocket-2-line')<x-ri-rocket-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-spaceship-line')<x-ri-spaceship-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-plane-line')<x-ri-plane-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-game-line')<x-ri-game-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-gamepad-line')<x-ri-gamepad-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-steam-line')<x-ri-steam-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-playstation-line')<x-ri-playstation-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-xbox-line')<x-ri-xbox-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-windows-line')<x-ri-windows-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-ubuntu-line')<x-ri-ubuntu-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-centos-line')<x-ri-centos-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-linux-line')<x-ri-linux-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-apple-line')<x-ri-apple-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-bug-line')<x-ri-bug-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-bug-2-line')<x-ri-bug-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-robot-line')<x-ri-robot-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-robot-2-line')<x-ri-robot-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-home-line')<x-ri-home-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-home-2-line')<x-ri-home-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-building-line')<x-ri-building-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-building-2-line')<x-ri-building-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-store-line')<x-ri-store-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-flask-line')<x-ri-flask-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-test-tube-line')<x-ri-test-tube-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-microscope-line')<x-ri-microscope-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-fire-line')<x-ri-fire-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-fire-fill')<x-ri-fire-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-blaze-line')<x-ri-blaze-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-sparkling-line')<x-ri-sparkling-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-star-line')<x-ri-star-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-star-fill')<x-ri-star-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-vip-crown-line')<x-ri-vip-crown-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-vip-diamond-line')<x-ri-vip-diamond-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-heart-line')<x-ri-heart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-heart-fill')<x-ri-heart-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-heart-2-line')<x-ri-heart-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-heart-3-line')<x-ri-heart-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-lightning-line')<x-ri-lightning-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-thunderstorms-line')<x-ri-thunderstorms-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-flashlight-line')<x-ri-flashlight-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-box-3-line')<x-ri-box-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-archive-line')<x-ri-archive-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-inbox-line')<x-ri-inbox-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-inbox-2-line')<x-ri-inbox-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-folder-line')<x-ri-folder-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-folder-2-line')<x-ri-folder-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-folder-shield-line')<x-ri-folder-shield-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-folder-lock-line')<x-ri-folder-lock-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-settings-line')<x-ri-settings-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-settings-2-line')<x-ri-settings-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-settings-3-line')<x-ri-settings-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-equalizer-line')<x-ri-equalizer-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-dashboard-line')<x-ri-dashboard-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-pie-chart-line')<x-ri-pie-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-bar-chart-line')<x-ri-bar-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-line-chart-line')<x-ri-line-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-money-dollar-circle-line')<x-ri-money-dollar-circle-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-money-euro-circle-line')<x-ri-money-euro-circle-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-bank-line')<x-ri-bank-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-safe-line')<x-ri-safe-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-user-line')<x-ri-user-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-user-3-line')<x-ri-user-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-team-line')<x-ri-team-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-group-line')<x-ri-group-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-mail-line')<x-ri-mail-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-mail-open-line')<x-ri-mail-open-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-chat-1-line')<x-ri-chat-1-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-message-2-line')<x-ri-message-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-camera-line')<x-ri-camera-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-camera-2-line')<x-ri-camera-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-vidicon-line')<x-ri-vidicon-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-film-line')<x-ri-film-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-music-line')<x-ri-music-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-music-2-line')<x-ri-music-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-headphone-line')<x-ri-headphone-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-speaker-line')<x-ri-speaker-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-book-line')<x-ri-book-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-book-2-line')<x-ri-book-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-book-open-line')<x-ri-book-open-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-file-text-line')<x-ri-file-text-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-sun-line')<x-ri-sun-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-moon-line')<x-ri-moon-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-contrast-2-line')<x-ri-contrast-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('ri-palette-line')<x-ri-palette-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @default<x-ri-server-line class="size-5 text-base/60 transition-transform group-hover:scale-110" />
+                            @endswitch
+                        @else
+                            <x-ri-server-line class="size-5 text-base/60 transition-transform group-hover:scale-110" />
+                        @endif
+                    </button>
+                    <span class="text-2xl font-bold">
+                        {{ $server->hostname }}
+                    </span>
+                </div>
 
                 
                     <div class="hidden lg:flex flex-row gap-2 ml-auto justify-end items-center">
@@ -897,6 +1037,282 @@
             </div>
         </div>
 
+        <!-- Server Icon Customization Modal -->
+        @if($view === 'overview')
+        <div x-data="{ 
+            open: @entangle('showIconModal'),
+            selectedIcon: @entangle('selectedIcon'),
+            selectedColor: @entangle('selectedIconColor'),
+            searchQuery: '',
+            icons: [
+                'ri-server-line', 'ri-computer-line', 'ri-mac-line', 'ri-macbook-line', 'ri-device-line',
+                'ri-hard-drive-2-line', 'ri-hard-drive-line', 'ri-hard-drive-3-line', 'ri-database-2-line', 'ri-database-line',
+                'ri-cloud-line', 'ri-cloud-fill', 'ri-cloudy-line', 'ri-cloudy-2-line',
+                'ri-terminal-box-line', 'ri-terminal-line', 'ri-code-box-line', 'ri-code-line', 'ri-code-s-slash-line',
+                'ri-cpu-line', 'ri-chip-line', 'ri-memory-stick-line', 'ri-ram-line', 'ri-ram-2-line',
+                'ri-global-line', 'ri-earth-line', 'ri-planet-line',
+                'ri-router-line', 'ri-wifi-line', 'ri-signal-tower-line', 'ri-base-station-line',
+                'ri-shield-line', 'ri-shield-check-line', 'ri-shield-star-line', 'ri-lock-line', 'ri-lock-2-line',
+                'ri-rocket-line', 'ri-rocket-2-line', 'ri-spaceship-line', 'ri-plane-line',
+                'ri-game-line', 'ri-gamepad-line', 'ri-steam-line', 'ri-playstation-line', 'ri-xbox-line',
+                'ri-windows-line', 'ri-ubuntu-line', 'ri-centos-line', 'ri-linux-line', 'ri-apple-line',
+                'ri-bug-line', 'ri-bug-2-line', 'ri-robot-line', 'ri-robot-2-line',
+                'ri-home-line', 'ri-home-2-line', 'ri-building-line', 'ri-building-2-line', 'ri-store-line',
+                'ri-flask-line', 'ri-test-tube-line', 'ri-microscope-line',
+                'ri-fire-line', 'ri-fire-fill', 'ri-blaze-line', 'ri-sparkling-line',
+                'ri-star-line', 'ri-star-fill', 'ri-vip-crown-line', 'ri-vip-diamond-line',
+                'ri-heart-line', 'ri-heart-fill', 'ri-heart-2-line', 'ri-heart-3-line',
+                'ri-lightning-line', 'ri-thunderstorms-line', 'ri-flashlight-line',
+                'ri-box-3-line', 'ri-archive-line', 'ri-inbox-line', 'ri-inbox-2-line',
+                'ri-folder-line', 'ri-folder-2-line', 'ri-folder-shield-line', 'ri-folder-lock-line',
+                'ri-settings-line', 'ri-settings-2-line', 'ri-settings-3-line', 'ri-equalizer-line',
+                'ri-dashboard-line', 'ri-pie-chart-line', 'ri-bar-chart-line', 'ri-line-chart-line',
+                'ri-money-dollar-circle-line', 'ri-money-euro-circle-line', 'ri-bank-line', 'ri-safe-line',
+                'ri-user-line', 'ri-user-3-line', 'ri-team-line', 'ri-group-line',
+                'ri-mail-line', 'ri-mail-open-line', 'ri-chat-1-line', 'ri-message-2-line',
+                'ri-camera-line', 'ri-camera-2-line', 'ri-vidicon-line', 'ri-film-line',
+                'ri-music-line', 'ri-music-2-line', 'ri-headphone-line', 'ri-speaker-line',
+                'ri-book-line', 'ri-book-2-line', 'ri-book-open-line', 'ri-file-text-line',
+                'ri-sun-line', 'ri-moon-line', 'ri-contrast-2-line', 'ri-palette-line'
+            ],
+            colors: [
+                '', '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981',
+                '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7',
+                '#d946ef', '#ec4899', '#f43f5e', '#78716c', '#64748b'
+            ],
+            get filteredIcons() {
+                if (!this.searchQuery) return this.icons;
+                const query = this.searchQuery.toLowerCase();
+                return this.icons.filter(icon => icon.toLowerCase().includes(query));
+            }
+        }">
+            <!-- Modal Backdrop -->
+            <div x-cloak x-show="open" 
+                 x-transition:enter=\"transition ease-out duration-300\"
+                 x-transition:enter-start=\"opacity-0\"
+                 x-transition:enter-end=\"opacity-100\"
+                 x-transition:leave=\"transition ease-in duration-200\"
+                 x-transition:leave-start=\"opacity-100\"
+                 x-transition:leave-end=\"opacity-0\"
+                 @click=\"$wire.closeIconModal()\"
+                 @keydown.escape.window=\"$wire.closeIconModal()\"
+                 class=\"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm\"
+                 style=\"display: none;\">
+            </div>
+            <!-- Modal Content -->
+            <div x-cloak x-show="open"
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0 scale-95"
+                 x-transition:enter-end="opacity-100 scale-100"
+                 x-transition:leave="transition ease-in duration-200"
+                 x-transition:leave-start="opacity-100 scale-100"
+                 x-transition:leave-end="opacity-0 scale-95"
+                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                 style="display: none;">
+                <div class="bg-background-secondary border border-neutral rounded-2xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col" @click.away="$wire.closeIconModal()">
+                    <!-- Header -->
+                    <div class="p-6 border-b border-neutral">
+                        <div class="flex items-center justify-between mb-4">
+                            <h3 class="text-lg font-semibold">Customize Server Icon</h3>
+                            <button @click="$wire.closeIconModal()" class="text-base/50 hover:text-base transition-colors">
+                                <x-ri-close-line class="size-5" />
+                            </button>
+                        </div>
+                        <!-- Search -->
+                        <input type="text" 
+                               x-model="searchQuery" 
+                               placeholder="Search icons..." 
+                               class="w-full px-4 py-2 bg-background border border-neutral rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
+                    </div>
+                    
+                    <!-- Preview -->
+                    <div class="px-6 py-4 border-b border-neutral bg-background/50">
+                        <div class="flex items-center gap-4">
+                            <div class="size-16 rounded-xl bg-background-secondary border-2 border-neutral flex items-center justify-center"
+                                 :style="selectedColor ? 'border-color: ' + selectedColor : ''">
+                                <template x-if="selectedIcon">
+                                    <span x-html="document.querySelector('[data-icon-preview=\'' + selectedIcon + '\']')?.innerHTML || ''"
+                                          class="size-8"
+                                          :style="selectedColor ? 'color: ' + selectedColor : ''"></span>
+                                </template>
+                                <template x-if="!selectedIcon">
+                                    <x-ri-server-line class="size-8 text-base/40" />
+                                </template>
+                            </div>
+                            <div>
+                                <p class="font-medium">Preview</p>
+                                <p class="text-sm text-base/60" x-text="selectedIcon || 'No icon selected'"></p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Color Picker -->
+                    <div class="px-6 py-4 border-b border-neutral">
+                        <p class="text-sm font-medium mb-3">Color</p>
+                        <div class="flex flex-wrap gap-2">
+                            <template x-for="color in colors" :key="color || 'default'">
+                                <button @click="selectedColor = color"
+                                        class="size-8 rounded-full border-2 transition-all duration-150 hover:scale-110"
+                                        :class="selectedColor === color ? 'ring-2 ring-offset-2 ring-primary' : ''"
+                                        :style="color ? 'background-color: ' + color + '; border-color: ' + color : 'background: linear-gradient(135deg, #666 50%, #999 50%); border-color: #888'"
+                                        :title="color || 'Default'">
+                                </button>
+                            </template>
+                        </div>
+                    </div>
+
+                    <!-- Icons Grid -->
+                    <div class="flex-1 overflow-y-auto p-6">
+                        <div class="grid grid-cols-8 sm:grid-cols-10 gap-2">
+                            <template x-for="icon in filteredIcons" :key="icon">
+                                <button @click="selectedIcon = icon"
+                                        class="aspect-square rounded-lg border flex items-center justify-center transition-all duration-150 hover:bg-background hover:border-primary/50"
+                                        :class="selectedIcon === icon ? 'bg-primary/10 border-primary ring-2 ring-primary/30' : 'border-neutral'">
+                                    <template x-if="icon === 'ri-server-line'"><x-ri-server-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-computer-line'"><x-ri-computer-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-mac-line'"><x-ri-mac-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-macbook-line'"><x-ri-macbook-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-device-line'"><x-ri-device-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-hard-drive-2-line'"><x-ri-hard-drive-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-hard-drive-line'"><x-ri-hard-drive-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-hard-drive-3-line'"><x-ri-hard-drive-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-database-2-line'"><x-ri-database-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-database-line'"><x-ri-database-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-cloud-line'"><x-ri-cloud-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-cloud-fill'"><x-ri-cloud-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-cloudy-line'"><x-ri-cloudy-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-cloudy-2-line'"><x-ri-cloudy-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-terminal-box-line'"><x-ri-terminal-box-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-terminal-line'"><x-ri-terminal-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-code-box-line'"><x-ri-code-box-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-code-line'"><x-ri-code-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-code-s-slash-line'"><x-ri-code-s-slash-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-cpu-line'"><x-ri-cpu-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-chip-line'"><x-ri-chip-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-memory-stick-line'"><x-ri-memory-stick-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-ram-line'"><x-ri-ram-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-ram-2-line'"><x-ri-ram-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-global-line'"><x-ri-global-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-earth-line'"><x-ri-earth-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-planet-line'"><x-ri-planet-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-router-line'"><x-ri-router-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-wifi-line'"><x-ri-wifi-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-signal-tower-line'"><x-ri-signal-tower-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-base-station-line'"><x-ri-base-station-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-shield-line'"><x-ri-shield-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-shield-check-line'"><x-ri-shield-check-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-shield-star-line'"><x-ri-shield-star-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-lock-line'"><x-ri-lock-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-lock-2-line'"><x-ri-lock-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-rocket-line'"><x-ri-rocket-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-rocket-2-line'"><x-ri-rocket-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-spaceship-line'"><x-ri-spaceship-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-plane-line'"><x-ri-plane-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-game-line'"><x-ri-game-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-gamepad-line'"><x-ri-gamepad-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-steam-line'"><x-ri-steam-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-playstation-line'"><x-ri-playstation-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-xbox-line'"><x-ri-xbox-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-windows-line'"><x-ri-windows-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-ubuntu-line'"><x-ri-ubuntu-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-centos-line'"><x-ri-centos-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-linux-line'"><x-ri-linux-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-apple-line'"><x-ri-apple-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-bug-line'"><x-ri-bug-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-bug-2-line'"><x-ri-bug-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-robot-line'"><x-ri-robot-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-robot-2-line'"><x-ri-robot-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-home-line'"><x-ri-home-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-home-2-line'"><x-ri-home-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-building-line'"><x-ri-building-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-building-2-line'"><x-ri-building-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-store-line'"><x-ri-store-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-flask-line'"><x-ri-flask-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-test-tube-line'"><x-ri-test-tube-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-microscope-line'"><x-ri-microscope-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-fire-line'"><x-ri-fire-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-fire-fill'"><x-ri-fire-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-blaze-line'"><x-ri-blaze-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-sparkling-line'"><x-ri-sparkling-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-star-line'"><x-ri-star-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-star-fill'"><x-ri-star-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-vip-crown-line'"><x-ri-vip-crown-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-vip-diamond-line'"><x-ri-vip-diamond-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-heart-line'"><x-ri-heart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-heart-fill'"><x-ri-heart-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-heart-2-line'"><x-ri-heart-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-heart-3-line'"><x-ri-heart-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-lightning-line'"><x-ri-lightning-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-thunderstorms-line'"><x-ri-thunderstorms-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-flashlight-line'"><x-ri-flashlight-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-box-3-line'"><x-ri-box-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-archive-line'"><x-ri-archive-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-inbox-line'"><x-ri-inbox-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-inbox-2-line'"><x-ri-inbox-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-folder-line'"><x-ri-folder-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-folder-2-line'"><x-ri-folder-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-folder-shield-line'"><x-ri-folder-shield-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-folder-lock-line'"><x-ri-folder-lock-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-settings-line'"><x-ri-settings-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-settings-2-line'"><x-ri-settings-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-settings-3-line'"><x-ri-settings-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-equalizer-line'"><x-ri-equalizer-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-dashboard-line'"><x-ri-dashboard-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-pie-chart-line'"><x-ri-pie-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-bar-chart-line'"><x-ri-bar-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-line-chart-line'"><x-ri-line-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-money-dollar-circle-line'"><x-ri-money-dollar-circle-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-money-euro-circle-line'"><x-ri-money-euro-circle-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-bank-line'"><x-ri-bank-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-safe-line'"><x-ri-safe-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-user-line'"><x-ri-user-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-user-3-line'"><x-ri-user-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-team-line'"><x-ri-team-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-group-line'"><x-ri-group-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-mail-line'"><x-ri-mail-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-mail-open-line'"><x-ri-mail-open-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-chat-1-line'"><x-ri-chat-1-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-message-2-line'"><x-ri-message-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-camera-line'"><x-ri-camera-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-camera-2-line'"><x-ri-camera-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-vidicon-line'"><x-ri-vidicon-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-film-line'"><x-ri-film-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-music-line'"><x-ri-music-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-music-2-line'"><x-ri-music-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-headphone-line'"><x-ri-headphone-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-speaker-line'"><x-ri-speaker-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-book-line'"><x-ri-book-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-book-2-line'"><x-ri-book-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-book-open-line'"><x-ri-book-open-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-file-text-line'"><x-ri-file-text-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-sun-line'"><x-ri-sun-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-moon-line'"><x-ri-moon-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-contrast-2-line'"><x-ri-contrast-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'ri-palette-line'"><x-ri-palette-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                </button>
+                            </template>
+                        </div>
+                        <p x-show="filteredIcons.length === 0" class="text-center text-base/50 py-8">No icons match your search</p>
+                    </div>
+
+                    <!-- Footer -->
+                    <div class="p-6 border-t border-neutral flex items-center justify-between gap-4">
+                        <button @click="$wire.resetIcon()" 
+                                class="px-4 py-2 text-sm text-base/70 hover:text-danger transition-colors">
+                            Reset to Default
+                        </button>
+                        <div class="flex gap-3">
+                            <x-button.secondary @click="$wire.closeIconModal()">Cancel</x-button.secondary>
+                            <x-button.primary @click="$wire.saveIcon(selectedIcon, selectedColor)">
+                                Save Icon
+                            </x-button.primary>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        @endif
+
     @else
         @php 
             $statuses = [