Add Drop button to item cards (#27)

- Add markDropped method to WatchListService
- Add Drop button to ItemCardComponent (disabled when completed/dropped)
- Handle markDropped in home and item-list components

Author: CodeWithMa

src/app/components/home/home.component.ts

@@ -22,6 +22,7 @@ import { ItemCardComponent } from '../item-card/item-card.component';
                 [item]="nextSeries()!"
                 (markWatched)="markSeriesWatched()"
                 (markCompleted)="markSeriesCompleted()"
+                (markDropped)="markSeriesDropped()"
                 />
             </div>
           } @else {
@@ -43,6 +44,7 @@ import { ItemCardComponent } from '../item-card/item-card.component';
                 [item]="nextMovie()!"
                 (markWatched)="markMovieWatched()"
                 (markCompleted)="markMovieCompleted()"
+                (markDropped)="markMovieDropped()"
                 />
             </div>
           } @else {
@@ -123,4 +125,20 @@ export class HomeComponent {
       this.updateNextItems();
     }
   }
+
+  markSeriesDropped(): void {
+    const series = this.nextSeries();
+    if (series) {
+      this.watchListService.markDropped(series.id);
+      this.updateNextItems();
+    }
+  }
+
+  markMovieDropped(): void {
+    const movie = this.nextMovie();
+    if (movie) {
+      this.watchListService.markDropped(movie.id);
+      this.updateNextItems();
+    }
+  }
 }

src/app/components/item-card/item-card.component.ts

@@ -58,6 +58,9 @@ import { statusBadgeClass } from '../../utils/status.utils';
             Mark Completed
           </button>
         }
+        <button (click)="markDropped.emit()" [disabled]="item().status === 'completed' || item().status === 'dropped'" class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:not-disabled:bg-light-bg-tertiary dark:hover:not-disabled:bg-dark-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed">
+          Drop
+        </button>
       </div>
     </div>
     `
@@ -68,6 +71,7 @@ export class ItemCardComponent {
   item = input.required<Item>();
   markWatched = output<void>();
   markCompleted = output<void>();
+  markDropped = output<void>();
   protected statusBadgeClass = statusBadgeClass;
 
   progressPercent = computed(() => {

src/app/components/item-list/item-list.component.ts

@@ -58,6 +58,7 @@ import { ItemCardComponent } from '../item-card/item-card.component';
             [item]="item"
             (markWatched)="markWatched(item.id)"
             (markCompleted)="markCompleted(item.id)"
+            (markDropped)="markDropped(item.id)"
             />
         } @empty {
           <p class="text-center text-light-font-muted dark:text-dark-font-muted p-8">
@@ -112,4 +113,8 @@ export class ItemListComponent {
   markCompleted(itemId: string): void {
     this.watchListService.markCompleted(itemId);
   }
+
+  markDropped(itemId: string): void {
+    this.watchListService.markDropped(itemId);
+  }
 }

src/app/services/watch-list.service.ts

@@ -131,6 +131,16 @@ export class WatchListService {
     });
   }
 
+  markDropped(itemId: string): void {
+    const item = this.getItemById(itemId);
+    if (!item) return;
+
+    this.updateItem({
+      ...item,
+      status: 'dropped'
+    });
+  }
+
   getItemById(itemId: string): Item | undefined {
     const data = this.storageService.getData();
     return data.items[itemId];