feat(home): update last seeds list with count value and details dialog

src/app/home/last-seeds-list/last-seeds-list.component.ts

@@ -1,23 +1,32 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 
 import { BarnService } from '../../barn/barn.service';
+import { SeedDetailsDialogComponent } from '../../planting/seed-details-dialog/seed-details-dialog.component';
+import { type SeedDetailsSeed } from '../../planting/seed-details/seed-details.component';
 
 @Component({
   selector: 'app-last-seeds-list',
   template: `
     <section>
       <h2 class="text-lg text-secondary">Last seeds</h2>
 
-      <ul class="columns-2 gap-4">
+      <ul class="flex flex-col gap-2">
         @for (seed of lastAddedSeeds(); track seed.name) {
-          <li class="w-full truncate px-2 py-1">
-            {{ seed.name }}
+          <li>
+            <button class="flex w-full items-center gap-2 px-2 py-1 text-left" (click)="seedDetails.set(seed)">
+              <span class="grow truncate">{{ seed.name }}</span>
+              <span class="shrink-0">{{ seed.count }}</span>
+            </button>
           </li>
         }
       </ul>
     </section>
+
+    @if (seedDetails(); as seed) {
+      <app-seed-details-dialog [seed]="seed" (close)="seedDetails.set(null)" />
+    }
   `,
-  imports: [],
+  imports: [SeedDetailsDialogComponent],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -30,6 +39,7 @@ export class LastSeedsListComponent {
       ?.toSorted((a, b) => b.lastAddedAt.localeCompare(a.lastAddedAt))
       .slice(0, lastSeedsCount),
   );
+  seedDetails = signal<SeedDetailsSeed | null>(null);
 }
 
 const lastSeedsCount = 10;