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/input.blade.php

@@ -0,0 +1,116 @@
+@props([
+    'label' => null,
+    'id' => null,
+    'name' => null,
+    'type' => 'text',
+    'placeholder' => null,
+    'hint' => null,
+    'error' => null,
+    'required' => false,
+    'disabled' => false,
+    'readonly' => false,
+    'prefix' => null,
+    'suffix' => null,
+    'icon' => null,
+    'iconPosition' => 'left',
+    'size' => 'md',
+])
+
+@php
+    $inputId = $id ?? $name ?? Str::random(8);
+    
+    // Size classes
+    $sizeClasses = match($size) {
+        'sm' => 'px-3 py-1.5 text-sm',
+        'md' => 'px-4 py-2 text-sm',
+        'lg' => 'px-4 py-2.5 text-base',
+        default => 'px-4 py-2 text-sm',
+    };
+    
+    $iconSizeClasses = match($size) {
+        'sm' => 'size-4',
+        'md' => 'size-4',
+        'lg' => 'size-5',
+        default => 'size-4',
+    };
+    
+    // Input base classes
+    $baseClasses = 'w-full bg-background border rounded-lg transition-all duration-200 outline-none';
+    $focusClasses = 'focus:ring-2 focus:ring-primary/20 focus:border-primary';
+    $disabledClasses = $disabled ? 'opacity-50 cursor-not-allowed bg-neutral/5' : '';
+    $errorClasses = $error ? 'border-danger focus:ring-danger/20 focus:border-danger' : 'border-neutral/30';
+    
+    // Padding adjustments for icons/affixes
+    $paddingLeft = ($icon && $iconPosition === 'left') || $prefix ? 'pl-10' : '';
+    $paddingRight = ($icon && $iconPosition === 'right') || $suffix ? 'pr-10' : '';
+    
+    $inputClasses = "$baseClasses $sizeClasses $focusClasses $disabledClasses $errorClasses $paddingLeft $paddingRight";
+@endphp
+
+<div {{ $attributes->only('class')->merge(['class' => 'flex flex-col gap-1.5']) }}>
+    {{-- Label --}}
+    @if($label)
+        <label for="{{ $inputId }}" class="text-sm font-medium text-base/80">
+            {{ $label }}
+            @if($required)
+                <span class="text-danger">*</span>
+            @endif
+        </label>
+    @endif
+    
+    {{-- Input wrapper --}}
+    <div class="relative">
+        {{-- Left icon --}}
+        @if($icon && $iconPosition === 'left')
+            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-base/50 pointer-events-none">
+                <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
+            </div>
+        @endif
+        
+        {{-- Prefix --}}
+        @if($prefix)
+            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-base/50 text-sm pointer-events-none">
+                {{ $prefix }}
+            </div>
+        @endif
+        
+        {{-- Input --}}
+        <input 
+            type="{{ $type }}"
+            id="{{ $inputId }}"
+            @if($name) name="{{ $name }}" @endif
+            @if($placeholder) placeholder="{{ $placeholder }}" @endif
+            @if($required) required @endif
+            @if($disabled) disabled @endif
+            @if($readonly) readonly @endif
+            {{ $attributes->except('class')->merge(['class' => $inputClasses]) }}
+        >
+        
+        {{-- Right icon --}}
+        @if($icon && $iconPosition === 'right')
+            <div class="absolute right-3 top-1/2 -translate-y-1/2 text-base/50 pointer-events-none">
+                <x-dynamic-component :component="$icon" class="{{ $iconSizeClasses }}" />
+            </div>
+        @endif
+        
+        {{-- Suffix --}}
+        @if($suffix)
+            <div class="absolute right-3 top-1/2 -translate-y-1/2 text-base/50 text-sm pointer-events-none">
+                {{ $suffix }}
+            </div>
+        @endif
+    </div>
+    
+    {{-- Hint text --}}
+    @if($hint && !$error)
+        <p class="text-xs text-base/60">{{ $hint }}</p>
+    @endif
+    
+    {{-- Error message --}}
+    @if($error)
+        <p class="text-xs text-danger flex items-center gap-1">
+            <x-ri-error-warning-line class="size-3.5" />
+            {{ $error }}
+        </p>
+    @endif
+</div>