feat: enhance Proxmox cloud-init and firewall views by improving modal transition effects, backdrop handling, and enabling drag-and-drop rule editing for a better user experience

extensions/Servers/Proxmox/views/firewall.blade.php

@@ -95,7 +95,7 @@
     /* Drag and Drop Styles */
     .rule-row {
         transition: all 0.2s ease;
-        cursor: default;
+        cursor: move;
     }
     .rule-row.dragging {
         opacity: 0.5;
@@ -114,7 +114,6 @@
     }
     .drag-handle:hover {
         color: rgba(var(--color-primary), 1);
-        cursor: grab;
     }
     .drag-handle:active {
         cursor: grabbing;
@@ -506,13 +505,13 @@
         <!-- Firewall Rules Card -->
         <div class="bg-background border border-neutral rounded-lg p-6"
             x-data="{
+                editingPositions: false,
                 rules: @js($rules),
                 draggedIndex: null,
                 dragOverIndex: null,
                         
                         startDrag(event, index) {
-                            // Only allow dragging from the handle
-                            if (!event.target.closest('.drag-handle')) {
+                            if (!this.editingPositions) {
                                 event.preventDefault();
                                 return;
                             }
@@ -590,6 +589,14 @@
                     </div>
                 </div>
                 <div class="flex gap-2">
+                    <button 
+                        @click="editingPositions = !editingPositions"
+                        class="px-4 py-2 rounded-lg transition-colors text-sm font-medium border"
+                        :class="editingPositions ? 'bg-primary text-white border-primary hover:bg-primary/90' : 'bg-background-secondary text-base border-neutral/20 hover:bg-background-secondary/80'"
+                        :title="editingPositions ? 'Done editing positions' : 'Edit rule positions'">
+                        <x-ri-draggable class="size-4 inline mr-1" />
+                        <span x-text="editingPositions ? 'Done' : 'Edit Positions'"></span>
+                    </button>
                     <button 
                         wire:click="startCreateRule"
                         class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
@@ -619,7 +626,7 @@
                         <tbody>
                             <template x-for="(rule, index) in rules" :key="rule.pos">
                                 <tr class="rule-row border-b border-neutral/20 hover:bg-background-secondary/50"
-                                    draggable="true"
+                                    :draggable="editingPositions"
                                     @dragstart="startDrag($event, index)"
                                     @dragend="endDrag($event)"
                                     @dragover="dragOver($event, index)"
@@ -627,7 +634,7 @@
                                     @drop="drop($event, index)"
                                     :class="{ 'drag-over': dragOverIndex === index }">
                                     <td class="py-3 px-2 text-sm">
-                                        <div class="drag-handle" title="Drag to reorder">
+                                        <div x-show="editingPositions" class="drag-handle" title="Drag to reorder">
                                             <x-ri-menu-line class="size-4" />
                                         </div>
                                     </td>