From 58c92fb6a9f47c3ee68758844737cab11ce2ae98 Mon Sep 17 00:00:00 2001
From: vato007 <contact@michaelpivato.dev>
Date: Fri, 28 Jun 2024 21:34:48 +0930
Subject: [PATCH] Tweak styling in protobuf selector, fix html drag and drop in
 tauri

---
 src-tauri/tauri.conf.json                     |  3 +-
 ... proto-definition-selector.component.scss} |  0
 .../proto-definition-selector.component.ts    | 33 +++++++++++--------
 src/styles.scss                               |  1 +
 test.proto                                    | 16 ++++++++-
 5 files changed, 37 insertions(+), 16 deletions(-)
 rename src/app/proto-definition-selector/{proto-definition-selector.component.css => proto-definition-selector.component.scss} (100%)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 84e03e1..f6fb717 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -99,7 +99,8 @@
         "title": "BufPiv",
         "hiddenTitle": true,
         "width": 800,
-        "titleBarStyle": "Overlay"
+        "titleBarStyle": "Overlay",
+        "fileDropEnabled": false
       }
     ]
   }
diff --git a/src/app/proto-definition-selector/proto-definition-selector.component.css b/src/app/proto-definition-selector/proto-definition-selector.component.scss
similarity index 100%
rename from src/app/proto-definition-selector/proto-definition-selector.component.css
rename to src/app/proto-definition-selector/proto-definition-selector.component.scss
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 38c18c0..21c6f70 100644
--- a/src/app/proto-definition-selector/proto-definition-selector.component.ts
+++ b/src/app/proto-definition-selector/proto-definition-selector.component.ts
@@ -23,32 +23,35 @@ import { MatButtonModule } from '@angular/material/button';
   imports: [CommonModule, MatListModule, MatButtonModule],
   template: `
     <h2>Protobuf Definitions</h2>
-    <mat-list>
+    <mat-action-list>
       @for (item of definitionFiles(); track $index) {
-      <mat-list-item (click)="selectProtoDefinition(item)">{{
-        item.name
-      }}</mat-list-item>
+      <button mat-list-item (click)="selectProtoDefinition(item)">
+        {{ item.name }}
+      </button>
       }
-    </mat-list>
+    </mat-action-list>
     <button mat-button (click)="protoSelector.click()">
       Select definitions
     </button>
+    @if(selectedProtoFile()) {
+    <h3>Messages in {{ selectedProtoFile()?.name }}</h3>
+    <mat-action-list>
+      @for (item of selectedDefinition(); track $index) {
+      <button mat-list-item (click)="messageSelected.emit(item)">
+        {{ item.name }}
+      </button>
+      }
+    </mat-action-list>
+    }
+
     <input
       #protoSelector
       type="file"
       (change)="addDefinitionFiles()"
       accept=".proto"
     />
-    <mat-list>
-      @for (item of selectedDefinition(); track $index) {
-      <mat-list-item (click)="messageSelected.emit(item)">{{
-        item.name
-      }}</mat-list-item>
-      }
-    </mat-list>
-    <!-- TODO: more detail when dragging over so user knows they can drop the file -->
   `,
-  styleUrl: './proto-definition-selector.component.css',
+  styleUrl: './proto-definition-selector.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProtoDefinitionSelectorComponent {
@@ -57,6 +60,7 @@ export class ProtoDefinitionSelectorComponent {
 
   protected definitionFiles = signal<File[]>([]);
   protected selectedDefinition = signal<ProtoMessage[]>([]);
+  protected selectedProtoFile = signal<File | null>(null);
   protected isDragging = signal(false);
 
   private currentFiles: string[] = [];
@@ -91,6 +95,7 @@ export class ProtoDefinitionSelectorComponent {
       const messageObjects =
         await this.protoDefinitionService.parseProtoDefinition(protoContents);
       this.selectedDefinition.set(messageObjects);
+      this.selectedProtoFile.set(file);
     } catch (err) {
       console.error(err);
       alert(
diff --git a/src/styles.scss b/src/styles.scss
index c841266..53042d6 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -26,6 +26,7 @@ html {
   @include mat.sidenav-theme(theme.$rose-theme);
   @include mat.icon-theme(theme.$rose-theme);
   @include mat.form-field-theme(theme.$rose-theme);
+  @include mat.list-theme(theme.$rose-theme);
   @include custom-colours(theme.$rose-theme);
 }
 
diff --git a/test.proto b/test.proto
index 268b235..981dd45 100644
--- a/test.proto
+++ b/test.proto
@@ -1,6 +1,9 @@
 syntax="proto3";
 
 message Test {
+    message NestedMessage {
+      string nested = 1;
+    }
     string hello = 1;
     int32 hello2 = 2;
     int64 hello3 = 3;
@@ -9,4 +12,15 @@ message Test {
     bool hello6 = 6;
     repeated string hello7 = 7;
     map<string, string> hello8 = 8;
-}
\ No newline at end of file
+    ReferenceMessage hello9 = 9;
+    NestedMessage hello10 = 10;
+    EnumTest enum_test = 11;
+  }
+  
+  message ReferenceMessage {
+    string test = 1; 
+  }
+  
+  enum EnumTest {
+    Hello = 0;
+  }
\ No newline at end of file