Update packages, switch to new material theming system and reduce density

package.json

@@ -11,40 +11,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-angular": "^18.1.1",
+    "@angular-devkit/build-angular": "^19.2.5",
-    "@angular/animations": "^18.1.1",
+    "@angular/animations": "^19.2.4",
-    "@angular/cdk": "^18.1.1",
+    "@angular/cdk": "^19.2.7",
-    "@angular/common": "^18.1.1",
+    "@angular/common": "^19.2.4",
-    "@angular/compiler": "^18.1.1",
+    "@angular/compiler": "^19.2.4",
-    "@angular/core": "^18.1.1",
+    "@angular/core": "^19.2.4",
-    "@angular/forms": "^18.1.1",
+    "@angular/forms": "^19.2.4",
-    "@angular/material": "^18.1.1",
+    "@angular/material": "^19.2.7",
-    "@angular/platform-browser": "^18.1.1",
+    "@angular/platform-browser": "^19.2.4",
-    "@angular/platform-browser-dynamic": "^18.1.1",
+    "@angular/platform-browser-dynamic": "^19.2.4",
-    "@angular/router": "^18.1.1",
+    "@angular/router": "^19.2.4",
-    "@angular/service-worker": "^18.1.1",
+    "@angular/service-worker": "^19.2.4",
     "@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",
+    "ngx-monaco-editor-v2": "^19.0.2",
-    "protobufjs": "^7.3.2",
+    "protobufjs": "^7.4.0",
-    "rxjs": "^7.8.1",
+    "rxjs": "^7.8.2",
-    "tslib": "^2.6.3",
+    "tslib": "^2.8.1",
-    "zone.js": "^0.14.8"
+    "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^18.1.1",
+    "@angular/build": "^19.2.5",
-    "@angular/cli": "^18.1.1",
+    "@angular/cli": "^19.2.5",
-    "@angular/compiler-cli": "^18.1.1",
+    "@angular/compiler-cli": "^19.2.4",
-    "@tauri-apps/cli": "^1.6.0",
+    "@tauri-apps/cli": "^1.6.3",
-    "@types/jasmine": "^5.1.4",
+    "@types/jasmine": "^5.1.7",
     "@types/protobufjs": "^6.0.0",
-    "jasmine-core": "^5.1.2",
+    "jasmine-core": "^5.6.0",
-    "karma": "^6.4.3",
+    "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.ts

