From c5d63888083b97dc9d74f3e9da70280b32b38c0d Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 1 Dec 2025 12:24:32 -0500
Subject: [PATCH] refactor: enhance toggle switch implementation in Proxmox
 layout for improved user experience and visual consistency

---
 .../Proxmox/views/components/layout.blade.php | 87 +++++++++++++++----
 1 file changed, 71 insertions(+), 16 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index c270ba5c8..e5374deb6 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -192,15 +192,69 @@
                         </div>
                     @endforeach
                     <div class="ml-auto">
-                        <label class="inline-flex items-center cursor-pointer" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
+                        <style>
+                            .view-toggle-switch {
+                                position: relative;
+                                display: inline-block;
+                                width: 36px;
+                                height: 20px;
+                                margin: 0 12px;
+                            }
+                            .view-toggle-switch input {
+                                opacity: 0;
+                                width: 0;
+                                height: 0;
+                            }
+                            .view-toggle-slider {
+                                position: absolute;
+                                cursor: pointer;
+                                top: 0;
+                                left: 0;
+                                right: 0;
+                                bottom: 0;
+                                background-color: #e5e7eb;
+                                transition: 0.3s;
+                                border-radius: 20px;
+                            }
+                            .view-toggle-slider:before {
+                                position: absolute;
+                                content: "";
+                                height: 16px;
+                                width: 16px;
+                                left: 2px;
+                                bottom: 2px;
+                                background-color: white;
+                                transition: 0.3s;
+                                border-radius: 50%;
+                                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+                            }
+                            .view-toggle-switch input:checked + .view-toggle-slider {
+                                background-color: #2563eb;
+                            }
+                            .view-toggle-switch input:checked + .view-toggle-slider:before {
+                                transform: translateX(16px);
+                            }
+                            .view-toggle-switch input:disabled + .view-toggle-slider {
+                                opacity: 0.5;
+                                cursor: not-allowed;
+                            }
+                            .dark .view-toggle-slider {
+                                background-color: #374151;
+                            }
+                            .dark .view-toggle-switch input:checked + .view-toggle-slider {
+                                background-color: #2563eb;
+                            }
+                        </style>
+                        <label class="inline-flex items-center" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : 'cursor-pointer'">
                             <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="sr-only peer">
-                            <div class="relative mx-3 w-9 h-5 bg-gray-200 dark:bg-gray-700 rounded-full peer peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
+                            <label class="view-toggle-switch">
+                                <input 
+                                    type="checkbox" 
+                                    :checked="isAdvancedView"
+                                    @change="!isAdvancedOnlyView && toggleView()"
+                                    :disabled="isAdvancedOnlyView">
+                                <span class="view-toggle-slider"></span>
+                            </label>
                             <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
                         </label>
                     </div>
@@ -240,15 +294,16 @@
                             <span>{{ $tabs[array_search($view, array_column($tabs, 'view'))]['label'] ?? __('Menu') }}</span>
                             <x-ri-menu-line class="size-5" />
                         </button>
-                        <label class="inline-flex items-center cursor-pointer flex-shrink-0" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
+                        <label class="inline-flex items-center flex-shrink-0" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : 'cursor-pointer'">
                             <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="sr-only peer">
-                            <div class="relative mx-3 w-9 h-5 bg-gray-200 dark:bg-gray-700 rounded-full peer peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
+                            <label class="view-toggle-switch">
+                                <input 
+                                    type="checkbox" 
+                                    :checked="isAdvancedView"
+                                    @change="!isAdvancedOnlyView && toggleView()"
+                                    :disabled="isAdvancedOnlyView">
+                                <span class="view-toggle-slider"></span>
+                            </label>
                             <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
                         </label>
                     </div>