Merge branch 'main' of https://gitea.virtnet.bond/Joseph.Rawlings/Virtnet.bond

extensions/Servers/Proxmox/views/components/layout.blade.php

@@ -70,7 +70,7 @@
                                     <div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)"></div>
                                     <x-ri-server-line x-show="!icon" class="size-8 text-base/40" />
                                 </div>
-                                <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" />
+                                <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 p-1">
                                 @php
@@ -600,7 +600,7 @@
                                     ['icon' => 'chromecast', 'prefix' => 'coolicon'],
                                     ['icon' => 'download', 'prefix' => 'coolicon'],
                                     ['icon' => 'download-package', 'prefix' => 'coolicon'],
-                                    ['icon' => 'upload', 'prefix' => 'coolicon'],
+                                    ['icon' => 'cloud-upload', 'prefix' => 'coolicon'],
                                     ['icon' => 'link', 'prefix' => 'coolicon'],
                                     ['icon' => 'link-horizontal', 'prefix' => 'coolicon'],
                                     ['icon' => 'link-vertical', 'prefix' => 'coolicon'],
@@ -1135,7 +1135,7 @@
                                 ];
                                 @endphp
                                 @foreach($iconList as $iconData)
-                                <button @click="icon = '{{ $iconData['icon'] }}'; iconPrefix = '{{ $iconData['prefix'] }}'" :class="icon === '{{ $iconData['icon'] }}' && iconPrefix === '{{ $iconData['prefix'] }}' ? 'ring-2 ring-primary' : ''" class="icon-btn rounded p-2 border flex items-center justify-center hover:bg-secondary/10 dark:border-base/20" data-icon="{{ $iconData['icon'] }}" data-prefix="{{ $iconData['prefix'] }}">
+                                <button x-show="isIconVisible('{{ $iconData['prefix'] }}', '{{ $iconData['icon'] }}')" @click="icon = '{{ $iconData['icon'] }}'; iconPrefix = '{{ $iconData['prefix'] }}'" :class="icon === '{{ $iconData['icon'] }}' && iconPrefix === '{{ $iconData['prefix'] }}' ? 'ring-2 ring-primary' : ''" class="icon-btn rounded p-2 border flex items-center justify-center hover:bg-secondary/10 dark:border-base/20" data-icon="{{ $iconData['icon'] }}" data-prefix="{{ $iconData['prefix'] }}">
                                     @php
                                         if ($iconData['prefix'] === 'vaadin') {
                                             $componentName = 'vaadin-' . str_replace('_', '-', $iconData['icon']);
@@ -1176,10 +1176,10 @@
                                 '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7',
                                 '#d946ef', '#ec4899', '#f43f5e', '#78716c', '#64748b'
                             ],
-                            openModal() { 
-                                this.show = true; 
+                            openModal() {
+                                this.show = true;
                                 this.message = '';
-                                this.$nextTick(() => this.filterIcons());
+                                this.search = '';
                             },
                             closeModal() { this.show = false; },
                             resetIcon() {
@@ -1187,14 +1187,11 @@
                                 this.iconPrefix = 'ri';
                                 this.color = '';
                             },
-                            filterIcons() {
+                            isIconVisible(prefix, iconName) {
+                                if (!this.search) return true;
                                 const query = this.search.toLowerCase();
-                                document.querySelectorAll('.icon-btn').forEach(btn => {
-                                    const iconName = btn.dataset.icon;
-                                    const iconPrefix = btn.dataset.prefix;
-                                    const searchText = iconPrefix + '-' + iconName;
-                                    btn.style.display = !query || searchText.includes(query) ? 'flex' : 'none';
-                                });
+                                const searchText = (prefix + '-' + iconName).toLowerCase();
+                                return searchText.includes(query) || iconName.toLowerCase().includes(query);
                             },
                             getIconSvg(iconName, prefix) {
                                 const btn = document.querySelector(`.icon-btn[data-icon="${iconName}"][data-prefix="${prefix}"]`);