@buoy-gg/storage 7.0.30 → 7.0.31

package/lib/module/storage/components/GameUIStorageBrowser.js

@@ -1,18 +1,19 @@
 "use strict";
 
-import { useMemo, useCallback, useState, useEffect } from "react";
+import { useMemo, useCallback, useState, useEffect, useRef } from "react";
 import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Alert } from "react-native";
 import { absoluteFill, useLimit, TIER_LIMITS } from "@buoy-gg/shared-ui";
 import { Database, Zap, ProBadge, ProUpgradeModal } from "@buoy-gg/shared-ui";
 import { isDevToolsStorageKey } from "@buoy-gg/shared-ui";
-import { StorageKeySection } from "./StorageKeySection";
-import { StorageKeyEditorScreen } from "./StorageKeyEditorScreen";
+import { StorageKeySection, storageRowId } from "./StorageKeySection";
+import { StorageKeyDetailScreen } from "./StorageKeyDetailScreen";
 import { StorageFilterCards } from "./StorageFilterCards";
 import { useAsyncStorageKeys } from "../hooks/useAsyncStorageKeys";
 import { addListener } from "../utils/AsyncStorageListener";
 import { useMultiMMKVKeys } from "../hooks/useMMKVKeys";
 import { useSecureStoreKeys } from "../hooks/useSecureStoreKeys";
 import { useMMKVInstances } from "../hooks/useMMKVInstances";
+import { StorageSaveNotice } from "./StorageSaveNotice";
 import { StorageActionButtons } from "./StorageActionButtons";
 import { SelectionActionBar } from "./SelectionActionBar";
 // Pure JS (no react-native-mmkv dependency) — works with any registered
