Fix project name for cloudflare publish command

Update node version in CI build
Specify node version so angular builds, revert back to ubuntu 22.04
2025-05-29 17:12:24 +09:30 · 2025-05-29 17:05:39 +09:30 · 2025-05-29 16:58:47 +09:30 · 2025-05-29 16:36:43 +09:30 · 2025-05-29 08:50:39 +09:30 · 2025-05-29 07:20:10 +09:30
35 changed files with 574 additions and 269 deletions
--- a/.gitea/workflows/release-nightly.yaml
+++ b/.gitea/workflows/release-nightly.yaml
@@ -32,6 +32,9 @@ 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:
@@ -49,9 +52,8 @@ jobs:
        run: bun run build

      - name: Publish to Cloudflare Pages
-        uses: cloudflare/pages-action@v1
+        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: buf
-          directory: dist/proto-creator/browser
+          command: pages deploy dist/proto-creator/browser --project-name=buf
--- a/angular.json
+++ b/angular.json
@@ -58,7 +58,8 @@
                }
              ],
              "outputHashing": "all",
-              "serviceWorker": "ngsw-config.json"
+              "serviceWorker": "ngsw-config.json",
+              "security": { "autoCsp": true }
            },
            "development": {
              "optimization": false,
@@ -84,10 +85,10 @@
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
        },
        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
          "options": {
            "polyfills": [],
            "tsConfig": "tsconfig.spec.json",
@@ -107,5 +108,31 @@
        }
      }
    }
