Fix inconsistent state with facerect

src/components/SelectionManager.vue

@@ -241,7 +241,13 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
       this.selection.set(photo.fileid, photo);
     } else {
       photo.flag &= ~this.c.FLAG_SELECTED;
-      this.selection.delete(photo.fileid);
+
+      // Only do this if the photo in the selection set is this one.
+      // The problem arises when there are duplicates (e.g. face rect)
+      // in the list, which creates an inconsistent state if we do this.
+      if (this.selection.get(photo.fileid) === photo) {
+        this.selection.delete(photo.fileid);
+      }
     }
 
     if (!noUpdate) {

src/components/Timeline.vue

@@ -73,7 +73,7 @@
           <div
             class="photo"
             v-for="photo of item.photos"
-            :key="photo.fileid"
+            :key="photo.key || photo.fileid"
             :style="{
               height: photo.dispH + 'px',
               width: photo.dispW + 'px',
@@ -930,6 +930,9 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     let rowIdx = headIdx + 1;
     let rowY = headY + head.size;
 
+    // Duplicate detection, e.g. for face rects
+    const seen = new Map<number, number>();
+
     // Previous justified row
     let prevJustifyTop = justify[0]?.top || 0;
 
@@ -1016,6 +1019,18 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
       // Move to next index of photo
       dataIdx++;
 
+      // Duplicate detection.
+      // These may be valid, e.g. in face rects. All we need to have
+      // is a unique Vue key for the v-for loop.
+      if (seen.has(photo.fileid)) {
+        const val = seen.get(photo.fileid);
+        photo.key = `${photo.fileid}-${val}`;
+        seen.set(photo.fileid, val + 1);
+      } else {
+        photo.key = null;
+        seen.set(photo.fileid, 1);
+      }
+
       // Add photo to row
       row.photos.push(photo);
     }

src/types.ts

@@ -35,6 +35,8 @@ export type IDay = {
 export type IPhoto = {
   /** Nextcloud ID of file */
   fileid: number;
+  /** Vue key if duplicates present (otherwise use fileid) */
+  key?: string;
   /** Etag from server */
   etag?: string;
   /** Path to file */