Refactor table state, start adding history support, update packages

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import {
   Component,
   ElementRef,
+  HostListener,
   effect,
   signal,
   viewChild,
@@ -16,7 +17,7 @@ import { InputTextModule } from 'primeng/inputtext';
 import { FileTreeComponent } from './file-tree/file-tree.component';
 import { FileViewerComponent } from './file-viewer/file-viewer.component';
 import { ColumnEditorComponent } from './column-editor/column-editor.component';
-import { Column } from './duckdb.service';
+import { Column, Sheet } from './duckdb.service';
 
 @Component({
   selector: 'app-root',
@@ -37,9 +38,9 @@ import { Column } from './duckdb.service';
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
-  protected selectedFile = signal<File | undefined>(undefined);
+  protected selectedSheet = signal<Sheet | undefined>(undefined);
   protected selectedFileColumns = signal<Column[]>([]);
-  protected tabs = signal<File[]>([]);
+  protected sheets = signal<Sheet[]>([]);
   protected selectedTab = signal(0);
   protected dragging = signal(false);
 
@@ -47,25 +48,25 @@ export class AppComponent {
 
   constructor() {
     effect(() => {
-      const selectedFile = this.selectedFile();
+      const selectedFile = this.selectedSheet();
       if (selectedFile) {
-        this.addFile(selectedFile);
+        this.addSheet(selectedFile);
       }
     });
 
     effect(() => {
-      if (this.selectedFile() !== this.tabs()[this.selectedTab()]) {
-        if (this.tabs().length > 0) {
-          this.selectedFile.set(this.tabs()[Number(this.selectedTab())]);
+      if (this.selectedSheet() !== this.sheets()[this.selectedTab()]) {
+        if (this.sheets().length > 0) {
+          this.selectedSheet.set(this.sheets()[Number(this.selectedTab())]);
         } else {
-          this.selectedFile.set(undefined);
+          this.selectedSheet.set(undefined);
         }
       }
     });
   }
 
   protected removeTab(index: number) {
-    this.tabs.update((tabs) => {
+    this.sheets.update((tabs) => {
       const copy = tabs.slice();
       copy.splice(index, 1);
       return copy;
@@ -73,12 +74,12 @@ export class AppComponent {
     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.selectedSheet.set(this.sheets()[this.selectedTab()]);
+      } else if (this.sheets().length > 1) {
         this.selectedTab.update((tab) => tab + 1);
-        this.selectedFile.set(this.tabs()[this.selectedTab()]);
+        this.selectedSheet.set(this.sheets()[this.selectedTab()]);
       } else {
-        this.selectedFile.set(undefined);
+        this.selectedSheet.set(undefined);
       }
     }
   }
@@ -89,7 +90,7 @@ export class AppComponent {
     if (files) {
       for (const file of files) {
         if (file.type === 'text/csv') {
-          this.addFile(file);
+          this.addSheet({ file, history: [] });
         }
       }
     }
@@ -119,31 +120,43 @@ export class AppComponent {
     if (files) {
       for (const file of files) {
         if (file.type === 'text/csv') {
-          this.addFile(file);
+          this.addSheet({ file, history: [] });
         }
       }
-      this.selectedTab.set(this.tabs().length - 1);
+      this.selectedTab.set(this.sheets().length - 1);
     }
   }
 
-  private addFile(file: File) {
+  private addSheet(newSheet: Sheet) {
     if (
-      this.tabs().find(
-        (tab) =>
-          tab.webkitRelativePath === file.webkitRelativePath &&
-          tab.name === file.name,
+      this.sheets().find(
+        (sheet) =>
+          sheet.file.webkitRelativePath === newSheet.file.webkitRelativePath &&
+          sheet.file.name === newSheet.file.name,
       )
     ) {
       this.selectedTab.set(
-        this.tabs().findIndex(
-          (tab) =>
-            tab.webkitRelativePath === file.webkitRelativePath &&
-            tab.name === file.name,
+        this.sheets().findIndex(
+          (sheet) =>
+            sheet.file.webkitRelativePath ===
+              newSheet.file.webkitRelativePath &&
+            sheet.file.name === newSheet.file.name,
         ),
       );
     } else {
-      this.tabs.update((tabs) => [...tabs, file]);
-      this.selectedTab.set(this.tabs().length - 1);
+      this.sheets.update((tabs) => [...tabs, newSheet]);
+      this.selectedTab.set(this.sheets().length - 1);
+    }
+  }
+  @HostListener('window:keydown', [
+    '$event.key',
+    '$event.ctrlKey',
+    '$event.metaKey',
+  ])
+  keydown(key: string, hasCtrl: boolean, hasMeta: boolean) {
+    const sheets = this.sheets();
+    if (sheets.length > 1 && key === 'z' && (hasCtrl || hasMeta)) {
+      this.sheets()[0].history.pop();
     }
   }
 }