Rename root folders

app/src/components/settings/AccordionControl.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Accordion, Title } from '@mantine/core';
+
+const AccordionControl = ({ children }) => (
+  <Accordion.Control>
+    <Title order={4}>{children}</Title>
+  </Accordion.Control>
+);
+
+export default AccordionControl;

app/src/components/settings/account/AccountSettings.jsx

@@ -0,0 +1,248 @@
+import React, { useState, useReducer, useRef, useEffect } from 'react';
+import {
+  Modal,
+  Badge,
+  Button,
+  Group,
+  Title,
+  Stack,
+  Accordion,
+} from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { useAuth } from '../../../contexts/AuthContext';
+import { useProfileSettings } from '../../../hooks/useProfileSettings';
+import EmailPasswordModal from '../../modals/account/EmailPasswordModal';
+import SecuritySettings from './SecuritySettings';
+import ProfileSettings from './ProfileSettings';
+import DangerZoneSettings from './DangerZoneSettings';
+import AccordionControl from '../AccordionControl';
+
+// Reducer for managing settings state
+const initialState = {
+  localSettings: {},
+  initialSettings: {},
+  hasUnsavedChanges: false,
+};
+
+function settingsReducer(state, action) {
+  switch (action.type) {
+    case 'INIT_SETTINGS':
+      return {
+        ...state,
+        localSettings: action.payload,
+        initialSettings: action.payload,
+        hasUnsavedChanges: false,
+      };
+    case 'UPDATE_LOCAL_SETTINGS':
+      const newLocalSettings = { ...state.localSettings, ...action.payload };
+      const hasChanges =
+        JSON.stringify(newLocalSettings) !==
+        JSON.stringify(state.initialSettings);
+      return {
+        ...state,
+        localSettings: newLocalSettings,
+        hasUnsavedChanges: hasChanges,
+      };
+    case 'MARK_SAVED':
+      return {
+        ...state,
+        initialSettings: state.localSettings,
+        hasUnsavedChanges: false,
+      };
+    default:
+      return state;
+  }
+}
+
+const AccountSettings = ({ opened, onClose }) => {
+  const { user, refreshUser } = useAuth();
+  const { loading, updateProfile } = useProfileSettings();
+  const [state, dispatch] = useReducer(settingsReducer, initialState);
+  const isInitialMount = useRef(true);
+  const [emailModalOpened, setEmailModalOpened] = useState(false);
+
+  // Initialize settings on mount
+  useEffect(() => {
+    if (isInitialMount.current && user) {
+      isInitialMount.current = false;
+      const settings = {
+        displayName: user.displayName,
+        email: user.email,
+        currentPassword: '',
+        newPassword: '',
+      };
+      dispatch({ type: 'INIT_SETTINGS', payload: settings });
+    }
+  }, [user]);
+
+  const handleInputChange = (key, value) => {
+    dispatch({ type: 'UPDATE_LOCAL_SETTINGS', payload: { [key]: value } });
+  };
+
+  const handleSubmit = async () => {
+    const updates = {};
+    const needsPasswordConfirmation =
+      state.localSettings.email !== state.initialSettings.email;
+
+    // Add display name if changed
+    if (state.localSettings.displayName !== state.initialSettings.displayName) {
+      updates.displayName = state.localSettings.displayName;
+    }
+
+    // Handle password change
+    if (state.localSettings.newPassword) {
+      if (!state.localSettings.currentPassword) {
+        notifications.show({
+          title: 'Error',
+          message: 'Current password is required to change password',
+          color: 'red',
+        });
+        return;
+      }
+      updates.newPassword = state.localSettings.newPassword;
+      updates.currentPassword = state.localSettings.currentPassword;
+    }
+
+    // If we're only changing display name or have password already provided, proceed directly
+    if (!needsPasswordConfirmation || state.localSettings.currentPassword) {
+      if (needsPasswordConfirmation) {
+        updates.email = state.localSettings.email;
+        // If we don't have a password change, we still need to include the current password for email change
+        if (!updates.currentPassword) {
+          updates.currentPassword = state.localSettings.currentPassword;
+        }
+      }
+
+      const result = await updateProfile(updates);
+      if (result.success) {
+        await refreshUser();
+        dispatch({ type: 'MARK_SAVED' });
+        onClose();
+      }
+    } else {
+      // Only show the email confirmation modal if we don't already have the password
+      setEmailModalOpened(true);
+    }
+  };
+
+  const handleEmailConfirm = async (password) => {
+    const updates = {
+      ...state.localSettings,
+      currentPassword: password,
+    };
+    // Remove any undefined/empty values
+    Object.keys(updates).forEach((key) => {
+      if (updates[key] === undefined || updates[key] === '') {
+        delete updates[key];
+      }
+    });
+    // Remove keys that haven't changed
+    if (updates.displayName === state.initialSettings.displayName) {
+      delete updates.displayName;
+    }
+    if (updates.email === state.initialSettings.email) {
+      delete updates.email;
+    }
+
+    const result = await updateProfile(updates);
+    if (result.success) {
+      await refreshUser();
+      dispatch({ type: 'MARK_SAVED' });
+      setEmailModalOpened(false);
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={onClose}
+        title={<Title order={2}>Account Settings</Title>}
+        centered
+        size="lg"
+      >
+        <Stack spacing="xl">
+          {state.hasUnsavedChanges && (
+            <Badge color="yellow" variant="light">
+              Unsaved Changes
+            </Badge>
+          )}
+
+          <Accordion
+            defaultValue={['profile', 'security', 'danger']}
+            multiple
+            styles={(theme) => ({
+              control: {
+                paddingTop: theme.spacing.md,
+                paddingBottom: theme.spacing.md,
+              },
+              item: {
+                borderBottom: `1px solid ${
+                  theme.colorScheme === 'dark'
+                    ? theme.colors.dark[4]
+                    : theme.colors.gray[3]
+                }`,
+                '&[data-active]': {
+                  backgroundColor:
+                    theme.colorScheme === 'dark'
+                      ? theme.colors.dark[7]
+                      : theme.colors.gray[0],
+                },
+              },
+            })}
+          >
+            <Accordion.Item value="profile">
+              <AccordionControl>Profile</AccordionControl>
+              <Accordion.Panel>
+                <ProfileSettings
+                  settings={state.localSettings}
+                  onInputChange={handleInputChange}
+                />
+              </Accordion.Panel>
+            </Accordion.Item>
+
+            <Accordion.Item value="security">
+              <AccordionControl>Security</AccordionControl>
+              <Accordion.Panel>
+                <SecuritySettings
+                  settings={state.localSettings}
+                  onInputChange={handleInputChange}
+                />
+              </Accordion.Panel>
+            </Accordion.Item>
+
+            <Accordion.Item value="danger">
+              <AccordionControl>Danger Zone</AccordionControl>
+              <Accordion.Panel>
+                <DangerZoneSettings />
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion>
+
+          <Group justify="flex-end">
+            <Button variant="default" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              loading={loading}
+              disabled={!state.hasUnsavedChanges}
+            >
+              Save Changes
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      <EmailPasswordModal
+        opened={emailModalOpened}
+        onClose={() => setEmailModalOpened(false)}
+        onConfirm={handleEmailConfirm}
+        email={state.localSettings.email}
+      />
+    </>
+  );
+};
+
+export default AccountSettings;

app/src/components/settings/account/DangerZoneSettings.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Box, Button, Text } from '@mantine/core';
+import DeleteAccountModal from '../../modals/account/DeleteAccountModal';
+import { useAuth } from '../../../contexts/AuthContext';
+import { useProfileSettings } from '../../../hooks/useProfileSettings';
+
+const DangerZoneSettings = () => {
+  const { logout } = useAuth();
+  const { deleteAccount } = useProfileSettings();
+  const [deleteModalOpened, setDeleteModalOpened] = useState(false);
+
+  const handleDelete = async (password) => {
+    const result = await deleteAccount(password);
+    if (result.success) {
+      setDeleteModalOpened(false);
+      logout();
+    }
+  };
+
+  return (
+    <Box mb="md">
+      <Text size="sm" mb="sm" c="dimmed">
+        Once you delete your account, there is no going back. Please be certain.
+      </Text>
+      <Button
+        color="red"
+        variant="light"
+        onClick={() => setDeleteModalOpened(true)}
+        fullWidth
+      >
+        Delete Account
+      </Button>
+
+      <DeleteAccountModal
+        opened={deleteModalOpened}
+        onClose={() => setDeleteModalOpened(false)}
+        onConfirm={handleDelete}
+      />
+    </Box>
+  );
+};
+
+export default DangerZoneSettings;

