Add icons

.gitattributes

@@ -0,0 +1,4 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.icns filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text

angular.json

@@ -21,7 +21,11 @@
             "polyfills": [],
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/"
+              },
               {
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor",
@@ -83,9 +87,11 @@
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": [
+              "src/assets",
               {
                 "glob": "**/*",
-                "input": "public"
+                "input": "node_modules/monaco-editor",
+                "output": "/assets/monaco/"
               }
             ],
             "styles": ["src/styles.scss"],

src/app/app.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar data-tauri-drag-region color="secondary">
-  <h1>BufPiv</h1>
+  <h1><mat-icon svgIcon="bufpiv"></mat-icon>BufPiv</h1>
   <span>{{ selectedFile()?.name }}</span>
   <span>
     <button

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { Component, computed, effect, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTreeModule } from '@angular/material/tree';
@@ -15,6 +15,8 @@ import {
 } from './file-tree/file-tree.component';
 import { ProtoMessage } from './model/proto-message.model';
 import { ProtoDefinitionSelectorComponent } from './proto-definition-selector/proto-definition-selector.component';
+import { HttpClientModule } from '@angular/common/http';
+import { DomSanitizer } from '@angular/platform-browser';
 const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
 
 @Component({
@@ -48,11 +50,20 @@ export class AppComponent {
 
   protected selectedFilePath = computed(() => this.selectedFile()?.path);
 
-  constructor(private breakpointObserver: BreakpointObserver) {
+  constructor(
+    private breakpointObserver: BreakpointObserver,
+    iconRegistry: MatIconRegistry,
+    sanitizer: DomSanitizer
+  ) {
     breakpointObserver
       .observe(mobileBreakpoints)
       .pipe(takeUntilDestroyed())
       .subscribe((matches) => this.isMobile.set(matches.matches));
+
+    iconRegistry.addSvgIcon(
+      'bufpiv',
+      sanitizer.bypassSecurityTrustResourceUrl('/BufPiv Logo Grey.svg')
+    );
   }
 
   protected selectMessage(message: ProtoMessage) {

src/app/app.config.ts

@@ -14,6 +14,7 @@ import {
   MatIconRegistry,
 } from '@angular/material/icon';
 import { provideMonacoEditor } from 'ngx-monaco-editor-v2';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -43,5 +44,6 @@ export const appConfig: ApplicationConfig = {
       useValue: { fontSet: 'material-symbols-rounded' },
     },
     provideMonacoEditor(),
+    provideHttpClient(),
   ],
 };

src/assets/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

src/assets/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

src/index.html

@@ -14,6 +14,48 @@
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
       rel="stylesheet"
     />
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/android-icon-192x192.png"
+    />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
+    <meta name="theme-color" content="#ffffff" />
   </head>
   <body class="mat-typography">
     <app-root></app-root>