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

src/app/editor/editor.component.html

@@ -1,6 +1,8 @@
+<h2>{{ selectedMessage().name }}</h2>
 <div>
   @for (item of selectedMessage().values; track $index) {
   <app-proto-field
+    [label]="item.name"
     [configuration]="item.configuration"
     [(value)]="values()[$index]"
   ></app-proto-field>

src/app/editor/editor.component.scss

@@ -0,0 +1,3 @@
+:host {
+  padding: var(--mat-sidenav-container-shape);
+}

src/app/editor/editor.component.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import {
   Component,
   ElementRef,
+  computed,
   effect,
   input,
   signal,
@@ -22,8 +23,12 @@ export class EditorComponent {
   // TODO: This needs to be reworked so we have a local property and implement some kind of auto-save
   fileContents = input<string>();
   selectedMessage = input.required<ProtoMessage>();
-  // TODO: This needs to start with the parsed file contents, and get updated when the code value changes
-  protected values = signal([]);
+
+  protected values = computed(() => {
+    const message = this.selectedMessage();
+    return message.values.map((value) => null);
+  });
+
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
   constructor() {