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) {
-            // 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'));