Frontend: Consolidate sidebar chip-state for labels/albums photoprism#4966

Replace four flat arrays (pendingLabel{Additions,Removals},
pendingAlbum{Additions,Removals}) with one chipState object keyed by
field, plus four generic helpers (isChipPendingRemoval,
togglePendingChipRemoval, removePendingChipAdd, resetChipState) that
take field + key. addPendingLabel / addPendingAlbum stay specialized
because their validation differs (string vs object input).

Also: route the chip-section header check/pencil through the existing
PSidebarInlineToolbar; add meta-labels / meta-albums classes for
parity with the per-field hooks; surface a notify.error on
confirmLabels / confirmAlbums rejection (was silent); document the
local-patch vs evict-and-refind asymmetry between addLabel/removeLabel
and the raw album-membership API; suppress the empty .metadata__chips
container when entering edit mode with zero existing chips and zero
pending additions, and hide the redundant 'Add label/album' prompt
while editing. Tests updated to the new state shape and method
signatures (140 sidebar/info tests still pass).

Author: lastzero

frontend/src/component/sidebar/info.vue

@@ -238,52 +238,44 @@
 
         <template v-if="!restrictedRole && (editingField === 'labels' || labels.length > 0 || isEditable)">
           <v-divider class="my-4"></v-divider>
-          <v-list-item class="metadata__item">
+          <v-list-item class="metadata__item meta-labels">
             <div class="text-subtitle-2">{{ $gettext("Labels") }}</div>
             <template v-if="isEditable" #append>
-              <v-icon
-                v-if="editingField === 'labels'"
-                icon="mdi-check"
-                size="small"
-                class="meta-inline-confirm"
-                @mousedown.prevent
-                @click.stop="confirmLabels"
-              ></v-icon>
-              <v-icon v-else icon="mdi-pencil-outline" size="small" class="meta-inline-pencil" @click.stop="startChipEditing('labels')"></v-icon>
+              <p-sidebar-inline-toolbar :editing="editingField === 'labels'" @confirm="confirmLabels" @start="startChipEditing('labels')" />
             </template>
           </v-list-item>
-          <v-list-item v-if="labels.length > 0 || editingField === 'labels'" class="metadata__item metadata__chips">
+          <v-list-item v-if="labels.length > 0 || chipState.labels.additions.length > 0" class="metadata__item metadata__chips meta-labels">
             <div class="d-flex flex-wrap ga-1">
               <span
                 v-for="l in labels"
                 :key="l.Label.UID"
                 class="meta-chip meta-chip--primary"
-                :class="{ 'meta-chip--pending-remove': isLabelPendingRemoval(l) }"
-                @click.stop.prevent="editingField !== 'labels' ? navigateToLabel(l.Label) : toggleLabelRemoval(l)"
+                :class="{ 'meta-chip--pending-remove': isChipPendingRemoval('labels', l.Label.ID) }"
+                @click.stop.prevent="editingField !== 'labels' ? navigateToLabel(l.Label) : togglePendingChipRemoval('labels', l.Label.ID)"
               >
                 {{ l.Label.Name }}
                 <v-icon
                   v-if="editingField === 'labels'"
-                  :icon="isLabelPendingRemoval(l) ? 'mdi-undo' : 'mdi-close-circle'"
+                  :icon="isChipPendingRemoval('labels', l.Label.ID) ? 'mdi-undo' : 'mdi-close-circle'"
                   size="x-small"
                   class="ml-1"
                 ></v-icon>
               </span>
               <span
-                v-for="name in pendingLabelAdditions"
+                v-for="name in chipState.labels.additions"
                 :key="'add-' + name"
                 class="meta-chip meta-chip--pending-add"
-                @click.stop.prevent="removePendingLabelAdd(name)"
+                @click.stop.prevent="removePendingChipAdd('labels', name)"
               >
                 {{ name }}
                 <v-icon icon="mdi-close-circle" size="x-small" class="ml-1"></v-icon>
               </span>
             </div>
           </v-list-item>
-          <v-list-item v-else-if="isEditable" class="metadata__item">
+          <v-list-item v-else-if="isEditable && editingField !== 'labels'" class="metadata__item meta-labels">
             <div class="meta-add-prompt" @click.stop="startChipEditing('labels')">{{ $gettext("Add label") }}</div>
           </v-list-item>
