gitfor/platform

import { useState } from "react";
import { Link, useNavigate } from "@tanstack/react-router";
import { listTransferTargets, setIssuePinned, setIssuePlanning, setSubIssue, transferIssueTo } from "~/fns/planning";
import { convertIssueToDiscussion } from "~/fns/discussion-admin";
import { useAction } from "~/hooks/use-action";
import type { getIssuePlanning } from "~/fns/planning";
import { ProgressBar } from "./ProgressBar";
import { Button } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { LabelChip } from "~/ui/LabelChip";
import { cn } from "~/utils/cn";
import { SidebarSection } from "~/ui/Heading";

type Planning = Awaited<ReturnType<typeof getIssuePlanning>>;
type Props = { owner: string; repo: string; number: number; planning: Planning };

function Choice({
  label,
  value,
  options,
  disabled,
  onChange,
}: {
  label: string;
  value: string;
  options: Array<{ id: string; name: string }>;
  disabled: boolean;
  onChange: (value: string | null) => void;
}) {
  return (
    <select
      aria-label={label}
      value={value}
      disabled={disabled}
      onChange={(event) => onChange(event.target.value || null)}
      className={cn(inputClass, "h-8 text-xs")}
    >
      <option value="">None</option>
      {options.map((option) => (
        <option key={option.id} value={option.id}>