From ff8cba71f5b6e033b70fcf8adcd7e6586c14343c Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Sun, 22 Jun 2025 08:47:51 -0500
Subject: [PATCH] Fixed reading list delete being broken.

---
 .../reading-list-detail.component.html                 |  9 ++++++---
 .../reading-list-detail.component.ts                   | 10 ++++++----
 .../reading-list-item/reading-list-item.component.html |  8 ++++----
 .../reading-list-item/reading-list-item.component.ts   | 10 +++++++++-
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
index 1d1ce4c7e..7433c26c3 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
+++ b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
@@ -229,14 +229,17 @@
                         </div>
                       }
 
-                      <app-draggable-ordered-list [items]="items" (orderUpdated)="orderUpdated($event)" [accessibilityMode]="accessibilityMode"
-                                                  [disabled]="!(formGroup.get('edit')?.value || false)" [showRemoveButton]="formGroup.get('edit')?.value || false">
+                      <app-draggable-ordered-list [items]="items" [accessibilityMode]="accessibilityMode"
+                                                  [disabled]="!(formGroup.get('edit')?.value || false)"
+                                                  (orderUpdated)="orderUpdated($event)"
+                                                  (itemRemove)="removeItem($event)"
+                                                  [showRemoveButton]="formGroup.get('edit')?.value || false">
 
                         <ng-template #draggableItem let-item let-position="idx">
                           <app-reading-list-item [ngClass]="{'content-container': items.length < 100, 'non-virtualized-container': items.length >= 100}" [item]="item"
                                                  [position]="position" [libraryTypes]="libraryTypes"
                                                  [promoted]="item.promoted" (read)="readChapter($event)"
-                                                 (remove)="itemRemoved($event, position)"
+                                                 (remove)="removeItem($event)"
                                                  [showRemove]="false"/>
                         </ng-template>
                       </app-draggable-ordered-list>
diff --git a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.ts b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.ts
index 6e8e3b22a..3056d7eb5 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.ts
+++ b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.ts
@@ -25,7 +25,8 @@ import {ImageService} from 'src/app/_services/image.service';
 import {ReadingListService} from 'src/app/_services/reading-list.service';
 import {
   DraggableOrderedListComponent,
-  IndexUpdateEvent
+  IndexUpdateEvent,
+  ItemRemoveEvent
 } from '../draggable-ordered-list/draggable-ordered-list.component';
 import {forkJoin, startWith, tap} from 'rxjs';
 import {ReaderService} from 'src/app/_services/reader.service';
@@ -321,6 +322,7 @@ export class ReadingListDetailComponent implements OnInit {
   }
 
   editReadingList(readingList: ReadingList) {
+    if (!readingList) return;
     this.actionService.editReadingList(readingList, (readingList: ReadingList) => {
       // Reload information around list
       this.readingListService.getReadingList(this.listId).subscribe(rl => {
@@ -347,10 +349,10 @@ export class ReadingListDetailComponent implements OnInit {
     });
   }
 
-  itemRemoved(item: ReadingListItem, position: number) {
+  removeItem(removeEvent: ItemRemoveEvent) {
     if (!this.readingList) return;
-    this.readingListService.deleteItem(this.readingList.id, item.id).subscribe(() => {
-      this.items.splice(position, 1);
+    this.readingListService.deleteItem(this.readingList.id, removeEvent.item.id).subscribe(() => {
+      this.items.splice(removeEvent.position, 1);
       this.items = [...this.items];
       this.cdRef.markForCheck();
       this.toastr.success(translate('toasts.item-removed'));
diff --git a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html
index 901ee270a..6421205ab 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html
+++ b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.html
@@ -18,10 +18,10 @@
           {{item.title}}
           <div class="actions float-end">
             @if (showRemove) {
-              <button class="btn btn-danger" (click)="remove.emit(item)">
-              <span>
-                <i class="fa fa-trash me-1" aria-hidden="true"></i>
-              </span>
+              <button class="btn btn-danger" (click)="removeItem(item)">
+                <span>
+                  <i class="fa fa-trash me-1" aria-hidden="true"></i>
+                </span>
                 <span class="d-none d-md-inline-block">{{t('remove')}}</span>
               </button>
             }
diff --git a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.ts b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.ts
index acde50022..7ce6f6790 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.ts
+++ b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.ts
@@ -9,6 +9,7 @@ import {ImageComponent} from '../../../shared/image/image.component';
 import {TranslocoDirective} from "@jsverse/transloco";
 import {SeriesFormatComponent} from "../../../shared/series-format/series-format.component";
 import {ReadMoreComponent} from "../../../shared/read-more/read-more.component";
+import {ItemRemoveEvent} from "../draggable-ordered-list/draggable-ordered-list.component";
 
 @Component({
   selector: 'app-reading-list-item',
@@ -33,9 +34,16 @@ export class ReadingListItemComponent {
   @Input() promoted: boolean = false;
 
   @Output() read: EventEmitter<ReadingListItem> = new EventEmitter();
-  @Output() remove: EventEmitter<ReadingListItem> = new EventEmitter();
+  @Output() remove: EventEmitter<ItemRemoveEvent> = new EventEmitter();
 
   readChapter(item: ReadingListItem) {
     this.read.emit(item);
   }
+
+  removeItem(item: ReadingListItem) {
+    this.remove.emit({
+      item: item,
+      position: item.order
+    });
+  }
 }