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,15 +11,22 @@ 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>
+  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
@@ -34,7 +41,10 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
         } }
         <button mat-icon-button class="add-button" (click)="add()">
           <mat-icon>add</mat-icon>
-    </button>`,
+        </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,10 +19,16 @@ const keyIsEmpty = (key: string | number) => key == null || key === '';
   selector: 'app-map-field',
   imports: [
     forwardRef(() => ProtoFieldComponent),
+    MatExpansionModule,
     MatIconModule,
     MatButtonModule,
   ],
-  template: `<h3>{{ label() }}</h3>
+  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
@@ -41,7 +48,10 @@ const keyIsEmpty = (key: string | number) => key == null || key === '';
         } }
         <button mat-icon-button class="add-button" (click)="add()">
           <mat-icon>add</mat-icon>
-    </button>`,
+        </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,14 +8,24 @@ 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)],
+  imports: [MatExpansionModule, forwardRef(() => ProtoFieldComponent)],
-  template: `<h3>
+  template: `
-      {{ label() }} ({{ configuration().messageDefinition.name }})
+    <mat-accordion>
-    </h3>
+      <mat-expansion-panel [expanded]="true">
-    <div>
+        <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"
@@ -24,7 +34,9 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
           (valueChange)="updateValue(item.name, $event)"
         ></app-proto-field>
         }
-    </div>`,
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './object-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })