Merge branch 'main' into angular-update

# Conflicts: # bun.lockb # package.json # src/styles.scss
Update packages, switch to new material theming system and reduce density
2025-03-29 16:47:19 +10:30 · 2025-03-29 16:42:58 +10:30 · 2025-02-11 11:10:35 +10:30 · 2025-02-11 11:02:53 +10:30
35 changed files with 268 additions and 573 deletions
--- a/.gitea/workflows/release-nightly.yaml
+++ b/.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
--- a/angular.json
+++ b/angular.json
@@ -58,8 +58,7 @@
                }
              ],
              "outputHashing": "all",
-              "serviceWorker": "ngsw-config.json",
-              "security": { "autoCsp": true }
+              "serviceWorker": "ngsw-config.json"
            },
            "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": "."
-    }
  }
 }
--- a/bun.lockb
+++ b/bun.lockb
--- a/karma.conf.js
+++ b/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: {
--- a/package.json
+++ b/package.json
@@ -11,17 +11,18 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^20.0.0",
-    "@angular/cdk": "^20.0.1",
-    "@angular/common": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/material": "^20.0.1",
-    "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-browser-dynamic": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "@angular/service-worker": "^20.0.0",
+    "@angular-devkit/build-angular": "^19.2.5",
+    "@angular/animations": "^19.2.4",
+    "@angular/cdk": "^19.2.7",
+    "@angular/common": "^19.2.4",
+    "@angular/compiler": "^19.2.4",
+    "@angular/core": "^19.2.4",
+    "@angular/forms": "^19.2.4",
+    "@angular/material": "^19.2.7",
+    "@angular/platform-browser": "^19.2.4",
+    "@angular/platform-browser-dynamic": "^19.2.4",
+    "@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/cli": "^20.0.0",
-    "@angular/compiler-cli": "^20.0.0",
+    "@angular/build": "^19.2.5",
+    "@angular/cli": "^19.2.5",
+    "@angular/compiler-cli": "^19.2.4",
    "@tauri-apps/cli": "^1.6.3",
    "@types/jasmine": "^5.1.7",
    "@types/protobufjs": "^6.0.0",
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -31,10 +31,7 @@
    [opened]="leftSideOpen()"
    (closed)="leftSideOpen.set(false)"
  >
-    <app-file-tree
-      class="bubble-sidenav"
-      (fileSelected)="fileSelected($event)"
-    ></app-file-tree>
+    <app-file-tree (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>
--- a/src/app/app.component.scss
+++ b/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;
-}
--- a/src/app/app.component.ts
+++ b/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,
--- a/src/app/app.config.ts
+++ b/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(() => {
--- a/src/app/editor/editor.component.html
+++ b/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)"
--- a/src/app/editor/editor.component.ts
+++ b/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(
          Object.fromEntries(
            message.values.map((value) => [[value.name, undefined]])
          )
        );
-    });
+      },
+      { allowSignalWrites: true }
+    );

    effect(async () => {
      const selectedFile = this.selectedFile();
--- a/src/app/editor/list-field/list-field.component.scss
+++ b/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;
+}
--- a/src/app/editor/list-field/list-field.component.ts
+++ b/src/app/editor/list-field/list-field.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
  AfterViewInit,
  ChangeDetectionStrategy,
@@ -11,22 +12,16 @@ 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: [
+        CommonModule,
        MatButtonModule,
-    MatExpansionModule,
        MatIconModule,
        forwardRef(() => ProtoFieldComponent),
    ],
-  template: `
-    <mat-accordion>
-      <mat-expansion-panel [expanded]="true">
-        <mat-expansion-panel-header>
-          <mat-panel-title>{{ label() }}</mat-panel-title>
-        </mat-expansion-panel-header>
+    template: `<h3>{{ label() }}</h3>
    @if(values()) { @for(value of values(); track $index) {
    <div class="row-wrapper">
      <app-proto-field
@@ -41,12 +36,9 @@ import { MatExpansionModule } from '@angular/material/expansion';
    } }
    <button mat-icon-button class="add-button" (click)="add()">
      <mat-icon>add</mat-icon>
-        </button>
-      </mat-expansion-panel>
-    </mat-accordion>
-  `,
+    </button>`,
    styleUrl: './list-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ListFieldComponent {
  label = input<string>();
--- a/src/app/editor/map-field/map-field.component.scss
+++ b/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;
+}
--- a/src/app/editor/map-field/map-field.component.ts
+++ b/src/app/editor/map-field/map-field.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -11,24 +12,18 @@ 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',
    imports: [
+        CommonModule,
        forwardRef(() => ProtoFieldComponent),
-    MatExpansionModule,
        MatIconModule,
        MatButtonModule,
    ],
-  template: `
-    <mat-accordion>
-      <mat-expansion-panel [expanded]="true">
-        <mat-expansion-panel-header>
-          <mat-panel-title>{{ label() }}</mat-panel-title>
-        </mat-expansion-panel-header>
+    template: `<h3>{{ label() }}</h3>
    @if(valuePairs()) { @for(value of valuePairs(); track $index) {
    <div class="row-wrapper">
      <app-proto-field
@@ -48,12 +43,9 @@ const keyIsEmpty = (key: string | number) => key == null || key === '';
    } }
    <button mat-icon-button class="add-button" (click)="add()">
      <mat-icon>add</mat-icon>
-        </button>
-      </mat-expansion-panel>
-    </mat-accordion>
-  `,
+    </button>`,
    styleUrl: './map-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MapFieldComponent {
  label = input<string>();
@@ -65,7 +57,8 @@ 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
        //    design that updated on blur only perhaps
@@ -77,7 +70,9 @@ export class MapFieldComponent {
        if (values) {
          this.valuePairs.set(Object.entries(values));
        }
-    });
+      },
+      { allowSignalWrites: true }
+    );
  }

  add() {
--- a/src/app/editor/object-field/object-field.component.scss
+++ b/src/app/editor/object-field/object-field.component.scss
@@ -1,4 +0,0 @@
-:host {
-  display: block;
-  margin: 0.5rem 0;
-}
--- a/src/app/editor/object-field/object-field.component.ts
+++ b/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',
-  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>
+    imports: [CommonModule, 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"
+        [label]="item.name"
        [configuration]="item.configuration"
        [value]="currentValue()[item.name]"
        (valueChange)="updateValue(item.name, $event)"
      ></app-proto-field>
      }
-      </mat-expansion-panel>
-    </mat-accordion>
-  `,
+    </div>`,
    styleUrl: './object-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ObjectFieldComponent {
  label = input<string>();
--- a/src/app/editor/proto-field/proto-field.component.ts
+++ b/src/app/editor/proto-field/proto-field.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -28,6 +29,7 @@ import { StringFieldComponent } from '../string-field/string-field.component';
@Component({
    selector: 'app-proto-field',
    imports: [
+        CommonModule,
        FormsModule,
        ListFieldComponent,
        MapFieldComponent,
@@ -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
+      <mat-hint *ngIf="number.hasError('min')"
        >Number should not be less than
        {{ numericConfiguration().min }}</mat-hint
      >
-      } @if(number.hasError('max')) {
-      <mat-hint
+      <mat-hint *ngIf="number.hasError('max')"
        >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.protoName">{{
-          option.friendlyName || option.protoName
-        }}</mat-option>
+        <mat-option [value]="option">{{ option }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
@@ -103,7 +101,7 @@ import { StringFieldComponent } from '../string-field/string-field.component';
    ></app-object-field>
    } @case (MessageTypeEnum.Raw) {}}`,
    styleUrl: './proto-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProtoFieldComponent {
  label = input<string>();
--- a/src/app/editor/string-field/string-field.component.ts
+++ b/src/app/editor/string-field/string-field.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -13,6 +14,7 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
@Component({
    selector: 'app-string-field',
    imports: [
+        CommonModule,
        FormsModule,
        MatFormFieldModule,
        MatInputModule,
@@ -42,7 +44,7 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
    ></ngx-monaco-editor>
    }`,
    styleUrl: './string-field.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StringFieldComponent {
  label = input();
--- a/src/app/file-tree/file-tree.component.ts
+++ b/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) {
-            this.selectedDirectory.set(file.webkitRelativePath.split('/')[0]);
-          }
-          const splitFilePath = file.webkitRelativePath.split('/').slice(1);
+          const splitFilePath = file.webkitRelativePath.split('/');
          let currentChildren: FileOrFolder[] | undefined = mappedFiles;
          for (let j = 0; j < splitFilePath.length - 1; j++) {
            const relativePath = splitFilePath[j];
--- a/src/app/model/proto-message.model.ts
+++ b/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: [
-    { name: 'Raw JSON', friendlyName: 'Raw JSON', configuration: RawMessage() },
-  ],
+  values: [{ name: 'Raw JSON', configuration: RawMessage() }],
 });

 export const EDITABLE_MESSAGE_TYPES = [
--- a/src/app/proto-definition-selector/definition-editor/definition-editor-field/definition-editor-field.component.ts
+++ b/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
+      <mat-hint *ngIf="min.hasError('max')"
        >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>Max should not be less than {{ configuration.min }}</mat-hint>
-      }
+      <mat-hint *ngIf="max.hasError('min')"
+        >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;
 }
