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

10 Commits

Author SHA1 Message Date
Lucas 'Paperboy' Rose-Winters 95f4ae1848 feat(dashboard): add Recent Events widget for v2 system 
- Add registerRecentEventsWidget() in infoBoxWidgets.js
- Implement notebook-style UI with rings, bullet points, and editable events
- Support max 3 events with + placeholders for new entries
- Parse 'Recent Events: event1, event2, event3' format from infoBox
- Register widget in dashboardIntegration.js
- Add to default layout Scene tab (row 4-5, below location)
- Integrate with tracker system:
  - Add to WIDGET_TO_TAB_MAP (maps to tab-scene)
  - Add to shouldWidgetBeRemoved() rules
  - Add to detectConfigChanges() for re-addition support
- Completes v2 widget migration - all tracker features now have widgets
 2025-11-02 16:21:56 +11:00
Lucas 'Paperboy' Rose-Winters d3c1f0a137 feat(dashboard): integrate tracker editor with widget system 
Implemented hierarchical customization where trackerConfig controls content
(fields, names, AI instructions) and dashboard controls layout (positioning,
tabs, widget instances). Both systems now work together instead of conflicting.

**Widget Integration:**
- userStatsWidget: Respects trackerConfig for stat names and enable/disable
- userStatsWidget: Supports per-widget stat filtering via config.visibleStats
- userStatsWidget: Dynamically generates config options from trackerConfig
- infoBoxWidgets: All widgets (calendar, weather, temperature, clock, location)
  check trackerConfig.infoBox.widgets.*.enabled before rendering
- Widgets show "disabled" state with link to Tracker Settings when field disabled

**Dashboard UI:**
- Added Tracker Settings button to dashboard header (sliders icon)
- Button opens tracker editor modal for global field configuration
- Button positioned next to Edit Layout for clear separation of concerns

**Tracker Editor:**
- Added help text explaining relationship with dashboard system
- Help text clarifies: Tracker Settings = content, Edit Layout = positioning
- Styled with info banner at top of modal

**Migration:**
- Enhanced migrateV1ToV2Dashboard() to respect trackerConfig
- Removes userStats widget if all stats disabled in trackerConfig
- Removes presentCharacters widget if thoughts disabled in trackerConfig
- Ensures smooth upgrade path from v1.x

**CSS:**
- Added .rpg-editor-help styling for tracker editor help banner
- Added .rpg-widget-empty-state for disabled widget messaging
- Info-style banner with icon and clear typography

**Result:**
Two-level customization system:
1. Tracker Settings (global): What fields exist, their names, AI instructions
2. Edit Layout (local): Where widgets appear, per-widget overrides

Files modified:
- src/systems/dashboard/widgets/userStatsWidget.js (+75 lines)
- src/systems/dashboard/widgets/infoBoxWidgets.js (+67 lines)
- src/systems/dashboard/dashboardIntegration.js (+15 lines)
- src/systems/dashboard/dashboardTemplate.html (+4 lines)
- src/systems/dashboard/defaultLayout.js (+22 lines)
- template.html (+6 lines)
- style.css (+58 lines)
 2025-11-02 10:23:36 +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
Lucas 'Paperboy' Rose-Winters 7628bb84c1 feat(dashboard): replace emojis with Font Awesome, add theme support, and styled dialogs 
This commit implements three major improvements to the dashboard system:

1. **Font Awesome Icons for Tabs**
   - Replace emoji tab icons (📊, 🌍, 🎒) with Font Awesome classes
   - Update defaultLayout.js with fa-solid icon classes
   - Add automatic migration for existing saved dashboards with emoji icons
   - Implement migrateEmojiIcons() to convert old emoji icons on load
   - Update fallback icons throughout the system

2. **Custom Theme Support for Dashboard**
   - Replace all --SmartTheme* variables with --rpg-* variables
   - Ensure custom themes (sci-fi, fantasy, cyberpunk) apply to dashboard
   - Update CSS for tabs, buttons, dropdowns, modals, and widget cards
   - Dashboard now respects extension themes instead of main SillyTavern theme

3. **Styled Confirmation Dialogs**
   - Create confirmDialog.js with showConfirmDialog() and showAlertDialog()
   - Support three variants: danger (red), warning (yellow), info (blue)
   - Add keyboard navigation (Enter/Escape) and accessibility features
   - Replace all native confirm() and alert() calls with styled dialogs
   - Add confirmation dialog modal to dashboardTemplate.html

