Merge branch 'main' into angular-update

# Conflicts:
#	bun.lockb
#	package.json
#	src/styles.scss

.gitea/workflows/release-nightly.yaml

@@ -32,9 +32,6 @@ jobs:
         with:
           lfs: true
       - uses: oven-sh/setup-bun@v2
-      - uses: actions/setup-node@v4
-        with:
-          node-version: ^22.12.0
       - uses: browser-actions/setup-chrome@v1
         id: setup-chrome
         with:
@@ -52,8 +49,9 @@ jobs:
         run: bun run build
 
       - name: Publish to Cloudflare Pages
-        uses: cloudflare/wrangler-action@v3
+        uses: cloudflare/pages-action@v1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: pages deploy dist/proto-creator/browser --project-name=buf
+          projectName: buf
+          directory: dist/proto-creator/browser

angular.json

@@ -58,8 +58,7 @@
                 }
               ],
               "outputHashing": "all",
-              "serviceWorker": "ngsw-config.json",
+              "serviceWorker": "ngsw-config.json"
-              "security": { "autoCsp": true }
             },
             "development": {
               "optimization": false,
@@ -85,10 +84,10 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular/build:extract-i18n"
+          "builder": "@angular-devkit/build-angular:extract-i18n"
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "polyfills": [],
             "tsConfig": "tsconfig.spec.json",
@@ -108,31 +107,5 @@
         }
       }
     }
-  },
-  "schematics": {
-    "@schematics/angular:component": {
-      "type": "component"
-    },
-    "@schematics/angular:directive": {
-      "type": "directive"
-    },
-    "@schematics/angular:service": {
-      "type": "service"
-    },
-    "@schematics/angular:guard": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:interceptor": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:module": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:pipe": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:resolver": {
-      "typeSeparator": "."
-    }
   }
 }

karma.conf.js

