From 8433a4804f68f92d52825318aabf6556f79325bc Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 6 Dec 2025 10:52:58 -0500
Subject: [PATCH] feat: enhance server icon customization modal with dynamic
 icon list and improved styling

---
 .../Proxmox/views/components/layout.blade.php | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 9f99d123d..772ed6425 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -59,18 +59,43 @@
                             </button>
                             <h3 class="text-lg font-semibold mb-4">Customize Server Icon</h3>
                             <div class="flex items-center gap-4 mb-4">
-                                <div class="size-12 rounded-xl border flex items-center justify-center text-3xl" :style="color ? 'color: ' + color + '; border-color: ' + color : ''">
-                                    <i x-show="icon" :class="'ri-' + icon"></i>
+                                <div class="size-12 rounded-xl border flex items-center justify-center" :style="color ? 'border-color: ' + color : ''">
+                                    <div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon)"></div>
                                     <x-ri-server-line x-show="!icon" class="size-8 text-base/40" />
                                 </div>
-                                <input x-model="search" type="text" placeholder="Search icons..." class="border rounded px-2 py-1 text-sm w-40" />
+                                <input x-model="search" type="text" placeholder="Search icons..." class="border rounded px-2 py-1 text-sm w-40 dark:bg-background dark:border-base/20" />
                             </div>
                             <div class="grid grid-cols-6 gap-2 mb-4 max-h-32 overflow-y-auto">
-                                <template x-for="i in filteredIcons" :key="i">
-                                    <button @click="icon = i" :class="icon === i ? 'ring-2 ring-primary' : ''" class="rounded p-1 border flex items-center justify-center hover:bg-secondary/10 text-xl">
-                                        <i :class="'ri-' + i"></i>
-                                    </button>
-                                </template>
+                                @php
+                                $iconList = [
+                                    'server-line', 'database-2-line', 'computer-line', 'cpu-line', 'hard-drive-2-line',
+                                    'cloud-line', 'terminal-box-line', 'code-s-slash-line', 'braces-line',
+                                    'global-line', 'earth-line', 'wifi-line', 'signal-tower-line',
+                                    'shield-check-line', 'shield-keyhole-line', 'lock-line', 'lock-unlock-line', 'key-2-line',
+                                    'rocket-line', 'rocket-2-line', 'send-plane-line', 'flashlight-line', 'fire-line',
+                                    'sparkling-line', 'star-line', 'heart-line', 'home-line', 'home-2-line',
+                                    'building-line', 'building-2-line', 'store-line', 'box-3-line', 'archive-line',
+                                    'inbox-line', 'inbox-2-line', 'folder-line', 'folder-open-line',
+                                    'settings-3-line', 'settings-4-line', 'tools-line', 'hammer-line',
+                                    'flask-line', 'bug-line', 'puzzle-line', 'bar-chart-box-line', 'pie-chart-line',
+                                    'line-chart-line', 'money-dollar-circle-line', 'money-euro-circle-line',
+                                    'bank-card-line', 'wallet-line', 'user-line', 'user-3-line', 'group-line', 'team-line',
+                                    'mail-line', 'mail-open-line', 'chat-3-line', 'discuss-line',
+                                    'camera-line', 'vidicon-line', 'film-line', 'music-line',
+                                    'book-open-line', 'file-text-line', 'sun-line', 'moon-line',
+                                    'palette-line', 'brush-line', 'trophy-line', 'graduation-cap-line',
+                                    'lightbulb-line', 'fingerprint-line', 'eye-line', 'map-2-line', 'map-pin-line',
+                                    'time-line', 'calendar-line', 'gift-line', 'cake-2-line',
+                                    'gamepad-line', 'ghost-line', 'aliens-line', 'space-ship-line',
+                                    'android-line', 'apple-line', 'windows-line', 'ubuntu-line',
+                                    'github-line', 'gitlab-line', 'discord-line', 'slack-line'
+                                ];
+                                @endphp
+                                @foreach($iconList as $iconName)
+                                <button @click="icon = '{{ $iconName }}'" :class="icon === '{{ $iconName }}' ? 'ring-2 ring-primary' : ''" class="icon-btn rounded p-1 border flex items-center justify-center hover:bg-secondary/10 dark:border-base/20" data-icon="{{ $iconName }}">
+                                    <x-dynamic-component :component="'ri-' . $iconName" class="size-5" />
+                                </button>
+                                @endforeach
                             </div>
                             <div class="flex flex-wrap gap-2 mb-4">
                                 <template x-for="c in colors" :key="c">