gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { deleteIssueType, listIssueTypes, saveIssueType } from "~/fns/milestones";
import { listDiscussions } from "~/fns/discussions";
import { deleteDiscussionCategory, saveDiscussionCategory } from "~/fns/discussion-admin";
import { useAction } from "~/hooks/use-action";
import { EmptyState } from "~/ui/EmptyState";
import { LabelChip } from "~/ui/LabelChip";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

const DEFAULT_COLOR = "f6821f";

export const Route = createFileRoute("/$owner/$repo/settings/planning")({
  loader: async ({ params }) => {
    const ref = { owner: params.owner, repo: params.repo };
    const [types, discussions] = await Promise.all([
      listIssueTypes({ data: ref }),
      listDiscussions({ data: { ...ref, page: 1 } }),
    ]);
    return { types, categories: discussions.categories };
  },
  component: PlanningSettings,
});

function IssueTypes() {
  const { types } = Route.useLoaderData();
  const params = Route.useParams();
  const save = useAction(saveIssueType);
  const remove = useAction(deleteIssueType);
  return (
    <Panel title="Issue types">
      <form
        className="grid gap-3 border-b border-kumo-hairline p-4 md:grid-cols-[1fr_2fr_100px_auto] md:items-end"
        onSubmit={async (event) => {
          event.preventDefault();
          const element = event.currentTarget;
          const form = new FormData(element);
          const description = String(form.get("description") ?? "").trim();