refine status components

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

@@ -1,8 +1,16 @@
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import { StatusBar } from 'apps/remix-ide/src/app/components/status-bar'
 import React from 'react'
 
-export default function AIStatus() {
+interface AIStatusProps {
+  plugin: StatusBar
+  isAiActive: boolean
+  aiActive: () => Promise<any>
+}
+
+export default function AIStatus(props: AIStatusProps) {
   return (
-    <div className="d-flex flex-row p-1 text-white justify-content-center align-items-center">
+    <div className={props.aiActive() ? "d-flex flex-row p-1 text-white justify-content-center align-items-center bg-body-tertiary" : "d-flex flex-row p-1 text-white justify-content-center align-items-center"}>
       <span className="fa-regular fa-microchip-ai ml-1"></span>
       <span className="small mx-1">Remix Copilot</span>
     </div>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, Dispatch } 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'
@@ -6,27 +6,52 @@ import '../../css/statusbar.css'
 
 export interface GitStatusProps {
   plugin: StatusBar
+  gitBranchName: string
+  setGitBranchName: Dispatch<React.SetStateAction<string>>
 }
 
-export default function GitStatus({ plugin }: GitStatusProps) {
+export default function GitStatus({ plugin, gitBranchName, setGitBranchName }: GitStatusProps) {
 
-  const [gitBranchName, setGitBranchName] = useState('')
+  useEffect(() => {
+    const run = async () => {
+      plugin.on('filePanel', 'setWorkspace', async (workspace) => {
+        const isGit = await plugin.call('fileManager', 'isGitRepo')
+        if (isGit) {
+          console.log(plugin.isGitRepo)
+          setGitBranchName(workspace.name)
+        } else {
+          setGitBranchName('Not a git repo')
+        }
+        console.log('setWorkspace on workspaceswitch',workspace)
+      })
+    }
+    run()
+  }, [gitBranchName, plugin.isGitRepo])
 
   useEffect(() => {
-    plugin.on('filePanel', 'workspaceInitializationCompleted', async () => {
-      const isGit = await plugin.call('fileManager', 'isGitRepo')
-      console.log('git', isGit)
-      if (!isGit) return
-      const workspaceName = localStorage.getItem('currentWorkspace')
-      workspaceName && workspaceName.length > 0 ? setGitBranchName(workspaceName) : setGitBranchName('')
-    })
-    // console.log('testing', plugin)
-  }, [])
+    const run = async () => {
+      plugin.on('filePanel', 'workspaceInitializationCompleted', async () => {
+        const isGit = await plugin.call('fileManager', 'isGitRepo')
+        if (isGit) {
+          console.log(plugin.isGitRepo)
+          const workspace = localStorage.getItem('currentWorkspace')
+          setGitBranchName(workspace)
+        } else {
+          setGitBranchName('Not a git repo')
+        }
+        console.log('setWorkspace on workspaceswitch')
+      })
+    }
+    run()
+  }, [gitBranchName, plugin.isGitRepo])
 
   const lightDgitUp = async () => {
     const isActive = await plugin.call('manager', 'isActive', 'dgit')
+    const isGit = await plugin.call('fileManager', 'isGitRepo')
     if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
-    plugin.verticalIcons.select('dgit')
+    if (gitBranchName.length > 0 && isGit) {
+      plugin.verticalIcons.select('dgit')
+    }
   }
 
   return (
@@ -34,9 +59,9 @@ export default function GitStatus({ plugin }: GitStatusProps) {
       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>
+      {gitBranchName.length > 0 && gitBranchName !== 'Not a git repo' && <span className="fa-regular fa-code-branch ml-1"></span>}
       <span className="small mx-1">{`${gitBranchName}`}</span>
-      <span className="fa-solid fa-arrows-rotate fa-1"></span>
+      {gitBranchName.length > 0 && gitBranchName !== 'Not a git repo' && <span className="fa-solid fa-arrows-rotate fa-1"></span>}
     </div>
   )
 }