@@ -4,12 +4,13 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
       jasmine: {

package.json

@@ -11,17 +11,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.0.0",
+    "@angular-devkit/build-angular": "^19.2.5",
-    "@angular/cdk": "^20.0.1",
+    "@angular/animations": "^19.2.4",
-    "@angular/common": "^20.0.0",
+    "@angular/cdk": "^19.2.7",
-    "@angular/compiler": "^20.0.0",
+    "@angular/common": "^19.2.4",
-    "@angular/core": "^20.0.0",
+    "@angular/compiler": "^19.2.4",
-    "@angular/forms": "^20.0.0",
+    "@angular/core": "^19.2.4",
-    "@angular/material": "^20.0.1",
+    "@angular/forms": "^19.2.4",
-    "@angular/platform-browser": "^20.0.0",
+    "@angular/material": "^19.2.7",
-    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/platform-browser": "^19.2.4",
-    "@angular/router": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^19.2.4",
-    "@angular/service-worker": "^20.0.0",
+    "@angular/router": "^19.2.4",
+    "@angular/service-worker": "^19.2.4",
     "@tauri-apps/api": "^1.6.0",
     "@types/json-schema": "^7.0.15",
     "highlight.js": "^11.11.1",
@@ -29,12 +30,13 @@
     "ngx-monaco-editor-v2": "^19.0.2",
     "protobufjs": "^7.4.0",
     "rxjs": "^7.8.2",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.0.0",
+    "@angular/build": "^19.2.5",
-    "@angular/cli": "^20.0.0",
+    "@angular/cli": "^19.2.5",
-    "@angular/compiler-cli": "^20.0.0",
+    "@angular/compiler-cli": "^19.2.4",
     "@tauri-apps/cli": "^1.6.3",
     "@types/jasmine": "^5.1.7",
     "@types/protobufjs": "^6.0.0",

src/app/app.component.html

@@ -31,10 +31,7 @@
     [opened]="leftSideOpen()"
     (closed)="leftSideOpen.set(false)"
   >
-    <app-file-tree
+    <app-file-tree (fileSelected)="fileSelected($event)"></app-file-tree>
-      class="bubble-sidenav"
-      (fileSelected)="fileSelected($event)"
-    ></app-file-tree>
   </mat-sidenav>
   <mat-sidenav
     [opened]="rightSideOpen()"
@@ -43,7 +40,6 @@
     (closed)="rightSideOpen.set(false)"
   >
     <app-proto-definition-selector
-      class="bubble-sidenav"
       (messageSelected)="selectMessage($event)"
     ></app-proto-definition-selector>
   </mat-sidenav>

src/app/app.component.scss

@@ -33,9 +33,3 @@ app-editor {
 .mat-icon.filled {
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
 }
-
-.bubble-sidenav {
-  background-color: var(--mat-sys-secondary-container);
-  border-radius: 1rem;
-  padding: 1rem;
-}

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { CommonModule } from '@angular/common';
 import { Component, signal, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
@@ -21,6 +22,7 @@ const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   imports: [
+    CommonModule,
     EditorComponent,
     FileTreeComponent,
     MatButtonModule,

src/app/app.config.ts

@@ -1,7 +1,7 @@
 import {
   ApplicationConfig,
   isDevMode,
-  provideZonelessChangeDetection,
+  provideExperimentalZonelessChangeDetection,
   provideAppInitializer,
   inject,
 } from '@angular/core';
@@ -21,7 +21,7 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideZonelessChangeDetection(),
+    provideExperimentalZonelessChangeDetection(),
     provideRouter(routes),
     provideAnimationsAsync(),
     provideAppInitializer(() => {

src/app/editor/editor.component.html

@@ -7,7 +7,7 @@
 <div class="editor-items">
   @if(values()) { @for (item of selectedMessage().values; track $index) {
   <app-proto-field
-    [label]="item.friendlyName || item.name"
+    [label]="item.name"
     [configuration]="item.configuration"
     [value]="values()[item.name]"
     (valueChange)="updateValue(item.name, $event)"

src/app/editor/editor.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   ElementRef,
@@ -30,6 +31,7 @@ type PreviewType = 'raw' | 'edit' | 'diff';
 @Component({
   selector: 'app-editor',
   imports: [
+    CommonModule,
     ProtoFieldComponent,
     MatButtonModule,
     MatButtonToggleModule,
@@ -100,14 +102,17 @@ export class EditorComponent {
         }
       }
     });
-    effect(() => {
+    effect(
-      const message = this.selectedMessage();
+      () => {
-      this.values.set(
+        const message = this.selectedMessage();
-        Object.fromEntries(
+        this.values.set(
-          message.values.map((value) => [[value.name, undefined]])
+          Object.fromEntries(
-        )
+            message.values.map((value) => [[value.name, undefined]])
-      );
+          )
-    });
+        );
+      },
+      { allowSignalWrites: true }
+    );
 
     effect(async () => {
       const selectedFile = this.selectedFile();

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

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

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -11,42 +12,33 @@ 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',
+    selector: 'app-list-field',
-  imports: [
+    imports: [
-    MatButtonModule,
+        CommonModule,
-    MatExpansionModule,
+        MatButtonModule,
-    MatIconModule,
+        MatIconModule,
-    forwardRef(() => ProtoFieldComponent),
+        forwardRef(() => ProtoFieldComponent),
-  ],
+    ],
-  template: `
+    template: `<h3>{{ label() }}</h3>
-    <mat-accordion>
+    @if(values()) { @for(value of values(); track $index) {
-      <mat-expansion-panel [expanded]="true">
+    <div class="row-wrapper">
-        <mat-expansion-panel-header>
+      <app-proto-field
-          <mat-panel-title>{{ label() }}</mat-panel-title>
+        [configuration]="configuration().subConfiguration"
-        </mat-expansion-panel-header>
+        [value]="value"
-        @if(values()) { @for(value of values(); track $index) {
+        (valueChange)="updateValue($index, $event)"
-        <div class="row-wrapper">
+      ></app-proto-field>
-          <app-proto-field
+      <button mat-icon-button (click)="remove($index)">
-            [configuration]="configuration().subConfiguration"
+        <mat-icon>remove</mat-icon>
-            [value]="value"
+      </button>
-            (valueChange)="updateValue($index, $event)"
+    </div>
-          ></app-proto-field>
+    } }
-          <button mat-icon-button (click)="remove($index)">
+    <button mat-icon-button class="add-button" (click)="add()">
-            <mat-icon>remove</mat-icon>
+      <mat-icon>add</mat-icon>
-          </button>
+    </button>`,
-        </div>
+    styleUrl: './list-field.component.scss',
-        } }
+    changeDetection: ChangeDetectionStrategy.OnPush
-        <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,
 })
 export class ListFieldComponent {
   label = input<string>();

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

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

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -11,49 +12,40 @@ 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 === '';
 
 @Component({
-  selector: 'app-map-field',
+    selector: 'app-map-field',
-  imports: [
+    imports: [
-    forwardRef(() => ProtoFieldComponent),
+        CommonModule,
-    MatExpansionModule,
+        forwardRef(() => ProtoFieldComponent),
-    MatIconModule,
+        MatIconModule,
-    MatButtonModule,
+        MatButtonModule,
-  ],
+    ],
-  template: `
+    template: `<h3>{{ label() }}</h3>
-    <mat-accordion>
+    @if(valuePairs()) { @for(value of valuePairs(); track $index) {
-      <mat-expansion-panel [expanded]="true">
+    <div class="row-wrapper">
-        <mat-expansion-panel-header>
+      <app-proto-field
-          <mat-panel-title>{{ label() }}</mat-panel-title>
+        [configuration]="configuration().keyConfiguration"
-        </mat-expansion-panel-header>
+        [value]="value[0]"
-        @if(valuePairs()) { @for(value of valuePairs(); track $index) {
+        (valueChange)="updateKey($index, $event)"
-        <div class="row-wrapper">
+      ></app-proto-field>
-          <app-proto-field
+      <app-proto-field
-            [configuration]="configuration().keyConfiguration"
+        [configuration]="configuration().valueConfiguration"
-            [value]="value[0]"
+        [value]="value[1]"
-            (valueChange)="updateKey($index, $event)"
+        (valueChange)="updateValue($index, $event)"
-          ></app-proto-field>
+      ></app-proto-field>
-          <app-proto-field
+      <button mat-icon-button (click)="remove($index)">
-            [configuration]="configuration().valueConfiguration"
+        <mat-icon>remove</mat-icon>
-            [value]="value[1]"
+      </button>
-            (valueChange)="updateValue($index, $event)"
+    </div>
-          ></app-proto-field>
+    } }
-          <button mat-icon-button (click)="remove($index)">
+    <button mat-icon-button class="add-button" (click)="add()">
-            <mat-icon>remove</mat-icon>
+      <mat-icon>add</mat-icon>
-          </button>
+    </button>`,
-        </div>
+    styleUrl: './map-field.component.scss',
-        } }
+    changeDetection: ChangeDetectionStrategy.OnPush
-        <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,
 })
 export class MapFieldComponent {
   label = input<string>();
@@ -65,19 +57,22 @@ export class MapFieldComponent {
   private changedInternal = false;
 
   constructor() {
-    effect(() => {
+    effect(
-      // TODO: Super hacky but can't really think of another way to keep these in sync
+      () => {
-      //    without removing an entry when the key gets blanked. Would need an alternate
+        // TODO: Super hacky but can't really think of another way to keep these in sync
-      //    design that updated on blur only perhaps
+        //    without removing an entry when the key gets blanked. Would need an alternate
-      if (this.changedInternal) {
+        //    design that updated on blur only perhaps
-        this.changedInternal = false;
+        if (this.changedInternal) {
-        return;
+          this.changedInternal = false;
-      }
+          return;
-      const values = this.values();
+        }
-      if (values) {
+        const values = this.values();
-        this.valuePairs.set(Object.entries(values));
+        if (values) {
-      }
+          this.valuePairs.set(Object.entries(values));
-    });
+        }
+      },
+      { allowSignalWrites: true }
+    );
   }
 
   add() {

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

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

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -8,37 +9,25 @@ 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',
+    selector: 'app-object-field',
-  imports: [MatExpansionModule, forwardRef(() => ProtoFieldComponent)],
+    imports: [CommonModule, forwardRef(() => ProtoFieldComponent)],
-  template: `
+    template: `<h3>
-    <mat-accordion>
+      {{ label() }} ({{ configuration().messageDefinition.name }})
-      <mat-expansion-panel [expanded]="true">
+    </h3>
-        <mat-expansion-panel-header>
+    <div>
-          <mat-panel-title>
+      @for (item of configuration().messageDefinition.values; track $index) {
-            {{ label() ?? configuration().messageDefinition.name }}
+      <app-proto-field
-          </mat-panel-title>
+        [label]="item.name"
-          @if(label()) {
+        [configuration]="item.configuration"
-          <mat-panel-description>
+        [value]="currentValue()[item.name]"
-            {{ configuration().messageDefinition.name }}
+        (valueChange)="updateValue(item.name, $event)"
-          </mat-panel-description>
+      ></app-proto-field>
-          }
+      }
-        </mat-expansion-panel-header>
+    </div>`,
-        @for (item of configuration().messageDefinition.values; track $index) {
+    styleUrl: './object-field.component.scss',
-        <app-proto-field
+    changeDetection: ChangeDetectionStrategy.OnPush
-          [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,
 })
 export class ObjectFieldComponent {
   label = input<string>();

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -26,19 +27,20 @@ import { ObjectFieldComponent } from '../object-field/object-field.component';
 import { StringFieldComponent } from '../string-field/string-field.component';
 
 @Component({
-  selector: 'app-proto-field',
+    selector: 'app-proto-field',
-  imports: [
+    imports: [
-    FormsModule,
+        CommonModule,
-    ListFieldComponent,
+        FormsModule,
-    MapFieldComponent,
+        ListFieldComponent,
-    MatCheckboxModule,
+        MapFieldComponent,
-    MatFormFieldModule,
+        MatCheckboxModule,
-    MatSelectModule,
+        MatFormFieldModule,
-    MatInputModule,
+        MatSelectModule,
-    ObjectFieldComponent,
+        MatInputModule,
-    StringFieldComponent,
+        ObjectFieldComponent,
-  ],
+        StringFieldComponent,
-  template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
+    ],
+    template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
     <app-string-field
       [label]="label()"
       [configuration]="stringConfiguration()"
@@ -55,17 +57,14 @@ import { StringFieldComponent } from '../string-field/string-field.component';
         [min]="numericConfiguration().min ?? null"
         [max]="numericConfiguration().max ?? null"
       />
-      @if(number.hasError('min')) {
+      <mat-hint *ngIf="number.hasError('min')"
-      <mat-hint
         >Number should not be less than
         {{ numericConfiguration().min }}</mat-hint
       >
-      } @if(number.hasError('max')) {
+      <mat-hint *ngIf="number.hasError('max')"
-      <mat-hint
         >Number should not greater than
         {{ numericConfiguration().max }}</mat-hint
       >
-      }
     </mat-form-field>
     } @case (MessageTypeEnum.Boolean) {
     <p>
@@ -75,11 +74,10 @@ import { StringFieldComponent } from '../string-field/string-field.component';
     <mat-form-field>
       <mat-label>{{ label() }}</mat-label>
       <mat-select [(value)]="value">
+        @for(option of enumConfiguration().options; track
+        enumConfiguration()!.options) {
         <mat-option>None</mat-option>
-        @for(option of enumConfiguration().options; track option) {
+        <mat-option [value]="option">{{ option }}</mat-option>
-        <mat-option [value]="option.protoName">{{
-          option.friendlyName || option.protoName
-        }}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -102,8 +100,8 @@ import { StringFieldComponent } from '../string-field/string-field.component';
       [configuration]="objectConfiguration()"
     ></app-object-field>
     } @case (MessageTypeEnum.Raw) {}}`,
-  styleUrl: './proto-field.component.scss',
+    styleUrl: './proto-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProtoFieldComponent {
   label = input<string>();

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -11,14 +12,15 @@ import { MatInputModule } from '@angular/material/input';
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 
 @Component({
-  selector: 'app-string-field',
+    selector: 'app-string-field',
-  imports: [
+    imports: [
-    FormsModule,
+        CommonModule,
-    MatFormFieldModule,
+        FormsModule,
-    MatInputModule,
+        MatFormFieldModule,
-    MonacoEditorModule,
+        MatInputModule,
-  ],
+        MonacoEditorModule,
-  template: ` @if(configuration().textType === 'text') {
+    ],
+    template: ` @if(configuration().textType === 'text') {
     <mat-form-field>
       <mat-label>{{ label() }}</mat-label>
       <input
@@ -41,8 +43,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
       [options]="editorOptions"
     ></ngx-monaco-editor>
     }`,
-  styleUrl: './string-field.component.css',
+    styleUrl: './string-field.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StringFieldComponent {
   label = input();

src/app/file-tree/file-tree.component.ts

@@ -1,4 +1,5 @@
 import { FlatTreeControl } from '@angular/cdk/tree';
+import { CommonModule } from '@angular/common';
 import {
   Component,
   ElementRef,
@@ -39,7 +40,7 @@ const collator = new Intl.Collator(undefined, { numeric: true });
 
 @Component({
   selector: 'app-file-tree',
-  imports: [MatButtonModule, MatIconModule, MatTreeModule],
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatTreeModule],
   templateUrl: './file-tree.component.html',
   styleUrl: './file-tree.component.scss',
 })
@@ -149,10 +150,7 @@ export class FileTreeComponent implements OnInit, OnDestroy {
         const file = files[i];
         if (file.webkitRelativePath?.includes('/')) {
           // Got a file in a folder, so put it into the appropriate folder in the tree
-          if (i === 0) {
+          const splitFilePath = file.webkitRelativePath.split('/');
-            this.selectedDirectory.set(file.webkitRelativePath.split('/')[0]);
-          }
-          const splitFilePath = file.webkitRelativePath.split('/').slice(1);
           let currentChildren: FileOrFolder[] | undefined = mappedFiles;
           for (let j = 0; j < splitFilePath.length - 1; j++) {
             const relativePath = splitFilePath[j];

src/app/model/proto-message.model.ts

@@ -38,13 +38,8 @@ export interface ObjectMessage extends MessageConfiguration {
 
 export interface RawMessage extends MessageConfiguration {}
 
-export interface EnumMessageOption {
-  protoName: string;
-  friendlyName?: string;
-}
-
 export interface EnumMessage extends MessageConfiguration {
-  options: EnumMessageOption[];
+  options: string[];
 }
 
 export interface MessageConfiguration {
@@ -95,12 +90,11 @@ export const RawMessage = (): RawMessage => ({ type: MessageTypeEnum.Raw });
 
 export const EnumMessage = (options: string[]) => ({
   type: MessageTypeEnum.Enum,
-  options: options.map((option) => ({ protoName: option })),
+  options,
 });
 
 export interface ProtoMessageField<T extends MessageConfiguration> {
   name: string;
-  friendlyName?: string;
   configuration: T;
 }
 
@@ -125,9 +119,7 @@ export const UnknownProto = (
 ): ProtoMessage => ({
   name,
   fullName,
-  values: [
+  values: [{ name: 'Raw JSON', configuration: RawMessage() }],
-    { name: 'Raw JSON', friendlyName: 'Raw JSON', configuration: RawMessage() },
-  ],
 });
 
 export const EDITABLE_MESSAGE_TYPES = [

src/app/proto-definition-selector/definition-editor/definition-editor-field/definition-editor-field.component.ts

@@ -1,12 +1,13 @@
+import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import {
-  EnumMessage,
   ListMessage,
   MapMessage,
   MessageConfiguration,
   MessageTypeEnum,
   NumericMessage,
   ObjectMessage,
+  ProtoMessageField,
   StringMessage,
 } from '../../../model/proto-message.model';
 import { FormsModule } from '@angular/forms';
@@ -17,11 +18,11 @@ import { ListEditorFieldComponent } from '../list-editor-field/list-editor-field
 import { MapEditorFieldComponent } from '../map-editor-field/map-editor-field.component';
 import { ObjectEditorFieldComponent } from '../object-editor-field/object-editor-field.component';
 import { StringEditorFieldComponent } from '../string-editor-field/string-editor-field.component';
-import { EnumEditorFieldComponent } from '../enum-editor-field/enum-editor-field.component';
 
 @Component({
   selector: 'app-definition-editor-field',
   imports: [
+    CommonModule,
     FormsModule,
     ListEditorFieldComponent,
     MapEditorFieldComponent,
@@ -30,7 +31,6 @@ import { EnumEditorFieldComponent } from '../enum-editor-field/enum-editor-field
     MatSelectModule,
     ObjectEditorFieldComponent,
     StringEditorFieldComponent,
-    EnumEditorFieldComponent,
   ],
   template: ` @switch (fieldConfiguration().type) {
     @case(MessageTypeEnum.String) {
@@ -48,11 +48,9 @@ import { EnumEditorFieldComponent } from '../enum-editor-field/enum-editor-field
         [(ngModel)]="configuration.min"
         [max]="configuration.max ?? null"
       />
-      @if(min.hasError('max')) {
+      <mat-hint *ngIf="min.hasError('max')"
-      <mat-hint
         >Min should not be greater than {{ configuration.max }}</mat-hint
       >
-      }
     </mat-form-field>
     <mat-form-field>
       <mat-label>Max</mat-label>
@@ -63,9 +61,9 @@ import { EnumEditorFieldComponent } from '../enum-editor-field/enum-editor-field
         [(ngModel)]="configuration.max"
         [min]="configuration.min ?? null"
       />
-      @if(max.hasError('min')) {
+      <mat-hint *ngIf="max.hasError('min')"
-      <mat-hint>Max should not be less than {{ configuration.min }}</mat-hint>
+        >Max should not be less than {{ configuration.min }}</mat-hint
-      }
+      >
     </mat-form-field>
     } @case (MessageTypeEnum.List) {
     <app-list-editor-field
@@ -79,10 +77,6 @@ import { EnumEditorFieldComponent } from '../enum-editor-field/enum-editor-field
     <app-object-editor-field
       [field]="objectConfiguration(fieldConfiguration())"
     ></app-object-editor-field>
-    } @case(MessageTypeEnum.Enum) {
-    <app-enum-editor-field
-      [configuration]="enumConfiguration(fieldConfiguration())"
-    ></app-enum-editor-field>
     } }`,
   styleUrl: './definition-editor-field.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -110,9 +104,5 @@ export class DefinitionEditorFieldComponent {
     return configuration as ObjectMessage;
   }
 
-  protected enumConfiguration(configuration: MessageConfiguration) {
-    return configuration as EnumMessage;
-  }
-
   protected readonly MessageTypeEnum = MessageTypeEnum;
 }

src/app/proto-definition-selector/definition-editor/definition-editor.component.scss

@@ -1,3 +0,0 @@
-mat-form-field {
-  display: block;
-}

src/app/proto-definition-selector/definition-editor/definition-editor.component.ts

@@ -1,7 +1,9 @@
+import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import {
+  EDITABLE_MESSAGE_TYPES,
   ListMessage,
   MessageConfiguration,
   MessageTypeEnum,
@@ -9,18 +11,13 @@ import {
   ProtoMessage,
 } from '../../model/proto-message.model';
 import { DefinitionEditorFieldComponent } from './definition-editor-field/definition-editor-field.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-definition-editor',
   imports: [
-    FormsModule,
+    CommonModule,
     MatButtonModule,
     MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
     DefinitionEditorFieldComponent,
   ],
   template: `
@@ -28,14 +25,6 @@ import { MatInputModule } from '@angular/material/input';
     <mat-dialog-content>
       @for (field of editableMessages; track $index) {
       <h3>{{ field.name }}</h3>
-      <mat-form-field>
-        <mat-label>Friendly Name</mat-label>
-        <input
-          matInput
-          [(ngModel)]="field.friendlyName"
-          placeholder="Optional"
-        />
-      </mat-form-field>
       <app-definition-editor-field
         [fieldConfiguration]="field.configuration"
       ></app-definition-editor-field>
@@ -51,5 +40,26 @@ import { MatInputModule } from '@angular/material/input';
 export class DefinitionEditorComponent {
   protected protoMessage = inject<ProtoMessage>(MAT_DIALOG_DATA);
 
-  protected editableMessages = this.protoMessage.values;
+  protected editableMessages = this.protoMessage.values.filter((message) =>
+    this.filterMessageConfiguration(message.configuration)
+  );
+
+  private filterMessageConfiguration(
+    configuration: MessageConfiguration
+  ): boolean {
+    if (configuration.type === MessageTypeEnum.List) {
+      return this.filterMessageConfiguration(
+        (configuration as ListMessage).subConfiguration
+      );
+    }
+    if (configuration.type === MessageTypeEnum.Object) {
+      // Ensure at least one nested message can be configured
+      return !!(configuration as ObjectMessage).messageDefinition.values.find(
+        (message) => this.filterMessageConfiguration(message.configuration)
+      );
+    }
+
+    // Note: Map can always be configured, as key needs to be a string or numeric type
+    return EDITABLE_MESSAGE_TYPES.includes(configuration.type);
+  }
 }

src/app/proto-definition-selector/definition-editor/enum-editor-field/enum-editor-field.component.css

@@ -1,3 +0,0 @@
-mat-form-field {
-  display: block;
-}

src/app/proto-definition-selector/definition-editor/enum-editor-field/enum-editor-field.component.ts

@@ -1,28 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { EnumMessage } from '../../../model/proto-message.model';
-import { MatFormFieldModule, MatLabel } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-enum-editor-field',
-  standalone: true,
-  imports: [FormsModule, MatFormFieldModule, MatInputModule, MatLabel],
-  template: `
-    @for (option of configuration().options; track $index) {
-    <mat-form-field>
-      <mat-label>{{ option.protoName }}</mat-label>
-      <input
-        matInput
-        [(ngModel)]="option.friendlyName"
-        placeholder="Friendly Name"
-      />
-    </mat-form-field>
-    }
-  `,
-  styleUrl: './enum-editor-field.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class EnumEditorFieldComponent {
-  configuration = input.required<EnumMessage>();
-}

src/app/proto-definition-selector/definition-editor/list-editor-field/list-editor-field.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -9,7 +10,7 @@ import { ListMessage } from '../../../model/proto-message.model';
 
 @Component({
   selector: 'app-list-editor-field',
-  imports: [forwardRef(() => DefinitionEditorFieldComponent)],
+  imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
   template: `<app-definition-editor-field
     [fieldConfiguration]="field().subConfiguration"
   ></app-definition-editor-field>`,

src/app/proto-definition-selector/definition-editor/map-editor-field/map-editor-field.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -13,7 +14,7 @@ import {
 
 @Component({
   selector: 'app-map-editor-field',
-  imports: [forwardRef(() => DefinitionEditorFieldComponent)],
+  imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
   template: `
     <h4>Key Configuration</h4>
     <app-definition-editor-field

src/app/proto-definition-selector/definition-editor/object-editor-field/object-editor-field.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -5,43 +6,31 @@ import {
   forwardRef,
   input,
 } from '@angular/core';
-import { ObjectMessage } from '../../../model/proto-message.model';
+import {
+  EDITABLE_MESSAGE_TYPES,
+  ObjectMessage,
+} from '../../../model/proto-message.model';
 import { DefinitionEditorFieldComponent } from '../definition-editor-field/definition-editor-field.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-object-editor-field',
-  imports: [
+  imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
-    FormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    forwardRef(() => DefinitionEditorFieldComponent),
-  ],
   template: `
     @for (field of editableFields(); track $index) {
     <h4>{{ field.name }}</h4>
-    <mat-form-field>
-      <mat-label>Friendly Name</mat-label>
-      <input matInput [(ngModel)]="field.friendlyName" placeholder="Optional" />
-    </mat-form-field>
     <app-definition-editor-field
       [fieldConfiguration]="field.configuration"
     ></app-definition-editor-field>
     }
   `,
-  styles: `
-  mat-form-field {
-    display: block;
-  }
-  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ObjectEditorFieldComponent {
   field = input.required<ObjectMessage>();
 
-  protected editableFields = computed(
+  protected editableFields = computed(() =>
-    () => this.field().messageDefinition.values
+    this.field().messageDefinition.values.filter((field) =>
+      EDITABLE_MESSAGE_TYPES.includes(field.configuration.type)
+    )
   );
 }

src/app/proto-definition-selector/definition-editor/string-editor-field/string-editor-field.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -7,9 +8,14 @@ import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-string-editor-field',
-  imports: [FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule],
+  imports: [
-  template: `
+    CommonModule,
-    <mat-form-field>
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+  ],
+  template: ` <mat-form-field>
       <mat-label>Max Length</mat-label>
       <input matInput type="number" [(ngModel)]="configuration().maxLength" />
     </mat-form-field>
@@ -19,8 +25,7 @@ import { MatInputModule } from '@angular/material/input';
         <mat-option value="text">Text</mat-option>
         <mat-option value="sql">SQL</mat-option>
       </mat-select>
-    </mat-form-field>
+    </mat-form-field>`,
-  `,
   styleUrl: './string-editor-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/proto-definition-selector/json-schema-importer.service.ts

@@ -1,166 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
-  BooleanMessage,
-  EnumMessage,
-  ListMessage,
-  MessageConfiguration,
-  NumericMessage,
-  ObjectMessage,
-  ProtoMessage,
-  ProtoMessageField,
-  StringMessage,
-  UnknownProto,
-} from '../model/proto-message.model';
-import { JSONSchema7 } from 'json-schema';
-
-// jSON Schema types: https://json-schema.org/understanding-json-schema/reference/type
-// Note: There are specific keywords for each type that should be considered.
-
-// Ignore required properties for now, we don't care about this yet (in protobuf everything is optional
-//  anyway)
-// Also ignore references/don't follow them, they can be unknown/raw json. Later can add an option to follow
-//  trusted/untrusted references. Only use $ref that starts with # as it's a local ref/defined in the file.
-// Also ignore pattern properties: https://tour.json-schema.org/content/03-Objects/01-Pattern-Properties
-// Also ignore conditional validation: https://tour.json-schema.org/content/05-Conditional-Validation/01-Ensuring-Conditional-Property-Presence
-
-// Bare minimum to support is anything required by ingey
-
-// Definitely do want to consider reusable subschemas though, already have a similar check to this
-// in protobuf parsing as well when a nested message is used: https://tour.json-schema.org/content/06-Combining-Subschemas/01-Reusing-and-Referencing-with-defs-and-ref
-// Simple example schema (create a test for this):
-// {
-//   "$schema": "https://json-schema.org/draft/2020-12/schema",
-//   "$id": "https://example.com/product.schema.json",
-//   "title": "Product",
-//   "description": "A product from Acme's catalog",
-//   "type": "object",
-//   "properties": {
-//     "productId": {
-//       "description": "The unique identifier for a product",
-//       "type": "integer"
-//     },
-//     "productName": {
-//       "description": "Name of the product",
-//       "type": "string"
-//     }
-//   }
-// }
-
-@Injectable({
-  providedIn: 'root',
-})
-export class JsonSchemaImporterService {
-  async parseJsonSchema(
-    fileName: string,
-    schema: JSONSchema7
-  ): Promise<ProtoMessage[]> {
-    const rootElements: ProtoMessage[] = [];
-    if (schema['$defs']) {
-      // Parse all definitions first, they're referenced later
-      for (const [name, value] of Object.entries(schema.$defs)) {
-        if (value instanceof Boolean) {
-          throw new Error('Cannot use boolean for definition value');
-        }
-        const jsonValue = value as JSONSchema7;
-        const objectMessage = ObjectMessage({ name, fileName, values: [] });
-        const properties = jsonValue.properties;
-        if (!properties) {
-          throw new Error('Malformed JOSN Schema, no properties present');
-        }
-        for (const [name, value] of Object.entries(properties)) {
-          objectMessage.messageDefinition.values.push({
-            name,
-            configuration: this.convertMessageRecursive(
-              value as JSONSchema7,
-              rootElements,
-              name
-            ),
-          });
-        }
-      }
-    }
-    if (!schema.title || schema.type !== 'object') {
-      throw new Error('Unsupported JSON Schema, root must be an object');
-    }
-    const properties = schema.properties;
-    if (!properties) {
-      throw new Error('Malformed JOSN Schema, no properties present');
-    }
-    const objectMessage: ObjectMessage = ObjectMessage({
-      name: schema.title!,
-      fileName,
-      values: [],
-    });
-    for (const [name, value] of Object.entries(properties)) {
-      objectMessage.messageDefinition.values.push({
-        name,
-        configuration: this.convertMessageRecursive(
-          value as JSONSchema7,
-          rootElements,
-          name
-        ),
-      });
-    }
-    return [
-      {
-        name: schema.title,
-        fileName,
-        values: [{ name: schema.title, configuration: objectMessage }],
-      },
-      ...rootElements,
-    ];
-  }
-
-  // Convert each type here?
-  private convertMessageRecursive(
-    value: JSONSchema7,
-    parsedMessages: ProtoMessage[],
-    name?: string
-  ): MessageConfiguration {
-    if (value.$ref) {
-      const refMessageName = value.$ref.substring('#/definitions/'.length);
-      const foundMessage = parsedMessages.find(
-        (message) => message.name === refMessageName
-      );
-      return ObjectMessage(foundMessage!);
-    }
-    const type = Array.isArray(value.type) ? value.type[0] : value.type;
-    switch (type) {
-      case 'string':
-        if (value.enum) {
-          // TODO: Validate we have strings
-          return EnumMessage(value.enum.map((value) => value as string));
-        }
-        return StringMessage();
-      case 'integer':
-      case 'number':
-        return NumericMessage();
-      case 'array':
-        if (Array.isArray(value.items)) {
-          throw new Error('Cannot parse array type');
-        }
-        return ListMessage(
-          this.convertMessageRecursive(
-            value.items as JSONSchema7,
-            parsedMessages
-          )
-        );
-      case 'boolean':
-        return BooleanMessage();
-      case 'object':
-        return ObjectMessage({
-          name: name!,
-          values: Object.entries(value.properties!).map(([name, value]) => ({
-            name,
-            configuration: this.convertMessageRecursive(
-              // TODO: How can this be a boolean???
-              value as JSONSchema7,
-              parsedMessages,
-              name
-            ),
-          })),
-        });
-    }
-    throw new Error('Invalid message type found');
-  }
-}

src/app/proto-definition-selector/proto-definition-selector.component.ts

@@ -1,28 +1,16 @@
-import {
+import { CommonModule } from '@angular/common';
-  ChangeDetectionStrategy,
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, computed, output, signal, viewChild, inject } from '@angular/core';
-  Component,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  computed,
-  inject,
-  output,
-  signal,
-  viewChild,
-} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialog } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
 import { MatListModule, MatSelectionList } from '@angular/material/list';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatTreeModule } from '@angular/material/tree';
-import { save } from '@tauri-apps/api/dialog';
-import { writeTextFile } from '@tauri-apps/api/fs';
 import { ProtoMessage } from '../model/proto-message.model';
-import { DefinitionEditorComponent } from './definition-editor/definition-editor.component';
 import { ProtoDefinitionService } from './proto-definition.service';
-import { JSONSchema7 } from 'json-schema';
+import { MatTreeModule } from '@angular/material/tree';
-import { JsonSchemaImporterService } from './json-schema-importer.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { writeTextFile } from '@tauri-apps/api/fs';
+import { save } from '@tauri-apps/api/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialog } from '@angular/material/dialog';
+import { DefinitionEditorComponent } from './definition-editor/definition-editor.component';
 
 declare const __TAURI__: any;
 
@@ -30,23 +18,26 @@ const collator = new Intl.Collator(undefined, { numeric: true });
 
 @Component({
   selector: 'app-proto-definition-selector',
-  imports: [MatButtonModule, MatIconModule, MatListModule, MatTreeModule],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatTreeModule,
+  ],
   template: `
-    <h2>Schemas</h2>
+    <h2>Protobuf Definitions</h2>
     <button mat-button (click)="protoSelector.click()">
-      Import Protobuf Definition
+      Select definitions
-    </button>
-    <button mat-button (click)="jsonSchemaSelector.click()">
-      Import JSON Schema
-    </button>
-    <button mat-button (click)="configurationSelector.click()">
-      Import Configuration
     </button>
     @if(currentFiles().length > 0) {
     <button mat-button (click)="exportConfiguration()">
       Export Configuration
     </button>
     }
+    <button mat-button (click)="configurationSelector.click()">
+      Import Configuration
+    </button>
     <mat-selection-list [multiple]="false">
       @for (item of currentFiles(); track $index) {
       <mat-list-option
@@ -75,7 +66,7 @@ const collator = new Intl.Collator(undefined, { numeric: true });
         >
           <mat-icon>edit</mat-icon>
         </button>
-        <div>{{ item.name }}</div>
+        <div matListItemLine>{{ item.name }}</div>
       </mat-list-option>
       }
     </mat-selection-list>
@@ -87,12 +78,6 @@ const collator = new Intl.Collator(undefined, { numeric: true });
       (change)="addDefinitionFiles()"
       accept=".proto"
     />
-    <input
-      #jsonSchemaSelector
-      type="file"
-      (change)="importJsonSchema()"
-      accept=".json"
-    />
     <input
       #configurationSelector
       type="file"
@@ -105,7 +90,6 @@ const collator = new Intl.Collator(undefined, { numeric: true });
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProtoDefinitionSelectorComponent {
-  private jsonSchemaImporterService = inject(JsonSchemaImporterService);
   private protoDefinitionService = inject(ProtoDefinitionService);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
@@ -114,8 +98,6 @@ export class ProtoDefinitionSelectorComponent {
 
   protected protoSelector =
     viewChild<ElementRef<HTMLInputElement>>('protoSelector');
-  protected jsonSchemaSelector =
-    viewChild<ElementRef<HTMLInputElement>>('jsonSchemaSelector');
   protected configurationSelector = viewChild<ElementRef<HTMLInputElement>>(
     'configurationSelector'
   );
@@ -189,29 +171,6 @@ export class ProtoDefinitionSelectorComponent {
     );
   }
 
-  protected async importJsonSchema() {
-    const jsonSchemaFile = this.jsonSchemaSelector()?.nativeElement.files;
-    try {
-      const fileContents = await jsonSchemaFile?.item(0)?.text();
-      if (fileContents) {
-        const schema: JSONSchema7 = JSON.parse(fileContents);
-        const messageObjects =
-          await this.jsonSchemaImporterService.parseJsonSchema(
-            jsonSchemaFile?.item(0)?.name!,
-            schema
-          );
-        this.allProtoFiles.set(messageObjects);
-        this.selectedDefinition.set(messageObjects);
-        this.selectedProtoFile.set(null);
-      }
-    } catch (err) {
-      console.error(err);
-      this.snackBar.open(
-        "Could not parse json schema file, please ensure it's valid. Note: This feature is still unstable and is likely to have errors with valid schemas."
-      );
-    }
-  }
-
   protected async importConfiguration() {
     const configurationFile = this.configurationSelector()?.nativeElement.files;
     try {

src/app/proto-definition-selector/proto-definition.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 
-import { provideZonelessChangeDetection } from '@angular/core';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 import {
   EnumMessage,
   ListMessage,
@@ -38,7 +38,7 @@ message Test {
 }
 
 message ReferenceMessage {
-  repeated DoubleNestedMessage test = 1;
+  repeated DoubleNestedMessage test = 1; 
   Test.NestedMessage nested_message = 2;
   EnumTest enum_test = 3;
 }
@@ -58,7 +58,7 @@ describe('TestService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [provideZonelessChangeDetection()],
+      providers: [provideExperimentalZonelessChangeDetection()],
     });
     service = TestBed.inject(ProtoDefinitionService);
   });
@@ -142,7 +142,7 @@ describe('TestService', () => {
 
     const enumMessage = converted.values[10].configuration as EnumMessage;
     expect(enumMessage.options.length).toBe(1);
-    expect(enumMessage.options[0].protoName).toBe('Hello');
+    expect(enumMessage.options[0]).toBe('Hello');
 
     const objectListMessage = converted.values[12].configuration as ListMessage;
     expect(objectListMessage.type).toBe(MessageTypeEnum.List);

src/app/proto-definition-selector/proto-definition.service.ts

@@ -383,6 +383,7 @@ export class ProtoDefinitionService {
     switch (fieldType) {
       case 'string':
         return StringMessage();
+        break;
       case 'int32':
       case 'int64':
       case 'float':

src/styles.scss

@@ -20,7 +20,7 @@ html {
   @include mat.sidenav-overrides(
     (
       container-shape: 1rem,
-      container-background-color: transparent,
+      container-background-color: var(--mat-sys-secondary-container),
     )
   );
 }