feat(home, planting): add AddTermsButtonComponent that wraps both a b…

…utton and a modal, use it also on planting page

src/app/home/add-terms-button/add-terms-button.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+import { IconComponent } from '../../ui/icon/icon';
+import { AddTermsDialogComponent } from '../add-terms-dialog/add-terms-dialog.component';
+
+@Component({
+  selector: 'app-add-terms-button',
+  template: `
+    <button class="fixed bottom-16 right-6" title="Add" (click)="showAddTermsDialog.set(true)">
+      <app-icon class="size-10 text-action-primary" name="plusInCircle" />
+    </button>
+
+    @if (showAddTermsDialog()) {
+      <app-add-terms-dialog (close)="showAddTermsDialog.set(false)" />
+    }
+  `,
+  imports: [IconComponent, AddTermsDialogComponent],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddTermsButtonComponent {
+  showAddTermsDialog = signal(false);
+}

src/app/home/add-dialog/add-dialog.component.ts → src/app/home/add-terms-dialog/add-terms-dialog.component.ts

@@ -5,9 +5,8 @@ import { ButtonDirective } from '../../ui/button/button';
 import { DialogComponent } from '../../ui/dialog/dialog.component';
 import { InputDirective } from '../../ui/input/input';
 
-// TODO: fix naming
 @Component({
-  selector: 'app-add-dialog',
+  selector: 'app-add-terms-dialog',
   template: `
     <app-dialog (close)="close.emit()">
       <div class="flex h-full flex-col gap-8 pt-10">
@@ -31,7 +30,7 @@ import { InputDirective } from '../../ui/input/input';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddDialogComponent {
+export class AddTermsDialogComponent {
   private barnService = inject(BarnService);
 
   close = output();

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

@@ -1,8 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { LearnCardsComponent } from '../learning/learn-cards.component';
-import { IconComponent } from '../ui/icon/icon';
-import { AddDialogComponent } from './add-dialog/add-dialog.component';
+import { AddTermsButtonComponent } from './add-terms-button/add-terms-button.component';
 import { LastSeedsListComponent } from './last-seeds-list/last-seeds-list.component';
 import { UnsortedSproutsComponent } from './unsorted-sprouts/unsorted-sprouts.component';
 
@@ -16,19 +15,11 @@ import { UnsortedSproutsComponent } from './unsorted-sprouts/unsorted-sprouts.co
 
       <app-last-seeds-list />
 
-      <button class="absolute bottom-6 right-6" title="Add" (click)="showAddDialog.set(true)">
-        <app-icon class="size-10 text-action-primary" name="plusInCircle" />
-      </button>
-
-      @if (showAddDialog()) {
-        <app-add-dialog (close)="showAddDialog.set(false)" />
-      }
+      <app-add-terms-button />
     </div>
   `,
-  imports: [UnsortedSproutsComponent, LearnCardsComponent, IconComponent, AddDialogComponent, LastSeedsListComponent],
+  imports: [UnsortedSproutsComponent, LearnCardsComponent, AddTermsButtonComponent, LastSeedsListComponent],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HomePageComponent {
-  showAddDialog = signal(false);
-}
+export class HomePageComponent {}

src/app/layout/layout.component.ts

@@ -9,22 +9,18 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
         <ng-content />
       </main>
 
-      <nav class="shrink-0 border-t border-primary/10 px-2">
-        <ul class="flex justify-between gap-2">
-          @for (link of navigationLinks; track link.path) {
-            <li>
-              <!-- TODO: fix important usage -->
-              <a
-                class="block p-3 text-secondary"
-                [routerLink]="link.path"
-                routerLinkActive="!text-primary"
-                [routerLinkActiveOptions]="link.options ?? { exact: false }"
-              >
-                {{ link.label }}
-              </a>
-            </li>
-          }
-        </ul>
+      <nav class="flex shrink-0 justify-between gap-2 border-t border-primary/10 px-2">
+        @for (link of navigationLinks; track link.path) {
+          <!-- TODO: fix important usage -->
+          <a
+            class="block p-3 text-secondary"
+            [routerLink]="link.path"
+            routerLinkActive="!text-primary"
+            [routerLinkActiveOptions]="link.options ?? { exact: false }"
+          >
+            {{ link.label }}
+          </a>
+        }
       </nav>
     </div>
   `,

src/app/planting/planting-page.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 
 import { BarnService } from '../barn/barn.service';
+import { AddTermsButtonComponent } from '../home/add-terms-button/add-terms-button.component';
 import { DialogComponent } from '../ui/dialog/dialog.component';
 import { SeedDetailsComponent, type SeedDetailsSeed } from './seed-details/seed-details.component';
 import { SeedsListComponent } from './seeds-list/seeds-list.component';
@@ -11,6 +12,8 @@ import { SeedsListComponent } from './seeds-list/seeds-list.component';
     <div class="flex flex-col gap-4">
       <app-seeds-list [seeds]="seeds() ?? []" (showDetails)="seedDetails.set($event)" />
 
+      <app-add-terms-button />
+
       @if (seedDetails(); as seed) {
         <app-dialog (close)="seedDetails.set(null)">
           <app-seed-details
@@ -23,7 +26,7 @@ import { SeedsListComponent } from './seeds-list/seeds-list.component';
       }
     </div>
   `,
-  imports: [SeedsListComponent, SeedDetailsComponent, DialogComponent],
+  imports: [SeedsListComponent, SeedDetailsComponent, DialogComponent, AddTermsButtonComponent],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })