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

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