Rename root folders

app/src/components/modals/account/DeleteAccountModal.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import {
+  Modal,
+  Stack,
+  Text,
+  PasswordInput,
+  Group,
+  Button,
+} from '@mantine/core';
+
+const DeleteAccountModal = ({ opened, onClose, onConfirm }) => {
+  const [password, setPassword] = useState('');
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Delete Account"
+      centered
+      size="sm"
+    >
+      <Stack>
+        <Text c="red" fw={500}>
+          Warning: This action cannot be undone
+        </Text>
+        <Text size="sm">
+          Please enter your password to confirm account deletion.
+        </Text>
+        <PasswordInput
+          label="Current Password"
+          placeholder="Enter your current password"
+          value={password}
+          onChange={(e) => setPassword(e.currentTarget.value)}
+          required
+        />
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            color="red"
+            onClick={() => {
+              onConfirm(password);
+              setPassword('');
+            }}
+          >
+            Delete Account
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default DeleteAccountModal;

app/src/components/modals/account/EmailPasswordModal.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import {
+  Modal,
+  Text,
+  Button,
+  Group,
+  Stack,
+  PasswordInput,
+} from '@mantine/core';
+
+const EmailPasswordModal = ({ opened, onClose, onConfirm, email }) => {
+  const [password, setPassword] = useState('');
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Confirm Password"
+      centered
+      size="sm"
+    >
+      <Stack>
+        <Text size="sm">
+          Please enter your password to confirm changing your email to: {email}
+        </Text>
+        <PasswordInput
+          label="Current Password"
+          placeholder="Enter your current password"
+          value={password}
+          onChange={(e) => setPassword(e.currentTarget.value)}
+          required
+        />
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onConfirm(password);
+              setPassword('');
+            }}
+          >
+            Confirm
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default EmailPasswordModal;

app/src/components/modals/file/CreateFileModal.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
+import { useModalContext } from '../../../contexts/ModalContext';
+
+const CreateFileModal = ({ onCreateFile }) => {
+  const [fileName, setFileName] = useState('');
+  const { newFileModalVisible, setNewFileModalVisible } = useModalContext();
+
+  const handleSubmit = async () => {
+    if (fileName) {
+      await onCreateFile(fileName);
+      setFileName('');
+      setNewFileModalVisible(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={newFileModalVisible}
+      onClose={() => setNewFileModalVisible(false)}
+      title="Create New File"
+      centered
+      size="sm"
+    >
+      <Box maw={400} mx="auto">
+        <TextInput
+          label="File Name"
+          placeholder="Enter file name"
+          value={fileName}
+          onChange={(event) => setFileName(event.currentTarget.value)}
+          mb="md"
+          w="100%"
+        />
+        <Group justify="flex-end" mt="md">
+          <Button
+            variant="default"
+            onClick={() => setNewFileModalVisible(false)}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Create</Button>
+        </Group>
+      </Box>
+    </Modal>
+  );
+};
+
+export default CreateFileModal;

app/src/components/modals/file/DeleteFileModal.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Modal, Text, Button, Group } from '@mantine/core';
+import { useModalContext } from '../../../contexts/ModalContext';
+
+const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
+  const { deleteFileModalVisible, setDeleteFileModalVisible } =
+    useModalContext();
+
+  const handleConfirm = async () => {
+    await onDeleteFile(selectedFile);
+    setDeleteFileModalVisible(false);
+  };
+
+  return (
+    <Modal
+      opened={deleteFileModalVisible}
+      onClose={() => setDeleteFileModalVisible(false)}
+      title="Delete File"
+      centered
+    >
+      <Text>Are you sure you want to delete "{selectedFile}"?</Text>
+      <Group justify="flex-end" mt="xl">
+        <Button
+          variant="default"
+          onClick={() => setDeleteFileModalVisible(false)}
+        >
+          Cancel
+        </Button>
+        <Button color="red" onClick={handleConfirm}>
+          Delete
+        </Button>
+      </Group>
+    </Modal>
+  );
+};
+
+export default DeleteFileModal;

