Add file drag drop, text-overflow handling, close tab on middle click

src/app/app.component.html

@@ -20,12 +20,20 @@
   <ng-template #panel>
     <p-splitter layout="vertical" [panelSizes]="[70, 30]">
       <ng-template #panel>
-        <div class="flex flex-col w-full">
+        <div
+          class="flex flex-col w-full"
+          (dragenter)="dragEnter($event)"
+          (dragleave)="dragLeave($event)"
+          (dragover)="$event.preventDefault()"
+          (drop)="fileDropped($event)"
+          [class.border-dashed]="dragging()"
+          [class.border-2]="dragging()"
+        >
           @if (tabs().length > 0) {
             <p-tabs [(value)]="selectedTab" class="w-full" scrollable>
               <p-tablist>
                 @for (tab of tabs(); track $index) {
-                  <p-tab [value]="$index">
+                  <p-tab [value]="$index" (auxclick)="removeTab($index)">
                     <span>{{ tab.name }}</span>
                     <span
                       (click)="removeTab($index)"

src/app/app.component.ts

@@ -31,6 +31,7 @@ export class AppComponent {
   protected selectedFile = signal<File | undefined>(undefined);
   protected tabs = signal<File[]>([]);
   protected selectedTab = signal(0);
+  protected dragging = signal(false);
 
   constructor() {
     effect(() => {
@@ -38,13 +39,16 @@ export class AppComponent {
       if (selectedFile) {
         if (
           this.tabs().find(
-            (tab) => tab.webkitRelativePath === selectedFile.webkitRelativePath,
+            (tab) =>
+              tab.webkitRelativePath === selectedFile.webkitRelativePath &&
+              tab.name === selectedFile.name,
           )
         ) {
           this.selectedTab.set(
             this.tabs().findIndex(
               (tab) =>
-                tab.webkitRelativePath === selectedFile.webkitRelativePath,
+                tab.webkitRelativePath === selectedFile.webkitRelativePath &&
+                tab.name === selectedFile.name,
             ),
           );
         } else {
@@ -84,12 +88,34 @@ export class AppComponent {
     }
   }
 
-  // TODO: Drop files over viewport
   protected fileDropped(event: DragEvent) {
-    if (event.dataTransfer?.items.length ?? 0 > 1) {
-      // Open in the tabs
-    } else if (event.dataTransfer?.items.length ?? 0 > 0) {
-      // Open in current tab
+    event.preventDefault();
+    const files = event.dataTransfer?.files;
+    if (files) {
+      for (const file of files) {
+        if (file.type === 'text/csv') {
+          this.selectedFile.set(file);
+        }
+      }
+    }
+    this.dragging.set(false);
+  }
+
+  protected dragEnter(event: DragEvent) {
+    event.preventDefault();
+    const numItems = event.dataTransfer?.items.length;
+    if (numItems) {
+      for (let i = 0; i < numItems; i++) {
+        if (event.dataTransfer?.items[i].type === 'text/csv') {
+          this.dragging.set(true);
+          return;
+        }
+      }
     }
   }
+
+  protected dragLeave(event: DragEvent) {
+    event.preventDefault();
+    this.dragging.set(false);
+  }
 }

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

@@ -1,6 +1,5 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   computed,
   effect,
@@ -10,12 +9,7 @@ import {
   viewChild,
 } from '@angular/core';
 import { Skeleton } from 'primeng/skeleton';
-import {
-  Table,
-  TableColumnReorderEvent,
-  TableLazyLoadEvent,
-  TableModule,
-} from 'primeng/table';
+import { Table, TableLazyLoadEvent, TableModule } from 'primeng/table';
 import {
   Aggregate,
   AggregateType,
@@ -109,7 +103,10 @@ import { PaginatorModule, PaginatorState } from 'primeng/paginator';
           <ng-template #body let-rowData let-columns="columns">
             <tr style="height: 46px">
               @for (col of columns; track $index) {
-                <td pReorderableRowHandle class="w-3xs min-w-3xs max-w-3xs">
+                <td
+                  pReorderableRowHandle
+                  class="w-3xs min-w-3xs max-w-3xs text-ellipsis whitespace-nowrap"
+                >
                   {{ rowData[col.name] }}
                 </td>
               }