gitfor/platform

import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { deleteRepo, updateRepoSettings } from "~/fns/repos";
import { getBranches } from "~/fns/browse";
import { useAction } from "~/hooks/use-action";
import { useRepo } from "~/hooks/use-repo";
import { Panel } from "~/ui/Panel";
import { TransferRepoPanel } from "~/components/TransferRepoPanel";
import { ImportSyncPanel } from "~/components/ImportSyncPanel";
import { Button } from "~/ui/Button";
import { CheckboxField, SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { ACTIONS_POLICIES } from "~/lib/types";
import type { ActionsPolicy } from "~/lib/types";

export const Route = createFileRoute("/$owner/$repo/settings/")({
  loader: ({ params }) => getBranches({ data: { owner: params.owner, repo: params.repo } }),
  component: GeneralSettings,
});

function actionsPolicyFrom(value: FormDataEntryValue | null): ActionsPolicy {
  return ACTIONS_POLICIES.find((policy) => policy === value) ?? "all";
}

function GeneralSettings() {
  const branches = Route.useLoaderData();
  const params = Route.useParams();
  const { repo } = useRepo();
  const navigate = useNavigate();
  const save = useAction(updateRepoSettings, { invalidate: false });
  const remove = useAction(deleteRepo, { invalidate: false });
  const branchOptions = branches.branches.length
    ? branches.branches.map((branch) => ({ value: branch.name, label: branch.name }))
    : [{ value: repo.defaultBranch, label: repo.defaultBranch }];

  return (
    <>
      <Panel title="General">
        <form
          className="space-y-4 p-5"
          onSubmit={async (event) => {