import type { AnnotationSide, DiffLineAnnotation, FileDiffMetadata, SelectedLineRange, } from "@pierre/diffs"; import { FileDiff, type FileDiffProps } from "@pierre/diffs/react"; import type { ScopedThreadRef } from "@t3tools/contracts"; import { useCallback, useMemo, useState, type ReactNode } from "react"; import { type DraftId, useComposerDraftStore } from "~/composerDraftStore"; import { buildDiffReviewComment, restoreDiffReviewCommentRange, type ReviewCommentContext, } from "~/reviewCommentContext"; import { LocalCommentAnnotation } from "../files/LocalCommentAnnotation"; import { nextFileCommentId } from "../files/fileCommentAnnotations"; interface DiffCommentAnnotationEntry { id: string; kind: "draft" | "comment"; range: SelectedLineRange; rangeLabel: string; text: string; } interface DiffCommentAnnotationGroup { entries: DiffCommentAnnotationEntry[]; } type DiffCommentLineAnnotation = DiffLineAnnotation; const EMPTY_REVIEW_COMMENTS: ReadonlyArray = []; function annotationSide(range: SelectedLineRange): AnnotationSide { return (range.endSide ?? range.side) === "deletions" ? "deletions" : "additions"; } function appendAnnotationEntry( annotations: ReadonlyArray, range: SelectedLineRange, entry: DiffCommentAnnotationEntry, ): DiffCommentLineAnnotation[] { const side = annotationSide(range); const annotationIndex = annotations.findIndex( (annotation) => annotation.side === side && annotation.lineNumber === range.end, ); if (annotationIndex < 0) { return [ ...annotations, { side, lineNumber: range.end, metadata: { entries: [entry] }, }, ]; } return annotations.map((annotation, index) => index === annotationIndex ? { ...annotation, metadata: { entries: [...annotation.metadata.entries, entry] }, } : annotation, ); } interface AnnotatableFileDiffProps { fileDiff: FileDiffMetadata; filePath: string; sectionId: string; sectionTitle: string; composerDraftTarget: ScopedThreadRef | DraftId; options: FileDiffProps["options"]; renderHeaderPrefix: (fileDiff: FileDiffMetadata) => ReactNode; } export function AnnotatableFileDiff({ fileDiff, filePath, sectionId, sectionTitle, composerDraftTarget, options, renderHeaderPrefix, }: AnnotatableFileDiffProps) { const addReviewComment = useComposerDraftStore((store) => store.addReviewComment); const removeReviewComment = useComposerDraftStore((store) => store.removeReviewComment); const reviewComments = useComposerDraftStore( (store) => store.getComposerDraft(composerDraftTarget)?.reviewComments ?? EMPTY_REVIEW_COMMENTS, ); const [selectedRange, setSelectedRange] = useState(null); const [draftAnnotation, setDraftAnnotation] = useState(null); const persistedAnnotations = useMemo( () => reviewComments .filter( (comment) => comment.sectionId === sectionId && comment.filePath === filePath && (comment.fenceLanguage ?? "diff") === "diff", ) .reduce((annotations, comment) => { const range = restoreDiffReviewCommentRange(fileDiff, comment); if (!range) return annotations; return appendAnnotationEntry(annotations, range, { id: comment.id, kind: "comment", range, rangeLabel: comment.rangeLabel, text: comment.text, }); }, []), [fileDiff, filePath, reviewComments, sectionId], ); const lineAnnotations = useMemo( () => (draftAnnotation ? [...persistedAnnotations, draftAnnotation] : persistedAnnotations), [draftAnnotation, persistedAnnotations], ); const removeAnnotationEntry = useCallback( (entryId: string) => { setSelectedRange(null); if ( draftAnnotation?.metadata.entries.some( (entry) => entry.id === entryId && entry.kind === "draft", ) ) { setDraftAnnotation(null); return; } removeReviewComment(composerDraftTarget, entryId); }, [composerDraftTarget, draftAnnotation, removeReviewComment], ); const submitAnnotationEntry = useCallback( (entryId: string, text: string) => { const entry = draftAnnotation?.metadata.entries.find((candidate) => candidate.id === entryId); if (!entry) return; const comment = buildDiffReviewComment({ id: entry.id, sectionId, sectionTitle, filePath, fileDiff, range: entry.range, text, }); if (comment) { addReviewComment(composerDraftTarget, comment); } setSelectedRange(null); setDraftAnnotation(null); }, [ addReviewComment, composerDraftTarget, fileDiff, filePath, draftAnnotation, sectionId, sectionTitle, ], ); const beginComment = useCallback( (range: SelectedLineRange) => { const id = nextFileCommentId(); const comment = buildDiffReviewComment({ id, sectionId, sectionTitle, filePath, fileDiff, range, text: "", }); if (!comment) return; const draftEntry: DiffCommentAnnotationEntry = { id, kind: "draft", range, rangeLabel: comment.rangeLabel, text: "", }; setDraftAnnotation({ side: annotationSide(range), lineNumber: range.end, metadata: { entries: [draftEntry] }, }); }, [fileDiff, filePath, sectionId, sectionTitle], ); const hasOpenCommentForm = draftAnnotation !== null; const handleLineSelectionEnd = useCallback( (range: SelectedLineRange | null) => { setSelectedRange(range); if (range) beginComment(range); }, [beginComment], ); return ( fileDiff={fileDiff} renderHeaderPrefix={renderHeaderPrefix} options={{ ...options, enableGutterUtility: !hasOpenCommentForm, enableLineSelection: !hasOpenCommentForm, onGutterUtilityClick: setSelectedRange, onLineSelectionChange: setSelectedRange, onLineSelectionEnd: handleLineSelectionEnd, }} selectedLines={selectedRange} lineAnnotations={lineAnnotations} renderAnnotation={(annotation) => (
{annotation.metadata.entries.map((entry) => ( removeAnnotationEntry(entry.id)} onComment={(text) => submitAnnotationEntry(entry.id, text)} onDelete={() => removeAnnotationEntry(entry.id)} /> ))}
)} /> ); }