feat(seeding): add seeding page with adding new seeds to barn

src/app/app.component.ts

@@ -6,10 +6,9 @@ import { RouterOutlet } from '@angular/router';
   standalone: true,
   imports: [RouterOutlet],
   template: `
-    <div class="p-5">
-      <button>smth</button>
+    <main class="h-dvh p-5">
       <router-outlet></router-outlet>
-    </div>
+    </main>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/app.routes.ts

@@ -1,3 +1,6 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: 'seeding', loadChildren: () => import('./seeding/seeding.routes').then(m => m.seedingRoutes) },
+  { path: '', redirectTo: '/seeding', pathMatch: 'full' },
+];

src/app/barn/barn.service.ts

@@ -0,0 +1,29 @@
+import { Injectable, signal } from '@angular/core';
+
+interface Barn {
+  seeds: Record<string, Seed>;
+}
+
+interface Seed {
+  name: string;
+  count?: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class BarnService {
+  private barn = signal<Barn>({ seeds: {} });
+
+  addSeed(name: string) {
+    this.barn.update(barn => {
+      const seed = barn.seeds[name];
+
+      return {
+        ...barn,
+        seeds: {
+          ...barn.seeds,
+          [name]: { ...seed, count: (seed?.count || 0) + 1 },
+        },
+      };
+    });
+  }
+}

src/app/seeding/new-seed/new-seed.component.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { BarnService } from '../../barn/barn.service';
+
+@Component({
+  selector: 'app-new-seed',
+  template: `
+    <div class="flex flex-col gap-2">
+      <input
+        type="text"
+        class="p-2 border border-gray-300 text-center"
+        placeholder="New seed"
+        [value]="newSeed()"
+        (input)="updateSeed($event)"
+        (keydown.enter)="saveSeed()"
+      />
+    </div>
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NewSeedComponent {
+  newSeed = signal('');
+
+  private barn = inject(BarnService);
+
+  updateSeed(event: Event) {
+    this.newSeed.set((event.target as HTMLInputElement).value);
+  }
+
+  saveSeed() {
+    const seed = this.newSeed();
+
+    if (!seed) {
+      return;
+    }
+
+    this.barn.addSeed(seed);
+    this.newSeed.set('');
+  }
+}

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

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NewSeedComponent } from './new-seed/new-seed.component';
+
+@Component({
+  selector: 'app-seeding-page',
+  template: `
+    <div class="flex flex-col gap-2">
+      <app-new-seed></app-new-seed>
+      <!-- <app-seed-list></app-seed-list> -->
+    </div>
+  `,
+  imports: [NewSeedComponent],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SeedingPageComponent {}

src/app/seeding/seeding.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+export const seedingRoutes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./seeding-page.component').then(m => m.SeedingPageComponent),
+  },
+];