Add CreateWorkspaceModal

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,7 +38,18 @@ const WorkspaceSwitcher = () => {
     setLoading(false);
   };
 
+  const handleCreateWorkspace = () => {
+    setPopoverOpened(false);
+    setCreateWorkspaceModalVisible(true);
+  };
+
+  const handleWorkspaceCreated = async (newWorkspace) => {
+    await loadWorkspaces();
+    switchWorkspace(newWorkspace.id);
+  };
+
   return (
+    <>
       <Popover
         width={300}
         position="bottom-start"
@@ -125,11 +138,14 @@ const WorkspaceSwitcher = () => {
             variant="light"
             leftSection={<IconFolderPlus size={14} />}
             fullWidth
+            onClick={handleCreateWorkspace}
           >
             Create Workspace
           </Button>
         </Popover.Dropdown>
       </Popover>
+      <CreateWorkspaceModal onWorkspaceCreated={handleWorkspaceCreated} />
+    </>
   );
 };
 

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;

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 (