feat(dashboard): move edit mode controls to menu permanently

Reduces header button crowding by keeping edit controls in menu at all screen sizes.

Changes:
- Add .rpg-menu-only-btn class to Add/Export/Import/Done buttons
- Remove display toggling from EditModeManager (simpler state machine)
- Update HeaderOverflowManager to:
  - Always hide menu-only buttons (never show inline)
  - Mark them as available for menu (wasVisible = 'true')
  - Filter menu items based on edit mode state
  - Add setEditModeManager() for edit state access
- Wire editModeManager to headerOverflowManager in integration

Result:
- Full mode: 6 visible buttons (was 10 with edit mode active)
- Overflow mode: 3 priority + menu with 3 standard + 4 edit (when active)
- Compact mode: 3 priority + hamburger with all actions (filtered by edit state)

Edit mode controls (Add Widget, Export, Import, Done) now only appear in
dropdown/hamburger menu, never inline. This creates cleaner visual hierarchy
and eliminates layout jumping when toggling edit mode.

Existing menu refresh on edit mode toggle (line 305) ensures menu updates
with correct items when entering/exiting edit mode.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-02 19:43:16 +11:00
parent 2cdad81cb8
commit 64d0fe41dd
4 changed files with 61 additions and 35 deletions
@@ -127,6 +127,11 @@ export async function initializeDashboard(dependencies) {
if (headerRight) {
headerOverflowManager = new HeaderOverflowManager(headerRight);
headerOverflowManager.init();
// Wire up editModeManager for menu filtering
if (dashboardManager?.editManager) {
headerOverflowManager.setEditModeManager(dashboardManager.editManager);
}
}
console.log('[RPG Companion] Dashboard v2 initialized successfully');