Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(inventory): replace prompt dialogs with inline editing

Browse Source 
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).
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-17 16:27:59 +11:00
parent f560bb543b
commit 97dc87062f
3 changed files with 294 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/rendering/inventory.js
+25 -12
View File
@@ -41,12 +41,9 @@ export function renderOnPersonView(onPersonItems) {
<div class="rpg-inventory-section" data-section="onPerson">
<div class="rpg-inventory-header">
<h4>Items Currently Carried</h4>
<button class="rpg-inventory-edit-btn" data-action="edit-onperson" title="Edit on-person inventory">
<i class="fa-solid fa-pen"></i> Edit
</button>
</div>
<div class="rpg-inventory-content">
<div class="rpg-inventory-text">${escapeHtml(displayText)}</div>
<div class="rpg-inventory-text rpg-editable" contenteditable="true" data-field="onPerson" title="Click to edit">${escapeHtml(displayText)}</div>
</div>
</div>
`;
@@ -70,6 +67,17 @@ export function renderStoredView(stored, collapsedLocations = []) {
</button>
</div>
<div class="rpg-inventory-content">
<div class="rpg-inline-form" id="rpg-add-location-form" style="display: none;">
<input type="text" class="rpg-inline-input" id="rpg-new-location-name" placeholder="Enter location name..." />
<div class="rpg-inline-buttons">
<button class="rpg-inline-btn rpg-inline-cancel" data-action="cancel-add-location">
<i class="fa-solid fa-times"></i> Cancel
</button>
<button class="rpg-inline-btn rpg-inline-save" data-action="save-add-location">
<i class="fa-solid fa-check"></i> Save
</button>
</div>
</div>
`;
if (locations.length === 0) {
@@ -90,16 +98,24 @@ export function renderStoredView(stored, collapsedLocations = []) {
</button>
<h5 class="rpg-storage-name">${escapeHtml(location)}</h5>
<div class="rpg-storage-actions">
<button class="rpg-inventory-edit-btn" data-action="edit-location" data-location="${escapeHtml(location)}" title="Edit items at this location">
<i class="fa-solid fa-pen"></i>
</button>
<button class="rpg-inventory-remove-btn" data-action="remove-location" data-location="${escapeHtml(location)}" title="Remove this storage location">
<i class="fa-solid fa-trash"></i>
</button>
</div>
</div>
<div class="rpg-storage-content" ${isCollapsed ? 'style="display:none;"' : ''}>
<div class="rpg-inventory-text">${escapeHtml(items || 'None')}</div>
<div class="rpg-inventory-text rpg-editable" contenteditable="true" data-field="stored" data-location="${escapeHtml(location)}" title="Click to edit">${escapeHtml(items || 'None')}</div>
</div>
<div class="rpg-inline-confirmation" id="rpg-remove-confirm-${escapeHtml(location).replace(/\s+/g, '-')}" style="display: none;">
<p>Remove "${escapeHtml(location)}"? This will delete all items stored there.</p>
<div class="rpg-inline-buttons">
<button class="rpg-inline-btn rpg-inline-cancel" data-action="cancel-remove-location" data-location="${escapeHtml(location)}">
<i class="fa-solid fa-times"></i> Cancel
</button>
<button class="rpg-inline-btn rpg-inline-confirm" data-action="confirm-remove-location" data-location="${escapeHtml(location)}">
<i class="fa-solid fa-check"></i> Confirm
</button>
</div>
</div>
</div>
`;
@@ -125,12 +141,9 @@ export function renderAssetsView(assets) {
<div class="rpg-inventory-section" data-section="assets">
<div class="rpg-inventory-header">
<h4>Vehicles, Property & Major Possessions</h4>
<button class="rpg-inventory-edit-btn" data-action="edit-assets" title="Edit assets">
<i class="fa-solid fa-pen"></i> Edit
</button>
</div>
<div class="rpg-inventory-content">
<div class="rpg-inventory-text">${escapeHtml(displayText)}</div>
<div class="rpg-inventory-text rpg-editable" contenteditable="true" data-field="assets" title="Click to edit">${escapeHtml(displayText)}</div>
<div class="rpg-inventory-hint">
<i class="fa-solid fa-info-circle"></i>
Assets include vehicles (cars, motorcycles), property (homes, apartments),