Add button to open files directly, fix tab closing

src/app/app.component.html

@@ -1,4 +1,3 @@
-<!-- Panel menu for files/sheets in workspace: https://primeng.org/panelmenu -->
 <p-toolbar>
   <ng-template #start></ng-template>
   <ng-template #center>
@@ -21,7 +20,7 @@
     <p-splitter layout="vertical" [panelSizes]="[70, 30]">
       <ng-template #panel>
         <div
-          class="flex flex-col w-full"
+          class="flex flex-col w-full justify-center"
           (dragenter)="dragEnter($event)"
           (dragleave)="dragLeave($event)"
           (dragover)="$event.preventDefault()"
@@ -51,6 +50,14 @@
               class="flex w-full flex-1"
               [file]="selectedFile()"
             ></app-file-viewer>
+          } @else {
+            <p-button
+              label="Open files"
+              class="self-center"
+              variant="outlined"
+              severity="secondary"
+              (onClick)="fileSelector.click()"
+            ></p-button>
           }
         </div>
       </ng-template>
@@ -65,3 +72,11 @@
     <div class="flex items-center justify-center h-full">Panel 4</div>
   </ng-template>
 </p-splitter>
+<input
+  #fileSelector
+  multiple
+  class="hidden"
+  type="file"
+  accept="text/csv"
+  (change)="fileChange($event)"
+/>

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