From bbd7358d1592afc07320f04d4dabb9d4f7eec7ad Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Sat, 26 Oct 2024 23:29:33 +0200
Subject: [PATCH] Add CreateWorkspaceModal

---
 frontend/src/components/WorkspaceSwitcher.js  | 202 ++++++++++--------
 .../components/modals/CreateWorkspaceModal.js |  82 +++++++
 frontend/src/contexts/ModalContext.js         |   4 +
 3 files changed, 195 insertions(+), 93 deletions(-)
 create mode 100644 frontend/src/components/modals/CreateWorkspaceModal.js

diff --git a/frontend/src/components/WorkspaceSwitcher.js b/frontend/src/components/WorkspaceSwitcher.js
index 196f27f..078214b 100644
--- a/frontend/src/components/WorkspaceSwitcher.js
+++ b/frontend/src/components/WorkspaceSwitcher.js
@@ -17,10 +17,12 @@ import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react';
 import { useWorkspace } from '../contexts/WorkspaceContext';
 import { useModalContext } from '../contexts/ModalContext';
 import { listWorkspaces } from '../services/api';
+import CreateWorkspaceModal from './modals/CreateWorkspaceModal';
 
 const WorkspaceSwitcher = () => {
   const { currentWorkspace, switchWorkspace } = useWorkspace();
-  const { setSettingsModalVisible } = useModalContext();
+  const { setSettingsModalVisible, setCreateWorkspaceModalVisible } =
+    useModalContext();
   const [workspaces, setWorkspaces] = useState([]);
   const [loading, setLoading] = useState(false);
   const [popoverOpened, setPopoverOpened] = useState(false);
@@ -36,100 +38,114 @@ const WorkspaceSwitcher = () => {
     setLoading(false);
   };
 
-  return (
-    <Popover
-      width={300}
-      position="bottom-start"
-      shadow="md"
-      opened={popoverOpened}
-      onChange={setPopoverOpened}
-    >
-      <Popover.Target>
-        <UnstyledButton
-          onClick={() => {
-            setPopoverOpened((o) => !o);
-            if (!popoverOpened) {
-              loadWorkspaces();
-            }
-          }}
-        >
-          <Group gap="xs">
-            <IconFolders size={20} />
-            <div>
-              <Text size="sm" fw={500}>
-                {currentWorkspace?.name || 'No workspace'}
-              </Text>
-            </div>
-          </Group>
-        </UnstyledButton>
-      </Popover.Target>
+  const handleCreateWorkspace = () => {
+    setPopoverOpened(false);
+    setCreateWorkspaceModalVisible(true);
+  };
 
-      <Popover.Dropdown>
-        <Text size="sm" fw={600} mb="md">
-          Switch Workspace
-        </Text>
-        <ScrollArea.Autosize mah={400} mb="md" offsetScrollbars>
-          <Stack gap="xs">
-            {loading ? (
-              <Center p="md">
-                <Loader size="sm" />
-              </Center>
-            ) : (
-              workspaces.map((workspace) => (
-                <UnstyledButton
-                  key={workspace.id}
-                  onClick={() => {
-                    switchWorkspace(workspace.id);
-                    setPopoverOpened(false);
-                  }}
-                >
-                  <Paper
-                    p="xs"
-                    withBorder={workspace.id === currentWorkspace?.id}
-                    bg={
-                      workspace.id === currentWorkspace?.id
-                        ? 'var(--mantine-color-blue-light)'
-                        : undefined
-                    }
+  const handleWorkspaceCreated = async (newWorkspace) => {
+    await loadWorkspaces();
+    switchWorkspace(newWorkspace.id);
+  };
+
+  return (
+    <>
+      <Popover
+        width={300}
+        position="bottom-start"
+        shadow="md"
+        opened={popoverOpened}
+        onChange={setPopoverOpened}
+      >
+        <Popover.Target>
+          <UnstyledButton
+            onClick={() => {
+              setPopoverOpened((o) => !o);
+              if (!popoverOpened) {
+                loadWorkspaces();
+              }
+            }}
+          >
+            <Group gap="xs">
+              <IconFolders size={20} />
+              <div>
+                <Text size="sm" fw={500}>
+                  {currentWorkspace?.name || 'No workspace'}
+                </Text>
+              </div>
+            </Group>
+          </UnstyledButton>
+        </Popover.Target>
+
+        <Popover.Dropdown>
+          <Text size="sm" fw={600} mb="md">
+            Switch Workspace
+          </Text>
+          <ScrollArea.Autosize mah={400} mb="md" offsetScrollbars>
+            <Stack gap="xs">
+              {loading ? (
+                <Center p="md">
+                  <Loader size="sm" />
+                </Center>
+              ) : (
+                workspaces.map((workspace) => (
+                  <UnstyledButton
+                    key={workspace.id}
+                    onClick={() => {
+                      switchWorkspace(workspace.id);
+                      setPopoverOpened(false);
+                    }}
                   >
-                    <Group justify="space-between" wrap="nowrap">
-                      <Box>
-                        <Text size="sm" fw={500} truncate>
-                          {workspace.name}
-                        </Text>
-                        <Text size="xs" c="dimmed">
-                          {new Date(workspace.createdAt).toLocaleDateString()}
-                        </Text>
-                      </Box>
-                      {workspace.id === currentWorkspace?.id && (
-                        <ActionIcon
-                          variant="subtle"
-                          size="sm"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setSettingsModalVisible(true);
-                            setPopoverOpened(false);
-                          }}
-                        >
-                          <IconSettings size={14} />
-                        </ActionIcon>
-                      )}
-                    </Group>
-                  </Paper>
-                </UnstyledButton>
-              ))
-            )}
-          </Stack>
-        </ScrollArea.Autosize>
-        <Button
-          variant="light"
-          leftSection={<IconFolderPlus size={14} />}
-          fullWidth
-        >
-          Create Workspace
-        </Button>
-      </Popover.Dropdown>
-    </Popover>
+                    <Paper
+                      p="xs"
+                      withBorder={workspace.id === currentWorkspace?.id}
+                      bg={
+                        workspace.id === currentWorkspace?.id
+                          ? 'var(--mantine-color-blue-light)'
+                          : undefined
+                      }
+                    >
+                      <Group justify="space-between" wrap="nowrap">
+                        <Box>
+                          <Text size="sm" fw={500} truncate>
+                            {workspace.name}
+                          </Text>
+                          <Text size="xs" c="dimmed">
+                            {new Date(workspace.createdAt).toLocaleDateString()}
+                          </Text>
+                        </Box>
+                        {workspace.id === currentWorkspace?.id && (
+                          <ActionIcon
+                            variant="subtle"
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setSettingsModalVisible(true);
+                              setPopoverOpened(false);
+                            }}
+                          >
+                            <IconSettings size={14} />
+                          </ActionIcon>
+                        )}
+                      </Group>
+                    </Paper>
+                  </UnstyledButton>
+                ))
+              )}
+            </Stack>
+          </ScrollArea.Autosize>
+          <Button
+            variant="light"
+            leftSection={<IconFolderPlus size={14} />}
+            fullWidth
+            onClick={handleCreateWorkspace}
+          >
+            Create Workspace
+          </Button>
+        </Popover.Dropdown>
+      </Popover>
+      <CreateWorkspaceModal onWorkspaceCreated={handleWorkspaceCreated} />
+    </>
   );
 };
 