-          <v-list-item v-if="editingField === 'labels'" class="metadata__item">
+          <v-list-item v-if="editingField === 'labels'" class="metadata__item meta-labels">
             <v-combobox
               :key="chipKey"
               v-model="chipInput"
@@ -309,52 +301,44 @@
 
         <template v-if="!restrictedRole && (editingField === 'albums' || albums.length > 0 || isEditable)">
           <v-divider class="my-4"></v-divider>
-          <v-list-item class="metadata__item">
+          <v-list-item class="metadata__item meta-albums">
             <div class="text-subtitle-2">{{ $gettext("Albums") }}</div>
             <template v-if="isEditable" #append>
-              <v-icon
-                v-if="editingField === 'albums'"
-                icon="mdi-check"
-                size="small"
-                class="meta-inline-confirm"
-                @mousedown.prevent
-                @click.stop="confirmAlbums"
-              ></v-icon>
-              <v-icon v-else icon="mdi-pencil-outline" size="small" class="meta-inline-pencil" @click.stop="startChipEditing('albums')"></v-icon>
+              <p-sidebar-inline-toolbar :editing="editingField === 'albums'" @confirm="confirmAlbums" @start="startChipEditing('albums')" />
             </template>
           </v-list-item>
-          <v-list-item v-if="albums.length > 0 || editingField === 'albums'" class="metadata__item metadata__chips">
+          <v-list-item v-if="albums.length > 0 || chipState.albums.additions.length > 0" class="metadata__item metadata__chips meta-albums">
             <div class="d-flex flex-wrap ga-1">
               <span
                 v-for="a in albums"
                 :key="a.UID"
                 class="meta-chip meta-chip--primary"
-                :class="{ 'meta-chip--pending-remove': isAlbumPendingRemoval(a) }"
-                @click.stop.prevent="editingField !== 'albums' ? navigateToAlbum(a) : toggleAlbumRemoval(a)"
+                :class="{ 'meta-chip--pending-remove': isChipPendingRemoval('albums', a.UID) }"
+                @click.stop.prevent="editingField !== 'albums' ? navigateToAlbum(a) : togglePendingChipRemoval('albums', a.UID)"
               >
                 {{ a.Title }}
                 <v-icon
                   v-if="editingField === 'albums'"
-                  :icon="isAlbumPendingRemoval(a) ? 'mdi-undo' : 'mdi-close-circle'"
+                  :icon="isChipPendingRemoval('albums', a.UID) ? 'mdi-undo' : 'mdi-close-circle'"
                   size="x-small"
                   class="ml-1"
                 ></v-icon>
               </span>
               <span
-                v-for="a in pendingAlbumAdditions"
+                v-for="a in chipState.albums.additions"
                 :key="'add-' + a.UID"
                 class="meta-chip meta-chip--pending-add"
-                @click.stop.prevent="removePendingAlbumAdd(a)"
+                @click.stop.prevent="removePendingChipAdd('albums', a.UID)"
               >
                 {{ a.Title }}
                 <v-icon icon="mdi-close-circle" size="x-small" class="ml-1"></v-icon>
               </span>
             </div>
           </v-list-item>
-          <v-list-item v-else-if="isEditable" class="metadata__item">
+          <v-list-item v-else-if="isEditable && editingField !== 'albums'" class="metadata__item meta-albums">
             <div class="meta-add-prompt" @click.stop="startChipEditing('albums')">{{ $gettext("Add to album") }}</div>
           </v-list-item>
-          <v-list-item v-if="editingField === 'albums'" class="metadata__item">
+          <v-list-item v-if="editingField === 'albums'" class="metadata__item meta-albums">
             <v-autocomplete
               :key="chipKey"
               v-model="chipInput"
