feat: Add Exit Edit Mode button visibility toggle and tab management UI

Fix Exit Edit Mode button:
- Move button before Lock button (left side as requested)
- Add visibility toggle in editModeManager.js
  - Show done button when entering edit mode
  - Hide done button when exiting edit mode
- Fixes critical bug where button stayed hidden permanently

Add tab management UI:
- Create promptDialog.js for text input modals (rename, create)
- Create tabContextMenu.js with right-click context menu on tabs
- Integrate with TabManager API for all operations:
  - Add New Tab (with validation)
  - Rename Tab (with validation)
  - Change Icon (icon picker with 20 common icons)
  - Duplicate Tab (copies widgets)
  - Delete Tab (with confirmation, blocks if last tab)
- Auto-save after tab operations
- Event delegation for dynamic tab elements

Files changed:
- dashboardTemplate.html: Move done button to correct position
- editModeManager.js: Add visibility toggles in enter/exit methods
- promptDialog.js: New dialog system for text input
- tabContextMenu.js: New context menu system
- dashboardIntegration.js: Initialize tab context menu
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-04 13:34:36 +11:00
parent 3117cd2598
commit 2ab48190ea
5 changed files with 837 additions and 6 deletions
+6 -2
View File
@@ -59,10 +59,12 @@ export class EditModeManager {
// Store original layout for cancel
this.originalLayout = this.captureLayout();
// Hide edit mode button (menu-only controls managed by headerOverflowManager)
// Hide edit mode button, show done button (menu-only controls managed by headerOverflowManager)
const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode');
const doneBtn = document.querySelector('#rpg-dashboard-done-edit');
if (editModeBtn) editModeBtn.style.display = 'none';
if (doneBtn) doneBtn.style.display = '';
// Disable content editing to prevent keyboard from messing up layout
this.disableContentEditing();
@@ -104,10 +106,12 @@ export class EditModeManager {
// Re-enable content editing
this.enableContentEditing();
// Show edit mode button (menu-only controls managed by headerOverflowManager)
// Show edit mode button, hide done button (menu-only controls managed by headerOverflowManager)
const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode');
const doneBtn = document.querySelector('#rpg-dashboard-done-edit');
if (editModeBtn) editModeBtn.style.display = '';
if (doneBtn) doneBtn.style.display = 'none';
// Remove edit class from container
this.container.classList.remove('edit-mode');