Commit Graph

470 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 bf44949624 feat(dashboard): implement bidirectional tracker-widget sync with re-addition
- Add previousTrackerConfig tracking in dashboardManager
- Implement detectConfigChanges() to detect disabled→enabled transitions
- Implement addEnabledWidgets() with smart tab placement using WIDGET_TO_TAB_MAP
- Update onTrackerConfigChanged() to handle both removal and re-addition
- Auto-layout affected tabs after widget changes
- Re-render current tab when widgets are added to show them immediately
- Prevent duplicate widgets per tab with type-based checking

Closes the bidirectional sync loop - widgets now automatically:
1. Disappear when fields are disabled in tracker settings
2. Reappear in appropriate tabs when fields are re-enabled
2025-11-02 14:54:55 +11:00
Lucas 'Paperboy' Rose-Winters 339413a6fa feat(dashboard): implement reactive tracker-dashboard integration
Replaced surface-level "disabled" messages with true reactive integration.
When tracker editor saves config changes, dashboard now automatically
updates without page reload - removing disabled widgets and refreshing
remaining ones with new field names/settings.

**Event-Based Architecture:**
- trackerEditor.js dispatches 'rpg:trackerConfigChanged' custom event
- dashboardManager.js subscribes to event and reacts to changes
- Decoupled, extensible, browser-native event system

**Dashboard Reactive Methods:**
- onTrackerConfigChanged(config): Main handler coordinating refresh flow
- removeDisabledWidgets(config): Removes widgets with disabled fields
  - Cleans up DOM, drag/resize handlers, state
  - Removes from tab.widgets arrays
- shouldWidgetBeRemoved(type, config): Decision logic per widget type
  - calendar → remove if date disabled
  - weather → remove if weather disabled
  - temperature → remove if temperature disabled
  - clock → remove if time disabled
  - location → remove if location disabled
  - userStats → remove only if ALL stats disabled
  - presentCharacters → remove if thoughts disabled
- refreshAllWidgets(): Re-renders all remaining widgets with new config

**Widget Auto-Removal Flow:**
1. User disables field in tracker editor
2. Clicks "Save & Apply"
3. Event fires → dashboard receives notification
4. Disabled widgets removed from all tabs
5. Affected tabs auto-layout to fill space
6. Remaining widgets re-render with new config
7. Layout saved automatically

**Removed Surface-Level Bandaid:**
- Deleted checkFieldEnabled() from infoBoxWidgets.js (-36 lines)
- Removed all checkFieldEnabled() calls from widget renders (-25 lines)
- Removed empty state message from userStatsWidget.js (-8 lines)
- Removed tracker settings link handler (-7 lines)
- Widgets no longer show "⚠️ Field disabled" messages
- Dashboard handles removal elegantly instead

**Result:**
True reactive integration. Disable "Arousal" → instantly disappears from
all userStats widgets. Disable "Date" → calendar widget removed and tab
auto-layouts. Rename "Health" to "HP" → updates instantly everywhere.
All changes happen immediately without page reload.

Files modified:
- src/systems/dashboard/dashboardManager.js (+129 lines)
- src/systems/ui/trackerEditor.js (+11 lines)
- src/systems/dashboard/widgets/infoBoxWidgets.js (-67 lines)
- src/systems/dashboard/widgets/userStatsWidget.js (-21 lines)
2025-11-02 10:35:35 +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 8240c77069 merge: integrate upstream tracker customization system
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.
2025-11-02 09:57:15 +11:00
Spicy_Marinara 82b9564e07 Remove IMPLEMENTATION_COMPLETE.md - no longer needed 2025-11-01 23:28:51 +01:00
Spicy_Marinara ed81f2898a Remove TRACKER_CUSTOMIZATION_PLAN.md - implementation complete 2025-11-01 23:27:52 +01:00
Spicy_Marinara 4abceb48a2 Fix: Rewrite updateCharacterField for new multi-line format
- Completely rewrote updateCharacterField function to work with new multi-line Present Characters format
- Now parses character blocks by '- Name' lines instead of pipe-separated format
- Handles updating Details, Relationship, and Stats lines correctly
- Supports all field types: name, emoji, custom fields, relationship, character stats
- Creates new character blocks if character doesn't exist
- Fixes bug where edits would revert because old format logic couldn't parse new format
- Users can now successfully edit all Present Characters fields
2025-11-01 23:26:36 +01:00
Spicy_Marinara 897c0278fb Major update: Full tracker customization system
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
2025-11-01 20:19:35 +01: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
Lucas 'Paperboy' Rose-Winters ad2efa55f0 merge: resolve conflicts with upstream/main
Merged upstream/main into feat/v2-widget-dashboard-system branch.

