feat: add VariablesButton component to workflow layout (#1837)

- Introduced a new VariablesButton component that opens a sidebar for variable management.
- Integrated the Braces icon from lucide-react for visual representation.
- Ensured the VariablesButton is rendered within the WorkflowStateProvider for proper context access.

Author: tanaaym7

apps/atoms/src/app/dashboard/agents/[id]/(workflow-editor)/workflow/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Loader2, Lock } from "lucide-react";
+import { Braces, Loader2, Lock } from "lucide-react";
 import { useRouter } from "next/navigation";
 import React, { Suspense } from "react";
 import { ReactFlowProvider } from "reactflow";
@@ -10,9 +10,25 @@ import ProtectedRoute from "@/components/ProtectedRoutes";
 import WorkflowSidebar from "@/components/Workflow/WorkflowSidebar";
 import { AgentContextProvider, useAgent } from "@/contexts/AgentContext";
 import { WorkflowStateProvider } from "@/contexts/workflow/workflow";
+import useSidebar from "@/hooks/workflow/useSidebar";
 
 import { Button } from "@repo/ui/button";
 
+// Variables button component - needs to be inside WorkflowStateProvider to access useSidebar
+const VariablesButton = () => {
+  const { onOpen } = useSidebar();
+
+  return (
+    <Button
+      onClick={() => onOpen("variables")}
+      variant="outline"
+      className="fixed right-4 top-20 z-40 gap-2 bg-white shadow-sm">
+      <Braces className="h-4 w-4" />
+      <span>Variables</span>
+    </Button>
+  );
+};
+
 const WorkflowContent = ({ children }: { children: React.ReactNode }) => {
   const { agent } = useAgent();
 
@@ -31,6 +47,7 @@ const WorkflowContent = ({ children }: { children: React.ReactNode }) => {
           <div className="relative">
             {children}
             <WorkflowSidebar />
+            <VariablesButton />
             <LockOverlay />
           </div>
         </WorkflowStateProvider>