diff --git a/frontend/src/components/modals/CreateWorkspaceModal.js b/frontend/src/components/modals/CreateWorkspaceModal.js
new file mode 100644
index 0000000..265eccf
--- /dev/null
+++ b/frontend/src/components/modals/CreateWorkspaceModal.js
@@ -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;
diff --git a/frontend/src/contexts/ModalContext.js b/frontend/src/contexts/ModalContext.js
index 3338c7e..4865e6a 100644
--- a/frontend/src/contexts/ModalContext.js
+++ b/frontend/src/contexts/ModalContext.js
@@ -10,6 +10,8 @@ export const ModalProvider = ({ children }) => {
   const [settingsModalVisible, setSettingsModalVisible] = useState(false);
   const [switchWorkspaceModalVisible, setSwitchWorkspaceModalVisible] =
     useState(false);
+  const [createWorkspaceModalVisible, setCreateWorkspaceModalVisible] =
+    useState(false);
 
   const value = {
     newFileModalVisible,
@@ -22,6 +24,8 @@ export const ModalProvider = ({ children }) => {
     setSettingsModalVisible,
     switchWorkspaceModalVisible,
     setSwitchWorkspaceModalVisible,
+    createWorkspaceModalVisible,
+    setCreateWorkspaceModalVisible,
   };
 
   return (