feat(dashboard): 🚸 Add version number in settings modal

apps/builder/components/dashboard/WorkspaceSettingsModal/EditorSettingsForm.tsx

@@ -12,7 +12,7 @@ import { useUser } from 'contexts/UserContext'
 import { GraphNavigation } from 'db'
 import React, { useEffect, useState } from 'react'
 
-export const EditorSettings = () => {
+export const EditorSettingsForm = () => {
   const { user, saveUser } = useUser()
   const [value, setValue] = useState<string>(
     user?.graphNavigation ?? GraphNavigation.TRACKPAD

apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsModal.tsx

@@ -21,7 +21,7 @@ import { useState } from 'react'
 import { BillingForm } from './BillingForm'
 import { MembersList } from './MembersList'
 import { MyAccountForm } from './MyAccountForm'
-import { EditorSettings } from './UserSettingsForm'
+import { EditorSettingsForm } from './EditorSettingsForm'
 import { WorkspaceSettingsForm } from './WorkspaceSettingsForm'
 
 type Props = {
@@ -51,86 +51,102 @@ export const WorkspaceSettingsModal = ({
     <Modal isOpen={isOpen} onClose={onClose} size="4xl">
       <ModalOverlay />
       <ModalContent h="600px" flexDir="row">
-        <Stack spacing={8} w="250px" py="6" borderRightWidth={1} h="full">
+        <Stack
-          <Stack>
+          spacing={8}
-            <Text pl="4" color="gray.500">
+          w="250px"
-              {user.email}
+          py="6"
-            </Text>
+          borderRightWidth={1}
-            <Button
+          h="full"
-              variant={selectedTab === 'my-account' ? 'solid' : 'ghost'}
+          justifyContent="space-between"
-              onClick={() => setSelectedTab('my-account')}
+        >
-              leftIcon={
+          <Stack spacing={8}>
-                <Avatar
+            <Stack>
-                  name={user.name ?? undefined}
+              <Text pl="4" color="gray.500">
-                  src={user.image ?? undefined}
+                {user.email}
-                  boxSize="15px"
+              </Text>
-                />
-              }
-              size="sm"
-              justifyContent="flex-start"
-              pl="4"
-            >
-              My account
-            </Button>
-            <Button
-              variant={selectedTab === 'user-settings' ? 'solid' : 'ghost'}
-              onClick={() => setSelectedTab('user-settings')}
-              leftIcon={<SettingsIcon />}
-              size="sm"
-              justifyContent="flex-start"
-              pl="4"
-            >
-              Preferences
-            </Button>
-          </Stack>
-          <Stack>
-            <Text pl="4" color="gray.500">
-              Workspace
-            </Text>
-            {canEdit && (
               <Button
-                variant={
+                variant={selectedTab === 'my-account' ? 'solid' : 'ghost'}
-                  selectedTab === 'workspace-settings' ? 'solid' : 'ghost'
+                onClick={() => setSelectedTab('my-account')}
-                }
-                onClick={() => setSelectedTab('workspace-settings')}
                 leftIcon={
-                  <EmojiOrImageIcon
+                  <Avatar
-                    icon={workspace.icon}
+                    name={user.name ?? undefined}
+                    src={user.image ?? undefined}
                     boxSize="15px"
-                    defaultIcon={HardDriveIcon}
                   />
                 }
                 size="sm"
                 justifyContent="flex-start"
                 pl="4"
               >
-                Settings
+                My account
               </Button>
-            )}
-            <Button
-              variant={selectedTab === 'members' ? 'solid' : 'ghost'}
-              onClick={() => setSelectedTab('members')}
-              leftIcon={<UsersIcon />}
-              size="sm"
-              justifyContent="flex-start"
-              pl="4"
-            >
-              Members
-            </Button>
-            {canEdit && (
               <Button
-                variant={selectedTab === 'billing' ? 'solid' : 'ghost'}
+                variant={selectedTab === 'user-settings' ? 'solid' : 'ghost'}
-                onClick={() => setSelectedTab('billing')}
+                onClick={() => setSelectedTab('user-settings')}
-                leftIcon={<CreditCardIcon />}
+                leftIcon={<SettingsIcon />}
                 size="sm"
                 justifyContent="flex-start"
                 pl="4"
               >
-                Billing
+                Preferences
               </Button>
-            )}
+            </Stack>
+            <Stack>
+              <Text pl="4" color="gray.500">
+                Workspace
+              </Text>
+              {canEdit && (
+                <Button
+                  variant={
+                    selectedTab === 'workspace-settings' ? 'solid' : 'ghost'
+                  }
+                  onClick={() => setSelectedTab('workspace-settings')}
+                  leftIcon={
+                    <EmojiOrImageIcon
+                      icon={workspace.icon}
+                      boxSize="15px"
+                      defaultIcon={HardDriveIcon}
+                    />
+                  }
+                  size="sm"
+                  justifyContent="flex-start"
+                  pl="4"
+                >
+                  Settings
+                </Button>
+              )}
+              <Button
+                variant={selectedTab === 'members' ? 'solid' : 'ghost'}
+                onClick={() => setSelectedTab('members')}
+                leftIcon={<UsersIcon />}
+                size="sm"
+                justifyContent="flex-start"
+                pl="4"
+              >
+                Members
+              </Button>
+              {canEdit && (
+                <Button
+                  variant={selectedTab === 'billing' ? 'solid' : 'ghost'}
+                  onClick={() => setSelectedTab('billing')}
+                  leftIcon={<CreditCardIcon />}
+                  size="sm"
+                  justifyContent="flex-start"
+                  pl="4"
+                >
+                  Billing
+                </Button>
+              )}
+            </Stack>
           </Stack>
+
+          <Flex justify="center" pt="10">
+            <Text color="gray.500" fontSize="xs">
+              Version: 2.5.0
+            </Text>
+          </Flex>
         </Stack>
+
         {isOpen && (
           <Flex flex="1" p="10">
             <SettingsContent tab={selectedTab} onClose={onClose} />
@@ -152,7 +168,7 @@ const SettingsContent = ({
     case 'my-account':
       return <MyAccountForm />
     case 'user-settings':
-      return <EditorSettings />
+      return <EditorSettingsForm />
     case 'workspace-settings':
       return <WorkspaceSettingsForm onClose={onClose} />
     case 'members':

apps/builder/components/editor/EditorSettingsModal.tsx

@@ -5,7 +5,7 @@ import {
   ModalContent,
   ModalOverlay,
 } from '@chakra-ui/react'
-import { EditorSettings } from 'components/dashboard/WorkspaceSettingsModal/UserSettingsForm'
+import { EditorSettingsForm } from 'components/dashboard/WorkspaceSettingsModal/EditorSettingsForm'
 import React from 'react'
 
 type Props = {
@@ -20,7 +20,7 @@ export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
       <ModalContent>
         <ModalCloseButton />
         <ModalBody pt="12" pb="8" px="8">
-          <EditorSettings />
+          <EditorSettingsForm />
         </ModalBody>
       </ModalContent>
     </Modal>

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.0",
+  "version": "2.5.0",
   "name": "typebot-os",
   "private": true,
   "license": "AGPL-3.0-or-later",