Key conflict resolutions:
- index.js: Added renderQuests() to Dashboard v2 fallback rendering
- state.js: Combined memoryMessagesToProcess with Dashboard v2 config
- apiClient.js: Combined refreshDashboard() and renderQuests() calls
- style.css: Kept Dashboard v2 mobile refresh button styles

New features from upstream:
- Quest tracking system (renderQuests, quests.js)
- Memory recollection system
- Lorebook limiter feature
- Various parser and prompt builder improvements
2025-10-30 08:26:19 +11:00
Lucas 'Paperboy' Rose-Winters e5e3e43aa1 perf(dashboard): disable console logging in hot-path files
Add DEBUG flag to disable console.log/warn in critical performance paths
while preserving console.error for actual errors. This eliminates ~80ms
of logging overhead during tab switches on mobile devices.

Modified files (hot-path only):
- dashboardManager.js (orchestrator, called for every widget)
- editModeManager.js (disableContentEditing on tab switch)
- gridEngine.js (positioning calculations for every widget)
- dragDrop.js (initWidget called for every widget)
- resizeHandler.js (initWidget called for every widget)

Performance impact:
- Before: ~40 console.log calls per tab switch (10 widgets)
- After: 0 console calls (no-op functions)
- Measured improvement: Tab switching now fast enough on mobile
  (slight slowdown during screen recording is expected overhead)

The DEBUG flag can be set to true for debugging when needed.
This approach avoids syntax errors from commenting multi-line statements.

Total optimization across all commits:
- Phase 1: Removed redundant global disable (2 queries saved)
- Phase 2: Replaced inline disabling with single global pass (18 queries saved)
- Phase 3: Disabled console logging (80ms saved on mobile)
- Result: ~200ms improvement on mobile devices
2025-10-30 08:07:53 +11:00
Lucas 'Paperboy' Rose-Winters 8abaa740c7 perf(dashboard): optimize content editing disable to use single global pass
Replace per-widget inline disabling (2N queries) with single global
disable pass after all widgets rendered (2 queries total). This reduces
DOM queries from 20 to 2 for a typical 10-widget tab, providing a 10x
performance improvement on mobile devices.

Changes:
- Remove inline querySelectorAll from renderWidgetContent()
  (was running 2 queries per widget during render loop)
- Add single synchronous disableContentEditing() call in onTabChange()
  after all widgets rendered (2 queries total)
- Remove redundant disableContentEditing() call from syncAllControls()
  (was duplicate of enterEditMode() call)

Performance impact:
- Before: 22 queries (20 inline + 2 global redundant)
- Phase 1: 20 queries (20 inline only, removed redundant global)
- Phase 2: 2 queries (2 global only, removed inline)
- Result: 10x reduction in DOM queries per tab switch

On mobile devices with 2-4x slower DOM performance, this should
reduce tab switching delay from 200-500ms to 20-50ms.
2025-10-30 07:42:26 +11:00
Lucas 'Paperboy' Rose-Winters 4984c02fd1 perf(dashboard): remove redundant content editing disable on tab switch
Remove global disableContentEditing() call in onTabChange() as it's
redundant - inline disabling in renderWidgetContent() already handles
all newly rendered widgets. This eliminates 2 global DOM queries per
tab switch, improving mobile performance by ~30ms.

The double-disable pattern was causing 22 DOM queries per tab switch
(20 inline + 2 global), which on mobile devices (2-4x slower DOM)
resulted in 200-500ms delays.

Root cause analysis:
- Commit a330ea9 added inline disabling per widget (necessary)
- Commit acb6da0 added global disabling in onTabChange (redundant)
- Mobile DOM queries are 2-4x slower than desktop
- querySelectorAll() on entire container is expensive

Fix removes the redundant global disable while keeping the necessary
inline disabling that runs when each widget is rendered.
2025-10-29 23:00:10 +11:00
Lucas 'Paperboy' Rose-Winters d3b0eccfe8 fix(resize): fix excessive sensitivity by converting rem to pixels
The resize handler was mixing rem and pixel units without proper conversion,
causing widgets to fly wildly off screen with small mouse movements.

Root cause:
- rowHeight and gap were stored as rem values (e.g., 5 rem, 0.75 rem)
- Delta calculations divided pixel movements by rem values directly
- This caused ~14x excessive sensitivity

Fix:
- Add remToPixels() conversions for gap and rowHeight before calculations
- Use pixel values (gapPx, rowHeightPx) in all delta-to-grid-unit conversions
- Matches the correct pattern used in drag handler and gridEngine.snapToCell()

Example:
- Before: 20px movement / 5 rem = 3.48 grid units (way too much!)
- After: 20px movement / 80px = 0.22 grid units (smooth and predictable)

Fixes both desktop and mobile resize sensitivity issues.

