Tidy up editor, file tree, get list field working, allow creating new items

src/app/list-field/list-field.component.ts

@@ -1,24 +1,29 @@
 import { CommonModule } from '@angular/common';
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  OnInit,
+  forwardRef,
   input,
   model,
 } from '@angular/core';
-import { MatButton } from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { ListMessage } from '../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
-import {
-  EnumMessage,
-  ListMessage,
-  ProtoMessageField,
-} from '../model/proto-message.model';
 
 @Component({
   selector: 'app-list-field',
   standalone: true,
-  imports: [CommonModule, MatButton, MatIconModule, ProtoFieldComponent],
-  template: ` @for(value of values(); track $index) {
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    forwardRef(() => ProtoFieldComponent),
+  ],
+  template: ` <h3>{{ label() }}</h3>
+    @if(values()) { @for(value of values(); track $index) {
     <div class="row-wrapper">
       <app-proto-field
         [configuration]="configuration().subConfiguration"
@@ -28,19 +33,24 @@ import {
         <mat-icon>remove</mat-icon>
       </button>
     </div>
-    }
+    } }
     <button mat-icon-button (click)="add()"><mat-icon>add</mat-icon></button>`,
   styleUrl: './list-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListFieldComponent {
+  label = input<string>();
   configuration = input.required<ListMessage>();
   values = model<any[]>();
 
   add() {
     const newValues = this.values();
-    newValues?.push(null);
-    this.values.set(newValues);
+    if (newValues) {
+      newValues.push(null);
+      this.values.set(newValues);
+    } else {
+      this.values.set([null]);
+    }
   }
 
   remove(index: number) {