Reorganize components

frontend/src/App.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { MantineProvider, ColorSchemeScript } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import { ModalsProvider } from '@mantine/modals';
-import Layout from './components/Layout';
+import Layout from './components/layout/Layout';
-import LoginPage from './components/LoginPage';
+import LoginPage from './components/auth/LoginPage';
 import { WorkspaceProvider } from './contexts/WorkspaceContext';
 import { ModalProvider } from './contexts/ModalContext';
 import { AuthProvider, useAuth } from './contexts/AuthContext';

frontend/src/components/auth/LoginPage.jsx

@@ -9,7 +9,7 @@ import {
   Text,
   Stack,
 } from '@mantine/core';
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from '../../contexts/AuthContext';
 
 const LoginPage = () => {
   const [email, setEmail] = useState('');

frontend/src/components/editor/ContentView.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Text, Center } from '@mantine/core';
 import Editor from './Editor';
 import MarkdownPreview from './MarkdownPreview';
-import { getFileUrl } from '../services/api';
+import { getFileUrl } from '../../services/api';
-import { isImageFile } from '../utils/fileHelpers';
+import { isImageFile } from '../../utils/fileHelpers';
 
 const ContentView = ({
   activeTab,

frontend/src/components/editor/Editor.jsx

@@ -5,7 +5,7 @@ import { EditorView, keymap } from '@codemirror/view';
 import { markdown } from '@codemirror/lang-markdown';
 import { defaultKeymap } from '@codemirror/commands';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspace } from '../../contexts/WorkspaceContext';
 
 const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
   const { colorScheme } = useWorkspace();

frontend/src/components/editor/MarkdownPreview.jsx

@@ -8,8 +8,8 @@ import rehypeReact from 'rehype-react';
 import rehypePrism from 'rehype-prism';
 import * as prod from 'react/jsx-runtime';
 import { notifications } from '@mantine/notifications';
-import { remarkWikiLinks } from '../utils/remarkWikiLinks';
+import { remarkWikiLinks } from '../../utils/remarkWikiLinks';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspace } from '../../contexts/WorkspaceContext';
 
 const MarkdownPreview = ({ content, handleFileSelect }) => {
   const [processedContent, setProcessedContent] = useState(null);

frontend/src/components/files/FileActions.jsx

@@ -6,8 +6,8 @@ import {
   IconGitPullRequest,
   IconGitCommit,
 } from '@tabler/icons-react';
-import { useModalContext } from '../contexts/ModalContext';
+import { useModalContext } from '../../contexts/ModalContext';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspace } from '../../contexts/WorkspaceContext';
 
 const FileActions = ({ handlePullChanges, selectedFile }) => {
   const { settings } = useWorkspace();

frontend/src/components/layout/Header.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Group, Text } from '@mantine/core';
-import UserMenu from './UserMenu';
+import UserMenu from '../navigation/UserMenu';
-import WorkspaceSwitcher from './WorkspaceSwitcher';
+import WorkspaceSwitcher from '../navigation/WorkspaceSwitcher';
-import Settings from './Settings';
+import WorkspaceSettings from '../settings/workspace/WorkspaceSettings';
 
 const Header = () => {
   return (
@@ -14,7 +14,7 @@ const Header = () => {
         <WorkspaceSwitcher />
         <UserMenu />
       </Group>
-      <Settings />
+      <WorkspaceSettings />
     </Group>
   );
 };

frontend/src/components/layout/Layout.jsx

@@ -3,9 +3,9 @@ import { AppShell, Container, Loader, Center } from '@mantine/core';
 import Header from './Header';
 import Sidebar from './Sidebar';
 import MainContent from './MainContent';
-import { useFileNavigation } from '../hooks/useFileNavigation';
+import { useFileNavigation } from '../../hooks/useFileNavigation';
-import { useFileList } from '../hooks/useFileList';
+import { useFileList } from '../../hooks/useFileList';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspace } from '../../contexts/WorkspaceContext';
 
 const Layout = () => {
   const { currentWorkspace, loading: workspaceLoading } = useWorkspace();

frontend/src/components/layout/MainContent.jsx

@@ -2,15 +2,15 @@ import React, { useState, useCallback, useMemo } from 'react';
 import { Tabs, Breadcrumbs, Group, Box, Text, Flex } from '@mantine/core';
 import { IconCode, IconEye, IconPointFilled } from '@tabler/icons-react';
 
-import ContentView from './ContentView';
+import ContentView from '../editor/ContentView';
-import CreateFileModal from './modals/CreateFileModal';
+import CreateFileModal from '../modals/file/CreateFileModal';
-import DeleteFileModal from './modals/DeleteFileModal';
+import DeleteFileModal from '../modals/file/DeleteFileModal';
-import CommitMessageModal from './modals/CommitMessageModal';
+import CommitMessageModal from '../modals/git/CommitMessageModal';
 
-import { useFileContent } from '../hooks/useFileContent';
+import { useFileContent } from '../../hooks/useFileContent';
-import { useFileOperations } from '../hooks/useFileOperations';
+import { useFileOperations } from '../../hooks/useFileOperations';
-import { useGitOperations } from '../hooks/useGitOperations';
+import { useGitOperations } from '../../hooks/useGitOperations';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspace } from '../../contexts/WorkspaceContext';
 
 const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
   const [activeTab, setActiveTab] = useState('source');

