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
+20
View File
@@ -178,6 +178,26 @@ export function generateDefaultDashboard() {
}
}
]
},
// Tab 4: Quests (Full tab for quest system)
{
id: 'tab-quests',
name: 'Quests',
icon: 'fa-solid fa-scroll',
order: 3,
widgets: [
{
id: 'widget-quests',
type: 'quests',
x: 0,
y: 0,
w: 2,
h: 5,
config: {
defaultSubTab: 'main'
}
}
]
}
],