gitfor/platform

import { issueStateTone } from "~/ui/tones";
import { createFileRoute, Link } from "@tanstack/react-router";
import { getBranches } from "~/fns/browse";
import { createBranch, deleteBranch } from "~/fns/git-write";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { StatusDot } from "~/ui/StatusDot";
import { Button, buttonClass } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { TextLink } from "~/ui/TextLink";

export const Route = createFileRoute("/$owner/$repo/branches")({
  loader: ({ params }) => getBranches({ data: { owner: params.owner, repo: params.repo } }),
  component: BranchesPage,
});

function BranchesPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const create = useAction(createBranch);
  const remove = useAction(deleteBranch);

  return (
    <div className="space-y-4">
      {data.canWrite && (
        <Panel title="New branch">
          <form
            className="flex flex-wrap items-end gap-3 p-4"
            onSubmit={async (event) => {
              event.preventDefault();
              const element = event.currentTarget;
              const form = new FormData(element);
              const ok = await create.run({
                data: {
                  ...params,
                  name: String(form.get("name") ?? ""),
                  from: String(form.get("from") ?? data.defaultBranch),