app/src/components/settings/account/ProfileSettings.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box, Stack, TextInput } from '@mantine/core';
+
+const ProfileSettings = ({ settings, onInputChange }) => (
+  <Box>
+    <Stack spacing="md">
+      <TextInput
+        label="Display Name"
+        value={settings.displayName || ''}
+        onChange={(e) => onInputChange('displayName', e.currentTarget.value)}
+        placeholder="Enter display name"
+      />
+      <TextInput
+        label="Email"
+        value={settings.email || ''}
+        onChange={(e) => onInputChange('email', e.currentTarget.value)}
+        placeholder="Enter email"
+      />
+    </Stack>
+  </Box>
+);
+
+export default ProfileSettings;

app/src/components/settings/account/SecuritySettings.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Box, PasswordInput, Stack, Text } from '@mantine/core';
+
+const SecuritySettings = ({ settings, onInputChange }) => {
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handlePasswordChange = (field, value) => {
+    if (field === 'confirmNewPassword') {
+      setConfirmPassword(value);
+      // Check if passwords match when either password field changes
+      if (value !== settings.newPassword) {
+        setError('Passwords do not match');
+      } else {
+        setError('');
+      }
+    } else {
+      onInputChange(field, value);
+      // Check if passwords match when either password field changes
+      if (field === 'newPassword' && value !== confirmPassword) {
+        setError('Passwords do not match');
+      } else if (value === confirmPassword) {
+        setError('');
+      }
+    }
+  };
+
+  return (
+    <Box>
+      <Stack spacing="md">
+        <PasswordInput
+          label="Current Password"
+          value={settings.currentPassword || ''}
+          onChange={(e) =>
+            handlePasswordChange('currentPassword', e.currentTarget.value)
+          }
+          placeholder="Enter current password"
+        />
+        <PasswordInput
+          label="New Password"
+          value={settings.newPassword || ''}
+          onChange={(e) =>
+            handlePasswordChange('newPassword', e.currentTarget.value)
+          }
+          placeholder="Enter new password"
+        />
+        <PasswordInput
+          label="Confirm New Password"
+          value={confirmPassword}
+          onChange={(e) =>
+            handlePasswordChange('confirmNewPassword', e.currentTarget.value)
+          }
+          placeholder="Confirm new password"
+          error={error}
+        />
+        <Text size="xs" c="dimmed">
+          Password must be at least 8 characters long. Leave password fields
+          empty if you don't want to change it.
+        </Text>
+      </Stack>
+    </Box>
+  );
+};
+
+export default SecuritySettings;