Files Modified:
- src/systems/dashboard/confirmDialog.js (NEW)
- src/systems/dashboard/dashboardManager.js
- src/systems/dashboard/defaultLayout.js
- src/systems/dashboard/tabManager.js
- src/systems/dashboard/dashboardIntegration.js
- src/systems/dashboard/editModeManager.js
- src/systems/dashboard/widgets/inventoryWidget.js
- src/systems/dashboard/dashboardTemplate.html
- style.css
 2025-10-27 20:41:36 +11:00
Lucas 'Paperboy' Rose-Winters 3dd7b017a6 feat(dashboard): implement smart widget scaling and improved auto-layout 
- Add resetWidgetSizesToDefault() to reset all widgets to default sizes before auto-arrange/reset
- Implement continuous expansion algorithm that fills available space up to maxAutoSize limits
- Add visible height detection to prevent widgets expanding beyond viewport (no forced scroll)
- Update all widget defaultSize and maxAutoSize for optimal 1x1 compact layouts
  - Info widgets (calendar, weather, temp, clock): 1x1 default, 1x2 max
  - Location: 2x2 max (was 3x3)
  - Characters: 3x5 max, moved to 'scene' category (eliminates Social tab)
  - User Info: 2x1 max (prevents expansion)
  - User Mood: 1x1 default and max (compact top-right placement)
  - User Attributes: 3x5 max (fills bottom space)
  - User Stats: 3x3 max
- Fix CSS scaling for 1x1 widgets
  - Replace viewport-based units with fixed rem values
  - Reduce icon/graphic sizes to fit with visible text
  - Add explicit gaps and padding for consistent spacing
  - Set line-height: 1 to prevent text overflow
- Reorganize default layout
  - Status tab: User Info (2x1) + Mood (1x1 top right) + Stats + Attributes
  - Scene tab: Info widgets (1x1) + Location + Characters (all on one tab)
  - Inventory tab: Full inventory widget

Auto-arrange and reset now properly size widgets to defaults and expand to fill
available space without exceeding visible area.
 2025-10-23 22:08:04 +11:00
Lucas 'Paperboy' Rose-Winters 380d717b30 feat(dashboard): implement smart auto-layout with expansion and better defaults 
This commit implements 5 major improvements to the dashboard layout system:

**1. Improved Default Layout (defaultLayout.js)**
- Changed from 2 tabs to 3 tabs for better organization:
  - Tab 1 (Status): User widgets only (userInfo, userStats, userMood, userAttributes)
  - Tab 2 (Scene): Scene widgets + characters (calendar, weather, temp, clock, location, presentCharacters)
  - Tab 3 (Inventory): Full inventory widget
- Cleaner separation prevents cramming all widgets on one tab

**2. Widget Max Size Limits (widget definition files)**
- Added maxAutoSize property to all widgets (enforced only during auto-arrange):
  - Info widgets (calendar, weather, temp, clock): { w: 2, h: 3 }
  - Location: { w: 3, h: 3 }
  - presentCharacters: { w: 3, h: 6 } (can expand significantly)
  - Inventory: { w: 3, h: 8 } (full tab)
- Prevents blind expansion while allowing intelligent space filling

**3. Smart Expansion Algorithm (gridEngine.js)**
- Added expansion pass after compaction in autoLayout():
  - Sorts widgets top-to-bottom, left-to-right
  - Tries to expand height first (fills vertical gaps)
  - Then tries to expand width (fills horizontal gaps)
  - Respects maxAutoSize limits from widget definitions
  - Only expands if no collision with other widgets
- Widgets now fill available space instead of staying at default sizes
- Example: presentCharacters expands from 2x3 to 3x6 when space available

**4. Auto-Reflow on Column Change (dashboardManager.js)**
- Modified onColumnsChange callback to auto-layout after column count changes
- When grid transitions (2→3 or 3→2), automatically reflo ws widgets
- Prevents overlap and optimizes for new column count
- User experience: seamless adaptation when console opens/closes

**5. Fixed Grid Height/Scrollbar CSS (style.css)**
- Added flex: 1, overflow-y: auto, min-height: 0 to .rpg-dashboard-grid
- Grid now properly fills available space in dashboard container
- Accounts for bottom buttons (manual update, settings)
- Prevents "fingernail of extra height" that caused scrollbars

**Technical Changes:**
- Passed widget registry to GridEngine for maxAutoSize lookups
- getWidgetMaxSize() helper looks up definitions from registry
- Moved registry initialization before GridEngine construction
- Grid now uses flexbox to fill available vertical space

