gitfor/platform

import { createFileRoute, Link } from "@tanstack/react-router";
import { getDiscussion } from "~/fns/discussions";
import { useViewer } from "~/hooks/use-viewer";
import { DiscussionThreads, UpvoteButton } from "~/components/DiscussionThreads";
import { ReactionBar } from "~/components/ReactionBar";
import { Avatar } from "~/ui/Avatar";
import { Badge } from "~/ui/Badge";
import { Markdown } from "~/ui/Markdown";
import { RelativeTime } from "~/ui/RelativeTime";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/$owner/$repo/discussions/$number")({
  loader: ({ params }) =>
    getDiscussion({ data: { owner: params.owner, repo: params.repo, number: Number(params.number) } }),
  head: ({ loaderData }) => ({
    meta: [{ title: loaderData ? `${loaderData.discussion.title} · Discussion` : "Discussion" }],
  }),
  component: DiscussionPage,
});

function DiscussionPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const viewer = useViewer();
  const { discussion } = data;
  const context = { owner: params.owner, repo: params.repo, number: discussion.number, signedIn: Boolean(viewer) };

  return (
    <div className="max-w-4xl space-y-6">
      <header className="space-y-2 border-b border-kumo-hairline pb-4">
        <Heading size="xl">
          {discussion.title} <span className="font-normal text-kumo-subtle">#{discussion.number}</span>
        </Heading>
        <div className="flex flex-wrap items-center gap-2 text-sm text-kumo-subtle">
          <Link
            to="/$owner/$repo/discussions"
            params={{ owner: params.owner, repo: params.repo }}
            search={{ category: discussion.category }}
          >
            <Badge>