Fix deleted bookmarked images remaining visible in grid view due to browser caching (#188)

* Initial plan

* Fix deleted images not removed from grid view by reordering events

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* Add grid position preservation when deleting images

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* Fix code review issues: handle edge case and remove duplicate property

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* Make edge case handling more explicit for empty album

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* Add debug logging and concurrent reset guard to diagnose issue

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* Add more detailed debug logging for slide removal and loading

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* Add cache-busting to thumbnails after deletion to prevent stale images

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

* Remove debug logging now that issue is resolved

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

Author: Copilot

photomap/frontend/static/javascript/bookmarks.js

@@ -533,13 +533,20 @@ class BookmarkManager {
         }
       }
 
-      // Clear bookmarks after successful deletion
-      this.clearBookmarks();
-      
-      // Trigger album refresh
+      // Trigger album refresh BEFORE clearing bookmarks
+      // This ensures slideState.totalAlbumImages is updated before any grid refreshes
+      // Pass deletedIndices to allow position preservation
       window.dispatchEvent(new CustomEvent("albumChanged", {
-        detail: { album: state.album, totalImages: slideState.totalAlbumImages - indices.length }
+        detail: { 
+          album: state.album, 
+          totalImages: slideState.totalAlbumImages - indices.length,
+          changeType: 'deletion',
+          deletedIndices: indices
+        }
       }));
+      
+      // Clear bookmarks after album refresh
+      this.clearBookmarks();
 
     } catch (error) {
       console.error("Delete failed:", error);

photomap/frontend/static/javascript/grid-view.js

@@ -33,6 +33,8 @@ class GridViewManager {
     this.currentColumns = 0;
     this.suppressSlideChange = false;
     this.batchLoading = false;
+    this.resetInProgress = false; // Guard against concurrent resets
+    this.cacheBreaker = Date.now(); // Cache breaker for thumbnail URLs
     this.slideData = {};
     this.GRID_MAX_SCREENS = 6;
 
@@ -219,7 +221,11 @@ class GridViewManager {
       }
     );
 
-    this.addEventListener(window, "albumChanged", async () => {
+    this.addEventListener(window, "albumChanged", async (e) => {
+      // Update cache breaker to force thumbnail reload, especially for deletions
+      if (e.detail?.changeType === 'deletion') {
+        this.cacheBreaker = Date.now();
+      }
       await this.resetAllSlides();
     });
 
@@ -361,6 +367,13 @@ class GridViewManager {
     if (!this.gridInitialized) return;
     if (!this.swiper) return;
     if (!this.isVisible()) return;
+    
+    // Guard against concurrent resets
+    if (this.resetInProgress) {
+      return;
+    }
+    
+    this.resetInProgress = true;
 
     showSpinner();
 
@@ -393,6 +406,7 @@ class GridViewManager {
     }
 
     hideSpinner();
+    this.resetInProgress = false;
   }
 
   async loadBatch(startIndex = null, append = true) {
@@ -617,7 +631,7 @@ class GridViewManager {
   }
 
   makePlaceholderSlideHTML(globalIndex) {
-    const thumbnail_url = `thumbnails/${state.album}/${globalIndex}?size=${this.slideHeight}`;
+    const thumbnail_url = `thumbnails/${state.album}/${globalIndex}?size=${this.slideHeight}&t=${this.cacheBreaker}`;
     return `
     <div class="swiper-slide" style="width:${this.slideHeight}px; height:${
       this.slideHeight
@@ -643,7 +657,7 @@ class GridViewManager {
     data.searchIndex = slideState.globalToSearch(globalIndex);
     this.slideData[globalIndex] = data;
 
-    const thumbnail_url = `thumbnails/${state.album}/${globalIndex}?size=${this.slideHeight}`;
+    const thumbnail_url = `thumbnails/${state.album}/${globalIndex}?size=${this.slideHeight}&t=${this.cacheBreaker}`;
     return `
     <div class="swiper-slide" style="width:${this.slideHeight}px; height:${
       this.slideHeight

photomap/frontend/static/javascript/slide-state.js

@@ -243,8 +243,29 @@ class SlideStateManager {
   }
 
   handleAlbumChanged(detail) {
-    this.currentGlobalIndex = 0;
-    this.currentSearchIndex = 0;
+    // For deletions, try to preserve position by calculating how many images before current were deleted
+    if (detail.changeType === 'deletion' && detail.deletedIndices && !this.isSearchMode) {
+      const deletedIndices = detail.deletedIndices;
+      const currentIndex = this.currentGlobalIndex;
+      
+      // Count how many deleted images were before the current position
+      const deletedBefore = deletedIndices.filter(idx => idx < currentIndex).length;
+      
+      // Adjust current position by subtracting deleted images before it
+      const newIndex = Math.max(0, currentIndex - deletedBefore);
+      
+      // Clamp to new total, ensuring non-negative
+      // Handle edge case where all images are deleted (totalImages = 0)
+      this.currentGlobalIndex = detail.totalImages > 0 
+        ? Math.max(0, Math.min(newIndex, detail.totalImages - 1))
+        : 0;
+      this.currentSearchIndex = 0;
+    } else {
+      // For other changes (album switch, move, etc.), reset to beginning
+      this.currentGlobalIndex = 0;
+      this.currentSearchIndex = 0;
+    }
+    
     this.exitSearchMode();
     this.totalAlbumImages = detail.totalImages; // Update from state
   }