feat(editor): ✨ Add unlock/lock sidebar

apps/builder/assets/icons.tsx

@@ -297,3 +297,17 @@ export const GripIcon = (props: IconProps) => (
     <circle cx="5" cy="15" r="1"></circle>
   </Icon>
 )
+
+export const LockedIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+  </Icon>
+)
+
+export const UnlockedIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+    <path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
+  </Icon>
+)

apps/builder/components/board/Board.tsx

@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/react'
 import React from 'react'
 import Graph from './graph/Graph'
 import { StepDndContext } from 'contexts/StepDndContext'
-import { StepTypesList } from './StepTypesList'
+import { StepsSideBar } from './StepsSideBar'
 import { PreviewDrawer } from './preview/PreviewDrawer'
 import { RightPanel, useEditor } from 'contexts/EditorContext'
 import { GraphProvider } from 'contexts/GraphContext'
@@ -13,7 +13,7 @@ export const Board = () => {
   return (
     <Flex flex="1" pos="relative" bgColor="gray.50" h="full">
       <StepDndContext>
-        <StepTypesList />
+        <StepsSideBar />
         <GraphProvider>
           <Graph flex="1" />
           <BoardMenuButton pos="absolute" right="40px" top="20px" />

apps/builder/components/board/StepTypesList/StepIcon.tsx → apps/builder/components/board/StepsSideBar/StepIcon.tsx

@@ -31,31 +31,31 @@ type StepIconProps = { type: StepType } & IconProps
 export const StepIcon = ({ type, ...props }: StepIconProps) => {
   switch (type) {
     case BubbleStepType.TEXT:
-      return <ChatIcon {...props} />
+      return <ChatIcon color="blue.500" {...props} />
     case BubbleStepType.IMAGE:
-      return <ImageIcon {...props} />
+      return <ImageIcon color="blue.500" {...props} />
     case BubbleStepType.VIDEO:
-      return <FilmIcon {...props} />
+      return <FilmIcon color="blue.500" {...props} />
     case InputStepType.TEXT:
-      return <TextIcon {...props} />
+      return <TextIcon color="orange.500" {...props} />
     case InputStepType.NUMBER:
-      return <NumberIcon {...props} />
+      return <NumberIcon color="orange.500" {...props} />
     case InputStepType.EMAIL:
-      return <EmailIcon {...props} />
+      return <EmailIcon color="orange.500" {...props} />
     case InputStepType.URL:
-      return <GlobeIcon {...props} />
+      return <GlobeIcon color="orange.500" {...props} />
     case InputStepType.DATE:
-      return <CalendarIcon {...props} />
+      return <CalendarIcon color="orange.500" {...props} />
     case InputStepType.PHONE:
-      return <PhoneIcon {...props} />
+      return <PhoneIcon color="orange.500" {...props} />
     case InputStepType.CHOICE:
-      return <CheckSquareIcon {...props} />
+      return <CheckSquareIcon color="orange.500" {...props} />
     case LogicStepType.SET_VARIABLE:
-      return <EditIcon {...props} />
+      return <EditIcon color="purple.500" {...props} />
     case LogicStepType.CONDITION:
-      return <FilterIcon {...props} />
+      return <FilterIcon color="purple.500" {...props} />
     case LogicStepType.REDIRECT:
-      return <ExternalLinkIcon {...props} />
+      return <ExternalLinkIcon color="purple.500" {...props} />
     case IntegrationStepType.GOOGLE_SHEETS:
       return <GoogleSheetsLogo {...props} />
     case IntegrationStepType.GOOGLE_ANALYTICS: