Enhance Proxmox views with improved loading states and UI updates

- Updated serverplaceholder.blade.php to enhance loading skeletons for server details.
- Added navigation breadcrumbs to statistics, subdomain, and system views for better user experience.
- Improved loading indicators for CPU, network, memory, and disk charts in statistics.blade.php.
- Refined storage.blade.php layout with section dividers and improved drive display, including bus type indicators and quota usage.
- Enhanced VNC and Xterm popups with a new header design, loading animations, and reconnect functionality.
- Added error handling for VNC and Xterm connections to inform users when unable to connect.

extensions/Servers/Proxmox/views/xterm-popup.blade.php

@@ -15,17 +15,134 @@
             width: 100%;
             height: 100%;
             overflow: hidden;
-            background: #000;
+            background: #0a0a0a;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            color: #e5e5e5;
+        }
+        .console-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 36px;
+            padding: 0 12px;
+            background: #1a1a2e;
+            border-bottom: 1px solid #2a2a3e;
+            user-select: none;
+            -webkit-app-region: drag;
+        }
+        .console-header-left {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 12px;
+            color: #a0a0b0;
+        }
+        .console-header-left .dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #6366f1;
+            box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
+        }
+        .console-header-left strong {
+            color: #e5e5e5;
+            font-weight: 600;
+        }
+        .console-header-right {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            -webkit-app-region: no-drag;
+        }
+        .console-btn {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            padding: 4px 10px;
+            border: 1px solid #3a3a4e;
+            border-radius: 4px;
+            background: transparent;
+            color: #c0c0d0;
+            font-size: 11px;
+            cursor: pointer;
+            transition: all 0.15s ease;
+        }
+        .console-btn:hover {
+            background: #2a2a3e;
+            border-color: #4a4a5e;
+            color: #ffffff;
+        }
+        .console-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+        .console-btn.close-btn:hover {
+            background: #7f1d1d;
+            border-color: #991b1b;
         }
         iframe {
             width: 100%;
-            height: 100%;
+            height: calc(100% - 36px);
             border: none;
             display: block;
         }
+        .console-loading {
+            position: absolute;
+            top: 36px;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: #0a0a0a;
+            z-index: 10;
+            transition: opacity 0.3s ease;
+        }
+        .console-loading.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        .console-spinner {
+            width: 32px;
+            height: 32px;
+            border: 3px solid #2a2a3e;
+            border-top-color: #6366f1;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+        .console-loading-text {
+            margin-top: 12px;
+            font-size: 13px;
+            color: #707080;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body>
-    <iframe src="{{ $xterm }}" allowfullscreen></iframe>
+    <div class="console-header">
+        <div class="console-header-left">
+            <span class="dot"></span>
+            <span>Xterm.js &mdash; <strong>{{ $server->hostname }}</strong></span>
+        </div>
+        <div class="console-header-right">
+            <button class="console-btn" onclick="document.getElementById('xterm-frame').src = document.getElementById('xterm-frame').src" title="Reconnect">
+                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 9a9 9 0 0115.3-5.3M20 15a9 9 0 01-15.3 5.3"/></svg>
+                Reconnect
+            </button>
+            <button class="console-btn close-btn" onclick="window.close()" title="Close">
+                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                Close
+            </button>
+        </div>
+    </div>
+    <div class="console-loading" id="xterm-loading">
+        <div class="console-spinner"></div>
+        <div class="console-loading-text">Connecting to console&hellip;</div>
+    </div>
+    <iframe id="xterm-frame" src="{{ $xterm }}" allowfullscreen onload="document.getElementById('xterm-loading').classList.add('hidden')"></iframe>
 </body>
 </html>