@buoy-gg/storage 2.1.14 → 2.1.16

package/lib/commonjs/storage/components/StorageModalWithTabs.js

@@ -409,9 +409,7 @@ function StorageModalWithTabs({
   const END_REACHED_THRESHOLD = 0.8;
 
   // keyExtractor for raw event FlatList
-  const eventKeyExtractor = (0, _react.useCallback)((item, index) => {
-    return `${item.timestamp.getTime()}-${item.data?.key || index}`;
-  }, []);
+  const eventKeyExtractor = (0, _react.useCallback)(item => item.id, []);
 
   // When a raw event card is pressed, open that key's conversation detail at the matching event
   const handleRawEventPress = (0, _react.useCallback)(item => {
@@ -474,8 +472,9 @@ function StorageModalWithTabs({
         const ascSortedEvents = [...selectedHistoryConversation.events].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
         const newestFirstEvents = [...ascSortedEvents].reverse();
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+          style: styles.flexFill,
           data: newestFirstEvents,
-          keyExtractor: (item, index) => `${item.timestamp.getTime()}-${index}`,
+          keyExtractor: item => item.id,
           renderItem: ({
             item
           }) => {
@@ -497,8 +496,7 @@ function StorageModalWithTabs({
           ItemSeparatorComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.separator
           }),
-          initialNumToRender: 20,
-          scrollEnabled: false
+          initialNumToRender: 20
         });
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageBrowserMode.StorageBrowserMode, {
@@ -542,6 +540,7 @@ function StorageModalWithTabs({
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      style: styles.flexFill,
       data: visibleEvents,
       renderItem: renderEventItem,
       keyExtractor: eventKeyExtractor,
@@ -556,8 +555,7 @@ function StorageModalWithTabs({
       }) : null,
       initialNumToRender: 10,
       maxToRenderPerBatch: 10,
-      windowSize: 10,
-      scrollEnabled: false
+      windowSize: 10
     });
   };
   const footerNode = selectedConversation ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailFooter, {
@@ -686,6 +684,7 @@ function StorageModalWithTabs({
       styles: {},
       footer: footerNode,
       footerHeight: footerNode ? 68 : 0,
+      disableScrollWrapper: true,
       children: renderContent()
     })
   });
@@ -694,6 +693,9 @@ const styles = _reactNative.StyleSheet.create({
   headerSearchContainer: {
     flex: 1
   },
+  flexFill: {
+    flex: 1
+  },
   iconButton: {
     width: 32,
     height: 32,

package/lib/commonjs/storage/stores/storageEventStore.js

@@ -30,9 +30,17 @@ var _MMKVListener = require("../utils/MMKVListener");
  */
 
 /**
- * Unified storage event type combining AsyncStorage and MMKV events
+ * Unified storage event type combining AsyncStorage and MMKV events.
+ * `id` is assigned by the store when the event enters — needed because raw
+ * events have no unique identifier (rapid same-key writes can share a
+ * millisecond timestamp), and React keys must be unique per render.
  */
 
+let storageEventIdCounter = 0;
+function nextStorageEventId() {
+  return `se-${Date.now()}-${++storageEventIdCounter}`;
+}
+
 /**
  * Listener callback type for storage events array
  */
@@ -66,7 +74,8 @@ class StorageEventStore extends _sharedUi.BaseEventStore {
       this.asyncStorageUnsubscribe = (0, _AsyncStorageListener.addListener)(event => {
         const storageEvent = {
           ...event,
-          storageType: "async"
+          storageType: "async",
+          id: nextStorageEventId()
         };
         this.addEvent(storageEvent);
       });
@@ -77,7 +86,8 @@ class StorageEventStore extends _sharedUi.BaseEventStore {
       this.mmkvUnsubscribe = (0, _MMKVListener.addMMKVListener)(event => {
         const storageEvent = {
           ...event,
-          storageType: "mmkv"
+          storageType: "mmkv",
+          id: nextStorageEventId()
         };
         this.addEvent(storageEvent);
       });

package/lib/module/storage/components/DiffViewer/modes/ThemedSplitView.js

@@ -1,189 +1,95 @@
 "use strict";
 
-import { Fragment } from "react";
-import { View, Text, ScrollView, StyleSheet } from "react-native";
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { View, Text, FlatList, StyleSheet, TouchableOpacity } from "react-native";
 import { computeLineDiff, DiffType } from "../../../utils/lineDiff";
 import { DiffSummary } from "../components/DiffSummary";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_OPTIONS = {
+  hideLineNumbers: false,
+  disableWordDiff: false,
+  showDiffOnly: false,
+  compareMethod: "words",
+  contextLines: 3,
+  lineOffset: 0
+};
 export function ThemedSplitView({
   oldValue,
   newValue,
   theme,
-  options = {
-    hideLineNumbers: false,
-    disableWordDiff: false,
-    showDiffOnly: false,
-    compareMethod: "words",
-    contextLines: 3,
-    lineOffset: 0
-  },
+  options = DEFAULT_OPTIONS,
   showThemeName = false
 }) {
-  // Compute line-by-line diff with options
-  const diffComputeOptions = {
+  const dynamicStyles = useMemo(() => createDynamicStyles(theme), [theme]);
+  const diffComputeOptions = useMemo(() => ({
     compareMethod: options.compareMethod,
     disableWordDiff: options.disableWordDiff,
     showDiffOnly: options.showDiffOnly,
     contextLines: options.contextLines
-  };
-  const lineDiffs = computeLineDiff(oldValue, newValue, diffComputeOptions);
+  }), [options.compareMethod, options.disableWordDiff, options.showDiffOnly, options.contextLines]);
+  const lineDiffs = useMemo(() => computeLineDiff(oldValue, newValue, diffComputeOptions), [oldValue, newValue, diffComputeOptions]);
 
-  // Create dynamic styles based on theme
-  const dynamicStyles = createDynamicStyles(theme);
+  // One pass for the summary instead of three .filter() calls per render.
+  const summary = useMemo(() => {
+    let added = 0;
+    let removed = 0;
+    let modified = 0;
+    for (const d of lineDiffs) {
+      if (d.type === DiffType.ADDED) added++;else if (d.type === DiffType.REMOVED) removed++;else if (d.type === DiffType.MODIFIED) modified++;
+    }
+    return {
+      added,
+      removed,
+      modified
+    };
+  }, [lineDiffs]);
 
-  // Render word diff content
-  const renderWordDiff = wordDiffs => {
-    return wordDiffs.map((word, idx) => {
-      let backgroundColor = "transparent";
-      if (word.type === DiffType.ADDED) {
-        backgroundColor = theme.addedWordHighlight;
-      } else if (word.type === DiffType.REMOVED) {
-        backgroundColor = theme.removedWordHighlight;
-      }
-      return /*#__PURE__*/_jsx(Text, {
-        style: [dynamicStyles.wordDiff, {
-          backgroundColor
-        }],
-        children: word.value
-      }, idx);
-    });
-  };
+  // Auto-collapse runs of unchanged lines that aren't near a change. Keeps
+  // CONTEXT_LINES on either side of every change visible (GitHub-style), folds
+  // the rest into a tappable header.
+  const [expandedFolds, setExpandedFolds] = useState(() => new Set());
 
-  // Get colors for diff type
-  const getDiffColors = (type, isModified = false) => {
-    if (isModified) {
-      return {
-        background: theme.modifiedBackground,
-        text: theme.modifiedText,
-        markerBg: theme.markerModifiedBackground
-      };
+  // Reset fold expansion when the user actually switches comparisons. Parent
+  // memoizes oldValue/newValue, so this only fires on a real change — not on
+  // every re-render. First run is a no-op (initial state is already empty).
+  const hasMountedRef = useRef(false);
+  useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
     }
-    switch (type) {
-      case DiffType.ADDED:
-        return {
-          background: theme.addedBackground,
-          text: theme.addedText,
-          markerBg: theme.markerAddedBackground
-        };
-      case DiffType.REMOVED:
-        return {
-          background: theme.removedBackground,
-          text: theme.removedText,
-          markerBg: theme.markerRemovedBackground
-        };
-      case DiffType.DEFAULT:
-        return {
-          background: theme.unchangedBackground,
-          text: theme.unchangedText,
-          markerBg: "transparent"
-        };
-      default:
-        return {
-          background: theme.unchangedBackground,
-          text: theme.unchangedText,
-          markerBg: "transparent"
-        };
-    }
-  };
-
-  // Render a single line side (left or right)
-  const renderLineSide = (lineNumber, content, type, marker, isEmpty = false) => {
-    if (isEmpty) {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
-          style: [dynamicStyles.gutter, dynamicStyles.emptyGutter],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: dynamicStyles.lineNumber,
-            children: " "
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: [dynamicStyles.marker, dynamicStyles.emptyMarker],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: dynamicStyles.markerText,
-            children: " "
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: [dynamicStyles.contentCell, dynamicStyles.emptyContent],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: dynamicStyles.content,
-            children: " "
-          })
-        })]
+    setExpandedFolds(new Set());
+  }, [oldValue, newValue]);
+  const items = useMemo(() => buildSplitItems(lineDiffs, expandedFolds), [lineDiffs, expandedFolds]);
+  const toggleFold = useCallback(foldId => {
+    setExpandedFolds(prev => {
+      const next = new Set(prev);
+      if (next.has(foldId)) next.delete(foldId);else next.add(foldId);
+      return next;
+    });
+  }, []);
+  const keyExtractor = useCallback(item => item.kind === "row" ? `r:${item.diffIndex}` : `f:${item.foldId}`, []);
+  const renderItem = useCallback(({
+    item
+  }) => {
+    if (item.kind === "fold") {
+      return /*#__PURE__*/_jsx(FoldHeader, {
+        foldId: item.foldId,
+        count: item.count,
+        expanded: item.expanded,
+        theme: theme,
+        styles: dynamicStyles,
+        onToggle: toggleFold
       });
     }
-    const colors = getDiffColors(type);
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
-        style: [dynamicStyles.gutter, {
-          backgroundColor: theme.lineNumberBackground
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: dynamicStyles.lineNumber,
-          children: lineNumber || " "
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: [dynamicStyles.marker, {
-          backgroundColor: colors.markerBg
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [dynamicStyles.markerText, {
-            color: theme.markerText
-          }],
-          children: marker
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: [dynamicStyles.contentCell, {
-          backgroundColor: colors.background
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [dynamicStyles.content, {
-            color: colors.text
-          }],
-          children: Array.isArray(content) ? renderWordDiff(content) : content || " "
-        })
-      })]
+    return /*#__PURE__*/_jsx(DiffRow, {
+      diff: item.diff,
+      showSeparator: false,
+      theme: theme,
+      options: options,
+      styles: dynamicStyles
     });
-  };
-
-  // Check if we should show a separator (gap in line numbers)
-  const shouldShowSeparator = (idx, diffs) => {
-    if (!options.showDiffOnly || idx === 0) return false;
-    const prevDiff = diffs[idx - 1];
-    const currDiff = diffs[idx];
-
-    // Check for gap in line numbers
-    const leftGap = currDiff.leftLineNumber && prevDiff.leftLineNumber && currDiff.leftLineNumber - prevDiff.leftLineNumber > 1;
-    const rightGap = currDiff.rightLineNumber && prevDiff.rightLineNumber && currDiff.rightLineNumber - prevDiff.rightLineNumber > 1;
-    return leftGap || rightGap;
-  };
-
-  // Render a complete row with both left and right sides
-  const renderDiffRow = (diff, idx, diffs) => {
-    const isRemoved = diff.type === DiffType.REMOVED;
-    const isAdded = diff.type === DiffType.ADDED;
-    const isModified = diff.type === DiffType.MODIFIED;
-    const isDefault = diff.type === DiffType.DEFAULT;
-    return /*#__PURE__*/_jsxs(Fragment, {
-      children: [shouldShowSeparator(idx, diffs) && /*#__PURE__*/_jsx(View, {
-        style: dynamicStyles.separator,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: dynamicStyles.separatorText,
-          children: "\u2022 \u2022 \u2022"
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: dynamicStyles.row,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: dynamicStyles.leftSide,
-          children: isRemoved || isModified || isDefault ? renderLineSide(diff.leftLineNumber, diff.leftContent, isModified ? DiffType.REMOVED : diff.type, isRemoved || isModified ? "-" : " ") : renderLineSide(undefined, undefined, DiffType.DEFAULT, " ", true)
-        }), /*#__PURE__*/_jsx(View, {
-          style: dynamicStyles.centerDivider
-        }), /*#__PURE__*/_jsx(View, {
-          style: dynamicStyles.rightSide,
-          children: isAdded || isModified || isDefault ? renderLineSide(diff.rightLineNumber, diff.rightContent, isModified ? DiffType.ADDED : diff.type, isAdded || isModified ? "+" : " ") : renderLineSide(undefined, undefined, DiffType.DEFAULT, " ", true)
-        })]
-      })]
-    }, idx);
-  };
+  }, [theme, options, dynamicStyles, toggleFold]);
   return /*#__PURE__*/_jsxs(View, {
     style: [dynamicStyles.container, theme.glowColor && {
       shadowColor: theme.glowColor,
@@ -221,24 +127,276 @@ export function ThemedSplitView({
         })
       })]
     }), /*#__PURE__*/_jsx(DiffSummary, {
-      added: lineDiffs.filter(d => d.type === DiffType.ADDED).length,
-      removed: lineDiffs.filter(d => d.type === DiffType.REMOVED).length,
-      modified: lineDiffs.filter(d => d.type === DiffType.MODIFIED).length,
+      added: summary.added,
+      removed: summary.removed,
+      modified: summary.modified,
       theme: theme
-    }), /*#__PURE__*/_jsx(ScrollView, {
+    }), lineDiffs.length === 0 ? /*#__PURE__*/_jsx(View, {
+      style: dynamicStyles.emptyState,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: dynamicStyles.emptyText,
+        children: options.showDiffOnly ? "No differences found" : "No content to display"
+      })
+    }) : /*#__PURE__*/_jsx(FlatList, {
       style: dynamicStyles.scrollView,
-      showsVerticalScrollIndicator: false,
       contentContainerStyle: dynamicStyles.scrollContent,
-      children: lineDiffs.length === 0 ? /*#__PURE__*/_jsx(View, {
-        style: dynamicStyles.emptyState,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: dynamicStyles.emptyText,
-          children: options.showDiffOnly ? "No differences found" : "No content to display"
+      data: items,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      showsVerticalScrollIndicator: false,
+      initialNumToRender: 20,
+      maxToRenderPerBatch: 20,
+      windowSize: 7,
+      removeClippedSubviews: true
+    })]
+  });
+}
+
+// Number of context lines kept visible on either side of every change.
+const CONTEXT_LINES = 3;
+// Don't bother folding tiny gaps — toggling them is more friction than scroll.
+const MIN_FOLD_SIZE = 4;
+function buildSplitItems(lineDiffs, expandedFolds) {
+  const n = lineDiffs.length;
+  if (n === 0) return [];
+
+  // Mark every line that should always be visible: any change, plus
+  // CONTEXT_LINES on either side of it.
+  const visible = new Array(n).fill(false);
+  for (let i = 0; i < n; i++) {
+    if (lineDiffs[i].type !== DiffType.DEFAULT) {
+      const start = Math.max(0, i - CONTEXT_LINES);
+      const end = Math.min(n - 1, i + CONTEXT_LINES);
+      for (let k = start; k <= end; k++) visible[k] = true;
+    }
+  }
+  const items = [];
+  let foldId = 0;
+  let i = 0;
+  while (i < n) {
+    if (visible[i]) {
+      items.push({
+        kind: "row",
+        diff: lineDiffs[i],
+        diffIndex: i
+      });
+      i++;
+      continue;
+    }
+    let j = i;
+    while (j < n && !visible[j]) j++;
+    const runLength = j - i;
+    if (runLength < MIN_FOLD_SIZE) {
+      for (let k = i; k < j; k++) {
+        items.push({
+          kind: "row",
+          diff: lineDiffs[k],
+          diffIndex: k
+        });
+      }
+    } else {
+      const id = foldId++;
+      const expanded = expandedFolds.has(id);
+      items.push({
+        kind: "fold",
+        foldId: id,
+        count: runLength,
+        expanded
+      });
+      if (expanded) {
+        for (let k = i; k < j; k++) {
+          items.push({
+            kind: "row",
+            diff: lineDiffs[k],
+            diffIndex: k
+          });
+        }
+      }
+    }
+    i = j;
+  }
+  return items;
+}
+const FoldHeader = /*#__PURE__*/memo(function FoldHeader({
+  foldId,
+  count,
+  expanded,
+  theme,
+  styles,
+  onToggle
+}) {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: [styles.foldHeader, {
+      backgroundColor: theme.separatorBackground
+    }],
+    onPress: () => onToggle(foldId),
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.foldHeaderText, {
+        color: theme.separatorText
+      }],
+      children: expanded ? `▼  ${count} unchanged line${count === 1 ? "" : "s"}  —  tap to hide` : `▶  ${count} unchanged line${count === 1 ? "" : "s"}  —  tap to expand`
+    })
+  });
+});
+const DiffRow = /*#__PURE__*/memo(function DiffRow({
+  diff,
+  showSeparator,
+  theme,
+  options,
+  styles
+}) {
+  const isRemoved = diff.type === DiffType.REMOVED;
+  const isAdded = diff.type === DiffType.ADDED;
+  const isModified = diff.type === DiffType.MODIFIED;
+  const isDefault = diff.type === DiffType.DEFAULT;
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [showSeparator && /*#__PURE__*/_jsx(View, {
+      style: styles.separator,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.separatorText,
+        children: "\u2022 \u2022 \u2022"
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.leftSide,
+        children: isRemoved || isModified || isDefault ? /*#__PURE__*/_jsx(LineSide, {
+          lineNumber: diff.leftLineNumber,
+          content: diff.leftContent,
+          type: isModified ? DiffType.REMOVED : diff.type,
+          marker: isRemoved || isModified ? "-" : " ",
+          theme: theme,
+          options: options,
+          styles: styles
+        }) : /*#__PURE__*/_jsx(EmptyLineSide, {
+          options: options,
+          styles: styles
         })
-      }) : lineDiffs.map((diff, idx) => renderDiffRow(diff, idx, lineDiffs))
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.centerDivider
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.rightSide,
+        children: isAdded || isModified || isDefault ? /*#__PURE__*/_jsx(LineSide, {
+          lineNumber: diff.rightLineNumber,
+          content: diff.rightContent,
+          type: isModified ? DiffType.ADDED : diff.type,
+          marker: isAdded || isModified ? "+" : " ",
+          theme: theme,
+          options: options,
+          styles: styles
+        }) : /*#__PURE__*/_jsx(EmptyLineSide, {
+          options: options,
+          styles: styles
+        })
+      })]
+    })]
+  });
+});
+function LineSide({
+  lineNumber,
+  content,
+  type,
+  marker,
+  theme,
+  options,
+  styles
+}) {
+  const colors = getDiffColors(type, theme);
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
+      style: [styles.gutter, {
+        backgroundColor: theme.lineNumberBackground
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.lineNumber,
+        children: lineNumber || " "
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.marker, {
+        backgroundColor: colors.markerBg
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.markerText, {
+          color: theme.markerText
+        }],
+        children: marker
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.contentCell, {
+        backgroundColor: colors.background
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.content, {
+          color: colors.text
+        }],
+        children: Array.isArray(content) ? content.map((word, idx) => {
+          let backgroundColor = "transparent";
+          if (word.type === DiffType.ADDED) {
+            backgroundColor = theme.addedWordHighlight;
+          } else if (word.type === DiffType.REMOVED) {
+            backgroundColor = theme.removedWordHighlight;
+          }
+          return /*#__PURE__*/_jsx(Text, {
+            style: [styles.wordDiff, {
+              backgroundColor
+            }],
+            children: word.value
+          }, idx);
+        }) : content || " "
+      })
+    })]
+  });
+}
+function EmptyLineSide({
+  options,
+  styles
+}) {
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
+      style: [styles.gutter, styles.emptyGutter],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.lineNumber,
+        children: " "
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.marker, styles.emptyMarker],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.markerText,
+        children: " "
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.contentCell, styles.emptyContent],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.content,
+        children: " "
+      })
     })]
   });
 }
+function getDiffColors(type, theme) {
+  switch (type) {
+    case DiffType.ADDED:
+      return {
+        background: theme.addedBackground,
+        text: theme.addedText,
+        markerBg: theme.markerAddedBackground
+      };
+    case DiffType.REMOVED:
+      return {
+        background: theme.removedBackground,
+        text: theme.removedText,
+        markerBg: theme.markerRemovedBackground
+      };
+    case DiffType.DEFAULT:
+    default:
+      return {
+        background: theme.unchangedBackground,
+        text: theme.unchangedText,
+        markerBg: "transparent"
+      };
+  }
+}
 
 // Create dynamic styles based on theme
 function createDynamicStyles(theme) {
@@ -400,6 +558,20 @@ function createDynamicStyles(theme) {
       fontFamily: "monospace",
       letterSpacing: 2
     },
+    foldHeader: {
+      paddingVertical: 6,
+      paddingHorizontal: 12,
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderColor: theme.borderColor
+    },
+    foldHeaderText: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      letterSpacing: 0.5
+    },
     emptyState: {
       padding: 40,
       alignItems: "center",