Initalize pinned panel plugin

apps/remix-ide/src/app.js

@@ -382,6 +382,7 @@ class AppComponent {
     this.menuicons = new VerticalIcons()
     this.sidePanel = new SidePanel()
     this.hiddenPanel = new HiddenPanel()
+    this.pinnedPanel = new PinnedPanel()
 
     const pluginManagerComponent = new PluginManagerComponent(appManager, this.engine)
     const filePanel = new FilePanel(appManager)
@@ -470,6 +471,7 @@ class AppComponent {
     ])
     await this.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
+    await this.appManager.activatePlugin(['pinnedPanel'])
     await this.appManager.activatePlugin(['home'])
     await this.appManager.activatePlugin(['settings', 'config'])
     await this.appManager.activatePlugin([

apps/remix-ide/src/app/components/panel.ts

@@ -26,6 +26,7 @@ export class AbstractPanel extends HostPlugin {
       profile: profile,
       view: view,
       active: false,
+      pinned: false,
       class: 'plugItIn active'
     }
   }

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

@@ -0,0 +1,74 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { AbstractPanel } from './panel'
+import { RemixPluginPanel } from '@remix-ui/panel'
+import packageJson from '../../../../../package.json'
+import { RemixUIPanelHeader } from '@remix-ui/panel'
+import { PluginViewWrapper } from '@remix-ui/helper'
+
+const pinnedPanel = {
+  name: 'pinnedPanel',
+  displayName: 'Pinned Panel',
+  description: 'Remix IDE pinned panel',
+  version: packageJson.version,
+  methods: ['addView', 'removeView', 'currentFocus']
+}
+
+export class PinnedPanel extends AbstractPanel {
+  sideelement: any
+  dispatch: React.Dispatch<any> = () => {}
+
+  constructor() {
+    super(pinnedPanel)
+  }
+
+  onActivation() {
+    this.renderComponent()
+  }
+
+  focus(name) {
+    this.emit('focusChanged', name)
+    super.focus(name)
+  }
+
+  removeView(profile) {
+    super.removeView(profile)
+    this.emit('unpinnedPlugin', profile.name)
+    this.renderComponent()
+  }
+
+  addView(profile, view) {
+    super.addView(profile, view)
+    this.renderComponent()
+  }
+
+  /**
+   * Display content and update the header
+   * @param {String} name The name of the plugin to display
+   */
+  async showContent(name) {
+    super.showContent(name)
+    this.emit('focusChanged', name)
+    this.renderComponent()
+  }
+
+  setDispatch (dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+  }
+
+  render() {
+    return (
+      <section className='panel pinned-panel'> <PluginViewWrapper plugin={this} /></section>
+    )
+  }
+
+  updateComponent(state: any) {
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins}></RemixUIPanelHeader>} plugins={state.plugins} />
+  }
+
+  renderComponent() {
+    this.dispatch({
+      plugins: this.plugins
+    })
+  }
+}

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

@@ -16,6 +16,7 @@ const sidePanel = {
 }
 
 export class SidePanel extends AbstractPanel {
+  // lastPinned
   sideelement: any
   dispatch: React.Dispatch<any> = () => {}
   constructor() {
@@ -69,6 +70,18 @@ export class SidePanel extends AbstractPanel {
     this.renderComponent()
   }
 
+  pinView (profile, view) {
+    if (this.plugins[profile.name].pinned) return
+    this.plugins[profile.name].pinned = true
+    this.call('pinnedPanel', 'addView', profile, view)
+  }
+
+  unPinView (profile) {
+    if (!this.plugins[profile.name].pinned) return
+    this.plugins[profile.name].pinned = false
+    this.call('pinnedPanel', 'removeView', profile)
+  }
+
   /**
    * Display content and update the header
    * @param {String} name The name of the plugin to display

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

@@ -35,6 +35,7 @@ const RemixApp = (props: IRemixAppUi) => {
     messages: {}
   })
   const sidePanelRef = useRef(null)
+  const pinnedPanelRef: React.MutableRefObject<JSX.Element> = useRef(null)
 
   useEffect(() => {
     async function activateApp() {

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

@@ -4,6 +4,7 @@ export type PluginRecord = {
     profile: Profile
     view: any
     active: boolean
+    pinned: boolean
     class?: string
     minimized?: boolean
 }