gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import {
  deleteEnvironment,
  deleteEnvironmentValue,
  getRepoActionsConfig,
  saveEnvironment,
  setEnvironmentValue,
} from "~/fns/action-config";
import { useAction } from "~/hooks/use-action";
import { ConfigValueList } from "~/components/ConfigValueList";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";

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

type Environment = Awaited<ReturnType<typeof getRepoActionsConfig>>["environments"][number];

function list(value: FormDataEntryValue | null): string[] {
  return String(value ?? "")
    .split(/[,\n]/)
    .map((item) => item.trim())
    .filter(Boolean);
}

function EnvironmentForm({ environment }: { environment: Environment | null }) {
  const params = Route.useParams();
  const save = useAction(saveEnvironment);
  return (
    <form
      className="space-y-3 p-4"
      onSubmit={async (event) => {
        event.preventDefault();
        const element = event.currentTarget;