github-inline-comments

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { CheckCircle2, MessageSquarePlus, X } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { Avatar, AvatarFallback } from "@/components/ui/avatar"
8import { Badge } from "@/components/ui/badge"
9import { Button } from "@/components/ui/button"
10import { Separator } from "@/components/ui/separator"
11import { Textarea } from "@/components/ui/textarea"
12import {
13  Tooltip,
14  TooltipContent,
15  TooltipProvider,
16  TooltipTrigger,
17} from "@/components/ui/tooltip"
18 
19type Line =
20  | { kind: "hunk"; content: string }
21  | { kind: "context"; old: number | null; new: number | null; content: string }
22  | { kind: "add"; old: number | null; new: number | null; content: string }
23  | { kind: "del"; old: number | null; new: number | null; content: string }
24 
25export default function GithubInlineComments({
26  diff,
27  fileName,
28}: {
29  diff: readonly Line[]
30  fileName: string
31}) {
32  return <DiffList diff={diff} fileName={fileName} />
33}
34 
35function DiffList({
36  diff,
37  fileName,
38}: {
39  diff: readonly Line[]
40  fileName: string
41}) {
42  const rows = diff ?? []
43 
44  // Tracks which line index currently has an open thread
45  const [openThreadAt, setOpenThreadAt] = useState<number | null>(null)
46  // Tracks thread status per line
47  const [resolvedMap, setResolvedMap] = useState<Record<number, boolean>>({})
48 
49  function toggleResolve(idx: number) {
50    setResolvedMap((m) => ({ ...m, [idx]: !m[idx] }))
51  }
52 
53  return (
54    <TooltipProvider delayDuration={150}>
55      <div
56        role="table"
57        aria-label={`Diff of ${fileName}`}
58        className="bg-card rounded-md border dark:border-white/10"
59      >
60        <div className="flex items-center justify-between border-b px-2 py-1 dark:border-white/10">
61          <div className="flex items-center gap-2">
62            <span className="text-[13px] font-medium">{fileName}</span>
63            <Badge
64              variant="secondary"
65              aria-label="File status"
66              className="h-5 px-1.5 text-[11px]"
67            >
68              modified
69            </Badge>
70          </div>
71        </div>
72 
73        <ol role="rowgroup" className="divide-y dark:divide-white/10">
74          {rows.map((line, idx) => {
75            const isChange = line.kind === "add" || line.kind === "del"
76            const isOpen = openThreadAt === idx
77            const isResolved = !!resolvedMap[idx]
78 
79            return (
80              <li
81                key={idx}
82                role="row"
83// … truncated