File: src/systems/dashboard/resizeHandler.js
Lines: 333-343 (updateResizeSize method)
2025-10-29 22:15:34 +11:00
Lucas 'Paperboy' Rose-Winters acb6da023a feat(dashboard): add confirmations, fix UX issues, and optimize grid rendering
BREAKING CHANGE: applyDashboardConfig() now accepts optional second parameter for optimization

Add auto-arrange confirmation dialog:
- Add warning popup before auto-arranging widgets across all tabs
- Follows same pattern as reset layout confirmation
- Prevents accidental destructive operations

Fix text selection interference:
- Apply user-select: none to entire .rpg-widget in edit mode
- Previously only applied to .rpg-widget-content
- Prevents text selection when dragging widgets, especially in attribute boxes
- Improves drag interaction on both desktop and mobile

Fix edit controls visibility:
- Add CSS rule to completely hide edit controls outside edit mode
- Controls now properly hidden when not in edit mode
- Settings button (⚙) kept for future widget configuration

Fix input disabling in edit mode:
- Call disableContentEditing() after tab switches in onTabChange()
- Call disableContentEditing() in syncAllControls()
- Ensures text fields remain non-editable in edit mode after all operations

Fix resize grid background rendering:
- Copy drag handler grid logic EXACTLY to resize handler
- Use gridEngine.calculateGridHeight(widgets) instead of manual calculation
- Add proper remToPixels() conversions for gap and rowHeight
- Pass widgets array through initWidget() and startResize()
- Grid now renders correctly during resize, matching drag behavior

Optimize layout operations:
- Add skipInitialSwitch option to applyDashboardConfig()
- Prevents redundant clearGrid() calls during resetLayout()
- Defers rendering until after layout calculations complete

Files modified:
- dashboardIntegration.js: Auto-arrange confirmation
- dashboardManager.js: skipInitialSwitch option, input disabling, widgets array
- editModeManager.js: Input disabling in syncAllControls()
- resizeHandler.js: Grid rendering fixes with proper unit conversions
- style.css: Text selection prevention, edit controls visibility
2025-10-29 21:17:48 +11:00
Spicy_Marinara 87cfcb6946 Fix: Use custom stat names in AI prompt instructions
- Updated generateTrackerInstructions() to use extensionSettings.statNames
- AI now receives custom stat names in format specification
- Ensures consistency between displayed names, tracker data, and AI instructions
2025-10-29 10:17:00 +01:00
Lucas 'Paperboy' Rose-Winters 79d6fcbfe7 chore: remove investigation documentation file 2025-10-29 19:34:18 +11:00
Lucas 'Paperboy' Rose-Winters 9fbc35dbd9 refactor(dashboard): move controls to overlays and fix mobile/positioning issues
BREAKING CHANGES:
- Resize handles and edit controls now render in separate overlay containers
- This prevents widget overflow and scrollbar issues

Major Changes:

Overlay System Refactor:
- Create overlay containers for resize handles and edit controls
- Append handles/controls to overlays instead of widget DOM
- Fix position calculations using offsetLeft/Top instead of getBoundingClientRect
- Add position sync after resize/drag/reposition operations
- Add cleanup methods when switching tabs

Mobile Fixes:
- Add pointer/touch event support for Add Widget button
- Fix file upload trigger for iOS/Android compatibility
- Move modals to document.body with flex centering
- Fix modal button font-sizes (rem-based instead of vw)
- Add mobile-responsive styling for widget dialog

Bug Fixes:
- Fix getActiveTabId() calls (use activeTabId property instead)
- Fix file input disabled state (exclude type="file" from edit mode disable)
- Fix Add Widget modal registry.getAll() destructuring (objects not arrays)
- Fix edit/delete button hover (keep visible when hovering buttons)
- Fix reset layout to restore deleted widgets (regenerate default layout)

UI Improvements:
- No more scrollbars from resize handles
- Consistent button visibility in edit mode
- Touch-friendly button sizes on mobile (44px min-height)
- Single-column widget grid on mobile
- Proper z-index stacking for overlays

Files Changed:
- dashboardManager.js: Overlay container management, sync methods
- resizeHandler.js: Append to overlay, update positioning
- editModeManager.js: Append to overlay, hover behavior, sync/cleanup
- dashboardIntegration.js: Mobile touch events, file upload, modal fixes
- dashboardTemplate.html: File input accessibility
- style.css: Modal button font-sizes, mobile optimizations
- RESIZE_HANDLES_INVESTIGATION.md: Technical investigation documentation
2025-10-29 19:07:01 +11:00
Spicy_Marinara 13019c65ee Fix: Strip thinking tags from parser and persist tracker data on page refresh
- Added removal of <think> and <thinking> tags from AI responses before parsing
- Fixed Info Box display to use committedTrackerData as fallback after page refresh
- Fixed Present Characters display to use committedTrackerData as fallback after page refresh
- Fixed 4-part character format handling in updateCharacterField to preserve thoughts
- Ensures Recent Events and all tracker data persist correctly across page reloads
2025-10-28 18:07:15 +01:00
Lucas 'Paperboy' Rose-Winters ddb2f8c222 fix(modal): resolve button font-size CSS cascade conflict
- Scope modal button selectors to prevent dashboard styles from overriding
- Use .rpg-modal and .rpg-confirm-modal prefixes for higher specificity
- Desktop modal buttons: 1rem (consistent, readable)
- Mobile modal buttons: 1.05rem (touch-friendly)
- Dashboard buttons unchanged: keep 1.4vw viewport-based sizing
- Fixes buttons being too large on desktop (~27px) and too small on mobile (~5px)
2025-10-28 18:45:47 +11:00
Lucas 'Paperboy' Rose-Winters ded1b62963 fix(mobile): add explicit font-size to confirmation dialog body text
Add explicit font-size using rem units to confirmation dialog body text
to ensure it's readable on all screen sizes.

