Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
313 Commits 10 Branches 10 Tags
3e75d03af62080977d4c5364180f6d590535ed5e
Commit Graph

5 Commits

Author SHA1 Message Date
Lucas 'Paperboy' Rose-Winters 13b1acb151 fix: center icons in compact buttons with fixed dimensions and flexbox 
Properly centered icons by wrapping text in spans and forcing exact button
dimensions to override base min-width: fit-content style.

Root Cause:
- Base .rpg-inventory-add-btn has min-width: fit-content
- Even with span hidden, button width wasn't constrained
- Icon appeared off-center with extra space to the right

Solution:

1. HTML Structure (inventoryWidget.js, questsWidget.js):
   - Wrapped text in <span class="rpg-btn-label">
   - Pattern: <i class="fa-solid fa-plus"></i><span class="rpg-btn-label"> Add Item</span>
   - Applied to: Add Item, Add Location, Add Asset, Add Quest buttons

2. CSS (style.css):
   - Hide labels: .rpg-inventory-compact .rpg-btn-label { display: none; }
   - Force square dimensions: width: 32px !important (overrides fit-content)
   - Center icon: display: inline-flex; justify-content: center; align-items: center
   - Remove padding: padding: 0 (icon uses full 32px space)

Result: Perfect 32×32px square buttons with centered icons in compact mode,
matching the pattern used for sub-tab buttons throughout the codebase.

Fixes: Icon skewed left in Add Item/Quest buttons at narrow widths
 2025-11-05 10:16:21 +11:00
Lucas 'Paperboy' Rose-Winters 55f4e0aee6 fix: apply widget responsive classes on tab switch 
Fixed issue where compact mode styling was lost when switching tabs.
Widgets now consistently show icon-only buttons and truncated headers
at narrow widths, regardless of how they were rendered.

Root Cause:
- onTabChange() rendered widgets but never called onResize handlers
- Compact classes (.rpg-inventory-compact, .rpg-quests-compact) only applied:
  * After auto-arrange (explicit onResize calls)
  * During window resize (ResizeObserver triggers)
- Tab switches rendered widgets fresh WITHOUT compact classes
- Result: Buttons/headers overflowed after tab switch at narrow widths

Changes:

1. dashboardManager.js onTabChange() (lines 1224-1233):
   - Added onResize handler calls after rendering tab widgets
   - Iterates this.widgets Map (currently rendered widgets)
   - Calls definition.onResize(element, w, h) for each widget
   - Applies responsive styling based on widget dimensions

2. questsWidget.js onResize() (lines 463-468):
   - Added .rpg-quests-compact class application at < 3 grid units
   - Toggles between wide/compact modes based on width

3. style.css compact mode styling:
   - Inventory: icon-only buttons (font-size: 0), truncated headers
   - Quests: icon-only buttons (font-size: 0), truncated headers
   - Headers max-width: 140px (inventory), 120px (quests)
   - Buttons: 32×32px icon-only with restored icon size

Flow Now:
1. Window resize → onResize called → compact classes applied ✓
2. Auto-arrange → onResize called → compact classes applied ✓
3. Tab switch → onResize called → compact classes applied ✓ (NEW)

All three paths now apply responsive styling consistently.

Fixes: "Add Item" button cut-off and header overflow after auto-arrange
or tab switching at narrow widths (~296px, 2 columns)
 2025-11-05 09:59:33 +11:00
Lucas 'Paperboy' Rose-Winters a7ed100780 fix: improve inventory and quests widget resizing at narrow widths 
Resolved issues where inventory and quests widgets didn't properly adapt
to narrow desktop widths (~296px, 2 columns):
- Assets tab was cut off (1/3 off-screen)
- Widgets shrank vertically instead of expanding
- Sub-tabs overflowed horizontally

Changes:

1. Widget onResize Handlers (inventoryWidget.js, questsWidget.js):
   - Strengthened inventory onResize to call render() for full re-layout
   - Added quests onResize handler with re-render + width-aware styling
   - Both apply responsive CSS classes at narrow widths

2. Increased maxAutoSize for 2-Column Layouts:
   - inventoryWidget.js: h: 6 → h: 8 (creates expansion headroom)
   - questsWidget.js: h: 5 → h: 7 (user requested height)
   - Previously: defaultSize = maxAutoSize → zero expansion possible
   - Now: defaultSize < maxAutoSize → widgets can expand vertically

3. Added Missing Quests Widget Container Styles (style.css):
   - Added .rpg-quests-widget and .rpg-quests-views flex container styles
   - Proper overflow handling (hidden on container, auto on content)
   - Prevents Assets tab horizontal cut-off

4. Implemented Compact Mode CSS (style.css):
   - .rpg-inventory-compact: reduced padding, icon-only sub-tabs
   - Applied when widget width < 6 grid units
   - Prevents 3 sub-tabs from overflowing 296px container
   - Icons remain visible, labels hidden for space savings

5. Grid Engine Boolean Return (gridEngine.js):
   - setContainerWidth now returns true/false for column changes
   - Allows DashboardManager to optimize resize handling

Why This Works:
- Auto-layout expansion requires defaultSize < maxAutoSize for headroom
- Flex container styles prevent overflow with proper scroll handling
- Compact mode makes sub-tabs fit within narrow containers
- onResize handlers ensure internal layouts adapt to dimension changes

Fixes: Assets tab cut-off, vertical shrinking, sub-tab overflow at ~296px
 2025-11-05 09:47:56 +11:00
Lucas 'Paperboy' Rose-Winters f6ba2642f7 fix(dashboard): quest widget auto-arrange tab placement 
Fixed auto-arrange placing quest widget into wrong tab.

Problem:
- Quest widget had category: 'scene' but needs dedicated tab
- Auto-arrange only created Status/Scene/Social/Inventory tabs
- Quest widget got grouped with scene widgets
- No 'quests' category existed in the system

Solution:
1. Changed quest widget category from 'scene' to 'quests'
2. Added 'quests' to category groups in distributeWidgetsByCategory()
3. Added Quests tab creation in auto-arrange logic
4. Updated category sort order to include 'quests' (order 5)

Changes:
- questsWidget.js: category: 'quests' (line 396)
- dashboardManager.js: Added 'quests' to groups object (line 870)
- dashboardManager.js: Added Quests tab creation (lines 942-954)
- dashboardManager.js: Updated categoryOrder to include 'quests': 5 (line 983)

Result:
- Auto-arrange now creates dedicated Quests tab ✅
- Quest widget correctly placed in Quests tab ✅
- Matches default layout structure ✅
- Clean separation of scene info vs quests ✅
 2025-10-30 08:44:33 +11:00
Lucas 'Paperboy' Rose-Winters 9f92c4af87 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
 2025-10-30 08:40:46 +11:00