add to ide shell

Author: joeizang

apps/remix-ide/src/app/components/top-bar.tsx

@@ -1,10 +1,12 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
 import React from 'react'
 import { RemixUiTopbar } from '@remix-ui/top-bar'
 import packageJson from '../../../../../package.json'
 import { EventEmitter } from 'events'
 import { CustomRemixApi } from '@remix-api'
 import { Plugin } from '@remixproject/engine'
 import { PluginViewWrapper } from '@remix-ui/helper'
+import { AppAction } from 'libs/remix-ui/app/src/lib/remix-app/actions/app'
 
 const TopBarProfile = {
   name: 'topbar',
@@ -18,6 +20,7 @@ const TopBarProfile = {
 
 export class Topbar extends Plugin<any, CustomRemixApi> {
   dispatch: React.Dispatch<any> = () => { }
+  appStateDispatch: React.Dispatch<AppAction> = () => { }
   htmlElement: HTMLDivElement
   events: EventEmitter
 
@@ -26,13 +29,21 @@ export class Topbar extends Plugin<any, CustomRemixApi> {
   }
 
   onActivation(): void {
-
+    this.renderComponent()
   }
 
   onDeactivation(): void {
 
   }
 
+  setDispatch(dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+  }
+
+  setAppStateDispatch(appStateDispatch: React.Dispatch<AppAction>) {
+    this.appStateDispatch = appStateDispatch
+  }
+
   renderComponent() {
     this.dispatch({
       plugins: this,

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

@@ -250,6 +250,10 @@ const RemixApp = (props: IRemixAppUi) => {
             {showManagePreferencesDialog && <ManagePreferencesDialog savePreferencesFn={() => setShowEnterDialog(true)}></ManagePreferencesDialog>}
             <div className='d-flex flex-column'>
               <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
+                <div className='top-bar'>
+                  {props.app.topBar.render()}
+                  <h1>Top Bar</h1>
+                </div>
                 <div id="icon-panel" data-id="remixIdeIconPanel" className="custom_icon_panel iconpanel bg-light">
                   {props.app.menuicons.render()}
                 </div>

libs/remix-ui/app/src/lib/remix-app/style/remix-app.css

@@ -39,6 +39,10 @@ pre {
 }
 .statusBar           {
 
+}
+
+.top-bar {
+  
 }
 .pinnedpanel           {
   width              : 320px;

libs/remix-ui/top-bar/src/lib/remix-ui-topbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
 export const RemixUiTopbar = () => {
-  return <div>RemixUiTopbar</div>
+  return <div className="display-1 text-danger">RemixUiTopbar</div>
 }