add topbar provider and inject filePanel into topbar

Author: joeizang

apps/remix-ide/src/app.ts

@@ -522,7 +522,7 @@ class AppComponent {
     const pluginManagerComponent = new PluginManagerComponent(appManager, this.engine)
     const filePanel = new Filepanel(appManager, contentImport)
     this.statusBar = new StatusBar(filePanel, this.menuicons)
-    this.topBar = new Topbar()
+    this.topBar = new Topbar(filePanel)
     const landingPage = new LandingPage(appManager, this.menuicons, fileManager, filePanel, contentImport)
     this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor)//, appManager)
 

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

@@ -7,7 +7,7 @@ import { CustomRemixApi, ICustomRemixApi } 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'
-import { PluginNames } from '../../types'
+import FilePanel from '../panels/file-panel'
 
 const TopBarProfile = {
   name: 'topbar',
@@ -24,9 +24,11 @@ export class Topbar extends Plugin<any, CustomRemixApi> {
   appStateDispatch: React.Dispatch<AppAction> = () => { }
   htmlElement: HTMLDivElement
   events: EventEmitter
+  filePanel: FilePanel
 
-  constructor() {
+  constructor(filePanel: FilePanel) {
     super(TopBarProfile)
+    this.filePanel = filePanel
   }
 
   onActivation(): void {

libs/remix-ui/top-bar/src/context/topbarContext.tsx

@@ -1,8 +1,9 @@
+import { Topbar } from 'apps/remix-ide/src/app/components/top-bar'
 import { createContext, SyntheticEvent } from 'react'
 
-export const FileSystemContext = createContext<{
+export const TopbarContext = createContext<{
   fs: any,
-  plugin: any,
+  plugin: Topbar,
   modal:(title: string | JSX.Element, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   dispatchInitWorkspace:() => Promise<void>,
   dispatchFetchDirectory:(path: string) => Promise<void>,