Add rename file functionality with modal support

app/src/components/modals/file/RenameFileModal.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
+import { useModalContext } from '../../../contexts/ModalContext';
+
+interface RenameFileModalProps {
+  onRenameFile: (oldPath: string, newPath: string) => Promise<void>;
+  selectedFile: string | null;
+}
+
+const RenameFileModal: React.FC<RenameFileModalProps> = ({
+  onRenameFile,
+  selectedFile,
+}) => {
+  const [newFileName, setNewFileName] = useState<string>('');
+  const { renameFileModalVisible, setRenameFileModalVisible } =
+    useModalContext();
+
+  // Extract just the filename from the full path for editing
+  const getCurrentFileName = (filePath: string | null): string => {
+    if (!filePath) return '';
+    const parts = filePath.split('/');
+    return parts[parts.length - 1] || '';
+  };
+
+  // Get the directory path (everything except the filename)
+  const getDirectoryPath = (filePath: string | null): string => {
+    if (!filePath) return '';
+    const parts = filePath.split('/');
+    return parts.slice(0, -1).join('/');
+  };
+
+  // Set the current filename when modal opens or selectedFile changes
+  useEffect(() => {
+    if (renameFileModalVisible && selectedFile) {
+      setNewFileName(getCurrentFileName(selectedFile));
+    }
+  }, [renameFileModalVisible, selectedFile]);
+
+  const handleSubmit = async (): Promise<void> => {
+    if (newFileName && selectedFile) {
+      const directoryPath = getDirectoryPath(selectedFile);
+      const newPath = directoryPath
+        ? `${directoryPath}/${newFileName.trim()}`
+        : newFileName.trim();
+
+      await onRenameFile(selectedFile, newPath);
+      setNewFileName('');
+      setRenameFileModalVisible(false);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent): void => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      void handleSubmit();
+    }
+  };
+
+  const handleClose = (): void => {
+    setNewFileName('');
+    setRenameFileModalVisible(false);
+  };
+
+  return (
+    <Modal
+      opened={renameFileModalVisible}
+      onClose={handleClose}
+      title="Rename File"
+      centered
+      size="sm"
+    >
+      <Box maw={400} mx="auto">
+        <TextInput
+          label="File Name"
+          type="text"
+          placeholder="Enter new file name"
+          data-testid="rename-file-input"
+          value={newFileName}
+          onChange={(event) => setNewFileName(event.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+          mb="md"
+          w="100%"
+          autoFocus
+        />
+        <Group justify="flex-end" mt="xl">
+          <Button
+            variant="default"
+            onClick={handleClose}
+            data-testid="cancel-rename-file-button"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => void handleSubmit()}
+            data-testid="confirm-rename-file-button"
+            disabled={
+              !newFileName.trim() ||
+              newFileName.trim() === getCurrentFileName(selectedFile)
+            }
+          >
+            Rename
+          </Button>
+        </Group>
+      </Box>
+    </Modal>
+  );
+};
+
+export default RenameFileModal;