gitfor/platform

import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { createRelease } from "~/fns/releases";
import { useAction } from "~/hooks/use-action";
import { useRepo } from "~/hooks/use-repo";
import { MarkdownEditor } from "~/components/MarkdownEditor";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { requireSignedIn } from "~/lib/route-guards";

export const Route = createFileRoute("/$owner/$repo/releases/new")({
  beforeLoad: requireSignedIn,
  component: NewReleasePage,
});

function NewReleasePage() {
  const params = Route.useParams();
  const header = useRepo();
  const navigate = useNavigate();
  const [body, setBody] = useState("");
  const create = useAction(createRelease, { invalidate: false });

  return (
    <Panel title="New release" className="max-w-3xl">
      <form
        className="space-y-4 p-5"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          const submitter = event.nativeEvent.submitter;
          const draft = submitter instanceof HTMLButtonElement && submitter.value === "draft";
          const result = await create.run({
            data: {
              ...params,
              tag: String(form.get("tag") ?? ""),
              target: String(form.get("target") ?? header.repo.defaultBranch),
              name: String(form.get("name") ?? ""),
              body,