From 958a5b35e5ab168542fe21386c7c0dd6149ab483 Mon Sep 17 00:00:00 2001
From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com>
Date: Sun, 23 Aug 2026 10:37:35 +0200
Subject: [PATCH 1/6] fix: stabilize posters and filter quick actions

---
 .../item-card/item-card.component.ts          |  5 ---
 .../item-view/item-view.component.spec.ts     | 12 +++++++
 .../item-view/item-view.component.ts          | 31 +++++++++++++------
 .../poster-picker/poster-picker.component.ts  |  5 ---
 src/app/services/image-storage.service.ts     | 29 +++++++++++++++--
 5 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/src/app/components/item-card/item-card.component.ts b/src/app/components/item-card/item-card.component.ts
index 3f5f811..3dfc47a 100644
--- a/src/app/components/item-card/item-card.component.ts
+++ b/src/app/components/item-card/item-card.component.ts
@@ -83,8 +83,6 @@ export class ItemCardComponent {
   constructor() {
     this.destroyRef.onDestroy(() => {
       this.destroyed = true;
-      const url = this.posterUrl();
-      if (url) URL.revokeObjectURL(url);
     });
     effect(() => void this.loadPoster(this.item().posterId));
   }
@@ -92,11 +90,8 @@ export class ItemCardComponent {
   private async loadPoster(id: string | undefined): Promise<void> {
     const url = await this.imageStorage.getUrl(id);
     if (this.destroyed || id !== this.item().posterId) {
-      if (url) URL.revokeObjectURL(url);
       return;
     }
-    const previous = this.posterUrl();
-    if (previous) URL.revokeObjectURL(previous);
     this.posterUrl.set(url);
   }
 }
diff --git a/src/app/components/item-view/item-view.component.spec.ts b/src/app/components/item-view/item-view.component.spec.ts
index 337762d..50e0d55 100644
--- a/src/app/components/item-view/item-view.component.spec.ts
+++ b/src/app/components/item-view/item-view.component.spec.ts
@@ -111,4 +111,16 @@ describe('ItemViewComponent', () => {
     expect(service.markPaused).toHaveBeenCalledWith(item.id);
     expect(service.markDropped).toHaveBeenCalledWith(item.id);
   });
+
+  it('shows only status-appropriate quick actions', async () => {
+    configure([{ ...item, type: 'series', status: 'dropped' }]);
+    const fixture = TestBed.createComponent(ItemViewComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const buttons = [...(fixture.nativeElement as HTMLElement).querySelectorAll('button')];
+    const labels = buttons.map((button) => button.textContent?.trim());
+
+    expect(labels).toEqual(['Start']);
+  });
 });
diff --git a/src/app/components/item-view/item-view.component.ts b/src/app/components/item-view/item-view.component.ts
index 0c8f41a..329b65b 100644
--- a/src/app/components/item-view/item-view.component.ts
+++ b/src/app/components/item-view/item-view.component.ts
@@ -10,7 +10,7 @@ import { TimeAgoComponent } from '../time-ago/time-ago.component';
 import { getMostRecentWatchDate } from '../../utils/progress.utils';
 import { getPlaceholderUrl } from '../../utils/tmdb-image.utils';
 
