🚸 Add better page titles and dashboard icons

Closes #231

apps/builder/src/features/dashboard/components/DashboardHeader.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { HStack, Flex, Button, useDisclosure } from '@chakra-ui/react'
-import { SettingsIcon } from '@/components/icons'
+import { HardDriveIcon, SettingsIcon } from '@/components/icons'
 import { signOut } from 'next-auth/react'
 import { useUser } from '@/features/account'
 import { useWorkspace, WorkspaceDropdown } from '@/features/workspace'
 import { isNotDefined } from 'utils'
 import Link from 'next/link'
-import { TypebotLogo } from '@/components/TypebotLogo'
 import { WorkspaceSettingsModal } from '@/features/workspace'
+import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
 
 export const DashboardHeader = () => {
   const { user } = useUser()
@@ -32,7 +32,11 @@ export const DashboardHeader = () => {
         flex="1"
       >
         <Link href="/typebots" data-testid="typebot-logo">
-          <TypebotLogo w="30px" />
+          <EmojiOrImageIcon
+            boxSize="30px"
+            icon={workspace?.icon}
+            defaultIcon={HardDriveIcon}
+          />
         </Link>
         <HStack>
           {user && workspace && (

apps/builder/src/features/dashboard/components/DashboardPage.tsx

@@ -35,7 +35,7 @@ export const DashboardPage = () => {
 
   return (
     <Stack minH="100vh">
-      <Seo title="My typebots" />
+      <Seo title={workspace?.name ?? 'My typebots'} />
       <DashboardHeader />
       <TypebotDndProvider>
         {isLoading ? (

apps/builder/src/features/editor/components/EditorPage.tsx

@@ -18,12 +18,12 @@ import { GettingStartedModal } from './GettingStartedModal'
 import { PreviewDrawer } from './PreviewDrawer'
 import { TypebotHeader } from './TypebotHeader'
 
-export const EditTypebotPage = () => {
+export const EditorPage = () => {
   const { typebot, isReadOnly } = useTypebot()
 
   return (
     <EditorProvider>
-      <Seo title="Editor" />
+      <Seo title={typebot?.name ? `${typebot.name} | Editor` : 'Editor'} />
       <Flex overflow="clip" h="100vh" flexDir="column" id="editor-container">
         <GettingStartedModal />
         <TypebotHeader />

apps/builder/src/features/editor/index.ts

@@ -1,6 +1,6 @@
 export { TypebotProvider, useTypebot } from './providers/TypebotProvider'
 export { TypebotHeader } from './components/TypebotHeader'
-export { EditTypebotPage } from './components/EditTypebotPage'
+export { EditorPage } from './components/EditorPage'
 export { headerHeight } from './constants'
 export { BlockIcon } from './components/BlocksSideBar/BlockIcon'
 export { RightPanel, useEditor } from './providers/EditorProvider'

apps/builder/src/features/publish/components/SharePage.tsx

@@ -88,7 +88,7 @@ export const SharePage = () => {
 
   return (
     <Flex flexDir="column" pb="40">
-      <Seo title="Share" />
+      <Seo title={typebot?.name ? `${typebot.name} | Share` : 'Share'} />
       <TypebotHeader />
       <Flex h="full" w="full" justifyContent="center" align="flex-start">
         <Stack maxW="1000px" w="full" pt="10" spacing={10}>

apps/builder/src/features/results/components/ResultsPage.tsx

@@ -89,7 +89,15 @@ export const ResultsPage = () => {
   return (
     <Flex overflow="hidden" h="100vh" flexDir="column">
       <Seo
-        title={router.pathname.endsWith('analytics') ? 'Analytics' : 'Results'}
+        title={
+          router.pathname.endsWith('analytics')
+            ? typebot?.name
+              ? `${typebot.name} | Analytics`
+              : 'Analytics'
+            : typebot?.name
+            ? `${typebot.name} | Results`
+            : 'Results'
+        }
       />
       <TypebotHeader />
       {chatsLimitPercentage > ALERT_CHATS_PERCENT_THRESHOLD && (

apps/builder/src/features/settings/components/SettingsPage.tsx

@@ -17,7 +17,7 @@ export const SettingsPage = () => {
 
   return (
     <Flex overflow="hidden" h="100vh" flexDir="column">
-      <Seo title="Settings" />
+      <Seo title={typebot?.name ? `${typebot.name} | Settings` : 'Settings'} />
       <TypebotHeader />
       <Flex h="full" w="full">
         <SettingsSideMenu />

apps/builder/src/features/theme/components/ThemePage.tsx

@@ -12,7 +12,7 @@ export const ThemePage = () => {
 
   return (
     <Flex overflow="hidden" h="100vh" flexDir="column">
-      <Seo title="Theme" />
+      <Seo title={typebot?.name ? `${typebot.name} | Theme` : 'Theme'} />
       <TypebotHeader />
       <Flex h="full" w="full">
         <ThemeSideMenu />

apps/builder/src/features/workspace/components/WorkspaceDropdown.tsx

@@ -12,7 +12,6 @@ import {
   MenuButton,
   Button,
   HStack,
-  SkeletonCircle,
   MenuList,
   MenuItem,
   Text,
@@ -40,18 +39,6 @@ export const WorkspaceDropdown = ({
     <Menu placement="bottom-end">
       <MenuButton as={Button} variant="outline" px="2">
         <HStack>
-          <SkeletonCircle
-            isLoaded={currentWorkspace !== undefined}
-            alignItems="center"
-            display="flex"
-            boxSize="20px"
-          >
-            <EmojiOrImageIcon
-              boxSize="20px"
-              icon={currentWorkspace?.icon}
-              defaultIcon={HardDriveIcon}
-            />
-          </SkeletonCircle>
           {currentWorkspace && (
             <>
               <Text noOfLines={1} maxW="200px">

apps/builder/src/pages/typebots/[typebotId]/edit.tsx

@@ -1,5 +1,5 @@
-import { EditTypebotPage } from '@/features/editor'
+import { EditorPage } from '@/features/editor'
 
 export default function Page() {
-  return <EditTypebotPage />
+  return <EditorPage />
 }