diff --git a/index.js b/index.js index b268c7b..cdb4713 100644 --- a/index.js +++ b/index.js @@ -299,6 +299,10 @@ async function initUI() { $('#rpg-toggle-always-show-bubble').on('change', function() { extensionSettings.alwaysShowThoughtBubble = $(this).prop('checked'); saveSettings(); + // Force immediate save to ensure setting is persisted before any other code runs + const context = getContext(); + const extension_settings = context.extension_settings || context.extensionSettings; + extension_settings[extensionName] = extensionSettings; // Re-render thoughts to apply the setting updateChatThoughts(); }); diff --git a/src/systems/rendering/thoughts.js b/src/systems/rendering/thoughts.js index 8e9c79e..df8029b 100644 --- a/src/systems/rendering/thoughts.js +++ b/src/systems/rendering/thoughts.js @@ -872,9 +872,7 @@ export function createThoughtPanel($message, thoughtsArray) { // Append to body so it's not clipped by chat container $('body').append($thoughtPanel); - $('body').append($thoughtIcon); - - // Position the panel next to the avatar + $('body').append($thoughtIcon); // Position the panel next to the avatar const panelWidth = 350; const panelMargin = 20; @@ -980,31 +978,32 @@ export function createThoughtPanel($message, thoughtsArray) { // Check if always show bubble is enabled if (extensionSettings.alwaysShowThoughtBubble) { - // Always show panel, hide icon + // Always show panel expanded, hide both close button and icon $thoughtPanel.show(); + $thoughtPanel.find('.rpg-thought-close').hide(); $thoughtIcon.hide(); } else { // Initially hide the panel and show the icon $thoughtPanel.hide(); $thoughtIcon.show(); + + // Close button functionality - only when always show is disabled + $thoughtPanel.find('.rpg-thought-close').on('click', function(e) { + e.stopPropagation(); + $thoughtPanel.fadeOut(200); + $thoughtIcon.fadeIn(200); + }); + + // Icon click to show panel - only when always show is disabled + $thoughtIcon.on('click', function(e) { + e.stopPropagation(); + $thoughtIcon.fadeOut(200); + $thoughtPanel.fadeIn(200); + }); } // console.log('[RPG Companion] Thought panel created at:', { top, left }); - // Close button functionality - $thoughtPanel.find('.rpg-thought-close').on('click', function(e) { - e.stopPropagation(); - $thoughtPanel.fadeOut(200); - $thoughtIcon.fadeIn(200); - }); - - // Icon click to show panel - $thoughtIcon.on('click', function(e) { - e.stopPropagation(); - $thoughtIcon.fadeOut(200); - $thoughtPanel.fadeIn(200); - }); - // Add event handlers for editable thoughts in the bubble $thoughtPanel.find('.rpg-editable').on('blur', function() { const character = $(this).data('character'); @@ -1082,12 +1081,14 @@ export function createThoughtPanel($message, thoughtsArray) { $('#chat').on('scroll.thoughtPanel', updatePanelPosition); $(window).on('resize.thoughtPanel', updatePanelPosition); - // Remove panel when clicking outside (but not when clicking icon or panel) - $(document).on('click.thoughtPanel', function(e) { - if (!$(e.target).closest('#rpg-thought-panel, #rpg-thought-icon').length) { - // Hide the panel and show the icon instead of removing - $thoughtPanel.fadeOut(200); - $thoughtIcon.fadeIn(200); - } - }); + // Remove panel when clicking outside - only if always show is disabled + if (!extensionSettings.alwaysShowThoughtBubble) { + $(document).on('click.thoughtPanel', function(e) { + if (!$(e.target).closest('#rpg-thought-panel, #rpg-thought-icon').length) { + // Hide the panel and show the icon instead of removing + $thoughtPanel.fadeOut(200); + $thoughtIcon.fadeIn(200); + } + }); + } }