Load plugin state for side-panel after unpin

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

@@ -31,7 +31,10 @@ export class PinnedPanel extends AbstractPanel {
     const activePlugin = this.currentFocus()
 
     if (activePlugin === profile.name) throw new Error(`Plugin ${profile.name} already pinned`) 
-    if (activePlugin) this.remove(activePlugin)
+    if (activePlugin) {
+      await this.call('sidePanel', 'unPinView', this.plugins[activePlugin].profile, this.plugins[activePlugin].view)
+      this.remove(activePlugin)
+    }
     this.loggedState = await this.call('pluginStateLogger', 'getPluginState', profile.name)
     this.addView(profile, view)
     this.plugins[profile.name].pinned = true
@@ -40,11 +43,11 @@ export class PinnedPanel extends AbstractPanel {
     this.events.emit('pinnedPlugin', profile.name)
   }
 
-  unPinView (profile) {
+  async unPinView (profile) {
     const activePlugin = this.currentFocus()
 
     if (activePlugin !== profile.name) throw new Error(`Plugin ${profile.name} already pinned`)
-    this.call('sidePanel', 'unPinView', profile, this.plugins[profile.name].view)
+    await this.call('sidePanel', 'unPinView', profile, this.plugins[profile.name].view)
     super.remove(profile.name)
     this.renderComponent()
     this.events.emit('unPinnedPlugin', profile.name)

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

@@ -72,15 +72,17 @@ export class SidePanel extends AbstractPanel {
     this.renderComponent()
   }
 
-  pinView (profile) {
-    this.call('pinnedPanel', 'pinView', profile, this.plugins[profile.name].view)
+  async pinView (profile, view) {
+    await this.call('pinnedPanel', 'pinView', profile, view)
     this.removeView(profile)
   }
 
   async unPinView (profile, view) {
-    this.addView(profile, view)
     const activePlugin = this.currentFocus()
 
+    if (activePlugin === profile.name) throw new Error(`Plugin ${profile.name} already unpinned`)
+    this.loggedState = await this.call('pluginStateLogger', 'getPluginState', profile.name)
+    super.addView(profile, view)
     this.plugins[activePlugin].active = false
     this.plugins[profile.name].active = true
     await this.call('menuicons', 'linkContent', profile)
@@ -111,7 +113,7 @@ export class SidePanel extends AbstractPanel {
   }
 
   updateComponent(state: any) {
-    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} pluginState={state.loggedState} />
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} pluginState={state.pluginState} />
   }
 
   renderComponent() {

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -7,7 +7,7 @@ import {CustomTooltip, RenderIf, RenderIfNot} from '@remix-ui/helper'
 export interface RemixPanelProps {
   plugins: Record<string, PluginRecord>,
   pinView?: (profile: PluginRecord['profile'], view: PluginRecord['view']) => void,
-  unPinView?: (profile: PluginRecord['profile']) => void
+  unPinView?: (profile: PluginRecord['profile'], view: PluginRecord['view']) => void
 }
 const RemixUIPanelHeader = (props: RemixPanelProps) => {
   const [plugin, setPlugin] = useState<PluginRecord>()
@@ -32,7 +32,7 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
   }
 
   const unPinPlugin = () => {
-    props.unPinView && props.unPinView(plugin.profile)
+    props.unPinView && props.unPinView(plugin.profile, plugin.view)
   }
 
   const tooltipChild = <i className={`px-1 ml-2 pt-1 pb-2 ${!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down bg-light'}`} aria-hidden="true"></i>