app/src/components/settings/admin/AdminDashboard.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Modal, Tabs } from '@mantine/core';
+import { IconUsers, IconFolders, IconChartBar } from '@tabler/icons-react';
+import { useAuth } from '../../../contexts/AuthContext';
+import AdminUsersTab from './AdminUsersTab';
+import AdminWorkspacesTab from './AdminWorkspacesTab';
+import AdminStatsTab from './AdminStatsTab';
+
+const AdminDashboard = ({ opened, onClose }) => {
+  const { user: currentUser } = useAuth();
+  const [activeTab, setActiveTab] = useState('users');
+
+  return (
+    <Modal opened={opened} onClose={onClose} size="xl" title="Admin Dashboard">
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.List>
+          <Tabs.Tab value="users" leftSection={<IconUsers size={16} />}>
+            Users
+          </Tabs.Tab>
+          <Tabs.Tab value="workspaces" leftSection={<IconFolders size={16} />}>
+            Workspaces
+          </Tabs.Tab>
+          <Tabs.Tab value="stats" leftSection={<IconChartBar size={16} />}>
+            Statistics
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="users" pt="md">
+          <AdminUsersTab currentUser={currentUser} />
+        </Tabs.Panel>
+
+        <Tabs.Panel value="workspaces" pt="md">
+          <AdminWorkspacesTab />
+        </Tabs.Panel>
+
+        <Tabs.Panel value="stats" pt="md">
+          <AdminStatsTab />
+        </Tabs.Panel>
+      </Tabs>
+    </Modal>
+  );
+};
+
+export default AdminDashboard;

