import { issueStateTone } from "~/ui/tones";
import { Link } from "@tanstack/react-router";
import { setLinkedIssue } from "~/fns/pull-review";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { Button } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { cn } from "~/utils/cn";
import { SidebarSection } from "~/ui/Heading";
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 (
<SidebarSection title="Development">
{issues.length === 0 && <p className="text-kumo-subtle">No linked issues</p>}
{issues.map((issue) => (
<div key={issue.number} className="flex items-center gap-2 text-kumo-default">
<Badge tone={issueStateTone(issue.state)}>{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-kumo-subtle hover:text-kumo-danger"
onClick={() => link.run({ data: { owner, repo, number, issueNumber: issue.number, linked: false } })}