@@ -539,10 +523,14 @@ export default {
       chipKey: 0,
       labelOptions: [],
       albumOptions: [],
-      pendingLabelRemovals: [],
-      pendingLabelAdditions: [],
-      pendingAlbumRemovals: [],
-      pendingAlbumAdditions: [],
+      // Pending chip mutations staged during edit mode. Labels are keyed by
+      // Label.ID for removals and by typed name for additions; albums are
+      // keyed by Album.UID for removals and stored as full album objects
+      // for additions (the title is read off the object at confirm time).
+      chipState: {
+        labels: { additions: [], removals: [] },
+        albums: { additions: [], removals: [] },
+      },
       markerDrafts: {},
       markerNameRule: (v) => !v || v.length <= this.$config.get("clip") || this.$gettext("Text too long"),
       markerMenuProps: {
@@ -1044,8 +1032,7 @@ export default {
         if (!d) continue;
         if (this.unwrapMarkerName(d.current).trim() !== (d.original || "").trim()) return true;
       }
-      if (this.pendingLabelAdditions.length || this.pendingLabelRemovals.length) return true;
-      if (this.pendingAlbumAdditions.length || this.pendingAlbumRemovals.length) return true;
+      if (Object.values(this.chipState).some((s) => s.additions.length || s.removals.length)) return true;
       return false;
     },
     // Async guard used by the lightbox before closing / hiding / navigating.
@@ -1125,10 +1112,7 @@ export default {
       this.editingField = null;
       this.editOriginal = null;
       this._editStartedAt = null;
-      this.pendingLabelRemovals = [];
-      this.pendingLabelAdditions = [];
-      this.pendingAlbumRemovals = [];
-      this.pendingAlbumAdditions = [];
+      this.resetChipState();
     },
     // Blur handler for inline text fields (title/caption/subject/artist/
     // copyright/license/keywords/notes). Commits the edit instead of
@@ -1209,6 +1193,36 @@ export default {
       this.chipSearch = "";
       this.chipKey++;
     },
+    // Generic chip-state helpers. Field is "labels" or "albums"; the key is
+    // whatever uniquely identifies a chip in that field's domain (Label.ID
+    // for labels, Album.UID for albums on the removals side; the typed name
+    // for label additions, Album.UID for album additions).
+    isChipPendingRemoval(field, key) {
+      const state = this.chipState[field];
+      return Boolean(state && key != null && state.removals.includes(key));
+    },
+    togglePendingChipRemoval(field, key) {
+      const state = this.chipState[field];
+      if (!state || key == null) return;
+      const idx = state.removals.indexOf(key);
+      if (idx >= 0) {
+        state.removals.splice(idx, 1);
+      } else {
+        state.removals.push(key);
+      }
+    },
+    removePendingChipAdd(field, key) {
+      const state = this.chipState[field];
+      if (!state || key == null) return;
+      const idx = field === "labels" ? state.additions.indexOf(key) : state.additions.findIndex((a) => a.UID === key);
+      if (idx >= 0) state.additions.splice(idx, 1);
+    },
+    resetChipState() {
+      Object.values(this.chipState).forEach((s) => {
+        s.additions = [];
+        s.removals = [];
+      });
+    },
     addPendingLabel(rawName) {
       const name = (rawName || "").trim();
       if (!name) return false;
@@ -1218,14 +1232,15 @@ export default {
       }
       const norm = this.$util.normalizeLabelTitle(name);
       if (!norm) return false;
-      if (this.pendingLabelAdditions.some((n) => this.$util.normalizeLabelTitle(n) === norm)) return false;
+      const additions = this.chipState.labels.additions;
+      if (additions.some((n) => this.$util.normalizeLabelTitle(n) === norm)) return false;
       if (this.labels.some((l) => this.$util.normalizeLabelTitle(l?.Label?.Name) === norm)) return false;
-      this.pendingLabelAdditions.push(name);
+      additions.push(name);
       return true;
     },
     albumTitleConflicts(norm) {
       if (!norm) return true;
-      if (this.pendingAlbumAdditions.some((a) => this.$util.normalizeLabelTitle(a?.Title) === norm)) return true;
+      if (this.chipState.albums.additions.some((a) => this.$util.normalizeLabelTitle(a?.Title) === norm)) return true;
       if (this.albums.some((a) => this.$util.normalizeLabelTitle(a?.Title) === norm)) return true;
       return false;
     },
@@ -1237,12 +1252,13 @@ export default {
         this.$notify.error(this.$gettext("Name too long"));
         return false;
       }
+      const additions = this.chipState.albums.additions;
       if (album.UID) {
-        if (this.pendingAlbumAdditions.some((a) => a.UID === album.UID)) return false;
+        if (additions.some((a) => a.UID === album.UID)) return false;
         if (this.albums.some((a) => a.UID === album.UID)) return false;
       }
       if (this.albumTitleConflicts(this.$util.normalizeLabelTitle(title))) return false;
-      this.pendingAlbumAdditions.push(album);
+      additions.push(album);
       return true;
     },
     onLabelSelected(value) {
@@ -1263,54 +1279,33 @@ export default {
         this.clearChipInput();
       }
     },
