import { Link } from "@tanstack/react-router";
import { CommitAuthor } from "~/components/CommitAuthor";
import { Avatar } from "~/ui/Avatar";
import { RelativeTime } from "~/ui/RelativeTime";
import { StatusDot } from "~/ui/StatusDot";
import type { StatusState } from "~/lib/types";
import type { CommitBrief } from "~/lib/code-intel";
import { SignatureBadge } from "./security/SignatureBadge";
import { useCommitSignatures } from "~/hooks/use-commit-signatures";
export function CommitList({
owner,
repo,
commits,
statuses = {},
}: {
owner: string;
repo: string;
commits: Array<CommitBrief & { authorAccount: string | null }>;
statuses?: Record<string, StatusState>;
}) {
const signatures = useCommitSignatures(
owner,
repo,
commits.map((commit) => commit.sha),
);
return (
<ul className="divide-y divide-gray-800/70">
{commits.map((commit) => (
<li key={commit.sha} className="flex items-center gap-3 px-4 py-3">
{commit.authorAccount ? (
<Avatar name={commit.authorAccount} size="sm" />
) : (
<Avatar name={commit.authorName} size="sm" src={null} />
)}
<div className="min-w-0 flex-1">
<Link
to="/$owner/$repo/commit/$sha"
params={{ owner, repo, sha: commit.sha }}
className="block truncate text-sm text-gray-100 hover:text-accent-400"