finish fixes to compile details as per @Aniket-Engg

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -240,6 +240,19 @@ export class TabProxy extends Plugin {
     if ((name.endsWith('.vy') && icon === undefined) || title.includes('Vyper')) {
       icon = 'assets/img/vyperLogo2.webp'
     }
+    if (title === 'Solidity Compile Details') {
+      let updatedName = this.fileManager.currentFile()
+      icon = 'assets/img/solidity.webp'
+      name = updatedName.split('/')[1]
+      let newTitle = ''
+      title.split(' ').forEach((x, index) => {
+        if (index !== 0) {
+          newTitle += ` ${x}`
+        }})
+      title = `${name} - ${newTitle}`
+    }
+
+
 
     var slash = name.split('/')
     const tabPath = slash.reverse()
@@ -357,7 +370,9 @@ export class TabProxy extends Plugin {
     const onZoomIn = () => this.editor.editorFontSize(1)
     const onZoomOut = () => this.editor.editorFontSize(-1)
 
-    const onReady = (api) => { this.tabsApi = api }
+    const onReady = (api) => {
+      this.tabsApi = api
+    }
 
     this.dispatch({
       plugin: this,

apps/remix-ide/src/app/plugins/compile-details.tsx

@@ -6,32 +6,38 @@ import { RemixUiCompileDetails } from '@remix-ui/solidity-compile-details'
 
 const _paq = (window._paq = window._paq || [])
 
+type CompileDetailsPayload = {
+  contractProperties: any,
+  selectedContract: string,
+  help: any,
+  insertValue: any,
+  saveAs: any,
+}
+
+interface ICompilationDetailsPlugin extends ViewPlugin {
+  showDetails: (payload: any) => void
+}
+
 const profile = {
   name: 'compilationDetails',
   displayName: 'Solidity Compile Details',
   description: 'Displays details from solidity compiler',
   location: 'mainPanel',
-  methods: ['showDetails'],
+  methods: ['showDetails', 'getTabHeadDetails'],
   events: []
 }
 
-export class CompilationDetailsPlugin extends ViewPlugin {
+export class CompilationDetailsPlugin extends ViewPlugin implements ICompilationDetailsPlugin {
   dispatch: React.Dispatch<any> = () => {}
   appManager: RemixAppManager
   element: HTMLDivElement
-  payload: any
+  payload: CompileDetailsPayload
   constructor(appManager: RemixAppManager) {
     super(profile)
     this.appManager = appManager
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'compileDetails')
-    this.payload = {
+    this.payload
-      contractProperties: {} as any,
-      selectedContract: '',
-      help: {} as any,
-      insertValue: {} as any,
-      saveAs: {} as any,
-    }
   }
 
   async onActivation() {
@@ -44,8 +50,7 @@ export class CompilationDetailsPlugin extends ViewPlugin {
 
   async showDetails(sentPayload: any) {
     await this.call('tabs', 'focus', 'compilationDetails')
-    setTimeout(() => {
+    setTimeout(async () => {
-      // TODO: use the react API to render when the tab is focused and the plugin in the view.
       this.payload = sentPayload
       this.renderComponent()
     }, 2000)

libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx

@@ -37,7 +37,7 @@ export default function SolidityCompile({ contractProperties, selectedContract,
               >
                 <span className="remixui_questionMark">
                   <i
-                    className="fas fa-question-circle"
+                    className="fas fa-info-circle"
                     aria-hidden="true"
                   ></i>
                 </span>

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

@@ -10,7 +10,7 @@ const _paq = (window._paq = window._paq || [])
 
 /* eslint-disable-next-line */
 export interface TabsUIProps {
-  tabs: Array<any>
+  tabs: Array<Tab>
   plugin: Plugin
   onSelect: (index: number) => void
   onClose: (index: number) => void
@@ -19,6 +19,15 @@ export interface TabsUIProps {
   onReady: (api: any) => void
   themeQuality: string
 }
+
+export interface Tab {
+  id: string
+  icon: string
+  iconClass: string
+  name: string
+  title: string
+  tooltip: string
+}
 export interface TabsUIApi {
   activateTab: (name: string) => void
   active: () => string
@@ -96,7 +105,8 @@ export const TabsUI = (props: TabsUIProps) => {
     return <FileDecorationIcons file={{ path: tab.name }} fileDecorations={tabsState.fileDecorations} />
   }
 
-  const renderTab = (tab, index) => {
+  const renderTab = (tab: Tab, index) => {
+
     const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass
     const classNameTab = 'nav-item nav-link d-flex justify-content-center align-items-center px-2 py-1 tab' + (index === currentIndexRef.current ? ' active' : '')
     const invert = props.themeQuality === 'dark' ? 'invert(1)' : 'invert(0)'

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -16,7 +16,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
       ref={innerRef}
       key={`treeViewLi${id}`}
       data-id={`treeViewLi${id}`}
-      className={`li_tv remixui_mouseover`}
+      className="li_tv remixui_mouseover"
       {...otherProps}
     >
       <div