Fix: Hide UI elements when extension disabled

- Skip UI initialization entirely when extension is disabled on page load
- Remove all UI elements (panel, buttons) from DOM when disabling extension
- Recreate full UI when re-enabling extension
- Hide mobile toggle button on desktop viewports (>1000px)
- Show/hide mobile toggle based on viewport size transitions
- Ensures clean state management for extension enable/disable

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) {
+        if (!extensionSettings.enabled && wasEnabled) {
-            // Clear extension prompts and thought bubbles when disabled
+            // Disabling extension - remove UI elements
             clearExtensionPrompts();
-            updateChatThoughts(); // This will remove the thought bubble since extension is disabled
+            updateChatThoughts(); // Remove thought bubbles
-        } else {
+
-            // Re-create thought bubbles when re-enabled
+            // Remove panel and toggle buttons
-            updateChatThoughts(); // This will re-create the thought bubble if data exists
+            $('#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'));

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
     }
 }
 

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();
     }
 }