🦴 Add theme page backbone

apps/builder/pages/api/typebots.ts

@@ -1,4 +1,4 @@
-import { StartBlock, StepType } from 'bot-engine'
+import { BackgroundType, StartBlock, StepType, Theme } from 'bot-engine'
 import { Typebot, User } from 'db'
 import prisma from 'libs/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -38,8 +38,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
           },
         ],
       }
+      const theme: Theme = {
+        general: {
+          font: 'Open Sans',
+          background: { type: BackgroundType.NONE, content: '#ffffff' },
+        },
+      }
       const typebot = await prisma.typebot.create({
-        data: { ...data, ownerId: user.id, startBlock },
+        data: { ...data, ownerId: user.id, startBlock, theme },
       })
       return res.send(typebot)
     }

apps/builder/pages/typebots/[id]/edit.tsx

@@ -20,7 +20,7 @@ const TypebotEditPage = () => {
       <EditorContext>
         <KBarProvider actions={actions}>
           <KBar />
-          <Flex overflow="hidden" h="100vh">
+          <Flex overflow="hidden" h="100vh" flexDir="column">
             <TypebotHeader />
             <GraphProvider>
               <Board />

apps/builder/pages/typebots/[id]/theme.tsx

@@ -0,0 +1,23 @@
+import { Flex } from '@chakra-ui/layout'
+import withAuth from 'components/HOC/withUser'
+import { Seo } from 'components/Seo'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import { ThemeContent } from 'components/theme/ThemeContent'
+import { TypebotContext } from 'contexts/TypebotContext'
+import { useRouter } from 'next/router'
+import React from 'react'
+
+const ThemePage = () => {
+  const { query } = useRouter()
+  return (
+    <TypebotContext typebotId={query.id?.toString()}>
+      <Seo title="Theme" />
+      <Flex overflow="hidden" h="100vh" flexDir="column">
+        <TypebotHeader />
+        <ThemeContent />
+      </Flex>
+    </TypebotContext>
+  )
+}
+
+export default withAuth(ThemePage)

apps/builder/pages/typebots/create.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import { Seo } from 'components/Seo'
 import { DashboardHeader } from 'components/dashboard/DashboardHeader'
 import { createTypebot } from 'services/typebots'
+import withAuth from 'components/HOC/withUser'
 
 const TemplatesPage = () => {
   const user = useUser()
@@ -25,7 +26,7 @@ const TemplatesPage = () => {
       folderId: router.query.folderId?.toString() ?? null,
     })
     if (error) toast({ description: error.message })
-    if (data) router.push(`/typebots/${data.id}`)
+    if (data) router.push(`/typebots/${data.id}/edit`)
     setIsLoading(false)
   }
 
@@ -40,4 +41,4 @@ const TemplatesPage = () => {
   )
 }
 
-export default TemplatesPage
+export default withAuth(TemplatesPage)