feat(editor): ✨ Team workspaces

apps/builder/components/dashboard/DashboardHeader.tsx

@@ -7,23 +7,40 @@ import {
   Text,
   HStack,
   Flex,
-  Avatar,
   SkeletonCircle,
-  Skeleton,
+  Button,
+  useDisclosure,
 } from '@chakra-ui/react'
 import { TypebotLogo } from 'assets/logos'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
-import { LogOutIcon, SettingsIcon } from 'assets/icons'
+import {
+  ChevronLeftIcon,
+  HardDriveIcon,
+  LogOutIcon,
+  PlusIcon,
+  SettingsIcon,
+} from 'assets/icons'
 import { signOut } from 'next-auth/react'
 import { useUser } from 'contexts/UserContext'
+import { useWorkspace } from 'contexts/WorkspaceContext'
+import { EmojiOrImageIcon } from 'components/shared/EmojiOrImageIcon'
+import { WorkspaceSettingsModal } from './WorkspaceSettingsModal'
 
 export const DashboardHeader = () => {
   const { user } = useUser()
 
+  const { workspace, workspaces, switchWorkspace, createWorkspace } =
+    useWorkspace()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
   const handleLogOut = () => {
+    localStorage.removeItem('workspaceId')
     signOut()
   }
 
+  const handleCreateNewWorkspace = () =>
+    createWorkspace(user?.name ?? undefined)
+
   return (
     <Flex w="full" borderBottomWidth="1px" justify="center">
       <Flex
@@ -40,34 +57,72 @@ export const DashboardHeader = () => {
         >
           <TypebotLogo w="30px" />
         </NextChakraLink>
-        <Menu>
-          <MenuButton>
-            <HStack>
-              <Skeleton isLoaded={user !== undefined}>
-                <Text>{user?.name}</Text>
-              </Skeleton>
-              <SkeletonCircle isLoaded={user !== undefined}>
-                <Avatar
-                  boxSize="35px"
-                  name={user?.name ?? undefined}
-                  src={user?.image ?? undefined}
-                />
-              </SkeletonCircle>
-            </HStack>
-          </MenuButton>
-          <MenuList>
-            <MenuItem
-              as={NextChakraLink}
-              href="/account"
-              icon={<SettingsIcon />}
-            >
-              My account
-            </MenuItem>
-            <MenuItem onClick={handleLogOut} icon={<LogOutIcon />}>
-              Log out
-            </MenuItem>
-          </MenuList>
-        </Menu>
+        <HStack>
+          {user && workspace && (
+            <WorkspaceSettingsModal
+              isOpen={isOpen}
+              onClose={onClose}
+              user={user}
+              workspace={workspace}
+            />
+          )}
+          <Button leftIcon={<SettingsIcon />} onClick={onOpen}>
+            Settings & Members
+          </Button>
+          <Menu placement="bottom-end">
+            <MenuButton as={Button} variant="outline" px="2">
+              <HStack>
+                <SkeletonCircle
+                  isLoaded={workspace !== undefined}
+                  alignItems="center"
+                  display="flex"
+                  boxSize="20px"
+                >
+                  <EmojiOrImageIcon
+                    boxSize="20px"
+                    icon={workspace?.icon}
+                    defaultIcon={HardDriveIcon}
+                  />
+                </SkeletonCircle>
+                {workspace && (
+                  <Text noOfLines={0} maxW="200px">
+                    {workspace.name}
+                  </Text>
+                )}
+                <ChevronLeftIcon transform="rotate(-90deg)" />
+              </HStack>
+            </MenuButton>
+            <MenuList>
+              {workspaces
+                ?.filter((w) => w.id !== workspace?.id)
+                .map((workspace) => (
+                  <MenuItem
+                    key={workspace.id}
+                    onClick={() => switchWorkspace(workspace.id)}
+                  >
+                    <HStack>
+                      <EmojiOrImageIcon
+                        icon={workspace.icon}
+                        boxSize="16px"
+                        defaultIcon={HardDriveIcon}
+                      />
+                      <Text>{workspace.name}</Text>
+                    </HStack>
+                  </MenuItem>
+                ))}
+              <MenuItem onClick={handleCreateNewWorkspace} icon={<PlusIcon />}>
+                New workspace
+              </MenuItem>
+              <MenuItem
+                onClick={handleLogOut}
+                icon={<LogOutIcon />}
+                color="orange.500"
+              >
+                Log out
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        </HStack>
       </Flex>
     </Flex>
   )