From f84cbf794a039ba83daf51ab2f7ed82c97c04ac1 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Sat, 25 Oct 2025 19:50:17 +1100
Subject: [PATCH] feat(dashboard): add lock button to prevent accidental widget
 movement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add lock/unlock button to dashboard header (always visible)
- Lock state prevents dragging in both normal and edit modes
- Lock state prevents resizing in edit mode
- Icon changes: lock-open (unlocked) ↔ lock (locked)
- Hide resize handles and prevent grab cursor when locked
- Lock state persists across edit mode toggles
- Integrate lock checks in DragDropHandler and ResizeHandler
- Pass editManager reference to drag/resize handlers for lock state access
---
 src/systems/dashboard/dashboardIntegration.js | 11 +++
 src/systems/dashboard/dashboardManager.js     | 32 ++++---
 src/systems/dashboard/dashboardTemplate.html  |  5 +
 src/systems/dashboard/dragDrop.js             | 17 +++-
 src/systems/dashboard/editModeManager.js      | 93 +++++++++----------
 src/systems/dashboard/resizeHandler.js        |  9 ++
 style.css                                     | 11 +++
 7 files changed, 112 insertions(+), 66 deletions(-)

diff --git a/src/systems/dashboard/dashboardIntegration.js b/src/systems/dashboard/dashboardIntegration.js
index ace8a0a..4d592be 100644
--- a/src/systems/dashboard/dashboardIntegration.js
+++ b/src/systems/dashboard/dashboardIntegration.js
@@ -238,6 +238,17 @@ function setupDashboardEventListeners(dependencies) {
         });
     }
 
+    // Lock/unlock widgets button
+    const lockWidgetsBtn = document.querySelector('#rpg-dashboard-lock-widgets');
+    if (lockWidgetsBtn) {
+        lockWidgetsBtn.addEventListener('click', () => {
+            if (dashboardManager && dashboardManager.editManager) {
+                console.log('[RPG Companion] Lock button clicked');
+                dashboardManager.editManager.toggleLock();
+            }
+        });
+    }
+
     // Add widget button
     const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
     if (addWidgetBtn) {
diff --git a/src/systems/dashboard/dashboardManager.js b/src/systems/dashboard/dashboardManager.js
index e3c8842..a915a36 100644
--- a/src/systems/dashboard/dashboardManager.js
+++ b/src/systems/dashboard/dashboardManager.js
@@ -156,21 +156,7 @@ export class DashboardManager {
             }
         });
 