app/src/components/settings/admin/AdminStatsTab.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Table, Text, Box, LoadingOverlay, Alert } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons-react';
+import { useAdminData } from '../../../hooks/useAdminData';
+import { formatBytes } from '../../../utils/formatBytes';
+
+const AdminStatsTab = () => {
+  const { data: stats, loading, error } = useAdminData('stats');
+
+  if (loading) {
+    return <LoadingOverlay visible={true} />;
+  }
+
+  if (error) {
+    return (
+      <Alert icon={<IconAlertCircle size={16} />} title="Error" color="red">
+        {error}
+      </Alert>
+    );
+  }
+
+  const statsRows = [
+    { label: 'Total Users', value: stats.totalUsers },
+    { label: 'Active Users', value: stats.activeUsers },
+    { label: 'Total Workspaces', value: stats.totalWorkspaces },
+    { label: 'Total Files', value: stats.totalFiles },
+    { label: 'Total Storage Size', value: formatBytes(stats.totalSize) },
+  ];
+
+  return (
+    <Box pos="relative">
+      <Text size="xl" fw={700} mb="md">
+        System Statistics
+      </Text>
+
+      <Table striped highlightOnHover withBorder>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Metric</Table.Th>
+            <Table.Th>Value</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {statsRows.map((row) => (
+            <Table.Tr key={row.label}>
+              <Table.Td>{row.label}</Table.Td>
+              <Table.Td>{row.value}</Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default AdminStatsTab;

app/src/components/settings/admin/AdminUsersTab.jsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import {
+  Table,
+  Button,
+  Group,
+  Text,
+  ActionIcon,
+  Box,
+  LoadingOverlay,
+  Alert,
+} from '@mantine/core';
+import {
+  IconTrash,
+  IconEdit,
+  IconPlus,
+  IconAlertCircle,
+} from '@tabler/icons-react';
+import { notifications } from '@mantine/notifications';
+import { useUserAdmin } from '../../../hooks/useUserAdmin';
+import CreateUserModal from '../../modals/user/CreateUserModal';
+import EditUserModal from '../../modals/user/EditUserModal';
+import DeleteUserModal from '../../modals/user/DeleteUserModal';
+
+const AdminUsersTab = ({ currentUser }) => {
+  const {
+    users,
+    loading,
+    error,
+    create,
+    update,
+    delete: deleteUser,
+  } = useUserAdmin();
+
+  const [createModalOpened, setCreateModalOpened] = useState(false);
+  const [editModalData, setEditModalData] = useState(null);
+  const [deleteModalData, setDeleteModalData] = useState(null);
+
+  const handleCreateUser = async (userData) => {
+    return await create(userData);
+  };
+
+  const handleEditUser = async (id, userData) => {
+    return await update(id, userData);
+  };
+
+  const handleDeleteClick = (user) => {
+    if (user.id === currentUser.id) {
+      notifications.show({
+        title: 'Error',
+        message: 'You cannot delete your own account',
+        color: 'red',
+      });
+      return;
+    }
+    setDeleteModalData(user);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deleteModalData) return;
+    const result = await deleteUser(deleteModalData.id);
+    if (result.success) {
+      setDeleteModalData(null);
+    }
+  };
+
+  const rows = users.map((user) => (
+    <Table.Tr key={user.id}>
+      <Table.Td>{user.email}</Table.Td>
+      <Table.Td>{user.displayName}</Table.Td>
+      <Table.Td>
+        <Text transform="capitalize">{user.role}</Text>
+      </Table.Td>
+      <Table.Td>{new Date(user.createdAt).toLocaleDateString()}</Table.Td>
+      <Table.Td>
+        <Group gap="xs" justify="flex-end">
+          <ActionIcon
+            variant="subtle"
+            color="blue"
+            onClick={() => setEditModalData(user)}
+          >
+            <IconEdit size={16} />
+          </ActionIcon>
+          <ActionIcon
+            variant="subtle"
+            color="red"
+            onClick={() => handleDeleteClick(user)}
+            disabled={user.id === currentUser.id}
+          >
+            <IconTrash size={16} />
+          </ActionIcon>
+        </Group>
+      </Table.Td>
+    </Table.Tr>
+  ));
+
+  return (
+    <Box pos="relative">
+      <LoadingOverlay visible={loading} />
+
+      {error && (
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          title="Error"
+          color="red"
+          mb="md"
+        >
+          {error}
+        </Alert>
+      )}
+
+      <Group justify="space-between" mb="md">
+        <Text size="xl" fw={700}>
+          User Management
+        </Text>
+        <Button
+          leftSection={<IconPlus size={16} />}
+          onClick={() => setCreateModalOpened(true)}
+        >
+          Create User
+        </Button>
+      </Group>
+
+      <Table striped highlightOnHover withTableBorder>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Email</Table.Th>
+            <Table.Th>Display Name</Table.Th>
+            <Table.Th>Role</Table.Th>
+            <Table.Th>Created At</Table.Th>
+            <Table.Th style={{ width: 100 }}>Actions</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>{rows}</Table.Tbody>
+      </Table>
+
+      <CreateUserModal
+        opened={createModalOpened}
+        onClose={() => setCreateModalOpened(false)}
+        onCreateUser={handleCreateUser}
+        loading={loading}
+      />
+
+      <EditUserModal
+        opened={!!editModalData}
+        onClose={() => setEditModalData(null)}
+        onEditUser={handleEditUser}
+        user={editModalData}
+        loading={loading}
+      />
+
+      <DeleteUserModal
+        opened={!!deleteModalData}
+        onClose={() => setDeleteModalData(null)}
+        onConfirm={handleDeleteConfirm}
+        user={deleteModalData}
+        loading={loading}
+      />
+    </Box>
+  );
+};
+
+export default AdminUsersTab;

app/src/components/settings/admin/AdminWorkspacesTab.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  Table,
+  Group,
+  Text,
+  ActionIcon,
+  Box,
+  LoadingOverlay,
+  Alert,
+} from '@mantine/core';
+import { IconTrash, IconEdit, IconAlertCircle } from '@tabler/icons-react';
+import { useAdminData } from '../../../hooks/useAdminData';
+import { formatBytes } from '../../../utils/formatBytes';
+
+const AdminWorkspacesTab = () => {
+  const { data: workspaces, loading, error } = useAdminData('workspaces');
+
+  const rows = workspaces.map((workspace) => (
+    <Table.Tr key={workspace.id}>
+      <Table.Td>{workspace.userEmail}</Table.Td>
+      <Table.Td>{workspace.workspaceName}</Table.Td>
+      <Table.Td>
+        {new Date(workspace.workspaceCreatedAt).toLocaleDateString()}
+      </Table.Td>
+      <Table.Td>{workspace.totalFiles}</Table.Td>
+      <Table.Td>{formatBytes(workspace.totalSize)}</Table.Td>
+    </Table.Tr>
+  ));
+
+  return (
+    <Box pos="relative">
+      <LoadingOverlay visible={loading} />
+
+      {error && (
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          title="Error"
+          color="red"
+          mb="md"
+        >
+          {error}
+        </Alert>
+      )}
+
+      <Group justify="space-between" mb="md">
+        <Text size="xl" fw={700}>
+          Workspace Management
+        </Text>
+      </Group>
+
+      <Table striped highlightOnHover withTableBorder>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Owner</Table.Th>
+            <Table.Th>Name</Table.Th>
+            <Table.Th>Created At</Table.Th>
+            <Table.Th>Total Files</Table.Th>
+            <Table.Th>Total Size</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>{rows}</Table.Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default AdminWorkspacesTab;

app/src/components/settings/workspace/AppearanceSettings.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, Switch, Group, Box, Title } from '@mantine/core';
+import { useWorkspace } from '../../../contexts/WorkspaceContext';
+
+const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
+  const { colorScheme, updateColorScheme } = useWorkspace();
+
+  const handleThemeChange = () => {
+    const newTheme = colorScheme === 'dark' ? 'light' : 'dark';
+    updateColorScheme(newTheme);
+    onThemeChange(newTheme);
+  };
+
+  return (
+    <Box mb="md">
+      <Group justify="space-between" align="center">
+        <Text size="sm">Dark Mode</Text>
+        <Switch checked={colorScheme === 'dark'} onChange={handleThemeChange} />
+      </Group>
+    </Box>
+  );
+};
+
+export default AppearanceSettings;

app/src/components/settings/workspace/DangerZoneSettings.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Box, Button, Title } from '@mantine/core';
+import DeleteWorkspaceModal from '../../modals/workspace/DeleteWorkspaceModal';
+import { useWorkspace } from '../../../contexts/WorkspaceContext';
+import { useModalContext } from '../../../contexts/ModalContext';
+
+const DangerZoneSettings = () => {
+  const { currentWorkspace, workspaces, deleteCurrentWorkspace } =
+    useWorkspace();
+  const { setSettingsModalVisible } = useModalContext();
+  const [deleteModalOpened, setDeleteModalOpened] = useState(false);
+
+  const handleDelete = async () => {
+    await deleteCurrentWorkspace();
+    setDeleteModalOpened(false);
+    setSettingsModalVisible(false);
+  };
+
+  return (
+    <Box mb="md">
+      <Button
+        color="red"
+        variant="light"
+        onClick={() => setDeleteModalOpened(true)}
+        fullWidth
+        disabled={workspaces.length <= 1}
+        title={
+          workspaces.length <= 1
+            ? 'Cannot delete the last workspace'
+            : 'Delete this workspace'
+        }
+      >
+        Delete Workspace
+      </Button>
+
+      <DeleteWorkspaceModal
+        opened={deleteModalOpened}
+        onClose={() => setDeleteModalOpened(false)}
+        onConfirm={handleDelete}
+        workspaceName={currentWorkspace?.name}
+      />
+    </Box>
+  );
+};
+
+export default DangerZoneSettings;

app/src/components/settings/workspace/EditorSettings.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Text, Switch, Tooltip, Group, Box } from '@mantine/core';
+
+const EditorSettings = ({
+  autoSave,
+  showHiddenFiles,
+  onAutoSaveChange,
+  onShowHiddenFilesChange,
+}) => {
+  return (
+    <Box mb="md">
+      <Tooltip label="Auto Save feature is coming soon!" position="left">
+        <Group justify="space-between" align="center" mb="sm">
+          <Text size="sm">Auto Save</Text>
+          <Switch
+            checked={autoSave}
+            onChange={(event) => onAutoSaveChange(event.currentTarget.checked)}
+            disabled
+          />
+        </Group>
+      </Tooltip>
+
+      <Group justify="space-between" align="center">
+        <Text size="sm">Show Hidden Files</Text>
+        <Switch
+          checked={showHiddenFiles}
+          onChange={(event) =>
+            onShowHiddenFilesChange(event.currentTarget.checked)
+          }
+        />
+      </Group>
+    </Box>
+  );
+};
+
+export default EditorSettings;

app/src/components/settings/workspace/GeneralSettings.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Title, Box, TextInput, Text, Grid } from '@mantine/core';
+
+const GeneralSettings = ({ name, onInputChange }) => {
+  return (
+    <Box mb="md">
+      <Grid gutter="md" align="center">
+        <Grid.Col span={6}>
+          <Text size="sm">Workspace Name</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={name || ''}
+            onChange={(event) =>
+              onInputChange('name', event.currentTarget.value)
+            }
+            placeholder="Enter workspace name"
+            required
+          />
+        </Grid.Col>
+      </Grid>
+    </Box>
+  );
+};
+
+export default GeneralSettings;

