Diff Table

1"use client";
2
3import { useEffect, useState } from "react";
4import { Button } from "@/components/atoms/Button";
5
6/* ─────────────────────────────────────────────────────────
7 * DIFF TABLE
8 * The proposed edit plays once and rests on the completed
9 * diff. Each changed row is the control: click it to include
10 * or exclude that specific addition/removal before applying.
11 * ───────────────────────────────────────────────────────── */
12
13function useStage(steps: number[]) {
14  const [stage, setStage] = useState(0);
15  useEffect(() => {
16    if (stage >= steps.length) return;
17    const t = setTimeout(() => setStage((s) => s + 1), steps[stage]);
18    return () => clearTimeout(t);
19  }, [stage, steps]);
20  return stage;
21}
22
23const STAGE_DELAYS = [180, 260];
24
25const ROWS = [
26  { key: "rocky", id: "Rocky Road", dept: "Classic", email: "aurora-scoops", removed: true },
27  { key: "bubblegum", id: "Bubblegum", dept: "Retro", email: "kumo-creamery", removed: true },
28  { key: "mint", id: "Mint Chip", dept: "Classic", email: "maple-orbit", removed: false },
29];
30
31const DOT: Record<string, string> = {
32  Classic: "bg-accent",
33  Retro: "bg-ink-3",
34  Seasonal: "bg-orange",
35};
36
37function IncludedMark({ included, tone }: { included: boolean; tone: "red" | "green" }) {
38  return (
39    <span
40      aria-hidden
41      className={`flex size-4.5 shrink-0 items-center justify-center rounded-[5px] transition-[background-color,color,transform] duration-150 ${
42        included
43          ? tone === "red" ? "bg-red text-white" : "bg-green text-white"
44          : "bg-inset text-ink-3 shadow-hairline"
45      }`}
46      style={{ transform: included ? "scale(1)" : "scale(0.92)" }}
47    >
48      {included ? (
49        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
50      ) : null}
51    </span>
52  );
53}
54
55export default function DiffTable() {
56  const stage = useStage(STAGE_DELAYS);
57  // 0 plain · 1 removals · 2 completed diff
58  const tinted = stage >= 1;
59  const settled = stage >= 2;
60  const [accepted, setAccepted] = useState(false);
61  const [edits, setEdits] = useState<Record<string, boolean>>({ rocky: true, bubblegum: true, pistachio: true });
62
63  const removals = ["rocky", "bubblegum"].filter((key) => edits[key]).length;
64  const additions = edits.pistachio ? 1 : 0;
65  const showAdded = settled;
66
67  const toggleEdit = (key: string) => setEdits((current) => ({ ...current, [key]: !current[key] }));
68
69  return (
70    <div className="w-full max-w-95">
71      <div className="relative overflow-hidden rounded-card bg-surface shadow-card">
72        <div className="primitive-card-bar flex items-center justify-between border-b border-line">
73          <span className="text-[12.5px] font-medium text-ink">Proposed menu cleanup</span>
74          {settled && !accepted && <span className="text-[11px] text-ink-3">Click changed rows to toggle</span>}
75        </div>
76
77        <table className="w-full table-fixed border-collapse text-left">
78          <colgroup>
79            <col className="w-[34%]" />
80            <col className="w-[30%]" />
81            <col className="w-[36%]" />
82          </colgroup>
83          <thead>
84            <tr className="border-b border-line">
85              {["Flavor", "Category", "Supplier"].map((h) => (
86                <th key={h} className="primitive-table-cell text-[12px] font-medium text-ink-3">
87                  {h}
88                </th>
89              ))}
90            </tr>
91          </thead>
92          <tbody>
93            {ROWS.map((row) => {
94              const out = row.removed && tinted && edits[row.key];
95              const interactive = row.removed && settled && !accepted;
96              return (
97                <tr
98                  key={row.key}
99                  tabIndex={interactive ? 0 : undefined}
100                  aria-selected={row.removed ? edits[row.key] : undefined}
101                  onClick={interactive ? () => toggleEdit(row.key) : undefined}
102                  onKeyDown={interactive ? (event) => {
103                    if (event.key === "Enter" || event.key === " ") {
104                      event.preventDefault();
105                      toggleEdit(row.key);
106                    }
107                  } : undefined}
108                  className={`border-b border-line transition-[background-color,filter,opacity] duration-150 last:border-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent ${
109                    interactive ? "cursor-pointer hover:brightness-[0.985]" : ""
110                  }`}
111                  style={{ background: out ? "var(--red-tint)" : undefined }}
112                >
113                  <td
114                    className="primitive-table-cell text-[13px] font-medium tabular-nums transition-colors duration-200"
115                    style={{ color: out ? "var(--red)" : "var(--ink)" }}
116                  >
117                    {row.id}
118                  </td>
119                  <td className="primitive-table-cell">
120                    <span
121                      className="inline-flex h-5.5 items-center gap-1.5 rounded-full bg-inset px-2 text-[11.5px] font-medium shadow-hairline transition-opacity duration-200"
122                      style={{ opacity: out ? 0.55 : 1 }}
123                    >
124                      <span className={`size-1.5 rounded-full ${DOT[row.dept]}`} />
125                      <span className="text-ink-2">{row.dept}</span>
126                    </span>
127                  </td>
128                  <td
129                    className="primitive-table-cell text-[12.5px] whitespace-nowrap transition-colors duration-200"
130                    style={{
131                      color: out ? "var(--red)" : "var(--ink-2)",
132                      textDecorationLine: out ? "line-through" : "none",
133                      textDecorationColor: "color-mix(in srgb, var(--red) 50%, transparent)",
134                    }}
135                  >
136                    <span className="flex items-center justify-between gap-2">
137                      <span className="min-w-0 truncate">{row.email}</span>
138                      {row.removed && settled && <IncludedMark included={edits[row.key]} tone="red" />}
139                    </span>
140                  </td>
141                </tr>
142              );
143            })}
144            {/* added row */}
145            <tr>
146              <td colSpan={3} className="p-0">
147                <div
148                  className="grid transition-[grid-template-rows,opacity] duration-200"
149                  style={{
150                    gridTemplateRows: showAdded ? "1fr" : "0fr",
151                    opacity: showAdded ? 1 : 0,
152                    transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
153                  }}
154                >
155                  <div className="overflow-hidden">
156                    <div
157                      role="checkbox"
158                      tabIndex={accepted ? -1 : 0}
159                      aria-checked={edits.pistachio}
160                      aria-label="Include adding Pistachio"
161                      onClick={accepted ? undefined : () => toggleEdit("pistachio")}
162                      onKeyDown={accepted ? undefined : (event) => {
163                        if (event.key === "Enter" || event.key === " ") {
164                          event.preventDefault();
165                          toggleEdit("pistachio");
166                        }
167                      }}
168                      className={`grid grid-cols-[34%_30%_36%] items-center border-t border-line transition-[background-color,filter,opacity] duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent ${
169                        accepted ? "" : "cursor-pointer hover:brightness-[0.985]"
170                      }`}
171                      style={{ background: edits.pistachio ? "var(--green-tint)" : undefined }}
172                    >
173                      <span className="primitive-table-cell text-[13px] font-medium tabular-nums transition-colors duration-200" style={{ color: edits.pistachio ? "var(--green)" : "var(--ink-3)" }}>
174                        Pistachio
175                      </span>
176                      <span className="primitive-table-cell">
177                        <span className="inline-flex h-5.5 items-center gap-1.5 rounded-full bg-surface px-2 text-[11.5px] font-medium shadow-hairline">
178                          <span className="size-1.5 rounded-full bg-green" />
179                          <span className="text-ink-2">Seasonal</span>
180                        </span>
181                      </span>
182                      <span className="primitive-table-cell text-[13px] transition-colors duration-200" style={{ color: edits.pistachio ? "var(--green)" : "var(--ink-3)" }}>
183                        <span className="flex items-center justify-between gap-2">
184                          <span className="min-w-0 truncate">maple-orbit</span>
185                          <IncludedMark included={edits.pistachio} tone="green" />
186                        </span>
187                      </span>
188                    </div>
189                  </div>
190                </div>
191              </td>
192            </tr>
193          </tbody>
194        </table>
195
196        {/* footer — the summary follows the row-level selection */}
197        {settled && (
198          <div
199            className="primitive-card-footer flex min-h-11 items-center justify-between border-t border-line"
200            style={{ animation: "fade-up 180ms cubic-bezier(0.23,1,0.32,1) both" }}
201          >
202            {accepted ? (
203              <span
204                className="inline-flex items-center gap-1.5 rounded-full bg-green-tint py-1 pr-2.5 pl-1 text-[12.5px] font-medium text-green"
205                style={{ animation: "pop-in 180ms cubic-bezier(0.23,1,0.32,1) both" }}
206              >
207                <span className="flex size-4.5 items-center justify-center rounded-full bg-green text-white">
208                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
209                </span>
210                {removals + additions} {removals + additions === 1 ? "edit" : "edits"} applied
211              </span>
212            ) : (
213              <>
214                <span className="text-[11.5px] tabular-nums text-ink-3">
215                  {removals} {removals === 1 ? "removal" : "removals"} · {additions} {additions === 1 ? "addition" : "additions"}
216                </span>
217                <span className="flex items-center gap-1.5">
218                  <Button
219                    variant="accent"
220                    size="sm"
221                    disabled={removals + additions === 0}
222                    onClick={() => {
223                      setAccepted(true);
224                    }}
225                    className="text-[12px]"
226                  >
227                    Apply {removals + additions} {removals + additions === 1 ? "change" : "changes"}
228                  </Button>
229                </span>
230              </>
231            )}
232          </div>
233        )}
234      </div>
235    </div>
236  );
237}
238