gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { deleteProtection, listProtections, saveProtection } from "~/fns/settings";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { CodeOwnerToggle } from "~/components/CodeOwnerToggle";

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

type Protection = Awaited<ReturnType<typeof listProtections>>[number];

function ProtectionForm({ initial, onDone }: { initial: Protection | null; onDone: () => void }) {
  const params = Route.useParams();
  const save = useAction(saveProtection);
  return (
    <form
      className="space-y-3 p-4"
      onSubmit={async (event) => {
        event.preventDefault();
        const form = new FormData(event.currentTarget);
        const checks = String(form.get("checks") ?? "")
          .split("\n")
          .map((line) => line.trim())
          .filter(Boolean);
        const ok = await save.run({
          data: {
            ...params,
            id: initial?.id ?? null,
            pattern: String(form.get("pattern") ?? ""),
            requirePullRequest: form.get("requirePullRequest") === "on",
            requiredApprovals: Number(form.get("requiredApprovals") ?? 0),
            requiredChecks: checks,