From a7daa270977e4e7a4c011f4bd2cbfcc31040301a Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 6 Dec 2025 10:53:51 -0500
Subject: [PATCH] feat: update server icon customization modal with dynamic SVG
 rendering and improved icon filtering

---
 .../Proxmox/views/components/layout.blade.php | 56 +++++++++----------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 772ed6425..ecc059724 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -44,7 +44,7 @@
                     initialColor: {{ $server->user_set_icon_color ? "'" . $server->user_set_icon_color . "'" : 'null' }}
                 })">
                     <button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
-                        <i x-show="icon" :class="'ri-' + icon" class="text-2xl" :style="color ? 'color: ' + color : ''"></i>
+                        <div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon)" class="size-6"></div>
                         <x-ri-server-line x-show="!icon" class="size-6 text-secondary" />
                         <span class="text-2xl font-bold">
                             {{ $server->hostname }}
@@ -63,7 +63,7 @@
                                     <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 dark:bg-background dark:border-base/20" />
+                                <input x-model="search" x-on:input="filterIcons()" 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">
                                 @php
@@ -120,45 +120,41 @@
                             color: initialColor || '',
                             search: '',
                             message: '',
-                            icons: [
-                                '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'
-                            ],
                             colors: [
                                 '', '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981',
                                 '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7',
                                 '#d946ef', '#ec4899', '#f43f5e', '#78716c', '#64748b'
                             ],
-                            get filteredIcons() {
-                                if (!this.search) return this.icons;
-                                const q = this.search.toLowerCase();
-                                return this.icons.filter(i => i.toLowerCase().includes(q));
+                            openModal() { 
+                                this.show = true; 
+                                this.message = '';
+                                this.$nextTick(() => this.filterIcons());
                             },
-                            openModal() { this.show = true; this.message = ''; },
                             closeModal() { this.show = false; },
                             resetIcon() {
                                 this.icon = '';
                                 this.color = '';
                             },
+                            filterIcons() {
+                                const query = this.search.toLowerCase();
+                                document.querySelectorAll('.icon-btn').forEach(btn => {
+                                    const iconName = btn.dataset.icon;
+                                    btn.style.display = !query || iconName.includes(query) ? 'flex' : 'none';
+                                });
+                            },
+                            getIconSvg(iconName) {
+                                const btn = document.querySelector(`.icon-btn[data-icon="${iconName}"]`);
+                                if (btn) {
+                                    const svg = btn.querySelector('svg');
+                                    if (svg) {
+                                        const cloned = svg.cloneNode(true);
+                                        cloned.classList.remove('size-5');
+                                        cloned.classList.add('size-8');
+                                        return cloned.outerHTML;
+                                    }
+                                }
+                                return '';
+                            },
                             saveIcon() {
                                 fetch(`/proxmox/server/${serverId}/icon`, {
                                     method: 'POST',