gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { usePull } from "~/hooks/use-pull";
import { useViewer } from "~/hooks/use-viewer";
import { Timeline } from "~/components/Timeline";
import { CommentComposer } from "~/components/CommentComposer";
import { IssueSidebar } from "~/components/IssueSidebar";
import { MergeBox } from "~/components/MergeBox";
import { ReactionBar } from "~/components/ReactionBar";
import { PullReviewers } from "~/components/PullReviewers";
import { LinkedIssues } from "~/components/LinkedIssues";
import { Avatar } from "~/ui/Avatar";
import { Markdown } from "~/ui/Markdown";

export const Route = createFileRoute("/$owner/$repo/pull/$number/")({
  component: Conversation,
});

function Conversation() {
  const data = usePull();
  const { owner, repo } = Route.useParams();
  const viewer = useViewer();
  const { issue } = data.conversation;

  return (
    <div className="grid gap-8 lg:grid-cols-[1fr_260px]">
      <div className="min-w-0 space-y-5">
        <div className="flex gap-3">
          <Avatar name={issue.author.name} />
          <div className="min-w-0 flex-1 overflow-hidden rounded-lg border border-gray-800 px-4 py-3">
            {issue.body.trim() ? (
              <Markdown html={issue.html} />
            ) : (
              <p className="text-sm text-gray-500 italic">No description provided.</p>
            )}
            <div className="mt-3">
              <ReactionBar
                owner={owner}
                repo={repo}
                subjectType="issue"
                subjectId={issue.id}