Fix project name for cloudflare publish command

Reviewed-on: #3

.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

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": "."
+    }
   }
 }

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: {

package.json

@@ -11,40 +11,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-angular": "^19.1.6",
-    "@angular/animations": "^19.1.5",
-    "@angular/cdk": "^19.1.3",
-    "@angular/common": "^19.1.5",
-    "@angular/compiler": "^19.1.5",
-    "@angular/core": "^19.1.5",
-    "@angular/forms": "^19.1.5",
-    "@angular/material": "^19.1.3",
-    "@angular/platform-browser": "^19.1.5",
-    "@angular/platform-browser-dynamic": "^19.1.5",
-    "@angular/router": "^19.1.5",
-    "@angular/service-worker": "^19.1.5",
+    "@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",
-    "highlight.js": "^11.10.0",
+    "@types/json-schema": "^7.0.15",
+    "highlight.js": "^11.11.1",
     "monaco-editor": "^0.50.0",
-    "ngx-monaco-editor-v2": "^18.0.1",
-    "protobufjs": "^7.3.2",
-    "rxjs": "^7.8.1",
-    "tslib": "^2.6.3",
-    "zone.js": "^0.15.0"
+    "ngx-monaco-editor-v2": "^19.0.2",
+    "protobufjs": "^7.4.0",
+    "rxjs": "^7.8.2",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "^19.1.6",
-    "@angular/cli": "^19.1.6",
-    "@angular/compiler-cli": "^19.1.5",
-    "@tauri-apps/cli": "^1.6.0",
-    "@types/jasmine": "^5.1.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",
-    "jasmine-core": "^5.1.2",
-    "karma": "^6.4.3",
+    "jasmine-core": "^5.6.0",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "typescript": "^5.5.3"
+    "typescript": "^5.8.2"
   }
 }

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>

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;
+}

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,

src/app/app.config.ts

@@ -1,7 +1,7 @@
 import {
   ApplicationConfig,
   isDevMode,
-  provideExperimentalZonelessChangeDetection,
+  provideZonelessChangeDetection,
   provideAppInitializer,
   inject,
 } from '@angular/core';
@@ -17,10 +17,11 @@ import hljs from 'highlight.js/lib/core';
 import json from 'highlight.js/lib/languages/json';
 import { provideMonacoEditor } from 'ngx-monaco-editor-v2';
 import { routes } from './app.routes';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideExperimentalZonelessChangeDetection(),
+    provideZonelessChangeDetection(),
     provideRouter(routes),
     provideAnimationsAsync(),
     provideAppInitializer(() => {
@@ -44,5 +45,11 @@ export const appConfig: ApplicationConfig = {
       enabled: !isDevMode(),
       registrationStrategy: 'registerWhenStable:30000',
     }),
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      // Filled doesn't look great with low density, by default the label is lost, and adding
+      // it back makes it look cramped
+      useValue: { appearance: 'outline' },
+    },
   ],
 };

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)"

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(
-      () => {
+    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();

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

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

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -12,16 +11,22 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { ListMessage } from '../../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @Component({
   selector: 'app-list-field',
   imports: [
-        CommonModule,
     MatButtonModule,
+    MatExpansionModule,
     MatIconModule,
     forwardRef(() => ProtoFieldComponent),
   ],
-    template: `<h3>{{ label() }}</h3>
+  template: `
+    <mat-accordion>
+      <mat-expansion-panel [expanded]="true">
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{ label() }}</mat-panel-title>
+        </mat-expansion-panel-header>
         @if(values()) { @for(value of values(); track $index) {
         <div class="row-wrapper">
           <app-proto-field
@@ -36,9 +41,12 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
         } }
         <button mat-icon-button class="add-button" (click)="add()">
           <mat-icon>add</mat-icon>
-    </button>`,
+        </button>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './list-field.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListFieldComponent {
   label = input<string>();

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

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

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -12,18 +11,24 @@ 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: `<h3>{{ label() }}</h3>
+  template: `
+    <mat-accordion>
+      <mat-expansion-panel [expanded]="true">
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{ label() }}</mat-panel-title>
+        </mat-expansion-panel-header>
         @if(valuePairs()) { @for(value of valuePairs(); track $index) {
         <div class="row-wrapper">
           <app-proto-field
@@ -43,9 +48,12 @@ const keyIsEmpty = (key: string | number) => key == null || key === '';
         } }
         <button mat-icon-button class="add-button" (click)="add()">
           <mat-icon>add</mat-icon>
-    </button>`,
+        </button>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './map-field.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MapFieldComponent {
   label = input<string>();
@@ -57,8 +65,7 @@ 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
@@ -70,9 +77,7 @@ export class MapFieldComponent {
       if (values) {
         this.valuePairs.set(Object.entries(values));
       }
-      },
-      { allowSignalWrites: true }
-    );
+    });
   }
 
   add() {

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

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

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

@@ -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>
+  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.name"
+          [label]="item.friendlyName || item.name"
           [configuration]="item.configuration"
           [value]="currentValue()[item.name]"
           (valueChange)="updateValue(item.name, $event)"
         ></app-proto-field>
         }
