Allow files in browser to be loaded, fix overflow on message list, show errors to user

src/app/app.component.html

@@ -48,7 +48,7 @@
     <app-editor
       [selectedMessage]="selectedMessage()!"
       [showRaw]="previewOpen()"
-      [selectedFile]="selectedFilePath()"
+      [selectedFile]="selectedFile()"
     ></app-editor>
     }
   </mat-sidenav-content>

src/app/app.component.ts

@@ -46,8 +46,6 @@ export class AppComponent {
     this.breakpointObserver.isMatched(mobileBreakpoints)
   );
 
-  protected selectedFilePath = computed(() => this.selectedFile()?.path);
-
   constructor(private breakpointObserver: BreakpointObserver) {
     breakpointObserver
       .observe(mobileBreakpoints)
@@ -61,13 +59,6 @@ export class AppComponent {
   }
 
   protected async fileSelected(file: FileOrFolder) {
-    try {
     this.selectedFile.set(file);
-    } catch (err) {
-      console.error(err);
-      alert(
-        'Failed to read selected file, please ensure you have appropriate permissions and try again.'
-      );
-    }
   }
 }

src/app/editor/editor.component.ts

@@ -21,6 +21,7 @@ import { save } from '@tauri-apps/api/dialog';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { FormsModule } from '@angular/forms';
+import { FileOrFolder } from '../file-tree/file-tree.component';
 
 declare const __TAURI__: any;
 
@@ -42,7 +43,7 @@ type PreviewType = 'raw' | 'edit' | 'diff';
   styleUrl: './editor.component.scss',
 })
 export class EditorComponent {
-  selectedFile = input<string>();
+  selectedFile = input<FileOrFolder>();
   selectedMessage = input.required<ProtoMessage>();
   indentSize = input<number>(2);
   showRaw = input<boolean>(true);
@@ -111,10 +112,27 @@ export class EditorComponent {
 
     effect(async () => {
       const selectedFile = this.selectedFile();
-      if (selectedFile) {
-        const fileContents = await readTextFile(selectedFile);
+      let filePath: string | null = null;
+      let fileContents: string | null = null;
+      try {
+        if (selectedFile?.browserFile) {
+          fileContents = await selectedFile.browserFile.text();
+          filePath = selectedFile.browserFile.webkitRelativePath;
+        } else if (selectedFile?.path) {
+          fileContents = await readTextFile(selectedFile.path);
+          filePath = selectedFile.path;
+        }
+      } catch (err) {
+        console.error(err);
+        this.snackBar.open(
+          'Failed to read file contents, please check you have the correct permissions and the file still exists',
+          'Dismiss',
+          { duration: 5000 }
+        );
+      }
+      if (filePath && fileContents) {
         this.currentFileContents.set(fileContents);
-        this.updateValuesFromText(fileContents, selectedFile);
+        this.updateValuesFromText(fileContents, filePath);
       }
     });
   }
@@ -126,6 +144,11 @@ export class EditorComponent {
     } catch (err) {
       if (selectedFile) {
         console.error(`Failed to parse contents of file ${selectedFile}`, err);
+        this.snackBar.open(
+          'Failed to parse file contents as JSON, please ensure this is a valid JSON formatted file',
+          'Dismiss',
+          { duration: 5000 }
+        );
       }
     }
   }
@@ -149,8 +172,8 @@ export class EditorComponent {
       const serialised = this.serialisedValues();
       try {
         // TODO: Tauri is bugged on mac atm, remove this when resolved: https://github.com/tauri-apps/tauri/issues/4633
-        if (selectedFile) {
-          await writeTextFile(selectedFile, serialised);
+        if (!selectedFile?.browserFile && selectedFile?.path) {
+          await writeTextFile(selectedFile.path, serialised);
         } else {
           const filePath = await save({
             defaultPath: `${this.selectedMessage().name}.json`,

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

@@ -27,6 +27,7 @@ export interface FileOrFolder {
   name: string;
   children?: FileOrFolder[];
   path?: string;
+  browserFile?: File;
 }
 
 interface FileNode {
@@ -159,15 +160,27 @@ export class FileTreeComponent implements OnInit, OnDestroy {
               matchingChild = {
                 isDirectory: true,
                 name: relativePath,
+                path: file.webkitRelativePath,
                 children: [],
+                browserFile: file,
               };
               currentChildren?.push(matchingChild);
             }
             currentChildren = matchingChild.children;
           }
-          currentChildren?.push({ isDirectory: false, name: file.name });
+          currentChildren?.push({
+            isDirectory: false,
+            name: file.name,
+            path: file.webkitRelativePath,
+            browserFile: file,
+          });
         } else {
-          mappedFiles.push({ isDirectory: false, name: file.name });
+          mappedFiles.push({
+            isDirectory: false,
+            name: file.name,
+            path: file.webkitRelativePath,
+            browserFile: file,
+          });
         }
       }
       this.recursiveSort(mappedFiles);

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

@@ -5,6 +5,7 @@
   height: 100%;
   box-sizing: border-box;
   transition: background-color 100ms linear;
+  overflow: auto;
 }
 
 :host.droppable * {