gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { deleteSecret, listSecrets, setSecret } from "~/fns/settings";
import { useAction } from "~/hooks/use-action";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button } from "~/ui/Button";
import { TextAreaField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

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

function SecretsPage() {
  const secrets = Route.useLoaderData();
  const params = Route.useParams();
  const set = useAction(setSecret);
  const remove = useAction(deleteSecret);
  return (
    <>
      <Panel title="New secret">
        <form
          className="space-y-3 p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const element = event.currentTarget;
            const form = new FormData(element);
            const ok = await set.run({
              data: { ...params, name: String(form.get("name") ?? ""), value: String(form.get("value") ?? "") },
            });
            if (ok) element.reset();
          }}
        >
          <ErrorBanner message={set.error} />
          <TextField label="Name" name="name" required placeholder="DEPLOY_TOKEN" />
          <TextAreaField label="Value" name="value" rows={3} required />
          <p className="text-xs text-kumo-subtle">
            Encrypted with AES-GCM in D1. Reference it as {"${{ secrets.NAME }}"}; values are masked in logs and never