From 604488be042611bf6e467f7228b61d53bf3d0eda Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 18 Dec 2025 08:31:37 -0500
Subject: [PATCH] fix: remove help modals from network, overview, statistics,
 and storage views for cleaner UI

---
 .../Servers/Proxmox/views/network.blade.php   | 12 ---
 .../Servers/Proxmox/views/overview.blade.php  | 12 ---
 .../Proxmox/views/statistics.blade.php        | 21 -----
 .../Servers/Proxmox/views/storage.blade.php   | 87 ++++++++++++++-----
 4 files changed, 63 insertions(+), 69 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/network.blade.php b/extensions/Servers/Proxmox/views/network.blade.php
index 38f423b3c..ba748019d 100644
--- a/extensions/Servers/Proxmox/views/network.blade.php
+++ b/extensions/Servers/Proxmox/views/network.blade.php
@@ -105,18 +105,6 @@
             title="Assigned Network Addresses" 
             icon="ri-global-line"
             class="mb-0">
-            <x-slot name="actions">
-                <x-proxmox::ui.help-modal icon="ri-question-line" title="Assigned Network Addresses">
-                    <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                        Displays all IP addresses (both IPv4 and IPv6) that have been assigned to this virtual machine. These addresses are configured through the QEMU API and are part of your service allocation.
-                    </p>
-                    <div class="pt-4 mt-4 border-t border-neutral/30">
-                        <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                            <span class="font-semibold text-base/90">Note:</span> These addresses are managed by the hosting provider and cannot be modified directly. Contact support if you need additional IP addresses or changes to your network configuration.
-                        </p>
-                    </div>
-                </x-proxmox::ui.help-modal>
-            </x-slot>
         </x-proxmox::ui.section-header>
     </div>
 
diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 31f1e4608..e0affe9e9 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -72,18 +72,6 @@
                 icon="ri-server-line"
                 subtitle="Real-time monitoring and configuration for your virtual machine."
                 class="mb-0">
-                <x-slot name="actions">
-                    <x-proxmox::ui.help-modal title="Server Overview" icon="ri-question-line">
-                        <p class="text-sm text-base/90 mb-4">
-                            The Server Overview provides a comprehensive dashboard of your virtual machine's status, resource utilization, and configuration.
-                        </p>
-                        <div class="pt-4 border-t border-neutral/30 space-y-2">
-                            <p class="text-xs text-base/75"><span class="font-semibold text-base/90">Resource Metrics:</span> Live CPU, memory utilization with health indicators.</p>
-                            <p class="text-xs text-base/75"><span class="font-semibold text-base/90">Server Details:</span> OS, hostname, IP addresses, and credentials.</p>
-                            <p class="text-xs text-base/75"><span class="font-semibold text-base/90">DNS Configuration:</span> Automatic hostname resolution options.</p>
-                        </div>
-                    </x-proxmox::ui.help-modal>
-                </x-slot>
             </x-proxmox::ui.section-header>
         </div>
 
diff --git a/extensions/Servers/Proxmox/views/statistics.blade.php b/extensions/Servers/Proxmox/views/statistics.blade.php
index 490feecbf..599c46e92 100644
--- a/extensions/Servers/Proxmox/views/statistics.blade.php
+++ b/extensions/Servers/Proxmox/views/statistics.blade.php
@@ -30,27 +30,6 @@
                         icon="ri-bar-chart-line"
                         subtitle="Monitor your server's performance metrics and resource utilization over time."
                         class="mb-0">
-                        <x-slot name="actions">
-                            <x-proxmox::ui.help-modal title="Statistics" icon="ri-question-line">
-                                <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                    The Statistics page provides comprehensive monitoring and analysis tools for your virtual machine's performance. This page includes real-time telemetry graphs, historical data snapshots, task execution history, lifecycle events tracking, and comparison tools to help you understand your server's behavior over time.
-                                </p>
-                                <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                        <span class="font-semibold text-base/90">Live Telemetry:</span> Four interactive performance graphs display real-time data from the Proxmox RRD API, including Processor Utilization, Network Traffic, Memory Utilization, and Storage I/O.
-                                    </p>
-                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                        <span class="font-semibold text-base/90">Statistics History:</span> View historical performance snapshots in a sortable and filterable table.
-                                    </p>
-                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                        <span class="font-semibold text-base/90">Task History:</span> Monitor all executed tasks with detailed execution logs.
-                                    </p>
-                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                        <span class="font-semibold text-base/90">Lifecycle Events:</span> Track critical state changes and operations.
-                                    </p>
-                                </div>
-                            </x-proxmox::ui.help-modal>
-                        </x-slot>
                     </x-proxmox::ui.section-header>
                 </div>
             </div>
diff --git a/extensions/Servers/Proxmox/views/storage.blade.php b/extensions/Servers/Proxmox/views/storage.blade.php
index f148eec90..48145c5ac 100644
--- a/extensions/Servers/Proxmox/views/storage.blade.php
+++ b/extensions/Servers/Proxmox/views/storage.blade.php
@@ -40,21 +40,45 @@
         {{-- Page Header --}}
         <div :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
              style="transition: all 0.4s ease-out;">
