upload ai slop

frontend/src/components/package/ChangesTab.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from "react";
+import { Box } from "@mui/material";
+import { useQuery } from "@tanstack/react-query";
+import hljs from "highlight.js/lib/core";
+import diff from "highlight.js/lib/languages/diff";
+import "highlight.js/styles/github.css";
+import { Client } from "api/client/AhrimanClient";
+import { QueryKeys } from "api/QueryKeys";
+import CopyButton from "components/common/CopyButton";
+import type { Changes } from "api/types/Changes";
+import type { RepositoryId } from "api/types/RepositoryId";
+
+hljs.registerLanguage("diff", diff);
+
+interface ChangesTabProps {
+    packageBase: string;
+    repo: RepositoryId;
+}
+
+export default function ChangesTab({ packageBase, repo }: ChangesTabProps): React.JSX.Element {
+    const codeRef = useRef<HTMLElement>(null);
+
+    const { data } = useQuery<Changes>({
+        queryKey: QueryKeys.changes(packageBase, repo),
+        queryFn: () => Client.fetchChanges(packageBase, repo),
+        enabled: !!packageBase,
+    });
+
+    const changesText = data?.changes ?? "";
+
+    useEffect(() => {
+        if (codeRef.current) {
+            codeRef.current.textContent = changesText;
+            delete codeRef.current.dataset.highlighted;
+            hljs.highlightElement(codeRef.current);
+        }
+    }, [changesText]);
+
+    return (
+        <Box sx={{ position: "relative", mt: 1 }}>
+            <Box
+                component="pre"
+                sx={{
+                    backgroundColor: "#f6f8fa",
+                    p: 2,
+                    borderRadius: 1,
+                    overflow: "auto",
+                    maxHeight: 400,
+                    fontSize: "0.8rem",
+                    fontFamily: "monospace",
+                }}
+            >
+                <code ref={codeRef} className="language-diff" />
+            </Box>
+            <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+                <CopyButton getText={() => changesText} />
+            </Box>
+        </Box>
+    );
+}