reactoradar 1.5.9 → 1.5.10

package/app.js

@@ -2051,9 +2051,8 @@ function _createHighlightedTree(key, val, changedPaths, currentPath, isOld) {
 
   const children = document.createElement('div');
   children.className = 'ov-children';
-  // Auto-expand if this node has changed descendants, otherwise collapse
-  children.style.display = hasChangedDescendant ? 'block' : 'none';
-  if (hasChangedDescendant) { arrow.textContent = '\u25BC'; arrow.classList.add('open'); }
+  // Always start collapsed — user expands what they need
+  children.style.display = 'none';
 
   let populated = false;
   function populate() {
@@ -2065,9 +2064,6 @@ function _createHighlightedTree(key, val, changedPaths, currentPath, isOld) {
     });
   }
 
-  // Populate immediately if expanded, otherwise lazy
-  if (hasChangedDescendant) populate();
-
   header.addEventListener('click', (e) => {
     e.stopPropagation();
     const open = children.style.display !== 'none';
@@ -2171,7 +2167,7 @@ function renderRedux() {
     } else {
       typeHtml = `<span class="rdx-type">${esc(a.type)}</span>`;
     }
-    header.innerHTML = `<span class="rdx-index">#${a.index}</span>${typeHtml}${changesBadge}<span class="rdx-time">${ts(a.ts)}</span>`;
+    header.innerHTML = `<span class="rdx-index">#${a.index}</span>${typeHtml}<span class="rdx-header-right">${changesBadge}<span class="rdx-time">${ts(a.ts)}</span></span>`;
     // Toggle: click to expand, click again to collapse
     header.addEventListener('click', () => {
       state.redux.selected = isSelected ? -1 : a.index;
@@ -2195,6 +2191,18 @@ function renderRedux() {
       const detail = document.createElement('div');
       detail.className = 'rdx-entry-detail';
 
+      // Close button
+      const closeBtn = document.createElement('button');
+      closeBtn.className = 'rdx-close-btn';
+      closeBtn.textContent = '✕';
+      closeBtn.title = 'Close';
+      closeBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        state.redux.selected = -1;
+        renderRedux();
+      });
+      detail.appendChild(closeBtn);
+
       // Changed keys badges
       if (a.changedKeys?.length > 0) {
         const keysEl = document.createElement('div');
@@ -2213,8 +2221,7 @@ function renderRedux() {
         detail.appendChild(createTreeNode(null, a.payload, false));
       }
 
-      // Store changes — show full Previous and Current state for each changed key
-      // with changed sub-keys highlighted
+      // Store changes — two-column layout: Previous | Current
       const prevS = a.index > 0 ? states[a.index - 1] : null;
       const currS = states[a.index];
       if (currS && typeof currS === 'object' && a.changedKeys?.length > 0) {
@@ -2234,30 +2241,63 @@ function renderRedux() {
           const changedPaths = new Set();
           _findLeafChanges(oldVal, newVal, '').forEach(c => changedPaths.add(c.path));
 
-          // Previous state
+          // Two-column grid: Previous | Current
+          const grid = document.createElement('div');
+          grid.className = 'rdx-diff-grid';
+
+          // Previous column
+          const prevCol = document.createElement('div');
+          prevCol.className = 'rdx-diff-col prev';
+          const prevLabel = document.createElement('div');
+          prevLabel.className = 'rdx-state-label prev';
+          prevLabel.textContent = '- Previous';
+          prevCol.appendChild(prevLabel);
           if (oldVal !== undefined) {
-            const prevLabel = document.createElement('div');
-            prevLabel.className = 'rdx-state-label prev';
-            prevLabel.textContent = '- Previous';
-            keyWrap.appendChild(prevLabel);
-            const prevTree = document.createElement('div');
-            prevTree.className = 'rdx-state-tree prev';
-            prevTree.appendChild(_createHighlightedTree(null, oldVal, changedPaths, '', true));
-            keyWrap.appendChild(prevTree);
+            prevCol.appendChild(_createHighlightedTree(null, oldVal, changedPaths, '', true));
+          } else {
+            const na = document.createElement('span');
+            na.style.cssText = 'color:var(--text-dim);font-size:10px;font-style:italic';
+            na.textContent = 'undefined';
+            prevCol.appendChild(na);
           }
-
-          // Current state
+          grid.appendChild(prevCol);
+
+          // Current column
+          const currCol = document.createElement('div');
+          currCol.className = 'rdx-diff-col curr';
+          const currLabel = document.createElement('div');
+          currLabel.className = 'rdx-state-label curr';
+          currLabel.textContent = '+ Current';
+          currCol.appendChild(currLabel);
           if (newVal !== undefined) {
-            const currLabel = document.createElement('div');
-            currLabel.className = 'rdx-state-label curr';
-            currLabel.textContent = '+ Current';
-            keyWrap.appendChild(currLabel);
-            const currTree = document.createElement('div');
-            currTree.className = 'rdx-state-tree curr';
-            currTree.appendChild(_createHighlightedTree(null, newVal, changedPaths, '', false));
-            keyWrap.appendChild(currTree);
+            currCol.appendChild(_createHighlightedTree(null, newVal, changedPaths, '', false));
+          } else {
+            const na = document.createElement('span');
+            na.style.cssText = 'color:var(--text-dim);font-size:10px;font-style:italic';
+            na.textContent = 'undefined';
+            currCol.appendChild(na);
           }
-
+          grid.appendChild(currCol);
+
+          // Right-click to copy on each column
+          prevCol.addEventListener('contextmenu', (e) => {
+            e.preventDefault(); e.stopPropagation();
+            showContextMenu(e, [
+              { label: 'Copy Previous Value', action: () => navigator.clipboard.writeText(JSON.stringify(oldVal, null, 2)) },
+              { label: 'Copy Current Value', action: () => navigator.clipboard.writeText(JSON.stringify(newVal, null, 2)) },
+              { label: `Copy "${key}" key`, action: () => navigator.clipboard.writeText(key) },
+            ]);
+          });
+          currCol.addEventListener('contextmenu', (e) => {
+            e.preventDefault(); e.stopPropagation();
+            showContextMenu(e, [
+              { label: 'Copy Current Value', action: () => navigator.clipboard.writeText(JSON.stringify(newVal, null, 2)) },
+              { label: 'Copy Previous Value', action: () => navigator.clipboard.writeText(JSON.stringify(oldVal, null, 2)) },
+              { label: `Copy "${key}" key`, action: () => navigator.clipboard.writeText(key) },
+            ]);
+          });
+
+          keyWrap.appendChild(grid);
           detail.appendChild(keyWrap);
         });
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.5.9",
+  "version": "1.5.10",
   "description": "macOS debugger for React Native — Console, Sources, Network, Performance, Memory, Redux, AsyncStorage, React tree. Supports RN 0.74+ with Hermes and New Architecture.",
   "main": "main.js",
   "bin": {

package/styles.css

@@ -924,7 +924,10 @@ body {
 .rdx-entry-header:hover { background: var(--bg3); }
 .rdx-entry.selected .rdx-entry-header { border-left: 3px solid var(--accent); }
 .rdx-index { font-size: 9px; color: var(--text-dim); min-width: 20px; text-align: right; flex-shrink: 0; }
-.rdx-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); font-weight: 500; }
+.rdx-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); font-weight: 500; }
+.rdx-type-cat { font-weight: 700; }
+.rdx-type-name { color: var(--text-bright); font-weight: 500; }
+.rdx-header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
 .rdx-changes {
   font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 8px;
   background: rgba(255,94,114,.12); color: var(--red); flex-shrink: 0;
@@ -968,12 +971,16 @@ body {
 .rdx-diff-old { color: var(--red); text-decoration: line-through; opacity: 0.8; word-break: break-all; }
 .rdx-diff-arrow { color: var(--text-dim); font-size: 10px; flex-shrink: 0; }
 .rdx-diff-new { color: var(--green); font-weight: 600; word-break: break-all; }
-.rdx-state-label { font-size: 10px; font-weight: 700; padding: 4px 8px 2px; margin-top: 4px; letter-spacing: 0.5px; }
+.rdx-state-label { font-size: 10px; font-weight: 700; padding: 4px 0 2px; letter-spacing: 0.5px; }
 .rdx-state-label.prev { color: var(--red); }
 .rdx-state-label.curr { color: var(--green); }
-.rdx-state-tree { padding: 2px 0 4px 4px; border-left: 2px solid var(--border); margin-left: 4px; }
-.rdx-state-tree.prev { border-left-color: rgba(255,94,114,.3); }
-.rdx-state-tree.curr { border-left-color: rgba(61,214,140,.3); }
+.rdx-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
+.rdx-diff-col { min-width: 0; overflow: auto; max-height: 400px; padding: 4px; border-radius: 4px; font-size: 11px; }
+.rdx-diff-col.prev { background: rgba(255,94,114,.04); border: 1px solid rgba(255,94,114,.12); }
+.rdx-diff-col.curr { background: rgba(61,214,140,.04); border: 1px solid rgba(61,214,140,.12); }
+.rdx-close-btn { position: absolute; top: 6px; right: 8px; background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
+.rdx-close-btn:hover { background: var(--bg4); color: var(--text); }
+.rdx-entry-detail { position: relative; }
 .rdx-highlight { font-weight: 600; }
 .rdx-diff-sign { font-weight: 700; font-size: 11px; flex-shrink: 0; width: 14px; text-align: center; }
 .rdx-diff-row.removed .rdx-diff-sign { color: var(--red); }