From b5a22f2c2f0f13392c6f67d3ce5915ca58cf5543 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 6 Dec 2025 16:27:29 -0500
Subject: [PATCH] Add server icon customization modal and enhance edit
 indicator styling

---
 .../Servers/Proxmox/views/components/layout.blade.php      | 5 +++++
 themes/lucentui/views/services/show.blade.php              | 7 ++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index c9cf20263..6bf14b160 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -43,6 +43,11 @@
                     initialIcon: {{ $server->user_set_icon ? "'" . $server->user_set_icon . "'" : 'null' }},
                     initialColor: {{ $server->user_set_icon_color ? "'" . $server->user_set_icon_color . "'" : 'null' }},
                     initialPrefix: {{ $server->user_set_icon_prefix ? "'" . $server->user_set_icon_prefix . "'" : "'ri'" }}
+                })"
+                x-init="window.addEventListener('open-server-icon-modal', (event) => {
+                    if (event.detail && String(event.detail.serverId) === String(serverId)) {
+                        openModal();
+                    }
                 })">
                     <button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
                         <div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)" class="size-6"></div>
diff --git a/themes/lucentui/views/services/show.blade.php b/themes/lucentui/views/services/show.blade.php
index 0e54f8dce..aeab2b435 100644
--- a/themes/lucentui/views/services/show.blade.php
+++ b/themes/lucentui/views/services/show.blade.php
@@ -29,8 +29,9 @@
                         @php
                             $hasCustomIcon = optional($service->product->server)->extension === 'Proxmox' && isset($proxmoxServer) && $proxmoxServer && $proxmoxServer->user_set_icon;
                             $iconColor = $hasCustomIcon ? $proxmoxServer->user_set_icon_color : null;
-                        @endphp
-                        <div class="relative flex items-center mr-6">
+                            @endphp
+                            <div class="relative flex items-center mr-6 cursor-pointer group"
+                                onclick="window.dispatchEvent(new CustomEvent('open-server-icon-modal', { detail: { serverId: '{{ optional($proxmoxServer)->id }}' } }))">
                             @if($hasCustomIcon)
                                 @php
                                     $iconPrefix = $proxmoxServer->user_set_icon_prefix ?? 'ri';
@@ -46,7 +47,7 @@
                                 <x-ri-box-3-fill class="w-14 h-14 text-primary" />
                             @endif
                             <!-- Small edit indicator in upper-right of the icon -->
-                            <div class="absolute -top-1 -right-1 flex items-center justify-center w-5 h-5 rounded-full bg-white shadow-md border border-primary/30">
+                            <div class="absolute -top-1 -right-1 flex items-center justify-center w-5 h-5 rounded-full bg-white shadow-md border border-primary/30 group-hover:scale-105 transition-transform">
                                 <x-ri-pencil-line class="w-3.5 h-3.5 text-primary" />
                             </div>
                         </div>