diff --git a/index.js b/index.js index 46e2b1a..1fa66be 100644 --- a/index.js +++ b/index.js @@ -183,18 +183,27 @@ function addExtensionSettings() { $('#extensions_settings2').append(settingsHtml); // Set up the enable/disable toggle - $('#rpg-extension-enabled').prop('checked', extensionSettings.enabled).on('change', function() { + $('#rpg-extension-enabled').prop('checked', extensionSettings.enabled).on('change', async function() { + const wasEnabled = extensionSettings.enabled; extensionSettings.enabled = $(this).prop('checked'); saveSettings(); - updatePanelVisibility(); - if (!extensionSettings.enabled) { - // Clear extension prompts and thought bubbles when disabled + if (!extensionSettings.enabled && wasEnabled) { + // Disabling extension - remove UI elements clearExtensionPrompts(); - updateChatThoughts(); // This will remove the thought bubble since extension is disabled - } else { - // Re-create thought bubbles when re-enabled - updateChatThoughts(); // This will re-create the thought bubble if data exists + updateChatThoughts(); // Remove thought bubbles + + // Remove panel and toggle buttons + $('#rpg-companion-panel').remove(); + $('#rpg-mobile-toggle').remove(); + $('#rpg-collapse-toggle').remove(); + $('#rpg-debug-toggle').remove(); + $('#rpg-debug-panel').remove(); + } else if (extensionSettings.enabled && !wasEnabled) { + // Enabling extension - initialize UI + await initUI(); + loadChatData(); // Load chat data for current chat + updateChatThoughts(); // Create thought bubbles if data exists } // Update Memory Recollection button visibility @@ -206,6 +215,12 @@ function addExtensionSettings() { * Initializes the UI for the extension. */ async function initUI() { + // Only initialize UI if extension is enabled + if (!extensionSettings.enabled) { + console.log('[RPG Companion] Extension disabled - skipping UI initialization'); + return; + } + // Load the HTML template using SillyTavern's template system const templateHtml = await renderExtensionTemplateAsync(extensionName, 'template'); @@ -220,6 +235,11 @@ async function initUI() { `; $('body').append(mobileToggleHtml); + // Hide mobile toggle on desktop viewport (> 1000px) + if (window.innerWidth > 1000) { + $('#rpg-mobile-toggle').hide(); + } + // Cache UI elements using state setters setPanelContainer($('#rpg-companion-panel')); setUserStatsContainer($('#rpg-user-stats')); diff --git a/src/systems/ui/layout.js b/src/systems/ui/layout.js index 9993154..38c995c 100644 --- a/src/systems/ui/layout.js +++ b/src/systems/ui/layout.js @@ -204,9 +204,16 @@ export function updatePanelVisibility() { if (extensionSettings.enabled) { $panelContainer.show(); togglePlotButtons(); // Update plot button visibility + $('#rpg-mobile-toggle').show(); // Show mobile FAB toggle + $('#rpg-collapse-toggle').show(); // Show collapse toggle + // Debug toggle visibility is controlled by debugMode setting in debug.js } else { $panelContainer.hide(); $('#rpg-plot-buttons').hide(); // Hide plot buttons when disabled + $('#rpg-mobile-toggle').hide(); // Hide mobile FAB toggle + $('#rpg-collapse-toggle').hide(); // Hide collapse toggle + $('#rpg-debug-toggle').hide(); // Hide debug toggle button when extension disabled + $('#rpg-debug-panel').remove(); // Remove debug panel when extension disabled } } diff --git a/src/systems/ui/mobile.js b/src/systems/ui/mobile.js index 96962ed..e25b330 100644 --- a/src/systems/ui/mobile.js +++ b/src/systems/ui/mobile.js @@ -332,6 +332,9 @@ export function setupMobileToggle() { if (!wasMobile && isMobile) { console.log('[RPG Mobile] Transitioning desktop -> mobile'); + // Show mobile toggle button + $mobileToggle.show(); + // Remove desktop tabs first removeDesktopTabs(); @@ -381,6 +384,9 @@ export function setupMobileToggle() { $mobileToggle.removeClass('active'); $('.rpg-mobile-overlay').remove(); + // Hide mobile toggle button on desktop + $mobileToggle.hide(); + // Restore desktop positioning class const position = extensionSettings.panelPosition || 'right'; $panel.addClass('rpg-position-' + position); @@ -427,6 +433,11 @@ export function setupMobileToggle() { setupMobileTabs(); // Set initial icon for mobile updateCollapseToggleIcon(); + // Show mobile toggle on mobile viewport + $mobileToggle.show(); + } else { + // Hide mobile toggle on desktop viewport + $mobileToggle.hide(); } }