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

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