-type QuickAction = 'watched' | 'completed' | 'started' | 'paused' | 'dropped';
+type QuickAction = 'watched' | 'completed' | 'started' | 'paused' | 'dropped' | 'resume';
 
 @Component({
   selector: 'app-item-view',
@@ -83,7 +83,7 @@ type QuickAction = 'watched' | 'completed' | 'started' | 'paused' | 'dropped';
         <section class="mb-6">
           <h2 class="text-xl mb-3">Quick Actions</h2>
           <div class="flex flex-wrap gap-2">
-            @for (action of quickActions; track action.label) {
+            @for (action of quickActions(); track action.label) {
               <button
                 type="button"
                 (click)="runAction(action.action)"
@@ -138,11 +138,11 @@ export class ItemViewComponent {
   private destroyRef = inject(DestroyRef);
   private destroyed = false;
 
-  readonly quickActions: readonly { label: string; action: QuickAction }[] = [
+  readonly allQuickActions: readonly { label: string; action: QuickAction }[] = [
     { label: 'Mark Watched', action: 'watched' },
-    { label: 'Mark Completed', action: 'completed' },
     { label: 'Start', action: 'started' },
     { label: 'Pause', action: 'paused' },
+    { label: 'Resume', action: 'resume' },
     { label: 'Drop', action: 'dropped' },
   ];
 
@@ -169,13 +169,28 @@ export class ItemViewComponent {
       (left, right) => new Date(right.date).getTime() - new Date(left.date).getTime(),
     ),
   );
+  readonly quickActions = computed(() => {
+    const item = this.item();
+    if (!item) return [];
+
+    switch (item.status) {
+      case 'not-started':
+        return this.allQuickActions.filter(({ action }) => action !== 'started');
+      case 'in-progress':
+        return this.allQuickActions.filter(
+          ({ action }) => action !== 'resume' && (item.type === 'movie' || action !== 'paused'),
+        );
+      case 'paused':
+        return this.allQuickActions.filter(({ action }) => action !== 'resume');
+      default:
+        return this.allQuickActions.filter(({ action }) => action === 'started');
+    }
+  });
 
   constructor() {
     effect(() => void this.loadPoster(this.item()?.posterId));
     this.destroyRef.onDestroy(() => {
       this.destroyed = true;
-      const finalUrl = this.posterUrl();
-      if (finalUrl.startsWith('blob:')) URL.revokeObjectURL(finalUrl);
     });
   }
 
@@ -187,18 +202,16 @@ export class ItemViewComponent {
     else if (action === 'completed') this.watchListService.markCompleted(item.id);
     else if (action === 'started') this.watchListService.markStarted(item.id);
     else if (action === 'paused') this.watchListService.markPaused(item.id);
+    else if (action === 'resume') this.watchListService.markStarted(item.id);
     else this.watchListService.markDropped(item.id);
   }
 
   private async loadPoster(id: string | undefined): Promise<void> {
     const url = await this.imageStorage.getUrl(id);
     if (this.destroyed || id !== this.item()?.posterId) {
-      if (url) URL.revokeObjectURL(url);
       return;
     }
 
-    const previous = this.posterUrl();
-    if (previous.startsWith('blob:')) URL.revokeObjectURL(previous);
     this.posterUrl.set(url ?? getPlaceholderUrl());
   }
 }
diff --git a/src/app/components/poster-picker/poster-picker.component.ts b/src/app/components/poster-picker/poster-picker.component.ts
index 4962c1b..2f57bcc 100644
--- a/src/app/components/poster-picker/poster-picker.component.ts
+++ b/src/app/components/poster-picker/poster-picker.component.ts
@@ -133,7 +133,6 @@ export class PosterPickerComponent {
   readonly posterPreviewUrl = signal<string | null>(null);
   readonly posterPlaceholderUrl = signal(getPlaceholderUrl());
 
-  private previewObjectUrl: string | null = null;
   private posterRequestId = 0;
   private readonly draftPosterIds = new Set<string>();
   private destroyed = false;
@@ -153,7 +152,6 @@ export class PosterPickerComponent {
     this.destroyRef.onDestroy(() => {
       this.destroyed = true;
       this.posterRequestId++;
-      if (this.previewObjectUrl) URL.revokeObjectURL(this.previewObjectUrl);
       if (!this.skipDraftCleanup) this.deleteDraftPosters();
     });
 
@@ -244,11 +242,8 @@ export class PosterPickerComponent {
   private async loadPosterPreview(posterId: string | undefined): Promise<void> {
     const url = await this.imageStorage.getUrl(posterId);
     if (this.destroyed || posterId !== this.posterId()) {
-      if (url) URL.revokeObjectURL(url);
       return;
     }
-    if (this.previewObjectUrl) URL.revokeObjectURL(this.previewObjectUrl);
-    this.previewObjectUrl = url;
     this.posterPreviewUrl.set(url);
   }
 
diff --git a/src/app/services/image-storage.service.ts b/src/app/services/image-storage.service.ts
index 7fbbd0a..a521421 100644
--- a/src/app/services/image-storage.service.ts
+++ b/src/app/services/image-storage.service.ts
@@ -16,9 +16,12 @@ export interface ExportedImage {
   data: string;
 }
 
+type PosterUrlCache = Map<string, Promise<string>>;
+
 @Injectable({ providedIn: 'root' })
 export class ImageStorageService {
   private database: Promise<IDBDatabase> | null = null;
+  private readonly posterUrls: PosterUrlCache = new Map();
 
   async storeFile(file: Blob): Promise<string> {
     await this.validateImage(file);
@@ -40,12 +43,20 @@ export class ImageStorageService {
 
   async getUrl(id: string | undefined): Promise<string | null> {
     if (!id) return null;
-    const image = await this.get(id);
-    return image ? URL.createObjectURL(image.blob) : null;
+    const existing = this.posterUrls.get(id);
+    if (existing) return existing;
+
+    const urlPromise = this.get(id).then((image) => {
+      if (!image) throw new Error(`Poster image not found: ${id}`);
+      return URL.createObjectURL(image.blob);
+    });
+    this.posterUrls.set(id, urlPromise);
+    return urlPromise;
   }
 
   async delete(id: string | undefined): Promise<void> {
     if (!id) return;
+    await this.revokeUrl(id);
     const db = await this.openDatabase();
     await this.request(db.transaction(STORE_NAME, 'readwrite').objectStore(STORE_NAME).delete(id));
   }
@@ -62,6 +73,7 @@ export class ImageStorageService {
 
   async replaceImages(images: unknown): Promise<void> {
     const parsed = await this.parseExportedImages(images);
+    for (const id of [...this.posterUrls.keys()]) await this.revokeUrl(id);
     const db = await this.openDatabase();
     const transaction = db.transaction(STORE_NAME, 'readwrite');
     const store = transaction.objectStore(STORE_NAME);
@@ -109,9 +121,22 @@ export class ImageStorageService {
 
   private async put(image: StoredImage): Promise<void> {
     const db = await this.openDatabase();
+    await this.revokeUrl(image.id);
     await this.request(db.transaction(STORE_NAME, 'readwrite').objectStore(STORE_NAME).put(image));
   }
 
+  private async revokeUrl(id: string): Promise<void> {
+    const urlPromise = this.posterUrls.get(id);
+    if (!urlPromise) return;
+
+    this.posterUrls.delete(id);
+    try {
+      URL.revokeObjectURL(await urlPromise);
+    } catch {
+      return;
+    }
+  }
+
   private openDatabase(): Promise<IDBDatabase> {
     this.database ??= new Promise((resolve, reject) => {
       const request = indexedDB.open(DATABASE_NAME, DATABASE_VERSION);

From a4620eaf8bdf3a905d29deef5356e6ec3630a84b Mon Sep 17 00:00:00 2001
From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com>
Date: Sun, 23 Aug 2026 10:44:52 +0200
Subject: [PATCH 2/6] fix: show only meaningful quick actions

---
 .../item-view/item-view.component.spec.ts     | 15 +++++-
 .../item-view/item-view.component.ts          | 47 ++++++++++---------
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/app/components/item-view/item-view.component.spec.ts b/src/app/components/item-view/item-view.component.spec.ts
index 50e0d55..19ce13b 100644
--- a/src/app/components/item-view/item-view.component.spec.ts
+++ b/src/app/components/item-view/item-view.component.spec.ts
@@ -100,13 +100,11 @@ describe('ItemViewComponent', () => {
 
     const service = TestBed.inject(WatchListService);
     fixture.componentInstance.runAction('watched');
-    fixture.componentInstance.runAction('completed');
     fixture.componentInstance.runAction('started');
     fixture.componentInstance.runAction('paused');
     fixture.componentInstance.runAction('dropped');
 
     expect(service.markWatched).toHaveBeenCalledWith(item.id);
-    expect(service.markCompleted).toHaveBeenCalledWith(item.id);
     expect(service.markStarted).toHaveBeenCalledWith(item.id);
     expect(service.markPaused).toHaveBeenCalledWith(item.id);
     expect(service.markDropped).toHaveBeenCalledWith(item.id);
@@ -123,4 +121,17 @@ describe('ItemViewComponent', () => {
 
     expect(labels).toEqual(['Start']);
   });
+
+  it('does not show ineffective quick actions for a new item', async () => {
+    configure([{ ...item, type: 'movie', status: 'not-started', watchHistory: [] }]);
+    const fixture = TestBed.createComponent(ItemViewComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const labels = [
+      ...(fixture.nativeElement as HTMLElement).querySelectorAll('section button'),
+    ].map((button) => button.textContent?.trim());
+
+    expect(labels).toEqual(['Mark Watched', 'Start', 'Drop']);
+  });
 });
diff --git a/src/app/components/item-view/item-view.component.ts b/src/app/components/item-view/item-view.component.ts
index 329b65b..be91f32 100644
--- a/src/app/components/item-view/item-view.component.ts
+++ b/src/app/components/item-view/item-view.component.ts
@@ -5,12 +5,12 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 import { WatchListService } from '../../services/watch-list.service';
 import { GroupService } from '../../services/group.service';
 import { ImageStorageService } from '../../services/image-storage.service';
-import { Item } from '../../models/item.model';
+import { Item, ItemStatus } from '../../models/item.model';
 import { TimeAgoComponent } from '../time-ago/time-ago.component';
 import { getMostRecentWatchDate } from '../../utils/progress.utils';
 import { getPlaceholderUrl } from '../../utils/tmdb-image.utils';
 
-type QuickAction = 'watched' | 'completed' | 'started' | 'paused' | 'dropped' | 'resume';
+type QuickAction = 'watched' | 'started' | 'paused' | 'dropped';
 
 @Component({
   selector: 'app-item-view',
@@ -138,13 +138,27 @@ export class ItemViewComponent {
   private destroyRef = inject(DestroyRef);
   private destroyed = false;
 
-  readonly allQuickActions: readonly { label: string; action: QuickAction }[] = [
-    { label: 'Mark Watched', action: 'watched' },
-    { label: 'Start', action: 'started' },
-    { label: 'Pause', action: 'paused' },
-    { label: 'Resume', action: 'resume' },
-    { label: 'Drop', action: 'dropped' },
-  ];
+  private readonly quickActionsByStatus: Record<
+    ItemStatus,
+    readonly { label: string; action: QuickAction }[]
+  > = {
+    'not-started': [
+      { label: 'Mark Watched', action: 'watched' },
+      { label: 'Start', action: 'started' },
+      { label: 'Drop', action: 'dropped' },
+    ],
+    'in-progress': [
+      { label: 'Mark Watched', action: 'watched' },
+      { label: 'Pause', action: 'paused' },
+      { label: 'Drop', action: 'dropped' },
+    ],
+    paused: [
+      { label: 'Resume', action: 'started' },
+      { label: 'Drop', action: 'dropped' },
+    ],
+    completed: [{ label: 'Start', action: 'started' }],
+    dropped: [{ label: 'Start', action: 'started' }],
+  };
 
   readonly paramMap = toSignal(this.route.paramMap);
 
@@ -173,18 +187,7 @@ export class ItemViewComponent {
     const item = this.item();
     if (!item) return [];
 
-    switch (item.status) {
-      case 'not-started':
-        return this.allQuickActions.filter(({ action }) => action !== 'started');
-      case 'in-progress':
-        return this.allQuickActions.filter(
-          ({ action }) => action !== 'resume' && (item.type === 'movie' || action !== 'paused'),
-        );
-      case 'paused':
-        return this.allQuickActions.filter(({ action }) => action !== 'resume');
-      default:
-        return this.allQuickActions.filter(({ action }) => action === 'started');
-    }
+    return this.quickActionsByStatus[item.status];
   });
 
   constructor() {
@@ -199,10 +202,8 @@ export class ItemViewComponent {
     if (!item) return;
 
     if (action === 'watched') this.watchListService.markWatched(item.id);
-    else if (action === 'completed') this.watchListService.markCompleted(item.id);
     else if (action === 'started') this.watchListService.markStarted(item.id);
     else if (action === 'paused') this.watchListService.markPaused(item.id);
-    else if (action === 'resume') this.watchListService.markStarted(item.id);
     else this.watchListService.markDropped(item.id);
   }
 

From 484daffbe5d8d6b9595d44fa42fde36612c2c9d0 Mon Sep 17 00:00:00 2001
From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com>
Date: Sun, 23 Aug 2026 11:09:50 +0200
Subject: [PATCH 3/6] fix: preserve poster lookup contract

---
 src/app/services/image-storage.service.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/services/image-storage.service.ts b/src/app/services/image-storage.service.ts
index a521421..8d34dd3 100644
--- a/src/app/services/image-storage.service.ts
+++ b/src/app/services/image-storage.service.ts
@@ -16,7 +16,7 @@ export interface ExportedImage {
   data: string;
 }
 
-type PosterUrlCache = Map<string, Promise<string>>;
+type PosterUrlCache = Map<string, Promise<string | null>>;
 
 @Injectable({ providedIn: 'root' })
 export class ImageStorageService {
@@ -43,14 +43,17 @@ export class ImageStorageService {
 
   async getUrl(id: string | undefined): Promise<string | null> {
     if (!id) return null;
+
     const existing = this.posterUrls.get(id);
     if (existing) return existing;
 
     const urlPromise = this.get(id).then((image) => {
-      if (!image) throw new Error(`Poster image not found: ${id}`);
-      return URL.createObjectURL(image.blob);
+      return image ? URL.createObjectURL(image.blob) : null;
     });
     this.posterUrls.set(id, urlPromise);
+    void urlPromise.catch(() => {
+      if (this.posterUrls.get(id) === urlPromise) this.posterUrls.delete(id);
+    });
     return urlPromise;
   }
 
@@ -131,7 +134,8 @@ export class ImageStorageService {
 
     this.posterUrls.delete(id);
     try {
-      URL.revokeObjectURL(await urlPromise);
+      const url = await urlPromise;
+      if (url) URL.revokeObjectURL(url);
     } catch {
       return;
     }

From 327872554eedaf9d64a35244560a115a6e9e0fc5 Mon Sep 17 00:00:00 2001
From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com>
Date: Sun, 23 Aug 2026 11:46:54 +0200
Subject: [PATCH 4/6] fix: refresh posters after import

---
 .../item-card/item-card.component.ts          |  9 +++-
 .../item-card/poster-refresh.spec.ts          | 50 +++++++++++++++++++
 .../item-form/item-form.component.spec.ts     |  2 +
 .../item-view/item-view.component.spec.ts     |  5 +-
 .../item-view/item-view.component.ts          |  8 ++-
 .../poster-picker.component.spec.ts           |  2 +
 .../poster-picker/poster-picker.component.ts  |  4 ++
 src/app/services/image-invalidation.ts        |  6 +++
 src/app/services/image-storage.service.ts     |  9 ++++
 src/app/services/storage.service.ts           |  2 +
 10 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/app/components/item-card/poster-refresh.spec.ts
 create mode 100644 src/app/services/image-invalidation.ts

diff --git a/src/app/components/item-card/item-card.component.ts b/src/app/components/item-card/item-card.component.ts
index 3dfc47a..1da4e06 100644
--- a/src/app/components/item-card/item-card.component.ts
+++ b/src/app/components/item-card/item-card.component.ts
@@ -66,6 +66,7 @@ export class ItemCardComponent {
   private imageStorage = inject(ImageStorageService);
   private destroyRef = inject(DestroyRef);
   private destroyed = false;
+  private loadedImageVersion = 0;
   item = input.required<Item>();
 
   posterUrl = signal<string | null>(null);
@@ -84,14 +85,20 @@ export class ItemCardComponent {
     this.destroyRef.onDestroy(() => {
       this.destroyed = true;
     });
-    effect(() => void this.loadPoster(this.item().posterId));
+
+    effect(() => {
+      this.loadedImageVersion = this.imageStorage.version();
+      void this.loadPoster(this.item().posterId);
+    });
   }
 
   private async loadPoster(id: string | undefined): Promise<void> {
     const url = await this.imageStorage.getUrl(id);
+    const version = this.loadedImageVersion;
     if (this.destroyed || id !== this.item().posterId) {
       return;
     }
+    if (version !== this.imageStorage.version()) return;
     this.posterUrl.set(url);
   }
 }
diff --git a/src/app/components/item-card/poster-refresh.spec.ts b/src/app/components/item-card/poster-refresh.spec.ts
new file mode 100644
index 0000000..c433ddb
--- /dev/null
+++ b/src/app/components/item-card/poster-refresh.spec.ts
@@ -0,0 +1,50 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { vi } from 'vitest';
+import { imageVersion } from '../../services/image-invalidation';
+import { ImageStorageService } from '../../services/image-storage.service';
+import { ItemCardComponent } from './item-card.component';
+import { Item } from '../../models/item.model';
+
+const item: Item = {
+  id: 'item-1',
+  type: 'movie',
+  title: 'Movie',
+  groupId: '',
+  status: 'not-started',
+  watchHistory: [],
+  createdAt: '2026-01-01T00:00:00.000Z',
+  posterId: 'poster-1',
+};
+
+describe('ItemCardComponent poster refresh', () => {
+  it('reloads the same poster after image invalidation', async () => {
+    let urlPromise = Promise.resolve('blob:first');
+    const getUrl = vi.fn((_posterId?: string): Promise<string> => {
+      void _posterId;
+      return urlPromise;
+    });
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideRouter([]),
+        { provide: ImageStorageService, useValue: { getUrl, version: imageVersion.asReadonly() } },
+      ],
+    });
+    const fixture = TestBed.createComponent(ItemCardComponent);
+    fixture.componentRef.setInput('item', item);
+    fixture.detectChanges();
+
+    await Promise.resolve();
+    expect(getUrl).toHaveBeenCalledTimes(1);
+    expect(getUrl.mock.calls.every((call) => call[0] === item.posterId)).toBe(true);
+
+    urlPromise = Promise.resolve('blob:second');
+    imageVersion.update((version) => version + 1);
+    fixture.detectChanges();
+    await Promise.resolve();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(getUrl).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/src/app/components/item-form/item-form.component.spec.ts b/src/app/components/item-form/item-form.component.spec.ts
index 0c05865..e24023d 100644
--- a/src/app/components/item-form/item-form.component.spec.ts
+++ b/src/app/components/item-form/item-form.component.spec.ts
@@ -1,3 +1,4 @@
+import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { Group } from '../../models/group.model';
 import { TmdbSuggestionService } from '../../services/tmdb-suggestion.service';
@@ -31,6 +32,7 @@ describe('ItemFormComponent', () => {
             storeUrl: vi.fn(() => Promise.resolve('image-1')),
             storeFile: vi.fn(() => Promise.resolve('image-1')),
             delete: vi.fn(() => Promise.resolve()),
+            version: signal(0).asReadonly(),
           },
         },
       ],
diff --git a/src/app/components/item-view/item-view.component.spec.ts b/src/app/components/item-view/item-view.component.spec.ts
index 19ce13b..0b270f3 100644
--- a/src/app/components/item-view/item-view.component.spec.ts
+++ b/src/app/components/item-view/item-view.component.spec.ts
@@ -52,7 +52,10 @@ describe('ItemViewComponent', () => {
           provide: GroupService,
           useValue: { groups: signal([{ id: 'group-1', name: 'Favourites', order: 0 }]) },
         },
-        { provide: ImageStorageService, useValue: { getUrl: vi.fn(async () => null) } },
+        {
+          provide: ImageStorageService,
+          useValue: { getUrl: vi.fn(async () => null), version: signal(0).asReadonly() },
+        },
       ],
     });
   }
diff --git a/src/app/components/item-view/item-view.component.ts b/src/app/components/item-view/item-view.component.ts
index be91f32..b815f9b 100644
--- a/src/app/components/item-view/item-view.component.ts
+++ b/src/app/components/item-view/item-view.component.ts
@@ -137,6 +137,7 @@ export class ItemViewComponent {
   private groupService = inject(GroupService);
   private destroyRef = inject(DestroyRef);
   private destroyed = false;
+  private loadedImageVersion = 0;
 
   private readonly quickActionsByStatus: Record<
     ItemStatus,
@@ -191,7 +192,10 @@ export class ItemViewComponent {
   });
 
   constructor() {
-    effect(() => void this.loadPoster(this.item()?.posterId));
+    effect(() => {
+      this.loadedImageVersion = this.imageStorage.version();
+      void this.loadPoster(this.item()?.posterId);
+    });
     this.destroyRef.onDestroy(() => {
       this.destroyed = true;
     });
@@ -209,9 +213,11 @@ export class ItemViewComponent {
 
   private async loadPoster(id: string | undefined): Promise<void> {
     const url = await this.imageStorage.getUrl(id);
+    const version = this.loadedImageVersion;
     if (this.destroyed || id !== this.item()?.posterId) {
       return;
     }
+    if (version !== this.imageStorage.version()) return;
 
     this.posterUrl.set(url ?? getPlaceholderUrl());
   }
diff --git a/src/app/components/poster-picker/poster-picker.component.spec.ts b/src/app/components/poster-picker/poster-picker.component.spec.ts
index d4e7379..c7a2e32 100644
--- a/src/app/components/poster-picker/poster-picker.component.spec.ts
+++ b/src/app/components/poster-picker/poster-picker.component.spec.ts
@@ -1,3 +1,4 @@
+import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { TmdbSuggestionService } from '../../services/tmdb-suggestion.service';
 import { ImageStorageService } from '../../services/image-storage.service';
@@ -22,6 +23,7 @@ describe('PosterPickerComponent', () => {
             storeUrl: vi.fn(() => Promise.resolve('image-1')),
             storeFile: vi.fn(() => Promise.resolve('image-1')),
             delete: vi.fn(() => Promise.resolve()),
+            version: signal(0).asReadonly(),
           },
         },
       ],
diff --git a/src/app/components/poster-picker/poster-picker.component.ts b/src/app/components/poster-picker/poster-picker.component.ts
index 2f57bcc..ad66c46 100644
--- a/src/app/components/poster-picker/poster-picker.component.ts
+++ b/src/app/components/poster-picker/poster-picker.component.ts
@@ -137,6 +137,7 @@ export class PosterPickerComponent {
   private readonly draftPosterIds = new Set<string>();
   private destroyed = false;
   private skipDraftCleanup = false;
+  private loadedImageVersion = 0;
 
   private readonly tmdb = createTmdbSearchStream(
     (query) => this.tmdbSuggestionService.search(query),
@@ -157,6 +158,7 @@ export class PosterPickerComponent {
 
     effect(() => {
       const posterId = this.posterId();
+      this.loadedImageVersion = this.imageStorage.version();
       void this.loadPosterPreview(posterId);
     });
 
@@ -241,9 +243,11 @@ export class PosterPickerComponent {
 
   private async loadPosterPreview(posterId: string | undefined): Promise<void> {
     const url = await this.imageStorage.getUrl(posterId);
+    const version = this.loadedImageVersion;
     if (this.destroyed || posterId !== this.posterId()) {
       return;
     }
+    if (version !== this.imageStorage.version()) return;
     this.posterPreviewUrl.set(url);
   }
 
diff --git a/src/app/services/image-invalidation.ts b/src/app/services/image-invalidation.ts
new file mode 100644
index 0000000..76c05dd
--- /dev/null
+++ b/src/app/services/image-invalidation.ts
@@ -0,0 +1,6 @@
+import { signal } from '@angular/core';
+import { Subject } from 'rxjs';
+
+export const imageVersion = signal(0);
+
+export const imagesInvalidated = new Subject<void>();
diff --git a/src/app/services/image-storage.service.ts b/src/app/services/image-storage.service.ts
index 8d34dd3..fc4b25c 100644
--- a/src/app/services/image-storage.service.ts
+++ b/src/app/services/image-storage.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { imageVersion, imagesInvalidated } from './image-invalidation';
 
 const DATABASE_NAME = 'watch-list';
 const DATABASE_VERSION = 2;
@@ -22,6 +23,7 @@ type PosterUrlCache = Map<string, Promise<string | null>>;
 export class ImageStorageService {
   private database: Promise<IDBDatabase> | null = null;
   private readonly posterUrls: PosterUrlCache = new Map();
+  readonly version = imageVersion.asReadonly();
 
   async storeFile(file: Blob): Promise<string> {
     await this.validateImage(file);
@@ -83,6 +85,13 @@ export class ImageStorageService {
     store.clear();
     for (const image of parsed) store.put(image);
     await this.transaction(transaction);
+    this.invalidateAll();
+  }
+
+  invalidateAll(): void {
+    for (const id of [...this.posterUrls.keys()]) void this.revokeUrl(id);
+    imagesInvalidated.next();
+    imageVersion.update((version) => version + 1);
   }
 
   async parseExportedImages(images: unknown): Promise<StoredImage[]> {
diff --git a/src/app/services/storage.service.ts b/src/app/services/storage.service.ts
index 49e2a60..02897c7 100644
--- a/src/app/services/storage.service.ts
+++ b/src/app/services/storage.service.ts
@@ -4,6 +4,7 @@ import { Item } from '../models/item.model';
 import { Group } from '../models/group.model';
 import { createDefaultStorageData, normalizeStorageData } from '../domain/storage-schema';
 import { StoredImage } from './image-storage.service';
+import { imagesInvalidated } from './image-invalidation';
 
 const DATABASE_NAME = 'watch-list';
 const DATABASE_VERSION = 2;
@@ -69,6 +70,7 @@ export class StorageService {
       () => {
         this.lastPersistedData = cloneStorageData(snapshot);
         this.saveError.set(null);
+        imagesInvalidated.next();
       },
       (error: unknown) => {
         if (this.data() === snapshot) {

From 1c3a050b0d2299428293c331aaf7e8c8cd866cf9 Mon Sep 17 00:00:00 2001
From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com>
Date: Sun, 23 Aug 2026 12:02:57 +0200
Subject: [PATCH 5/6] fix: invalidate posters on import

---
 .../item-card/poster-refresh.spec.ts          | 50 -------------------
 src/app/services/image-storage.service.ts     | 10 +++-
 2 files changed, 9 insertions(+), 51 deletions(-)
 delete mode 100644 src/app/components/item-card/poster-refresh.spec.ts

diff --git a/src/app/components/item-card/poster-refresh.spec.ts b/src/app/components/item-card/poster-refresh.spec.ts
deleted file mode 100644
index c433ddb..0000000
--- a/src/app/components/item-card/poster-refresh.spec.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { provideRouter } from '@angular/router';
-import { vi } from 'vitest';
-import { imageVersion } from '../../services/image-invalidation';
-import { ImageStorageService } from '../../services/image-storage.service';
-import { ItemCardComponent } from './item-card.component';
-import { Item } from '../../models/item.model';
-
-const item: Item = {
-  id: 'item-1',
-  type: 'movie',
-  title: 'Movie',
-  groupId: '',
-  status: 'not-started',
-  watchHistory: [],
-  createdAt: '2026-01-01T00:00:00.000Z',
-  posterId: 'poster-1',
-};
-
-describe('ItemCardComponent poster refresh', () => {
-  it('reloads the same poster after image invalidation', async () => {
-    let urlPromise = Promise.resolve('blob:first');
-    const getUrl = vi.fn((_posterId?: string): Promise<string> => {
-      void _posterId;
-      return urlPromise;
-    });
-
-    TestBed.configureTestingModule({
-      providers: [
-        provideRouter([]),
-        { provide: ImageStorageService, useValue: { getUrl, version: imageVersion.asReadonly() } },
-      ],
-    });
-    const fixture = TestBed.createComponent(ItemCardComponent);
-    fixture.componentRef.setInput('item', item);
-    fixture.detectChanges();
-
-    await Promise.resolve();
-    expect(getUrl).toHaveBeenCalledTimes(1);
-    expect(getUrl.mock.calls.every((call) => call[0] === item.posterId)).toBe(true);
-
-    urlPromise = Promise.resolve('blob:second');
-    imageVersion.update((version) => version + 1);
-    fixture.detectChanges();
-    await Promise.resolve();
-    fixture.detectChanges();
-    await fixture.whenStable();
-    expect(getUrl).toHaveBeenCalledTimes(2);
-  });
-});
diff --git a/src/app/services/image-storage.service.ts b/src/app/services/image-storage.service.ts
index fc4b25c..16f6cdd 100644
--- a/src/app/services/image-storage.service.ts
+++ b/src/app/services/image-storage.service.ts
@@ -25,6 +25,10 @@ export class ImageStorageService {
   private readonly posterUrls: PosterUrlCache = new Map();
   readonly version = imageVersion.asReadonly();
 
+  constructor() {
+    imagesInvalidated.subscribe(() => this.refreshCache());
+  }
+
   async storeFile(file: Blob): Promise<string> {
     await this.validateImage(file);
     const id = `image-${crypto.randomUUID()}`;
@@ -89,8 +93,12 @@ export class ImageStorageService {
   }
 
   invalidateAll(): void {
-    for (const id of [...this.posterUrls.keys()]) void this.revokeUrl(id);
     imagesInvalidated.next();
+    this.refreshCache();
+  }
+
+  private refreshCache(): void {
+    for (const id of [...this.posterUrls.keys()]) void this.revokeUrl(id);
     imageVersion.update((version) => version + 1);
   }
 

From 0b1596ea58df8c1f087f6dc44f48cb7f35df19f5 Mon Sep 17 00:00:00 2001
From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com>
Date: Sun, 23 Aug 2026 12:14:11 +0200
Subject: [PATCH 6/6] fix: discard stale poster loads

---
 src/app/components/item-card/item-card.component.ts | 10 ++++------
 src/app/components/item-view/item-view.component.ts | 10 ++++------
 .../poster-picker/poster-picker.component.ts        | 13 +++++++------
 src/app/services/image-storage.service.ts           |  1 -
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/app/components/item-card/item-card.component.ts b/src/app/components/item-card/item-card.component.ts
index 1da4e06..fd1c54a 100644
--- a/src/app/components/item-card/item-card.component.ts
+++ b/src/app/components/item-card/item-card.component.ts
@@ -66,7 +66,6 @@ export class ItemCardComponent {
   private imageStorage = inject(ImageStorageService);
   private destroyRef = inject(DestroyRef);
   private destroyed = false;
-  private loadedImageVersion = 0;
   item = input.required<Item>();
 
   posterUrl = signal<string | null>(null);
@@ -87,18 +86,17 @@ export class ItemCardComponent {
     });
 
     effect(() => {
-      this.loadedImageVersion = this.imageStorage.version();
-      void this.loadPoster(this.item().posterId);
+      const version = this.imageStorage.version();
+      void this.loadPoster(this.item().posterId, version);
     });
   }
 
-  private async loadPoster(id: string | undefined): Promise<void> {
+  private async loadPoster(id: string | undefined, loadedVersion: number): Promise<void> {
     const url = await this.imageStorage.getUrl(id);
-    const version = this.loadedImageVersion;
     if (this.destroyed || id !== this.item().posterId) {
       return;
     }
-    if (version !== this.imageStorage.version()) return;
+    if (loadedVersion !== this.imageStorage.version()) return;
     this.posterUrl.set(url);
   }
 }
diff --git a/src/app/components/item-view/item-view.component.ts b/src/app/components/item-view/item-view.component.ts
index b815f9b..f82e671 100644
--- a/src/app/components/item-view/item-view.component.ts
+++ b/src/app/components/item-view/item-view.component.ts
@@ -137,7 +137,6 @@ export class ItemViewComponent {
   private groupService = inject(GroupService);
   private destroyRef = inject(DestroyRef);
   private destroyed = false;
-  private loadedImageVersion = 0;
 
   private readonly quickActionsByStatus: Record<
     ItemStatus,
@@ -193,8 +192,8 @@ export class ItemViewComponent {
 
   constructor() {
     effect(() => {
-      this.loadedImageVersion = this.imageStorage.version();
-      void this.loadPoster(this.item()?.posterId);
+      const version = this.imageStorage.version();
+      void this.loadPoster(this.item()?.posterId, version);
     });
     this.destroyRef.onDestroy(() => {
       this.destroyed = true;
@@ -211,13 +210,12 @@ export class ItemViewComponent {
     else this.watchListService.markDropped(item.id);
   }
 
-  private async loadPoster(id: string | undefined): Promise<void> {
+  private async loadPoster(id: string | undefined, loadedVersion: number): Promise<void> {
     const url = await this.imageStorage.getUrl(id);
-    const version = this.loadedImageVersion;
     if (this.destroyed || id !== this.item()?.posterId) {
       return;
     }
-    if (version !== this.imageStorage.version()) return;
+    if (loadedVersion !== this.imageStorage.version()) return;
 
     this.posterUrl.set(url ?? getPlaceholderUrl());
   }
diff --git a/src/app/components/poster-picker/poster-picker.component.ts b/src/app/components/poster-picker/poster-picker.component.ts
index ad66c46..50b0688 100644
--- a/src/app/components/poster-picker/poster-picker.component.ts
+++ b/src/app/components/poster-picker/poster-picker.component.ts
@@ -137,7 +137,6 @@ export class PosterPickerComponent {
   private readonly draftPosterIds = new Set<string>();
   private destroyed = false;
   private skipDraftCleanup = false;
-  private loadedImageVersion = 0;
 
   private readonly tmdb = createTmdbSearchStream(
     (query) => this.tmdbSuggestionService.search(query),
@@ -158,8 +157,8 @@ export class PosterPickerComponent {
 
     effect(() => {
       const posterId = this.posterId();
-      this.loadedImageVersion = this.imageStorage.version();
-      void this.loadPosterPreview(posterId);
+      const version = this.imageStorage.version();
+      void this.loadPosterPreview(posterId, version);
     });
 
     this.tmdb.results.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((results) => {
@@ -241,13 +240,15 @@ export class PosterPickerComponent {
     }
   }
 
-  private async loadPosterPreview(posterId: string | undefined): Promise<void> {
+  private async loadPosterPreview(
+    posterId: string | undefined,
+    loadedVersion: number,
+  ): Promise<void> {
     const url = await this.imageStorage.getUrl(posterId);
-    const version = this.loadedImageVersion;
     if (this.destroyed || posterId !== this.posterId()) {
       return;
     }
-    if (version !== this.imageStorage.version()) return;
+    if (loadedVersion !== this.imageStorage.version()) return;
     this.posterPreviewUrl.set(url);
   }
 
diff --git a/src/app/services/image-storage.service.ts b/src/app/services/image-storage.service.ts
index 16f6cdd..1eed0c8 100644
--- a/src/app/services/image-storage.service.ts
+++ b/src/app/services/image-storage.service.ts
@@ -94,7 +94,6 @@ export class ImageStorageService {
 
   invalidateAll(): void {
     imagesInvalidated.next();
-    this.refreshCache();
   }
 
   private refreshCache(): void {