- Created getLocationId() helper function to normalize location names to IDs
- Function removes special characters (apostrophes, etc.) before converting to ID
- Both rendering and action handlers now use same ID generation logic
- Fixes issue where locations with apostrophes couldn't be deleted
- Example: "Dottore's Study" now properly generates ID "Dottores-Study"
- Commented out debug logging
Implemented comprehensive individual item management system with toggleable view modes:
- Added item parsing utilities (parseItems/serializeItems) for comma-separated strings
- Implemented list view (full-width rows) and grid view (responsive cards)
- Added view mode toggle buttons per inventory section (onPerson, stored, assets)
- View preferences persist per-section in settings
- Replaced text-based editing with add/remove item controls
- Added inline forms for adding new items (matching existing UX patterns)
- Applied theme accent color (--rpg-highlight) to all outlines and active states
- Updated all tabs (desktop/mobile/inventory subtabs) with theme-consistent styling
Technical improvements:
- Created itemParser.js utility module for item string manipulation
- Enhanced inventory rendering with conditional list/grid HTML generation
- Added switchViewMode handler with settings persistence
- Fixed [object Object] display bug with comprehensive type checking
- All buttons and items now use transparent backgrounds with theme accent borders
Replaced all prompt() and confirm() dialogs with contenteditable fields
and inline UI components for a better user experience.
Changes:
- Made inventory fields (On Person, Stored items, Assets) contenteditable
with blur-to-save functionality
- Replaced "Add Location" prompt with inline form (hidden by default)
- Replaced "Remove Location" confirm with inline confirmation UI
- Added CSS styling for inline editing states (hover, focus, empty)
- Added CSS for inline forms, buttons, and confirmation UI
- Fixed bug where inventory sub-tabs were unclickable due to
incorrect container ID in toggleLocationCollapse() and
switchInventoryTab() functions
All inline edits now save automatically on blur, matching the UX
pattern used elsewhere in the extension (mood/conditions fields).
Root cause: renderInventory() signature mismatch - was expecting parameters
but called without any, resulting in empty/broken rendering.
Changes:
- Rename renderInventory(inventory, options) → generateInventoryHTML() (internal)
- Create new renderInventory() with no parameters (like renderUserStats, etc.)
- New function gets container from state, data from settings, updates DOM directly
- Import getInventoryRenderOptions() to get current tab/collapse state
- Keep updateInventoryDisplay() for use by inventoryActions module
Now matches the pattern used by all other render modules, fixing the bug where
inventory section appeared empty in the panel.
Extract rendering logic from index.js into modular system:
- src/utils/avatars.js: Safe thumbnail URL generation with error handling
- src/systems/rendering/userStats.js: User stats panel with progress bars and classic RPG stats
- src/systems/rendering/infoBox.js: Info box dashboard with weather, date, time, and location widgets
- src/systems/rendering/thoughts.js: Character thoughts panel and floating chat bubbles
Reduces index.js from 3,829 to 2,430 lines (-1,399 lines, -36.5%)
All rendering functions now properly modularized with full JSDoc documentation
Event listeners preserved in render functions for interactive fields
Spicy_Marinara
Lucas 'Paperboy' Rose-Winters