From 73adade3383b1fa5c873e1eb43233efee5f4e6bb Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 29 Oct 2024 09:46:28 +0100
Subject: [PATCH] popup panel

---
 apps/remix-ide/src/app.js                     |  5 +-
 .../src/app/components/popup-panel.tsx        | 69 +++++++++++++++++++
 .../src/app/plugins/remixAIPlugin.tsx         |  2 +-
 .../app/src/lib/remix-app/remix-app.tsx       |  1 +
 4 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 apps/remix-ide/src/app/components/popup-panel.tsx

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index a936cc5e33..23addcdf90 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -12,6 +12,7 @@ import { SidePanel } from './app/components/side-panel'
 import { StatusBar } from './app/components/status-bar'
 import { HiddenPanel } from './app/components/hidden-panel'
 import { PinnedPanel } from './app/components/pinned-panel'
+import { PopupPanel } from './app/components/popup-panel'
 import { VerticalIcons } from './app/components/vertical-icons'
 import { LandingPage } from './app/ui/landing-page/landing-page'
 import { MainPanel } from './app/components/main-panel'
@@ -450,6 +451,7 @@ class AppComponent {
     this.sidePanel = new SidePanel()
     this.hiddenPanel = new HiddenPanel()
     this.pinnedPanel = new PinnedPanel()
+    this.popupPanel = new PopupPanel()
 
     const pluginManagerComponent = new PluginManagerComponent(appManager, this.engine)
     const filePanel = new FilePanel(appManager, contentImport)
@@ -457,7 +459,7 @@ class AppComponent {
     const landingPage = new LandingPage(appManager, this.menuicons, fileManager, filePanel, contentImport)
     this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor, appManager)
 
-    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel])
+    this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel, this.popupPanel])
 
     // CONTENT VIEWS & DEFAULT PLUGINS
     const openZeppelinProxy = new OpenZeppelinProxy(blockchain)
@@ -540,6 +542,7 @@ class AppComponent {
     await this.appManager.activatePlugin(['statusBar'])
     await this.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await this.appManager.activatePlugin(['pinnedPanel'])
+    await this.appManager.activatePlugin(['popupPanel'])
     await this.appManager.activatePlugin(['home'])
     await this.appManager.activatePlugin(['settings', 'config'])
     await this.appManager.activatePlugin([
diff --git a/apps/remix-ide/src/app/components/popup-panel.tsx b/apps/remix-ide/src/app/components/popup-panel.tsx
new file mode 100644
index 0000000000..c91ab9644c
--- /dev/null
+++ b/apps/remix-ide/src/app/components/popup-panel.tsx
@@ -0,0 +1,69 @@
+import React from 'react' // eslint-disable-line
+import { AbstractPanel } from './panel'
+import { RemixPluginPanel } from '@remix-ui/panel'
+import packageJson from '../../../../../package.json'
+import { PluginViewWrapper } from '@remix-ui/helper'
+
+const profile = {
+  name: 'popupPanel',
+  displayName: 'Popup Panel',
+  description: 'Remix IDE popup panel',
+  version: packageJson.version,
+  methods: ['addView', 'removeView', 'showContent']
+}
+
+export class PopupPanel extends AbstractPanel {
+  element: HTMLDivElement
+  dispatch: React.Dispatch<any> = () => {}
+  constructor(config) {
+    super(profile)
+  }
+
+  setDispatch(dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+  }
+
+  onActivation() {
+    this.renderComponent()
+  }
+
+  focus(name) {
+    this.emit('focusChanged', name)
+    super.focus(name)
+    this.renderComponent()
+  }
+
+  addView(profile, view) {
+    super.addView(profile, view)
+    this.renderComponent()
+    this.showContent(profile.name) // should be handled by some click
+  }
+
+  removeView(profile) {
+    super.removeView(profile)
+    this.renderComponent()
+  }
+
+  async showContent(name) {
+    super.showContent(name)
+    this.renderComponent()
+  }
+
+  renderComponent() {
+    this.dispatch({
+      plugins: this.plugins
+    })
+  }
+
+  render() {
+    return (
+      <div style={{ height: '200', width: '200', position: 'fixed', bottom: 0, left: 0 }} data-id="popupPanelPluginsContainer">
+        <PluginViewWrapper plugin={this} />
+      </div>
+    )
+  }
+
+  updateComponent(state: any) {
+    return <RemixPluginPanel header={<></>} plugins={state.plugins} />
+  }
+}
diff --git a/apps/remix-ide/src/app/plugins/remixAIPlugin.tsx b/apps/remix-ide/src/app/plugins/remixAIPlugin.tsx
index d6d3c78a48..e307433c69 100644
--- a/apps/remix-ide/src/app/plugins/remixAIPlugin.tsx
+++ b/apps/remix-ide/src/app/plugins/remixAIPlugin.tsx
@@ -21,7 +21,7 @@ const profile = {
   icon: 'assets/img/remix-logo-blue.png',
   description: 'RemixAI provides AI services to Remix IDE.',
   kind: '',
-  location: 'sidePanel',
+  location: 'popupPanel',
   documentation: 'https://remix-ide.readthedocs.io/en/latest/remixai.html',
   version: packageJson.version,
   maintainedBy: 'Remix'
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 f343310096..dd8a672525 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
@@ -244,6 +244,7 @@ const RemixApp = (props: IRemixAppUi) => {
                 }
                 <div>{props.app.hiddenPanel.render()}</div>
               </div>
+              <div>{props.app.popupPanel.render()}</div>
               <div className="statusBar fixed-bottom">
                 {props.app.statusBar.render()}
               </div>