@buoy-gg/storage 2.1.6 → 2.1.8

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { macOSColors, CompactRow, TypeBadge, HardDrive, Square, CheckSquare } from "@buoy-gg/shared-ui";
+import { macOSColors, CompactRow, TypeBadge, HardDrive, Square, CheckSquare, ExpandedInfoRow, PillBadge } from "@buoy-gg/shared-ui";
 import { getStorageTypeLabel } from "../utils/storageQueryUtils";
 import { getValueTypeLabel } from "../utils/valueType";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
@@ -76,7 +76,9 @@ export function StorageKeyRow({
   onPress,
   isSelectMode = false,
   isSelected = false,
-  onSelectionChange
+  onSelectionChange,
+  eventCount,
+  onViewHistory
 }) {
   const config = getStatusConfig(storageKey.status);
   const hasValue = storageKey.value !== undefined && storageKey.value !== null;
@@ -103,42 +105,40 @@ export function StorageKeyRow({
   // Create expanded content for value and storage details
   const expandedContent = /*#__PURE__*/_jsxs(View, {
     style: styles.expandedContainer,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.expandedRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.expandedLabel,
-        children: "Storage:"
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.storageBadge, {
-          backgroundColor: getStorageTypeColor(storageKey.storageType) + "12",
-          borderColor: getStorageTypeColor(storageKey.storageType) + "25"
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.storageBadgeText, {
-            color: getStorageTypeColor(storageKey.storageType)
-          }],
-          children: storageTypeLabel
-        })
-      })]
-    }), storageKey.storageType === 'mmkv' && storageKey.instanceId && /*#__PURE__*/_jsxs(View, {
-      style: styles.expandedRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.expandedLabel,
-        children: "Instance:"
-      }), /*#__PURE__*/_jsxs(View, {
-        style: [styles.instanceBadge, {
-          backgroundColor: getInstanceColor(storageKey.instanceId) + '20',
-          borderColor: getInstanceColor(storageKey.instanceId) + '40'
-        }],
-        children: [/*#__PURE__*/_jsx(HardDrive, {
+    children: [/*#__PURE__*/_jsx(ExpandedInfoRow, {
+      label: "Storage",
+      children: /*#__PURE__*/_jsx(PillBadge, {
+        color: getStorageTypeColor(storageKey.storageType),
+        children: storageTypeLabel
+      })
+    }), storageKey.storageType === 'mmkv' && storageKey.instanceId && /*#__PURE__*/_jsx(ExpandedInfoRow, {
+      label: "Instance",
+      children: /*#__PURE__*/_jsx(PillBadge, {
+        color: getInstanceColor(storageKey.instanceId),
+        icon: /*#__PURE__*/_jsx(HardDrive, {
           size: 9,
           color: getInstanceColor(storageKey.instanceId)
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.instanceText, {
-            color: getInstanceColor(storageKey.instanceId)
-          }],
-          children: storageKey.instanceId
-        })]
+        }),
+        children: storageKey.instanceId
+      })
+    }), eventCount != null && eventCount > 0 && /*#__PURE__*/_jsxs(ExpandedInfoRow, {
+      label: "Updates",
+      children: [/*#__PURE__*/_jsx(PillBadge, {
+        color: macOSColors.semantic.warning,
+        children: String(eventCount)
+      }), eventCount > 1 && onViewHistory && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onViewHistory,
+        style: styles.viewHistoryButton,
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.viewHistoryText,
+          children: "view history \u2192"
+        })
       })]
     }), isJsonData && typeof parsedValue === "object" ? /*#__PURE__*/_jsx(View, {
       style: styles.dataViewerContainer,
@@ -195,20 +195,6 @@ export function StorageKeyRow({
     })]
   });
 
