Improve Settings modal

frontend/src/components/Settings.js

@@ -6,7 +6,7 @@ import {
   Group,
   Title,
   Stack,
-  Divider,
+  Accordion,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useWorkspace } from '../contexts/WorkspaceContext';
@@ -53,6 +53,12 @@ function settingsReducer(state, action) {
   }
 }
 
+const AccordionControl = ({ children }) => (
+  <Accordion.Control>
+    <Title order={4}>{children}</Title>
+  </Accordion.Control>
+);
+
 const Settings = () => {
   const { currentWorkspace, updateSettings } = useWorkspace();
   const { settingsModalVisible, setSettingsModalVisible } = useModalContext();
@@ -126,35 +132,90 @@ const Settings = () => {
           </Badge>
         )}
 
-        <GeneralSettings
-          name={state.localSettings.name}
-          onInputChange={handleInputChange}
-        />
-        <Divider />
+        <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>
 
-        <AppearanceSettings
-          themeSettings={state.localSettings.theme}
-          onThemeChange={(newTheme) => handleInputChange('theme', newTheme)}
-        />
-        <Divider />
+          <Accordion.Item value="appearance">
+            <AccordionControl>Appearance</AccordionControl>
+            <Accordion.Panel>
+              <AppearanceSettings
+                themeSettings={state.localSettings.theme}
+                onThemeChange={(newTheme) =>
+                  handleInputChange('theme', newTheme)
+                }
+              />
+            </Accordion.Panel>
+          </Accordion.Item>
 
-        <EditorSettings
-          autoSave={state.localSettings.autoSave}
-          onAutoSaveChange={(value) => handleInputChange('autoSave', value)}
-        />
-        <Divider />
+          <Accordion.Item value="editor">
+            <AccordionControl>Editor</AccordionControl>
+            <Accordion.Panel>
+              <EditorSettings
+                autoSave={state.localSettings.autoSave}
+                onAutoSaveChange={(value) =>
+                  handleInputChange('autoSave', value)
+                }
+              />
+            </Accordion.Panel>
+          </Accordion.Item>
 
-        <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.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>
 
-        <DangerZoneSettings />
+          <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}>

frontend/src/components/settings/AppearanceSettings.js

@@ -13,9 +13,6 @@ const AppearanceSettings = ({ themeSettings, onThemeChange }) => {
 
   return (
     <Box mb="md">
-      <Title order={3} mb="md">
-        Appearance
-      </Title>
       <Group justify="space-between" align="center">
         <Text size="sm">Dark Mode</Text>
         <Switch checked={colorScheme === 'dark'} onChange={handleThemeChange} />

frontend/src/components/settings/DangerZoneSettings.js

@@ -18,10 +18,6 @@ const DangerZoneSettings = () => {
 
   return (
     <Box mb="md">
-      <Title order={3} mb="md">
-        Danger Zone
-      </Title>
-
       <Button
         color="red"
         variant="light"

frontend/src/components/settings/EditorSettings.js

@@ -4,9 +4,6 @@ import { Text, Switch, Tooltip, Group, Box, Title } from '@mantine/core';
 const EditorSettings = ({ autoSave, onAutoSaveChange }) => {
   return (
     <Box mb="md">
-      <Title order={3} mb="md">
-        Editor
-      </Title>
       <Tooltip label="Auto Save feature is coming soon!" position="left">
         <Group justify="space-between" align="center">
           <Text size="sm">Auto Save</Text>

frontend/src/components/settings/GeneralSettings.js

@@ -4,10 +4,6 @@ import { Title, Box, TextInput, Text, Grid } from '@mantine/core';
 const GeneralSettings = ({ name, onInputChange }) => {
   return (
     <Box mb="md">
-      <Title order={3} mb="md">
-        General
-      </Title>
-
       <Grid gutter="md" align="center">
         <Grid.Col span={6}>
           <Text size="sm">Workspace Name</Text>

frontend/src/components/settings/GitSettings.js

@@ -21,7 +21,6 @@ const GitSettings = ({
 }) => {
   return (
     <Stack spacing="md">
-      <Title order={3}>Git Integration</Title>
       <Grid gutter="md" align="center">
         <Grid.Col span={6}>
           <Text size="sm">Enable Git</Text>