**User-Facing Improvements:**
- Reset layout creates logical 3-tab structure from the start
- Auto-arrange expands widgets to fill available space intelligently
- Resizing window/console automatically reflows layout
- No more unwanted scrollbars from slight overflow

Fixes cramped layouts, underutilized space, and scrollbar issues.
 2025-10-23 20:03:19 +11:00
Lucas 'Paperboy' Rose-Winters 79582070f0 fix(dashboard): fix attributes overflow and improve tab distribution 
Three critical fixes for dashboard layout:

**1. Fix Attributes Widget Overflow (style.css:1210)**
- Root cause: Default layout had attributes at w:1 but internal grid was 2 columns
- Widget was 1 dashboard column wide, but tried to display 2 internal columns
- Result: 2nd internal column overflowed off-screen to the right
- Fix: Internal grid already correct at 2 columns, just needed default layout fix

**2. Update Default Layout for Attributes (defaultLayout.js)**
- Changed attributes widget from w:1 to w:2 (full width in 2-column grid)
- Moved from x:1 (right column) to x:0 (left column, full width)
- Shifted from row 3 to row 4-5 (needs 2 rows height)
- Updated comment: now "full width, needs 2 columns for 3x2 grid"
- Shifted all scene widgets down by 1 row:
  - Calendar/Weather: row 5→6
  - Temperature/Clock: row 7→8
  - Location: row 9→10
  - Present Characters: row 11→12
- Mood stays at row 3 (left column only)

**3. Improve Multi-Tab Distribution (dashboardManager.js:725-779)**
- Status tab now contains user widgets ONLY (userInfo, stats, mood, attributes)
- Created new "Scene" tab for overflow scene widgets (calendar, weather, etc)
- Scene tab gets order:1, Social gets order:2, Inventory gets order:3
- Prioritizes character status on main tab instead of mixing with scene info

**Layout After Fix:**
```
Row 0: UserInfo (full width)
Row 1-2: UserStats (full width)
Row 3: UserMood (left column)
Row 4-5: UserAttributes (FULL WIDTH - 2 columns for 3x2 grid)
Row 6-7: Calendar + Weather
Row 8-9: Temperature + Clock
Row 10-11: Location
Row 12-14: Present Characters
```

**User-Reported Issues Fixed:**
✅ Attributes no longer overflow columns 3-5 off-screen
✅ Attributes widget properly sized at 2 dashboard columns wide
✅ Status tab prioritizes user widgets over scene info
✅ Scene widgets correctly overflow to separate "Scene" tab

Related: Dashboard v2, Epic 2, Phase 3.2
 2025-10-23 18:48:25 +11:00
Lucas 'Paperboy' Rose-Winters b3a86d4609 feat(dashboard): implement smart widget collision and category-aware layout 
Complete dashboard v2 improvements for better UX and visual consistency:

**1. Push-Aside Drag/Drop (dragDrop.js)**
- Replace swap/revert logic with intelligent reflow algorithm
- When widgets collide on drag, automatically push overlapping widgets down
- All affected widgets repositioned after reflow completes
- Eliminates widget overlap issues

**2. Unified Widget Styling (style.css)**
- Add consistent .rpg-widget container styling for all widgets
- Background: rgba(0,0,0,0.2) for visual separation
- Border-left: 3px highlight for category identification
- Box-shadow and border-radius for depth and polish
- Maintain individual widget decorative styles

**3. Logical Default Layout (defaultLayout.js)**
- Reorganize widgets into semantic clusters with clear comments:
  - USER CLUSTER (top): userInfo → userStats → userMood + userAttributes
  - SCENE CLUSTER (middle): calendar + weather → temp + clock → location
  - SOCIAL CLUSTER (bottom): presentCharacters
- userInfo widget now at top (y=0) as expected
- All positions use rem units for responsive scaling

**4. Category-Aware Auto-Layout (dashboardManager.js)**
- Implement sortWidgetsByCategory() with priority ordering:
  user → scene → social → inventory
- Within user category, specific ordering:
  userInfo → userStats → userMood → userAttributes
- Add preserveOrder option to gridEngine.autoLayout()
- Auto-arrange now uses logical grouping instead of random bin-packing

**5. Multi-Tab Auto-Distribution (dashboardManager.js)**
- Add estimateLayoutHeight() to detect when content exceeds threshold
- Implement distributeWidgetsByCategory() for automatic tab creation:
  - "Status" tab: user + scene widgets
  - "Social" tab: social widgets (if any)
  - "Inventory" tab: inventory widgets (if any)
- Each tab gets category-aware auto-layout
- 80rem height threshold for single-tab limit

**6. Widget Category Metadata (widgets/)**
- Add category field to all widget definitions:
  - userInfo, userStats, userMood, userAttributes: 'user'
  - calendar, weather, temperature, clock, location: 'scene'
  - presentCharacters: 'social'
  - inventory: 'inventory'

**7. Integration Improvements (dashboardIntegration.js)**
- Set default layout on initialization for reset functionality
- Add reset layout button to dashboard header
- Wire up reset button event handler

**8. Core State Management (index.js)**
- Add getInfoBoxData() and setInfoBoxData() to state API
- Ensure info box data persists across sessions

**Technical Details:**
- Rem units throughout for 1080p→4K→mobile responsive scaling
- Reflow algorithm leverages existing gridEngine collision detection
- Category-aware sorting preserves logical relationships
- Multi-tab distribution prevents single-page scroll fatigue
- All changes maintain backwards compatibility with existing layouts

Fixes dashboard issues after rem unit conversion introduced massive positioning bugs.
Users reported widgets overlapping on drag, visual inconsistency, and random auto-arrange behavior.

Related: Epic 2 (Dashboard v2), Phase 3.2
 2025-10-23 18:06:44 +11:00
Lucas 'Paperboy' Rose-Winters 122bb3194a feat(dashboard): add auto-layout button with smart widget packing 
Implements intelligent auto-layout system that efficiently arranges widgets to maximize space usage while respecting panel width constraints.

**Key Features:**
- Smart packing algorithm that sorts by widget area and finds optimal positions
- Respects responsive column count (2-4 columns based on panel width)
- Prefers full-width widgets when possible to eliminate gaps
- Fallback to narrower widths for better vertical packing
- Maintains minimum widget sizes

**Implementation:**
- GridEngine.autoLayout() - Core packing algorithm with collision detection
- DashboardManager.autoLayoutWidgets() - High-level API that re-renders after layout
- Auto-Arrange button in dashboard header (uses fa-table-cells-large icon)
- Event handler wired to call autoLayoutWidgets with preferFullWidth=true

**Algorithm Strategy:**
1. Sort widgets by area (largest first) for efficient packing
2. For each widget, try full-width placement first
3. Find first available position using row-by-row scan
4. If position is too far down, try narrower widths
5. Mark cells as occupied to prevent overlaps

**Testing Notes:**
- Works with current responsive column system (2-4 columns)
- Respects minimum sizes and column constraints
- Re-renders all widgets after repositioning
- Auto-saves layout changes

Part of Epic 2: Dashboard Widget Library
 2025-10-23 14:00:00 +11:00
Lucas 'Paperboy' Rose-Winters 2edb41ebe6 feat(dashboard): implement dashboard data structure (Task 1.3) 
Add dashboard configuration to extensionSettings and create default layout system:

State Management (state.js):
- Added extensionSettings.dashboard with version 2
- gridConfig: columns (12), rowHeight (80px), gap (12px), snapToGrid, showGrid
- tabs: Array of tab objects with widgets
- defaultTab: ID of tab to show on load
- Comprehensive inline documentation of structure

Default Layout Generator (defaultLayout.js):
- generateDefaultDashboard() - Creates 2-tab default layout
  - "Status" tab: userStats, infoBox, presentCharacters (3 widgets)
  - "Inventory" tab: inventory widget (1 widget)
- migrateV1ToV2Dashboard() - Migrates v1.x settings to v2.0
  - Respects user's visibility preferences (showUserStats, etc.)
  - Removes hidden widgets from migrated layout
  - Preserves user data during migration
- validateDashboardConfig() - Validates dashboard structure
- Utility functions: getWidgetCount(), findWidget()

Persistence Layer (persistence.js):
- Auto-migration on loadSettings() for existing users
- Validates dashboard config on load
- Regenerates default if config invalid or missing
- Seamless backward compatibility

Test Suite (defaultLayout.test.html):
- 4 test scenarios with visual verification
- Tests generation, validation, migration, utilities
- Live dashboard JSON preview
- Statistics panel (version, tabs, widgets, grid config)

Features:
- Automatic migration from v1.x hardcoded panel
- Preserves user preferences during migration
- Validates all dashboard configs on load
- Generates sensible defaults for new users

Acceptance Criteria Met:
✓ Dashboard config persists in extensionSettings
✓ Default layout generates on first load
✓ Existing users see migrated layout preserving their preferences
✓ All data structures validated

Epic 1, Task 1.3 Complete (1-2 day estimate, <10 min actual)
 2025-10-23 09:26:10 +11:00