gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { createSigningKey, getSigningKeys, removeSigningKey } from "~/fns/signing-keys";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { SelectField, TextAreaField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";

const KINDS = [
  { value: "ssh", label: "SSH key" },
  { value: "gpg", label: "GPG key" },
] as const;

export const Route = createFileRoute("/settings/signing-keys")({
  loader: () => getSigningKeys(),
  component: SigningKeysPage,
});

function SigningKeysPage() {
  const keys = Route.useLoaderData();
  const create = useAction(createSigningKey);
  const remove = useAction(removeSigningKey);
  return (
    <div className="space-y-6">
      <Panel title="New signing key">
        <form
          className="space-y-3 p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const element = event.currentTarget;
            const form = new FormData(element);
            const kind = form.get("kind") === "gpg" ? "gpg" : "ssh";
            const result = await create.run({
              data: { kind, title: String(form.get("title") ?? ""), publicKey: String(form.get("publicKey") ?? "") },
            });
            if (result) element.reset();
          }}