fix:commiting broken context menu

src/components/Explorer/FileExplorer.tsx

@@ -1,10 +1,14 @@
 import { CustomIcon } from '@src/components/CustomIcon'
 import { uuidv4 } from '@src/lib/utils'
-import {
+import type {
   FileExplorerEntry,
   FileExplorerRow,
   FileExplorerRender,
+  FileExplorerRowContextMenuProps,
 } from '@src/components/Explorer/utils'
+import { ContextMenu, ContextMenuItem } from '@src/components/ContextMenu'
+import { useRef } from 'react'
+import usePlatform from '@src/hooks/usePlatform'
 
 export const StatusDot = () => {
   return <span>•</span>
@@ -98,8 +102,11 @@ export const FileExplorerRowElement = ({
   const outlineCSS = isIndexActive
     ? 'outline outline-1 outline-sky-500 '
     : 'outline-0 outline-none'
+
+  const rowElementRef = useRef(null)
   return (
     <div
+      ref={rowElementRef}
       role="treeitem"
       className={`h-6 flex flex-row items-center text-xs cursor-pointer -outline-offset-1 ${outlineCSS} hover:outline hover:outline-1 hover:outline-sky-500 hover:bg-sky-400 ${isSelected ? 'bg-sky-800' : ''}`}
       data-index={row.domIndex}
@@ -126,6 +133,58 @@ export const FileExplorerRowElement = ({
       </span>
       <div className="ml-auto">{row.status}</div>
       <div style={{ width: '0.25rem' }}></div>
+      <FileExplorerRowContextMenu
+        itemRef={rowElementRef}
+        onRename={() => {}}
+        onDelete={() => {}}
+        onClone={() => {}}
+        onOpenInNewWindow={() => {}}
+      />
     </div>
   )
 }
+
+function FileExplorerRowContextMenu({
+  itemRef,
+  onRename,
+  onDelete,
+  onClone,
+  onOpenInNewWindow,
+}: FileExplorerRowContextMenuProps) {
+  const platform = usePlatform()
+  const metaKey = platform === 'macos' ? '⌘' : 'Ctrl'
+  return (
+    <ContextMenu
+      menuTargetElement={itemRef}
+      items={[
+        <ContextMenuItem
+          data-testid="context-menu-rename"
+          onClick={onRename}
+          hotkey="Enter"
+        >
+          Rename
+        </ContextMenuItem>,
+        <ContextMenuItem
+          data-testid="context-menu-delete"
+          onClick={onDelete}
+          hotkey={metaKey + ' + Del'}
+        >
+          Delete
+        </ContextMenuItem>,
+        <ContextMenuItem
+          data-testid="context-menu-clone"
+          onClick={onClone}
+          hotkey=""
+        >
+          Clone
+        </ContextMenuItem>,
+        <ContextMenuItem
+          data-testid="context-menu-open-in-new-window"
+          onClick={onOpenInNewWindow}
+        >
+          Open in new window
+        </ContextMenuItem>,
+      ]}
+    />
+  )
+}

src/components/Explorer/ProjectExplorer.tsx

@@ -3,14 +3,14 @@ import type { CustomIconName } from '@src/components/CustomIcon'
 import { FILE_EXT } from '@src/lib/constants'
 import { FileExplorer, StatusDot } from '@src/components/Explorer/FileExplorer'
 import {
-  FileExplorerRow,
   constructPath,
   flattenProject,
   NOTHING_IS_SELECTED,
   CONTAINER_IS_SELECTED,
   STARTING_INDEX_TO_SELECT,
 } from '@src/components/Explorer/utils'
-import type { FileExplorerEntry } from '@src/components/Explorer/utils'
+import type { FileExplorerEntry ,
+  FileExplorerRow} from '@src/components/Explorer/utils'
 import { FileExplorerHeaderActions } from '@src/components/Explorer/FileExplorerHeaderActions'
 import { useState, useRef, useEffect } from 'react'
 import { systemIOActor } from '@src/lib/singletons'
@@ -99,6 +99,7 @@ export const ProjectExplorer = ({
 
     if (project && project.children) {
       // moves all folders up and files down, files are sorted within folders
+      // gotcha: this only sorts the current level, not recursive for all children!
       const sortedData = sortFilesAndDirectories(project.children)
       flattenedData = flattenProject(sortedData, project.name)
       // insert fake row if one is present

src/components/Explorer/utils.ts

@@ -30,6 +30,14 @@ export interface FileExplorerRender extends FileExplorerRow {
   domLength: number
 }
 
+export interface FileExplorerRowContextMenuProps {
+  itemRef: React.RefObject<HTMLElement>
+  onRename: () => void
+  onDelete: () => void
+  onClone: () => void
+  onOpenInNewWindow: () => void
+}
+
 export const constructPath = ({
   parentPath,
   name,
@@ -92,6 +100,7 @@ export const flattenProject = (
   projectName: string
 ): FileExplorerEntry[] => {
   const flattenTreeInOrder: FileExplorerEntry[] = []
+
   // For all children of the project, start the recursion to flatten the tree data structure
   for (let index = 0; index < projectChildren.length; index++) {
     flattenProjectHelper(