src/features/reviews/save-status.tsx

Linked repository file from this build.

import { ElapsedTime } from "@/components/elapsed-time";
import { Save } from "lucide-react";
import { Button } from "@/components/ui/button";
import { saveStatusLabels, type SaveStatus } from "./save-status-label";

export function SaveStatusButton({
  saveStatus,
  lastSavedAt,
  onSave,
}: {
  saveStatus: SaveStatus;
  lastSavedAt: string | null;
  onSave(): void;
}) {
  const saving = saveStatus === "saving";
  const failed = saveStatus === "save_failed" || saveStatus === "load_failed";
  return (
    <div className="flex items-center gap-2">
      <span
        role="status"
        aria-live="polite"
        className="max-w-36 text-right text-xs text-muted-foreground"
      >
        {saving || failed || saveStatus === "unsaved" ? (
          saveStatusLabels[saveStatus]
        ) : lastSavedAt ? (
          <ElapsedTime at={lastSavedAt} label="Saved" />
        ) : (
          "Not saved yet"
        )}
      </span>
      <Button
        type="button"
        size="sm"
        variant={failed ? "destructive" : "default"}
        className="h-8"
        disabled={saving}
        onClick={onSave}
        aria-label={failed ? "Save failed. Retry save" : "Save review"}
      >
        <Save className="size-3.5" aria-hidden />
        {failed ? "Retry save" : saving ? "Saving…" : "Save"}
      </Button>
    </div>
  );
}