@@ -1,13 +1,12 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
-import { Component, computed, signal } from '@angular/core';
+import { Component, signal, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTreeModule } from '@angular/material/tree';
-import { RouterOutlet } from '@angular/router';
 import { EditorComponent } from './editor/editor.component';
 import {
   FileOrFolder,
@@ -15,11 +14,11 @@ import {
 } from './file-tree/file-tree.component';
 import { ProtoMessage } from './model/proto-message.model';
 import { ProtoDefinitionSelectorComponent } from './proto-definition-selector/proto-definition-selector.component';
+
 const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   imports: [
@@ -32,10 +31,11 @@ const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
     MatToolbarModule,
     MatTreeModule,
     ProtoDefinitionSelectorComponent,
-    RouterOutlet,
   ],
 })
 export class AppComponent {
+  private breakpointObserver = inject(BreakpointObserver);
+
   protected selectedFile = signal<FileOrFolder | undefined>(undefined);
   protected selectedMessage = signal<ProtoMessage | undefined>(undefined);
   protected rightSideOpen = signal(true);
@@ -46,7 +46,9 @@ export class AppComponent {
     this.breakpointObserver.isMatched(mobileBreakpoints)
   );
 
-  constructor(private breakpointObserver: BreakpointObserver) {
+  constructor() {
+    const breakpointObserver = this.breakpointObserver;
+
     breakpointObserver
       .observe(mobileBreakpoints)
       .pipe(takeUntilDestroyed())

src/app/app.config.ts

@@ -1,8 +1,9 @@
 import {
-  APP_INITIALIZER,
   ApplicationConfig,
   isDevMode,
   provideExperimentalZonelessChangeDetection,
+  provideAppInitializer,
+  inject,
 } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
@@ -16,30 +17,25 @@ 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(),
     provideRouter(routes),
     provideAnimationsAsync(),
-    {
+    provideAppInitializer(() => {
-      provide: APP_INITIALIZER,
-      useValue: () => {
       hljs.registerLanguage('json', json);
-      },
+    }),
-      multi: true,
+    provideAppInitializer(() => {
-    },
+      const initializerFn = ((iconRegistry: MatIconRegistry) => () => {
-    {
-      provide: APP_INITIALIZER,
-      useFactory: (iconRegistry: MatIconRegistry) => () => {
         iconRegistry.registerFontClassAlias(
           'material-symbols-rounded',
           'material-symbols-rounded'
         );
-      },
+      })(inject(MatIconRegistry));
-      deps: [MatIconRegistry],
+      return initializerFn();
-      multi: true,
+    }),
-    },
     {
       provide: MAT_ICON_DEFAULT_OPTIONS,
       useValue: { fontSet: 'material-symbols-rounded' },
@@ -49,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.ts

@@ -8,6 +8,7 @@ import {
   input,
   signal,
   viewChild,
+  inject,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -29,7 +30,6 @@ type PreviewType = 'raw' | 'edit' | 'diff';
 
 @Component({
   selector: 'app-editor',
-  standalone: true,
   imports: [
     CommonModule,
     ProtoFieldComponent,
@@ -43,6 +43,8 @@ type PreviewType = 'raw' | 'edit' | 'diff';
   styleUrl: './editor.component.scss',
 })
 export class EditorComponent {
+  private snackBar = inject(MatSnackBar);
+
   selectedFile = input<FileOrFolder>();
   selectedMessage = input.required<ProtoMessage>();
   indentSize = input<number>(2);
@@ -80,7 +82,9 @@ export class EditorComponent {
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
-  constructor(sanitizer: DomSanitizer, private snackBar: MatSnackBar) {
+  constructor() {
+    const sanitizer = inject(DomSanitizer);
+
     effect(() => {
       const element = this.code()?.nativeElement;
       if (element) {

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

@@ -15,7 +15,6 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
 
 @Component({
     selector: 'app-list-field',
-  standalone: true,
     imports: [
         CommonModule,
         MatButtonModule,
@@ -39,7 +38,7 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
       <mat-icon>add</mat-icon>
     </button>`,
     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.ts

@@ -17,7 +17,6 @@ const keyIsEmpty = (key: string | number) => key == null || key === '';
 
 @Component({
     selector: 'app-map-field',
-  standalone: true,
     imports: [
         CommonModule,
         forwardRef(() => ProtoFieldComponent),
@@ -46,7 +45,7 @@ const keyIsEmpty = (key: string | number) => key == null || key === '';
       <mat-icon>add</mat-icon>
     </button>`,
     styleUrl: './map-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MapFieldComponent {
   label = input<string>();

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

@@ -12,7 +12,6 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
 
 @Component({
     selector: 'app-object-field',
-  standalone: true,
     imports: [CommonModule, forwardRef(() => ProtoFieldComponent)],
     template: `<h3>
       {{ label() }} ({{ configuration().messageDefinition.name }})
@@ -28,7 +27,7 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
       }
     </div>`,
     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

@@ -28,7 +28,6 @@ import { StringFieldComponent } from '../string-field/string-field.component';
 
 @Component({
     selector: 'app-proto-field',
-  standalone: true,
     imports: [
         CommonModule,
         FormsModule,
@@ -102,7 +101,7 @@ import { StringFieldComponent } from '../string-field/string-field.component';
     ></app-object-field>
     } @case (MessageTypeEnum.Raw) {}}`,
     styleUrl: './proto-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProtoFieldComponent {
   label = input<string>();

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

@@ -13,7 +13,6 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 
 @Component({
     selector: 'app-string-field',
-  standalone: true,
     imports: [
         CommonModule,
         FormsModule,
@@ -45,7 +44,7 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
     ></ngx-monaco-editor>
     }`,
     styleUrl: './string-field.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StringFieldComponent {
   label = input();

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

@@ -40,7 +40,6 @@ const collator = new Intl.Collator(undefined, { numeric: true });
 
 @Component({
   selector: 'app-file-tree',
-  standalone: true,
   imports: [CommonModule, MatButtonModule, MatIconModule, MatTreeModule],
   templateUrl: './file-tree.component.html',
   styleUrl: './file-tree.component.scss',

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

@@ -21,7 +21,6 @@ import { StringEditorFieldComponent } from '../string-editor-field/string-editor
 
 @Component({
   selector: 'app-definition-editor-field',
-  standalone: true,
   imports: [
     CommonModule,
     FormsModule,

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

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import {
@@ -14,7 +14,6 @@ import { DefinitionEditorFieldComponent } from './definition-editor-field/defini
 
 @Component({
   selector: 'app-definition-editor',
-  standalone: true,
   imports: [
     CommonModule,
     MatButtonModule,
@@ -39,6 +38,8 @@ import { DefinitionEditorFieldComponent } from './definition-editor-field/defini
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DefinitionEditorComponent {
+  protected protoMessage = inject<ProtoMessage>(MAT_DIALOG_DATA);
+
   protected editableMessages = this.protoMessage.values.filter((message) =>
     this.filterMessageConfiguration(message.configuration)
   );
@@ -61,6 +62,4 @@ export class DefinitionEditorComponent {
     // Note: Map can always be configured, as key needs to be a string or numeric type
     return EDITABLE_MESSAGE_TYPES.includes(configuration.type);
   }
-
-  constructor(@Inject(MAT_DIALOG_DATA) protected protoMessage: ProtoMessage) {}
 }

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

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

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

@@ -14,7 +14,6 @@ import {
 
 @Component({
   selector: 'app-map-editor-field',
-  standalone: true,
   imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
   template: `
     <h4>Key Configuration</h4>

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

@@ -14,7 +14,6 @@ import { DefinitionEditorFieldComponent } from '../definition-editor-field/defin
 
 @Component({
   selector: 'app-object-editor-field',
-  standalone: true,
   imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
   template: `
     @for (field of editableFields(); track $index) {

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

@@ -8,7 +8,6 @@ import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-string-editor-field',
-  standalone: true,
   imports: [
     CommonModule,
     FormsModule,

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,5 @@
 import { CommonModule } from '@angular/common';
-import {
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, computed, output, signal, viewChild, inject } from '@angular/core';
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  computed,
-  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';
@@ -29,7 +18,6 @@ const collator = new Intl.Collator(undefined, { numeric: true });
 
 @Component({
   selector: 'app-proto-definition-selector',
-  standalone: true,
   imports: [
     CommonModule,
     MatButtonModule,
@@ -102,6 +90,10 @@ const collator = new Intl.Collator(undefined, { numeric: true });
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProtoDefinitionSelectorComponent {
+  private protoDefinitionService = inject(ProtoDefinitionService);
+  private snackBar = inject(MatSnackBar);
+  private dialog = inject(MatDialog);
+
   messageSelected = output<ProtoMessage>();
 
   protected protoSelector =
@@ -135,12 +127,6 @@ export class ProtoDefinitionSelectorComponent {
     return this.isDragging();
   }
 
-  constructor(
-    private protoDefinitionService: ProtoDefinitionService,
-    private snackBar: MatSnackBar,
-    private dialog: MatDialog
-  ) {}
-
   protected async addDefinitionFiles() {
     const files = this.protoSelector()?.nativeElement.files;
     if (files) {

src/styles.scss

@@ -1,50 +1,34 @@
 @use "@angular/material" as mat;
-@use "./theme.scss";
-
-@include mat.core();
-
-@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.core-theme(theme.$rose-theme);
+  color-scheme: dark light;
-  @include mat.toolbar-theme(theme.$rose-theme);
+  height: 100%;
-  @include mat.button-theme(theme.$rose-theme);
+
-  @include mat.tree-theme(theme.$rose-theme);
+  @include mat.theme(
-  @include mat.sidenav-theme(theme.$rose-theme);
+    (
-  @include mat.icon-theme(theme.$rose-theme);
+      color: mat.$rose-palette,
-  @include mat.form-field-theme(theme.$rose-theme);
+      typography: Roboto,
-  @include mat.list-theme(theme.$rose-theme);
+      density: -5,
-  @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.toolbar-overrides(
-  @include mat.dialog-theme(theme.$rose-theme);
+    (
-  @include custom-colours(theme.$rose-theme);
+      container-background-color: var(--mat-sys-primary-container),
+    )
+  );
+
+  @include mat.sidenav-overrides(
+    (
+      container-shape: 1rem,
+      container-background-color: var(--mat-sys-secondary-container),
+    )
+  );
 }
 
-html,
 body {
   height: 100%;
-}
-body {
   margin: 0;
-  font: mat.get-theme-typography(theme.$rose-theme, body-medium, font);
+  background: var(--mat-sys-surface);
-  --mat-tree-node-min-height: 24px;
+  color: var(--mat-sys-on-surface);
-  --mat-tree-node-text-size: 14px;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
-  --mdc-icon-button-state-layer-size: 24px;
-  --mat-icon-button-touch-target-display: none;
-  --mdc-list-list-item-one-line-container-height: 24px;
 }

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