-            <x-proxmox::ui.section-header 
-            title="Storage Management" 
-            subtitle="Manage virtual hard disks attached to your VPS. Add, configure, or remove storage drives."
-            icon="ri-hard-drive-2-line"
-        >
-            <x-proxmox::ui.help-modal title="Storage Management" icon="ri-hard-drive-2-line">
-                <x-slot:description>
-                    Manage the storage drives attached to your VPS. You can add, remove, and configure drives with different bus types, cache modes, and performance options.
-                </x-slot:description>
-                <x-slot:details>
-                    <p><span class="font-semibold text-base/90">Bus Types:</span> SCSI (VirtIO SCSI) offers the best performance with IO thread support. VirtIO Block is also high-performance. IDE and SATA are available for compatibility.</p>
-                    <p><span class="font-semibold text-base/90">Important:</span> The VM must be stopped to add, remove, or move drives. Total storage cannot exceed your plan allocation.</p>
-                </x-slot:details>
-            </x-proxmox::ui.help-modal>
-        </x-proxmox::ui.section-header>
+            <div class="flex items-center gap-2 mb-6">
+            <h2 class="text-xl font-semibold flex items-center gap-3">
+                <div class="flex items-center justify-center w-11 h-11 rounded-lg bg-primary/10">
+                    <x-ri-hard-drive-2-line class="size-5 text-primary" />
+                </div>
+                Storage Management
+                <div class="relative" x-data="{ open: false }" x-cloak>
+                    <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
+                        <x-ri-question-line class="size-4" />
+                    </button>
+                    <div x-show="open" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm" style="display: none;"></div>
+                    <div x-show="open" @click.away="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
+                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                            <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
+                                <x-ri-close-line class="size-5" />
+                            </button>
+                            <div class="flex items-center gap-3 mb-4 pr-8">
+                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                                    <x-ri-hard-drive-2-line class="size-5 text-primary" />
+                                </div>
+                                <h6 class="font-sans text-lg font-semibold leading-tight">Storage Management</h6>
+                            </div>
+                            <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
+                                Manage the storage drives attached to your VPS. You can add, remove, and configure drives with different bus types, cache modes, and performance options.
+                            </p>
+                            <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
+                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                    <span class="font-semibold text-base/90">Bus Types:</span> SCSI (VirtIO SCSI) offers the best performance with IO thread support. VirtIO Block is also high-performance. IDE and SATA are available for compatibility.
+                                </p>
+                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
+                                    <span class="font-semibold text-base/90">Important:</span> The VM must be stopped to add, remove, or move drives. Total storage cannot exceed your plan allocation.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </h2>
+        </div>
+        <p class="text-sm text-base/60 mb-6">Manage virtual hard disks attached to your VPS. Add, configure, or remove storage drives.</p>
 
         {{-- VM Running Warning --}}
         @if($status && $status->status !== 'stopped')
@@ -131,16 +155,31 @@
                 <div>
                     <div class="flex items-center gap-2">
                         <h3 class="text-lg font-semibold text-base">SCSI Controller</h3>
-                        <x-proxmox::ui.help-modal title="SCSI Controller Types" icon="ri-cpu-line">
-                            <x-slot:description>
-                                <div class="space-y-3 text-sm text-base/90">
-                                    <p><strong>VirtIO SCSI / VirtIO SCSI Single:</strong> Best performance with paravirtualized drivers. Recommended for Linux and modern Windows.</p>
-                                    <p><strong>LSI 53C895A / LSI 53C810:</strong> Emulated LSI controllers with wide compatibility.</p>
-                                    <p><strong>MegaRAID SAS 8708EM2:</strong> Emulated MegaRAID controller.</p>
-                                    <p><strong>VMware PVSCSI:</strong> VMware paravirtualized controller, useful for VMs migrated from VMware.</p>
+                        <div class="relative" x-data="{ open: false }" x-cloak>
+                            <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
+                                <x-ri-question-line class="size-4" />
+                            </button>
+                            <div x-show="open" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm" style="display: none;"></div>
+                            <div x-show="open" @click.away="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
+                                <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
+                                    <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
+                                        <x-ri-close-line class="size-5" />
+                                    </button>
+                                    <div class="flex items-center gap-3 mb-4 pr-8">
+                                        <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+                                            <x-ri-cpu-line class="size-5 text-primary" />
+                                        </div>
+                                        <h6 class="font-sans text-lg font-semibold leading-tight">SCSI Controller Types</h6>
+                                    </div>
+                                    <div class="space-y-3 text-sm text-base/90">
+                                        <p><strong>VirtIO SCSI / VirtIO SCSI Single:</strong> Best performance with paravirtualized drivers. Recommended for Linux and modern Windows.</p>
+                                        <p><strong>LSI 53C895A / LSI 53C810:</strong> Emulated LSI controllers with wide compatibility.</p>
+                                        <p><strong>MegaRAID SAS 8708EM2:</strong> Emulated MegaRAID controller.</p>
+                                        <p><strong>VMware PVSCSI:</strong> VMware paravirtualized controller, useful for VMs migrated from VMware.</p>
+                                    </div>
                                 </div>
-                            </x-slot:description>
-                        </x-proxmox::ui.help-modal>
+                            </div>
+                        </div>
                     </div>
                     <p class="text-sm text-base/60 mt-1">Select the SCSI controller type for SCSI drives.</p>
                 </div>