From a962f09cc5bf84a3553094b4c4c93ba1a7abf8c2 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 26 Jun 2023 11:17:34 +0100
Subject: [PATCH] Initalize pinned panel plugin

---
 apps/remix-ide/src/app.js                     |  2 +
 apps/remix-ide/src/app/components/panel.ts    |  1 +
 .../src/app/components/pinned-panel.tsx       | 74 +++++++++++++++++++
 .../src/app/components/side-panel.tsx         | 13 ++++
 .../app/src/lib/remix-app/remix-app.tsx       |  1 +
 libs/remix-ui/panel/src/lib/types/index.ts    |  1 +
 6 files changed, 92 insertions(+)
 create mode 100644 apps/remix-ide/src/app/components/pinned-panel.tsx

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index ccbe5ff471..5b5f73f7d9 100644
--- a/apps/remix-ide/src/app.js
+++ b/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([
diff --git a/apps/remix-ide/src/app/components/panel.ts b/apps/remix-ide/src/app/components/panel.ts
index a90b8c3ee3..2fa3c9b0e9 100644
--- a/apps/remix-ide/src/app/components/panel.ts
+++ b/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'
     }
   }
diff --git a/apps/remix-ide/src/app/components/pinned-panel.tsx b/apps/remix-ide/src/app/components/pinned-panel.tsx
new file mode 100644
index 0000000000..b91cbbb682
--- /dev/null
+++ b/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
+    })
+  }
+}
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 8b30bf200b..381bbf7a51 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/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
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index 864819c62b..ec0c82706b 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/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() {
diff --git a/libs/remix-ui/panel/src/lib/types/index.ts b/libs/remix-ui/panel/src/lib/types/index.ts
index 67b79c4214..c3913340cc 100644
--- a/libs/remix-ui/panel/src/lib/types/index.ts
+++ b/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
 }