+  },
+  "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,13 +4,12 @@
 module.exports = function (config) {
  config.set({
    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    frameworks: ['jasmine'],
    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,18 +11,17 @@
  },
  "private": true,
  "dependencies": {
-    "@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",
+    "@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",
    "@tauri-apps/api": "^1.6.0",
    "@types/json-schema": "^7.0.15",
    "highlight.js": "^11.11.1",
@@ -30,13 +29,12 @@
    "ngx-monaco-editor-v2": "^19.0.2",
    "protobufjs": "^7.4.0",
    "rxjs": "^7.8.2",
-    "tslib": "^2.8.1",
-    "zone.js": "^0.15.0"
+    "tslib": "^2.8.1"
  },
  "devDependencies": {
-    "@angular/build": "^19.2.5",
-    "@angular/cli": "^19.2.5",
-    "@angular/compiler-cli": "^19.2.4",
+    "@angular/build": "^20.0.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
    "@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,7 +31,10 @@
    [opened]="leftSideOpen()"
    (closed)="leftSideOpen.set(false)"
  >
-    <app-file-tree (fileSelected)="fileSelected($event)"></app-file-tree>
+    <app-file-tree
+      class="bubble-sidenav"
+      (fileSelected)="fileSelected($event)"
+    ></app-file-tree>
  </mat-sidenav>
  <mat-sidenav
    [opened]="rightSideOpen()"
@@ -40,6 +43,7 @@
    (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,3 +33,9 @@ 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,5 +1,4 @@
 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';
@@ -22,7 +21,6 @@ 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,
-  provideExperimentalZonelessChangeDetection,
+  provideZonelessChangeDetection,
  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: [
-    provideExperimentalZonelessChangeDetection(),
+    provideZonelessChangeDetection(),
    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.name"
+    [label]="item.friendlyName || 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,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
  Component,
  ElementRef,
@@ -31,7 +30,6 @@ type PreviewType = 'raw' | 'edit' | 'diff';
@Component({
  selector: 'app-editor',
  imports: [
-    CommonModule,
    ProtoFieldComponent,
    MatButtonModule,
    MatButtonToggleModule,
@@ -102,17 +100,14 @@ export class EditorComponent {
        }
      }
    });
-    effect(
-      () => {
-        const message = this.selectedMessage();
-        this.values.set(
-          Object.fromEntries(
-            message.values.map((value) => [[value.name, undefined]])
-          )
-        );
-      },
-      { allowSignalWrites: true }
-    );
+    effect(() => {
+      const message = this.selectedMessage();
+      this.values.set(
+        Object.fromEntries(
+          message.values.map((value) => [[value.name, undefined]])
+        )
+      );
+    });

    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,6 +1,7 @@
 :host {
  display: flex;
  flex-direction: column;
+  margin: 0.5rem 0;
 }

 .row-wrapper {
@@ -11,7 +12,3 @@
 app-proto-field {
  flex: 1;
 }
-
-.add-button {
-  align-self: flex-end;
-}
--- a/src/app/editor/list-field/list-field.component.ts
+++ b/src/app/editor/list-field/list-field.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
  AfterViewInit,
  ChangeDetectionStrategy,
@@ -12,33 +11,42 @@ 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,
-        MatIconModule,
-        forwardRef(() => ProtoFieldComponent),
-    ],
-    template: `<h3>{{ label() }}</h3>
-    @if(values()) { @for(value of values(); track $index) {
-    <div class="row-wrapper">
-      <app-proto-field
-        [configuration]="configuration().subConfiguration"
-        [value]="value"
-        (valueChange)="updateValue($index, $event)"
-      ></app-proto-field>
-      <button mat-icon-button (click)="remove($index)">
-        <mat-icon>remove</mat-icon>
-      </button>
-    </div>
-    } }
-    <button mat-icon-button class="add-button" (click)="add()">
-      <mat-icon>add</mat-icon>
-    </button>`,
-    styleUrl: './list-field.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-list-field',
+  imports: [
+    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>
+        @if(values()) { @for(value of values(); track $index) {
+        <div class="row-wrapper">
+          <app-proto-field
+            [configuration]="configuration().subConfiguration"
+            [value]="value"
+            (valueChange)="updateValue($index, $event)"
+          ></app-proto-field>
+          <button mat-icon-button (click)="remove($index)">
+            <mat-icon>remove</mat-icon>
+          </button>
+        </div>
+        } }
+        <button mat-icon-button class="add-button" (click)="add()">
+          <mat-icon>add</mat-icon>
+        </button>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
+  styleUrl: './list-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 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,6 +1,7 @@
 :host {
  display: flex;
  flex-direction: column;
+  margin: 0.5rem 0;
 }

 .row-wrapper {
@@ -12,10 +13,6 @@ app-proto-field {
  flex: 1;

  &:first-child {
-    margin-right: 10px;
+    margin-right: 0.5rem;
  }
 }
-
-.add-button {
-  align-self: flex-end;
-}
--- a/src/app/editor/map-field/map-field.component.ts
+++ b/src/app/editor/map-field/map-field.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -12,40 +11,49 @@ 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),
-        MatIconModule,
-        MatButtonModule,
-    ],
-    template: `<h3>{{ label() }}</h3>
-    @if(valuePairs()) { @for(value of valuePairs(); track $index) {
-    <div class="row-wrapper">
-      <app-proto-field
-        [configuration]="configuration().keyConfiguration"
-        [value]="value[0]"
-        (valueChange)="updateKey($index, $event)"
-      ></app-proto-field>
-      <app-proto-field
-        [configuration]="configuration().valueConfiguration"
-        [value]="value[1]"
-        (valueChange)="updateValue($index, $event)"
-      ></app-proto-field>
-      <button mat-icon-button (click)="remove($index)">
-        <mat-icon>remove</mat-icon>
-      </button>
-    </div>
-    } }
-    <button mat-icon-button class="add-button" (click)="add()">
-      <mat-icon>add</mat-icon>
-    </button>`,
-    styleUrl: './map-field.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-map-field',
+  imports: [
+    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>
+        @if(valuePairs()) { @for(value of valuePairs(); track $index) {
+        <div class="row-wrapper">
+          <app-proto-field
+            [configuration]="configuration().keyConfiguration"
+            [value]="value[0]"
+            (valueChange)="updateKey($index, $event)"
+          ></app-proto-field>
+          <app-proto-field
+            [configuration]="configuration().valueConfiguration"
+            [value]="value[1]"
+            (valueChange)="updateValue($index, $event)"
+          ></app-proto-field>
+          <button mat-icon-button (click)="remove($index)">
+            <mat-icon>remove</mat-icon>
+          </button>
+        </div>
+        } }
+        <button mat-icon-button class="add-button" (click)="add()">
+          <mat-icon>add</mat-icon>
+        </button>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
+  styleUrl: './map-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MapFieldComponent {
  label = input<string>();
@@ -57,22 +65,19 @@ export class MapFieldComponent {
  private changedInternal = false;

  constructor() {
-    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
-        if (this.changedInternal) {
-          this.changedInternal = false;
-          return;
-        }
-        const values = this.values();
-        if (values) {
-          this.valuePairs.set(Object.entries(values));
-        }
-      },
-      { allowSignalWrites: true }
-    );
+    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
+      if (this.changedInternal) {
+        this.changedInternal = false;
+        return;
+      }
+      const values = this.values();
+      if (values) {
+        this.valuePairs.set(Object.entries(values));
+      }
+    });
  }

  add() {
--- a/src/app/editor/object-field/object-field.component.scss
+++ b/src/app/editor/object-field/object-field.component.scss
@@ -0,0 +1,4 @@
+: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,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -9,25 +8,37 @@ 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: [CommonModule, forwardRef(() => ProtoFieldComponent)],
-    template: `<h3>
-      {{ label() }} ({{ configuration().messageDefinition.name }})
-    </h3>
-    <div>
-      @for (item of configuration().messageDefinition.values; track $index) {
-      <app-proto-field
-        [label]="item.name"
-        [configuration]="item.configuration"
-        [value]="currentValue()[item.name]"
-        (valueChange)="updateValue(item.name, $event)"
-      ></app-proto-field>
-      }
-    </div>`,
-    styleUrl: './object-field.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
+  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>
+        @for (item of configuration().messageDefinition.values; track $index) {
+        <app-proto-field
+          [label]="item.friendlyName || item.name"
+          [configuration]="item.configuration"
+          [value]="currentValue()[item.name]"
+          (valueChange)="updateValue(item.name, $event)"
+        ></app-proto-field>
+        }
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
+  styleUrl: './object-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 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,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -27,20 +26,19 @@ import { ObjectFieldComponent } from '../object-field/object-field.component';
 import { StringFieldComponent } from '../string-field/string-field.component';

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

@Component({
-    selector: 'app-string-field',
-    imports: [
-        CommonModule,
-        FormsModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MonacoEditorModule,
-    ],
-    template: ` @if(configuration().textType === 'text') {
+  selector: 'app-string-field',
+  imports: [
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MonacoEditorModule,
+  ],
+  template: ` @if(configuration().textType === 'text') {
    <mat-form-field>
      <mat-label>{{ label() }}</mat-label>
      <input
@@ -43,8 +41,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
      [options]="editorOptions"
    ></ngx-monaco-editor>
    }`,
-    styleUrl: './string-field.component.css',
-    changeDetection: ChangeDetectionStrategy.OnPush
+  styleUrl: './string-field.component.css',
+  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,5 +1,4 @@
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { CommonModule } from '@angular/common';
 import {
  Component,
  ElementRef,
@@ -40,7 +39,7 @@ const collator = new Intl.Collator(undefined, { numeric: true });

@Component({
  selector: 'app-file-tree',
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatTreeModule],
+  imports: [MatButtonModule, MatIconModule, MatTreeModule],
  templateUrl: './file-tree.component.html',
  styleUrl: './file-tree.component.scss',
 })
@@ -150,7 +149,10 @@ 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
-          const splitFilePath = file.webkitRelativePath.split('/');
+          if (i === 0) {
+            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];
--- a/src/app/model/proto-message.model.ts
+++ b/src/app/model/proto-message.model.ts
@@ -38,8 +38,13 @@ export interface ObjectMessage extends MessageConfiguration {

 export interface RawMessage extends MessageConfiguration {}

+export interface EnumMessageOption {
+  protoName: string;
+  friendlyName?: string;
+}
+
 export interface EnumMessage extends MessageConfiguration {
-  options: string[];
+  options: EnumMessageOption[];
 }

 export interface MessageConfiguration {
@@ -90,11 +95,12 @@ export const RawMessage = (): RawMessage => ({ type: MessageTypeEnum.Raw });

 export const EnumMessage = (options: string[]) => ({
  type: MessageTypeEnum.Enum,
-  options,
+  options: options.map((option) => ({ protoName: option })),
 });

 export interface ProtoMessageField<T extends MessageConfiguration> {
  name: string;
+  friendlyName?: string;
  configuration: T;
 }

@@ -119,7 +125,9 @@ export const UnknownProto = (
 ): ProtoMessage => ({
  name,
  fullName,
-  values: [{ name: 'Raw JSON', configuration: RawMessage() }],
+  values: [
+    { name: 'Raw JSON', friendlyName: '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,13 +1,12 @@
-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';
@@ -18,11 +17,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,
@@ -31,6 +30,7 @@ import { StringEditorFieldComponent } from '../string-editor-field/string-editor
    MatSelectModule,
    ObjectEditorFieldComponent,
    StringEditorFieldComponent,
+    EnumEditorFieldComponent,
  ],
  template: ` @switch (fieldConfiguration().type) {
    @case(MessageTypeEnum.String) {
@@ -48,9 +48,11 @@ import { StringEditorFieldComponent } from '../string-editor-field/string-editor
        [(ngModel)]="configuration.min"
        [max]="configuration.max ?? null"
      />
-      <mat-hint *ngIf="min.hasError('max')"
+      @if(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>
@@ -61,9 +63,9 @@ import { StringEditorFieldComponent } from '../string-editor-field/string-editor
        [(ngModel)]="configuration.max"
        [min]="configuration.min ?? null"
      />
-      <mat-hint *ngIf="max.hasError('min')"
-        >Max should not be less than {{ configuration.min }}</mat-hint
-      >
+      @if(max.hasError('min')) {
+      <mat-hint>Max should not be less than {{ configuration.min }}</mat-hint>
+      }
    </mat-form-field>
    } @case (MessageTypeEnum.List) {
    <app-list-editor-field
@@ -77,6 +79,10 @@ import { StringEditorFieldComponent } from '../string-editor-field/string-editor
    <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,
@@ -104,5 +110,9 @@ 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
@@ -0,0 +1,3 @@
+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,9 +1,7 @@
-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,
@@ -11,13 +9,18 @@ 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: [
-    CommonModule,
+    FormsModule,
    MatButtonModule,
    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
    DefinitionEditorFieldComponent,
  ],
  template: `
@@ -25,6 +28,14 @@ import { DefinitionEditorFieldComponent } from './definition-editor-field/defini
    <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>
@@ -40,26 +51,5 @@ import { DefinitionEditorFieldComponent } from './definition-editor-field/defini
 export class DefinitionEditorComponent {
  protected protoMessage = inject<ProtoMessage>(MAT_DIALOG_DATA);

-  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);
-  }
+  protected editableMessages = this.protoMessage.values;
 }
--- 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
@@ -0,0 +1,3 @@
+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
@@ -0,0 +1,28 @@
+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,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -10,7 +9,7 @@ import { ListMessage } from '../../../model/proto-message.model';

@Component({
  selector: 'app-list-editor-field',
-  imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
+  imports: [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,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -14,7 +13,7 @@ import {

@Component({
  selector: 'app-map-editor-field',
-  imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
+  imports: [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,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -6,31 +5,43 @@ import {
  forwardRef,
  input,
 } from '@angular/core';
-import {
-  EDITABLE_MESSAGE_TYPES,
-  ObjectMessage,
-} from '../../../model/proto-message.model';
+import { 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: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
+  imports: [
+    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(() =>
-    this.field().messageDefinition.values.filter((field) =>
-      EDITABLE_MESSAGE_TYPES.includes(field.configuration.type)
-    )
+  protected editableFields = computed(
+    () => this.field().messageDefinition.values
  );
 }
--- 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,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,14 +7,9 @@ import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-string-editor-field',
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-  ],
-  template: ` <mat-form-field>
+  imports: [FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule],
+  template: `
+    <mat-form-field>
      <mat-label>Max Length</mat-label>
      <input matInput type="number" [(ngModel)]="configuration().maxLength" />
    </mat-form-field>
@@ -25,7 +19,8 @@ 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
@@ -0,0 +1,166 @@
+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,16 +1,28 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, computed, output, signal, viewChild, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  computed,
+  inject,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatListModule, MatSelectionList } from '@angular/material/list';
-import { ProtoMessage } from '../model/proto-message.model';
-import { ProtoDefinitionService } from './proto-definition.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 { 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';

 declare const __TAURI__: any;

@@ -18,26 +30,23 @@ const collator = new Intl.Collator(undefined, { numeric: true });

@Component({
  selector: 'app-proto-definition-selector',
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatIconModule,
-    MatListModule,
-    MatTreeModule,
-  ],
+  imports: [MatButtonModule, MatIconModule, MatListModule, MatTreeModule],
  template: `
-    <h2>Protobuf Definitions</h2>
+    <h2>Schemas</h2>
    <button mat-button (click)="protoSelector.click()">
-      Select definitions
+      Import Protobuf Definition
+    </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
@@ -66,7 +75,7 @@ const collator = new Intl.Collator(undefined, { numeric: true });
        >
          <mat-icon>edit</mat-icon>
        </button>
-        <div matListItemLine>{{ item.name }}</div>
+        <div>{{ item.name }}</div>
      </mat-list-option>
      }
    </mat-selection-list>
@@ -78,6 +87,12 @@ const collator = new Intl.Collator(undefined, { numeric: true });
      (change)="addDefinitionFiles()"
      accept=".proto"
    />
+    <input
+      #jsonSchemaSelector
+      type="file"
+      (change)="importJsonSchema()"
+      accept=".json"
+    />
    <input
      #configurationSelector
      type="file"
@@ -90,6 +105,7 @@ 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);
@@ -98,6 +114,8 @@ export class ProtoDefinitionSelectorComponent {

  protected protoSelector =
    viewChild<ElementRef<HTMLInputElement>>('protoSelector');
+  protected jsonSchemaSelector =
+    viewChild<ElementRef<HTMLInputElement>>('jsonSchemaSelector');
  protected configurationSelector = viewChild<ElementRef<HTMLInputElement>>(
    'configurationSelector'
  );
@@ -171,6 +189,29 @@ 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 { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideZonelessChangeDetection } 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: [provideExperimentalZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection()],
    });
    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]).toBe('Hello');
+    expect(enumMessage.options[0].protoName).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,7 +383,6 @@ 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: var(--mat-sys-secondary-container),
+      container-background-color: transparent,
    )
  );
 }
Author	SHA1	Message	Date
vato007	e0acfcc27e	Fix project name for cloudflare publish command All checks were successful release-nightly / macos (push) Successful in 1m48s Details release-nightly / web-demo (push) Successful in 6m38s Details	2025-05-29 17:12:24 +09:30
vato007	906c13fde2	Update node version in CI build Some checks failed release-nightly / macos (push) Successful in 1m48s Details release-nightly / web-demo (push) Failing after 5m23s Details	2025-05-29 17:05:39 +09:30
vato007	7bda79db00	Specify node version so angular builds, revert back to ubuntu 22.04 Some checks failed release-nightly / macos (push) Successful in 1m52s Details release-nightly / web-demo (push) Failing after 5m4s Details	2025-05-29 16:58:47 +09:30
vato007	2eca7fc22d	Switch CI to ubuntu-latest, update cloudflare Some checks failed release-nightly / macos (push) Successful in 1m56s Details release-nightly / web-demo (push) Failing after 2m14s Details	2025-05-29 16:36:43 +09:30
vato007	200f76780b	Remove zone.js dependency Some checks failed release-nightly / macos (push) Successful in 1m46s Details release-nightly / web-demo (push) Failing after 3m18s Details	2025-05-29 08:50:39 +09:30
vato007	cf89834fe9	Fix test post update Some checks failed release-nightly / macos (push) Successful in 2m3s Details release-nightly / web-demo (push) Failing after 2m7s Details	2025-05-29 07:20:10 +09:30
vato007	acbb4c9e2c	angular-20 (#3 ) Some checks failed release-nightly / macos (push) Failing after 12s Details release-nightly / web-demo (push) Failing after 2m5s Details Reviewed-on: #3	2025-05-29 07:10:26 +09:30
vato007	1e18b9e768	Set workspace name correctly All checks were successful release-nightly / macos (push) Successful in 2m9s Details release-nightly / web-demo (push) Successful in 5m46s Details	2025-05-18 10:43:08 +09:30
vato007	53a9ce3a45	Move selected browser directory into directory name Some checks failed release-nightly / web-demo (push) Has been cancelled Details release-nightly / macos (push) Has been cancelled Details	2025-05-18 10:42:39 +09:30
vato007	885ed5892e	Start adding json schema import All checks were successful release-nightly / macos (push) Successful in 2m12s Details release-nightly / web-demo (push) Successful in 4m59s Details	2025-05-17 11:03:19 +09:30
vato007	1c4536878e	Make sidenav background transparent so bubbles stand out on narrow screens All checks were successful release-nightly / macos (push) Successful in 2m6s Details release-nightly / web-demo (push) Successful in 4m57s Details	2025-05-14 22:53:53 +09:30
vato007	3897c1841e	Restore bubble styling for sidenavs All checks were successful release-nightly / macos (push) Successful in 2m2s Details release-nightly / web-demo (push) Successful in 4m46s Details	2025-05-14 20:59:58 +09:30
vato007	8003a8fee9	Use accordions for nested field types All checks were successful release-nightly / macos (push) Successful in 2m9s Details release-nightly / web-demo (push) Successful in 4m53s Details	2025-05-14 20:38:14 +09:30
vato007	cdeccf33b3	Fix enum message using configuration rather than protoname in json output All checks were successful release-nightly / macos (push) Successful in 2m8s Details release-nightly / web-demo (push) Successful in 4m16s Details	2025-05-13 21:01:44 +09:30
vato007	af613c3d37	Fix tests to work with new enum format All checks were successful release-nightly / macos (push) Successful in 2m1s Details release-nightly / web-demo (push) Successful in 4m19s Details	2025-05-13 20:52:08 +09:30
vato007	ec0f21cf16	Remove common module, add friendy name editing, add enum options editing, fix list option warning Some checks failed release-nightly / macos (push) Failing after 23s Details release-nightly / web-demo (push) Failing after 4m25s Details	2025-05-13 20:49:46 +09:30
vato007	dd8d1374ab	Update to angular 19.2.x, switch to new angular material styling system, reduce density (#2 ) All checks were successful release-nightly / macos (push) Successful in 2m8s Details release-nightly / web-demo (push) Successful in 5m45s Details Reviewed-on: #2	2025-03-29 16:48:27 +10:30
vato007	451877667a	Update to Angular 19 (#1 ) All checks were successful release-nightly / web-demo (push) Successful in 5m27s Details release-nightly / macos (push) Successful in 2m9s Details Reviewed-on: #1	2025-02-11 11:12:35 +10:30