feat(ui): add recursive expand/collapse toggle to json tree viewer

- add single toggle button in top-right corner of json-tree component
- delegates to @alenaksu/json-viewer native expandAll()/collapseAll() API
- button uses Material icons, semi-transparent until hovered
- overflow: hidden on :host prevents scrollbar regression
- update state-visualization docs to mention the feature

Author: omoladeodetara

docs/docs/features/state-visualization.md

@@ -11,7 +11,8 @@ Explore your application state with a tree-based JSON viewer.
 
 The state viewer provides an interactive tree representation of your entire NgRx store state. You can:
 
-- Expand and collapse nested objects
+- Expand and collapse nested objects individually
+- Expand or collapse all nodes at once with the toggle button
 - Search through the state tree
 - Copy values to clipboard
 - View raw JSON

projects/ngrx-devtool-ui/src/components/json-tree/json-tree.component.html

@@ -1 +1,7 @@
-<json-viewer [data]="jsonData"></json-viewer>
+<button mat-icon-button
+        class="tree-toggle-btn"
+        [matTooltip]="expanded ? 'Collapse All' : 'Expand All'"
+        (click)="toggle()">
+  <mat-icon>{{ expanded ? 'unfold_less' : 'unfold_more' }}</mat-icon>
+</button>
+<json-viewer #jsonViewer [data]="jsonData"></json-viewer>

projects/ngrx-devtool-ui/src/components/json-tree/json-tree.component.scss

@@ -1,5 +1,25 @@
 @use '../../styles/theme' as *;
 
+:host {
+    display: block;
+    position: relative;
+    overflow: hidden;
+}
+
+.tree-toggle-btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    color: #{$color-on-surface-variant};
+    opacity: 0.6;
+
+    &:hover {
+        opacity: 1;
+        color: #{$color-primary};
+    }
+}
+
 json-viewer {
     --background-color: #{$color-background};
     --property-color: #{$color-primary};

projects/ngrx-devtool-ui/src/components/json-tree/json-tree.component.ts

@@ -1,16 +1,38 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, ViewChild } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
 export interface JsonTreeNode {
   key: string;
   value?: string | number | boolean | null;
   children?: JsonTreeNode[];
 }
+
 @Component({
   selector: 'app-json-tree',
-  imports: [],
+  imports: [MatButtonModule, MatIconModule, MatTooltipModule],
   templateUrl: './json-tree.component.html',
   styleUrl: './json-tree.component.scss',
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class JsonTreeComponent{
+export class JsonTreeComponent {
   @Input() jsonData: unknown;
+
+  @ViewChild('jsonViewer', { static: false })
+  jsonViewerRef!: ElementRef;
+
+  expanded = false;
+
+  toggle(): void {
+    const viewer = this.jsonViewerRef?.nativeElement;
+    if (!viewer) return;
+
+    this.expanded = !this.expanded;
+    if (this.expanded && typeof viewer.expandAll === 'function') {
+      viewer.expandAll();
+    } else if (!this.expanded && typeof viewer.collapseAll === 'function') {
+      viewer.collapseAll();
+    }
+  }
 }