-  // Create storage type badge
-  const storageBadge = /*#__PURE__*/_jsx(View, {
-    style: [styles.storageBadge, {
-      backgroundColor: getStorageTypeColor(storageKey.storageType) + "12",
-      borderColor: getStorageTypeColor(storageKey.storageType) + "25"
-    }],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.storageBadgeText, {
-        color: getStorageTypeColor(storageKey.storageType)
-      }],
-      children: storageTypeLabel
-    })
-  });
-
   // Handle checkbox press in select mode
   const handleCheckboxPress = () => {
     onSelectionChange?.(storageKey, !isSelected);
@@ -234,9 +220,9 @@ export function StorageKeyRow({
   }) : null;
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.rowContainer, isSelected && styles.rowContainerSelected],
-    children: [selectionCheckbox, /*#__PURE__*/_jsx(View, {
+    children: [selectionCheckbox, /*#__PURE__*/_jsxs(View, {
       style: styles.compactRowWrapper,
-      children: /*#__PURE__*/_jsx(CompactRow, {
+      children: [/*#__PURE__*/_jsx(CompactRow, {
         statusDotColor: config.color,
         statusLabel: config.label,
         statusSublabel: config.sublabel,
@@ -245,10 +231,25 @@ export function StorageKeyRow({
         expandedContent: expandedContent,
         isExpanded: isExpanded,
         expandedGlowColor: config.color,
-        customBadge: storageBadge,
+        customBadge: /*#__PURE__*/_jsx(PillBadge, {
+          color: getStorageTypeColor(storageKey.storageType),
+          children: storageTypeLabel
+        }),
         showChevron: !isSelectMode,
         onPress: isSelectMode ? handleCheckboxPress : onPress ? () => onPress(storageKey) : undefined
-      })
+      }), eventCount != null && eventCount > 0 && /*#__PURE__*/_jsx(View, {
+        style: [styles.absCountBadge, {
+          backgroundColor: macOSColors.semantic.warning + "22",
+          borderColor: macOSColors.semantic.warning + "55"
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.absCountText, {
+            color: macOSColors.semantic.warning
+          }],
+          children: String(eventCount)
+        })
+      })]
     })]
   });
 }
@@ -306,33 +307,6 @@ const styles = StyleSheet.create({
     borderColor: macOSColors.border.default,
     padding: 6
   },
-  storageBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 999,
-    borderWidth: 1
-  },
-  storageBadgeText: {
-    fontSize: 10,
-    fontWeight: "700",
-    fontFamily: "monospace",
-    letterSpacing: 0.5
-  },
-  instanceBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 999,
-    borderWidth: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4
-  },
-  instanceText: {
-    fontSize: 10,
-    fontWeight: "700",
-    fontFamily: "monospace",
-    letterSpacing: 0.3
-  },
   rowContainer: {
     flexDirection: "row",
     alignItems: "flex-start"
@@ -349,5 +323,29 @@ const styles = StyleSheet.create({
   },
   compactRowWrapper: {
     flex: 1
+  },
+  absCountBadge: {
+    position: "absolute",
+    top: 4,
+    right: 10,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 4,
+    borderWidth: 1,
+    zIndex: 1
+  },
+  absCountText: {
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  viewHistoryButton: {
+    marginLeft: 4
+  },
+  viewHistoryText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    color: macOSColors.semantic.info
   }
 });

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

@@ -21,7 +21,9 @@ export function StorageKeySection({
   headerColor,
   isSelectMode = false,
   selectedKeys = new Set(),
-  onSelectionChange
+  onSelectionChange,
+  eventCountByKey,
+  onViewHistory
 }) {
   const [expandedKey, setExpandedKey] = useState(null);
   const handleKeyPress = useCallback(storageKey => {
@@ -72,7 +74,9 @@ export function StorageKeySection({
           onPress: handleKeyPress,
           isSelectMode: isSelectMode,
           isSelected: selectedKeys.has(uniqueKey),
-          onSelectionChange: onSelectionChange
+          onSelectionChange: onSelectionChange,
+          eventCount: eventCountByKey?.[storageKey.key],
+          onViewHistory: onViewHistory ? () => onViewHistory(storageKey.key) : undefined
         }, uniqueKey);
       })
     })]