Changes:
- .rpg-confirm-body p: Add font-size: 1rem (base size)
- Mobile (@max-width: 768px): Override to 0.95rem for mobile screens

Previously, the body text had no explicit font-size and was inheriting
from parent, causing it to appear tiny on mobile devices. Now uses
proper rem-based sizing that scales appropriately.
2025-10-28 15:12:58 +11:00
Lucas 'Paperboy' Rose-Winters a888c5ccd6 fix(mobile): apply same centering and viewport fixes to dice roller modal
Apply the same mobile modal fixes to the dice roller that were applied
to the confirmation dialogs:

1. Move modal to document.body on first open
2. Use dynamic viewport height (dvh) for mobile browsers

Changes:

1. src/systems/ui/modals.js - DiceModal.open():
   - Check if modal parent is not already document.body
   - Move modal to document.body to escape any container constraints
   - Ensures proper viewport-level positioning and z-index stacking

2. style.css - Add mobile media query for dice popup:
   - Set height: 100dvh on .rpg-dice-popup for mobile
   - Update --modal-max-height to 70dvh (from 70vh)
   - Apply dynamic height to .rpg-dice-popup-content
   - Accounts for mobile browser chrome (address bar, toolbars)

Result:
- Dice roller modal now properly centered on mobile viewport
- Handles dynamic mobile browser toolbars correctly
- Consistent behavior with confirmation dialogs
2025-10-28 14:55:59 +11:00
Lucas 'Paperboy' Rose-Winters 9e09b57618 fix(mobile): add flex centering to modal container and use dvh for viewport
Fix modal centering on mobile by adding flexbox properties to the
document-body-modals container and using dynamic viewport height.

Root cause: The container had position:fixed and inset:0 but was missing
display:flex, align-items:center, and justify-content:center. Without these,
the modal child wasn't being centered within the container.

Additionally, mobile browsers have dynamic toolbars (address bar, etc.) that
affect viewport height. Standard vh units don't account for this, causing
modals to appear off-center when toolbars are visible/hidden.

Changes:

1. confirmDialog.js - Both showConfirmDialog() and showAlertDialog():
   - Add 'display: flex; align-items: center; justify-content: center;'
     to bodyModalsContainer.style.cssText
   - Container now properly centers its modal child

2. style.css - Mobile media query (@max-width: 768px):
   - Add height: 100dvh to #document-body-modals and .rpg-modal
   - Dynamic viewport height (dvh) adjusts for mobile browser chrome
   - Add max-height: 85dvh fallback alongside 85vh
   - Ensures modal uses full available viewport height

Result:
- Modals now properly centered in mobile viewport
- Accounts for dynamic mobile browser toolbars
- Works across different mobile browsers and orientations
2025-10-28 11:14:51 +11:00
Lucas 'Paperboy' Rose-Winters 0fbdf41678 fix(mobile): move modals to document.body to escape panel DOM constraints
Fix mobile modal positioning by moving modals to document.body on first use.

Root cause: Modals were nested inside .rpg-panel which has 'transform' in
its transition property (line 40 of style.css). This creates a containing
block that constrains position:fixed children to the panel viewport instead
of the document viewport, causing modals to be cut off on mobile.

Changes:

1. confirmDialog.js - Modified showConfirmDialog() and showAlertDialog():
   - Check if modal is already in document.body container
   - Create 'document-body-modals' container at body level (once)
   - Move modal to body container to escape panel constraints
   - Container has pointer-events: none to pass clicks through
   - Individual modals have pointer-events: auto to receive clicks

2. style.css - Added pointer-events: auto to .rpg-modal:
   - Ensures clicks work when modal is in pointer-events: none container

Result:
- Modals now render over entire SillyTavern viewport
- Properly centered with full z-index stacking
- No longer constrained by panel's transform/stacking context
- Works correctly on both desktop and mobile
2025-10-28 10:34:49 +11:00
Lucas 'Paperboy' Rose-Winters 92af1a4942 fix(mobile): improve modal positioning and scaling on mobile devices
Fix mobile modal issues where popups appeared too high, were cut off,
and didn't scale properly for small screens:

