Fix reload error

apps/remix-ide/src/app.js

@@ -575,7 +575,7 @@ class AppComponent {
             const lastPinned = localStorage.getItem('pinnedPlugin')
 
             if (lastPinned) {
-              setTimeout(() => this.appManager.call('sidePanel', 'pinView', { name: lastPinned }), 500)
+              this.appManager.call('sidePanel', 'pinView', JSON.parse(lastPinned))
             }
           })
           .catch(console.error)
@@ -585,8 +585,8 @@ class AppComponent {
       document.body.appendChild(loadedElement)
     })
 
-    this.appManager.on('pinnedPanel', 'pinnedPlugin', (pluginName) => {
-      localStorage.setItem('pinnedPlugin', pluginName)
+    this.appManager.on('pinnedPanel', 'pinnedPlugin', (pluginProfile) => {
+      localStorage.setItem('pinnedPlugin', JSON.stringify(pluginProfile))
     })
 
     this.appManager.on('pinnedPanel', 'unPinnedPlugin', () => {

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

@@ -40,8 +40,8 @@ export class PinnedPanel extends AbstractPanel {
     this.plugins[profile.name].pinned = true
     this.plugins[profile.name].active = true
     this.renderComponent()
-    this.events.emit('pinnedPlugin', profile.name)
-    this.emit('pinnedPlugin', profile.name)
+    this.events.emit('pinnedPlugin', profile)
+    this.emit('pinnedPlugin', profile)
   }
 
   async unPinView (profile) {
@@ -51,8 +51,8 @@ export class PinnedPanel extends AbstractPanel {
     await this.call('sidePanel', 'unPinView', profile, this.plugins[profile.name].view)
     super.remove(profile.name)
     this.renderComponent()
-    this.events.emit('unPinnedPlugin', profile.name)
-    this.emit('unPinnedPlugin', profile.name)
+    this.events.emit('unPinnedPlugin', profile)
+    this.emit('unPinnedPlugin', profile)
   }
 
   setDispatch (dispatch: React.Dispatch<any>) {

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

@@ -211,6 +211,9 @@ const RemixApp = (props: IRemixAppUi) => {
                   <div className="remix-ui-tabs_end remix-bg-opacity position-absolute"></div>
                 </CustomTooltip> */}
               </div>
+              <div id="pinned-panel" ref={pinnedPanelRef} data-id="remixIdePinnedPanel" className={`pinnedpanel border-right border-left ${hidePinnedPanel ? 'd-none' : 'd-flex'}`}>
+                {props.app.pinnedPanel.render()}
+              </div>
               <DragBar
                 resetTrigger={resetRightTrigger}
                 maximiseTrigger={maximiseRightTrigger}
@@ -220,9 +223,6 @@ const RemixApp = (props: IRemixAppUi) => {
                 setHideStatus={setHideSidePanel}
                 layoutPosition='right'
               ></DragBar>
-              <div id="pinned-panel" ref={pinnedPanelRef} data-id="remixIdePinnedPanel" className={`pinnedpanel border-right border-left ${hidePinnedPanel ? 'd-none' : 'd-flex'}`}>
-                {props.app.pinnedPanel.render()}
-              </div>
             </div>
             <div>{props.app.hiddenPanel.render()}</div>
             <AppDialogs></AppDialogs>