popup panel

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'
@@ -445,6 +446,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)
@@ -452,7 +454,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)
@@ -535,6 +537,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([

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} />
+  }
+}

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'

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>