-        // Initialize Drag & Drop
-        this.dragHandler = new DragDropHandler(this.gridEngine, {
-            showGrid: true,
-            enableSnap: true
-        });
-
-        // Initialize Resize Handler
-        this.resizeHandler = new ResizeHandler(this.gridEngine, {
-            minWidth: 1,
-            minHeight: 2,
-            maxWidth: 4, // Max 4 columns (will be clamped to actual column count)
-            maxHeight: 10
-        });
-
-        // Initialize Edit Mode Manager
+        // Initialize Edit Mode Manager first (needed by drag/resize handlers)
         this.editManager = new EditModeManager({
             container: this.container,
             onSave: () => this.handleEditSave(),
@@ -180,6 +166,22 @@ export class DashboardManager {
             onWidgetSettings: (widgetId) => this.openWidgetSettings(widgetId)
         });
 
+        // Initialize Drag & Drop (with editManager reference)
+        this.dragHandler = new DragDropHandler(this.gridEngine, {
+            showGrid: true,
+            enableSnap: true,
+            editManager: this.editManager
+        });
+
+        // Initialize Resize Handler (with editManager reference)
+        this.resizeHandler = new ResizeHandler(this.gridEngine, {
+            minWidth: 1,
+            minHeight: 2,
+            maxWidth: 4, // Max 4 columns (will be clamped to actual column count)
+            maxHeight: 10,
+            editManager: this.editManager
+        });
+
         // Initialize Layout Persistence
         this.persistence = new LayoutPersistence({
             debounceMs: this.config.debounceMs,
diff --git a/src/systems/dashboard/dashboardTemplate.html b/src/systems/dashboard/dashboardTemplate.html
index 08ea754..d8648cf 100644
--- a/src/systems/dashboard/dashboardTemplate.html
+++ b/src/systems/dashboard/dashboardTemplate.html
@@ -18,6 +18,11 @@
                 <i class="fa-solid fa-table-cells-large"></i>
             </button>
 
+            <!-- Lock/Unlock Button (always visible) -->
+            <button id="rpg-dashboard-lock-widgets" class="rpg-dashboard-btn rpg-lock-widgets-btn" title="Lock Widgets">
+                <i class="fa-solid fa-lock-open"></i>
+            </button>
+
             <!-- Edit Mode Toggle -->
             <button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Mode">
                 <i class="fa-solid fa-pen-to-square"></i>
diff --git a/src/systems/dashboard/dragDrop.js b/src/systems/dashboard/dragDrop.js
index 2f3d92f..73e55af 100644
--- a/src/systems/dashboard/dragDrop.js
+++ b/src/systems/dashboard/dragDrop.js
@@ -24,6 +24,7 @@ export class DragDropHandler {
      */
     constructor(gridEngine, options = {}) {
         this.gridEngine = gridEngine;
+        this.editManager = options.editManager || null; // Reference to EditModeManager for lock state
         this.options = {
             showGrid: true,
             showCollisions: true,
@@ -64,6 +65,11 @@ export class DragDropHandler {
         const mouseDownHandler = (e) => {
             if (e.button !== 0) return; // Only left mouse button
 
+            // Don't drag if widgets are locked
+            if (this.editManager?.isWidgetsLocked()) {
+                return;
+            }
+
             // Don't drag if clicking on resize handle or widget controls
             if (e.target.closest('.resize-handle') || e.target.closest('.widget-edit-controls')) {
                 return;
@@ -92,6 +98,11 @@ export class DragDropHandler {
         };
 
         const touchStartHandler = (e) => {
+            // Don't drag if widgets are locked
+            if (this.editManager?.isWidgetsLocked()) {
+                return;
+            }
+
             // Don't drag if touching resize handle or widget controls
             if (e.target.closest('.resize-handle') || e.target.closest('.widget-edit-controls')) {
                 return;
@@ -130,8 +141,10 @@ export class DragDropHandler {
             dragHandle
         });
 
-        // Add draggable cursor
-        dragHandle.style.cursor = 'grab';
+        // Add draggable cursor (unless locked)
+        if (!this.editManager?.isWidgetsLocked()) {
+            dragHandle.style.cursor = 'grab';
+        }
     }
 
     /**
diff --git a/src/systems/dashboard/editModeManager.js b/src/systems/dashboard/editModeManager.js
index 9cb2b84..eaf4f9a 100644
--- a/src/systems/dashboard/editModeManager.js
+++ b/src/systems/dashboard/editModeManager.js
@@ -28,8 +28,8 @@ export class EditModeManager {
         this.onWidgetSettings = config.onWidgetSettings;
 
         this.isEditMode = false;
+        this.isLocked = false; // Lock state prevents dragging/resizing
         this.originalLayout = null;
-        this.editControls = null;
         this.gridOverlay = null;
         this.widgetLibrary = null;
         this.widgetControlsMap = new Map();
@@ -48,14 +48,14 @@ export class EditModeManager {
         // Store original layout for cancel
         this.originalLayout = this.captureLayout();
 
-        // Create edit controls
-        this.createEditControls();
+        // Show edit mode buttons (lock button is always visible)
+        const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
+        const exportBtn = document.querySelector('#rpg-dashboard-export-layout');
+        const importBtn = document.querySelector('#rpg-dashboard-import-layout');
 
-        // Show grid overlay
-        this.showGridOverlay();
-
-        // Show widget library
-        this.showWidgetLibrary();
+        if (addWidgetBtn) addWidgetBtn.style.display = '';
+        if (exportBtn) exportBtn.style.display = '';
+        if (importBtn) importBtn.style.display = '';
 
         // Add edit class to container
         this.container.classList.add('edit-mode');
@@ -88,14 +88,14 @@ export class EditModeManager {
         this.isEditMode = false;
         this.originalLayout = null;
 
-        // Remove edit controls
-        this.removeEditControls();
+        // Hide edit mode buttons (lock button stays visible)
+        const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
+        const exportBtn = document.querySelector('#rpg-dashboard-export-layout');
+        const importBtn = document.querySelector('#rpg-dashboard-import-layout');
 
-        // Hide grid overlay
-        this.hideGridOverlay();
-
-        // Hide widget library
-        this.hideWidgetLibrary();
+        if (addWidgetBtn) addWidgetBtn.style.display = 'none';
+        if (exportBtn) exportBtn.style.display = 'none';
+        if (importBtn) importBtn.style.display = 'none';
 
         // Remove edit class from container
         this.container.classList.remove('edit-mode');
@@ -115,50 +115,45 @@ export class EditModeManager {
     }
 
     /**
-     * Create edit control buttons
+     * Toggle lock state
      */
-    createEditControls() {
-        if (this.editControls) return;
+    toggleLock() {
+        this.isLocked = !this.isLocked;
 
-        this.editControls = document.createElement('div');
-        this.editControls.className = 'edit-controls';
-        this.editControls.style.position = 'absolute';
-        this.editControls.style.top = '10px';
-        this.editControls.style.right = '10px';
-        this.editControls.style.display = 'flex';
-        this.editControls.style.gap = '8px';
-        this.editControls.style.zIndex = '10000';
+        // Update button appearance
+        const lockBtn = document.querySelector('#rpg-dashboard-lock-widgets');
+        if (lockBtn) {
+            const icon = lockBtn.querySelector('i');
+            if (this.isLocked) {
+                icon.className = 'fa-solid fa-lock';
+                lockBtn.title = 'Unlock Widgets';
+            } else {
+                icon.className = 'fa-solid fa-lock-open';
+                lockBtn.title = 'Lock Widgets';
+            }
+        }
 
-        // Save button
-        const saveBtn = document.createElement('button');
-        saveBtn.className = 'edit-btn edit-btn-save';
-        saveBtn.textContent = '💾 Save';
-        saveBtn.onclick = () => this.exitEditMode(true);
-        this.styleButton(saveBtn, '#4ecca3', '#1a1a2e');
+        // Add/remove locked class to container for CSS styling
+        if (this.isLocked) {
+            this.container.classList.add('widgets-locked');
+        } else {
+            this.container.classList.remove('widgets-locked');
+        }
 
-        // Cancel button
-        const cancelBtn = document.createElement('button');
-        cancelBtn.className = 'edit-btn edit-btn-cancel';
-        cancelBtn.textContent = '✖ Cancel';
-        cancelBtn.onclick = () => this.confirmCancel(() => this.exitEditMode(false));
-        this.styleButton(cancelBtn, '#e94560', 'white');
-
-        this.editControls.appendChild(saveBtn);
-        this.editControls.appendChild(cancelBtn);
-
-        this.container.appendChild(this.editControls);
+        // Notify listeners
+        this.notifyChange('lockStateChanged', { locked: this.isLocked });
+        console.log('[EditModeManager] Lock state:', this.isLocked ? 'LOCKED' : 'UNLOCKED');
     }
 
     /**
-     * Remove edit control buttons
+     * Check if widgets are currently locked
+     * @returns {boolean} True if locked
      */
-    removeEditControls() {
-        if (this.editControls) {
-            this.editControls.remove();
-            this.editControls = null;
-        }
+    isWidgetsLocked() {
+        return this.isLocked;
     }
 
+
     /**
      * Show grid overlay (now handled via CSS on container)
      */
diff --git a/src/systems/dashboard/resizeHandler.js b/src/systems/dashboard/resizeHandler.js
index d31a295..bbd7133 100644
--- a/src/systems/dashboard/resizeHandler.js
+++ b/src/systems/dashboard/resizeHandler.js
@@ -27,6 +27,7 @@ export class ResizeHandler {
      */
     constructor(gridEngine, options = {}) {
         this.gridEngine = gridEngine;
+        this.editManager = options.editManager || null; // Reference to EditModeManager for lock state
         this.options = {
             showDimensions: true,
             showGrid: true,
@@ -92,12 +93,20 @@ export class ResizeHandler {
 
             const mouseDownHandler = (e) => {
                 if (e.button !== 0) return;
+                // Don't resize if widgets are locked
+                if (this.editManager?.isWidgetsLocked()) {
+                    return;
+                }
                 e.preventDefault();
                 e.stopPropagation();
                 this.startResize(e, handleType, element, widget, onResizeEnd, widgetConstraints);
             };
 
             const touchStartHandler = (e) => {
+                // Don't resize if widgets are locked
+                if (this.editManager?.isWidgetsLocked()) {
+                    return;
+                }
                 this.touchTimer = setTimeout(() => {
                     e.preventDefault();
                     e.stopPropagation();
diff --git a/style.css b/style.css
index f759f76..028f8ce 100644
--- a/style.css
+++ b/style.css
@@ -1172,6 +1172,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     pointer-events: auto;
 }
 
+/* Hide resize handles when widgets are locked */
+.widgets-locked .resize-handles {
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+/* Prevent grab cursor when widgets are locked */
+.widgets-locked .rpg-widget {
+    cursor: default !important;
+}
+
 /* ========================================
    DASHBOARD V2 WIDGET STYLES
    ========================================