gitfor/platform

import { createFileRoute, Link } from "@tanstack/react-router";
import { deleteLabel, listLabels, saveLabel } from "~/fns/labels";
import { useAction } from "~/hooks/use-action";
import { useRepo } from "~/hooks/use-repo";
import { EmptyState } from "~/ui/EmptyState";
import { LabelChip } from "~/ui/LabelChip";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

const DEFAULT_COLOR = "f6821f";

export const Route = createFileRoute("/$owner/$repo/labels")({
  loader: ({ params }) => listLabels({ data: { owner: params.owner, repo: params.repo } }),
  component: LabelsPage,
});

function LabelsPage() {
  const labels = Route.useLoaderData();
  const params = Route.useParams();
  const header = useRepo();
  const canWrite = header.permission === "write" || header.permission === "admin";
  const save = useAction(saveLabel);
  const remove = useAction(deleteLabel);

  return (
    <div className="space-y-4">
      {canWrite && (
        <Panel title="New label">
          <form
            className="grid gap-3 p-4 md:grid-cols-[1fr_2fr_120px_auto] md:items-end"
            onSubmit={async (event) => {
              event.preventDefault();
              const element = event.currentTarget;
              const form = new FormData(element);
              const description = String(form.get("description") ?? "").trim();
              const ok = await save.run({
                data: {
                  ...params,