From dbf228b37c2c3dbd06c4fc403ec57a5a6d34d731 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 14:44:34 -0500
Subject: [PATCH] refactor: update server listing layout and styling to align
 with TailServer theme

---
 .../Servers/Proxmox/views/index.blade.php     | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/index.blade.php b/extensions/Servers/Proxmox/views/index.blade.php
index 78aae2d68..e6a99b8ff 100644
--- a/extensions/Servers/Proxmox/views/index.blade.php
+++ b/extensions/Servers/Proxmox/views/index.blade.php
@@ -1,26 +1,22 @@
-{{-- Server Listing - AdminLTE Theme --}}
+{{-- Server Listing - TailServer Theme --}}
 <div class="flex flex-col flex-1" style="min-height: calc(100vh - 30rem);">
     {{-- Page Header --}}
-    <div class="flex items-center gap-3 mb-4">
-        <div class="flex items-center gap-2">
-            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Servers</h2>
-        </div>
-    </div>
+    <x-proxmox::ui.section-header 
+        title="Servers" 
+        icon="ri-server-line"
+        subtitle="Manage your virtual private servers"
+    />
 
-    {{-- Server Cards --}}
-    <div class="flex flex-col gap-3 flex-1">
+    {{-- Server Cards Grid --}}
+    <div class="flex flex-col gap-4 flex-1 mt-4">
         @forelse($servers as $server)
             <livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
         @empty
-            <x-proxmox::ui.card>
-                <div class="flex flex-col items-center justify-center text-center py-8">
-                    <div class="lte-info-box-icon lte-bg-light rounded-full mb-3" style="width: 48px; height: 48px;">
-                        <x-ri-server-line class="size-6 lte-text-muted" />
-                    </div>
-                    <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-1">No Servers Found</h3>
-                    <p class="text-sm text-gray-500 dark:text-gray-400">You don't have any servers yet. Purchase a server to get started.</p>
-                </div>
-            </x-proxmox::ui.card>
+            <x-proxmox::ui.empty-state 
+                title="No Servers Found"
+                description="You don't have any servers yet. Purchase a server to get started."
+                icon="ri-server-line"
+            />
         @endforelse
     </div>
 </div>
\ No newline at end of file