gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { listCollaborators, setCollaborator } from "~/fns/repos";
import { useAction } from "~/hooks/use-action";
import { Avatar } from "~/ui/Avatar";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

const PERMISSIONS = [
  { value: "read", label: "Read" },
  { value: "write", label: "Write" },
  { value: "admin", label: "Admin" },
] as const;

function toPermission(value: FormDataEntryValue | null) {
  return PERMISSIONS.find((permission) => permission.value === value)?.value ?? "read";
}

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

function CollaboratorsPage() {
  const collaborators = Route.useLoaderData();
  const params = Route.useParams();
  const set = useAction(setCollaborator);
  return (
    <>
      <Panel title="Add collaborator">
        <form
          className="flex flex-wrap items-end gap-3 p-4"
          onSubmit={(event) => {
            event.preventDefault();
            const form = new FormData(event.currentTarget);
            set.run({
              data: {
                ...params,