From e3024bdfae3f20c21560853dd26dcda2e72128b3 Mon Sep 17 00:00:00 2001
From: vato007 <contact@michaelpivato.dev>
Date: Wed, 4 Sep 2024 19:01:12 +0930
Subject: [PATCH] Sort proto messages and files, fix export state when a
 configuration is modified

---
 src/app/file-tree/file-tree.component.ts                 | 4 +++-
 .../proto-definition-selector.component.ts               | 9 ++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/file-tree/file-tree.component.ts b/src/app/file-tree/file-tree.component.ts
index b8cb6aa..03346ea 100644
--- a/src/app/file-tree/file-tree.component.ts
+++ b/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) {
diff --git a/src/app/proto-definition-selector/proto-definition-selector.component.ts b/src/app/proto-definition-selector/proto-definition-selector.component.ts
index 4d43a16..77baa0a 100644
--- a/src/app/proto-definition-selector/proto-definition-selector.component.ts
+++ b/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