From ea1ca273c216cda2e55015eeb326429d9b4e4624 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 1 Dec 2025 12:18:59 -0500
Subject: [PATCH] feat: enhance Proxmox layout with toggle switch for view
 modes, improving user interaction and accessibility

---
 .../Proxmox/views/components/layout.blade.php | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index e966093a2..31f14cccd 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -192,13 +192,17 @@
                         </div>
                     @endforeach
                     <div class="ml-auto">
-                        <button type="button"
-                                @click.prevent="!isAdvancedOnlyView && toggleView()"
+                        <label class="inline-flex items-center cursor-pointer" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
+                            <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Standard</span>
+                            <input 
+                                type="checkbox" 
+                                :checked="isAdvancedView"
+                                @change="!isAdvancedOnlyView && toggleView()"
                                 :disabled="isAdvancedOnlyView"
-                                class="px-4 py-2 text-sm font-semibold rounded-md transition-all duration-200 focus:outline-none focus:ring-0 focus:ring-transparent disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
-                                :class="isAdvancedView ? 'bg-blue-600 text-white' : 'bg-white text-base'">
-                            <span x-text="isAdvancedView ? 'Standard View' : 'Advanced View'"></span>
-                        </button>
+                                class="sr-only peer">
+                            <div class="relative mx-3 w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+                            <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
+                        </label>
                     </div>
                 </div>
 
@@ -236,13 +240,17 @@
                             <span>{{ $tabs[array_search($view, array_column($tabs, 'view'))]['label'] ?? __('Menu') }}</span>
                             <x-ri-menu-line class="size-5" />
                         </button>
-                        <button type="button"
-                                @click.prevent="!isAdvancedOnlyView && toggleView()"
+                        <label class="inline-flex items-center cursor-pointer flex-shrink-0" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
+                            <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Standard</span>
+                            <input 
+                                type="checkbox" 
+                                :checked="isAdvancedView"
+                                @change="!isAdvancedOnlyView && toggleView()"
                                 :disabled="isAdvancedOnlyView"
-                                class="px-4 py-2 text-sm font-semibold rounded-md transition-all duration-200 focus:outline-none focus:ring-0 focus:ring-transparent disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap bg-background-secondary border border-neutral"
-                                :class="isAdvancedView ? 'bg-blue-600 text-white border-blue-600' : 'bg-background-secondary text-base'">
-                            <span x-text="isAdvancedView ? 'Standard' : 'Advanced'"></span>
-                        </button>
+                                class="sr-only peer">
+                            <div class="relative mx-3 w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+                            <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
+                        </label>
                     </div>
                     <div x-show="open" x-transition @click.outside="open = false"
                         class="mt-2 bg-background-secondary border border-neutral rounded-lg shadow-lg overflow-hidden">