@buoy-gg/time-machine 7.0.21 → 7.0.23

package/src/components/preview/ItemDetailScreen.tsx

@@ -1,172 +0,0 @@
-/**
- * Item detail — one preview item's before/after, rendered with the two
- * familiar views (TREE / SPLIT, same as storage events).
- *
- * The render-layer viewers only handle 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.
- */
-import { useEffect, useMemo, useRef, useState } from "react";
-import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import {
-  DiffModeTabs,
-  buoyColors,
-  devToolsStorageKeys,
-  persistentStorage,
-} from "@buoy-gg/shared-ui";
-import { useToolHeader, useToolHost } from "@buoy-gg/core";
-import type { StateSnapshotPreviewItem } from "@buoy-gg/shared-ui";
-import {
-  ABSENT_VALUE,
-  ThemedSplitView,
-  TreeDiffViewer,
-  devToolsDefaultTheme,
-  toDiffable,
-} from "@buoy-gg/shared-ui/dataViewer";
-import { VERDICT_META } from "./verdictMeta";
-
-const DIFF_MODE_KEY = devToolsStorageKeys.timeMachine.diffViewerMode();
-const TABS = [
-  { key: "tree", label: "TREE VIEW" },
-  { key: "split", label: "SPLIT VIEW" },
-];
-
-export interface ItemDetailScreenProps {
-  sourceLabel: string;
-  item: StateSnapshotPreviewItem;
-  /** "old → new" side labels, e.g. "CURRENT STATE" / snapshot name. */
-  leftLabel: string;
-  rightLabel: string;
-  onBack: () => void;
-}
-
-export function ItemDetailScreen({
-  sourceLabel,
-  item,
-  leftLabel,
-  rightLabel,
-  onBack,
-}: ItemDetailScreenProps) {
-  // Persisted view preference — storage's load-guard/validate/optimistic
-  // pattern, default TREE (structured state reads better as a tree).
-  const [diffMode, setDiffMode] = useState<string>("tree");
-  const hasLoadedMode = useRef(false);
-  useEffect(() => {
-    if (hasLoadedMode.current) return;
-    hasLoadedMode.current = true;
-    void persistentStorage.getItem(DIFF_MODE_KEY).then((saved) => {
-      if (saved === "tree" || saved === "split") setDiffMode(saved);
-    });
-  }, []);
-  const changeMode = (mode: string) => {
-    setDiffMode(mode);
-    void persistentStorage.setItem(DIFF_MODE_KEY, mode).catch(() => {});
-  };
-
-  const meta = VERDICT_META[item.verdict];
-  const host = useToolHost();
-  const hosted = host.instanceId !== undefined;
-
-  // Hosted: the shared modal header shows this item's identity + back.
-  useToolHeader(
-    hosted
-      ? {
-          title: item.label,
-          subtitle: `${sourceLabel} · ${meta.label} · ${leftLabel} → ${rightLabel}`,
-          onBack,
-          searchable: false, // nothing searchable on a single item's diff
-        }
-      : null,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hosted, item.key, sourceLabel, leftLabel, rightLabel]
-  );
-
-  // Normalize ONCE per item; 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.container}>
-      {!hosted && (
-        <View style={styles.screenHeader}>
-          <TouchableOpacity onPress={onBack} hitSlop={HIT} testID="tm-item-back">
-            <Text style={styles.backText}>‹ Preview</Text>
-          </TouchableOpacity>
-          <View style={styles.titleBlock}>
-            <Text style={styles.title} numberOfLines={1}>
-              <Text style={{ color: meta.color }}>{meta.glyph} </Text>
-              {item.label}
-            </Text>
-            <Text style={styles.subtitle} numberOfLines={1}>
-              {sourceLabel} · {meta.label} · {leftLabel} → {rightLabel}
-            </Text>
-          </View>
-        </View>
-      )}
-
-      {item.reason && <Text style={styles.reason}>⚠ {item.reason}</Text>}
-
-      <View style={styles.tabs}>
-        <DiffModeTabs tabs={TABS} activeTab={diffMode} onTabChange={changeMode} />
-      </View>
-
-      {/* One page-level scroller; both viewers render inline at natural
-          height (scrollEnabled=false) — the storage matched-pair contract. */}
-      <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
-        {diffMode === "tree" ? (
-          <TreeDiffViewer
-            oldValue={oldValue}
-            newValue={newValue}
-            theme="dark"
-            showUnchanged={false}
-            scrollEnabled={false}
-          />
-        ) : (
-          <ThemedSplitView
-            oldValue={oldValue}
-            newValue={newValue}
-            differences={EMPTY}
-            theme={devToolsDefaultTheme}
-            scrollEnabled={false}
-          />
-        )}
-      </ScrollView>
-    </View>
-  );
-}
-
-const EMPTY: unknown[] = [];
-const HIT = { top: 10, bottom: 10, left: 10, right: 10 };
-
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  screenHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    gap: 10,
-  },
-  backText: { color: buoyColors.primary, fontSize: 14 },
-  titleBlock: { flex: 1, minWidth: 0 },
-  title: { color: buoyColors.text, fontSize: 13, fontWeight: "700" },
-  subtitle: { color: buoyColors.textMuted, fontSize: 10, marginTop: 2 },
-  reason: {
-    color: buoyColors.warning,
-    fontSize: 11,
-    paddingHorizontal: 12,
-    paddingBottom: 6,
-  },
-  tabs: { paddingHorizontal: 12, paddingBottom: 8 },
-  scroll: { flex: 1 },
-  scrollContent: { paddingHorizontal: 12, paddingBottom: 24 },
-});