Merge branch 'dev' into kpczerwinski/open-3006-replace-advanced-switch-with-chevron-on-builder-nodes

- Convert arrow function to function declaration with extracted Props type
- Add aria-expanded attribute to toggle button for accessibility
- Use as="span" on Text component to avoid block element inside button
- Add aria-hidden to decorative CaretDownIcon

Co-authored-by: Ubbe <0ubbe@users.noreply.github.com>

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeAdvancedToggle.tsx

@@ -1,21 +1,39 @@
 import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
-import { Switch } from "@/components/atoms/Switch/Switch";
+import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
+import { CaretDownIcon } from "@phosphor-icons/react";
 
-export const NodeAdvancedToggle = ({ nodeId }: { nodeId: string }) => {
+type Props = {
+  nodeId: string;
+};
+
+export function NodeAdvancedToggle({ nodeId }: Props) {
   const showAdvanced = useNodeStore(
     (state) => state.nodeAdvancedStates[nodeId] || false,
   );
   const setShowAdvanced = useNodeStore((state) => state.setShowAdvanced);
   return (
-    <div className="flex items-center justify-between gap-2 rounded-b-xlarge border-t border-zinc-200 bg-white px-5 py-3.5">
-      <Text variant="body" className="font-medium text-slate-700">
-        Advanced
-      </Text>
-      <Switch
-        onCheckedChange={(checked) => setShowAdvanced(nodeId, checked)}
-        checked={showAdvanced}
-      />
+    <div className="flex items-center justify-start gap-2 bg-white px-5 pb-3.5">
+      <Button
+        variant="ghost"
+        className="h-fit min-w-0 p-0 hover:border-transparent hover:bg-transparent"
+        onClick={() => setShowAdvanced(nodeId, !showAdvanced)}
+        aria-expanded={showAdvanced}
+      >
+        <Text
+          variant="body"
+          as="span"
+          className="flex items-center gap-2 !font-semibold text-slate-700"
+        >
+          Advanced{" "}
+          <CaretDownIcon
+            size={16}
+            weight="bold"
+            className={`transition-transform ${showAdvanced ? "rotate-180" : ""}`}
+            aria-hidden
+          />
+        </Text>
+      </Button>
     </div>
   );
-};
+}