feat: added scroll top button for agent and rule pages

src/components/layout/scroll-top-button.tsx

@@ -0,0 +1,35 @@
+import { IconButton, Fade } from "@mui/material";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+
+interface Props {
+  onClick: () => void;
+  show: boolean;
+}
+
+export const ScrollTopButton = ({ onClick, show }: Props) => {
+  return (
+    <Fade in={show}>
+      <IconButton
+        onClick={onClick}
+        sx={{
+          position: "absolute",
+          bottom: "20px",
+          right: "20px",
+          backgroundColor: (theme) =>
+            theme.palette.mode === "dark"
+              ? "rgba(255,255,255,0.1)"
+              : "rgba(0,0,0,0.1)",
+          "&:hover": {
+            backgroundColor: (theme) =>
+              theme.palette.mode === "dark"
+                ? "rgba(255,255,255,0.2)"
+                : "rgba(0,0,0,0.2)",
+          },
+          visibility: show ? "visible" : "hidden",
+        }}
+      >
+        <KeyboardArrowUpIcon />
+      </IconButton>
+    </Fade>
+  );
+};