fix(seeds): fix state reset on add seeds dialog re-open, fix componen…

…ts naming

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { LearnCardsComponent } from '../../learning/learn-cards.component';
-import { AddTermsButtonComponent } from '../../seeds/add-terms-button/add-terms-button.component';
+import { AddSeedsButtonComponent } from '../../seeds/add-seeds-button/add-seeds-button.component';
 import { LastCardsListComponent } from './last-cards-list/last-cards-list.component';
 import { LastSeedsListComponent } from './last-seeds-list/last-seeds-list.component';
 import { UnsortedCardsComponent } from './unsorted-cards/unsorted-cards.component';
@@ -26,13 +26,13 @@ import { UnsortedCardsComponent } from './unsorted-cards/unsorted-cards.componen
         </div>
       </div>
 
-      <app-add-terms-button />
+      <app-add-seeds-button />
     </div>
   `,
   imports: [
     UnsortedCardsComponent,
     LearnCardsComponent,
-    AddTermsButtonComponent,
+    AddSeedsButtonComponent,
     LastSeedsListComponent,
     LastCardsListComponent,
   ],

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 
 import { BarnService } from '../../barn/barn.service';
-import { AddTermsButtonComponent } from '../../seeds/add-terms-button/add-terms-button.component';
+import { AddSeedsButtonComponent } from '../../seeds/add-seeds-button/add-seeds-button.component';
 import { SeedDetailsDialogComponent } from '../../seeds/seed-details-dialog/seed-details-dialog.component';
 import type { SeedDetailsSeed } from '../../seeds/seed-details/seed-details.component';
 import { SeedsListComponent } from './seeds-list/seeds-list.component';
@@ -12,7 +12,7 @@ import { SeedsListComponent } from './seeds-list/seeds-list.component';
     <div class="flex flex-col gap-4">
       <app-seeds-list [seeds]="seeds() ?? []" (showDetails)="seedDetailsDialog.set({ open: true, seed: $event })" />
 
-      <app-add-terms-button />
+      <app-add-seeds-button />
 
       <app-seed-details-dialog
         [open]="seedDetailsDialog().open"
@@ -21,7 +21,7 @@ import { SeedsListComponent } from './seeds-list/seeds-list.component';
       />
     </div>
   `,
-  imports: [SeedsListComponent, SeedDetailsDialogComponent, AddTermsButtonComponent],
+  imports: [SeedsListComponent, SeedDetailsDialogComponent, AddSeedsButtonComponent],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/seeds/add-seeds-button/add-seeds-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 { AddSeedsComponent } from '../add-seeds/add-seeds.component';
+
+@Component({
+  selector: 'app-add-seeds-button',
+  template: `
+    <button
+      class="fixed bottom-16 right-6 flex items-center justify-center rounded-full bg-action-primary shadow-md"
+      title="Add"
+      (click)="showAddSeedsDialog.set(true)"
+    >
+      <app-icon class="size-10 text-primary" name="plusInCircle" />
+    </button>
+
+    <app-dialog [open]="showAddSeedsDialog()" (close)="showAddSeedsDialog.set(false)">
+      <ng-template>
+        <app-add-seeds (close)="showAddSeedsDialog.set(false)" />
+      </ng-template>
+    </app-dialog>
+  `,
+  imports: [IconComponent, AddSeedsComponent, DialogComponent],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddSeedsButtonComponent {
+  showAddSeedsDialog = signal(false);
+}

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

@@ -0,0 +1,52 @@
+import { ChangeDetectionStrategy, Component, inject, output, signal } from '@angular/core';
+
+import { BarnService } from '../../barn/barn.service';
+import { ButtonDirective } from '../../ui/button/button';
+import { InputDirective } from '../../ui/input/input';
+
+@Component({
+  selector: 'app-add-seeds',
+  template: `
+    <div class="flex h-full flex-col gap-8">
+      <textarea
+        class="grow"
+        appInput
+        placeholder="One seed a line"
+        [value]="newSeed()"
+        (input)="updateSeed($event)"
+      ></textarea>
+
+      <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 AddSeedsComponent {
+  private barnService = inject(BarnService);
+
+  close = output();
+
+  newSeed = signal('');
+
+  updateSeed(event: Event) {
+    this.newSeed.set((event.target as HTMLTextAreaElement).value);
+  }
+
+  add() {
+    const newSeeds = this.newSeed()
+      .split('\n')
+      .map(seed => seed.trim())
+      .filter(seed => !!seed);
+
+    if (newSeeds.length !== 0) {
+      this.barnService.addSeeds(newSeeds);
+    }
+
+    this.close.emit();
+  }
+}