- Move Refresh RPG Info button into rpg-settings-buttons-row
- Add rpg-btn-half class to both buttons for equal width distribution
- Conserves vertical space in the hamburger menu
- Buttons now display side-by-side with flex layout
Remove duplicate "Edit Trackers" button from hamburger menu since there's
already a Tracker Settings button in the dashboard header.
Changes:
- Removed "Edit Trackers" button from template.html hamburger menu
- Updated Settings button to full width (removed .rpg-btn-half class)
- Changed dashboard button ID from 'rpg-dashboard-tracker-settings' to
'rpg-open-tracker-editor' to become the canonical button
- Removed redundant event handler in dashboardIntegration.js that was
clicking the old hamburger button
Benefits:
- Reduces UI clutter in hamburger menu
- Single source of truth for Tracker Settings button (dashboard header)
- Existing code in trackerEditor.js, infoBoxWidgets.js continues to work
via jQuery event delegation on ID 'rpg-open-tracker-editor'
Technical Notes:
- jQuery delegation $(document).on('click', '#rpg-open-tracker-editor', ...)
works for any element with that ID, not just a specific one
- No changes needed to trackerEditor.js or widget disabled state handlers
- Dashboard button is now the canonical "Edit Trackers" trigger
Related: Hamburger menu UI, dashboard header controls
- New setting in Display Options to auto-expand thought bubble
- When enabled, thought bubble displays immediately without clicking icon
- Checkbox added to settings modal with descriptive help text
- Default is off to maintain current behavior
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)
Merged upstream/main (82b9564) which includes:
- Full tracker customization system
- Tracker editor UI component
- Custom stat names in AI prompts
- Multi-line tracker format updates
Conflict resolutions:
- src/core/persistence.js: Kept both dashboard v2 and trackerConfig migrations
- style.css: Accepted upstream responsive calendar styling with clamp()
Both migration systems are now active and will run in sequence.
Features:
- Complete tracker configuration UI with add/remove functionality
- User Stats: Custom stats, status fields, skills section
- Info Box: Configurable widgets (date, weather, temp, time, location, events)
- Present Characters: Custom fields, relationships, character stats, thoughts
- Character-specific stats with color interpolation
- New multi-line format for cleaner AI generation and parsing
- Auto-cleanup of placeholder brackets in AI responses
- Relationship badges with emoji mapping
- Advanced inventory v2 system with multi-location storage
- Responsive mobile support with horizontal scrolling
- Removed legacy format support for cleaner codebase
- Fixed context injection for together mode (no duplication)
- Updated README with new features and configuration guide
Moved the 'Enable Immersive HTML' toggle from main panel to settings:
- Added toggle to settings.html with descriptive notes
- Removed from template.html to free vertical space
- Checkbox ID remains the same so existing JS still works
Benefits:
- Frees up vertical space in dashboard (was causing scrollbars)
- Users can now use full 3x7 grid instead of being limited to 3x6
- Eliminates gap beneath last widget
- Toggle is still accessible but doesn't clutter main panel
- Settings panel is the appropriate place for infrequently-changed options
PROBLEM:
- Existing users with saved off-screen FAB positions can't see buttons
- No way to reset positions without clearing all extension settings
- Salixfire and other users on Xiaomi/other devices need safe positions
SOLUTION:
Added "Reset Button Positions" button in Advanced settings section
IMPLEMENTATION:
1. template.html (lines 241-249):
- Added reset button in Advanced section after Clear Cache button
- Blue-styled button with rotate icon
- Help text explains it resets FAB positions to top-left
2. index.js (lines 361-390):
- Added click handler for reset button
- Resets all 3 FAB positions to safe top-left defaults:
* Mobile toggle: top + 20px, left: 12px
* Refresh: top + 80px, left: 12px
* Debug: top + 140px, left: 12px
- Saves settings immediately
- Applies CSS positions to visible buttons (no page refresh needed)
- Shows success toast notification
3. style.css (lines 2057-2083, 4123-4125):
- Added .rpg-btn-reset-fab styles matching clear cache pattern
- Blue color scheme (vs red for destructive clear cache)
- Same sizing, padding, transitions as other buttons
- Mobile responsive font-size with clamp()
USAGE:
Users experiencing off-screen buttons can now:
1. Open RPG Companion settings (gear icon)
2. Scroll to Advanced section
3. Click "Reset Button Positions"
4. All FAB buttons instantly move to safe top-left positions
This fixes the issue for Salixfire and any other users who:
- Have buttons saved in off-screen positions
- Can't scroll to find buttons
- Need to reset without clearing all settings
Works immediately without page refresh or extension reload.
Add debug mode checkbox to RPG Companion Settings popup (Display Options section).
Users can enable debug mode to show the mobile-friendly debug panel with parser logs.
This was missing from the previous commit.
The debug toggle was incorrectly added to settings.html (SillyTavern Extensions tab).
It should be in template.html (RPG Companion Settings popup) where all the
other extension settings are.
Changes:
- template.html: Added debug mode checkbox in Display Options section
- index.js: Added event listener and initial state setter
- settings.html: Removed incorrect debug toggle placement
Now users can find the debug toggle by clicking the gear icon in the RPG panel,
under Display Options, right below "Show Plot Progression Buttons".
- Add inventory section to template.html between Thoughts and bottom controls
- Wire up renderInventory() to all event handlers (message received, character changed, swipes)
- Initialize inventory container reference and event listeners in index.js
- Add showInventory toggle checkbox to settings with visibility control
- Update layout.js to handle inventory section and divider visibility
- Add renderInventory parameter to updateRPGData for separate mode support
- Update state.js and config.js with inventory container and showInventory setting
Inventory is now fully integrated as a visible, interactive panel section that persists across all user interactions.
Completely refactored the RPG Companion settings popup with professional
ES6 architecture and mobile-first CSS, matching the dice roller redesign.
**CSS Changes (style.css:2585-2773):**
- Mobile-first responsive design with clamp() and min() functions
- CSS custom properties for fluid scaling across viewports
- min-height: 0 on flex children for proper max-height constraints
- ::before pseudo-element for backdrop (removed overlay div)
- State-based animations with .is-open and .is-closing classes
- 75vh max-height with proper viewport centering
- Touch-friendly 44px minimum tap targets
- Neutral 80% opaque background for visibility
**HTML Changes (template.html:71-214):**
- Added ARIA attributes: role="dialog", aria-modal="true", aria-labelledby
- Semantic <header> element for settings header
- aria-hidden="true" on all decorative icons
- Removed .rpg-settings-popup-overlay div (now CSS ::before)
- Improved accessibility throughout
**JavaScript Changes (index.js:985-1142):**
- Created SettingsModal ES6 class with state management
- open() and close() methods with animation control
- updateTheme() for real-time theme switching
- Private _applyCustomTheme() and _clearCustomTheme() methods
- isAnimating flag prevents double-clicks
- Focus management for accessibility
- Backwards compatible wrapper functions preserve existing API
- Updated event handlers with backdrop click support
- Removed obsolete overlay click handler
**Benefits:**
- Settings modal now fully functional on mobile devices
- Proper scrolling with content overflow
- Smooth open/close animations
- Professional class-based architecture
- Complete accessibility support
- Theme support maintained
- No breaking changes to existing code
BREAKING CHANGES: Dice roller now uses modern ES6 class architecture
Features:
- Mobile-first CSS with fluid responsive units (clamp, min, max)
- ES6 DiceModal class with proper state management (IDLE, ROLLING, SHOWING_RESULT)
- Semantic HTML with ARIA attributes for accessibility
- CSS state classes (.is-open, .is-closing, .is-animating)
- Touch-friendly 44px minimum tap targets
- Desktop enhancement with @media (min-width: 1001px)
Fixes:
- Fixed mobile viewport overflow with min-height: 0 on flex children
- Reduced max-height to 70vh for guaranteed mobile fit
- Removed all jQuery .show()/.hide() inline style injections
- Removed !important CSS hacks from mobile media query
- Fixed transparent modal background (80% opaque neutral gray)
- Darkened backdrop overlay (85% opaque black)
Technical:
- Backdrop uses ::before pseudo-element (no wrapper div needed)
- Flattened HTML structure with proper semantic elements
- Backwards compatible wrapper functions preserved
- Grid layout for inputs (stacked mobile, side-by-side desktop)
- Proper CSS specificity hierarchy (no !important needed)
- Removed .rpg-dice-popup-overlay div dependency
Accessibility:
- role="dialog" with aria-modal="true"
- aria-labelledby for dialog title
- aria-live regions for dynamic content
- aria-busy for loading states
- Proper focus management on open/close
- Add collapse/expand toggle button to side panels (left/right positions)
- Button shows on the outside edge of the panel with chevron icon
- Panel collapses to 40px vertical bar, button icon direction updates based on position
- Fix inventory box stretching issue by adding max/min height constraints
- Inventory items now scroll internally with flex layout
- Remove bottom margin from Enable Immersive HTML toggle
- Add top margin to Manual Update button to maintain spacing
Mingyu
Spicy_Marinara
Andy Mauragis
Lucas 'Paperboy' Rose-Winters