Use accordions for nested field types

src/app/editor/list-field/list-field.component.scss

@@ -1,6 +1,7 @@
 :host {
   display: flex;
   flex-direction: column;
+  margin: 0.5rem 0;
 }
 
 .row-wrapper {
@@ -11,7 +12,3 @@
 app-proto-field {
   flex: 1;
 }
-
-.add-button {
-  align-self: flex-end;
-}

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

@@ -11,30 +11,40 @@ 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 { MatExpansionModule } from '@angular/material/expansion';
 
 @Component({
   selector: 'app-list-field',
   imports: [
     MatButtonModule,
+    MatExpansionModule,
     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"
-        [value]="value"
-        (valueChange)="updateValue($index, $event)"
-      ></app-proto-field>
-      <button mat-icon-button (click)="remove($index)">
-        <mat-icon>remove</mat-icon>
-      </button>
-    </div>
-    } }
-    <button mat-icon-button class="add-button" (click)="add()">
-      <mat-icon>add</mat-icon>
-    </button>`,
+  template: `
+    <mat-accordion>
+      <mat-expansion-panel [expanded]="true">
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{ label() }}</mat-panel-title>
+        </mat-expansion-panel-header>
+        @if(values()) { @for(value of values(); track $index) {
+        <div class="row-wrapper">
+          <app-proto-field
+            [configuration]="configuration().subConfiguration"
+            [value]="value"
+            (valueChange)="updateValue($index, $event)"
+          ></app-proto-field>
+          <button mat-icon-button (click)="remove($index)">
+            <mat-icon>remove</mat-icon>
+          </button>
+        </div>
+        } }
+        <button mat-icon-button class="add-button" (click)="add()">
+          <mat-icon>add</mat-icon>
+        </button>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './list-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/editor/map-field/map-field.component.scss

@@ -1,6 +1,7 @@
 :host {
   display: flex;
   flex-direction: column;
+  margin: 0.5rem 0;
 }
 
 .row-wrapper {
@@ -12,10 +13,6 @@ app-proto-field {
   flex: 1;
 
   &:first-child {
-    margin-right: 10px;
+    margin-right: 0.5rem;
   }
 }
-
-.add-button {
-  align-self: flex-end;
-}

src/app/editor/map-field/map-field.component.ts

@@ -11,6 +11,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MapMessage } from '../../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 const keyIsEmpty = (key: string | number) => key == null || key === '';
 
@@ -18,30 +19,39 @@ const keyIsEmpty = (key: string | number) => key == null || key === '';
   selector: 'app-map-field',
   imports: [
     forwardRef(() => ProtoFieldComponent),
+    MatExpansionModule,
     MatIconModule,
     MatButtonModule,
   ],
-  template: `<h3>{{ label() }}</h3>
-    @if(valuePairs()) { @for(value of valuePairs(); track $index) {
-    <div class="row-wrapper">
-      <app-proto-field
-        [configuration]="configuration().keyConfiguration"
-        [value]="value[0]"
-        (valueChange)="updateKey($index, $event)"
-      ></app-proto-field>
-      <app-proto-field
-        [configuration]="configuration().valueConfiguration"
-        [value]="value[1]"
-        (valueChange)="updateValue($index, $event)"
-      ></app-proto-field>
-      <button mat-icon-button (click)="remove($index)">
-        <mat-icon>remove</mat-icon>
-      </button>
-    </div>
-    } }
-    <button mat-icon-button class="add-button" (click)="add()">
-      <mat-icon>add</mat-icon>
-    </button>`,
+  template: `
+    <mat-accordion>
+      <mat-expansion-panel [expanded]="true">
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{ label() }}</mat-panel-title>
+        </mat-expansion-panel-header>
+        @if(valuePairs()) { @for(value of valuePairs(); track $index) {
+        <div class="row-wrapper">
+          <app-proto-field
+            [configuration]="configuration().keyConfiguration"
+            [value]="value[0]"
+            (valueChange)="updateKey($index, $event)"
+          ></app-proto-field>
+          <app-proto-field
+            [configuration]="configuration().valueConfiguration"
+            [value]="value[1]"
+            (valueChange)="updateValue($index, $event)"
+          ></app-proto-field>
+          <button mat-icon-button (click)="remove($index)">
+            <mat-icon>remove</mat-icon>
+          </button>
+        </div>
+        } }
+        <button mat-icon-button class="add-button" (click)="add()">
+          <mat-icon>add</mat-icon>
+        </button>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './map-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/editor/object-field/object-field.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  margin: 0.5rem 0;
+}

src/app/editor/object-field/object-field.component.ts

@@ -8,23 +8,35 @@ import {
 } from '@angular/core';
 import { ObjectMessage } from '../../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @Component({
   selector: 'app-object-field',
-  imports: [forwardRef(() => ProtoFieldComponent)],
-  template: `<h3>
-      {{ label() }} ({{ configuration().messageDefinition.name }})
-    </h3>
-    <div>
-      @for (item of configuration().messageDefinition.values; track $index) {
-      <app-proto-field
-        [label]="item.friendlyName || item.name"
-        [configuration]="item.configuration"
-        [value]="currentValue()[item.name]"
-        (valueChange)="updateValue(item.name, $event)"
-      ></app-proto-field>
-      }
-    </div>`,
+  imports: [MatExpansionModule, forwardRef(() => ProtoFieldComponent)],
+  template: `
+    <mat-accordion>
+      <mat-expansion-panel [expanded]="true">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            {{ label() ?? configuration().messageDefinition.name }}
+          </mat-panel-title>
+          @if(label()) {
+          <mat-panel-description>
+            {{ configuration().messageDefinition.name }}
+          </mat-panel-description>
+          }
+        </mat-expansion-panel-header>
+        @for (item of configuration().messageDefinition.values; track $index) {
+        <app-proto-field
+          [label]="item.friendlyName || item.name"
+          [configuration]="item.configuration"
+          [value]="currentValue()[item.name]"
+          (valueChange)="updateValue(item.name, $event)"
+        ></app-proto-field>
+        }
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './object-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })