Keep pinned icon active

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

@@ -73,7 +73,6 @@ export class SidePanel extends AbstractPanel {
     await this.call('pinnedPanel', 'pinView', profile, this.plugins[profile.name].view)
     if (this.plugins[profile.name].active) this.call('menuicons', 'select', 'filePanel')
     super.remove(profile.name)
-    this.call('menuicons', 'unlinkContent', profile)
     this.renderComponent()
   }
 
@@ -85,7 +84,6 @@ export class SidePanel extends AbstractPanel {
     super.addView(profile, view)
     this.plugins[activePlugin].active = false
     this.plugins[profile.name].active = true
-    await this.call('menuicons', 'linkContent', profile)
     this.showContent(profile.name)
   }
 

apps/remix-ide/src/app/components/vertical-icons.tsx

@@ -79,6 +79,16 @@ export class VerticalIcons extends Plugin {
       }
       this.renderComponent()
     })
+
+    this.on('pinnedPanel', 'pinnedPlugin', (profile) => {
+      this.icons[profile.name].pinned = true
+      this.renderComponent()
+    })
+
+    this.on('pinnedPanel', 'unPinnedPlugin', (profile) => {
+      this.icons[profile.name].pinned = false
+      this.renderComponent()
+    })
   }
 
   async linkContent(profile: Profile) {
@@ -87,6 +97,7 @@ export class VerticalIcons extends Plugin {
     this.icons[profile.name] = {
       profile: profile,
       active: false,
+      pinned: false,
       canbeDeactivated: await this.call('manager', 'canDeactivate', this.profile, profile),
       timestamp: Date.now()
     }

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -88,10 +88,10 @@ const Icon = ({ iconRecord, verticalIconPlugin, contextMenuAction, theme }: Icon
   return (
     <>
       <div className='d-flex py-1' style={{ width: 'auto', placeContent: stylePC }}>
-        {iconRecord.active && <div
+        <div
-          className='pt-1 bg-primary'
+          className={`pt-1 ${iconRecord.active ? 'bg-primary' : 'bg-transparent'}`}
           style={{ width: "6px", height: "36px", position: 'relative', borderRadius: '24%' }}
-        ></div>}
+        ></div>
         <CustomTooltip
           placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'}
           tooltipText={title}
@@ -100,7 +100,11 @@ const Icon = ({ iconRecord, verticalIconPlugin, contextMenuAction, theme }: Icon
           <div
             className={`remixui_icon m-0  pt-1`}
             onClick={() => {
-              ;(verticalIconPlugin as any).toggle(name)
+              if (iconRecord.pinned) {
+                console.log('called an already pinned plugin')
+              } else {
+                (verticalIconPlugin as any).toggle(name)
+              }
             }}
             {...{ plugin: name }}
             onContextMenu={(e: any) => {
@@ -133,6 +137,10 @@ const Icon = ({ iconRecord, verticalIconPlugin, contextMenuAction, theme }: Icon
             contextMenuAction={contextMenuAction}
           />
         ) : null}
+        <div
+          className={`pt-1 ${iconRecord.pinned ? 'bg-primary' : 'bg-transparent'}`}
+          style={{ width: "6px", height: "36px", position: 'relative', borderRadius: '24%', marginLeft: 'auto' }}
+        ></div>
       </div>
     </>
   )

libs/remix-ui/vertical-icons-panel/src/lib/types/index.ts

@@ -3,6 +3,7 @@ import { Profile } from '@remixproject/plugin-utils'
 export type IconRecord = {
     profile: Profile
     active: boolean
+    pinned: boolean
     class?: string
     canbeDeactivated?: boolean
     isRequired?: boolean