Changes:
1. Add 1rem padding to .rpg-modal overlay to prevent content from
   touching screen edges

2. Update .rpg-confirm-content width calculation from 90% to
   calc(100% - 2rem) to account for modal padding

3. Add comprehensive mobile media query (@max-width: 768px) with:
   - Better max-height (85vh instead of 80vh) to account for mobile
     browser chrome (URL bar, toolbars)
   - Prevent horizontal overflow with calc(100vw - 2rem)
   - Scale down padding (1rem → 0.75rem) for better space utilization
   - Scale down icon (1.75rem → 1.5rem) and header fonts (1.5rem → 1rem)
   - Touch-friendly button sizing (44px min-height for accessibility)

Both confirmation dialogs and dice roll popups now display properly
centered with appropriate spacing and scaling on mobile viewports.
2025-10-27 23:05:11 +11:00
Lucas 'Paperboy' Rose-Winters fb25277db4 fix(dashboard): replace all hardcoded emoji icons with Font Awesome
Fix inconsistent tab icon rendering by replacing hardcoded emoji icons
throughout the codebase with Font Awesome equivalents:

- distributeWidgetsByCategory(): Replace emojis in auto-layout tab creation
  - Status tab: 📊 → fa-solid fa-user
  - Scene tab: 🌍 → fa-solid fa-map
  - Social tab: 👥 → fa-solid fa-users
  - Inventory tab: 🎒 → fa-solid fa-bag-shopping

- applyDashboardConfig(): Update fallback icon from 📄 → fa-solid fa-file

These hardcoded emojis bypassed the migration system, causing icons to
disappear after operations like auto-arrange, reset layout, or page refresh.

Resolves inconsistent icon rendering across all dashboard operations.
2025-10-27 22:25:03 +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 c39d348a81 fix(dashboard): properly filter dropdown menu buttons based on pre-hidden visibility
- Store button visibility state before hiding them in overflow/compact modes
- Use stored wasVisible data attribute to filter which buttons to show
- Prevents hidden buttons (like Done) from appearing inappropriately
- Also prevents visible buttons from being excluded when they're hidden by overflow manager
- Full mode now checks inline style to respect template display:none
2025-10-27 20:06:25 +11:00
Spicy_Marinara a063ae780b Add editable stat names, fix clear cache for quests, update tracker text to use custom stat names 2025-10-27 09:45:50 +01:00
Lucas 'Paperboy' Rose-Winters a330ea9b98 fix(dashboard): disable text editing on widget re-renders in edit mode
Ensure contenteditable and input fields remain disabled when widgets
are re-rendered during edit mode (e.g., during auto-layout, cross-tab
moves, or tab switches). This prevents text editing from interfering
with drag operations.

Previously, disableContentEditing() was only called when entering edit
mode, so any widgets rendered afterward would have editable fields again.
Now, renderWidgetContent() checks if in edit mode and disables editing
on newly rendered widgets.
2025-10-27 16:10:08 +11:00
Lucas 'Paperboy' Rose-Winters f566ad1d93 feat(dashboard): implement responsive header with tab scrolling and overflow menus
Add comprehensive responsive header system with Google-quality UX:

Tab Navigation:
- Add TabScrollManager for horizontal scrolling tabs
- Left/Right navigation arrows appear when scrollable
- Edge fade indicators show more content exists
- Smooth scroll behavior with momentum
- Progressive sizing: full → icon+name → icon-only
- Automatic scroll position tracking

Button Overflow System:
- Add HeaderOverflowManager with ResizeObserver
- Three responsive modes based on container width:
  * Full mode (>900px): all buttons visible
  * Overflow mode (500-900px): priority + "More" (⋮) menu
  * Compact mode (<500px): priority + hamburger (☰) menu
- Priority buttons (Lock + Edit) always visible
- Smooth transitions between modes

Dropdown Menu:
- Professional slide-down animation
- Full keyboard navigation (arrows, Home, End, Escape)
- Click-outside-to-close behavior
- ARIA attributes for accessibility
- Focus management and trap
- Auto-refresh on edit mode changes
- High z-index (10003) ensures visibility above all UI

Cross-Tab Widget Dragging:
- Add collision detection for widget placement
- Implement moveWidgetToTab() with collision avoidance
- Find available positions in target tab automatically
- Update dragDrop.js to detect tab hover
- Visual feedback with tab highlight on hover
- Proper widget positioning after cross-tab move

Additional Features:
- Sort Tab button for current-tab-only auto-layout
- Mobile optimizations with compact buttons
- Responsive breakpoints at 768px and 480px
- Hardware-accelerated animations
- Touch-friendly 44px minimum targets