--- a/src/app/proto-definition-selector/definition-editor/definition-editor.component.scss
+++ b/src/app/proto-definition-selector/definition-editor/definition-editor.component.scss
@@ -1,3 +0,0 @@
-mat-form-field {
-  display: block;
-}
--- a/src/app/proto-definition-selector/definition-editor/definition-editor.component.ts
+++ b/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);
+  }
 }
--- a/src/app/proto-definition-selector/definition-editor/enum-editor-field/enum-editor-field.component.css
+++ b/src/app/proto-definition-selector/definition-editor/enum-editor-field/enum-editor-field.component.css
@@ -1,3 +0,0 @@
-mat-form-field {
-  display: block;
-}
--- a/src/app/proto-definition-selector/definition-editor/enum-editor-field/enum-editor-field.component.ts
+++ b/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>();
-}
--- a/src/app/proto-definition-selector/definition-editor/list-editor-field/list-editor-field.component.ts
+++ b/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>`,
--- a/src/app/proto-definition-selector/definition-editor/map-editor-field/map-editor-field.component.ts
+++ b/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
--- a/src/app/proto-definition-selector/definition-editor/object-editor-field/object-editor-field.component.ts
+++ b/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: [
-    FormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    forwardRef(() => DefinitionEditorFieldComponent),
-  ],
+  imports: [CommonModule, 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(
-    () => this.field().messageDefinition.values
+  protected editableFields = computed(() =>
+    this.field().messageDefinition.values.filter((field) =>
+      EDITABLE_MESSAGE_TYPES.includes(field.configuration.type)
+    )
  );
 }
--- a/src/app/proto-definition-selector/definition-editor/string-editor-field/string-editor-field.component.ts
+++ b/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],
-  template: `
-    <mat-form-field>
+  imports: [
+    CommonModule,
+    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,
 })
--- a/src/app/proto-definition-selector/json-schema-importer.service.ts
+++ b/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');
-  }
-}
--- a/src/app/proto-definition-selector/proto-definition-selector.component.ts
+++ b/src/app/proto-definition-selector/proto-definition-selector.component.ts
@@ -1,28 +1,16 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  computed,
-  inject,
-  output,
-  signal,
-  viewChild,
-} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, computed, output, signal, viewChild, inject } 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 { JsonSchemaImporterService } from './json-schema-importer.service';
+import { MatTreeModule } from '@angular/material/tree';
+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
-    </button>
-    <button mat-button (click)="jsonSchemaSelector.click()">
-      Import JSON Schema
-    </button>
-    <button mat-button (click)="configurationSelector.click()">
-      Import Configuration
+      Select definitions
    </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 {
--- a/src/app/proto-definition-selector/proto-definition.service.spec.ts
+++ b/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,
@@ -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);
--- a/src/app/proto-definition-selector/proto-definition.service.ts
+++ b/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':
--- a/src/styles.scss
+++ b/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),
    )
  );
 }
Author	SHA1	Message	Date
vato007	3762b6165e	Merge branch 'main' into angular-update # Conflicts: # bun.lockb # package.json # src/styles.scss	2025-03-29 16:47:19 +10:30
vato007	8f8285d800	Update packages, switch to new material theming system and reduce density	2025-03-29 16:42:58 +10:30
vato007	e1747ce20a	Update angular material to v19, run inject migration	2025-02-11 11:10:35 +10:30
vato007	5a4541435f	Update angular core and cli to v19	2025-02-11 11:02:53 +10:30