ahriman/frontend/src/components/package/ChangesTab.tsx

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>
    );
}