From 3d31451fdceedae5c9bdb78b81583bee95ef8528 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 6 Dec 2025 16:33:54 -0500
Subject: [PATCH] Enhance server icon customization button with improved layout
 and edit indicator

---
 .../Proxmox/views/components/layout.blade.php      | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index c9cf20263..9484c3872 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -38,15 +38,21 @@
             @endphp
             
             <div class="flex flex-col gap-4 pb-6 pt-6 lg:flex-row lg:items-center lg:justify-between">
-                <div class="flex items-center gap-3" x-data="serverIconModal({
+                <div class="flex items-center gap-5" x-data="serverIconModal({
                     serverId: '{{ $server->id }}',
                     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'" }}
                 })">
-                    <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>
-                        <x-ri-server-line x-show="!icon" class="size-6 text-secondary" />
+                    <button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="group flex items-center gap-5 hover:opacity-80 transition-opacity">
+                        <div class="relative">
+                            <div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)" class="size-10"></div>
+                            <x-ri-server-line x-show="!icon" class="size-10 text-secondary" />
+                            <!-- Edit indicator badge -->
+                            <div class="absolute -top-1 -right-1 size-4 bg-primary/90 rounded-full flex items-center justify-center shadow-sm opacity-60 group-hover:opacity-100 transition-opacity">
+                                <x-ri-pencil-fill class="size-2.5 text-white" />
+                            </div>
+                        </div>
                         <span class="text-2xl font-bold">
                             {{ $server->hostname }}
                         </span>