'use client'; import { useCallback, useMemo, useState } from "react"; import { useRouter } from "next/navigation"; import { formatDistanceToNow } from "date-fns"; import { Code } from "lucide-react"; import { CopyIconButton } from "@/app/(app)/components/copyIconButton"; import { useToast } from "@/components/hooks/use-toast"; import type { Commit } from "@/features/git"; import { getBrowsePath } from "@/app/(app)/browse/hooks/utils"; import { formatAuthorsText, getCommitAuthors } from "@/app/(app)/browse/components/commitAuthors"; import { AuthorsAvatarGroup, CommitActionLink, CommitBody, CommitBodyToggle, } from "@/app/(app)/browse/components/commitParts"; interface CommitRowProps { commit: Commit; repoName: string; revisionName?: string; } export const CommitRow = ({ commit, repoName, revisionName }: CommitRowProps) => { const [isBodyExpanded, setIsBodyExpanded] = useState(false); const { toast } = useToast(); const router = useRouter(); const shortSha = commit.hash.slice(0, 7); const relativeDate = formatDistanceToNow(new Date(commit.date), { addSuffix: true }); const hasBody = commit.body.trim().length > 0; const authors = useMemo( () => getCommitAuthors(commit), [commit], ); const viewRepoAtCommitHref = getBrowsePath({ repoName, revisionName: commit.hash, path: '', pathType: 'tree', }); const commitDiffHref = getBrowsePath({ repoName, revisionName, path: '', pathType: 'commit', commitSha: commit.hash, }); const onCopySha = useCallback(() => { navigator.clipboard.writeText(commit.hash).then(() => { toast({ description: "✅ Copied commit SHA to clipboard" }); }) return true; }, [commit.hash, toast]); const navigateToCommit = useCallback(() => { router.push(commitDiffHref); }, [router, commitDiffHref]); // Navigate to the commit diff when the row is clicked, unless the click // originated from an interactive child (button or link) — those keep their // own behavior (copy SHA, view file/repo at commit, expand body, etc.). const onRowClick = useCallback((event: React.MouseEvent) => { const target = event.target as HTMLElement; if (target.closest('button, a')) { return; } navigateToCommit(); }, [navigateToCommit]); const onRowKeyDown = useCallback((event: React.KeyboardEvent) => { if ((event.target as HTMLElement).closest('button, a')) { return; } if (event.key === 'Enter') { navigateToCommit(); } }, [navigateToCommit]); return ( <>

{commit.message} {hasBody && ( )}

{formatAuthorsText(authors)} authored {relativeDate}

{shortSha} } />

{hasBody && isBodyExpanded && ( )} ); };