gitfor/platform

import { createFileRoute, Link } from "@tanstack/react-router";
import { getBlame } from "~/fns/code";
import { Breadcrumbs } from "~/components/RefNavigation";
import { RefSwitcher } from "~/components/RefSwitcher";
import { BlameTable } from "~/components/BlameTable";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { buttonClass } from "~/ui/Button";
import { usePollWhile } from "~/hooks/use-poll-while";

const POLL_MS = 1500;

export const Route = createFileRoute("/$owner/$repo/blame/$")({
  loader: ({ params }) => getBlame({ data: { owner: params.owner, repo: params.repo, splat: params._splat ?? "" } }),
  component: BlamePage,
});

function BlamePage() {
  const data = Route.useLoaderData();
  const { owner, repo } = Route.useParams();
  const splat = `${data.ref.name}/${data.path}`;
  usePollWhile(data.pending !== null, POLL_MS);
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-3">
        <RefSwitcher
          owner={owner}
          repo={repo}
          current={data.ref.name}
          branches={data.branches}
          tags={[]}
          path={data.path}
          mode="blame"
        />
        <Breadcrumbs owner={owner} repo={repo} gitRef={data.ref.name} path={data.path} />
      </div>
      <Panel
        title={<span className="font-mono text-xs text-kumo-subtle">Blame</span>}
        actions={
          <>