Add support for multiple tabs

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, signal, viewChild } from '@angular/core';
+import { Component, effect, signal, viewChild } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { SplitterModule } from 'primeng/splitter';
 import { TabsModule } from 'primeng/tabs';
@@ -28,7 +28,68 @@ import { FileViewerComponent } from './file-viewer/file-viewer.component';
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
-  // TODO: When a file is selected, we add a new sheet with that file as the current file?
-  // For now we'll just store the current file only
-  selectedFile = signal<File | undefined>(undefined);
+  protected selectedFile = signal<File | undefined>(undefined);
+  protected tabs = signal<File[]>([]);
+  protected selectedTab = signal(0);
+
+  constructor() {
+    effect(() => {
+      const selectedFile = this.selectedFile();
+      if (selectedFile) {
+        if (
+          this.tabs().find(
+            (tab) => tab.webkitRelativePath === selectedFile.webkitRelativePath,
+          )
+        ) {
+          this.selectedTab.set(
+            this.tabs().findIndex(
+              (tab) =>
+                tab.webkitRelativePath === selectedFile.webkitRelativePath,
+            ),
+          );
+        } else {
+          this.tabs.update((tabs) => [...tabs, selectedFile]);
+          this.selectedTab.set(this.tabs().length - 1);
+        }
+      }
+    });
+
+    effect(() => {
+      if (this.selectedFile() !== this.tabs()[this.selectedTab()]) {
+        if (this.tabs().length > 0) {
+          this.selectedFile.set(this.tabs()[Number(this.selectedTab())]);
+        } else {
+          this.selectedFile.set(undefined);
+        }
+      }
+    });
+  }
+
+  protected removeTab(index: number) {
+    this.tabs.update((tabs) => {
+      const copy = tabs.slice();
+      copy.splice(index);
+      return copy;
+    });
+    if (this.selectedTab() === index) {
+      if (this.selectedTab() > 0) {
+        this.selectedTab.update((tab) => tab - 1);
+        this.selectedFile.set(this.tabs()[this.selectedTab()]);
+      } else if (this.tabs().length > 1) {
+        this.selectedTab.update((tab) => tab + 1);
+        this.selectedFile.set(this.tabs()[this.selectedTab()]);
+      } else {
+        this.selectedFile.set(undefined);
+      }
+    }
+  }
+
+  // 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
+    }
+  }
 }