Fix pinning issue and improve code structure

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -330,7 +330,7 @@ export default function GenericNode({
                       node: {
                         ...old.data.node,
                         pinned: old.data?.node?.pinned ? false : true,
-                      }
+                      },
                     },
                   }));
                 }}
@@ -340,9 +340,7 @@ export default function GenericNode({
                     name={"Pin"}
                     className={cn(
                       "h-5 fill-transparent stroke-chat-trigger stroke-2 transition-all",
-                      pinned ?? false
+                      pinned ?? false ? "animate-wiggle fill-chat-trigger" : ""
-                        ? "animate-wiggle fill-chat-trigger"
-                        : ""
                     )}
                   />
                 </div>

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -1,12 +1,10 @@
 import { Transition } from "@headlessui/react";
 import { useState } from "react";
 import Loading from "../../../components/ui/loading";
-import { postBuildInit } from "../../../controllers/API";
 import { FlowType } from "../../../types/flow";
 
 import useAlertStore from "../../../stores/alertStore";
 import useFlowStore from "../../../stores/flowStore";
-import { parsedDataType } from "../../../types/components";
 import { validateNodes } from "../../../utils/reactflowUtils";
 import RadialProgressComponent from "../../RadialProgress";
 import IconComponent from "../../genericIconComponent";
@@ -46,7 +44,6 @@ export default function BuildTrigger({
       const startTime = Date.now();
       setIsBuilding(true);
 
-
       await enforceMinimumLoadingTime(startTime, minimumLoadingTime);
     } catch (error) {
       console.error("Error:", error);
@@ -55,7 +52,6 @@ export default function BuildTrigger({
     }
   }
 
-
   const checkInputAndOutput = useFlowStore(
     (state) => state.checkInputAndOutput
   );
@@ -83,7 +79,13 @@ export default function BuildTrigger({
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-      <div className={checkInputAndOutput() ? "fixed bottom-20 right-4" : "fixed bottom-4 right-4"}>
+      <div
+        className={
+          checkInputAndOutput()
+            ? "fixed bottom-20 right-4"
+            : "fixed bottom-4 right-4"
+        }
+      >
         <div
           className={`${eventClick} round-button-form`}
           onClick={() => {

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -279,15 +279,11 @@ export default function ExtraSidebar(): JSX.Element {
           <div className="side-bar-button">
             {currentFlow && currentFlow.data && (
               <ApiModal flow={currentFlow}>
-                <button
+                <button className={"w-full "}>
-                  className={"w-full "}
-                >
                   <div className={classNames("extra-side-bar-buttons")}>
                     <IconComponent
                       name="Code2"
-                      className={
+                      className={"side-bar-button-size"}
-                        "side-bar-button-size"
-                      }
                     />
                   </div>
                 </button>

src/frontend/tailwind.config.js

@@ -30,12 +30,12 @@ module.exports = {
     extend: {
       keyframes: {
         wiggle: {
-          '0%, 100%': { transform: 'scale(100%)' },
+          "0%, 100%": { transform: "scale(100%)" },
-          '50%': { transform: 'scale(120%)' },
+          "50%": { transform: "scale(120%)" },
-        }
+        },
       },
       animation: {
-        wiggle: 'wiggle 150ms ease-in-out 1',
+        wiggle: "wiggle 150ms ease-in-out 1",
       },
       colors: {
         "component-icon": "var(--component-icon)",