yaak/src-web/components/git/HistoryDialog.tsx

import type { GitCommit } from "@yaakapp-internal/git";
import { formatDistanceToNowStrict } from "date-fns";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableRow,
  TruncatedWideTableCell,
} from "../core/Table";

interface Props {
  log: GitCommit[];
}

export function HistoryDialog({ log }: Props) {
  return (
    <div className="pl-5 pr-1 pb-1">
      <Table scrollable className="px-1">
        <TableHead>
          <TableRow>
            <TableHeaderCell>Message</TableHeaderCell>
            <TableHeaderCell>Author</TableHeaderCell>
            <TableHeaderCell>When</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {log.map((l) => (
            <TableRow
              key={(l.author.name ?? "") + (l.author.email ?? "") + (l.message ?? "n/a") + l.when}
            >
              <TruncatedWideTableCell>
                {l.message || <em className="text-text-subtle">No message</em>}
              </TruncatedWideTableCell>
              <TableCell>
                <span title={`Email: ${l.author.email}`}>{l.author.name || "Unknown"}</span>
              </TableCell>
              <TableCell className="text-text-subtle">
                <span title={l.when}>{formatDistanceToNowStrict(l.when)} ago</span>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}