open folder

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();
   

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> {
+
+    }
+
+}

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('/')) {

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
+}

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 }))

libs/remix-ui/workspace/src/lib/actions/workspace.ts

@@ -735,6 +735,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)

libs/remix-ui/workspace/src/lib/contexts/index.ts

@@ -45,6 +45,7 @@ export const FileSystemContext = createContext<{
   dispatchCreateSolidityGithubAction: () => Promise<void>,
   dispatchCreateTsSolGithubAction: () => Promise<void>,
   dispatchCreateSlitherGithubAction: () => Promise<void>
+  dispatchOpenElectronFolder: () => Promise<void>
 }>(null)
   
     

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
+  showAllBranches, switchBranch, createNewBranch, checkoutRemoteBranch, createSolidityGithubAction, createTsSolGithubAction, createSlitherGithubAction, openElectronFolder
 } from '../actions'
 import { Modal, WorkspaceProps, WorkspaceTemplate } from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -183,6 +183,12 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     await createSlitherGithubAction()
   }
 
+  const dispatchOpenElectronFolder = async () => {
+    console.log('open electron folder')
+    await openElectronFolder()
+  }
+
+
   useEffect(() => {
     dispatchInitWorkspace()
   }, [])
@@ -299,7 +305,8 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     dispatchCheckoutRemoteBranch,
     dispatchCreateSolidityGithubAction,
     dispatchCreateTsSolGithubAction,
-    dispatchCreateSlitherGithubAction
+    dispatchCreateSlitherGithubAction,
+    dispatchOpenElectronFolder
   }
   return (
     <FileSystemContext.Provider value={value}>

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'
@@ -109,8 +109,7 @@ export function Workspace () {
         setCurrentWorkspace(global.fs.browser.currentWorkspace)
         global.dispatchFetchWorkspaceDirectory(ROOT_PATH)
       }
-      else 
-      { 
+      else {
         setCurrentWorkspace(NO_WORKSPACE)
       }
 
@@ -235,7 +234,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)
     }
   }
@@ -244,7 +243,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)
     }
   }
@@ -264,13 +263,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)
     }
   }
@@ -279,7 +278,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)
     }
   }
@@ -288,7 +287,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)
     }
   }
@@ -302,7 +301,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)
     }
   }
@@ -340,7 +339,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' })
       )
     }
@@ -366,7 +365,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 () => { })
     }
   }
 
@@ -374,7 +373,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 () => { })
     }
   }
 
@@ -382,7 +381,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 () => { })
     }
   }
 
@@ -454,15 +453,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[]) => {
@@ -480,13 +479,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.')
@@ -543,7 +546,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' }))
     }
   }
 
@@ -552,34 +555,34 @@ 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">
@@ -611,7 +614,7 @@ export function Workspace () {
 
         </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">
@@ -622,7 +625,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"
@@ -636,7 +639,7 @@ export function Workspace () {
         {!global.fs.gitConfig.username || !global.fs.gitConfig.email ?
           (
             <div className='text-warning'><FormattedMessage id='filePanel.initGitRepositoryWarning' /></div>)
-          :<></>
+          : <></>
         }
 
       </>
@@ -646,7 +649,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" />
       </>
     )
   }
@@ -671,7 +674,7 @@ 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')
       }
@@ -683,10 +686,10 @@ export function Workspace () {
                 <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'}}>
+                      <label className="pl-1 form-check-label" htmlFor="workspacesSelect" style={{ wordBreak: 'keep-all' }}>
                         <FormattedMessage id='filePanel.workspace' />
                       </label>
-                  </span>: null}
+                    </span> : null}
                   {currentWorkspace !== LOCALHOST && !isElectron() ? (<span className="remixui_menu remixui_topmenu d-flex justify-content-between align-items-end w-75">
                     <CustomTooltip
                       placement="top"
@@ -731,8 +734,8 @@ 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>
@@ -746,7 +749,7 @@ export function Workspace () {
                       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 }
+                      {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">
@@ -759,8 +762,8 @@ export function Workspace () {
                           <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>
+                      <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
@@ -770,27 +773,30 @@ export function Workspace () {
                             }}
                             data-id={`dropdown-item-${name}`}
                           >
-                          { isGitRepo ?
+                            {isGitRepo ?
                               <div className='d-flex justify-content-between'>
-                              <span>{ currentWorkspace === name ? <span>&#10003; { name } </span> : <span className="pl-3">{ name }</span> }</span>
+                                <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>
+                              <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>
+          {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.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
@@ -844,8 +850,9 @@ export function Workspace () {
                   />
                 </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) &&
+
+              {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'
@@ -901,6 +908,7 @@ export function Workspace () {
             </div>
           </div>
         </div>
+
       </div>
       {
         selectedWorkspace &&
@@ -910,7 +918,7 @@ export function Workspace () {
             <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-' }
+                  {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'>
@@ -934,11 +942,11 @@ export function Workspace () {
                         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 }`}>
+                              <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>
+                                    <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>
@@ -946,7 +954,7 @@ export function Workspace () {
                         }) :
                           <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>
                       }