From 0f3fc62fa55e1218382caf7c8545c3ecfa6870e7 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Fri, 31 Jan 2025 09:32:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Improve=20variable=20creation=20?=
 =?UTF-8?q?look=20in=20side=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../preview/components/VariablesDrawer.tsx       | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/builder/src/features/preview/components/VariablesDrawer.tsx b/apps/builder/src/features/preview/components/VariablesDrawer.tsx
index 7a1dbe5f3..860820dc3 100644
--- a/apps/builder/src/features/preview/components/VariablesDrawer.tsx
+++ b/apps/builder/src/features/preview/components/VariablesDrawer.tsx
@@ -34,6 +34,7 @@ import { isNotEmpty } from "@typebot.io/lib/utils";
 import type { Variable } from "@typebot.io/variables/schemas";
 import { useDrag } from "@use-gesture/react";
 import { type FormEvent, useState } from "react";
+import { toast } from "sonner";
 import { headerHeight } from "../../editor/constants";
 import { useTypebot } from "../../editor/providers/TypebotProvider";
 import { ResizeHandle } from "./ResizeHandle";
@@ -52,7 +53,6 @@ export const VariablesDrawer = ({ onClose }: Props) => {
       ? v.name.toLowerCase().includes(searchValue.toLowerCase())
       : true,
   );
-  const [isVariableCreated, setIsVariableCreated] = useState(false);
 
   const useResizeHandleDrag = useDrag(
     (state) => {
@@ -65,8 +65,7 @@ export const VariablesDrawer = ({ onClose }: Props) => {
 
   const handleCreateSubmit = (e: FormEvent) => {
     e.preventDefault();
-    setIsVariableCreated(true);
-    setTimeout(() => setIsVariableCreated(false), 500);
+    toast.success("Variable created");
     setSearchValue("");
     createVariable({
       id: createId(),
@@ -120,20 +119,19 @@ export const VariablesDrawer = ({ onClose }: Props) => {
           />
           <SlideFade
             in={
-              isVariableCreated ||
-              (filteredVariables &&
-                !filteredVariables.some((v) => v.name === searchValue))
+              filteredVariables &&
+              searchValue.length > 0 &&
+              !filteredVariables.some((v) => v.name === searchValue)
             }
             unmountOnExit
             offsetY={0}
             offsetX={10}
           >
             <IconButton
-              isDisabled={isVariableCreated}
-              icon={isVariableCreated ? <CheckIcon /> : <PlusIcon />}
+              icon={<PlusIcon />}
               aria-label="Create"
               type="submit"
-              colorScheme={isVariableCreated ? "green" : "blue"}
+              colorScheme="orange"
               flexShrink={0}
             />
           </SlideFade>