refactor: Improve context menu functionality and add rename feature

app/components/FilesEditor/index.tsx

@@ -6,6 +6,7 @@ import DocumentIcon from "@/components/Icons/Document";
 import FolderIcon from "@/components/Icons/Folder";
 import MenuIcon from "@/components/Icons/Menu";
 import ContextMenuContainer from "./ContextMenu/container";
+import RenamePopup from "./ContextMenu/rename";
 
 const initialContextMenu = {
   show: false,
@@ -14,6 +15,10 @@ const initialContextMenu = {
   file: null,
 };
 
+const renamePopupProps = {
+  show: false,
+};
+
 interface FileProps {
   attributes: {
     name: string;
@@ -27,13 +32,24 @@ const Index = () => {
   const [apiKey, setApiKey] = useState("");
   const [fileList, setFileList] = useState([]);
   const [contextMenu, setContextMenu] = useState(initialContextMenu);
+  const [renamePopup, setRenamePopup] = useState(renamePopupProps);
+  const [file, setFile] = useState<FileProps | null>(null);
+
+  const showRenamePopup = () => {
+    console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
+    setContextMenu(initialContextMenu);
+    setRenamePopup({ show: true });
+  };
+
+  const closeRenamePopup = () => {
+    setRenamePopup(renamePopupProps);
+  };
 
   const handleClickContextMenu = (
     e: React.MouseEvent<HTMLDivElement, MouseEvent>,
     file: any
   ) => {
     e.preventDefault();
-    console.log("Right Clicked", file, e);
 
     const { pageX, pageY } = e;
     setContextMenu({ show: true, x: pageX, y: pageY, file });
@@ -88,11 +104,16 @@ const Index = () => {
 
   return (
     <>
+      {renamePopup.show && (
+        <RenamePopup file={file} closeRemapFunction={closeRenamePopup} />
+      )}
       {contextMenu.show && (
         <ContextMenuContainer
           x={contextMenu.x}
           y={contextMenu.y}
           closeContextMenu={handleContextMenuClose}
+          renameFunction={showRenamePopup}
+          setFile={setFile}
           file={contextMenu.file}
         />
       )}