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
+6 -1
View File
@@ -1062,7 +1062,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
align-items: center;
padding: 0;
gap: 0.5rem;
flex-wrap: wrap;
flex-wrap: nowrap; /* Prevent wrapping when tabs expand - rely on horizontal scroll */
overflow: visible; /* Prevent clipping of dropdown menu */
}
@@ -1170,6 +1170,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
margin-left: 0.3rem;
}
/* Icon-only mode when 4+ tabs - prevents layout issues from hover expansion */
.rpg-dashboard-tabs.rpg-tabs-icon-only .rpg-dashboard-tab:hover .rpg-tab-name {
display: none;
}
/* Tab Navigation Arrows */
.rpg-tab-nav-arrow {
position: absolute;