feat(xtream): add remove button for individual recently viewed items

src/app/xtream-tauri/recently-viewed/recently-viewed.component.html

@@ -14,6 +14,13 @@
         <div class="items-grid">
             @for (item of items; track $index) {
                 <mat-card class="item-card" (click)="openItem(item)">
+                    <button
+                        mat-icon-button
+                        class="remove-button"
+                        (click)="removeItem($event, item.id)"
+                    >
+                        <mat-icon>close</mat-icon>
+                    </button>
                     <img
                         [src]="
                             item.poster_url ||

src/app/xtream-tauri/recently-viewed/recently-viewed.component.scss

@@ -26,10 +26,27 @@
 .item-card {
     cursor: pointer;
     transition: transform 0.2s;
+    position: relative;
 
     &:hover {
         transform: scale(1.02);
     }
+
+    .remove-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        z-index: 1;
+        background: rgba(0, 0, 0, 0.5);
+        
+        &:hover {
+            background: rgba(0, 0, 0, 0.7);
+        }
+
+        mat-icon {
+            color: white;
+        }
+    }
 }
 
 .poster {

src/app/xtream-tauri/recently-viewed/recently-viewed.component.ts

@@ -37,4 +37,12 @@ export class RecentlyViewedComponent {
             relativeTo: this.activatedRoute,
         });
     }
+
+    removeItem(event: Event, itemId: number) {
+        event.stopPropagation();
+        this.xtreamStore.removeRecentItem({
+            itemId,
+            playlistId: this.currentPlaylist().id
+        });
+    }
 }

src/app/xtream-tauri/with-recent-items.ts

@@ -131,6 +131,18 @@ export const withRecentItems = function () {
                     })
                 )
             ),
+            removeRecentItem: rxMethod<{ itemId: number; playlistId: string }>(
+                pipe(
+                    switchMap(async ({ itemId, playlistId }) => {
+                        const db = await dbService.getConnection();
+                        await db.execute(
+                            `DELETE FROM recently_viewed WHERE id = ? AND playlist_id = ?`,
+                            [itemId, playlistId]
+                        );
+                        return store.loadRecentItems({ id: playlistId });
+                    })
+                )
+            ),
         }))
     );
 };