frontend/src/components/layout/Sidebar.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import { Box } from '@mantine/core';
-import FileActions from './FileActions';
+import FileActions from '../files/FileActions';
-import FileTree from './FileTree';
+import FileTree from '../files/FileTree';
-import { useGitOperations } from '../hooks/useGitOperations';
+import { useGitOperations } from '../../hooks/useGitOperations';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspace } from '../../contexts/WorkspaceContext';
 
 const Sidebar = ({ selectedFile, handleFileSelect, files, loadFileList }) => {
   const { settings } = useWorkspace();

frontend/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;

frontend/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;

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
-import { useModalContext } from '../../contexts/ModalContext';
+import { useModalContext } from '../../../contexts/ModalContext';
 
 const CreateFileModal = ({ onCreateFile }) => {
   const [fileName, setFileName] = useState('');

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal, Text, Button, Group } from '@mantine/core';
-import { useModalContext } from '../../contexts/ModalContext';
+import { useModalContext } from '../../../contexts/ModalContext';
 
 const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
   const { deleteFileModalVisible, setDeleteFileModalVisible } =

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
-import { useModalContext } from '../../contexts/ModalContext';
+import { useModalContext } from '../../../contexts/ModalContext';
 
 const CommitMessageModal = ({ onCommitAndPush }) => {
   const [message, setMessage] = useState('');

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
-import { useModalContext } from '../../contexts/ModalContext';
+import { useModalContext } from '../../../contexts/ModalContext';
-import { createWorkspace } from '../../services/api';
+import { createWorkspace } from '../../../services/api';
 import { notifications } from '@mantine/notifications';
 
 const CreateWorkspaceModal = ({ onWorkspaceCreated }) => {

frontend/src/components/navigation/UserMenu.jsx

@@ -9,8 +9,8 @@ import {
   Divider,
 } from '@mantine/core';
 import { IconUser, IconLogout, IconSettings } from '@tabler/icons-react';
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from '../../contexts/AuthContext';
-import AccountSettings from './AccountSettings';
+import AccountSettings from '../settings/account/AccountSettings';
 
 const UserMenu = () => {
   const [accountSettingsOpened, setAccountSettingsOpened] = useState(false);

frontend/src/components/navigation/WorkspaceSwitcher.jsx

@@ -15,10 +15,10 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspace } from '../../contexts/WorkspaceContext';
-import { useModalContext } from '../contexts/ModalContext';
+import { useModalContext } from '../../contexts/ModalContext';
-import { listWorkspaces } from '../services/api';
+import { listWorkspaces } from '../../services/api';
-import CreateWorkspaceModal from './modals/CreateWorkspaceModal';
+import CreateWorkspaceModal from '../modals/workspace/CreateWorkspaceModal';
 
 const WorkspaceSwitcher = () => {
   const { currentWorkspace, switchWorkspace } = useWorkspace();

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

@@ -1,4 +1,4 @@
-import React, { useState, useReducer, useRef } from 'react';
+import React, { useState, useReducer, useRef, useEffect } from 'react';
 import {
   Modal,
   Badge,
@@ -8,13 +8,15 @@ import {
   Stack,
   Accordion,
   TextInput,
-  PasswordInput,
   Box,
-  Text,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from '../../../contexts/AuthContext';
-import { useProfileSettings } from '../hooks/useProfileSettings';
+import { useProfileSettings } from '../../../hooks/useProfileSettings';
+import EmailPasswordModal from '../../modals/account/EmailPasswordModal';
+import DeleteAccountModal from '../../modals/account/DeleteAccountModal';
+import SecuritySettings from './SecuritySettings';
+import ProfileSettings from './ProfileSettings';
 
 // Reducer for managing settings state
 const initialState = {
@@ -53,178 +55,12 @@ function settingsReducer(state, action) {
   }
 }
 
-// Password confirmation modal for email changes
-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>
-  );
-};
-
-// Delete account confirmation modal
-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>
-  );
-};
-
 const AccordionControl = ({ children }) => (
   <Accordion.Control>
     <Title order={4}>{children}</Title>
   </Accordion.Control>
 );
 
-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>
-);
-
-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>
-  );
-};
-
 const DangerZone = ({ onDeleteClick }) => (
   <Box>
     <Button color="red" variant="light" onClick={onDeleteClick} fullWidth>
@@ -242,7 +78,7 @@ const AccountSettings = ({ opened, onClose }) => {
   const [emailModalOpened, setEmailModalOpened] = useState(false);
 
   // Initialize settings on mount
-  React.useEffect(() => {
+  useEffect(() => {
     if (isInitialMount.current && user) {
       isInitialMount.current = false;
       const settings = {

frontend/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;

frontend/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;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, Switch, Group, Box, Title } from '@mantine/core';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../../contexts/WorkspaceContext';
 
 const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
   const { colorScheme, updateColorScheme } = useWorkspace();

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

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { Box, Button, Title } from '@mantine/core';
-import DeleteWorkspaceModal from '../modals/DeleteWorkspaceModal';
+import DeleteWorkspaceModal from '../../modals/workspace/DeleteWorkspaceModal';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { useWorkspace } from '../../../contexts/WorkspaceContext';
-import { useModalContext } from '../../contexts/ModalContext';
+import { useModalContext } from '../../../contexts/ModalContext';
 
 const DangerZoneSettings = () => {
   const { currentWorkspace, workspaces, deleteCurrentWorkspace } =

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

@@ -6,7 +6,6 @@ import {
   Stack,
   PasswordInput,
   Group,
-  Title,
   Grid,
 } from '@mantine/core';
 

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

@@ -9,13 +9,13 @@ import {
   Accordion,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
-import { useWorkspace } from '../contexts/WorkspaceContext';
+import { useWorkspace } from '../../../contexts/WorkspaceContext';
-import AppearanceSettings from './settings/AppearanceSettings';
+import AppearanceSettings from './AppearanceSettings';
-import EditorSettings from './settings/EditorSettings';
+import EditorSettings from './EditorSettings';
-import GitSettings from './settings/GitSettings';
+import GitSettings from './GitSettings';
-import GeneralSettings from './settings/GeneralSettings';
+import GeneralSettings from './GeneralSettings';
-import { useModalContext } from '../contexts/ModalContext';
+import { useModalContext } from '../../../contexts/ModalContext';
-import DangerZoneSettings from './settings/DangerZoneSettings';
+import DangerZoneSettings from './DangerZoneSettings';
 
 const initialState = {
   localSettings: {},
@@ -59,7 +59,7 @@ const AccordionControl = ({ children }) => (
   </Accordion.Control>
 );
 
-const Settings = () => {
+const WorkspaceSettings = () => {
   const { currentWorkspace, updateSettings } = useWorkspace();
   const { settingsModalVisible, setSettingsModalVisible } = useModalContext();
   const [state, dispatch] = useReducer(settingsReducer, initialState);
@@ -121,7 +121,7 @@ const Settings = () => {
     <Modal
       opened={settingsModalVisible}
       onClose={handleClose}
-      title={<Title order={2}>Settings</Title>}
+      title={<Title order={2}>Workspace Settings</Title>}
       centered
       size="lg"
     >
@@ -228,4 +228,4 @@ const Settings = () => {
   );
 };
 
-export default Settings;
+export default WorkspaceSettings;