refactor: Improve context menu functionality and add rename feature

app/components/FilesEditor/ContextMenu/container.tsx

@@ -1,11 +1,15 @@
-import { FC } from "react";
-import { useRef } from "react";
+import { FC, 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}
+      className="bg-secondary text-secondary-content p-2 mx-0 rounded-md cursor-pointer w-80"
+      style={{ position: "absolute", top: y, left: x }}
+    >
       <div
-        ref={contextMenuRef}
-        onClick={closeContextMenu}
-        className="bg-secondary text-secondary-content p-2 rounded-md cursor-pointer"
-        style={{ position: "absolute", top: y, left: x }}
+        className="flex hover:bg-primary-content hover:text-primary"
+        onClick={() => {
+          setFile(file);
+          renameFunction();
+          console.log("Renaming file:", file?.attributes.name);
+        }}
       >
-        <div
-          className="hover:bg-primary-content hover:text-primary"
-          onClick={() => {
-            console.log("Option ", file?.attributes.name);
-          }}
-        >
-          {file?.attributes.name}
+        <div className="mr-2" style={{ transform: "scale(0.77)" }}>
+          <PencilIcon />
         </div>
-        <div>Option 2</div>
-        <div>Option 3</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>
   );
 };
 

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;