From 8317471922c6d336826eaea486054a8cc626ef07 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Sun, 26 Oct 2025 10:29:55 +1100
Subject: [PATCH] fix(dashboard): improve edit mode UX and remove redundant
 weather subtitle

- Disable contenteditable fields in edit widget mode to prevent keyboard popup
- Re-enable content editing when exiting edit mode
- Change button tooltip from 'Toggle Edit Mode' to 'Toggle Edit Widget Mode' for clarity
- Remove redundant 'WEATHER' subtitle from weather widget (only show single editable field)
- Prevents layout shift on mobile when keyboard appears during widget arrangement
---
 src/systems/dashboard/dashboardTemplate.html  |  4 +-
 src/systems/dashboard/editModeManager.js      | 48 +++++++++++++++++++
 .../dashboard/widgets/infoBoxWidgets.js       |  4 +-
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/systems/dashboard/dashboardTemplate.html b/src/systems/dashboard/dashboardTemplate.html
index d8648cf..9634a8e 100644
--- a/src/systems/dashboard/dashboardTemplate.html
+++ b/src/systems/dashboard/dashboardTemplate.html
@@ -23,8 +23,8 @@
                 <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">
+            <!-- Edit Widget Mode Toggle -->
+            <button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Widget Mode">
                 <i class="fa-solid fa-pen-to-square"></i>
             </button>
 
diff --git a/src/systems/dashboard/editModeManager.js b/src/systems/dashboard/editModeManager.js
index eaf4f9a..65d4170 100644
--- a/src/systems/dashboard/editModeManager.js
+++ b/src/systems/dashboard/editModeManager.js
@@ -57,6 +57,9 @@ export class EditModeManager {
         if (exportBtn) exportBtn.style.display = '';
         if (importBtn) importBtn.style.display = '';
 
+        // Disable content editing to prevent keyboard from messing up layout
+        this.disableContentEditing();
+
         // Add edit class to container
         this.container.classList.add('edit-mode');
 
@@ -88,6 +91,9 @@ export class EditModeManager {
         this.isEditMode = false;
         this.originalLayout = null;
 
+        // Re-enable content editing
+        this.enableContentEditing();
+
         // Hide edit mode buttons (lock button stays visible)
         const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
         const exportBtn = document.querySelector('#rpg-dashboard-export-layout');
@@ -153,6 +159,48 @@ export class EditModeManager {
         return this.isLocked;
     }
 
+    /**
+     * Disable content editing (prevent keyboard popup in edit mode)
+     */
+    disableContentEditing() {
+        // Find all contenteditable elements within widgets
+        const editableElements = this.container.querySelectorAll('[contenteditable="true"]');
+        editableElements.forEach(element => {
+            element.dataset.wasEditable = 'true';
+            element.contentEditable = 'false';
+        });
+
+        // Also disable input fields
+        const inputElements = this.container.querySelectorAll('input, textarea');
+        inputElements.forEach(element => {
+            element.dataset.wasEnabled = element.disabled ? 'false' : 'true';
+            element.disabled = true;
+        });
+
+        console.log('[EditModeManager] Content editing disabled');
+    }
+
+    /**
+     * Re-enable content editing
+     */
+    enableContentEditing() {
+        // Re-enable contenteditable elements
+        const editableElements = this.container.querySelectorAll('[data-was-editable="true"]');
+        editableElements.forEach(element => {
+            element.contentEditable = 'true';
+            delete element.dataset.wasEditable;
+        });
+
+        // Re-enable input fields
+        const inputElements = this.container.querySelectorAll('[data-was-enabled="true"]');
+        inputElements.forEach(element => {
+            element.disabled = false;
+            delete element.dataset.wasEnabled;
+        });
+
+        console.log('[EditModeManager] Content editing enabled');
+    }
+
 
     /**
      * Show grid overlay (now handled via CSS on container)
diff --git a/src/systems/dashboard/widgets/infoBoxWidgets.js b/src/systems/dashboard/widgets/infoBoxWidgets.js
index 96a28e8..6a517b8 100644
--- a/src/systems/dashboard/widgets/infoBoxWidgets.js
+++ b/src/systems/dashboard/widgets/infoBoxWidgets.js
@@ -290,12 +290,10 @@ export function registerWeatherWidget(registry, dependencies) {
             const data = parseInfoBoxData(getInfoBoxData());
 
             const weatherEmoji = data.weatherEmoji || '🌤️';
-            const weatherForecast = data.weatherForecast || 'Weather';
 
             const html = `
                 <div class="rpg-dashboard-widget rpg-weather-widget">
-                    <div class="rpg-weather-icon rpg-editable" contenteditable="true" data-field="weatherEmoji" title="Click to edit emoji">${weatherEmoji}</div>
-                    <div class="rpg-weather-forecast rpg-editable" contenteditable="true" data-field="weatherForecast" title="Click to edit">${weatherForecast}</div>
+                    <div class="rpg-weather-icon rpg-editable" contenteditable="true" data-field="weatherEmoji" title="Click to edit">${weatherEmoji}</div>
                 </div>
             `;