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

package.json

@@ -11,40 +11,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-angular": "^19.1.6",
+    "@angular-devkit/build-angular": "^19.2.5",
-    "@angular/animations": "^19.1.5",
+    "@angular/animations": "^19.2.4",
-    "@angular/cdk": "^19.1.3",
+    "@angular/cdk": "^19.2.7",
-    "@angular/common": "^19.1.5",
+    "@angular/common": "^19.2.4",
-    "@angular/compiler": "^19.1.5",
+    "@angular/compiler": "^19.2.4",
-    "@angular/core": "^19.1.5",
+    "@angular/core": "^19.2.4",
-    "@angular/forms": "^19.1.5",
+    "@angular/forms": "^19.2.4",
-    "@angular/material": "^19.1.3",
+    "@angular/material": "^19.2.7",
-    "@angular/platform-browser": "^19.1.5",
+    "@angular/platform-browser": "^19.2.4",
-    "@angular/platform-browser-dynamic": "^19.1.5",
+    "@angular/platform-browser-dynamic": "^19.2.4",
-    "@angular/router": "^19.1.5",
+    "@angular/router": "^19.2.4",
-    "@angular/service-worker": "^19.1.5",
+    "@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.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^19.1.6",
+    "@angular/build": "^19.2.5",
-    "@angular/cli": "^19.1.6",
+    "@angular/cli": "^19.2.5",
-    "@angular/compiler-cli": "^19.1.5",
+    "@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.config.ts

@@ -17,6 +17,7 @@ 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: [
@@ -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/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/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/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();
+  color-scheme: dark light;
-  @include mat.app-background();
+  height: 100%;
-  @include mat.toolbar-theme(theme.$rose-theme);
+
-  @include mat.button-theme(theme.$rose-theme);
+  @include mat.theme(
-  @include mat.tree-theme(theme.$rose-theme);
+    (
-  @include mat.sidenav-theme(theme.$rose-theme);
+      color: mat.$rose-palette,
-  @include mat.icon-theme(theme.$rose-theme);
+      typography: Roboto,
-  @include mat.form-field-theme(theme.$rose-theme);
+      density: -5,
-  @include mat.list-theme(theme.$rose-theme);
+    )
-  @include mat.select-theme(theme.$rose-theme);
+  );
-  @include mat.snack-bar-theme(theme.$rose-theme);
+  @include mat.toolbar-overrides(
-  @include mat.button-toggle-theme(theme.$rose-theme);
+    (
-  @include mat.dialog-theme(theme.$rose-theme);
+      container-background-color: var(--mat-sys-primary-container),
-  @include custom-colours(theme.$rose-theme);
+    )
+  );
+
+  @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,
-    ),
-  )
-);