gitfor/platform

import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { useState } from "react";
import { z } from "zod";
import { createIssue } from "~/fns/issues";
import { listIssueTemplates } from "~/fns/issue-templates";
import { useAction } from "~/hooks/use-action";
import { renderFormBody } from "~/lib/issue-templates";
import { MarkdownEditor } from "~/components/MarkdownEditor";
import { IssueForm } from "~/components/IssueForm";
import { Panel } from "~/ui/Panel";
import { Button, buttonClass } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/$owner/$repo/issues/new")({
  validateSearch: z.object({ template: z.string().optional(), blank: z.boolean().optional() }),
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  loader: ({ params }) => listIssueTemplates({ data: { owner: params.owner, repo: params.repo } }),
  component: NewIssuePage,
});

type Template = Awaited<ReturnType<typeof listIssueTemplates>>["templates"][number];

function Chooser() {
  const { templates, config } = Route.useLoaderData();
  const params = Route.useParams();
  return (
    <div className="max-w-3xl space-y-4">
      <Heading>New issue</Heading>
      <Panel>
        <ul className="divide-y divide-kumo-hairline">
          {templates.map((template) => (
            <li key={template.file} className="flex items-center gap-4 px-4 py-3">
              <div className="min-w-0 flex-1">
                <p className="font-medium text-kumo-strong">{template.name}</p>
                <p className="text-sm text-kumo-subtle">{template.about}</p>