File creation, UI changes and context-menu

packages/editor/package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.3",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",

packages/editor/src/components/context-menu.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { File, Folder, Trash2 } from "lucide-react";
+
+interface FileExplorerContextMenuProps {
+  children: React.ReactNode;
+  onNewFile: () => void;
+  onNewFolder: () => void;
+  onDelete: () => void;
+  isFolder: boolean;
+}
+
+export function FileExplorerContextMenu({
+  children,
+  onNewFile,
+  onNewFolder,
+  onDelete,
+  isFolder,
+}: FileExplorerContextMenuProps) {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>{children}</ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        {isFolder && (
+          <>
+            <ContextMenuItem onSelect={onNewFile}>
+              <File className="mr-2 h-4 w-4" />
+              New File
+            </ContextMenuItem>
+            <ContextMenuItem onSelect={onNewFolder}>
+              <Folder className="mr-2 h-4 w-4" />
+              New Folder
+            </ContextMenuItem>
+          </>
+        )}
+        <ContextMenuItem onSelect={onDelete} className="text-red-600">
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}