app/src/components/modals/git/CommitMessageModal.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
+import { useModalContext } from '../../../contexts/ModalContext';
+
+const CommitMessageModal = ({ onCommitAndPush }) => {
+  const [message, setMessage] = useState('');
+  const { commitMessageModalVisible, setCommitMessageModalVisible } =
+    useModalContext();
+
+  const handleSubmit = async () => {
+    if (message) {
+      await onCommitAndPush(message);
+      setMessage('');
+      setCommitMessageModalVisible(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={commitMessageModalVisible}
+      onClose={() => setCommitMessageModalVisible(false)}
+      title="Enter Commit Message"
+      centered
+      size="sm"
+    >
+      <Box maw={400} mx="auto">
+        <TextInput
+          label="Commit Message"
+          placeholder="Enter commit message"
+          value={message}
+          onChange={(event) => setMessage(event.currentTarget.value)}
+          mb="md"
+          w="100%"
+        />
+        <Group justify="flex-end" mt="md">
+          <Button
+            variant="default"
+            onClick={() => setCommitMessageModalVisible(false)}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Commit</Button>
+        </Group>
+      </Box>
+    </Modal>
+  );
+};
+
+export default CommitMessageModal;

app/src/components/modals/user/CreateUserModal.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import {
+  Modal,
+  Stack,
+  TextInput,
+  PasswordInput,
+  Select,
+  Button,
+  Group,
+} from '@mantine/core';
+
+const CreateUserModal = ({ opened, onClose, onCreateUser, loading }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [role, setRole] = useState('viewer');
+
+  const handleSubmit = async () => {
+    const result = await onCreateUser({ email, password, displayName, role });
+    if (result.success) {
+      setEmail('');
+      setPassword('');
+      setDisplayName('');
+      setRole('viewer');
+      onClose();
+    }
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Create New User" centered>
+      <Stack>
+        <TextInput
+          label="Email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.currentTarget.value)}
+          placeholder="user@example.com"
+        />
+        <TextInput
+          label="Display Name"
+          value={displayName}
+          onChange={(e) => setDisplayName(e.currentTarget.value)}
+          placeholder="John Doe"
+        />
+        <PasswordInput
+          label="Password"
+          required
+          value={password}
+          onChange={(e) => setPassword(e.currentTarget.value)}
+          placeholder="Enter password"
+        />
+        <Select
+          label="Role"
+          required
+          value={role}
+          onChange={setRole}
+          data={[
+            { value: 'admin', label: 'Admin' },
+            { value: 'editor', label: 'Editor' },
+            { value: 'viewer', label: 'Viewer' },
+          ]}
+        />
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={loading}>
+            Create User
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default CreateUserModal;

app/src/components/modals/user/DeleteUserModal.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Modal, Text, Button, Group, Stack } from '@mantine/core';
+
+const DeleteUserModal = ({ opened, onClose, onConfirm, user, loading }) => (
+  <Modal
+    opened={opened}
+    onClose={onClose}
+    title="Delete User"
+    centered
+    size="sm"
+  >
+    <Stack>
+      <Text>
+        Are you sure you want to delete user "{user?.email}"? This action cannot
+        be undone and all associated data will be permanently deleted.
+      </Text>
+      <Group justify="flex-end" mt="xl">
+        <Button variant="default" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button color="red" onClick={onConfirm} loading={loading}>
+          Delete User
+        </Button>
+      </Group>
+    </Stack>
+  </Modal>
+);
+
+export default DeleteUserModal;

app/src/components/modals/user/EditUserModal.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Modal,
+  Stack,
+  TextInput,
+  Select,
+  Button,
+  Group,
+  PasswordInput,
+  Text,
+} from '@mantine/core';
+
+const EditUserModal = ({ opened, onClose, onEditUser, loading, user }) => {
+  const [formData, setFormData] = useState({
+    email: '',
+    displayName: '',
+    role: '',
+    password: '',
+  });
+
+  useEffect(() => {
+    if (user) {
+      setFormData({
+        email: user.email,
+        displayName: user.displayName || '',
+        role: user.role,
+        password: '',
+      });
+    }
+  }, [user]);
+
+  const handleSubmit = async () => {
+    const updateData = {
+      ...formData,
+      ...(formData.password ? { password: formData.password } : {}),
+    };
+
+    const result = await onEditUser(user.id, updateData);
+    if (result.success) {
+      setFormData({
+        email: '',
+        displayName: '',
+        role: '',
+        password: '',
+      });
+      onClose();
+    }
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Edit User" centered>
+      <Stack>
+        <TextInput
+          label="Email"
+          required
+          value={formData.email}
+          onChange={(e) =>
+            setFormData({ ...formData, email: e.currentTarget.value })
+          }
+          placeholder="user@example.com"
+        />
+        <TextInput
+          label="Display Name"
+          value={formData.displayName}
+          onChange={(e) =>
+            setFormData({ ...formData, displayName: e.currentTarget.value })
+          }
+          placeholder="John Doe"
+        />
+        <Select
+          label="Role"
+          required
+          value={formData.role}
+          onChange={(value) => setFormData({ ...formData, role: value })}
+          data={[
+            { value: 'admin', label: 'Admin' },
+            { value: 'editor', label: 'Editor' },
+            { value: 'viewer', label: 'Viewer' },
+          ]}
+        />
+        <PasswordInput
+          label="New Password"
+          value={formData.password}
+          onChange={(e) =>
+            setFormData({ ...formData, password: e.currentTarget.value })
+          }
+          placeholder="Enter new password (leave empty to keep current)"
+        />
+        <Text size="xs" c="dimmed">
+          Leave password empty to keep the current password
+        </Text>
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={loading}>
+            Save Changes
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default EditUserModal;

app/src/components/modals/workspace/CreateWorkspaceModal.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
+import { useModalContext } from '../../../contexts/ModalContext';
+import { createWorkspace } from '../../../services/api';
+import { notifications } from '@mantine/notifications';
+
+const CreateWorkspaceModal = ({ onWorkspaceCreated }) => {
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { createWorkspaceModalVisible, setCreateWorkspaceModalVisible } =
+    useModalContext();
+
+  const handleSubmit = async () => {
+    if (!name.trim()) {
+      notifications.show({
+        title: 'Error',
+        message: 'Workspace name is required',
+        color: 'red',
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const workspace = await createWorkspace(name);
+      notifications.show({
+        title: 'Success',
+        message: 'Workspace created successfully',
+        color: 'green',
+      });
+      setName('');
+      setCreateWorkspaceModalVisible(false);
+      if (onWorkspaceCreated) {
+        onWorkspaceCreated(workspace);
+      }
+    } catch (error) {
+      notifications.show({
+        title: 'Error',
+        message: 'Failed to create workspace',
+        color: 'red',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={createWorkspaceModalVisible}
+      onClose={() => setCreateWorkspaceModalVisible(false)}
+      title="Create New Workspace"
+      centered
+      size="sm"
+    >
+      <Box maw={400} mx="auto">
+        <TextInput
+          label="Workspace Name"
+          placeholder="Enter workspace name"
+          value={name}
+          onChange={(event) => setName(event.currentTarget.value)}
+          mb="md"
+          w="100%"
+          disabled={loading}
+        />
+        <Group justify="flex-end" mt="md">
+          <Button
+            variant="default"
+            onClick={() => setCreateWorkspaceModalVisible(false)}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={loading}>
+            Create
+          </Button>
+        </Group>
+      </Box>
+    </Modal>
+  );
+};
+
+export default CreateWorkspaceModal;

app/src/components/modals/workspace/DeleteWorkspaceModal.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Modal, Text, Button, Group, Stack } from '@mantine/core';
+
+const DeleteWorkspaceModal = ({
+  opened,
+  onClose,
+  onConfirm,
+  workspaceName,
+}) => (
+  <Modal
+    opened={opened}
+    onClose={onClose}
+    title="Delete Workspace"
+    centered
+    size="sm"
+  >
+    <Stack>
+      <Text>
+        Are you sure you want to delete workspace "{workspaceName}"? This action
+        cannot be undone and all files in this workspace will be permanently
+        deleted.
+      </Text>
+      <Group justify="flex-end" mt="xl">
+        <Button variant="default" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button color="red" onClick={onConfirm}>
+          Delete Workspace
+        </Button>
+      </Group>
+    </Stack>
+  </Modal>
+);
+
+export default DeleteWorkspaceModal;