Tweak styling in protobuf selector, fix html drag and drop in tauri

src-tauri/tauri.conf.json

@@ -99,7 +99,8 @@
         "title": "BufPiv",
         "hiddenTitle": true,
         "width": 800,
-        "titleBarStyle": "Overlay"
+        "titleBarStyle": "Overlay",
+        "fileDropEnabled": false
       }
     ]
   }

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(

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);
 }
 

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;
+    ReferenceMessage hello9 = 9;
+    NestedMessage hello10 = 10;
+    EnumTest enum_test = 11;
+  }
+  
+  message ReferenceMessage {
+    string test = 1; 
+  }
+  
+  enum EnumTest {
+    Hello = 0;
   }