Add button to open files directly, fix tab closing

src/app/app.component.ts

@@ -1,4 +1,10 @@
-import { Component, effect, signal, viewChild } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  effect,
+  signal,
+  viewChild,
+} from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { SplitterModule } from 'primeng/splitter';
 import { TabsModule } from 'primeng/tabs';
@@ -33,28 +39,13 @@ export class AppComponent {
   protected selectedTab = signal(0);
   protected dragging = signal(false);
 
+  private fileInput = viewChild<ElementRef<HTMLInputElement>>('fileSelector');
+
   constructor() {
     effect(() => {
       const selectedFile = this.selectedFile();
       if (selectedFile) {
-        if (
-          this.tabs().find(
-            (tab) =>
-              tab.webkitRelativePath === selectedFile.webkitRelativePath &&
-              tab.name === selectedFile.name,
-          )
-        ) {
-          this.selectedTab.set(
-            this.tabs().findIndex(
-              (tab) =>
-                tab.webkitRelativePath === selectedFile.webkitRelativePath &&
-                tab.name === selectedFile.name,
-            ),
-          );
-        } else {
-          this.tabs.update((tabs) => [...tabs, selectedFile]);
-          this.selectedTab.set(this.tabs().length - 1);
-        }
+        this.addFile(selectedFile);
       }
     });
 
@@ -72,7 +63,7 @@ export class AppComponent {
   protected removeTab(index: number) {
     this.tabs.update((tabs) => {
       const copy = tabs.slice();
-      copy.splice(index);
+      copy.splice(index, 1);
       return copy;
     });
     if (this.selectedTab() === index) {
@@ -94,7 +85,7 @@ export class AppComponent {
     if (files) {
       for (const file of files) {
         if (file.type === 'text/csv') {
-          this.selectedFile.set(file);
+          this.addFile(file);
         }
       }
     }
@@ -118,4 +109,37 @@ export class AppComponent {
     event.preventDefault();
     this.dragging.set(false);
   }
+
+  protected fileChange(event: Event) {
+    const files = this.fileInput()?.nativeElement.files;
+    if (files) {
+      for (const file of files) {
+        if (file.type === 'text/csv') {
+          this.addFile(file);
+        }
+      }
+      this.selectedTab.set(this.tabs().length - 1);
+    }
+  }
+
+  private addFile(file: File) {
+    if (
+      this.tabs().find(
+        (tab) =>
+          tab.webkitRelativePath === file.webkitRelativePath &&
+          tab.name === file.name,
+      )
+    ) {
+      this.selectedTab.set(
+        this.tabs().findIndex(
+          (tab) =>
+            tab.webkitRelativePath === file.webkitRelativePath &&
+            tab.name === file.name,
+        ),
+      );
+    } else {
+      this.tabs.update((tabs) => [...tabs, file]);
+      this.selectedTab.set(this.tabs().length - 1);
+    }
+  }
 }