add props, make icons visible.

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

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>

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

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

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

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
 }