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:
@@ -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`);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user