refactor: Improve context menu functionality and add rename feature

app/components/FilesEditor/ContextMenu/container.tsx

@@ -1,11 +1,15 @@
-import { FC } from "react";
+import { FC, useRef } from "react";
-import { useRef } from "react";
 import useOnclickOutside from "@/hooks/useOnClickOutside";
+import PencilIcon from "@/components/Icons/Pencil";
+import MoveIcon from "@/components/Icons/Move";
+import LockIcon from "@/components/Icons/Lock";
 
 interface ContextMenuProps {
   x: number;
   y: number;
   closeContextMenu: () => void;
+  renameFunction: () => void;
+  setFile: (file: any) => void;
   file?: any;
 }
 
@@ -13,31 +17,55 @@ const ContextMenuContainer: FC<ContextMenuProps> = ({
   x,
   y,
   closeContextMenu,
+  renameFunction,
+  setFile,
   file,
 }) => {
   const contextMenuRef = useRef<HTMLDivElement>(null);
   useOnclickOutside(contextMenuRef, closeContextMenu);
 
   return (
-    <>
     <div
       ref={contextMenuRef}
-        onClick={closeContextMenu}
+      className="bg-secondary text-secondary-content p-2 mx-0 rounded-md cursor-pointer w-80"
-        className="bg-secondary text-secondary-content p-2 rounded-md cursor-pointer"
       style={{ position: "absolute", top: y, left: x }}
     >
       <div
-          className="hover:bg-primary-content hover:text-primary"
+        className="flex hover:bg-primary-content hover:text-primary"
         onClick={() => {
-            console.log("Option ", file?.attributes.name);
+          setFile(file);
+          renameFunction();
+          console.log("Renaming file:", file?.attributes.name);
         }}
       >
-          {file?.attributes.name}
+        <div className="mr-2" style={{ transform: "scale(0.77)" }}>
+          <PencilIcon />
+        </div>
+        Rename
+      </div>
+      <div
+        className="flex hover:bg-primary-content hover:text-primary"
+        onClick={() => {
+          console.log("Moving file:", file?.attributes.name);
+        }}
+      >
+        <div className="mr-2" style={{ transform: "scale(0.8)" }}>
+          <MoveIcon />
+        </div>
+        Move
+      </div>
+      <div
+        className="flex hover:bg-primary-content hover:text-primary"
+        onClick={() => {
+          console.log("Changing permissions for file:", file?.attributes.name);
+        }}
+      >
+        <div className="mr-2" style={{ transform: "scale(0.8)" }}>
+          <LockIcon />
+        </div>
+        Permissions
       </div>
-        <div>Option 2</div>
-        <div>Option 3</div>
     </div>
-    </>
   );
 };
 

app/components/FilesEditor/ContextMenu/rename.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+interface Props {
+  closeRemapFunction: () => void;
+  file: any;
+}
+
+const Rename = (props: Props) => {
+  const { closeRemapFunction, file } = props;
+  const [newName, setNewName] = React.useState(file.attributes.name);
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Escape") {
+      console.log("esc");
+      closeRemapFunction();
+    } else if (event.key === "Enter") {
+      console.log("enter pressed");
+    }
+  };
+
+  const handleRename = (event: React.MouseEvent) => {
+    // console.log("rename");
+    console.log("Renaming file:", file?.attributes.name, "to", newName);
+    console.log(file);
+  };
+
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      onKeyDown={handleKeyDown}
+      tabIndex={-1} // Dodano tabIndex, aby element był fokusowalny
+      className="fixed inset-0 flex items-center justify-center z-50"
+    >
+      <div className="absolute inset-0 bg-black bg-opacity-75"></div>
+      <div className="flex bg-secondary p-6 rounded-lg shadow-lg z-10">
+        <input
+          type="text"
+          placeholder="Type here"
+          className="input w-full max-w-xs text-primary"
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+        />
+        <button className="ml-2 btn" onClick={handleRename}>
+          Rename
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Rename;

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