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
@@ -14,6 +14,7 @@ import { WidgetRegistry } from './widgetRegistry.js';
import { generateDefaultDashboard } from './defaultLayout.js';
import { TabScrollManager } from './tabScrollManager.js';
import { HeaderOverflowManager } from './headerOverflowManager.js';
import { TabContextMenu } from './tabContextMenu.js';
import { showConfirmDialog } from './confirmDialog.js';
// Widget imports
@@ -31,6 +32,7 @@ import { registerQuestsWidget } from './widgets/questsWidget.js';
let dashboardManager = null;
let tabScrollManager = null;
let headerOverflowManager = null;
let tabContextMenu = null;
/**
* Get the dashboard manager instance
@@ -123,6 +125,23 @@ export async function initializeDashboard(dependencies) {
tabScrollManager.init();
}
// Initialize tab context menu
if (tabsContainer && dashboardManager?.tabManager) {
tabContextMenu = new TabContextMenu({
tabManager: dashboardManager.tabManager,
onTabChange: (event, data) => {
console.log('[RPG Companion] Tab context menu event:', event, data);
// Re-render tabs after tab operations
dashboardManager.renderTabs();
// Save dashboard state
if (dashboardManager.autoSave) {
saveSettings();
}
}
});
tabContextMenu.init(tabsContainer);
}
// Initialize header overflow manager
const headerRight = document.querySelector('#rpg-dashboard-header-right');
if (headerRight) {