diff --git a/src/components/Explorer/FileExplorer.tsx b/src/components/Explorer/FileExplorer.tsx
index acfdd530e..5b063d4a1 100644
--- a/src/components/Explorer/FileExplorer.tsx
+++ b/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 •
@@ -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 (
{row.status}
+
{}}
+ onDelete={() => {}}
+ onClone={() => {}}
+ onOpenInNewWindow={() => {}}
+ />
)
}
+
+function FileExplorerRowContextMenu({
+ itemRef,
+ onRename,
+ onDelete,
+ onClone,
+ onOpenInNewWindow,
+}: FileExplorerRowContextMenuProps) {
+ const platform = usePlatform()
+ const metaKey = platform === 'macos' ? '⌘' : 'Ctrl'
+ return (
+
+ Rename
+ ,
+
+ Delete
+ ,
+
+ Clone
+ ,
+
+ Open in new window
+ ,
+ ]}
+ />
+ )
+}
diff --git a/src/components/Explorer/ProjectExplorer.tsx b/src/components/Explorer/ProjectExplorer.tsx
index 12512a28b..fa30b1d1e 100644
--- a/src/components/Explorer/ProjectExplorer.tsx
+++ b/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
diff --git a/src/components/Explorer/utils.ts b/src/components/Explorer/utils.ts
index 4f5128b80..723bd89d8 100644
--- a/src/components/Explorer/utils.ts
+++ b/src/components/Explorer/utils.ts
@@ -30,6 +30,14 @@ export interface FileExplorerRender extends FileExplorerRow {
domLength: number
}
+export interface FileExplorerRowContextMenuProps {
+ itemRef: React.RefObject
+ 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(