From b888c2b894e42015213c15d0a21a83a2d5361d8a Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 13 Jun 2023 17:16:36 +0200
Subject: [PATCH] open folder

---
 apps/remixdesktop/src/main.ts                 |   5 +-
 apps/remixdesktop/src/plugins/configPlugin.ts |  58 ++
 apps/remixdesktop/src/plugins/fsPlugin.ts     |  14 +-
 apps/remixdesktop/src/utils/config.ts         |  37 ++
 .../workspace/src/lib/actions/index.ts        |   6 +-
 .../workspace/src/lib/actions/workspace.ts    |   4 +
 .../workspace/src/lib/contexts/index.ts       |   1 +
 .../src/lib/providers/FileSystemProvider.tsx  |  11 +-
 .../workspace/src/lib/remix-ui-workspace.tsx  | 590 +++++++++---------
 9 files changed, 427 insertions(+), 299 deletions(-)
 create mode 100644 apps/remixdesktop/src/plugins/configPlugin.ts
 create mode 100644 apps/remixdesktop/src/utils/config.ts

diff --git a/apps/remixdesktop/src/main.ts b/apps/remixdesktop/src/main.ts
index 421de7eb7d..f174c50a44 100644
--- a/apps/remixdesktop/src/main.ts
+++ b/apps/remixdesktop/src/main.ts
@@ -13,6 +13,9 @@ if (
   isPackaged = true;
 }
 
+// get system home dir
+const homeDir = app.getPath('userData')
+
 export let mainWindow: BrowserWindow;
 export const createWindow = async (): Promise<void> => {
   // Create the browser window.
@@ -27,7 +30,7 @@ export const createWindow = async (): Promise<void> => {
   // and load the index.html of the app.
   mainWindow.loadURL(
     process.env.NODE_ENV === 'production' || isPackaged? `file://${__dirname}/remix-ide/index.html` :
-    'http://localhost:8080')
+    'http://localhost:8080?opendir=' + homeDir)
 
   mainWindow.maximize();
   
diff --git a/apps/remixdesktop/src/plugins/configPlugin.ts b/apps/remixdesktop/src/plugins/configPlugin.ts
new file mode 100644
index 0000000000..cc144f0230
--- /dev/null
+++ b/apps/remixdesktop/src/plugins/configPlugin.ts
@@ -0,0 +1,58 @@
+import { ElectronBasePlugin, ElectronBasePluginClient } from "@remixproject/plugin-electron"
+
+import { Profile } from "@remixproject/plugin-utils";
+
+const profile: Profile = {
+    displayName: 'electronconfig',
+    name: 'electronconfig',
+    description: 'Electron Config'
+}
+
+export class ConfigPlugin extends ElectronBasePlugin {
+    clients: ConfigPluginClient[] = []
+    constructor() {
+        super(profile, clientProfile, ConfigPluginClient)
+        this.methods = [...super.methods, 'writeConfig', 'readConfig']
+    }
+
+    async writeConfig(webContentsId: any, data: any): Promise<void> {
+        const client = this.clients.find(c => c.webContentsId === webContentsId)
+        if (client) {
+            client.writeConfig(data)
+        }
+    }
+
+    async readConfig(webContentsId: any): Promise<any> {
+        const client = this.clients.find(c => c.webContentsId === webContentsId)
+        if (client) {
+            return client.readConfig()
+        }
+    }
+
+}
+
+const clientProfile: Profile = {
+    name: 'electronconfig',
+    displayName: 'electronconfig',
+    description: 'Electron Config',
+    methods: ['writeConfig', 'readConfig']
+}
+
+class ConfigPluginClient extends ElectronBasePluginClient {
+
+    constructor(webContentsId: number, profile: Profile) {
+        super(webContentsId, profile)
+        this.onload(() => {
+            //console.log('config client onload')
+        })
+    }
+
+    async writeConfig(data: any): Promise<void> {
+
+    }
+
+    async readConfig(): Promise<any> {
+
+    }
+
+}
\ No newline at end of file
diff --git a/apps/remixdesktop/src/plugins/fsPlugin.ts b/apps/remixdesktop/src/plugins/fsPlugin.ts
index 1ecbfbd32e..63b5153f5e 100644
--- a/apps/remixdesktop/src/plugins/fsPlugin.ts
+++ b/apps/remixdesktop/src/plugins/fsPlugin.ts
@@ -26,7 +26,7 @@ export class FSPlugin extends ElectronBasePlugin {
   openFolder(webContentsId: any): void {
     const client = this.clients.find(c => c.webContentsId === webContentsId)
     if (client) {
-      client.setWorkingDir()
+      client.openFolder()
     }
   }
 
@@ -36,7 +36,7 @@ const clientProfile: Profile = {
   name: 'fs',
   displayName: 'fs',
   description: 'fs',
-  methods: ['readdir', 'readFile', 'writeFile', 'mkdir', 'rmdir', 'unlink', 'rename', 'stat', 'lstat', 'exists', 'currentPath', 'watch', 'closeWatch', 'setWorkingDir']
+  methods: ['readdir', 'readFile', 'writeFile', 'mkdir', 'rmdir', 'unlink', 'rename', 'stat', 'lstat', 'exists', 'currentPath', 'watch', 'closeWatch', 'setWorkingDir', 'openFolder']
 }
 
 class FSPluginClient extends ElectronBasePluginClient {
@@ -145,9 +145,9 @@ class FSPluginClient extends ElectronBasePluginClient {
     if (this.watcher) this.watcher.close()
   }
 
-  async setWorkingDir(): Promise<void> {
+  async openFolder(): Promise<void> {
     const dirs = dialog.showOpenDialogSync(this.window, {
-      properties: ['openDirectory']
+      properties: ['openDirectory', 'createDirectory', "showHiddenFiles"]
     })
     if (dirs && dirs.length > 0) {
       this.workingDir = dirs[0]
@@ -156,6 +156,12 @@ class FSPluginClient extends ElectronBasePluginClient {
 
   }
 
+  async setWorkingDir(path: string): Promise<void> {
+      console.log('setWorkingDir', path)
+      this.workingDir = path
+      this.emit('workingDirChanged', path)
+  }
+
   fixPath(path: string): string {
     if (path) {
       if (path.startsWith('/')) {
diff --git a/apps/remixdesktop/src/utils/config.ts b/apps/remixdesktop/src/utils/config.ts
new file mode 100644
index 0000000000..62e35d45df
--- /dev/null
+++ b/apps/remixdesktop/src/utils/config.ts
@@ -0,0 +1,37 @@
+import fs from 'fs'
+import os from 'os'
+import path from 'path'
+
+const cacheDir = path.join(os.homedir(), '.cache_remix_ide')
+
+try {
+    if (!fs.existsSync(cacheDir)) {
+        fs.mkdirSync(cacheDir)
+    }
+    if(!fs.existsSync(cacheDir + '/remixdesktop.json')) {
+        fs.writeFileSync(cacheDir + '/remixdesktop.json', JSON.stringify({}))
+    }
+} catch (e) {
+}
+export const writeConfig = (data: any) => {
+    const cache = readConfig()
+    try {
+        fs.writeFileSync(cacheDir + '/remixdesktop.json', JSON.stringify({ ...cache, ...data }))
+    } catch (e) {
+        console.error('Can\'t write config file', e)
+    }
+}
+
+export const readConfig = () => {
+    if (fs.existsSync(cacheDir + '/remixdesktop.json')) {
+        try {
+            // read the cache file
+            const cache = fs.readFileSync(cacheDir + '/remixdesktop.json')
+            const data = JSON.parse(cache.toString())
+            return data
+        } catch (e) {
+            console.error('Can\'t read config file', e)
+        }
+    }
+    return undefined
+}
\ No newline at end of file
diff --git a/libs/remix-ui/workspace/src/lib/actions/index.ts b/libs/remix-ui/workspace/src/lib/actions/index.ts
index 70af2f08db..a48524a10c 100644
--- a/libs/remix-ui/workspace/src/lib/actions/index.ts
+++ b/libs/remix-ui/workspace/src/lib/actions/index.ts
@@ -23,6 +23,7 @@ export type UrlParametersType = {
   code: string,
   url: string,
   address: string
+  opendir: string,
 }
 
 const basicWorkspaceInit = async (workspaces: { name: string; isGitRepo: boolean; }[], workspaceProvider) => {
@@ -120,7 +121,10 @@ export const initWorkspace = (filePanelPlugin) => async (reducerDispatch: React.
     } else if (isElectron()) {
       console.log('isElectron initWorkspace')
       plugin.call('notification', 'toast', `connecting to electron...`)
-
+      if(params.opendir){
+        plugin.call('notification', 'toast', `opening ${params.opendir}...`)
+        plugin.call('fs', 'setWorkingDir', params.opendir)
+      }
       plugin.setWorkspace({ name: 'electron', isLocalhost: false })
 
       dispatch(setCurrentWorkspace({ name: 'electron', isGitRepo: false }))
diff --git a/libs/remix-ui/workspace/src/lib/actions/workspace.ts b/libs/remix-ui/workspace/src/lib/actions/workspace.ts
index 439a127053..aa180f2e6c 100644
--- a/libs/remix-ui/workspace/src/lib/actions/workspace.ts
+++ b/libs/remix-ui/workspace/src/lib/actions/workspace.ts
@@ -747,6 +747,10 @@ export const checkoutRemoteBranch = async (branch: string, remote: string) => {
   }
 }
 
+export const openElectronFolder = async () => {
+  await plugin.call('fs', 'openFolder')
+}
+
 export const hasLocalChanges = async () => {
   const filesStatus = await plugin.call('dGitProvider', 'status')
   const uncommittedFiles = getUncommittedFiles(filesStatus)
diff --git a/libs/remix-ui/workspace/src/lib/contexts/index.ts b/libs/remix-ui/workspace/src/lib/contexts/index.ts
index 3423323a90..b46b2c7d04 100644
--- a/libs/remix-ui/workspace/src/lib/contexts/index.ts
+++ b/libs/remix-ui/workspace/src/lib/contexts/index.ts
@@ -46,6 +46,7 @@ export const FileSystemContext = createContext<{
   dispatchCreateTsSolGithubAction: () => Promise<void>,
   dispatchCreateSlitherGithubAction: () => Promise<void>
   dispatchCreateHelperScripts: (script: string) => Promise<void>
+  dispatchOpenElectronFolder: () => Promise<void>
 }>(null)
   
     
\ No newline at end of file
diff --git a/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx b/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx
index 29399275e1..7c9cc07c4e 100644
--- a/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx
+++ b/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx
@@ -8,7 +8,7 @@ import { browserReducer, browserInitialState } from '../reducers/workspace'
 import { initWorkspace, fetchDirectory, removeInputField, deleteWorkspace, deleteAllWorkspaces, clearPopUp, publishToGist, createNewFile, setFocusElement, createNewFolder,
   deletePath, renamePath, downloadPath, copyFile, copyFolder, runScript, emitContextMenuEvent, handleClickFile, handleExpandPath, addInputField, createWorkspace,
   fetchWorkspaceDirectory, renameWorkspace, switchToWorkspace, uploadFile, uploadFolder, handleDownloadWorkspace, handleDownloadFiles, restoreBackupZip, cloneRepository, moveFile, moveFolder,
-  showAllBranches, switchBranch, createNewBranch, checkoutRemoteBranch, createSolidityGithubAction, createTsSolGithubAction, createSlitherGithubAction, createHelperScripts
+  showAllBranches, switchBranch, createNewBranch, checkoutRemoteBranch, createSolidityGithubAction, createTsSolGithubAction, createSlitherGithubAction, createHelperScripts, openElectronFolder
 } from '../actions'
 import { Modal, WorkspaceProps, WorkspaceTemplate } from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -187,6 +187,12 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     await createHelperScripts(script)
   }
 
+  const dispatchOpenElectronFolder = async () => {
+    console.log('open electron folder')
+    await openElectronFolder()
+  }
+
+
   useEffect(() => {
     dispatchInitWorkspace()
   }, [])
@@ -304,7 +310,8 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     dispatchCreateSolidityGithubAction,
     dispatchCreateTsSolGithubAction,
     dispatchCreateSlitherGithubAction,
-    dispatchCreateHelperScripts
+    dispatchCreateHelperScripts,
+    dispatchOpenElectronFolder
   }
   return (
     <FileSystemContext.Provider value={value}>
diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
index b7b88e2318..d11525c404 100644
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@@ -18,7 +18,7 @@ const _paq = window._paq = window._paq || []
 
 const canUpload = window.File || window.FileReader || window.FileList || window.Blob
 
-export function Workspace () {
+export function Workspace() {
   const LOCALHOST = ' - connect to localhost - '
   const NO_WORKSPACE = ' - none - '
   const ELECTRON = 'electron'
@@ -111,11 +111,10 @@ export function Workspace () {
         setCurrentWorkspace(global.fs.browser.currentWorkspace)
         global.dispatchFetchWorkspaceDirectory(ROOT_PATH)
       }
-      else 
-      { 
+      else {
         setCurrentWorkspace(NO_WORKSPACE)
       }
-      
+
     } else if (global.fs.mode === 'localhost') {
       global.dispatchFetchWorkspaceDirectory(ROOT_PATH)
       setCurrentWorkspace(LOCALHOST)
@@ -139,14 +138,14 @@ export function Workspace () {
   }, [currentWorkspace])
 
   const renameCurrentWorkspace = () => {
-    global.modal(intl.formatMessage({ id: 'filePanel.workspace.rename' }), renameModalMessage(), intl.formatMessage({ id: 'filePanel.ok' }), onFinishRenameWorkspace,  intl.formatMessage({ id: 'filePanel.cancel' }))
+    global.modal(intl.formatMessage({ id: 'filePanel.workspace.rename' }), renameModalMessage(), intl.formatMessage({ id: 'filePanel.ok' }), onFinishRenameWorkspace, intl.formatMessage({ id: 'filePanel.cancel' }))
   }
 
   const downloadCurrentWorkspace = () => {
-    global.modal(intl.formatMessage({ id: 'filePanel.workspace.download' }), intl.formatMessage({ id: 'filePanel.workspace.downloadConfirm' }), intl.formatMessage({ id: 'filePanel.ok' }), onFinishDownloadWorkspace,  intl.formatMessage({ id: 'filePanel.cancel' }))
+    global.modal(intl.formatMessage({ id: 'filePanel.workspace.download' }), intl.formatMessage({ id: 'filePanel.workspace.downloadConfirm' }), intl.formatMessage({ id: 'filePanel.ok' }), onFinishDownloadWorkspace, intl.formatMessage({ id: 'filePanel.cancel' }))
   }
   const createWorkspace = () => {
-    global.modal(intl.formatMessage({ id: 'filePanel.workspace.create' }), createModalMessage(), intl.formatMessage({ id: 'filePanel.ok' }), onFinishCreateWorkspace,  intl.formatMessage({ id: 'filePanel.cancel' }))
+    global.modal(intl.formatMessage({ id: 'filePanel.workspace.create' }), createModalMessage(), intl.formatMessage({ id: 'filePanel.ok' }), onFinishCreateWorkspace, intl.formatMessage({ id: 'filePanel.cancel' }))
   }
 
   const deleteCurrentWorkspace = () => {
@@ -241,7 +240,7 @@ export function Workspace () {
     try {
       await global.dispatchRenameWorkspace(currentWorkspace, workspaceName)
     } catch (e) {
-      global.modal(intl.formatMessage({ id: 'filePanel.workspace.rename' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => {}, intl.formatMessage({ id: 'filePanel.cancel' }))
+      global.modal(intl.formatMessage({ id: 'filePanel.workspace.rename' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => { }, intl.formatMessage({ id: 'filePanel.cancel' }))
       console.error(e)
     }
   }
@@ -250,7 +249,7 @@ export function Workspace () {
     try {
       await global.dispatchHandleDownloadWorkspace()
     } catch (e) {
-      global.modal(intl.formatMessage({ id: 'filePanel.workspace.download' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => {}, intl.formatMessage({ id: 'filePanel.cancel' }))
+      global.modal(intl.formatMessage({ id: 'filePanel.workspace.download' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => { }, intl.formatMessage({ id: 'filePanel.cancel' }))
       console.error(e)
     }
   }
@@ -270,13 +269,13 @@ export function Workspace () {
       // @ts-ignore: Object is possibly 'null'.
       pausable: pausableCheckboxRef.current.checked,
       // @ts-ignore: Object is possibly 'null'.
-      upgradeable: transparentRadioRef.current.checked ? transparentRadioRef.current.value : ( uupsRadioRef.current.checked ? uupsRadioRef.current.value : false )
+      upgradeable: transparentRadioRef.current.checked ? transparentRadioRef.current.value : (uupsRadioRef.current.checked ? uupsRadioRef.current.value : false)
     }
 
     try {
       await global.dispatchCreateWorkspace(workspaceName, workspaceTemplateName, opts, initGitRepo)
     } catch (e) {
-      global.modal(intl.formatMessage({ id: 'filePanel.workspace.create' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => {}, intl.formatMessage({ id: 'filePanel.cancel' }))
+      global.modal(intl.formatMessage({ id: 'filePanel.workspace.create' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => { }, intl.formatMessage({ id: 'filePanel.cancel' }))
       console.error(e)
     }
   }
@@ -285,7 +284,7 @@ export function Workspace () {
     try {
       await global.dispatchDeleteWorkspace(global.fs.browser.currentWorkspace)
     } catch (e) {
-      global.modal(intl.formatMessage({ id: 'filePanel.workspace.delete' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => {}, intl.formatMessage({ id: 'filePanel.cancel' }))
+      global.modal(intl.formatMessage({ id: 'filePanel.workspace.delete' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => { }, intl.formatMessage({ id: 'filePanel.cancel' }))
       console.error(e)
     }
   }
@@ -294,7 +293,7 @@ export function Workspace () {
     try {
       await global.dispatchDeleteAllWorkspaces()
     } catch (e) {
-      global.modal(intl.formatMessage({ id: 'filePanel.workspace.deleteAll' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => {}, intl.formatMessage({ id: 'filePanel.cancel' }))
+      global.modal(intl.formatMessage({ id: 'filePanel.workspace.deleteAll' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => { }, intl.formatMessage({ id: 'filePanel.cancel' }))
       console.error(e)
     }
   }
@@ -308,7 +307,7 @@ export function Workspace () {
       await global.dispatchSwitchToWorkspace(name)
       global.dispatchHandleExpandPath([])
     } catch (e) {
-      global.modal(intl.formatMessage({ id: 'filePanel.workspace.switch' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => {}, intl.formatMessage({ id: 'filePanel.cancel' }))
+      global.modal(intl.formatMessage({ id: 'filePanel.workspace.switch' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => { }, intl.formatMessage({ id: 'filePanel.cancel' }))
       console.error(e)
     }
   }
@@ -346,7 +345,7 @@ export function Workspace () {
         intl.formatMessage({ id: 'filePanel.workspace.clone' }),
         intl.formatMessage({ id: 'filePanel.workspace.cloneMessage' }),
         intl.formatMessage({ id: 'filePanel.ok' }),
-        () => {},
+        () => { },
         intl.formatMessage({ id: 'filePanel.cancel' })
       )
     }
@@ -372,7 +371,7 @@ export function Workspace () {
     try {
       global.dispatchDownloadPath(path)
     } catch (error) {
-      global.modal('Download Failed', 'Unexpected error while downloading: ' + typeof error === 'string' ? error : error.message, 'Close', async () => {})
+      global.modal('Download Failed', 'Unexpected error while downloading: ' + typeof error === 'string' ? error : error.message, 'Close', async () => { })
     }
   }
 
@@ -380,7 +379,7 @@ export function Workspace () {
     try {
       global.dispatchCopyFile(src, dest)
     } catch (error) {
-      global.modal('Copy File Failed', 'Unexpected error while copying file: ' + src, 'Close', async () => {})
+      global.modal('Copy File Failed', 'Unexpected error while copying file: ' + src, 'Close', async () => { })
     }
   }
 
@@ -388,7 +387,7 @@ export function Workspace () {
     try {
       global.dispatchCopyFolder(src, dest)
     } catch (error) {
-      global.modal('Copy Folder Failed', 'Unexpected error while copying folder: ' + src, 'Close', async () => {})
+      global.modal('Copy Folder Failed', 'Unexpected error while copying folder: ' + src, 'Close', async () => { })
     }
   }
 
@@ -460,15 +459,15 @@ export function Workspace () {
 
 
   const pushChangesToGist = (path?: string, type?: string) => {
-    global.modal('Create a public gist', 'Are you sure you want to push changes to remote gist file on github.com?', 'OK', () => toGist(path, type), 'Cancel', () => {})
+    global.modal('Create a public gist', 'Are you sure you want to push changes to remote gist file on github.com?', 'OK', () => toGist(path, type), 'Cancel', () => { })
   }
 
   const publishFolderToGist = (path?: string, type?: string) => {
-    global.modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${path} folder as a public gist on github.com?`, 'OK', () => toGist(path, type), 'Cancel', () => {})
+    global.modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${path} folder as a public gist on github.com?`, 'OK', () => toGist(path, type), 'Cancel', () => { })
   }
 
   const publishFileToGist = (path?: string, type?: string) => {
-    global.modal('Create a public gist', `Are you sure you want to anonymously publish ${path} file as a public gist on github.com?`, 'OK', () => toGist(path, type), 'Cancel', () => {})
+    global.modal('Create a public gist', `Are you sure you want to anonymously publish ${path} file as a public gist on github.com?`, 'OK', () => toGist(path, type), 'Cancel', () => { })
   }
 
   const deleteMessage = (path: string[]) => {
@@ -486,13 +485,17 @@ export function Workspace () {
     if (global.fs.readonly) return global.toast('cannot delete file. ' + name + ' is a read only explorer')
     if (!Array.isArray(path)) path = [path]
 
-    global.modal(`Delete ${path.length > 1 ? 'items' : 'item'}`, deleteMessage(path), 'OK', () => { global.dispatchDeletePath(path) }, 'Cancel', () => {})
+    global.modal(`Delete ${path.length > 1 ? 'items' : 'item'}`, deleteMessage(path), 'OK', () => { global.dispatchDeletePath(path) }, 'Cancel', () => { })
   }
 
   const toGist = (path?: string, type?: string) => {
     global.dispatchPublishToGist(path, type)
   }
 
+  const openFolderElectron = async () => {
+    global.dispatchOpenElectronFolder()
+  }
+
 
   const editModeOn = (path: string, type: string, isNew = false) => {
     if (global.fs.readonly) return global.toast('Cannot write/modify file system in read only mode.')
@@ -549,7 +552,7 @@ export function Workspace () {
       }
     } catch (e) {
       console.error(e)
-      global.modal(intl.formatMessage({ id: 'filePanel.checkoutGitBranch' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => {}, intl.formatMessage({ id: 'filePanel.cancel' }))
+      global.modal(intl.formatMessage({ id: 'filePanel.checkoutGitBranch' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => { }, intl.formatMessage({ id: 'filePanel.cancel' }))
     }
   }
 
@@ -558,66 +561,66 @@ export function Workspace () {
       await global.dispatchCreateNewBranch(branchFilter)
       _paq.push(['trackEvent', 'Workspace', 'GIT', 'switch_to_new_branch'])
     } catch (e) {
-      global.modal(intl.formatMessage({ id: 'filePanel.checkoutGitBranch' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => {}, intl.formatMessage({ id: 'filePanel.cancel' }))
+      global.modal(intl.formatMessage({ id: 'filePanel.checkoutGitBranch' }), e.message, intl.formatMessage({ id: 'filePanel.ok' }), () => { }, intl.formatMessage({ id: 'filePanel.cancel' }))
     }
   }
 
   const createModalMessage = () => {
     return (
       <>
-        <label id="selectWsTemplate" className="form-check-label" style={{fontWeight: "bolder"}}><FormattedMessage id='filePanel.workspace.chooseTemplate' /></label>
+        <label id="selectWsTemplate" className="form-check-label" style={{ fontWeight: "bolder" }}><FormattedMessage id='filePanel.workspace.chooseTemplate' /></label>
         <select name="wstemplate" className="mb-3 form-control custom-select" id="wstemplate" defaultValue='remixDefault' ref={workspaceCreateTemplateInput} onChange={updateWsName}>
-          <optgroup style={{fontSize: "medium"}} label="General">
-            <option style={{fontSize: "small"}} value='remixDefault'>Basic</option>
-            <option style={{fontSize: "small"}} value='blank'>Blank</option>
+          <optgroup style={{ fontSize: "medium" }} label="General">
+            <option style={{ fontSize: "small" }} value='remixDefault'>Basic</option>
+            <option style={{ fontSize: "small" }} value='blank'>Blank</option>
           </optgroup>
-          <optgroup style={{fontSize: "medium"}} label="OpenZeppelin">
-            <option style={{fontSize: "small"}} value='ozerc20'>ERC20</option>
-            <option style={{fontSize: "small"}} value='ozerc721'>ERC721</option>
-            <option style={{fontSize: "small"}} value='ozerc1155'>ERC1155</option>
+          <optgroup style={{ fontSize: "medium" }} label="OpenZeppelin">
+            <option style={{ fontSize: "small" }} value='ozerc20'>ERC20</option>
+            <option style={{ fontSize: "small" }} value='ozerc721'>ERC721</option>
+            <option style={{ fontSize: "small" }} value='ozerc1155'>ERC1155</option>
           </optgroup>
-          <optgroup style={{fontSize: "medium"}} label="0xProject">
-            <option style={{fontSize: "small"}} value='zeroxErc20'>ERC20</option>
+          <optgroup style={{ fontSize: "medium" }} label="0xProject">
+            <option style={{ fontSize: "small" }} value='zeroxErc20'>ERC20</option>
           </optgroup>
-          <optgroup style={{fontSize: "medium"}} label="GnosisSafe">
-            <option style={{fontSize: "small"}} value='gnosisSafeMultisig'>MultiSig Wallet</option>
+          <optgroup style={{ fontSize: "medium" }} label="GnosisSafe">
+            <option style={{ fontSize: "small" }} value='gnosisSafeMultisig'>MultiSig Wallet</option>
           </optgroup>
         </select>
 
-        <div id="ozcustomization" data-id="ozCustomization" ref={displayOzCustomRef} style={{display: 'none'}} className="mb-2">
-          <label className="form-check-label d-block mb-2" style={{fontWeight: "bolder"}}><FormattedMessage id='filePanel.customizeTemplate' /></label>
+        <div id="ozcustomization" data-id="ozCustomization" ref={displayOzCustomRef} style={{ display: 'none' }} className="mb-2">
+          <label className="form-check-label d-block mb-2" style={{ fontWeight: "bolder" }}><FormattedMessage id='filePanel.customizeTemplate' /></label>
 
           <label id="wsName" className="form-check-label d-block mb-1"><FormattedMessage id='filePanel.features' /></label>
           <div className="mb-2">
             <div className="d-flex ml-2 custom-control custom-checkbox">
-                <input className="custom-control-input" type="checkbox" name="feature" value="mintable" id="mintable" ref={mintableCheckboxRef} />
-                <label className="form-check-label custom-control-label" htmlFor="mintable" data-id="featureTypeMintable" >Mintable</label>
+              <input className="custom-control-input" type="checkbox" name="feature" value="mintable" id="mintable" ref={mintableCheckboxRef} />
+              <label className="form-check-label custom-control-label" htmlFor="mintable" data-id="featureTypeMintable" >Mintable</label>
             </div>
             <div className="d-flex ml-2 custom-control custom-checkbox">
-                <input className="custom-control-input" type="checkbox" name="feature" value="burnable" id="burnable" ref={burnableCheckboxRef} />
-                <label className="form-check-label custom-control-label" htmlFor="burnable" data-id="featureTypeBurnable" >Burnable</label>
+              <input className="custom-control-input" type="checkbox" name="feature" value="burnable" id="burnable" ref={burnableCheckboxRef} />
+              <label className="form-check-label custom-control-label" htmlFor="burnable" data-id="featureTypeBurnable" >Burnable</label>
             </div>
             <div className="d-flex ml-2 custom-control custom-checkbox">
-                <input className="custom-control-input" type="checkbox" name="feature" value="pausable" id="pausable" ref={pausableCheckboxRef} />
-                <label className="form-check-label custom-control-label" htmlFor="pausable" data-id="featureTypePausable" >Pausable</label>
+              <input className="custom-control-input" type="checkbox" name="feature" value="pausable" id="pausable" ref={pausableCheckboxRef} />
+              <label className="form-check-label custom-control-label" htmlFor="pausable" data-id="featureTypePausable" >Pausable</label>
             </div>
           </div>
 
           <label id="wsName" className="form-check-label d-block mb-1"><FormattedMessage id='filePanel.upgradeability' /></label>
           <div>
             <div className="d-flex ml-2 custom-control custom-radio">
-                <input className="custom-control-input" type="radio" name="upgradeability" value="transparent" id="transparent" ref={transparentRadioRef} />
-                <label className="form-check-label custom-control-label" htmlFor="transparent" data-id="upgradeTypeTransparent" >Transparent</label>
+              <input className="custom-control-input" type="radio" name="upgradeability" value="transparent" id="transparent" ref={transparentRadioRef} />
+              <label className="form-check-label custom-control-label" htmlFor="transparent" data-id="upgradeTypeTransparent" >Transparent</label>
             </div>
             <div className="d-flex ml-2 custom-control custom-radio">
-                <input className="custom-control-input" type="radio" name="upgradeability" value="uups" id="uups" ref={uupsRadioRef} />
-                <label className="form-check-label custom-control-label" htmlFor="uups" data-id="upgradeTypeUups" >UUPS</label>
+              <input className="custom-control-input" type="radio" name="upgradeability" value="uups" id="uups" ref={uupsRadioRef} />
+              <label className="form-check-label custom-control-label" htmlFor="uups" data-id="upgradeTypeUups" >UUPS</label>
             </div>
           </div>
 
         </div>
 
-        <label id="wsName" className="form-check-label" style={{fontWeight: "bolder"}} ><FormattedMessage id='filePanel.workspaceName' /></label>
+        <label id="wsName" className="form-check-label" style={{ fontWeight: "bolder" }} ><FormattedMessage id='filePanel.workspaceName' /></label>
         <input type="text" data-id="modalDialogCustomPromptTextCreate" defaultValue={global.plugin.getAvailableWorkspaceName(TEMPLATE_NAMES['remixDefault'])} ref={workspaceCreateInput} className="form-control" />
 
         <div className="d-flex py-2 align-items-center custom-control custom-checkbox">
@@ -628,7 +631,7 @@ export function Workspace () {
             className="form-check-input custom-control-input"
             type="checkbox"
             disabled={!global.fs.gitConfig.username || !global.fs.gitConfig.email}
-            onChange={() => {}}
+            onChange={() => { }}
           />
           <label
             htmlFor="initGitRepository"
@@ -641,8 +644,8 @@ export function Workspace () {
         </div>
         {!global.fs.gitConfig.username || !global.fs.gitConfig.email ?
           (
-          <div className='text-warning'><FormattedMessage id='filePanel.initGitRepositoryWarning' /></div>)
-          :<></>
+            <div className='text-warning'><FormattedMessage id='filePanel.initGitRepositoryWarning' /></div>)
+          : <></>
         }
 
       </>
@@ -652,7 +655,7 @@ export function Workspace () {
   const renameModalMessage = () => {
     return (
       <>
-        <input type="text" data-id="modalDialogCustomPromptTextRename" defaultValue={ currentWorkspace } ref={workspaceRenameInput} className="form-control" />
+        <input type="text" data-id="modalDialogCustomPromptTextRename" defaultValue={currentWorkspace} ref={workspaceRenameInput} className="form-control" />
       </>
     )
   }
@@ -677,22 +680,22 @@ export function Workspace () {
 
   return (
     <div className='d-flex flex-column justify-content-between h-100'>
-      <div className='remixui_container overflow-auto' style={{ maxHeight: selectedWorkspace && selectedWorkspace.isGitRepo ? '95%' : '100%' }} onContextMenu={(e)=>{
+      <div className='remixui_container overflow-auto' style={{ maxHeight: selectedWorkspace && selectedWorkspace.isGitRepo ? '95%' : '100%' }} onContextMenu={(e) => {
         e.preventDefault()
         handleContextMenu(e.pageX, e.pageY, ROOT_PATH, "workspace", 'workspace')
       }
-        }>
+      }>
         <div className='d-flex flex-column w-100 remixui_fileexplorer' data-id="remixUIWorkspaceExplorer" onClick={resetFocus}>
           <div>
             <header>
               <div className="mx-2 mb-2 d-flex flex-column">
                 <div className="d-flex justify-content-between">
-                  {!isElectron() ? 
-                  <span className="d-flex align-items-end">
-                    <label className="pl-1 form-check-label" htmlFor="workspacesSelect" style={{wordBreak: 'keep-all'}}>
-                      <FormattedMessage id='filePanel.workspace' />
-                    </label>
-                  </span>: null}
+                  {!isElectron() ?
+                    <span className="d-flex align-items-end">
+                      <label className="pl-1 form-check-label" htmlFor="workspacesSelect" style={{ wordBreak: 'keep-all' }}>
+                        <FormattedMessage id='filePanel.workspace' />
+                      </label>
+                    </span> : null}
                   {currentWorkspace !== LOCALHOST && !isElectron() ? (<span className="remixui_menu remixui_topmenu d-flex justify-content-between align-items-end w-75">
                     <CustomTooltip
                       placement="top"
@@ -711,7 +714,7 @@ export function Workspace () {
                         }}
                         style={{ fontSize: 'medium' }}
                         className='far fa-plus remixui_menuicon d-flex align-self-end'
-                        >
+                      >
                       </span>
                     </CustomTooltip>
                     <Dropdown id="workspacesMenuDropdown" data-id="workspacesMenuDropdown" onToggle={() => hideIconsMenu(!showIconsMenu)} show={showIconsMenu}>
@@ -737,262 +740,267 @@ export function Workspace () {
                           addSlitherGithubAction={addSlitherGithubAction}
                           addTsSolTestGithubAction={addTsSolTestGithubAction}
                           showIconsMenu={showIconsMenu}
-                          hideWorkspaceOptions={ currentWorkspace === LOCALHOST }
-                          hideLocalhostOptions={ currentWorkspace === NO_WORKSPACE }
-                          />
+                          hideWorkspaceOptions={currentWorkspace === LOCALHOST}
+                          hideLocalhostOptions={currentWorkspace === NO_WORKSPACE}
+                        />
                       </Dropdown.Menu>
                     </Dropdown>
                   </span>) : null}
                 </div>
                 {!isElectron() ? (
-                <Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
-                  <Dropdown.Toggle
-                    as={CustomToggle}
-                    id="dropdown-custom-components"
-                    className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1"
-                    icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
-                  >
-                    { selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly("localhost") : NO_WORKSPACE }
-                  </Dropdown.Toggle>
-
-                  <Dropdown.Menu as={CustomMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items">
-                    <Dropdown.Item
-                      onClick={() => {
-                        createWorkspace()
-                      }}
+                  <Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
+                    <Dropdown.Toggle
+                      as={CustomToggle}
+                      id="dropdown-custom-components"
+                      className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1"
+                      icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
                     >
+                      {selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly("localhost") : NO_WORKSPACE}
+                    </Dropdown.Toggle>
+
+                    <Dropdown.Menu as={CustomMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items">
+                      <Dropdown.Item
+                        onClick={() => {
+                          createWorkspace()
+                        }}
+                      >
+                        {
+                          <span className="pl-3"> - create a new workspace - </span>
+                        }
+                      </Dropdown.Item>
+                      <Dropdown.Item onClick={() => { switchWorkspace(LOCALHOST) }}>{currentWorkspace === LOCALHOST ? <span>&#10003; localhost </span> : <span className="pl-3"> {LOCALHOST} </span>}</Dropdown.Item>
+                      <Dropdown.Item onClick={() => { switchWorkspace(ELECTRON) }}>{currentWorkspace === ELECTRON ? <span>&#10003; electron </span> : <span className="pl-3"> {ELECTRON} </span>}</Dropdown.Item>
                       {
-                        <span className="pl-3"> - create a new workspace - </span>
-                      }
-                    </Dropdown.Item>
-                    <Dropdown.Item onClick={() => { switchWorkspace(LOCALHOST) }}>{currentWorkspace === LOCALHOST ? <span>&#10003; localhost </span> : <span className="pl-3"> { LOCALHOST } </span>}</Dropdown.Item>
-                    <Dropdown.Item onClick={() => { switchWorkspace(ELECTRON) }}>{currentWorkspace === ELECTRON ? <span>&#10003; electron </span> : <span className="pl-3"> { ELECTRON } </span>}</Dropdown.Item>
-                    {
-                      global.fs.browser.workspaces.map(({ name, isGitRepo }, index) => (
-                        <Dropdown.Item
-                          key={index}
-                          onClick={() => {
-                            switchWorkspace(name)
-                          }}
-                          data-id={`dropdown-item-${name}`}
-                        >
-                          { isGitRepo ?
-                            <div className='d-flex justify-content-between'>
-                              <span>{ currentWorkspace === name ? <span>&#10003; { name } </span> : <span className="pl-3">{ name }</span> }</span>
-                              <i className='fas fa-code-branch pt-1'></i>
-                            </div> :
-                            <span>{ currentWorkspace === name ? <span>&#10003; { name } </span> : <span className="pl-3">{ name }</span> }</span>
-                          }
+                        global.fs.browser.workspaces.map(({ name, isGitRepo }, index) => (
+                          <Dropdown.Item
+                            key={index}
+                            onClick={() => {
+                              switchWorkspace(name)
+                            }}
+                            data-id={`dropdown-item-${name}`}
+                          >
+                            {isGitRepo ?
+                              <div className='d-flex justify-content-between'>
+                                <span>{currentWorkspace === name ? <span>&#10003; {name} </span> : <span className="pl-3">{name}</span>}</span>
+                                <i className='fas fa-code-branch pt-1'></i>
+                              </div> :
+                              <span>{currentWorkspace === name ? <span>&#10003; {name} </span> : <span className="pl-3">{name}</span>}</span>
+                            }
                           </Dropdown.Item>
                         ))
                       }
-                      { ((global.fs.browser.workspaces.length <= 0) || currentWorkspace === NO_WORKSPACE) && <Dropdown.Item onClick={() => { switchWorkspace(NO_WORKSPACE) }}>{ <span className="pl-3">NO_WORKSPACE</span> }</Dropdown.Item> }
+                      {((global.fs.browser.workspaces.length <= 0) || currentWorkspace === NO_WORKSPACE) && <Dropdown.Item onClick={() => { switchWorkspace(NO_WORKSPACE) }}>{<span className="pl-3">NO_WORKSPACE</span>}</Dropdown.Item>}
                     </Dropdown.Menu>
                   </Dropdown>
                 ) : null}
-                </div>
-              </header>
-            </div>
-            <div className='h-100 remixui_fileExplorerTree' onFocus={() => { toggleDropdown(false) }}>
+              </div>
+            </header>
+          </div>
+          {isElectron() && global.fs.browser.isSuccessfulDirectory ? null :
+            <div onClick={openFolderElectron} className='btn btn-primary'>Open Folder</div>
+          }
+          <div className='h-100 remixui_fileExplorerTree' onFocus={() => { toggleDropdown(false) }}>
             <div className='h-100'>
-            { (global.fs.browser.isRequestingWorkspace || global.fs.browser.isRequestingCloning) && <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>}
-            { !(global.fs.browser.isRequestingWorkspace || global.fs.browser.isRequestingCloning) &&
-              (global.fs.mode === 'browser') && (currentWorkspace !== NO_WORKSPACE) &&
-              <div className='h-100 remixui_treeview' data-id='filePanelFileExplorerTree'>
-                <FileExplorer
-                  fileState={global.fs.browser.fileState}
-                  name={currentWorkspace}
-                  menuItems={['createNewFile', 'createNewFolder', 'publishToGist', canUpload ? 'uploadFile' : '', canUpload ? 'uploadFolder' : '']}
-                  contextMenuItems={global.fs.browser.contextMenu.registeredMenuItems}
-                  removedContextMenuItems={global.fs.browser.contextMenu.removedMenuItems}
-                  files={global.fs.browser.files}
-                  workspaceState={state}
-                  expandPath={global.fs.browser.expandPath}
-                  focusEdit={global.fs.focusEdit}
-                  focusElement={global.fs.focusElement}
-                  hideIconsMenu={hideIconsMenu}
-                  showIconsMenu={showIconsMenu}
-                  dispatchCreateNewFile={global.dispatchCreateNewFile}
-                  modal={global.modal}
-                  dispatchCreateNewFolder={global.dispatchCreateNewFolder}
-                  readonly={global.fs.readonly}
-                  toast={global.toast}
-                  dispatchDeletePath={global.dispatchDeletePath}
-                  dispatchRenamePath={global.dispatchRenamePath}
-                  dispatchDownloadPath={global.dispatchDownloadPath}
-                  dispatchUploadFile={global.dispatchUploadFile}
-                  dispatchUploadFolder={global.dispatchUploadFolder}
-                  dispatchCopyFile={global.dispatchCopyFile}
-                  dispatchCopyFolder={global.dispatchCopyFolder}
-                  dispatchPublishToGist={global.dispatchPublishToGist}
-                  dispatchRunScript={global.dispatchRunScript}
-                  dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
-                  dispatchHandleClickFile={global.dispatchHandleClickFile}
-                  dispatchSetFocusElement={global.dispatchSetFocusElement}
-                  dispatchFetchDirectory={global.dispatchFetchDirectory}
-                  dispatchRemoveInputField={global.dispatchRemoveInputField}
-                  dispatchAddInputField={global.dispatchAddInputField}
-                  dispatchHandleExpandPath={global.dispatchHandleExpandPath}
-                  dispatchMoveFile={global.dispatchMoveFile}
-                  dispatchMoveFolder={global.dispatchMoveFolder}
-                  handleCopyClick={handleCopyClick}
-                  handlePasteClick={handlePasteClick}
-                  addMenuItems={addMenuItems}
-                  removeMenuItems={removeMenuItems}
-                  handleContextMenu={handleContextMenu}
-                  uploadFile={uploadFile}
-                  uploadFolder={uploadFolder}
-                  getFocusedFolder={getFocusedFolder}
-                  toGist={toGist}
-                  editModeOn={editModeOn}
-                  handleNewFileInput={handleNewFileInput}
-                  handleNewFolderInput={handleNewFolderInput}
+              {(global.fs.browser.isRequestingWorkspace || global.fs.browser.isRequestingCloning) && <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>}
+              {!(global.fs.browser.isRequestingWorkspace || global.fs.browser.isRequestingCloning) &&
+                (global.fs.mode === 'browser') && (currentWorkspace !== NO_WORKSPACE) &&
+                <div className='h-100 remixui_treeview' data-id='filePanelFileExplorerTree'>
+                  <FileExplorer
+                    fileState={global.fs.browser.fileState}
+                    name={currentWorkspace}
+                    menuItems={['createNewFile', 'createNewFolder', 'publishToGist', canUpload ? 'uploadFile' : '', canUpload ? 'uploadFolder' : '']}
+                    contextMenuItems={global.fs.browser.contextMenu.registeredMenuItems}
+                    removedContextMenuItems={global.fs.browser.contextMenu.removedMenuItems}
+                    files={global.fs.browser.files}
+                    workspaceState={state}
+                    expandPath={global.fs.browser.expandPath}
+                    focusEdit={global.fs.focusEdit}
+                    focusElement={global.fs.focusElement}
+                    hideIconsMenu={hideIconsMenu}
+                    showIconsMenu={showIconsMenu}
+                    dispatchCreateNewFile={global.dispatchCreateNewFile}
+                    modal={global.modal}
+                    dispatchCreateNewFolder={global.dispatchCreateNewFolder}
+                    readonly={global.fs.readonly}
+                    toast={global.toast}
+                    dispatchDeletePath={global.dispatchDeletePath}
+                    dispatchRenamePath={global.dispatchRenamePath}
+                    dispatchDownloadPath={global.dispatchDownloadPath}
+                    dispatchUploadFile={global.dispatchUploadFile}
+                    dispatchUploadFolder={global.dispatchUploadFolder}
+                    dispatchCopyFile={global.dispatchCopyFile}
+                    dispatchCopyFolder={global.dispatchCopyFolder}
+                    dispatchPublishToGist={global.dispatchPublishToGist}
+                    dispatchRunScript={global.dispatchRunScript}
+                    dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
+                    dispatchHandleClickFile={global.dispatchHandleClickFile}
+                    dispatchSetFocusElement={global.dispatchSetFocusElement}
+                    dispatchFetchDirectory={global.dispatchFetchDirectory}
+                    dispatchRemoveInputField={global.dispatchRemoveInputField}
+                    dispatchAddInputField={global.dispatchAddInputField}
+                    dispatchHandleExpandPath={global.dispatchHandleExpandPath}
+                    dispatchMoveFile={global.dispatchMoveFile}
+                    dispatchMoveFolder={global.dispatchMoveFolder}
+                    handleCopyClick={handleCopyClick}
+                    handlePasteClick={handlePasteClick}
+                    addMenuItems={addMenuItems}
+                    removeMenuItems={removeMenuItems}
+                    handleContextMenu={handleContextMenu}
+                    uploadFile={uploadFile}
+                    uploadFolder={uploadFolder}
+                    getFocusedFolder={getFocusedFolder}
+                    toGist={toGist}
+                    editModeOn={editModeOn}
+                    handleNewFileInput={handleNewFileInput}
+                    handleNewFolderInput={handleNewFolderInput}
                   />
-              </div>
-            }
-            { global.fs.localhost.isRequestingLocalhost && <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div> }
-            { (global.fs.mode === 'localhost' && global.fs.localhost.isSuccessfulLocalhost) &&
-              <div className='h-100 filesystemexplorer remixui_treeview'>
-                <FileExplorer
-                  name='localhost'
-                  menuItems={['createNewFile', 'createNewFolder']}
-                  contextMenuItems={global.fs.localhost.contextMenu.registeredMenuItems}
-                  removedContextMenuItems={global.fs.localhost.contextMenu.removedMenuItems}
-                  files={global.fs.localhost.files}
-                  fileState={[]}
-                  workspaceState={state}
-                  expandPath={global.fs.localhost.expandPath}
-                  focusEdit={global.fs.focusEdit}
-                  focusElement={global.fs.focusElement}
-                  hideIconsMenu={hideIconsMenu}
-                  showIconsMenu={showIconsMenu}
-                  dispatchCreateNewFile={global.dispatchCreateNewFile}
-                  modal={global.modal}
-                  dispatchCreateNewFolder={global.dispatchCreateNewFolder}
-                  readonly={global.fs.readonly}
-                  toast={global.toast}
-                  dispatchDeletePath={global.dispatchDeletePath}
-                  dispatchRenamePath={global.dispatchRenamePath}
-                  dispatchDownloadPath={global.dispatchDownloadPath}
-                  dispatchUploadFile={global.dispatchUploadFile}
-                  dispatchUploadFolder={global.dispatchUploadFolder}
-                  dispatchCopyFile={global.dispatchCopyFile}
-                  dispatchCopyFolder={global.dispatchCopyFolder}
-                  dispatchPublishToGist={global.dispatchPublishToGist}
-                  dispatchRunScript={global.dispatchRunScript}
-                  dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
-                  dispatchHandleClickFile={global.dispatchHandleClickFile}
-                  dispatchSetFocusElement={global.dispatchSetFocusElement}
-                  dispatchFetchDirectory={global.dispatchFetchDirectory}
-                  dispatchRemoveInputField={global.dispatchRemoveInputField}
-                  dispatchAddInputField={global.dispatchAddInputField}
-                  dispatchHandleExpandPath={global.dispatchHandleExpandPath}
-                  dispatchMoveFile={global.dispatchMoveFile}
-                  dispatchMoveFolder={global.dispatchMoveFolder}
-                  handleCopyClick={handleCopyClick}
-                  handlePasteClick={handlePasteClick}
-                  addMenuItems={addMenuItems}
-                  removeMenuItems={removeMenuItems}
-                  handleContextMenu={handleContextMenu}
-                  uploadFile={uploadFile}
-                  uploadFolder={uploadFolder}
-                  getFocusedFolder={getFocusedFolder}
-                  toGist={toGist}
-                  editModeOn={editModeOn}
-                  handleNewFileInput={handleNewFileInput}
-                  handleNewFolderInput={handleNewFolderInput}
-                />
-              </div>
-            }
+                </div>
+              }
+
+              {global.fs.localhost.isRequestingLocalhost && <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>}
+              {(global.fs.mode === 'localhost' && global.fs.localhost.isSuccessfulLocalhost) &&
+                <div className='h-100 filesystemexplorer remixui_treeview'>
+                  <FileExplorer
+                    name='localhost'
+                    menuItems={['createNewFile', 'createNewFolder']}
+                    contextMenuItems={global.fs.localhost.contextMenu.registeredMenuItems}
+                    removedContextMenuItems={global.fs.localhost.contextMenu.removedMenuItems}
+                    files={global.fs.localhost.files}
+                    fileState={[]}
+                    workspaceState={state}
+                    expandPath={global.fs.localhost.expandPath}
+                    focusEdit={global.fs.focusEdit}
+                    focusElement={global.fs.focusElement}
+                    hideIconsMenu={hideIconsMenu}
+                    showIconsMenu={showIconsMenu}
+                    dispatchCreateNewFile={global.dispatchCreateNewFile}
+                    modal={global.modal}
+                    dispatchCreateNewFolder={global.dispatchCreateNewFolder}
+                    readonly={global.fs.readonly}
+                    toast={global.toast}
+                    dispatchDeletePath={global.dispatchDeletePath}
+                    dispatchRenamePath={global.dispatchRenamePath}
+                    dispatchDownloadPath={global.dispatchDownloadPath}
+                    dispatchUploadFile={global.dispatchUploadFile}
+                    dispatchUploadFolder={global.dispatchUploadFolder}
+                    dispatchCopyFile={global.dispatchCopyFile}
+                    dispatchCopyFolder={global.dispatchCopyFolder}
+                    dispatchPublishToGist={global.dispatchPublishToGist}
+                    dispatchRunScript={global.dispatchRunScript}
+                    dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
+                    dispatchHandleClickFile={global.dispatchHandleClickFile}
+                    dispatchSetFocusElement={global.dispatchSetFocusElement}
+                    dispatchFetchDirectory={global.dispatchFetchDirectory}
+                    dispatchRemoveInputField={global.dispatchRemoveInputField}
+                    dispatchAddInputField={global.dispatchAddInputField}
+                    dispatchHandleExpandPath={global.dispatchHandleExpandPath}
+                    dispatchMoveFile={global.dispatchMoveFile}
+                    dispatchMoveFolder={global.dispatchMoveFolder}
+                    handleCopyClick={handleCopyClick}
+                    handlePasteClick={handlePasteClick}
+                    addMenuItems={addMenuItems}
+                    removeMenuItems={removeMenuItems}
+                    handleContextMenu={handleContextMenu}
+                    uploadFile={uploadFile}
+                    uploadFolder={uploadFolder}
+                    getFocusedFolder={getFocusedFolder}
+                    toGist={toGist}
+                    editModeOn={editModeOn}
+                    handleNewFileInput={handleNewFileInput}
+                    handleNewFolderInput={handleNewFolderInput}
+                  />
+                </div>
+              }
             </div>
           </div>
         </div>
-        </div>
-        {
-          selectedWorkspace &&
-          <div className={`bg-light border-top ${selectedWorkspace.isGitRepo && currentBranch ? 'd-block' : 'd-none'}`} data-id="workspaceGitPanel">
-            <div className='d-flex justify-space-between p-1'>
-              <div className="mr-auto text-uppercase text-dark pt-2 pl-2">GIT</div>
-              <div className="pt-1 mr-1" data-id="workspaceGitBranchesDropdown">
-                <Dropdown style={{ height: 30, minWidth: 80 }} onToggle={toggleBranches} show={showBranches} drop={'up'}>
-                  <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control h-100 p-0 pl-2 pr-2 text-dark" icon={null}>
-                    { global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : currentBranch || '-none-' }
-                  </Dropdown.Toggle>
-
-                  <Dropdown.Menu as={CustomMenu} className='custom-dropdown-items branches-dropdown'>
-                    <div data-id="custom-dropdown-menu">
-                      <div className='d-flex text-dark' style={{ fontSize: 14, fontWeight: 'bold' }}>
-                        <span className='mt-2 ml-2 mr-auto'><FormattedMessage id='filePanel.switchBranches' /></span>
-                        <div className='pt-2 pr-2' onClick={() => { toggleBranches(false) }}><i className='fa fa-close'></i>
-                        </div>
-                      </div>
-                      <div className='border-top py-2'>
-                        <input
-                          className='form-control border checkout-input bg-light'
-                          placeholder={intl.formatMessage({ id: 'filePanel.findOrCreateABranch' })}
-                          style={{ minWidth: 225 }}
-                          onChange={handleBranchFilterChange}
-                          data-id='workspaceGitInput'
-                        />
+
+      </div>
+      {
+        selectedWorkspace &&
+        <div className={`bg-light border-top ${selectedWorkspace.isGitRepo && currentBranch ? 'd-block' : 'd-none'}`} data-id="workspaceGitPanel">
+          <div className='d-flex justify-space-between p-1'>
+            <div className="mr-auto text-uppercase text-dark pt-2 pl-2">GIT</div>
+            <div className="pt-1 mr-1" data-id="workspaceGitBranchesDropdown">
+              <Dropdown style={{ height: 30, minWidth: 80 }} onToggle={toggleBranches} show={showBranches} drop={'up'}>
+                <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control h-100 p-0 pl-2 pr-2 text-dark" icon={null}>
+                  {global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : currentBranch || '-none-'}
+                </Dropdown.Toggle>
+
+                <Dropdown.Menu as={CustomMenu} className='custom-dropdown-items branches-dropdown'>
+                  <div data-id="custom-dropdown-menu">
+                    <div className='d-flex text-dark' style={{ fontSize: 14, fontWeight: 'bold' }}>
+                      <span className='mt-2 ml-2 mr-auto'><FormattedMessage id='filePanel.switchBranches' /></span>
+                      <div className='pt-2 pr-2' onClick={() => { toggleBranches(false) }}><i className='fa fa-close'></i>
                       </div>
-                      <div className='border-top' style={{ maxHeight: 120, overflowY: 'scroll' }} data-id="custom-dropdown-items">
-                        {
-                          filteredBranches.length > 0 ? filteredBranches.map((branch, index) => {
-                            return (
-                              <Dropdown.Item key={index} onClick={() => { switchToBranch(branch) }} title={branch.remote ? 'Checkout new branch from remote branch' : 'Checkout to local branch'}>
-                                <div data-id={`workspaceGit-${ branch.remote ? `${branch.remote}/${branch.name}` : branch.name }`}>
-                                  {
-                                    (currentBranch === branch.name) && !branch.remote ?
-                                    <span>&#10003; <i className='far fa-code-branch'></i><span className='pl-1'>{ branch.name }</span></span> :
-                                    <span className='pl-3'><i className={`far ${ branch.remote ? 'fa-cloud' : 'fa-code-branch'}`}></i><span className='pl-1'>{ branch.remote ? `${branch.remote}/${branch.name}` : branch.name }</span></span>
-                                  }
-                                </div>
-                              </Dropdown.Item>
-                            )
-                          }) :
+                    </div>
+                    <div className='border-top py-2'>
+                      <input
+                        className='form-control border checkout-input bg-light'
+                        placeholder={intl.formatMessage({ id: 'filePanel.findOrCreateABranch' })}
+                        style={{ minWidth: 225 }}
+                        onChange={handleBranchFilterChange}
+                        data-id='workspaceGitInput'
+                      />
+                    </div>
+                    <div className='border-top' style={{ maxHeight: 120, overflowY: 'scroll' }} data-id="custom-dropdown-items">
+                      {
+                        filteredBranches.length > 0 ? filteredBranches.map((branch, index) => {
+                          return (
+                            <Dropdown.Item key={index} onClick={() => { switchToBranch(branch) }} title={branch.remote ? 'Checkout new branch from remote branch' : 'Checkout to local branch'}>
+                              <div data-id={`workspaceGit-${branch.remote ? `${branch.remote}/${branch.name}` : branch.name}`}>
+                                {
+                                  (currentBranch === branch.name) && !branch.remote ?
+                                    <span>&#10003; <i className='far fa-code-branch'></i><span className='pl-1'>{branch.name}</span></span> :
+                                    <span className='pl-3'><i className={`far ${branch.remote ? 'fa-cloud' : 'fa-code-branch'}`}></i><span className='pl-1'>{branch.remote ? `${branch.remote}/${branch.name}` : branch.name}</span></span>
+                                }
+                              </div>
+                            </Dropdown.Item>
+                          )
+                        }) :
                           <Dropdown.Item onClick={switchToNewBranch}>
                             <div className="pl-1 pr-1" data-id="workspaceGitCreateNewBranch">
-                              <i className="fas fa-code-branch pr-2"></i><span><FormattedMessage id='filePanel.createBranch' />: { branchFilter } from '{currentBranch}'</span>
+                              <i className="fas fa-code-branch pr-2"></i><span><FormattedMessage id='filePanel.createBranch' />: {branchFilter} from '{currentBranch}'</span>
                             </div>
                           </Dropdown.Item>
-                        }
-                      </div>
-                      {
-                        (selectedWorkspace.branches || []).length > 4 && <div className='text-center border-top pt-2'><label style={{ fontSize: 12, cursor: 'pointer' }} onClick={showAllBranches}><FormattedMessage id='filePanel.viewAllBranches' /></label></div>
                       }
                     </div>
-                  </Dropdown.Menu>
-                </Dropdown>
-              </div>
+                    {
+                      (selectedWorkspace.branches || []).length > 4 && <div className='text-center border-top pt-2'><label style={{ fontSize: 12, cursor: 'pointer' }} onClick={showAllBranches}><FormattedMessage id='filePanel.viewAllBranches' /></label></div>
+                    }
+                  </div>
+                </Dropdown.Menu>
+              </Dropdown>
             </div>
           </div>
-        }
-        {state.showContextMenu && <FileExplorerContextMenu
-          actions={global.fs.focusElement.length > 1 ? state.actions.filter(item => item.multiselect) : state.actions.filter(item => !item.multiselect)}
-          hideContextMenu={hideContextMenu}
-          createNewFile={handleNewFileInput}
-          createNewFolder={handleNewFolderInput}
-          deletePath={deletePath}
-          renamePath={editModeOn}
-          runScript={runScript}
-          copy={handleCopyClick}
-          paste={handlePasteClick}
-          copyFileName={handleCopyFileNameClick}
-          copyPath={handleCopyFilePathClick}
-          emit={emitContextMenuEvent}
-          pageX={state.focusContext.x}
-          pageY={state.focusContext.y}
-          path={state.focusContext.element}
-          type={state.focusContext.type}
-          focus={global.fs.focusElement}
-          pushChangesToGist={pushChangesToGist}
-          publishFolderToGist={publishFolderToGist}
-          publishFileToGist={publishFileToGist}
-          uploadFile={uploadFile}
-          downloadPath={downloadPath}
-
-        />
-        }
+        </div>
+      }
+      {state.showContextMenu && <FileExplorerContextMenu
+        actions={global.fs.focusElement.length > 1 ? state.actions.filter(item => item.multiselect) : state.actions.filter(item => !item.multiselect)}
+        hideContextMenu={hideContextMenu}
+        createNewFile={handleNewFileInput}
+        createNewFolder={handleNewFolderInput}
+        deletePath={deletePath}
+        renamePath={editModeOn}
+        runScript={runScript}
+        copy={handleCopyClick}
+        paste={handlePasteClick}
+        copyFileName={handleCopyFileNameClick}
+        copyPath={handleCopyFilePathClick}
+        emit={emitContextMenuEvent}
+        pageX={state.focusContext.x}
+        pageY={state.focusContext.y}
+        path={state.focusContext.element}
+        type={state.focusContext.type}
+        focus={global.fs.focusElement}
+        pushChangesToGist={pushChangesToGist}
+        publishFolderToGist={publishFolderToGist}
+        publishFileToGist={publishFileToGist}
+        uploadFile={uploadFile}
+        downloadPath={downloadPath}
+
+      />
+      }
     </div>
   )
 }