Refactor Proxmox server views for improved UI consistency and usability

- Updated server card component to use new UI elements and improved layout.
- Enhanced status display with badges and better status indicators.
- Refined quick info row for server details with consistent styling.
- Reorganized server configuration statistics into stat cards for clarity.
- Improved help modals for statistics and storage management sections.
- Streamlined alerts and warnings for better user experience.
- Updated storage management view to utilize new UI components and improve readability.

extensions/Servers/Proxmox/views/components/ui/alert.blade.php

@@ -0,0 +1,120 @@
+{{--
+    Alert Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.alert>Default alert</x-proxmox::ui.alert>
+    <x-proxmox::ui.alert variant="success" title="Success">Operation completed</x-proxmox::ui.alert>
+    <x-proxmox::ui.alert variant="warning" dismissible>Warning message</x-proxmox::ui.alert>
+--}}
+
+@props([
+    'variant' => 'info',
+    'title' => null,
+    'icon' => null,
+    'dismissible' => false,
+    'collapsible' => false,
+    'collapsed' => false,
+])
+
+@php
+    $variantConfig = [
+        'info' => [
+            'bg' => 'bg-gradient-to-r from-info/10 via-info/5 to-transparent',
+            'border' => 'border-info/20',
+            'text' => 'text-info',
+            'icon' => $icon ?? 'ri-information-line',
+        ],
+        'success' => [
+            'bg' => 'bg-gradient-to-r from-success/10 via-success/5 to-transparent',
+            'border' => 'border-success/20',
+            'text' => 'text-success',
+            'icon' => $icon ?? 'ri-checkbox-circle-line',
+        ],
+        'warning' => [
+            'bg' => 'bg-gradient-to-r from-warning/10 via-warning/5 to-transparent',
+            'border' => 'border-warning/20',
+            'text' => 'text-warning',
+            'icon' => $icon ?? 'ri-error-warning-line',
+        ],
+        'danger' => [
+            'bg' => 'bg-gradient-to-r from-danger/10 via-danger/5 to-transparent',
+            'border' => 'border-danger/20',
+            'text' => 'text-danger',
+            'icon' => $icon ?? 'ri-error-warning-fill',
+        ],
+        'default' => [
+            'bg' => 'bg-gradient-to-r from-neutral/10 via-neutral/5 to-transparent',
+            'border' => 'border-neutral/20',
+            'text' => 'text-base/70',
+            'icon' => $icon ?? 'ri-information-line',
+        ],
+    ];
+    
+    $config = $variantConfig[$variant] ?? $variantConfig['default'];
+@endphp
+
+<div 
+    {{ $attributes->class([
+        'rounded-xl p-4 border',
+        $config['bg'],
+        $config['border'],
+    ]) }}
+    @if($dismissible || $collapsible)
+        x-data="{ 
+            show: true,
+            @if($collapsible) collapsed: {{ $collapsed ? 'true' : 'false' }} @endif
+        }"
+        x-show="show"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0 scale-95"
+        x-transition:enter-end="opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-200"
+        x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-95"
+    @endif
+>
+    <div class="flex items-start gap-3">
+        <x-dynamic-component :component="$config['icon']" class="size-5 {{ $config['text'] }} flex-shrink-0 mt-0.5" />
+        <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between gap-2">
+                @if($title)
+                    <h4 class="text-sm font-semibold text-base">{{ $title }}</h4>
+                @endif
+                <div class="flex items-center gap-1 ml-auto">
+                    @if($collapsible)
+                        <button 
+                            type="button" 
+                            @click="collapsed = !collapsed"
+                            class="p-1.5 rounded-lg hover:bg-black/10 transition-all duration-200 {{ $config['text'] }}"
+                        >
+                            <x-ri-arrow-down-s-line 
+                                class="size-4 transition-transform duration-300 ease-out"
+                                x-bind:class="collapsed ? 'rotate-180' : ''" 
+                            />
+                        </button>
+                    @endif
+                    @if($dismissible)
+                        <button 
+                            type="button" 
+                            @click="show = false"
+                            class="p-1.5 rounded-lg hover:bg-black/10 hover:rotate-90 transition-all duration-200 {{ $config['text'] }}"
+                        >
+                            <x-ri-close-line class="size-4" />
+                        </button>
+                    @endif
+                </div>
+            </div>
+            <div 
+                class="text-sm text-base/70 leading-relaxed @if($title) mt-1 @endif"
+                @if($collapsible)
+                    x-show="!collapsed"
+                    x-transition:enter="transition ease-out duration-200"
+                    x-transition:enter-start="opacity-0 -translate-y-2"
+                    x-transition:enter-end="opacity-100 translate-y-0"
+                @endif
+            >
+                {{ $slot }}
+            </div>
+        </div>
+    </div>
+</div>