@buoy-gg/time-machine 7.0.22 → 7.0.23

package/src/components/list/UndoDeleteBar.tsx

@@ -0,0 +1,76 @@
+/**
+ * The way back from a swipe-delete.
+ *
+ * Swipe-then-tap is deliberate, which is why there's no confirmation dialog —
+ * but deliberate and recoverable are different properties, and a restore
+ * point can stand for state that took ten minutes and a cooperative backend
+ * to build. The record is held in memory until this bar expires.
+ */
+import { useEffect } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { tm } from "../../ui/tmTheme";
+
+/** Long enough to notice and react, short enough not to linger. */
+const WINDOW_MS = 8000;
+
+export function UndoDeleteBar({
+  name,
+  at,
+  onUndo,
+  onExpire,
+}: {
+  name: string;
+  /** Restarts the countdown when a second delete replaces the first. */
+  at: number;
+  onUndo: () => void;
+  onExpire: () => void;
+}) {
+  useEffect(() => {
+    const timer = setTimeout(onExpire, WINDOW_MS);
+    return () => clearTimeout(timer);
+    // `at` keyed rather than `onExpire`: a new delete must restart the clock.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [at]);
+
+  return (
+    <View style={styles.bar}>
+      <Text style={styles.text} numberOfLines={1}>
+        Deleted “{name}”
+      </Text>
+      <TouchableOpacity
+        onPress={onUndo}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        accessibilityRole="button"
+        testID="time-machine-undo-delete"
+      >
+        <Text style={styles.undo}>Undo</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    marginHorizontal: tm.gutter,
+    marginTop: 12,
+    minHeight: 46,
+    paddingHorizontal: tm.textInset,
+    backgroundColor: tm.color.group,
+    borderRadius: tm.radius.group,
+  },
+  text: {
+    flex: 1,
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.control,
+    letterSpacing: tm.tracking.control,
+  },
+  undo: {
+    color: tm.color.accent,
+    fontSize: tm.font.control,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.control,
+  },
+});

package/src/components/list/WipeAllRow.tsx

@@ -0,0 +1,42 @@
+/**
+ * "Wipe All App State…" — the destructive utility, deliberately last, alone
+ * in its own card and with no icon competing for attention.
+ */
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+import { tm } from "../../ui/tmTheme";
+
+export function WipeAllRow({
+  disabled,
+  onWipe,
+}: {
+  disabled: boolean;
+  onWipe: () => void;
+}) {
+  return (
+    <TouchableOpacity
+      style={[styles.row, disabled ? styles.disabled : null]}
+      onPress={onWipe}
+      disabled={disabled}
+      accessibilityRole="button"
+      testID="time-machine-wipe-all"
+    >
+      <Text style={styles.label}>Wipe All App State…</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    minHeight: tm.rowMinHeight,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+  label: {
+    color: tm.color.danger,
+    fontSize: tm.font.row,
+    letterSpacing: tm.tracking.row,
+  },
+});

package/src/components/preview/ItemDiffPanel.tsx

@@ -0,0 +1,77 @@
+/**
+ * One preview item's before/after, rendered INLINE under its row rather than
+ * on a screen of its own — "what changed in this key" is a glance question,
+ * and losing the list to answer it costs you the place you were reading.
+ *
+ * Split view only, with no view switcher. Side-by-side is the shape that
+ * answers the question here ("what is it now, what will it become"), and
+ * inside a list row the segmented control cost more vertical space than the
+ * diff it was switching.
+ *
+ * The render-layer viewer only handles plain JSON faithfully, so both sides
+ * pass through toDiffable (Dates→ISO, Maps→objects, BigInt→"1n", cycles→
+ * "[Circular]") and the pair is memoized ONCE per item — the storage tool's
+ * fix for the fresh-identity-every-render trap that redux/zustand still have.
+ *
+ * No scroller of its own: this sits inside the preview's FlatList, so the
+ * viewer renders at natural height with `scrollEnabled={false}` (the storage
+ * matched-pair contract).
+ */
+import { useMemo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import type { StateSnapshotPreviewItem } from "@buoy-gg/shared-ui";
+import {
+  ABSENT_VALUE,
+  ThemedSplitView,
+  devToolsDefaultTheme,
+  toDiffable,
+} from "@buoy-gg/shared-ui/dataViewer";
+import { tm } from "../../ui/tmTheme";
+
+const EMPTY: unknown[] = [];
+
+export function ItemDiffPanel({ item }: { item: StateSnapshotPreviewItem }) {
+  // ABSENT_VALUE keeps added/removed reading as pure additions/removals
+  // instead of diffs against the literal "null".
+  const { oldValue, newValue } = useMemo(
+    () => ({
+      oldValue:
+        item.verdict === "added" ? ABSENT_VALUE : toDiffable(item.oldValue),
+      newValue:
+        item.verdict === "removed" ? ABSENT_VALUE : toDiffable(item.newValue),
+    }),
+    [item]
+  );
+
+  return (
+    <View style={styles.panel}>
+      {item.reason ? <Text style={styles.reason}>⚠ {item.reason}</Text> : null}
+      <ThemedSplitView
+        oldValue={oldValue}
+        newValue={newValue}
+        differences={EMPTY}
+        theme={devToolsDefaultTheme}
+        scrollEnabled={false}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Same fill as the rows above it: this is part of the card, not a thing
+  // floating under it.
+  panel: {
+    // Only a token indent: the viewer lays values out at their natural width
+    // and a 51pt inset (matching the checkbox column) clipped long numbers.
+    paddingLeft: 16,
+    paddingRight: 12,
+    paddingTop: 10,
+    paddingBottom: 14,
+    gap: 10,
+    backgroundColor: tm.color.group,
+  },
+  reason: {
+    color: tm.color.warning,
+    fontSize: tm.font.footnote,
+  },
+});

package/src/components/preview/PreviewFlow.tsx

@@ -0,0 +1,70 @@
+/**
+ * The preview screen, wired to the store — the restore leg (baseline
+ * confirmation, the route prompt, landing back on the list) lives here so
+ * RestorePreviewScreen stays presentation.
+ *
+ * Kept apart from the restore-point list so each screen mounts and unmounts
+ * as a whole tree — the router in ../TimeMachineBody picks one, never swaps
+ * branches inside a live tree. (Item diffs are NOT a screen: they expand
+ * inline inside the preview's list.)
+ */
+import { timeMachineStore } from "../../store/timeMachineStore";
+import type {
+  PreviewSideRef,
+  PreviewState,
+} from "../../store/timeMachineStore";
+import type { SnapshotMeta } from "../../store/snapshotVault";
+import { confirmDestructive } from "../confirm";
+import { RestorePreviewScreen } from "./RestorePreviewScreen";
+
+function snapshotFor(
+  ref: PreviewSideRef,
+  snapshots: SnapshotMeta[]
+): SnapshotMeta | undefined {
+  return ref === "current"
+    ? undefined
+    : snapshots.find((s) => s.id === ref.snapshotId);
+}
+
+export function PreviewScreen({
+  preview,
+  snapshots,
+  busy,
+  onClose,
+}: {
+  preview: PreviewState;
+  snapshots: SnapshotMeta[];
+  busy: boolean;
+  onClose: () => void;
+}) {
+  const rightMeta = snapshotFor(preview.right, snapshots);
+
+  const restore = (mode: "live" | "reload", excludeKeys?: string[]) => {
+    if (!rightMeta || busy) return;
+    if (rightMeta.baseline) {
+      confirmDestructive(
+        "Restore fresh install?",
+        "This wipes all app storage and reloads the app.",
+        "Wipe & reload",
+        () => void timeMachineStore.restore(rightMeta.id, "reload")
+      );
+      return;
+    }
+    // Land back on the list, where the outcome card reports the results —
+    // the preview's diff is stale the moment restore runs. Whether the route
+    // comes back is the restore point's own setting, toggled on its row.
+    void timeMachineStore
+      .restore(rightMeta.id, mode, excludeKeys)
+      .then(onClose);
+  };
+
+  return (
+    <RestorePreviewScreen
+      preview={preview}
+      snapshots={snapshots}
+      busy={busy}
+      onBack={onClose}
+      onRestore={restore}
+    />
+  );
+}

package/src/components/preview/RestorePointNameRow.tsx

@@ -0,0 +1,80 @@
+/**
+ * The restore point's name, editable in place.
+ *
+ * Renaming lives on the preview rather than behind a swipe on the list: the
+ * list is for picking one, and you rarely know a name is wrong until you're
+ * looking at what the point actually contains.
+ *
+ * Commits on blur as well as on return — tapping away from a field you have
+ * just typed into should keep the typing. Finder and iOS both treat leaving
+ * as accepting, and silently discarding an edit is the one outcome nobody
+ * wants.
+ */
+import { useEffect, useState } from "react";
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import { tm } from "../../ui/tmTheme";
+
+export function RestorePointNameRow({
+  name,
+  onRename,
+}: {
+  name: string;
+  onRename: (name: string) => void;
+}) {
+  const [draft, setDraft] = useState(name);
+
+  // A rename from anywhere else (MCP, the desktop) should show up here.
+  useEffect(() => setDraft(name), [name]);
+
+  const commit = () => {
+    const trimmed = draft.trim();
+    if (!trimmed) {
+      setDraft(name); // an empty name would make the row unidentifiable
+      return;
+    }
+    if (trimmed !== name) onRename(trimmed);
+  };
+
+  return (
+    <View style={styles.row}>
+      <Text style={styles.label}>Name</Text>
+      <TextInput
+        style={styles.input}
+        value={draft}
+        onChangeText={setDraft}
+        onSubmitEditing={commit}
+        onBlur={commit}
+        returnKeyType="done"
+        selectTextOnFocus
+        accessibilityLabel="Restore point name"
+        testID="tm-preview-name"
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+    minHeight: tm.rowMinHeight,
+    paddingHorizontal: tm.textInset,
+  },
+  label: {
+    color: tm.color.labelSecondary,
+    fontSize: tm.font.row,
+    letterSpacing: tm.tracking.row,
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    color: tm.color.label,
+    fontSize: tm.font.row,
+    fontWeight: "600",
+    letterSpacing: tm.tracking.row,
+    textAlign: "right",
+    padding: 0,
+    backgroundColor: "transparent",
+  },
+});