feat(cards): add add-cards button and dialog

package.json

@@ -23,6 +23,7 @@
     "@angular/router": "^18.2.5",
     "@sentry/angular": "^8.30.0",
     "clsx": "^2.1.1",
+    "csv-parse": "^5.5.6",
     "nanoid": "^5.0.7",
     "rxdb": "^15.33.0",
     "rxjs": "~7.8.0",

src/app/cards/add-cards-button/add-cards-button.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+import { DialogComponent } from '../../ui/dialog/dialog.component';
+import { IconComponent } from '../../ui/icon/icon';
+import { AddCardsComponent } from '../add-cards/add-cards.component';
+
+@Component({
+  selector: 'app-add-cards-button',
+  template: `
+    <button
+      class="fixed bottom-16 right-6 flex items-center justify-center rounded-full bg-action-primary shadow-md"
+      title="Add"
+      (click)="showAddCardsDialog.set(true)"
+    >
+      <app-icon class="size-10 text-primary" name="plusInCircle" />
+    </button>
+
+    <app-dialog [open]="showAddCardsDialog()" (close)="showAddCardsDialog.set(false)">
+      <ng-template>
+        <app-add-cards (close)="showAddCardsDialog.set(false)" />
+      </ng-template>
+    </app-dialog>
+  `,
+  imports: [IconComponent, AddCardsComponent, DialogComponent],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddCardsButtonComponent {
+  showAddCardsDialog = signal(false);
+}

src/app/cards/add-cards/add-cards.component.ts

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component, inject, output, signal } from '@angular/core';
+import { parse } from 'csv-parse/browser/esm/sync';
+
+import { BarnService } from '../../barn/barn.service';
+import { ButtonDirective } from '../../ui/button/button';
+import { InputDirective } from '../../ui/input/input';
+
+@Component({
+  selector: 'app-add-cards',
+  template: `
+    <div class="flex h-full flex-col gap-8">
+      <textarea
+        class="grow"
+        appInput
+        placeholder="term;fullTerm;definition (one per line)"
+        [value]="newCards()"
+        (input)="updateNewCards($event)"
+      ></textarea>
+
+      @if (parseError()) {
+        <div class="shrink-0 text-semantic-danger">{{ parseError() }}</div>
+      }
+
+      <div class="mt-auto flex shrink-0 justify-end gap-4">
+        <button appButton (click)="close.emit()">Cancel</button>
+        <button appButton appButtonType="primary" (click)="add()">Add</button>
+      </div>
+    </div>
+  `,
+  imports: [ButtonDirective, InputDirective],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddCardsComponent {
+  private barnService = inject(BarnService);
+
+  close = output();
+
+  newCards = signal('');
+  parseError = signal<string | null>(null);
+
+  updateNewCards(event: Event) {
+    this.newCards.set((event.target as HTMLTextAreaElement).value);
+  }
+
+  add() {
+    this.parseError.set(null);
+
+    try {
+      const newCards = (
+        parse(this.newCards(), {
+          delimiter: ';',
+          columns: ['term', 'fullTerm', 'definition'],
+        }) as ParsedCard[]
+      ).filter(card => !!card.term);
+
+      this.barnService.addCards(newCards);
+    } catch (error) {
+      this.parseError.set(String(error));
+      return;
+    }
+
+    this.close.emit();
+  }
+}
+
+interface ParsedCard {
+  term: string;
+  fullTerm: string;
+  definition: string;
+}

src/app/pages/cards/cards-page.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 
 import { BarnService } from '../../barn/barn.service';
+import { AddCardsButtonComponent } from '../../cards/add-cards-button/add-cards-button.component';
 import { CardDetailsDialogComponent } from '../../cards/card-details-dialog/card-details-dialog.component';
 import type { CardDetailsCard } from '../../cards/card-details/card-details.component';
 import { LearnCardsComponent } from '../../learning/learn-cards.component';
@@ -19,9 +20,11 @@ import { CardsListComponent } from './cards-list/cards-list.component';
         [card]="cardDetailsDialog().card"
         (close)="closeCardDetailsDialog()"
       />
+
+      <app-add-cards-button />
     </div>
   `,
-  imports: [CardsListComponent, CardDetailsDialogComponent, LearnCardsComponent],
+  imports: [CardsListComponent, CardDetailsDialogComponent, LearnCardsComponent, AddCardsButtonComponent],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })