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

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