-    removePendingLabelAdd(name) {
-      const idx = this.pendingLabelAdditions.indexOf(name);
-      if (idx >= 0) this.pendingLabelAdditions.splice(idx, 1);
-    },
-    isLabelPendingRemoval(label) {
-      return this.pendingLabelRemovals.includes(label.Label.ID);
-    },
-    toggleLabelRemoval(label) {
-      if (!label?.Label?.ID) return;
-      const id = label.Label.ID;
-      const idx = this.pendingLabelRemovals.indexOf(id);
-      if (idx >= 0) {
-        this.pendingLabelRemovals.splice(idx, 1);
-      } else {
-        this.pendingLabelRemovals.push(id);
-      }
-    },
     confirmLabels() {
       if (!this.photo) {
         this.editingField = null;
         return;
       }
 
-      const removals = this.pendingLabelRemovals.slice();
-      const additions = this.pendingLabelAdditions.slice();
+      const state = this.chipState.labels;
+      const removals = state.removals.slice();
+      const additions = state.additions.slice();
       this.editingField = null;
-      this.pendingLabelRemovals = [];
-      this.pendingLabelAdditions = [];
+      state.removals = [];
+      state.additions = [];
 
       const promises = [];
       removals.forEach((id) => promises.push(this.photo.removeLabel(id)));
       additions.forEach((name) => promises.push(this.photo.addLabel(name)));
 
+      // Cache freshness: photo.addLabel / removeLabel patch this.photo.Labels
+      // locally on success, and the backend publishes photos.updated which
+      // evicts the cached entry via evictCachedFromEntities — see
+      // model/photo.js. confirmAlbums needs an explicit evict + re-find
+      // because Album mutations go through raw $api.delete/post and don't
+      // patch this.photo.Albums; that asymmetry is intentional.
       if (promises.length) {
-        Promise.all(promises).catch(() => {});
-      }
-    },
-    isAlbumPendingRemoval(album) {
-      return this.pendingAlbumRemovals.includes(album.UID);
-    },
-    toggleAlbumRemoval(album) {
-      if (!album?.UID) return;
-      const uid = album.UID;
-      const idx = this.pendingAlbumRemovals.indexOf(uid);
-      if (idx >= 0) {
-        this.pendingAlbumRemovals.splice(idx, 1);
-      } else {
-        this.pendingAlbumRemovals.push(uid);
+        Promise.all(promises).catch(() => {
+          this.$notify.error(this.$gettext("Failed to save changes"));
+        });
       }
     },
     confirmAlbums() {
@@ -1319,11 +1314,12 @@ export default {
         return;
       }
 
-      const removals = this.pendingAlbumRemovals.slice();
-      const additions = this.pendingAlbumAdditions.slice();
+      const state = this.chipState.albums;
+      const removals = state.removals.slice();
+      const additions = state.additions.slice();
       this.editingField = null;
-      this.pendingAlbumRemovals = [];
-      this.pendingAlbumAdditions = [];
+      state.removals = [];
+      state.additions = [];
 
       const promises = [];
       removals.forEach((uid) => promises.push(this.$api.delete(`albums/${uid}/photos`, { data: { photos: [this.photo.UID] } })));
@@ -1332,13 +1328,19 @@ export default {
       if (promises.length) {
         Promise.all(promises)
           .then(() => {
+            // Album mutations don't patch this.photo.Albums locally and the
+            // backend publishes only albums.updated (not photos.updated) for
+            // membership changes, so we evict + re-find here so the sidebar
+            // reflects the saved state without waiting for navigation.
             Photo.evictCache(this.photo.UID);
             return this.photo.find(this.photo.UID);
           })
           .then((photo) => {
             this.photo.setValues(photo.getValues());
           })
-          .catch(() => {});
+          .catch(() => {
+            this.$notify.error(this.$gettext("Failed to save changes"));
+          });
       }
     },
     onAlbumSelected(value) {
@@ -1396,10 +1398,6 @@ export default {
           this.clearChipInput();
         });
     },
-    removePendingAlbumAdd(album) {
-      const idx = this.pendingAlbumAdditions.findIndex((a) => a.UID === album.UID);
-      if (idx >= 0) this.pendingAlbumAdditions.splice(idx, 1);
-    },
     confirmDateTime(data) {
       this.dateTimeDialog = false;