Files changed:
- New: tabScrollManager.js, headerOverflowManager.js
- Modified: dashboardTemplate.html, dashboardIntegration.js
- Modified: dashboardManager.js, dragDrop.js, style.css
- Modified: editModeManager.js (lock state default)
2025-10-27 14:48:38 +11:00
Lucas 'Paperboy' Rose-Winters 45c5853dcb feat(dashboard): improve mobile inventory UX and fix desktop viewport overflow
Mobile Inventory Improvements:
- Add icon-based sub-tabs (user/box/building) with responsive labels
- Desktop shows icon + label, mobile shows icon-only for compact layout
- Add proper scroll containers for inventory content with flex layout
- Increase touch drag delay from 150ms to 500ms to prevent accidental widget moves during scrolling

Widget Content Fixes:
- Add max-height constraint to .rpg-widget to prevent grid cell overflow
- Add flex properties (flex: 1, min-height: 0, overflow: auto) to all widget content
- Ensures content scrolls internally instead of expanding widget bounds
- Fix .rpg-inventory-widget to use flex properties instead of height: 100%

Layout Fixes:
- Change characters widget default size from 2x3 to 2x2 for better viewport fit
- Remove excess spacing from dashboard container (gap: 0.75rem)
- Remove vertical padding from dashboard header
- Eliminates desktop scrollbar caused by cumulative spacing

All widgets now fit properly within viewport on both desktop and mobile.
2025-10-27 10:18:07 +11:00
Spicy_Marinara e0164a9ca9 Fix tracker commit logic to prevent overwriting on refresh 2025-10-26 23:25:05 +01:00
Spicy_Marinara 141a3f4bec Fix extension loading, enhance theming, add horizontal scrolling, improve emoji parsing, rename to Main Quests 2025-10-26 22:31:21 +01:00
Lucas 'Paperboy' Rose-Winters 04bb52ed71 feat(dashboard): improve mood widget readability with balanced two-line layout
- Increase conditions font size from 0.45rem to 0.6rem (33% larger)
- Reduce mood emoji size from 1rem to 0.9rem for better proportion
- Add font-weight: 600 to mood for better hierarchy
- Improve line-height from 1 to 1.2 for readability
- Reduce -webkit-line-clamp from 3 to 2 lines for conditions
- Add slight opacity (0.9) to conditions for visual separation
- Update onResize scaling to maintain balanced proportions (1.4rem / 0.9rem for larger widgets)
- Increase mobile conditions size to 0.7rem with 1.3 line-height

Result: Conditions text is now much more readable while maintaining good visual balance
with the mood emoji in the compact 1x1 widget.
2025-10-26 21:23:11 +11:00
Lucas 'Paperboy' Rose-Winters bd56f24c45 fix(dashboard): correct auto-layout boundary check to eliminate empty space at bottom
- Changed boundary check from >= to > to allow widgets to properly fill viewport
- Updated viewport calculation to use grid container's clientHeight directly
- Added gap compensation in row calculation to account for last row having no trailing gap
- Widgets now expand to use all available vertical space without leaving unused rows

