Fixes #95

src/app/about/system-info/system-info.component.html

@@ -1,3 +1,33 @@
 <h3 i18n>System info</h3>
 
-<pre>{{ systemInfo() | json }}</pre>
+<ng-template #recursiveTree let-data>
+  <spk-list [style.padding-left.rem]="data.level * 0.25">
+    @for (node of data.children; track node.id) {
+      <div
+        action
+        #treeNode
+        [class.cannot-toggle]="node.children.length === 0"
+        [class.open]="node.isOpen()"
+        (click)="node.children.length > 0 && toggleNode(node)">
+        @if (node.children.length > 0) {
+          <spk-icon [class.open]="node.isOpen()">caret-down</spk-icon>
+        } @else {
+          <spk-icon>dot</spk-icon>
+        }
+
+        <div class="text">{{ node.text }}</div>
+      </div>
+
+      @if (node.isOpen()) {
+        <ng-container
+          *ngTemplateOutlet="
+            recursiveTree;
+            context: { $implicit: { children: node.children, level: data.level + 1 } }
+          "></ng-container>
+      }
+    }
+  </spk-list>
+</ng-template>
+
+<ng-container
+  *ngTemplateOutlet="recursiveTree; context: { $implicit: { children: treeStructure(), level: 0 } }"></ng-container>

src/app/about/system-info/system-info.component.scss

@@ -1,8 +1,26 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 
 h3 {
   font: var(--title-30);
   margin: p2r(0 0 20);
 }
+
+spk-icon {
+  font-size: p2r(16);
+}
+
+spk-list {
+  padding: 0;
+  [action] {
+    padding: 0;
+
+    &.cannot-toggle {
+      cursor: initial;
+    }
+  }
+}

src/app/about/system-info/system-info.component.ts

@@ -1,16 +1,53 @@
-import { JsonPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { JsonPipe, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { SparkleIconComponent, SparkleListComponent } from '@sparkle-ui/core';
 import { SysinfoState } from '../../core/states/sysinfo.state';
 
 @Component({
-    selector: 'app-system-info',
-    imports: [JsonPipe],
-    templateUrl: './system-info.component.html',
-    styleUrl: './system-info.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-system-info',
+  imports: [JsonPipe, SparkleListComponent, SparkleIconComponent, NgTemplateOutlet],
+  templateUrl: './system-info.component.html',
+  styleUrl: './system-info.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class SystemInfoComponent {
   #sysInfo = inject(SysinfoState);
 
-  systemInfo = this.#sysInfo.systemInfo;
+  // systemInfo = this.#sysInfo.systemInfo;
+
+  treeStructure = computed(() => {
+    const sysInfo = this.#sysInfo.systemInfo();
+
+    return this.processObject(sysInfo, 0);
+  });
+
+  toggleNode(node: any) {
+    node.isOpen.update((isOpen: any) => !isOpen);
+  }
+
+  private processObject(obj: any, level: number): any {
+    const children = [];
+
+    for (const key in obj) {
+      if (typeof obj[key] === 'object') {
+        children.push({
+          id: key,
+          text: key,
+          children: this.processObject(obj[key], level + 1),
+          level: level,
+          isOpen: signal(false),
+        });
+      } else {
+        children.push({
+          id: key,
+          text: `${key}: ${obj[key]}`,
+          children: [],
+          level: level,
+          isOpen: signal(false),
+        });
+      }
+    }
+
+    return children;
+  }
 }