feat(extension): fold repeated children (#810)

Closes #760.

Applies the same folding as root nodes to children. Basically keeps
track of a `firstChildren` just the same way we hold `firstUpdate`.

Author: 43081j

.changeset/hot-mugs-fix.md

@@ -0,0 +1,5 @@
+---
+"preact-signals-devtools": minor
+---
+
+Automatically fold child updates and show first/last value.

extension/src/components/UpdateTreeNode.tsx

@@ -17,6 +17,24 @@ export function UpdateTreeNodeComponent({ node }: UpdateTreeNodeProps) {
 	const nodeCount = node.type === "group" ? node.count : undefined;
 	const firstUpdate = node.type === "group" ? node.firstUpdate : undefined;
 
+	let childrenToRender: UpdateTreeNode[];
+
+	if (node.type === "group" && node.firstChildren) {
+		childrenToRender = node.children.map((lastChild, index) => {
+			const firstChild = node.firstChildren[index];
+			const mergedChild: UpdateTreeNode = {
+				...lastChild,
+				type: "group",
+				firstUpdate: firstChild.update,
+				firstChildren: firstChild.children,
+				count: node.count,
+			};
+			return mergedChild;
+		});
+	} else {
+		childrenToRender = node.children;
+	}
+
 	return (
 		<div className="tree-node">
 			<div className="tree-node-content">
@@ -41,7 +59,7 @@ export function UpdateTreeNodeComponent({ node }: UpdateTreeNodeProps) {
 
 			{hasChildren && !isCollapsed.value && (
 				<div className="tree-children">
-					{node.children.map(child => (
+					{childrenToRender.map(child => (
 						<UpdateTreeNodeComponent key={child.id} node={child} />
 					))}
 				</div>

extension/src/models/UpdatesModel.ts

@@ -18,6 +18,7 @@ export interface UpdateTreeNodeGroup extends UpdateTreeNodeBase {
 	type: "group";
 	count: number;
 	firstUpdate: SignalUpdate;
+	firstChildren: UpdateTreeNode[];
 }
 
 export type UpdateTreeNode = UpdateTreeNodeGroup | UpdateTreeNodeSingle;
@@ -44,11 +45,13 @@ const collapseTree = (nodes: UpdateTreeNodeSingle[]): UpdateTreeNode[] => {
 					type: "group",
 					count: 2,
 					firstUpdate: node.update,
+					firstChildren: node.children,
 				};
 				tree.push(lastNode);
 			} else {
 				lastNode.count++;
 				lastNode.firstUpdate = node.update;
+				lastNode.firstChildren = node.children;
 			}
 			// If the current node is equal to the last one, skip it
 			continue;