CheckpointTimeline

1"use client";
2 
3import type { ComponentProps, ReactNode } from "react";
4 
5import { EmptyState } from "@/components/empty-state/empty-state";
6import { Button } from "@/components/ui/button";
7import { cn } from "@/lib/utils";
8 
9export interface Checkpoint {
10  /** Stable id the restore action reports. */
11  id: string;
12  /** Human label, e.g. "Added billing page". */
13  label: string;
14  /** Display-ready timestamp, e.g. "2m ago". */
15  createdAt: string;
16  /** Short git sha, e.g. "f39ac2d". */
17  sha?: string;
18  /** Whether a database snapshot rides with this checkpoint. */
19  snapshot?: boolean;
20  /** Tenant Neon project id, e.g. "damp-forest-123456". */
21  projectId?: string;
22}
23 
24export type CheckpointTimelineProps = Omit<
25  ComponentProps<"div">,
26  "children"
27> & {
28  /** Newest first — the top row reads as "now". */
29  checkpoints: Checkpoint[];
30  /** Renders the restore action on every row. */
31  onRestore?: (id: string) => void;
32  /** The checkpoint currently restoring; locks every other action. */
33  restoringId?: string | null;
34  /** Override the built-in empty state. */
35  empty?: ReactNode;
36};
37 
38/* ─────────────────────────────────────────────────────────
39 * TIMELINE STORYBOARD
40 *
41 *  entrance  rows rise 8px one at a time, 60ms apart —
42 *            history introduces itself newest first
43 *  rest      one continuous hairline rail threads square
44 *            markers (the StatusBadge vocabulary); the
45 *            newest holds primary and wears a mono
46 *            "current" tag, the past stays muted; each row
47 *            speaks twice — label + timestamp, then one
48 *            quiet mono line: sha · ■ snapshot · project
49 *  engage    hovering or focusing a row wakes its restore
50 *            action — it slides out from behind the row
51 *            (8px, 200ms ease-out) as it fades in; the
52 *            space is always reserved, the row itself
53 *            never moves
54 *  restore   the acting row holds: its marker breathes
55 *            primary and the action shimmers "Restoring…";
56 *            the rest of history recedes to half voice
57 *            until the flight lands
58 *  empty     EmptyState holds the space — history hasn't
59 *            started, it isn't missing
60// … truncated