gitfor/platform

import { useState } from "react";
import { replyReviewComment, resolveReviewThread } from "~/fns/reviews";
import { useAction } from "~/hooks/use-action";
import { Avatar, Badge, Markdown, RelativeTime } from "./ui/Primitives";
import { Button } from "./ui/Button";
import { inputClass } from "./ui/Field";
import type { getPullFiles } from "~/fns/pulls";
import { cn } from "~/utils/cn";

export type ReviewComment = Awaited<ReturnType<typeof getPullFiles>>["comments"][number];

type Props = {
  owner: string;
  repo: string;
  number: number;
  root: ReviewComment;
  replies: ReviewComment[];
  canReply: boolean;
};

export function ReviewThread({ owner, repo, number, root, replies, canReply }: Props) {
  const [reply, setReply] = useState("");
  const [collapsed, setCollapsed] = useState(root.resolved);
  const send = useAction(replyReviewComment);
  const resolve = useAction(resolveReviewThread);

  return (
    <div className="m-2 overflow-hidden rounded-md border border-gray-700 bg-gray-950 font-sans">
      <div className="flex items-center gap-2 border-b border-gray-800 px-3 py-1.5 text-xs text-gray-500">
        {root.outdated && <Badge tone="amber">Outdated</Badge>}
        {root.resolved && <Badge tone="green">Resolved</Badge>}
        <button type="button" className="ml-auto hover:text-white" onClick={() => setCollapsed((value) => !value)}>
          {collapsed ? "Show" : "Hide"}
        </button>
        {canReply && (
          <button
            type="button"
            className="hover:text-white"
            onClick={() => resolve.run({ data: { owner, repo, number, commentId: root.id, resolved: !root.resolved } })}
          >