gitfor/platform

import { Link } from "@tanstack/react-router";
import { setLinkedIssue } from "~/fns/pull-review";
import { useAction } from "~/hooks/use-action";
import { Badge } from "./ui/Primitives";
import { Button } from "./ui/Button";
import { inputClass } from "./ui/Field";
import { cn } from "~/utils/cn";

type Props = {
  owner: string;
  repo: string;
  number: number;
  issues: Array<{ number: number; title: string; state: "open" | "closed"; source: "manual" | "keyword" }>;
  canEdit: boolean;
};

/** "Development" sidebar: issues this pull request resolves, from closing keywords or manual links. */
export function LinkedIssues({ owner, repo, number, issues, canEdit }: Props) {
  const link = useAction(setLinkedIssue);
  return (
    <section className="space-y-2 border-b border-gray-800 pb-4">
      <h3 className="label-caps text-gray-500">Development</h3>
      {issues.length === 0 && <p className="text-gray-500">No linked issues</p>}
      {issues.map((issue) => (
        <div key={issue.number} className="flex items-center gap-2 text-gray-300">
          <Badge tone={issue.state === "open" ? "green" : "purple"}>{issue.state}</Badge>
          <Link
            to="/$owner/$repo/issues/$number"
            params={{ owner, repo, number: String(issue.number) }}
            className="min-w-0 flex-1 truncate hover:text-accent-400"
          >
            #{issue.number} {issue.title}
          </Link>
          {canEdit && issue.source === "manual" && (
            <button
              type="button"
              title="Unlink"
              className="text-xs text-gray-500 hover:text-red-400"
              onClick={() => link.run({ data: { owner, repo, number, issueNumber: issue.number, linked: false } })}
            >