gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { forceUnlockLfs, getLfsSettings } from "~/fns/lfs";
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 { ProgressTrack } from "~/ui/ProgressTrack";

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

function UsageBar({ label, used, limit }: { label: string; used: number; limit: number }) {
  const percent = limit > 0 ? Math.min(100, (used / limit) * 100) : 0;
  return (
    <div className="space-y-1.5">
      <div className="flex justify-between text-xs">
        <span className="text-kumo-subtle">{label}</span>
        <span className="font-mono text-kumo-default">
          {formatBytes(used)} / {formatBytes(limit)}
        </span>
      </div>
      <ProgressTrack percent={percent} />
    </div>
  );
}

function LfsSettingsPage() {
  const settings = Route.useLoaderData();
  const params = Route.useParams();
  const unlock = useAction(forceUnlockLfs);

  return (
    <>
      <Panel title="Git LFS usage">
        <div className="space-y-4 p-4">