git status in decent state

apps/remix-ide/src/app.js

@@ -387,7 +387,7 @@ class AppComponent {
 
     const pluginManagerComponent = new PluginManagerComponent(appManager, this.engine)
     const filePanel = new FilePanel(appManager)
-    this.statusBar = new StatusBar(filePanel)
+    this.statusBar = new StatusBar(filePanel, this.menuicons)
     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/side-panel.tsx

@@ -12,7 +12,7 @@ const sidePanel = {
   displayName: 'Side Panel',
   description: 'Remix IDE side panel',
   version: packageJson.version,
-  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView']
+  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView', 'focus']
 }
 
 export class SidePanel extends AbstractPanel {

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

@@ -6,12 +6,13 @@ import { PluginViewWrapper } from '@remix-ui/helper'
 import { PluginProfile, StatusBarInterface } from '../../types'
 import { RemixUIStatusBar } from '@remix-ui/statusbar'
 import { FilePanelType } from '@remix-ui/workspace'
+import { VerticalIcons } from './vertical-icons'
 
 const statusBarProfile: PluginProfile = {
   name: 'statusBar',
   displayName: 'Status Bar',
   description: 'Remix IDE status bar panel',
-  methods: ['getGitBranchName'],
+  methods: [],
   version: packageJson.version,
 }
 
@@ -19,31 +20,22 @@ export class StatusBar extends Plugin implements StatusBarInterface {
   htmlElement: HTMLDivElement
   events: EventEmitter
   filePanelPlugin: FilePanelType
+  verticalIcons: VerticalIcons
   dispatch: React.Dispatch<any> = () => {}
   currentWorkspaceName: string = ''
-  constructor(filePanel: FilePanelType) {
+  constructor(filePanel: FilePanelType, veritcalIcons: VerticalIcons) {
     super(statusBarProfile)
     this.filePanelPlugin = filePanel
+    this.verticalIcons = veritcalIcons
     this.events = new EventEmitter()
     this.htmlElement = document.createElement('div')
     this.htmlElement.setAttribute('id', 'status-bar')
   }
 
   onActivation(): void {
-    this.on('filePanel', 'setWorkspace', async () => {
-      await this.getGitBranchName()
-    })
     this.renderComponent()
   }
 
-  async getGitBranchName() {
-    const isGitRepo = await this.call('fileManager', 'isGitRepo')
-    if (!isGitRepo) return
-    const repoName = await this.call('filePanel', 'getCurrentWorkspace')
-    repoName && repoName?.name.length > 0 ? this.currentWorkspaceName = repoName.name : this.currentWorkspaceName = ''
-    return { repoWorkspaceName: repoName }
-  }
-
   setDispatch(dispatch: React.Dispatch<any>) {
     this.dispatch = dispatch
   }

apps/remix-ide/src/remixAppManager.js

@@ -70,6 +70,7 @@ let requiredModules = [ // services + layout views + system views
   'compilationDetails',
   'vyperCompilationDetails',
   'contractflattener',
+  'statusBar',
   'solidity-script',
   'solcoder',
   'home',
@@ -103,7 +104,7 @@ const isVM = (name) => {
 }
 
 export function isNative(name) {
-  
+
   // nativePlugin allows to bypass the permission request
   const nativePlugins = [
     'vyper',
@@ -117,6 +118,7 @@ export function isNative(name) {
     'solhint',
     'solidityUnitTesting',
     'layout',
+    'statusBar',
     'notification',
     'hardhat-provider',
     'ganache-provider',

apps/remix-ide/src/types/index.d.ts

@@ -16,5 +16,4 @@ export interface StatusBarInterface {
   filePanelPlugin: FilePanelType
   dispatch: React.Dispatch<any>
   setDispatch(dispatch: React.Dispatch<any>): void
-  getGitBranchName: () => Promise<any>
 }

libs/remix-ui/statusbar/src/css/statusbar.css

@@ -1,4 +1,9 @@
 
-remixui_statusbar :hover {
+remixui_statusbar:hover {
+  cursor: pointer;
+}
+
+.remixui_statusbar_gitstatus
+.remixui_statusbar_gitstatus:hover {
   cursor: pointer;
 }

libs/remix-ui/statusbar/src/lib/components/gitStatus.tsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import { StatusBarInterface } from '../types'
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import { StatusBar } from 'apps/remix-ide/src/app/components/status-bar'
+import '../../css/statusbar.css'
 
 export interface GitStatusProps {
-  plugin: StatusBarInterface
+  plugin: StatusBar
 }
 
 export default function GitStatus({ plugin }: GitStatusProps) {
@@ -20,9 +23,16 @@ export default function GitStatus({ plugin }: GitStatusProps) {
     // console.log('testing', plugin)
   }, [])
 
+  const lightDgitUp = async () => {
+    const isActive = await plugin.call('manager', 'isActive', 'dgit')
+    if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
+    plugin.verticalIcons.select('dgit')
+  }
+
   return (
     <div
-      className="d-flex flex-row p-1 text-white justify-content-center align-items-center"
+      className="d-flex flex-row p-1 text-white justify-content-center align-items-center remixui_statusbar_gitstatus"
+      onClick={async () => await lightDgitUp()}
     >
       <span className="fa-regular fa-code-branch ml-1"></span>
       <span className="small mx-1">{`${gitBranchName}`}</span>

libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx

@@ -6,9 +6,11 @@ import ScamAlertStatus from './components/scamAlertStatus'
 import ScamDetails from './components/scamDetails'
 import { FloatingFocusManager, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react'
 import axios from 'axios'
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import { StatusBar } from 'apps/remix-ide/src/app/components/status-bar'
 
 export interface RemixUIStatusBarProps {
-  statusBarPlugin: StatusBarInterface
+  statusBarPlugin: StatusBar
 }
 
 export type ScamAlert = {
@@ -67,7 +69,7 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
         </FloatingFocusManager>
       )}
       <div className="d-flex flex-row bg-primary justify-content-between align-items-center">
-        <div className="remixui_statusbar">
+        <div className="remixui_statusbar remixui_statusbar_gitstatus">
           <GitStatus plugin={statusBarPlugin} />
         </div>
         <div className="remixui_statusbar"></div>

libs/remix-ui/statusbar/src/lib/types/index.ts

@@ -1,5 +1,8 @@
 import EventEmitter from 'events'
 import { Plugin } from '@remixproject/engine'
+import { FilePanelType } from '@remix-ui/workspace'
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import { VerticalIcons } from 'apps/remix-ide/src/app/components/vertical-icons'
 export interface PluginProfile {
   name: string
   displayName: string
@@ -16,6 +19,8 @@ export interface StatusBarInterface extends Plugin {
   htmlElement: HTMLDivElement
   events: EventEmitter
   dispatch: React.Dispatch<any>
+  filePanel: FilePanelType
+  verticalIcons: VerticalIcons
   setDispatch(dispatch: React.Dispatch<any>): void
   getGitBranchName: () => Promise<any>
   currentWorkspaceName: string