From f43f09ab006a50ca29b3e3d19567d8538390708f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 11 Jan 2024 13:50:57 +0100
Subject: [PATCH 01/15] add icon hover component

---
 .../components/file-explorer-hovericons.tsx   | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
new file mode 100644
index 00000000000..61485287b46
--- /dev/null
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react'
+import { CustomTooltip } from '@remix-ui/helper'
+import { FormattedMessage } from 'react-intl'
+import { ROOT_PATH } from '../utils/constants'
+
+export type FileHoverIconsProps = {
+  hover: boolean
+  isEditable: boolean
+  file: any
+  handleNewFolderOp: any
+  handleNewFileOp: any
+  renamePathOp: any
+  deletePathOp: any
+}
+
+export function FileHoverIcons(props: FileHoverIconsProps) {
+
+  return (
+    <>
+      {(props.hover && !props.isEditable) && <div className={`d-flex flex-row align-items-center`} style={{ marginLeft: '6rem' }}>
+        {
+          props.file.isDirectory ? (
+            <>
+              <CustomTooltip
+                placement="right-start"
+                delay={{show: 1000, hide: 0}}
+                tooltipText={<FormattedMessage id="filePanel.edit" />}
+                tooltipId={`filePanel.edit.${props.file.path}`}
+                tooltipClasses="text-nowrap"
+              >
+                <span
+                  className="far fa-folder fa-1x remixui_icons_space remixui_icons"
+                  onClick={async (e) => {
+                    e.stopPropagation()
+                    console.log(props)
+                    await props.handleNewFolderOp(props.file.path)
+                    console.log('clicked on folder icon')
+                  }}
+                ></span>
+              </CustomTooltip>
+              <CustomTooltip
+                placement="right-start"
+                delay={{show: 1000, hide: 0}}
+                tooltipText={<FormattedMessage id="fileExplorer.edit" />}
+                tooltipId={`fileExplorer.edit.${props.file.path}`}
+                tooltipClasses="text-nowrap"
+              >
+                <span
+                  className="far fa-file fa-1x remixui_icons remixui_icons_space"
+                  onClick={async (e) => {
+                    e.stopPropagation()
+                    await props.handleNewFileOp(props.file.path)
+                    console.log('clicked on file icon')
+                  }}
+                ></span>
+              </CustomTooltip>
+            </>
+          ) : null
+        }
+        <CustomTooltip
+          placement="right-start"
+          delay={{show: 1000, hide: 0}}
+          tooltipText={<FormattedMessage id="fileExplorer.edit" />}
+          tooltipId={`fileExplorer.edit.${props.file.path}`}
+          tooltipClasses="text-nowrap"
+        >
+          <span
+            className="far fa-pen fa-1x remixui_icons remixui_icons_space"
+            onClick={async (e) => {
+              e.stopPropagation()
+              console.log(props)
+              console.log(e)
+              await props.renamePathOp(props.file.path, props.file.type)
+              console.log('clicked on edit icon')
+            }}
+          ></span>
+        </CustomTooltip>
+        <CustomTooltip
+          placement="right-start"
+          delay={{show: 1000, hide: 0}}
+          tooltipText={<FormattedMessage id="fileExplorer.edit" />}
+          tooltipId={`fileExplorer.edit.${props.file.path}`}
+          tooltipClasses="text-nowrap"
+        >
+          <span
+            className="far fa-trash fa-1x remixui_icons remixui_icons_space"
+            onClick={async (e) => {
+              e.stopPropagation()
+              console.log(props)
+              console.log(e)
+              console.log('clicked on trash icon')
+              await props.deletePathOp(props.file.path)
+            }}
+          ></span>
+        </CustomTooltip>
+      </div>
+      }
+    </>
+  )
+}

From 2c28bbff48b7b87bb5f2972be678977bca802b70 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 31 Jan 2024 13:26:12 +0100
Subject: [PATCH 02/15] add hovericons component

---
 .../src/lib/components/file-explorer-hovericons.tsx  | 12 ++++++------
 .../workspace/src/lib/components/flat-tree.tsx       |  5 ++++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index 61485287b46..49b4584ca1d 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -4,13 +4,13 @@ import { FormattedMessage } from 'react-intl'
 import { ROOT_PATH } from '../utils/constants'
 
 export type FileHoverIconsProps = {
-  hover: boolean
-  isEditable: boolean
+  hover?: boolean
+  isEditable?: boolean
   file: any
-  handleNewFolderOp: any
-  handleNewFileOp: any
-  renamePathOp: any
-  deletePathOp: any
+  handleNewFolderOp?: any
+  handleNewFileOp?: any
+  renamePathOp?: any
+  deletePathOp?: any
 }
 
 export function FileHoverIcons(props: FileHoverIconsProps) {
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index f86cd2873c1..a96f514a860 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -7,6 +7,7 @@ import { FlatTreeItemInput } from './flat-tree-item-input';
 import { FlatTreeDrop } from './flat-tree-drop';
 import { getEventTarget } from '../utils/getEventTarget';
 import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators';
+import { FileHoverIcons } from './file-explorer-hovericons';
 
 export default function useOnScreen(ref: RefObject<HTMLElement>) {
 
@@ -209,7 +210,9 @@ export const FlatTree = (props: FlatTreeProps) => {
             {file.name}
 
           </div>
-          {getFileStateIcons(file)}
+          <div className="d-flex flex-row gap-1">
+            <div><FileHoverIcons file={file} /></div>{getFileStateIcons(file)}
+          </div>
           </>
         }
       </div>

From d0598e2d73a1da6548f1dfcec7470c8b44b6f60a Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 1 Feb 2024 12:39:58 +0100
Subject: [PATCH 03/15] add props, make icons visible.

---
 .../components/file-explorer-hovericons.tsx   | 100 +++++++++---------
 .../src/lib/components/file-explorer.tsx      |   7 +-
 .../src/lib/components/flat-tree-drop.tsx     |   6 +-
 .../src/lib/components/flat-tree.tsx          |  11 +-
 .../workspace/src/lib/remix-ui-workspace.tsx  |  15 +--
 .../remix-ui/workspace/src/lib/types/index.ts |   1 +
 6 files changed, 76 insertions(+), 64 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index 49b4584ca1d..70d3c47e788 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -17,82 +17,82 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
 
   return (
     <>
-      {(props.hover && !props.isEditable) && <div className={`d-flex flex-row align-items-center`} style={{ marginLeft: '6rem' }}>
+      {(!props.hover && !props.isEditable) && <div className="d-flex flex-row align-items-center" style={{ marginLeft: '6rem' }}>
         {
           props.file.isDirectory ? (
             <>
-              <CustomTooltip
+              {/* <CustomTooltip
                 placement="right-start"
                 delay={{show: 1000, hide: 0}}
                 tooltipText={<FormattedMessage id="filePanel.edit" />}
                 tooltipId={`filePanel.edit.${props.file.path}`}
                 tooltipClasses="text-nowrap"
-              >
-                <span
-                  className="far fa-folder fa-1x remixui_icons_space remixui_icons"
-                  onClick={async (e) => {
-                    e.stopPropagation()
-                    console.log(props)
-                    await props.handleNewFolderOp(props.file.path)
-                    console.log('clicked on folder icon')
-                  }}
-                ></span>
-              </CustomTooltip>
-              <CustomTooltip
+              > */}
+              <span
+                className="far fa-folder fa-1x remixui_icons_space remixui_icons"
+                onClick={async (e) => {
+                  e.stopPropagation()
+                  console.log(props)
+                  await props.handleNewFolderOp(props.file.path)
+                  console.log('clicked on folder icon')
+                }}
+              ></span>
+              {/* </CustomTooltip> */}
+              {/* <CustomTooltip
                 placement="right-start"
                 delay={{show: 1000, hide: 0}}
                 tooltipText={<FormattedMessage id="fileExplorer.edit" />}
                 tooltipId={`fileExplorer.edit.${props.file.path}`}
                 tooltipClasses="text-nowrap"
-              >
-                <span
-                  className="far fa-file fa-1x remixui_icons remixui_icons_space"
-                  onClick={async (e) => {
-                    e.stopPropagation()
-                    await props.handleNewFileOp(props.file.path)
-                    console.log('clicked on file icon')
-                  }}
-                ></span>
-              </CustomTooltip>
+              > */}
+              <span
+                className="far fa-file fa-1x remixui_icons remixui_icons_space"
+                onClick={async (e) => {
+                  e.stopPropagation()
+                  await props.handleNewFileOp(props.file.path)
+                  console.log('clicked on file icon')
+                }}
+              ></span>
+              {/* </CustomTooltip> */}
             </>
           ) : null
         }
-        <CustomTooltip
+        {/* <CustomTooltip
           placement="right-start"
           delay={{show: 1000, hide: 0}}
           tooltipText={<FormattedMessage id="fileExplorer.edit" />}
           tooltipId={`fileExplorer.edit.${props.file.path}`}
           tooltipClasses="text-nowrap"
-        >
-          <span
-            className="far fa-pen fa-1x remixui_icons remixui_icons_space"
-            onClick={async (e) => {
-              e.stopPropagation()
-              console.log(props)
-              console.log(e)
-              await props.renamePathOp(props.file.path, props.file.type)
-              console.log('clicked on edit icon')
-            }}
-          ></span>
-        </CustomTooltip>
-        <CustomTooltip
+        > */}
+        <span
+          className="far fa-pen fa-1x remixui_icons remixui_icons_space"
+          onClick={async (e) => {
+            e.stopPropagation()
+            console.log(props)
+            console.log(e)
+            await props.renamePathOp(props.file.path, props.file.type)
+            console.log('clicked on edit icon')
+          }}
+        ></span>
+        {/* </CustomTooltip> */}
+        {/* <CustomTooltip
           placement="right-start"
           delay={{show: 1000, hide: 0}}
           tooltipText={<FormattedMessage id="fileExplorer.edit" />}
           tooltipId={`fileExplorer.edit.${props.file.path}`}
           tooltipClasses="text-nowrap"
-        >
-          <span
-            className="far fa-trash fa-1x remixui_icons remixui_icons_space"
-            onClick={async (e) => {
-              e.stopPropagation()
-              console.log(props)
-              console.log(e)
-              console.log('clicked on trash icon')
-              await props.deletePathOp(props.file.path)
-            }}
-          ></span>
-        </CustomTooltip>
+        > */}
+        <span
+          className="far fa-trash fa-1x remixui_icons remixui_icons_space"
+          onClick={async (e) => {
+            e.stopPropagation()
+            console.log(props)
+            console.log(e)
+            console.log('clicked on trash icon')
+            await props.deletePathOp(props.file.path)
+          }}
+        ></span>
+        {/* </CustomTooltip> */}
       </div>
       }
     </>
diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
index 39e20428d42..9eca0e4c7da 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, SyntheticEvent, useTransition } from 'react' // eslint-disable-line
+import React, { useEffect, useState, useRef, SyntheticEvent } from 'react' // eslint-disable-line
 import { useIntl } from 'react-intl'
 import { TreeView } from '@remix-ui/tree-view' // eslint-disable-line
 import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line
@@ -27,12 +27,13 @@ export const FileExplorer = (props: FileExplorerProps) => {
     handleContextMenu,
     handleNewFileInput,
     handleNewFolderInput,
+    deletePath,
     uploadFile,
     uploadFolder,
     fileState
   } = props
   const [state, setState] = useState<WorkSpaceState>(workspaceState)
-  const [isPending, startTransition] = useTransition();
+  // const [isPending, startTransition] = useTransition();
   const treeRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -404,6 +405,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
           moveFile={handleFileMove}
           moveFolder={handleFolderMove}
           handleClickFolder={handleClickFolder}
+          createNewFile={handleNewFileInput}
+          createNewFolder={handleNewFolderInput}
         />
       </div>
     </div>
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
index e1d7fc72c57..de02b360840 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, startTransition, useEffect, useRef, useState } from 'react'
+import React, { SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { FileType } from '../types'
 import { getEventTarget } from '../utils/getEventTarget'
 import { extractParentFromKey } from '@remix-ui/helper'
@@ -36,7 +36,7 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
       setFolderToOpen(null)
     }
     if (dragDestination && dragDestination.isDirectory && !expandPath.includes(dragDestination.path) && folderToOpen !== dragDestination.path && props.handleClickFolder) {
-      
+
       setFolderToOpen(dragDestination.path)
       timer && clearTimeout(timer)
       setTimer(
@@ -84,4 +84,4 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
     onDrop={onDrop} onDragOver={onDragOver}
     className="d-flex h-100"
   >{props.children}</div>)
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index a96f514a860..16d76c9bc23 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -8,6 +8,7 @@ import { FlatTreeDrop } from './flat-tree-drop';
 import { getEventTarget } from '../utils/getEventTarget';
 import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators';
 import { FileHoverIcons } from './file-explorer-hovericons';
+import { deletePath } from '../actions';
 
 export default function useOnScreen(ref: RefObject<HTMLElement>) {
 
@@ -37,6 +38,10 @@ interface FlatTreeProps {
   moveFile: (dest: string, src: string) => void
   moveFolder: (dest: string, src: string) => void
   fileState: fileDecoration[]
+  createNewFile?: any
+  createNewFolder?: any
+  deletePath?: (path: string | string[]) => void | Promise<void>
+  renamePath?: (path: string, newName: string) => void | Promise<void>
 }
 
 let mouseTimer: any = {
@@ -45,7 +50,7 @@ let mouseTimer: any = {
 }
 
 export const FlatTree = (props: FlatTreeProps) => {
-  const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder } = props
+  const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder, deletePath, renamePath } = props
   const [hover, setHover] = useState<string>('')
   const [mouseOverTarget, setMouseOverTarget] = useState<{
     path: string,
@@ -211,7 +216,9 @@ export const FlatTree = (props: FlatTreeProps) => {
 
           </div>
           <div className="d-flex flex-row gap-1">
-            <div><FileHoverIcons file={file} /></div>{getFileStateIcons(file)}
+            <div>
+              <FileHoverIcons file={file} />
+            </div> {getFileStateIcons(file)}
           </div>
           </>
         }
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 400aa1de2ce..c9785841e57 100644
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@@ -796,7 +796,7 @@ export function Workspace() {
             </option>
             <option style={{fontSize: 'small'}} value="breakthroughLabsUniswapv4Hooks">
               {intl.formatMessage({id: 'filePanel.breakthroughLabsUniswapv4Hooks'})}
-            </option> 
+            </option>
 
             <option style={{fontSize: 'small'}} value="uniswapV4HookBookMultiSigSwapHook">
               {intl.formatMessage({id: 'filePanel.uniswapV4HookBookMultiSigSwapHook'})}
@@ -988,7 +988,7 @@ export function Workspace() {
                     >
                       <i onClick={() => saveSampleCodeWorkspace()} className="far fa-exclamation-triangle text-warning ml-2 align-self-center" aria-hidden="true"></i>
                     </CustomTooltip>}
-                  </span>                  
+                  </span>
                 </div>
                 <div className='mx-2'>
                   {(platform !== appPlatformTypes.desktop) ? (
@@ -1063,7 +1063,7 @@ export function Workspace() {
               </div>
             </header>
           </div>
-          <ElectronMenu></ElectronMenu>     
+          <ElectronMenu></ElectronMenu>
           <div
             className="h-100 remixui_fileExplorerTree"
             onFocus={() => {
@@ -1077,7 +1077,7 @@ export function Workspace() {
                 </div>
               )}
               {!(global.fs.browser.isRequestingWorkspace || global.fs.browser.isRequestingCloning) && global.fs.mode === 'browser' && currentWorkspace !== NO_WORKSPACE && (
-                
+
                 <FileExplorer
                   fileState={global.fs.browser.fileState}
                   name={currentWorkspace}
@@ -1130,7 +1130,7 @@ export function Workspace() {
                   handleNewFolderInput={handleNewFolderInput}
                   dragStatus={dragStatus}
                 />
-    
+
               )}
               {global.fs.localhost.isRequestingLocalhost && (
                 <div className="text-center py-5">
@@ -1188,6 +1188,7 @@ export function Workspace() {
                   editModeOn={editModeOn}
                   handleNewFileInput={handleNewFileInput}
                   handleNewFolderInput={handleNewFolderInput}
+                  deletePath={deletePath}
                   dragStatus={dragStatus}
                 />
               )}
@@ -1199,11 +1200,11 @@ export function Workspace() {
         <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>
-            {selectedWorkspace.hasGitSubmodules? 
+            {selectedWorkspace.hasGitSubmodules?
               <div className="pt-1 mr-1">
                 {global.fs.browser.isRequestingCloning ? <div style={{ height: 30 }} className='btn btn-sm border text-muted small'><i className="fad fa-spinner fa-spin"></i> updating submodules</div>  :
                   <div style={{ height: 30 }} onClick={updateSubModules} data-id='updatesubmodules' className='btn btn-sm border text-muted small'>update submodules</div>}
-              </div>  
+              </div>
               : null}
             <div className="pt-1 mr-1" data-id="workspaceGitBranchesDropdown">
               <Dropdown style={{height: 30, minWidth: 80}} onToggle={toggleBranches} show={showBranches} drop={'up'}>
diff --git a/libs/remix-ui/workspace/src/lib/types/index.ts b/libs/remix-ui/workspace/src/lib/types/index.ts
index 14ff7864d2d..354e000f6ae 100644
--- a/libs/remix-ui/workspace/src/lib/types/index.ts
+++ b/libs/remix-ui/workspace/src/lib/types/index.ts
@@ -130,6 +130,7 @@ export interface FileExplorerProps {
     toGist: (path?: string, type?: string) => void
     handleNewFileInput: (parentFolder?: string) => Promise<void>
     handleNewFolderInput: (parentFolder?: string) => Promise<void>
+    deletePath?: (path: string[]) => Promise<void>
     dragStatus: (status: boolean) => void
 }
 

From 21533c10542532f2203510d294b16d4873b4718f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 1 Feb 2024 12:46:59 +0100
Subject: [PATCH 04/15] add styles for icons. fix icons alignment

---
 .../workspace/src/lib/components/flat-tree.tsx     |  2 +-
 .../workspace/src/lib/css/file-explorer.css        | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index 16d76c9bc23..efec53e0ac2 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -215,7 +215,7 @@ export const FlatTree = (props: FlatTreeProps) => {
             {file.name}
 
           </div>
-          <div className="d-flex flex-row gap-1">
+          <div className="d-flex flex-row align-items-center">
             <div>
               <FileHoverIcons file={file} />
             </div> {getFileStateIcons(file)}
diff --git a/libs/remix-ui/workspace/src/lib/css/file-explorer.css b/libs/remix-ui/workspace/src/lib/css/file-explorer.css
index c49a0a54a72..57dae41eae7 100644
--- a/libs/remix-ui/workspace/src/lib/css/file-explorer.css
+++ b/libs/remix-ui/workspace/src/lib/css/file-explorer.css
@@ -60,4 +60,16 @@ ul {
 [contenteditable] {
     -webkit-user-select: text;
     user-select: text;
-}
\ No newline at end of file
+}
+
+.remixui_icons {
+
+}
+
+.remixui_icons:hover {
+    color: var(--text);
+}
+
+.remixui_icons_space {
+    margin-right: 8px;
+}

From 9f47dd06370763c679238977befd7e9bd784cfb2 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 1 Feb 2024 14:13:55 +0100
Subject: [PATCH 05/15] fixing hover event

---
 .../src/lib/components/file-explorer-hovericons.tsx         | 2 +-
 libs/remix-ui/workspace/src/lib/components/flat-tree.tsx    | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index 70d3c47e788..d6097185007 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -17,7 +17,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
 
   return (
     <>
-      {(!props.hover && !props.isEditable) && <div className="d-flex flex-row align-items-center" style={{ marginLeft: '6rem' }}>
+      {(props.hover && !props.isEditable) && <div className="d-flex flex-row align-items-center" style={{ marginLeft: '6rem' }}>
         {
           props.file.isDirectory ? (
             <>
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index efec53e0ac2..b5bcc61f4ab 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -217,7 +217,11 @@ export const FlatTree = (props: FlatTreeProps) => {
           </div>
           <div className="d-flex flex-row align-items-center">
             <div>
-              <FileHoverIcons file={file} />
+              <FileHoverIcons
+                file={file}
+                isEditable={focusEdit && file.path && focusEdit.element === file.path}
+                hover={hover.length > 0}
+              />
             </div> {getFileStateIcons(file)}
           </div>
           </>

From 891556c00859301fd19428531cd0db46bb73453d Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 5 Feb 2024 10:49:26 +0100
Subject: [PATCH 06/15] trouble shoot row render

---
 .../components/file-explorer-hovericons.tsx   |  3 +-
 .../src/lib/components/flat-tree.tsx          | 86 +++++++++++--------
 2 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index d6097185007..444b56f40b9 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -4,7 +4,6 @@ import { FormattedMessage } from 'react-intl'
 import { ROOT_PATH } from '../utils/constants'
 
 export type FileHoverIconsProps = {
-  hover?: boolean
   isEditable?: boolean
   file: any
   handleNewFolderOp?: any
@@ -17,7 +16,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
 
   return (
     <>
-      {(props.hover && !props.isEditable) && <div className="d-flex flex-row align-items-center" style={{ marginLeft: '6rem' }}>
+      {<div className="d-flex flex-row align-items-center" style={{ marginLeft: '6rem' }}>
         {
           props.file.isDirectory ? (
             <>
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index b5bcc61f4ab..332357eb735 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -184,50 +184,60 @@ export const FlatTree = (props: FlatTreeProps) => {
     }
   }, [focusEdit])
 
+  const [onMouseEnter, setOnMouseEnter] = useState(false)
 
   const Row = (index: number) => {
     const node = Object.keys(flatTree)[index]
     const file = flatTree[node]
-    return (<li
-      className={`${labelClass(file)} li_tv`}
-      onMouseOver={() => setHover(file.path)}
-      onMouseOut={() => setHover(file.path)}
-      data-type={file.isDirectory ? 'folder' : 'file'}
-      data-path={`${file.path}`}
-      data-id={`treeViewLitreeViewItem${file.path}`}
-    >
-      <div data-id={`treeViewDivtreeViewItem${file.path}`} className={`d-flex flex-row align-items-center`}>
-        {getIndentLevelDiv(file.path)}
+    return (
+      <li
+        className={`${labelClass(file)} li_tv`}
+        onMouseOver={(e) => {
+          console.log(e)
+          setHover(file.path)
+        }}
+        onMouseOut={() => {
+          setHover(file.path)
+        }}
+        data-type={file.isDirectory ? 'folder' : 'file'}
+        data-path={`${file.path}`}
+        data-id={`treeViewLitreeViewItem${file.path}`}
+        onMouseEnter={() => setOnMouseEnter(true)}
+        onMouseLeave={() => setOnMouseEnter(false)}
+      >
+        <div data-id={`treeViewDivtreeViewItem${file.path}`} className={`d-flex flex-row align-items-center`}>
+          {getIndentLevelDiv(file.path)}
 
-        <div className={`pl-2 ${file.isDirectory ? expandPath && expandPath.includes(file.path) ? 'fa fa-folder-open' : 'fa fa-folder' : `${getPathIcon(file.path)} pr-2 caret caret_tv`} `}></div>
-        {focusEdit && file.path && focusEdit.element === file.path ?
-          <FlatTreeItemInput
-            editModeOff={editModeOff}
-            file={file} /> :
-          <><div
-            draggable={true}
-            onDragStart={onDragStart}
-            onDragEnd={onDragEnd}
-            className={`ml-1 pl-2 text-nowrap remixui_leaf ${getFileStateClasses(file)}`}
-            data-label-type={file.isDirectory ? 'folder' : 'file'}
-            data-label-path={`${file.path}`}
-            key={index}>
-            {file.name}
+          <div className={`pl-2 ${file.isDirectory ? expandPath && expandPath.includes(file.path) ? 'fa fa-folder-open' : 'fa fa-folder' : `${getPathIcon(file.path)} pr-2 caret caret_tv`} `}></div>
+          {focusEdit && file.path && focusEdit.element === file.path ?
+            <FlatTreeItemInput
+              editModeOff={editModeOff}
+              file={file} /> :
+            <><div
+              draggable={true}
+              onDragStart={onDragStart}
+              onDragEnd={onDragEnd}
+              className={`ml-1 pl-2 text-nowrap remixui_leaf ${getFileStateClasses(file)}`}
+              data-label-type={file.isDirectory ? 'folder' : 'file'}
+              data-label-path={`${file.path}`}
+              key={index}>
+              {file.name}
 
-          </div>
-          <div className="d-flex flex-row align-items-center">
-            <div>
-              <FileHoverIcons
-                file={file}
-                isEditable={focusEdit && file.path && focusEdit.element === file.path}
-                hover={hover.length > 0}
-              />
-            </div> {getFileStateIcons(file)}
-          </div>
-          </>
-        }
-      </div>
-    </li>)
+            </div>
+            <div className="d-flex flex-row align-items-center">
+              {!onMouseEnter && (
+                <div>
+                  <FileHoverIcons
+                    file={file}
+                    isEditable={true}
+                  />
+                </div>)}
+              {getFileStateIcons(file)}
+            </div>
+            </>
+          }
+        </div>
+      </li>)
   }
 
   return (<>

From 7b7f4f49ecdcf95ad1453b8c399faad3d754e1e0 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 9 Feb 2024 12:37:59 +0100
Subject: [PATCH 07/15] add hover bug. add behaviour to click actions

---
 .../components/file-explorer-hovericons.tsx   | 13 ++------
 .../src/lib/components/file-explorer.tsx      |  7 +++--
 .../src/lib/components/flat-tree.tsx          | 31 ++++++++++---------
 .../workspace/src/lib/remix-ui-workspace.tsx  |  7 +++++
 .../remix-ui/workspace/src/lib/types/index.ts |  3 ++
 5 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index 444b56f40b9..ba675d739b8 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -8,8 +8,8 @@ export type FileHoverIconsProps = {
   file: any
   handleNewFolderOp?: any
   handleNewFileOp?: any
-  renamePathOp?: any
-  deletePathOp?: any
+  renamePathOp?: (path: string, newName: string) => void | Promise<void>
+  deletePathOp?: (path: string | string[]) => void | Promise<void>
 }
 
 export function FileHoverIcons(props: FileHoverIconsProps) {
@@ -31,9 +31,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                 className="far fa-folder fa-1x remixui_icons_space remixui_icons"
                 onClick={async (e) => {
                   e.stopPropagation()
-                  console.log(props)
                   await props.handleNewFolderOp(props.file.path)
-                  console.log('clicked on folder icon')
                 }}
               ></span>
               {/* </CustomTooltip> */}
@@ -49,7 +47,6 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                 onClick={async (e) => {
                   e.stopPropagation()
                   await props.handleNewFileOp(props.file.path)
-                  console.log('clicked on file icon')
                 }}
               ></span>
               {/* </CustomTooltip> */}
@@ -67,10 +64,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
           className="far fa-pen fa-1x remixui_icons remixui_icons_space"
           onClick={async (e) => {
             e.stopPropagation()
-            console.log(props)
-            console.log(e)
             await props.renamePathOp(props.file.path, props.file.type)
-            console.log('clicked on edit icon')
           }}
         ></span>
         {/* </CustomTooltip> */}
@@ -85,9 +79,6 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
           className="far fa-trash fa-1x remixui_icons remixui_icons_space"
           onClick={async (e) => {
             e.stopPropagation()
-            console.log(props)
-            console.log(e)
-            console.log('clicked on trash icon')
             await props.deletePathOp(props.file.path)
           }}
         ></span>
diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
index 9eca0e4c7da..0b1113940f7 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
@@ -405,8 +405,11 @@ export const FileExplorer = (props: FileExplorerProps) => {
           moveFile={handleFileMove}
           moveFolder={handleFolderMove}
           handleClickFolder={handleClickFolder}
-          createNewFile={handleNewFileInput}
-          createNewFolder={handleNewFolderInput}
+          createNewFile={props.createNewFile}
+          createNewFolder={props.createNewFolder}
+          deletePath={deletePath}
+          renamePath={renamePath}
+          editModeOn={props.editModeOn}
         />
       </div>
     </div>
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index 332357eb735..c960edc0984 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -41,7 +41,8 @@ interface FlatTreeProps {
   createNewFile?: any
   createNewFolder?: any
   deletePath?: (path: string | string[]) => void | Promise<void>
-  renamePath?: (path: string, newName: string) => void | Promise<void>
+  renamePath?: (path: string, type: string, isNew?: boolean) => void
+  editModeOn?: (path: string, type: string, isNew?: boolean) => void
 }
 
 let mouseTimer: any = {
@@ -184,7 +185,19 @@ export const FlatTree = (props: FlatTreeProps) => {
     }
   }, [focusEdit])
 
-  const [onMouseEnter, setOnMouseEnter] = useState(false)
+  const showIcons = (file: FileType) =>
+    file.path === hover ? (
+      <div>
+        <FileHoverIcons
+          file={file}
+          isEditable={true}
+          renamePathOp={props.editModeOn}
+          deletePathOp={deletePath}
+          handleNewFileOp={props.createNewFile}
+          handleNewFolderOp={props.createNewFolder}
+        />
+      </div>
+    ) : null
 
   const Row = (index: number) => {
     const node = Object.keys(flatTree)[index]
@@ -193,17 +206,14 @@ export const FlatTree = (props: FlatTreeProps) => {
       <li
         className={`${labelClass(file)} li_tv`}
         onMouseOver={(e) => {
-          console.log(e)
           setHover(file.path)
         }}
         onMouseOut={() => {
-          setHover(file.path)
+          setHover('')
         }}
         data-type={file.isDirectory ? 'folder' : 'file'}
         data-path={`${file.path}`}
         data-id={`treeViewLitreeViewItem${file.path}`}
-        onMouseEnter={() => setOnMouseEnter(true)}
-        onMouseLeave={() => setOnMouseEnter(false)}
       >
         <div data-id={`treeViewDivtreeViewItem${file.path}`} className={`d-flex flex-row align-items-center`}>
           {getIndentLevelDiv(file.path)}
@@ -222,16 +232,9 @@ export const FlatTree = (props: FlatTreeProps) => {
               data-label-path={`${file.path}`}
               key={index}>
               {file.name}
-
             </div>
             <div className="d-flex flex-row align-items-center">
-              {!onMouseEnter && (
-                <div>
-                  <FileHoverIcons
-                    file={file}
-                    isEditable={true}
-                  />
-                </div>)}
+              {showIcons(file)}
               {getFileStateIcons(file)}
             </div>
             </>
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 c9785841e57..e71d94ffd97 100644
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@@ -1129,6 +1129,10 @@ export function Workspace() {
                   handleNewFileInput={handleNewFileInput}
                   handleNewFolderInput={handleNewFolderInput}
                   dragStatus={dragStatus}
+                  createNewFile={handleNewFileInput}
+                  createNewFolder={handleNewFolderInput}
+                  deletePath={deletePath}
+                  renamePath={editModeOn}
                 />
 
               )}
@@ -1188,7 +1192,10 @@ export function Workspace() {
                   editModeOn={editModeOn}
                   handleNewFileInput={handleNewFileInput}
                   handleNewFolderInput={handleNewFolderInput}
+                  createNewFile={handleNewFileInput}
+                  createNewFolder={handleNewFolderInput}
                   deletePath={deletePath}
+                  renamePath={editModeOn}
                   dragStatus={dragStatus}
                 />
               )}
diff --git a/libs/remix-ui/workspace/src/lib/types/index.ts b/libs/remix-ui/workspace/src/lib/types/index.ts
index 354e000f6ae..313f7a5dda9 100644
--- a/libs/remix-ui/workspace/src/lib/types/index.ts
+++ b/libs/remix-ui/workspace/src/lib/types/index.ts
@@ -131,6 +131,9 @@ export interface FileExplorerProps {
     handleNewFileInput: (parentFolder?: string) => Promise<void>
     handleNewFolderInput: (parentFolder?: string) => Promise<void>
     deletePath?: (path: string[]) => Promise<void>
+    createNewFile:(parentFolder?: string) => Promise<void>
+    createNewFolder:(parentFolder?: string) => Promise<void>
+    renamePath:(path: string, type: string, isNew?: boolean) => void
     dragStatus: (status: boolean) => void
 }
 

From dfb2429df97ca74c0f050074d25e64c9b7978a57 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 9 Feb 2024 12:42:14 +0100
Subject: [PATCH 08/15] add custom tooltip

---
 .../components/file-explorer-hovericons.tsx   | 81 +++++++++----------
 1 file changed, 40 insertions(+), 41 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index ba675d739b8..7ec18028e64 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { CustomTooltip } from '@remix-ui/helper'
 import { FormattedMessage } from 'react-intl'
-import { ROOT_PATH } from '../utils/constants'
 
 export type FileHoverIconsProps = {
   isEditable?: boolean
@@ -20,69 +19,69 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
         {
           props.file.isDirectory ? (
             <>
-              {/* <CustomTooltip
+              <CustomTooltip
                 placement="right-start"
                 delay={{show: 1000, hide: 0}}
                 tooltipText={<FormattedMessage id="filePanel.edit" />}
                 tooltipId={`filePanel.edit.${props.file.path}`}
                 tooltipClasses="text-nowrap"
-              > */}
-              <span
-                className="far fa-folder fa-1x remixui_icons_space remixui_icons"
-                onClick={async (e) => {
-                  e.stopPropagation()
-                  await props.handleNewFolderOp(props.file.path)
-                }}
-              ></span>
-              {/* </CustomTooltip> */}
-              {/* <CustomTooltip
+              >
+                <span
+                  className="far fa-folder fa-1x remixui_icons_space remixui_icons"
+                  onClick={async (e) => {
+                    e.stopPropagation()
+                    await props.handleNewFolderOp(props.file.path)
+                  }}
+                ></span>
+              </CustomTooltip>
+              <CustomTooltip
                 placement="right-start"
                 delay={{show: 1000, hide: 0}}
                 tooltipText={<FormattedMessage id="fileExplorer.edit" />}
                 tooltipId={`fileExplorer.edit.${props.file.path}`}
                 tooltipClasses="text-nowrap"
-              > */}
-              <span
-                className="far fa-file fa-1x remixui_icons remixui_icons_space"
-                onClick={async (e) => {
-                  e.stopPropagation()
-                  await props.handleNewFileOp(props.file.path)
-                }}
-              ></span>
-              {/* </CustomTooltip> */}
+              >
+                <span
+                  className="far fa-file fa-1x remixui_icons remixui_icons_space"
+                  onClick={async (e) => {
+                    e.stopPropagation()
+                    await props.handleNewFileOp(props.file.path)
+                  }}
+                ></span>
+              </CustomTooltip>
             </>
           ) : null
         }
-        {/* <CustomTooltip
+        <CustomTooltip
           placement="right-start"
           delay={{show: 1000, hide: 0}}
           tooltipText={<FormattedMessage id="fileExplorer.edit" />}
           tooltipId={`fileExplorer.edit.${props.file.path}`}
           tooltipClasses="text-nowrap"
-        > */}
-        <span
-          className="far fa-pen fa-1x remixui_icons remixui_icons_space"
-          onClick={async (e) => {
-            e.stopPropagation()
-            await props.renamePathOp(props.file.path, props.file.type)
-          }}
-        ></span>
-        {/* </CustomTooltip> */}
-        {/* <CustomTooltip
+        >
+          <span
+            className="far fa-pen fa-1x remixui_icons remixui_icons_space"
+            onClick={async (e) => {
+              e.stopPropagation()
+              await props.renamePathOp(props.file.path, props.file.type)
+            }}
+          ></span>
+        </CustomTooltip>
+        <CustomTooltip
           placement="right-start"
           delay={{show: 1000, hide: 0}}
           tooltipText={<FormattedMessage id="fileExplorer.edit" />}
           tooltipId={`fileExplorer.edit.${props.file.path}`}
           tooltipClasses="text-nowrap"
-        > */}
-        <span
-          className="far fa-trash fa-1x remixui_icons remixui_icons_space"
-          onClick={async (e) => {
-            e.stopPropagation()
-            await props.deletePathOp(props.file.path)
-          }}
-        ></span>
-        {/* </CustomTooltip> */}
+        >
+          <span
+            className="far fa-trash fa-1x remixui_icons remixui_icons_space"
+            onClick={async (e) => {
+              e.stopPropagation()
+              await props.deletePathOp(props.file.path)
+            }}
+          ></span>
+        </CustomTooltip>
       </div>
       }
     </>

From 38703f261be49dbe1811663bf18894b93ef6eae4 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 9 Feb 2024 13:02:39 +0100
Subject: [PATCH 09/15] add or update props for customTooltip

---
 .../src/app/tabs/locales/en/filePanel.json    |  2 +-
 .../components/file-explorer-hovericons.tsx   | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
index 3b790fa706d..3847cae628f 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
@@ -136,4 +136,4 @@
   "filePanel.movingFolderFailedMsg": "Unexpected error while moving folder: {src}",
   "filePanel.workspaceActions": "Workspace actions",
   "filePanel.saveCodeSample": "This code-sample workspace will not be persisted. Click here to save it."
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index 7ec18028e64..a3c75e499cf 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -20,10 +20,10 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
           props.file.isDirectory ? (
             <>
               <CustomTooltip
-                placement="right-start"
+                placement="bottom"
                 delay={{show: 1000, hide: 0}}
-                tooltipText={<FormattedMessage id="filePanel.edit" />}
-                tooltipId={`filePanel.edit.${props.file.path}`}
+                tooltipText={<FormattedMessage id="filePanel.createNewFolder" />}
+                tooltipId={`filePanel.createNewFolder.${props.file.path}`}
                 tooltipClasses="text-nowrap"
               >
                 <span
@@ -35,10 +35,10 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                 ></span>
               </CustomTooltip>
               <CustomTooltip
-                placement="right-start"
+                placement="bottom"
                 delay={{show: 1000, hide: 0}}
-                tooltipText={<FormattedMessage id="fileExplorer.edit" />}
-                tooltipId={`fileExplorer.edit.${props.file.path}`}
+                tooltipText={<FormattedMessage id="filePanel.createNewFile" />}
+                tooltipId={`fileExplorer.createNewFile.${props.file.path}`}
                 tooltipClasses="text-nowrap"
               >
                 <span
@@ -53,10 +53,10 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
           ) : null
         }
         <CustomTooltip
-          placement="right-start"
+          placement="bottom"
           delay={{show: 1000, hide: 0}}
-          tooltipText={<FormattedMessage id="fileExplorer.edit" />}
-          tooltipId={`fileExplorer.edit.${props.file.path}`}
+          tooltipText={<FormattedMessage id="filePanel.rename" />}
+          tooltipId={`filePanel.rename.${props.file.path}`}
           tooltipClasses="text-nowrap"
         >
           <span
@@ -68,10 +68,10 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
           ></span>
         </CustomTooltip>
         <CustomTooltip
-          placement="right-start"
+          placement="bottom"
           delay={{show: 1000, hide: 0}}
-          tooltipText={<FormattedMessage id="fileExplorer.edit" />}
-          tooltipId={`fileExplorer.edit.${props.file.path}`}
+          tooltipText={<FormattedMessage id="filePanel.deleteItem" />}
+          tooltipId={`filePanel.deleteItem.${props.file.path}`}
           tooltipClasses="text-nowrap"
         >
           <span

From 1a03f899e97b6382c884e89ba1a2d9e032210910 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 12 Feb 2024 14:34:47 +0100
Subject: [PATCH 10/15] attempt to fix e2e

---
 .../src/tests/file_explorer_dragdrop.test.ts  | 181 +++++++++---------
 .../src/lib/components/flat-tree-drop.tsx     |   2 +-
 .../src/lib/components/flat-tree.tsx          |   3 +-
 3 files changed, 95 insertions(+), 91 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/file_explorer_dragdrop.test.ts b/apps/remix-ide-e2e/src/tests/file_explorer_dragdrop.test.ts
index edcf90d881d..ec8daf3dfdd 100644
--- a/apps/remix-ide-e2e/src/tests/file_explorer_dragdrop.test.ts
+++ b/apps/remix-ide-e2e/src/tests/file_explorer_dragdrop.test.ts
@@ -3,101 +3,104 @@ import { NightwatchBrowser } from 'nightwatch'
 import init from '../helpers/init'
 
 const checkBrowserIsChrome = function (browser: NightwatchBrowser) {
-    return browser.browserName.indexOf('chrome') > -1
+  return browser.browserName.indexOf('chrome') > -1
 }
 
 
 module.exports = {
-    '@disabled': true,
-    before: function (browser: NightwatchBrowser, done: VoidFunction) {
-        init(browser, done)
-    },
-    'drag and drop file from root to contracts #group1 ': function (browser: NightwatchBrowser) {
-        if (checkBrowserIsChrome(browser)) {
-            browser
-                .clickLaunchIcon('filePanel')
-                .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
-                .findElement('*[data-id="treeViewLitreeViewItemcontracts"]', (el) => {
-                    console.log((el as any).value.getId())
-                    const id = (el as any).value.getId()
-                    browser
-                        .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
-                        .dragAndDrop('li[data-id="treeViewLitreeViewItemREADME.txt"]', id)
-                        .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
-                        .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
-                        .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/README.txt"]')
-                })
-        }
-    },
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+  'drag and drop file from root to contracts #group1 ': function (browser: NightwatchBrowser) {
+    if (checkBrowserIsChrome(browser)) {
+      browser
+        .clickLaunchIcon('filePanel')
+        .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
+        .findElement('*[data-id="treeViewLitreeViewItemcontracts"]', (el) => {
+          console.log((el as any).value.getId())
+          const id = (el as any).value.getId()
+          browser
+            .waitForElementVisible('li[data-id="treeViewLitreeViewItemREADME.txt"]')
+            .dragAndDrop('li[data-id="treeViewLitreeViewItemREADME.txt"]', id)
+            .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
+            .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
+            .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/README.txt"]')
+        })
+    }
+  },
 
-    'drag and drop file from contracts to root #group1': function (browser: NightwatchBrowser) {
-        if (checkBrowserIsChrome(browser)) {
-            browser.findElement('*[data-id="treeViewUltreeViewMenu"]', (el) => {
-                console.log((el as any).value.getId())
-                const id = (el as any).value.getId()
-                browser
-                    .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/1_Storage.sol"]')
-                    .dragAndDrop('li[data-id="treeViewLitreeViewItemcontracts/1_Storage.sol"]', id)
-                    .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
-                    .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
-            })
-            browser.pause(1000)
-                .waitForElementVisible('li[data-id="treeViewLitreeViewItem1_Storage.sol"]')
-        }
-    },
-    'drag and drop scripts from root to contracts #group1': function (browser: NightwatchBrowser) {
-        if (checkBrowserIsChrome(browser)) {
-            browser
-                .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
-                .findElement('*[data-id="treeViewLitreeViewItemcontracts"]', (el) => {
-                    console.log((el as any).value.getId())
-                    const id = (el as any).value.getId()
-                    browser
-                        .waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts"]')
-                        .dragAndDrop('li[data-id="treeViewLitreeViewItemscripts"]', id)
-                        .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
-                        .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
-                        .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/scripts"]')
-                })
-        }
-    },
-    'drag scripts from contracts to root #group1': function (browser: NightwatchBrowser) {
-        if (checkBrowserIsChrome(browser)) {
-            browser.findElement('*[data-id="treeViewUltreeViewMenu"]', (el) => {
-                console.log((el as any).value.getId())
-                const id = (el as any).value.getId()
-                browser
-                    .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/scripts"]')
-                    .dragAndDrop('li[data-id="treeViewLitreeViewItemcontracts/scripts"]', id)
-                    .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
-                    .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
-            })
-            browser.pause(1000)
-                .waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts"]')
-        }
-    },
-    'drag into nested folder': function (browser: NightwatchBrowser) {
-        if (checkBrowserIsChrome(browser)) {
-            browser.waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts"]')
-                .rightClick('li[data-id="treeViewLitreeViewItemscripts"]')
-                .waitForElementPresent('[data-id="contextMenuItemnewFolder')
-                .click('[data-id="contextMenuItemnewFolder')
-                .waitForElementVisible('*[data-id$="fileExplorerTreeItemInput"]')
-                .sendKeys('*[data-id$="fileExplorerTreeItemInput"]', 'nested')
-                .sendKeys('*[data-id$="fileExplorerTreeItemInput"]', browser.Keys.ENTER)
-                .findElement('*[data-id="treeViewLitreeViewItemscripts/nested"]', (el) => {
-                    console.log((el as any).value.getId())
-                    const id = (el as any).value.getId()
-                    browser
-                        .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/README.txt"]')
-                        .dragAndDrop('li[data-id="treeViewLitreeViewItemcontracts/README.txt"]', id)
-                        .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
-                        .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
-                        .waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts/nested/README.txt"]')
-                })
-        }
+  'drag and drop file from contracts to root #group1': function (browser: NightwatchBrowser) {
+    if (checkBrowserIsChrome(browser)) {
+      browser.findElement('*[data-id="treeViewUltreeViewMenu"]', (el) => {
+        console.log((el as any).value.getId())
+        const id = (el as any).value.getId()
+        browser
+          .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/1_Storage.sol"]')
+          .dragAndDrop('li[data-id="treeViewLitreeViewItemcontracts/1_Storage.sol"]', id)
+          .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
+          .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
+      })
+      browser.pause(1000)
+        .waitForElementVisible('li[data-id="treeViewLitreeViewItem1_Storage.sol"]')
+    }
+  },
+  'drag and drop scripts from root to contracts #group1': function (browser: NightwatchBrowser) {
+    if (checkBrowserIsChrome(browser)) {
+      browser
+        .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
+        .findElement('*[data-id="treeViewLitreeViewItemcontracts"]', (el) => {
+          console.log((el as any).value.getId())
+          const id = (el as any).value.getId()
+          browser
+            .waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts"]')
+            .dragAndDrop('div[data-id="treeViewDivDraggableItemscripts"]', id)
+            .pause()
+            .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
+            .pause()
+            .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
+            .pause()
+            .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/scripts"]')
+        })
+    }
+  },
+  'drag scripts from contracts to root #group1': function (browser: NightwatchBrowser) {
+    if (checkBrowserIsChrome(browser)) {
+      browser.findElement('*[data-id="treeViewUltreeViewMenu"]', (el) => {
+        console.log((el as any).value.getId())
+        const id = (el as any).value.getId()
+        browser
+          .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/scripts"]')
+          .dragAndDrop('li[data-id="treeViewLitreeViewItemcontracts/scripts"]', id)
+          .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
+          .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
+      })
+      browser.pause(1000)
+        .waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts"]')
     }
+  },
+  'drag into nested folder': function (browser: NightwatchBrowser) {
+    if (checkBrowserIsChrome(browser)) {
+      browser.waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts"]')
+        .rightClick('li[data-id="treeViewLitreeViewItemscripts"]')
+        .waitForElementPresent('[data-id="contextMenuItemnewFolder')
+        .click('[data-id="contextMenuItemnewFolder')
+        .waitForElementVisible('*[data-id$="fileExplorerTreeItemInput"]')
+        .sendKeys('*[data-id$="fileExplorerTreeItemInput"]', 'nested')
+        .sendKeys('*[data-id$="fileExplorerTreeItemInput"]', browser.Keys.ENTER)
+        .findElement('*[data-id="treeViewLitreeViewItemscripts/nested"]', (el) => {
+          console.log((el as any).value.getId())
+          const id = (el as any).value.getId()
+          browser
+            .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/README.txt"]')
+            .dragAndDrop('li[data-id="treeViewLitreeViewItemcontracts/README.txt"]', id)
+            .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
+            .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
+            .waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts/nested/README.txt"]')
+        })
+    }
+  }
 
 
 
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
index de02b360840..439259c4010 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
@@ -61,7 +61,7 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
     } else {
       dragDestination = getFlatTreeItem(target.path)
     }
-
+    console.log(dragDestination)
     if (dragDestination.isDirectory) {
       if (dragSource.isDirectory) {
         moveFolder(dragDestination.path, dragSource.path)
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index c960edc0984..a4024efcfb2 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -186,7 +186,7 @@ export const FlatTree = (props: FlatTreeProps) => {
   }, [focusEdit])
 
   const showIcons = (file: FileType) =>
-    file.path === hover ? (
+    file.path === hover && !isDragging ? (
       <div>
         <FileHoverIcons
           file={file}
@@ -224,6 +224,7 @@ export const FlatTree = (props: FlatTreeProps) => {
               editModeOff={editModeOff}
               file={file} /> :
             <><div
+              data-id={`treeViewDivDraggableItem${file.path}`}
               draggable={true}
               onDragStart={onDragStart}
               onDragEnd={onDragEnd}

From 1231606444228ae792cda4ad7c1bb3eba2d702a2 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip@give.it>
Date: Mon, 12 Feb 2024 15:15:38 +0100
Subject: [PATCH 11/15] fix test

---
 apps/remix-ide-e2e/src/tests/file_explorer_dragdrop.test.ts  | 5 +----
 .../src/lib/components/file-explorer-hovericons.tsx          | 2 +-
 .../remix-ui/workspace/src/lib/components/flat-tree-drop.tsx | 2 --
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/file_explorer_dragdrop.test.ts b/apps/remix-ide-e2e/src/tests/file_explorer_dragdrop.test.ts
index ec8daf3dfdd..949bf86d59f 100644
--- a/apps/remix-ide-e2e/src/tests/file_explorer_dragdrop.test.ts
+++ b/apps/remix-ide-e2e/src/tests/file_explorer_dragdrop.test.ts
@@ -53,13 +53,10 @@ module.exports = {
           console.log((el as any).value.getId())
           const id = (el as any).value.getId()
           browser
-            .waitForElementVisible('li[data-id="treeViewLitreeViewItemscripts"]')
+            .waitForElementVisible('div[data-id="treeViewDivDraggableItemscripts"]')
             .dragAndDrop('div[data-id="treeViewDivDraggableItemscripts"]', id)
-            .pause()
             .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
-            .pause()
             .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
-            .pause()
             .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/scripts"]')
         })
     }
diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index a3c75e499cf..0c0ab996e73 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -15,7 +15,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
 
   return (
     <>
-      {<div className="d-flex flex-row align-items-center" style={{ marginLeft: '6rem' }}>
+      {<div className="d-flex flex-row align-items-center">
         {
           props.file.isDirectory ? (
             <>
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
index 439259c4010..de274562f7f 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx
@@ -23,7 +23,6 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
   const onDragOver = async (e: SyntheticEvent) => {
     e.preventDefault()
     const target = await getEventTarget(e)
-
     if (!target || !target.path) {
       clearTimeout(timer)
       setFolderToOpen(null)
@@ -61,7 +60,6 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
     } else {
       dragDestination = getFlatTreeItem(target.path)
     }
-    console.log(dragDestination)
     if (dragDestination.isDirectory) {
       if (dragSource.isDirectory) {
         moveFolder(dragDestination.path, dragSource.path)

From 00c8d063c1a9d78f81a740ac1f8035648758bd86 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 12 Feb 2024 16:26:21 +0100
Subject: [PATCH 12/15] add cursor style to FE icons

---
 .../lib/components/file-explorer-hovericons.tsx    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index 0c0ab996e73..6b110329b98 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -12,7 +12,7 @@ export type FileHoverIconsProps = {
 }
 
 export function FileHoverIcons(props: FileHoverIconsProps) {
-
+  const [mouseOver, setMouseOver] = useState(false)
   return (
     <>
       {<div className="d-flex flex-row align-items-center">
@@ -32,6 +32,9 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                     e.stopPropagation()
                     await props.handleNewFolderOp(props.file.path)
                   }}
+                  style={{ cursor: mouseOver ? 'pointer' : 'default' }}
+                  onMouseEnter={(e) => setMouseOver(true)}
+                  onMouseLeave={(e) => setMouseOver(false)}
                 ></span>
               </CustomTooltip>
               <CustomTooltip
@@ -47,6 +50,9 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                     e.stopPropagation()
                     await props.handleNewFileOp(props.file.path)
                   }}
+                  style={{ cursor: mouseOver ? 'pointer' : 'default' }}
+                  onMouseEnter={(e) => setMouseOver(true)}
+                  onMouseLeave={(e) => setMouseOver(false)}
                 ></span>
               </CustomTooltip>
             </>
@@ -65,6 +71,9 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
               e.stopPropagation()
               await props.renamePathOp(props.file.path, props.file.type)
             }}
+            style={{ cursor: mouseOver ? 'pointer' : 'default' }}
+            onMouseEnter={(e) => setMouseOver(true)}
+            onMouseLeave={(e) => setMouseOver(false)}
           ></span>
         </CustomTooltip>
         <CustomTooltip
@@ -80,6 +89,9 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
               e.stopPropagation()
               await props.deletePathOp(props.file.path)
             }}
+            style={{ cursor: mouseOver ? 'pointer' : 'default' }}
+            onMouseEnter={(e) => setMouseOver(true)}
+            onMouseLeave={(e) => setMouseOver(false)}
           ></span>
         </CustomTooltip>
       </div>

From ee5dccd5a236daaa9f8cffbb2debf9ea16157e08 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 13 Feb 2024 14:54:48 +0100
Subject: [PATCH 13/15] address comments from @LianaHus

---
 .../src/lib/components/file-explorer-hovericons.tsx    | 10 +++++-----
 .../workspace/src/lib/components/flat-tree.tsx         |  2 +-
 libs/remix-ui/workspace/src/lib/css/file-explorer.css  |  4 ----
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index 6b110329b98..c3d97ce4c10 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -7,7 +7,7 @@ export type FileHoverIconsProps = {
   file: any
   handleNewFolderOp?: any
   handleNewFileOp?: any
-  renamePathOp?: (path: string, newName: string) => void | Promise<void>
+  renamePathOp?: (path: string, type: string) => void
   deletePathOp?: (path: string | string[]) => void | Promise<void>
 }
 
@@ -27,7 +27,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                 tooltipClasses="text-nowrap"
               >
                 <span
-                  className="far fa-folder fa-1x remixui_icons_space remixui_icons"
+                  className="far fa-folder fa-1x mr-2 remixui_icons"
                   onClick={async (e) => {
                     e.stopPropagation()
                     await props.handleNewFolderOp(props.file.path)
@@ -45,7 +45,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
                 tooltipClasses="text-nowrap"
               >
                 <span
-                  className="far fa-file fa-1x remixui_icons remixui_icons_space"
+                  className="far fa-file fa-1x remixui_icons mr-2"
                   onClick={async (e) => {
                     e.stopPropagation()
                     await props.handleNewFileOp(props.file.path)
@@ -66,7 +66,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
           tooltipClasses="text-nowrap"
         >
           <span
-            className="far fa-pen fa-1x remixui_icons remixui_icons_space"
+            className="far fa-pen fa-1x remixui_icons mr-2"
             onClick={async (e) => {
               e.stopPropagation()
               await props.renamePathOp(props.file.path, props.file.type)
@@ -84,7 +84,7 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
           tooltipClasses="text-nowrap"
         >
           <span
-            className="far fa-trash fa-1x remixui_icons remixui_icons_space"
+            className="far fa-trash fa-1x remixui_icons mr-2"
             onClick={async (e) => {
               e.stopPropagation()
               await props.deletePathOp(props.file.path)
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index a4024efcfb2..6f4acfd8b6b 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -41,7 +41,7 @@ interface FlatTreeProps {
   createNewFile?: any
   createNewFolder?: any
   deletePath?: (path: string | string[]) => void | Promise<void>
-  renamePath?: (path: string, type: string, isNew?: boolean) => void
+  renamePath?: (path: string, type: string) => void
   editModeOn?: (path: string, type: string, isNew?: boolean) => void
 }
 
diff --git a/libs/remix-ui/workspace/src/lib/css/file-explorer.css b/libs/remix-ui/workspace/src/lib/css/file-explorer.css
index 57dae41eae7..16f0ffca51b 100644
--- a/libs/remix-ui/workspace/src/lib/css/file-explorer.css
+++ b/libs/remix-ui/workspace/src/lib/css/file-explorer.css
@@ -69,7 +69,3 @@ ul {
 .remixui_icons:hover {
     color: var(--text);
 }
-
-.remixui_icons_space {
-    margin-right: 8px;
-}

From 5f5e861860393ed2fea7e40848ca5d3e7ac901d4 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 14 Feb 2024 09:16:44 +0100
Subject: [PATCH 14/15] fix rename

---
 .../src/lib/components/file-explorer-hovericons.tsx       | 7 +++----
 .../workspace/src/lib/components/file-explorer.tsx        | 3 +--
 libs/remix-ui/workspace/src/lib/components/flat-tree.tsx  | 8 +++-----
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
index c3d97ce4c10..c6b299f66f4 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-hovericons.tsx
@@ -3,11 +3,10 @@ import { CustomTooltip } from '@remix-ui/helper'
 import { FormattedMessage } from 'react-intl'
 
 export type FileHoverIconsProps = {
-  isEditable?: boolean
   file: any
   handleNewFolderOp?: any
   handleNewFileOp?: any
-  renamePathOp?: (path: string, type: string) => void
+  renamePathOp?: (path: string, type: string, isNew?: boolean) => void
   deletePathOp?: (path: string | string[]) => void | Promise<void>
 }
 
@@ -67,9 +66,9 @@ export function FileHoverIcons(props: FileHoverIconsProps) {
         >
           <span
             className="far fa-pen fa-1x remixui_icons mr-2"
-            onClick={async (e) => {
+            onClick={(e) => {
               e.stopPropagation()
-              await props.renamePathOp(props.file.path, props.file.type)
+              props.renamePathOp(props.file.path, props.file.type)
             }}
             style={{ cursor: mouseOver ? 'pointer' : 'default' }}
             onMouseEnter={(e) => setMouseOver(true)}
diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
index 0b1113940f7..2f818fc9f6e 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
@@ -408,8 +408,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
           createNewFile={props.createNewFile}
           createNewFolder={props.createNewFolder}
           deletePath={deletePath}
-          renamePath={renamePath}
-          editModeOn={props.editModeOn}
+          editPath={props.editModeOn}
         />
       </div>
     </div>
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index 6f4acfd8b6b..4bdddffe5bd 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -41,8 +41,7 @@ interface FlatTreeProps {
   createNewFile?: any
   createNewFolder?: any
   deletePath?: (path: string | string[]) => void | Promise<void>
-  renamePath?: (path: string, type: string) => void
-  editModeOn?: (path: string, type: string, isNew?: boolean) => void
+  editPath?: (path: string, type: string, isNew?: boolean) => void
 }
 
 let mouseTimer: any = {
@@ -51,7 +50,7 @@ let mouseTimer: any = {
 }
 
 export const FlatTree = (props: FlatTreeProps) => {
-  const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder, deletePath, renamePath } = props
+  const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder, deletePath, editPath } = props
   const [hover, setHover] = useState<string>('')
   const [mouseOverTarget, setMouseOverTarget] = useState<{
     path: string,
@@ -190,8 +189,7 @@ export const FlatTree = (props: FlatTreeProps) => {
       <div>
         <FileHoverIcons
           file={file}
-          isEditable={true}
-          renamePathOp={props.editModeOn}
+          renamePathOp={props.editPath}
           deletePathOp={deletePath}
           handleNewFileOp={props.createNewFile}
           handleNewFolderOp={props.createNewFolder}

From 7ae20c7756ec4c7b8913c6c277408c97e9bfea2e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 14 Feb 2024 10:31:42 +0100
Subject: [PATCH 15/15] fix rename issue

---
 libs/remix-ui/workspace/src/lib/components/file-explorer.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
index 2f818fc9f6e..6e2010f80b2 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
@@ -131,6 +131,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
   const renamePath = async (oldPath: string, newPath: string) => {
     try {
+      if (oldPath === newPath) return
       props.dispatchRenamePath(oldPath, newPath)
     } catch (error) {
       props.modal(