app/src/components/settings/workspace/GitSettings.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+  Text,
+  Switch,
+  TextInput,
+  Stack,
+  PasswordInput,
+  Group,
+  Grid,
+} from '@mantine/core';
+
+const GitSettings = ({
+  gitEnabled,
+  gitUrl,
+  gitUser,
+  gitToken,
+  gitAutoCommit,
+  gitCommitMsgTemplate,
+  onInputChange,
+}) => {
+  return (
+    <Stack spacing="md">
+      <Grid gutter="md" align="center">
+        <Grid.Col span={6}>
+          <Text size="sm">Enable Git</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <Group justify="flex-end">
+            <Switch
+              checked={gitEnabled}
+              onChange={(event) =>
+                onInputChange('gitEnabled', event.currentTarget.checked)
+              }
+            />
+          </Group>
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Git URL</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={gitUrl}
+            onChange={(event) =>
+              onInputChange('gitUrl', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter Git URL"
+          />
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Git Username</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={gitUser}
+            onChange={(event) =>
+              onInputChange('gitUser', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter Git username"
+          />
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Git Token</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <PasswordInput
+            value={gitToken}
+            onChange={(event) =>
+              onInputChange('gitToken', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter Git token"
+          />
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Auto Commit</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <Group justify="flex-end">
+            <Switch
+              checked={gitAutoCommit}
+              onChange={(event) =>
+                onInputChange('gitAutoCommit', event.currentTarget.checked)
+              }
+              disabled={!gitEnabled}
+            />
+          </Group>
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Commit Message Template</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={gitCommitMsgTemplate}
+            onChange={(event) =>
+              onInputChange('gitCommitMsgTemplate', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter commit message template"
+          />
+        </Grid.Col>
+      </Grid>
+    </Stack>
+  );
+};
+
+export default GitSettings;

app/src/components/settings/workspace/WorkspaceSettings.jsx

@@ -0,0 +1,231 @@
+import React, { useReducer, useEffect, useCallback, useRef } from 'react';
+import {
+  Modal,
+  Badge,
+  Button,
+  Group,
+  Title,
+  Stack,
+  Accordion,
+} from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { useWorkspace } from '../../../contexts/WorkspaceContext';
+import AppearanceSettings from './AppearanceSettings';
+import EditorSettings from './EditorSettings';
+import GitSettings from './GitSettings';
+import GeneralSettings from './GeneralSettings';
+import { useModalContext } from '../../../contexts/ModalContext';
+import DangerZoneSettings from './DangerZoneSettings';
+import AccordionControl from '../AccordionControl';
+
+const initialState = {
+  localSettings: {},
+  initialSettings: {},
+  hasUnsavedChanges: false,
+};
+
+function settingsReducer(state, action) {
+  switch (action.type) {
+    case 'INIT_SETTINGS':
+      return {
+        ...state,
+        localSettings: action.payload,
+        initialSettings: action.payload,
+        hasUnsavedChanges: false,
+      };
+    case 'UPDATE_LOCAL_SETTINGS':
+      const newLocalSettings = { ...state.localSettings, ...action.payload };
+      const hasChanges =
+        JSON.stringify(newLocalSettings) !==
+        JSON.stringify(state.initialSettings);
+      return {
+        ...state,
+        localSettings: newLocalSettings,
+        hasUnsavedChanges: hasChanges,
+      };
+    case 'MARK_SAVED':
+      return {
+        ...state,
+        initialSettings: state.localSettings,
+        hasUnsavedChanges: false,
+      };
+    default:
+      return state;
+  }
+}
+
+const WorkspaceSettings = () => {
+  const { currentWorkspace, updateSettings } = useWorkspace();
+  const { settingsModalVisible, setSettingsModalVisible } = useModalContext();
+  const [state, dispatch] = useReducer(settingsReducer, initialState);
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      const settings = {
+        name: currentWorkspace.name,
+        theme: currentWorkspace.theme,
+        autoSave: currentWorkspace.autoSave,
+        showHiddenFiles: currentWorkspace.showHiddenFiles,
+        gitEnabled: currentWorkspace.gitEnabled,
+        gitUrl: currentWorkspace.gitUrl,
+        gitUser: currentWorkspace.gitUser,
+        gitToken: currentWorkspace.gitToken,
+        gitAutoCommit: currentWorkspace.gitAutoCommit,
+        gitCommitMsgTemplate: currentWorkspace.gitCommitMsgTemplate,
+      };
+      dispatch({ type: 'INIT_SETTINGS', payload: settings });
+    }
+  }, [currentWorkspace]);
+
+  const handleInputChange = useCallback((key, value) => {
+    dispatch({ type: 'UPDATE_LOCAL_SETTINGS', payload: { [key]: value } });
+  }, []);
+
+  const handleSubmit = async () => {
+    try {
+      if (!state.localSettings.name?.trim()) {
+        notifications.show({
+          message: 'Workspace name cannot be empty',
+          color: 'red',
+        });
+        return;
+      }
+
+      await updateSettings(state.localSettings);
+      dispatch({ type: 'MARK_SAVED' });
+      notifications.show({
+        message: 'Settings saved successfully',
+        color: 'green',
+      });
+      setSettingsModalVisible(false);
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+      notifications.show({
+        message: 'Failed to save settings: ' + error.message,
+        color: 'red',
+      });
+    }
+  };
+
+  const handleClose = useCallback(() => {
+    setSettingsModalVisible(false);
+  }, [setSettingsModalVisible]);
+
+  return (
+    <Modal
+      opened={settingsModalVisible}
+      onClose={handleClose}
+      title={<Title order={2}>Workspace Settings</Title>}
+      centered
+      size="lg"
+    >
+      <Stack spacing="xl">
+        {state.hasUnsavedChanges && (
+          <Badge color="yellow" variant="light">
+            Unsaved Changes
+          </Badge>
+        )}
+
+        <Accordion
+          defaultValue={['general', 'appearance', 'editor', 'git', 'danger']}
+          multiple
+          styles={(theme) => ({
+            control: {
+              paddingTop: theme.spacing.md,
+              paddingBottom: theme.spacing.md,
+            },
+            item: {
+              borderBottom: `1px solid ${
+                theme.colorScheme === 'dark'
+                  ? theme.colors.dark[4]
+                  : theme.colors.gray[3]
+              }`,
+              '&[data-active]': {
+                backgroundColor:
+                  theme.colorScheme === 'dark'
+                    ? theme.colors.dark[7]
+                    : theme.colors.gray[0],
+              },
+            },
+            chevron: {
+              '&[data-rotate]': {
+                transform: 'rotate(180deg)',
+              },
+            },
+          })}
+        >
+          <Accordion.Item value="general">
+            <AccordionControl>General</AccordionControl>
+            <Accordion.Panel>
+              <GeneralSettings
+                name={state.localSettings.name}
+                onInputChange={handleInputChange}
+              />
+            </Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item value="appearance">
+            <AccordionControl>Appearance</AccordionControl>
+            <Accordion.Panel>
+              <AppearanceSettings
+                themeSettings={state.localSettings.theme}
+                onThemeChange={(newTheme) =>
+                  handleInputChange('theme', newTheme)
+                }
+              />
+            </Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item value="editor">
+            <AccordionControl>Editor</AccordionControl>
+            <Accordion.Panel>
+              <EditorSettings
+                autoSave={state.localSettings.autoSave}
+                onAutoSaveChange={(value) =>
+                  handleInputChange('autoSave', value)
+                }
+                showHiddenFiles={state.localSettings.showHiddenFiles}
+                onShowHiddenFilesChange={(value) =>
+                  handleInputChange('showHiddenFiles', value)
+                }
+              />
+            </Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item value="git">
+            <AccordionControl>Git Integration</AccordionControl>
+            <Accordion.Panel>
+              <GitSettings
+                gitEnabled={state.localSettings.gitEnabled}
+                gitUrl={state.localSettings.gitUrl}
+                gitUser={state.localSettings.gitUser}
+                gitToken={state.localSettings.gitToken}
+                gitAutoCommit={state.localSettings.gitAutoCommit}
+                gitCommitMsgTemplate={state.localSettings.gitCommitMsgTemplate}
+                onInputChange={handleInputChange}
+              />
+            </Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item value="danger">
+            <AccordionControl>Danger Zone</AccordionControl>
+            <Accordion.Panel>
+              <DangerZoneSettings />
+            </Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+
+        <Group justify="flex-end">
+          <Button variant="default" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Save Changes</Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default WorkspaceSettings;