fix side panel toggling on vertical icon click

Author: Aniket-Engg

apps/remix-ide/src/app/components/side-panel.tsx

@@ -53,24 +53,94 @@ export class SidePanel extends AbstractPanel {
     // Toggle content
     this.on('menuicons', 'toggleContent', (name) => {
       if (!this.plugins[name]) return
+
+      // If panel is hidden, always show it when any icon is clicked
+      if (this.isHidden) {
+        this.isHidden = false
+
+        // Immediately remove d-none class for instant visual feedback
+        const sidePanel = document.querySelector('#side-panel')
+        sidePanel?.classList.remove('d-none')
+
+        // Update localStorage before showing content
+        const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
+        if (!panelStates.leftSidePanel) panelStates.leftSidePanel = {}
+        panelStates.leftSidePanel.isHidden = false
+        panelStates.leftSidePanel.pluginProfile = this.plugins[name]?.profile
+        window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
+
+        this.showContent(name)
+        this.emit('leftSidePanelShown')
+        this.events.emit('leftSidePanelShown')
+        return
+      }
+
+      // Panel is visible - check if plugin is active
       if (this.plugins[name].active) {
-        // TODO: Only keep `this.emit` (issue#2210)
-        this.emit('toggle', name)
-        this.events.emit('toggle', name)
+        // Plugin is active, so toggling will hide the panel
+        this.isHidden = true
+
+        // Immediately add d-none class for instant visual feedback
+        const sidePanel = document.querySelector('#side-panel')
+        sidePanel?.classList.add('d-none')
+
+        // Update localStorage
+        const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
+        panelStates.leftSidePanel = {
+          isHidden: true,
+          pluginProfile: this.plugins[name]?.profile
+        }
+        window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
+
+        // Emit explicit panel state events for proper synchronization
+        this.emit('leftSidePanelHidden')
+        this.events.emit('leftSidePanelHidden')
         return
       }
+
+      // Plugin is not active, show it
+      const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
+      if (!panelStates.leftSidePanel) panelStates.leftSidePanel = {}
+      panelStates.leftSidePanel.isHidden = false
+      panelStates.leftSidePanel.pluginProfile = this.plugins[name]?.profile
+      window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
+
       this.showContent(name)
-      // TODO: Only keep `this.emit` (issue#2210)
-      this.emit('showing', name)
-      this.events.emit('showing', name)
+      this.emit('leftSidePanelShown')
+      this.events.emit('leftSidePanelShown')
     })
     // Force opening
     this.on('menuicons', 'showContent', (name) => {
       if (!this.plugins[name]) return
-      this.showContent(name)
-      // TODO: Only keep `this.emit` (issue#2210)
-      this.emit('showing', name)
-      this.events.emit('showing', name)
+
+      // Read the saved state from localStorage to check if panel should stay hidden
+      const panelStates = JSON.parse(window.localStorage.getItem('panelStates') || '{}')
+      const savedIsHidden = panelStates.leftSidePanel?.isHidden
+
+      // If panel is currently hidden AND it was intentionally hidden (saved in localStorage),
+      // just load content without showing the panel (this happens during initialization)
+      if (this.isHidden && savedIsHidden === true) {
+        this.showContent(name)
+        return
+      }
+
+      // Otherwise, force show the panel if it's hidden
+      if (this.isHidden) {
+        this.isHidden = false
+
+        // Update localStorage
+        if (!panelStates.leftSidePanel) panelStates.leftSidePanel = {}
+        panelStates.leftSidePanel.isHidden = false
+        panelStates.leftSidePanel.pluginProfile = this.plugins[name]?.profile
+        window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
+
+        this.showContent(name)
+        this.emit('leftSidePanelShown')
+        this.events.emit('leftSidePanelShown')
+      } else {
+        // Panel is already visible, just switch content
+        this.showContent(name)
+      }
     })
   }
 

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -86,6 +86,15 @@ const RemixApp = (props: IRemixAppUi) => {
 
   function setListeners() {
     if (!props.app.desktopClientMode){
+      // Listen to explicit panel state events instead of toggle
+      props.app.sidePanel.events.on('leftSidePanelHidden', () => {
+        setHideSidePanel(true)
+      })
+      props.app.sidePanel.events.on('leftSidePanelShown', () => {
+        setHideSidePanel(false)
+      })
+
+      // Keep legacy event listeners for backward compatibility
       props.app.sidePanel.events.on('toggle', () => {
         setHideSidePanel((prev) => {
           return !prev

libs/remix-ui/top-bar/src/lib/remix-ui-topbar.tsx

@@ -127,22 +127,25 @@ export function RemixUiTopbar() {
       setRightPanelHidden(false)
     })
 
-    // Initialize panel states
+    // Initialize panel states from localStorage
     const initializePanelStates = async () => {
       try {
-        const leftHidden = await plugin.call('sidePanel', 'isPanelHidden')
-        setLeftPanelHidden(leftHidden)
-      } catch (e) {}
-
-      try {
-        const bottomHidden = await plugin.call('terminal', 'isPanelHidden')
-        setBottomPanelHidden(bottomHidden)
-      } catch (e) {}
-
-      try {
-        const rightHidden = await plugin.call('rightSidePanel', 'isPanelHidden')
-        setRightPanelHidden(rightHidden)
-      } catch (e) {}
+        const panelStatesStr = window.localStorage.getItem('panelStates')
+        if (panelStatesStr) {
+          const panelStates = JSON.parse(panelStatesStr)
+          if (panelStates.leftSidePanel) {
+            setLeftPanelHidden(panelStates.leftSidePanel.isHidden || false)
+          }
+          if (panelStates.bottomPanel) {
+            setBottomPanelHidden(panelStates.bottomPanel.isHidden || false)
+          }
+          if (panelStates.rightSidePanel) {
+            setRightPanelHidden(panelStates.rightSidePanel.isHidden || false)
+          }
+        }
+      } catch (e) {
+        console.error('Error reading panel states:', e)
+      }
     }
     initializePanelStates()