The issue was that y + h represents the row AFTER the widget ends, not the last
occupied row, so >= was too conservative. With maxVisibleRows=7 (rows 0-6), a
widget at y=3 can now expand to h=4 (rows 3,4,5,6) instead of being blocked.
2025-10-26 16:45:49 +11:00
Lucas 'Paperboy' Rose-Winters 6af499b07a fix(dashboard): resolve presentCharacters widget styling and auto-layout issues
- Remove double left border accent on character cards by hiding inner border when inside widget container
- Increase maxAutoSize width from 3 to 4 columns to support large displays
- Fix viewport height calculation to use visible area instead of scrollable container height
- Change auto-layout boundary check from > to >= to prevent widgets extending beyond viewport
- Add Done button for cleaner edit mode exit UX
- Wire up Done button event listener in dashboardIntegration
2025-10-26 14:52:02 +11:00
Lucas 'Paperboy' Rose-Winters 8317471922 fix(dashboard): improve edit mode UX and remove redundant weather subtitle
- Disable contenteditable fields in edit widget mode to prevent keyboard popup
- Re-enable content editing when exiting edit mode
- Change button tooltip from 'Toggle Edit Mode' to 'Toggle Edit Widget Mode' for clarity
- Remove redundant 'WEATHER' subtitle from weather widget (only show single editable field)
- Prevents layout shift on mobile when keyboard appears during widget arrangement
2025-10-26 10:29:55 +11:00
Lucas 'Paperboy' Rose-Winters f84cbf794a feat(dashboard): add lock button to prevent accidental widget movement
- Add lock/unlock button to dashboard header (always visible)
- Lock state prevents dragging in both normal and edit modes
- Lock state prevents resizing in edit mode
- Icon changes: lock-open (unlocked) ↔ lock (locked)
- Hide resize handles and prevent grab cursor when locked
- Lock state persists across edit mode toggles
- Integrate lock checks in DragDropHandler and ResizeHandler
- Pass editManager reference to drag/resize handlers for lock state access
2025-10-25 19:50:17 +11:00
Lucas 'Paperboy' Rose-Winters d6c5101a7e feat(dashboard): implement movement threshold for widget dragging to allow clicks
- Add 5px mouse movement threshold before drag starts
- Prevent dragging when clicking interactive elements (contenteditable, input, button, etc.)
- Store pending drag state and wait for movement before preventing default behavior
- Allow normal click/edit interactions on widget content
- Touch behavior unchanged (existing 150ms delay still works)
- Fixes issue where contenteditable fields and buttons were not clickable
2025-10-25 19:32:29 +11:00
Lucas 'Paperboy' Rose-Winters 101404d617 fix(dashboard): prevent resize handle overlap and clipping
- Change .rpg-widget overflow from hidden to visible to prevent handle clipping
- Reduce horizontal handle offset from -6px to -3px to prevent overlap
- Keep vertical offset at -6px (adequate gap between rows)
- Handles now have 6px clearance when widgets are side-by-side (12px gap - 3px - 3px)
2025-10-25 19:04:36 +11:00
Lucas 'Paperboy' Rose-Winters 4ea1c55a75 fix(dashboard): correct rem-to-pixel conversion for drag overlay grid cells
- Convert rowHeight and gap from rem to pixels using gridEngine.remToPixels()
- Fix highlightGridCells() to use pixel values for positioning and sizing
- Fix showGridOverlay() to calculate container height in pixels
- Resolves issue where green highlight boxes rendered as tiny squished lines
- Follows same conversion pattern used in gridEngine.getPixelPosition()
2025-10-25 18:51:20 +11:00
Lucas 'Paperboy' Rose-Winters e031643cd5 feat(dashboard): implement column-aware defaultSize for optimal 3-4 col widget layout
PROBLEM:
- Reset/auto-layout placed userInfo at 1x1, mood at [1,0] blocking expansion
- Expansion pass couldn't grow userInfo to 2x1 because mood already occupied column 1
- Result: 1x1 userInfo, 1x1 mood, empty space at [2,0] in 3-col layout

ROOT CAUSE:
- Static defaultSize 1x1 → placement happens first
- Expansion happens second, but mood blocks userInfo horizontal growth

SOLUTION - Column-aware defaultSize:
1. userInfoWidget.js: defaultSize now function of columns
   - Mobile (≤2 col): { w: 1, h: 1 } (compact, mood beside it)
   - Desktop (3-4 col): { w: 2, h: 1 } (starts at target size)

2. dashboardManager.js: resetWidgetSizesToDefault() supports function defaultSize
   - Calls defaultSize(columns) if function, otherwise uses static object
   - Same pattern as maxAutoSize support

