Sort proto messages and files, fix export state when a configuration is modified

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

@@ -36,6 +36,8 @@ interface FileNode {
   level: number;
 }
 
+const collator = new Intl.Collator(undefined, { numeric: true });
+
 @Component({
   selector: 'app-file-tree',
   standalone: true,
@@ -201,7 +203,7 @@ export class FileTreeComponent implements OnInit, OnDestroy {
   }
 
   private sortFiles = (a: { name?: string }, b: { name?: string }) =>
-    new Intl.Collator(undefined, { numeric: true }).compare(a.name!, b.name!);
+    collator.compare(a.name!, b.name!);
 
   private recursiveSort(files: FileOrFolder[]) {
     for (const file of files) {

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

@@ -25,6 +25,8 @@ import { DefinitionEditorComponent } from './definition-editor/definition-editor
 
 declare const __TAURI__: any;
 
+const collator = new Intl.Collator(undefined, { numeric: true });
+
 @Component({
   selector: 'app-proto-definition-selector',
   standalone: true,
@@ -195,7 +197,7 @@ export class ProtoDefinitionSelectorComponent {
       }
       const parsed = JSON.parse(fileContents) as ProtoMessage[];
       this.allProtoFiles.set(
-        parsed.sort((a, b) => a.name.localeCompare(b.name))
+        parsed.sort((a, b) => collator.compare(a.name, b.name))
       );
       this.selectedDefinition.set(this.allProtoFiles());
       this.currentFiles.set([]);
@@ -210,6 +212,9 @@ export class ProtoDefinitionSelectorComponent {
           ]);
         }
       }
+      this.currentFiles.update((currentFiles) =>
+        [...currentFiles].sort(collator.compare)
+      );
     } catch (err) {
       console.error(err);
       this.snackBar.open(
@@ -242,6 +247,8 @@ export class ProtoDefinitionSelectorComponent {
       })
       .afterClosed()
       .subscribe(() => {
+        // Force signals to update since state is mutated in place
+        this.allProtoFiles.update((files) => files.slice());
         if (
           protoMessage ===
           this.messageSelector()?.selectedOptions.selected[0]?.value