-    </div>`,
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './object-field.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ObjectFieldComponent {
   label = input<string>();

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -29,7 +28,6 @@ import { StringFieldComponent } from '../string-field/string-field.component';
 @Component({
   selector: 'app-proto-field',
   imports: [
-        CommonModule,
     FormsModule,
     ListFieldComponent,
     MapFieldComponent,
@@ -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>
@@ -101,7 +103,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>();

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -14,7 +13,6 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 @Component({
   selector: 'app-string-field',
   imports: [
-        CommonModule,
     FormsModule,
     MatFormFieldModule,
     MatInputModule,
@@ -44,7 +42,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();

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

@@ -1,16 +1,15 @@
 :host {
   display: block;
-  border-radius: var(--mat-sidenav-container-shape);
-  padding: var(--mat-sidenav-container-shape);
   height: 100%;
   box-sizing: border-box;
   transition: background-color 100ms linear;
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: auto;
 }
 
 .mat-tree {
   background-color: transparent;
+  min-width: fit-content;
 }
 
 .mat-tree-node {

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];

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 = [

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;
 }

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

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

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;
 }

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

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

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>();
+}

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>`,

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

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
   );
 }

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,
 })

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');
+  }
+}

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

@@ -1,7 +1,5 @@
 :host {
   display: block;
-  border-radius: var(--mat-sidenav-container-shape);
-  padding: var(--mat-sidenav-container-shape);
   height: 100%;
   box-sizing: border-box;
   transition: background-color 100ms linear;

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 {

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,
@@ -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);

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':

src/styles.scss

@@ -1,52 +1,34 @@
 @use "@angular/material" as mat;
-@use "./theme.scss";
-
-@include mat.elevation-classes();
-@include mat.app-background();
-
-@mixin custom-colours($theme) {
-  .mat-toolbar {
-    background-color: mat.get-theme-color($theme, tertiary-container);
-  }
-
-  app-proto-definition-selector,
-  app-file-tree {
-    background-color: mat.get-theme-color($theme, secondary-container);
-    transition: background-color 100ms linear;
-  }
-
-  .droppable {
-    background-color: mat.get-theme-color($theme, secondary, 40);
-  }
-}
 
 html {
-  @include mat.elevation-classes();
-  @include mat.app-background();
-  @include mat.toolbar-theme(theme.$rose-theme);
-  @include mat.button-theme(theme.$rose-theme);
-  @include mat.tree-theme(theme.$rose-theme);
-  @include mat.sidenav-theme(theme.$rose-theme);
-  @include mat.icon-theme(theme.$rose-theme);
-  @include mat.form-field-theme(theme.$rose-theme);
-  @include mat.list-theme(theme.$rose-theme);
-  @include mat.select-theme(theme.$rose-theme);
-  @include mat.snack-bar-theme(theme.$rose-theme);
-  @include mat.button-toggle-theme(theme.$rose-theme);
-  @include mat.dialog-theme(theme.$rose-theme);
-  @include custom-colours(theme.$rose-theme);
+  color-scheme: dark light;
+  height: 100%;
+
+  @include mat.theme(
+    (
+      color: mat.$rose-palette,
+      typography: Roboto,
+      density: -5,
+    )
+  );
+  @include mat.toolbar-overrides(
+    (
+      container-background-color: var(--mat-sys-primary-container),
+    )
+  );
+
+  @include mat.sidenav-overrides(
+    (
+      container-shape: 1rem,
+      container-background-color: transparent,
+    )
+  );
 }
 
-html,
 body {
   height: 100%;
-}
-body {
   margin: 0;
-  font: mat.get-theme-typography(theme.$rose-theme, body-medium, font);
-  --mat-tree-node-min-height: 24px;
-  --mat-tree-node-text-size: 14px;
-  --mdc-icon-button-state-layer-size: 24px;
-  --mat-icon-button-touch-target-display: none;
-  --mdc-list-list-item-one-line-container-height: 24px;
+  background: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+  font-family: Roboto, "Helvetica Neue", sans-serif;
 }

src/theme.scss

@@ -1,10 +0,0 @@
-@use "@angular/material" as mat;
-
-$rose-theme: mat.define-theme(
-  (
-    color: (
-      theme-type: dark,
-      primary: mat.$rose-palette,
-    ),
-  )
-);