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

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