@@ -75,7 +76,10 @@ export function GameUIStorageBrowser({
   onTogglePin,
   storageTypeFilter,
   onStorageTypeFilterChange,
-  applySafeAreaInset
+  applySafeAreaInset,
+  detailKey = null,
+  onOpenKey,
+  onCloseDetail
 }) {
   const isPro = useIsPro();
   const keyLimit = useLimit("storage.keys");
@@ -100,16 +104,38 @@ export function GameUIStorageBrowser({
   const activeStorageType = isStorageTypeControlled ? storageTypeFilter : internalStorageType;
   const setActiveStorageType = isStorageTypeControlled ? onStorageTypeFilterChange : setInternalStorageType;
   const [selectedMMKVInstance, setSelectedMMKVInstance] = useState(null);
+  const scrollRef = useRef(null);
+  const scrollOffsetRef = useRef(0);
+  const rowNodesRef = useRef(new Map());
+  const handleRowRef = useCallback((id, node) => {
+    if (node) rowNodesRef.current.set(id, node);else rowNodesRef.current.delete(id);
+  }, []);
 
   /**
-   * The key the full-screen editor is open on, if any.
+   * Shown after every successful write, with the same sentence every time.
+   *
+   * An earlier version looked up which live store owned the key and offered to
+   * make that store re-read it. That required knowing what is linked to what,
+   * and every route to that knowledge is a guess — key names collide across
+   * backends, only zustand stores register at all, and a store can register
+   * after the lookup ran. A message that is right most of the time is the
+   * problem this tool has, not the fix for it.
+   *
+   * There is also no general mechanism to find: the app owns its cache, and
+   * only the app can invalidate it. So the tool promises the one thing that is
+   * true for every key, every backend and every persistence library — this is
+   * what loads next launch — and "make it live now" lives in the state tools,
+   * where the store you mean is the one you are looking at.
+   */
+  /**
+   * Bumped on every save rather than flipped to `true`.
    *
-   * Held here rather than in the row because the editor covers the whole
-   * browser, and because the write it eventually performs is `handleSaveValue`
-   * — which needs the MMKV instance registry and the refresh fan-out that live
-   * at this level.
+   * The toast unmounts itself when it fades, and a boolean already `true` would
+   * not change on the next save — so a second edit would show nothing. The
+   * counter is the toast's `key`, so each save mounts a fresh one and the
+   * animation restarts from the beginning.
    */
-  const [editingKey, setEditingKey] = useState(null);
+  const [saveToastId, setSaveToastId] = useState(0);
 
   // Selection mode state
   const [isSelectMode, setIsSelectMode] = useState(false);
@@ -167,6 +193,22 @@ export function GameUIStorageBrowser({
     return [...asyncStorageKeys, ...mmkvStorageKeys, ...secureStorageKeys];
   }, [asyncStorageKeys, mmkvStorageKeys, secureStorageKeys]);
 
+  /**
+   * The CURRENT snapshot of the key the detail screen is open on. `detailKey`
+   * is only an identity — resolving it fresh each pass is what makes the
+   * detail screen live: the app writes, the snapshot refreshes, the screen
+   * follows. Falls back to the captured info because the backend hooks
+   * transiently EMPTY their lists mid-refresh — treating "missing from this
+   * render's list" as "deleted" closed the screen the moment it opened, so
+   * absence here is never acted on (deletion closes explicitly, from the
+   * delete flow itself).
+   */
+  const detailInfo = useMemo(() => {
+    if (!detailKey) return null;
+    const id = storageRowId(detailKey);
+    return allStorageKeys.find(k => storageRowId(k) === id) ?? detailKey;
+  }, [detailKey, allStorageKeys]);
+
   // Determine loading and error states
   const isLoading = isLoadingAsync || isLoadingMMKV || isLoadingSecure;
   const error = asyncError || mmkvError || secureError;
@@ -240,6 +282,7 @@ export function GameUIStorageBrowser({
     }
     await setStorageValue(storageKey, raw, mmkvInstances);
     refresh();
+    setSaveToastId(id => id + 1);
   }, [isPro, mmkvInstances, refresh]);
 
   /**
@@ -266,7 +309,7 @@ export function GameUIStorageBrowser({
    * Pro is checked here rather than on the button because it's an upsell, not
    * a capability: the row shows the action and explains the wall on press.
    */
-  const handleDeleteKey = useCallback(storageKey => {
+  const handleDeleteKey = useCallback((storageKey, onDeleted) => {
     if (!isPro) {
       setShowUpgradeModal(true);
       return;
@@ -284,6 +327,9 @@ export function GameUIStorageBrowser({
             instance: inst.instance
           })));
           refresh();
+          // Only after the delete actually landed — a cancelled alert
+          // or a failed delete leaves the caller's screen alone.
+          onDeleted?.();
         } catch (error) {
           Alert.alert("Error", `Failed to delete key: ${error}`);
         }
@@ -607,6 +653,31 @@ export function GameUIStorageBrowser({
   const healthStatus = healthPercentage >= 90 ? "OPTIMAL" : healthPercentage >= 70 ? "WARNING" : "CRITICAL";
   const healthColor = healthPercentage >= 90 ? gameUIColors.success : healthPercentage >= 70 ? gameUIColors.warning : gameUIColors.error;
 
+  // The detail screen REPLACES the list as the modal's whole body — the host
+  // modal's header carries back + the key's name, the React Query
+  // interaction (and the Zustand tool's). All hooks above have run; this
+  // return only swaps what's painted.
+  if (detailInfo) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.root,
+      children: /*#__PURE__*/_jsx(StorageKeyDetailScreen, {
+        storageKey: detailInfo,
+        editBlockedReason: editBlockedFor(detailInfo),
+        eventCount: eventCountByKey?.[detailInfo.key],
+        onSave: raw => handleSaveValue(detailInfo, raw),
+        onViewHistory: onViewHistory ? () => onViewHistory(detailInfo.key) : undefined,
+        onDeleteKey: k => handleDeleteKey(k, () => onCloseDetail?.()),
+        onHideKey: k => {
+          handleHideKeys([k]);
+          onCloseDetail?.();
+        },
+        isPinned: pinnedKeys?.has(detailInfo.key) ?? false,
+        onTogglePin: onTogglePin,
+        applySafeAreaInset: applySafeAreaInset
+      })
+    });
+  }
+
   // Loading state
   if (isLoading && allStorageKeys.length === 0) {
     return /*#__PURE__*/_jsxs(View, {
@@ -808,11 +879,18 @@ export function GameUIStorageBrowser({
   });
   return /*#__PURE__*/_jsxs(View, {
     style: styles.root,
-    children: [/*#__PURE__*/_jsxs(ScrollView
+    children: [saveToastId > 0 ? /*#__PURE__*/_jsx(StorageSaveNotice, {
+      onDone: () => setSaveToastId(0)
+    }, saveToastId) : null, /*#__PURE__*/_jsxs(ScrollView
     // Named because `by.type("RCTScrollView")` doesn't match on Fabric
     // (renamed class) — automation scrolls below-the-fold rows by this id.
     , {
       testID: "buoy-storage-scroll",
+      ref: scrollRef,
+      onScroll: e => {
+        scrollOffsetRef.current = e.nativeEvent.contentOffset.y;
+      },
+      scrollEventThrottle: 32,
       style: styles.scrollContainer,
       contentContainerStyle: styles.container,
       showsVerticalScrollIndicator: false,
@@ -860,26 +938,19 @@ export function GameUIStorageBrowser({
           eventCountByKey: eventCountByKey,
           onViewHistory: onViewHistory,
           onHideKey: key => handleHideKeys([key]),
-          onEditKey: setEditingKey,
           onToggleKey: handleToggleKey,
           onDeleteKey: handleDeleteKey,
           editBlockedFor: editBlockedFor,
           pinnedKeys: pinnedKeys,
-          onTogglePin: onTogglePin
+          onTogglePin: onTogglePin,
+          onRowRef: handleRowRef,
+          onOpenKey: onOpenKey
         }), lockedBannerNode]
       }) : emptyStateNode, /*#__PURE__*/_jsx(Text, {
         style: styles.techFooter,
         children: "ASYNC STORAGE | MMKV | SECURE STORAGE BACKENDS"
       }), upgradeModalNode]
-    }), editingKey ? /*#__PURE__*/_jsx(View, {
-      style: styles.editorOverlay,
-      children: /*#__PURE__*/_jsx(StorageKeyEditorScreen, {
-        storageKey: editingKey,
-        onSave: raw => handleSaveValue(editingKey, raw),
-        onClose: () => setEditingKey(null),
-        applySafeAreaInset: applySafeAreaInset
-      })
-    }) : null]
+    })]
   });
 }
 const styles = StyleSheet.create({

package/lib/module/storage/components/StorageBrowserMode.js

@@ -25,7 +25,10 @@ export function StorageBrowserMode({
   onTogglePin,
   applySafeAreaInset,
   storageTypeFilter,
-  onStorageTypeFilterChange
+  onStorageTypeFilterChange,
+  detailKey,
+  onOpenKey,
+  onCloseDetail
 }) {
   return /*#__PURE__*/_jsx(GameUIStorageBrowser, {
     requiredStorageKeys: requiredStorageKeys,
@@ -46,6 +49,9 @@ export function StorageBrowserMode({
     onTogglePin: onTogglePin,
     applySafeAreaInset: applySafeAreaInset,
     storageTypeFilter: storageTypeFilter,
-    onStorageTypeFilterChange: onStorageTypeFilterChange
+    onStorageTypeFilterChange: onStorageTypeFilterChange,
+    detailKey: detailKey,
+    onOpenKey: onOpenKey,
+    onCloseDetail: onCloseDetail
   });
 }