feat(dashboard): add quest widget + fix 4-tab header layout

Quest Widget Integration:
- Created questsWidget.js with Main/Optional quest sub-tabs
- Added dedicated Quests tab (4th tab after Inventory)
- Registered quest widget in dashboardIntegration.js
- Widget features: inline editing, add/remove quests, contenteditable
- Fixed tab switching to use inline re-rendering (not full widget render)

Header Layout Fixes (4+ Tabs):
- Changed header flex-wrap from wrap to nowrap (prevents button wrapping)
- Added icon-only mode for 4+ tabs (disables hover expansion)
- Tab count detection in renderTabs() adds rpg-tabs-icon-only class
- Prevents layout breaking when tabs expand on hover

Technical Details:
- Quest widget follows inventory widget pattern (sub-tabs, per-instance state)
- Split event handlers: attachQuestHandlers (tabs) + attachQuestContentHandlers (buttons)
- Tab switching updates innerHTML inline and re-attaches content handlers
- Default size: 2w × 5h, category: 'scene'

Benefits:
- Quest tracking fully integrated with Dashboard v2 drag/drop
- No header wrapping issues with 4 tabs
- Cleaner icon-only UX when space is constrained
- Horizontal scrolling handles overflow gracefully
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-30 08:40:46 +11:00
parent ad2efa55f0
commit 9f92c4af87
5 changed files with 478 additions and 1 deletions
@@ -405,6 +405,13 @@ export class DashboardManager {
this.tabContainer.appendChild(button);
});
// Icon-only mode when 4+ tabs to prevent header wrapping on hover
if (tabs.length > 3) {
this.tabContainer.classList.add('rpg-tabs-icon-only');
} else {
this.tabContainer.classList.remove('rpg-tabs-icon-only');
}
console.log(`[DashboardManager] Rendered ${tabs.length} tabs`);
}