From c5e0937070912660dc59ee46091a74f9caf2aa1c Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Sun, 27 Oct 2024 17:39:56 +0100
Subject: [PATCH] Add rename and delete workspace ui elements

---
 frontend/src/components/Settings.js           | 81 ++++++++++++-------
 .../components/modals/DeleteWorkspaceModal.js | 35 ++++++++
 .../components/settings/DangerZoneSettings.js | 40 +++++++++
 .../components/settings/GeneralSettings.js    | 32 ++++++++
 frontend/src/contexts/WorkspaceContext.js     |  5 --
 5 files changed, 159 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/components/modals/DeleteWorkspaceModal.js
 create mode 100644 frontend/src/components/settings/DangerZoneSettings.js
 create mode 100644 frontend/src/components/settings/GeneralSettings.js

diff --git a/frontend/src/components/Settings.js b/frontend/src/components/Settings.js
index 21a32ac..18cba57 100644
--- a/frontend/src/components/Settings.js
+++ b/frontend/src/components/Settings.js
@@ -1,11 +1,21 @@
 import React, { useReducer, useEffect, useCallback, useRef } from 'react';
-import { Modal, Badge, Button, Group, Title } from '@mantine/core';
+import {
+  Modal,
+  Badge,
+  Button,
+  Group,
+  Title,
+  Stack,
+  Divider,
+} from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useWorkspace } from '../contexts/WorkspaceContext';
 import AppearanceSettings from './settings/AppearanceSettings';
 import EditorSettings from './settings/EditorSettings';
 import GitSettings from './settings/GitSettings';
+import GeneralSettings from './settings/GeneralSettings';
 import { useModalContext } from '../contexts/ModalContext';
+import DangerZoneSettings from './settings/DangerZoneSettings';
 
 const initialState = {
   localSettings: {},
@@ -100,34 +110,47 @@ const Settings = () => {
       centered
       size="lg"
     >
-      {state.hasUnsavedChanges && (
-        <Badge color="yellow" variant="light" mb="md">
-          Unsaved Changes
-        </Badge>
-      )}
-      <AppearanceSettings
-        themeSettings={state.localSettings.theme}
-        onThemeChange={(newTheme) => handleInputChange('theme', newTheme)}
-      />
-      <EditorSettings
-        autoSave={state.localSettings.autoSave}
-        onAutoSaveChange={(value) => handleInputChange('autoSave', value)}
-      />
-      <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}
-      />
-      <Group justify="flex-end" mt="xl">
-        <Button variant="default" onClick={handleClose}>
-          Cancel
-        </Button>
-        <Button onClick={handleSubmit}>Save Changes</Button>
-      </Group>
+      <Stack spacing="xl">
+        {state.hasUnsavedChanges && (
+          <Badge color="yellow" variant="light">
+            Unsaved Changes
+          </Badge>
+        )}
+
+        <GeneralSettings />
+        <Divider />
+
+        <AppearanceSettings
+          themeSettings={state.localSettings.theme}
+          onThemeChange={(newTheme) => handleInputChange('theme', newTheme)}
+        />
+        <Divider />
+
+        <EditorSettings
+          autoSave={state.localSettings.autoSave}
+          onAutoSaveChange={(value) => handleInputChange('autoSave', value)}
+        />
+        <Divider />
+
+        <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}
+        />
+
+        <DangerZoneSettings />
+
+        <Group justify="flex-end">
+          <Button variant="default" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Save Changes</Button>
+        </Group>
+      </Stack>
     </Modal>
   );
 };
diff --git a/frontend/src/components/modals/DeleteWorkspaceModal.js b/frontend/src/components/modals/DeleteWorkspaceModal.js
new file mode 100644
index 0000000..8effeeb
--- /dev/null
+++ b/frontend/src/components/modals/DeleteWorkspaceModal.js
@@ -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;
diff --git a/frontend/src/components/settings/DangerZoneSettings.js b/frontend/src/components/settings/DangerZoneSettings.js
new file mode 100644
index 0000000..8c328e9
--- /dev/null
+++ b/frontend/src/components/settings/DangerZoneSettings.js
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Box, Button, Title } from '@mantine/core';
+import DeleteWorkspaceModal from '../modals/DeleteWorkspaceModal';
+import { useWorkspace } from '../../contexts/WorkspaceContext';
+
+const DangerZoneSettings = () => {
+  const { currentWorkspace } = useWorkspace();
+  const [deleteModalOpened, setDeleteModalOpened] = useState(false);
+
+  const handleDelete = () => {
+    // TODO: Implement delete functionality
+    setDeleteModalOpened(false);
+  };
+
+  return (
+    <Box mb="md">
+      <Title order={3} mb="md">
+        Danger Zone
+      </Title>
+
+      <Button
+        color="red"
+        variant="light"
+        onClick={() => setDeleteModalOpened(true)}
+        fullWidth
+      >
+        Delete Workspace
+      </Button>
+
+      <DeleteWorkspaceModal
+        opened={deleteModalOpened}
+        onClose={() => setDeleteModalOpened(false)}
+        onConfirm={handleDelete}
+        workspaceName={currentWorkspace?.name}
+      />
+    </Box>
+  );
+};
+
+export default DangerZoneSettings;
diff --git a/frontend/src/components/settings/GeneralSettings.js b/frontend/src/components/settings/GeneralSettings.js
new file mode 100644
index 0000000..e1f916e
--- /dev/null
+++ b/frontend/src/components/settings/GeneralSettings.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Title, Box, TextInput, Text, Grid } from '@mantine/core';
+import { useWorkspace } from '../../contexts/WorkspaceContext';
+
+const GeneralSettings = ({ onInputChange }) => {
+  const { currentWorkspace } = useWorkspace();
+
+  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>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={currentWorkspace?.name || ''}
+            onChange={(event) =>
+              onInputChange('name', event.currentTarget.value)
+            }
+            placeholder="Enter workspace name"
+          />
+        </Grid.Col>
+      </Grid>
+    </Box>
+  );
+};
+
+export default GeneralSettings;
diff --git a/frontend/src/contexts/WorkspaceContext.js b/frontend/src/contexts/WorkspaceContext.js
index 8110ce8..2bae145 100644
--- a/frontend/src/contexts/WorkspaceContext.js
+++ b/frontend/src/contexts/WorkspaceContext.js
@@ -61,11 +61,6 @@ export const WorkspaceProvider = ({ children }) => {
       setLoading(true);
       await updateLastWorkspace(workspaceId);
       await loadWorkspaceData(workspaceId);
-      notifications.show({
-        title: 'Success',
-        message: 'Workspace switched successfully',
-        color: 'green',
-      });
     } catch (error) {
       console.error('Failed to switch workspace:', error);
       notifications.show({