gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { deleteCache, listCaches } from "~/fns/deployments";
import { useAction } from "~/hooks/use-action";
import { EmptyState } from "~/ui/EmptyState";
import { formatBytes } from "~/lib/format";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { TextLink } from "~/ui/TextLink";
import { Heading } from "~/ui/Heading";
import { ProgressTrack } from "~/ui/ProgressTrack";

const PERCENT = 100;

export const Route = createFileRoute("/$owner/$repo/actions/caches")({
  loader: ({ params }) => listCaches({ data: { owner: params.owner, repo: params.repo } }),
  component: CachesPage,
});

function CachesPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const remove = useAction(deleteCache);
  const used = Math.min(PERCENT, Math.round((data.usedBytes / data.quotaBytes) * PERCENT));
  return (
    <div className="space-y-5">
      <div className="flex items-center gap-3">
        <TextLink to="/$owner/$repo/actions" params={params} search={{}} className="text-sm">
          ← Actions
        </TextLink>
        <Heading>Caches</Heading>
      </div>
      <Panel>
        <div className="space-y-2 p-4">
          <div className="flex justify-between text-sm text-kumo-default">
            <span>
              {formatBytes(data.usedBytes)} of {formatBytes(data.quotaBytes)} used · {data.count} entries
            </span>
            <span className="text-kumo-subtle">{used}%</span>