3. widgetRegistry.js: Updated validation to accept function defaultSize
   - Skip validation for functions (can't validate until runtime)

4. dashboardManager.js: Reordered userWidgetOrder
   - mood(2) before stats(3) so mood sits beside userInfo in top row

RESULT (3-4 columns):
- userInfo starts at 2x1, placed at [0,0]
- mood placed at [2,0] (beside 2-wide userInfo)
- stats placed at [0,1] and expands to 3x? (full width below)
- No expansion blocking, no wasted space

MOBILE FIXES (from previous commits):
- Stats widget: padding-bottom 0.5rem (was 0.3rem, prevent Arousal clipping)
- Refresh button: Show with Dashboard v2 (#rpg-dashboard-container selector)
- Mood text: 0.6rem font-size (improve readability)

AFFECTED:
- userInfoWidget.js: defaultSize + maxAutoSize column-aware functions
- dashboardManager.js: resetWidgetSizesToDefault, userWidgetOrder
- widgetRegistry.js: Validation allows function defaultSize
- userStatsWidget.js: maxAutoSize column-aware (previous commit)
- style.css: Stats padding fix 0.5rem
2025-10-24 18:55:38 +11:00
Lucas 'Paperboy' Rose-Winters ac5bd22e55 feat(dashboard): optimize 3-4 column desktop layout + fix mobile widget issues
DESKTOP LAYOUT OPTIMIZATION (3-4 columns):
- userInfo: Changed maxAutoSize from 2x1 to 1x2 (expands vertically)
- userStats: Changed to column-aware function, 3x3 in 3-4 col (full width horizontal)
- Layout: userInfo 1x2 (left) + mood 1x1 (top-right), stats 3x3 below (full width)
- Result: Better horizontal space utilization, less vertical stacking

MOBILE FIXES (Dashboard v2):
1. Refresh button visibility
   - Added #rpg-dashboard-container to CSS selector
   - Now shows with Dashboard v2, not just old panel UI

2. Stats widget Arousal bar clipping
   - Added padding-bottom: 0.5rem to .rpg-stats-grid
   - Prevents last stat bar from being cut off

3. Mood conditions text too small
   - Increased from 0.45rem to 0.6rem with line-height 1.2
   - "Focused, Awakening Qi" now readable under emoji

AFFECTED:
- userInfoWidget.js: maxAutoSize 1x2 for desktop vertical expansion
- userStatsWidget.js: Column-aware maxAutoSize function (2x2 mobile, 3x3 desktop)
- style.css: Mobile refresh visibility, stats padding, mood text size
2025-10-24 16:36:18 +11:00
Lucas 'Paperboy' Rose-Winters 4994c09563 feat(dashboard): implement column-aware widget sizing for optimal mobile/desktop layouts
PROBLEM:
- Mobile (2-col): userInfo defaulted to 2x1 (full width), pushed mood to row 2
- After mobile CSS fixes, 1x1 widgets display perfectly
- Want userInfo 1x1 + mood 1x1 side-by-side in top row on mobile
- Desktop (3-4 col): userInfo should still expand to 2x1 for better space usage

SOLUTION:
- gridEngine: Support maxAutoSize as function (receives column count)
- userInfoWidget:
  - Changed defaultSize from 2x1 to 1x1 (starts compact)
  - Changed maxAutoSize to column-aware function:
    * 2 columns (mobile): maxAutoSize 1x1 (stays compact)
    * 3-4 columns (desktop): maxAutoSize 2x1 (can expand)

BEHAVIOR:
- Auto-layout resets widgets to defaultSize (1x1)
- Expansion pass grows widgets up to maxAutoSize based on available space
- Mobile: userInfo stays 1x1, mood can fit beside it (row 0: [userInfo][mood])
- Desktop: userInfo can expand to 2x1 if space available

AFFECTED:
- gridEngine.js: getWidgetMaxSize() now calls maxAutoSize(columns) if function
- userInfoWidget.js: Column-aware maxAutoSize, compact 1x1 defaultSize
2025-10-24 15:50:55 +11:00
Lucas 'Paperboy' Rose-Winters 77b5092e57 fix(mobile): eliminate contenteditable bottom padding in dashboard v2 widgets
PROBLEM: 1x1 mobile widgets displayed poorly with excessive vertical spacing
ROOT CAUSE: Conflicting @media (max-width: 768px) set min-height: 2.75rem on all .rpg-editable

FIXES:
- Remove conflicting 768px media query min-height rule
- Add line-height: 1.2, min-height: 0, height: auto to .rpg-editable
- Use display: block for single-line fields instead of -webkit-box
- GridEngine detects mobile viewport (≤1000px) for 3.5rem rowHeight
- mobile.js skips old tab setup when Dashboard v2 exists
- Hide weather forecast label on mobile (shows icon text only)
- Fix weather text wrapping with white-space: nowrap

AFFECTED:
- style.css: Mobile contenteditable spacing, weather widget, widget scaling
- gridEngine.js: Mobile rowHeight detection (isMobileViewport)
- mobile.js: Skip mobile tabs when Dashboard v2 present
2025-10-24 15:31:19 +11:00
Lucas 'Paperboy' Rose-Winters 63a02fd197 fix(dashboard): sync widget data and fix refresh on chat load
- Update onMessageReceived to populate extensionSettings.infoBoxData and characterThoughts for dashboard widgets
- Update updateRPGData (separate mode) with same extensionSettings population
- Add refreshDashboard() calls after data updates in both generation paths
- Fix onCharacterChanged to populate extensionSettings from loaded chat data
- Fix refreshDashboard() to use correct property name (registry not widgetRegistry)
- Reduce mood and weather widget font sizes to fit in 1x1 layout

This fixes Scene tab widgets not updating when receiving messages or loading chats from welcome screen.
2025-10-24 12:44:11 +11:00
Lucas 'Paperboy' Rose-Winters 0d179d22fc fix(mood): reduce font sizes to fit emoji and conditions in 1x1 widget
Problem: Mood widget at 1x1 was cutting off subtext, only showing emoji
and main text (e.g., "🧘 Focused") but hiding conditions below.

Changes:
- Reduced emoji from 1.2rem → 1rem at 1x1 size
- Reduced conditions text from 0.55rem → 0.45rem
- Tightened spacing (gap: 0.1rem, padding: 0.25rem)
- Set line-height: 1 to minimize vertical space usage
- Allow up to 3 lines of conditions text with -webkit-line-clamp
- Added responsive scaling: larger sizes (2x2+) use bigger fonts

Now fits emoji, main text, and subtext comfortably in 1x1 grid cell.
2025-10-24 11:52:35 +11:00