Frontend: Keep chip-toolbar Save/Undo visible and fix re-add photoprism#4966

Author: lastzero

frontend/src/component/sidebar/info.vue

@@ -290,7 +290,7 @@
           <v-list-item class="metadata__item meta-labels">
             <div class="text-subtitle-2">{{ $gettext("Labels") }}</div>
             <template v-if="isEditable && chipState.labels.removals.length > 0" #append>
-              <p-sidebar-inline-toolbar :editing="true" :can-undo="true" @confirm="confirmLabels" @undo="undoChipRemovals('labels')" />
+              <p-sidebar-inline-toolbar :editing="true" :can-undo="true" chip-mode @confirm="confirmLabels" @undo="undoChipRemovals('labels')" />
             </template>
           </v-list-item>
           <v-list-item v-if="visibleLabels.length > 0" class="metadata__item metadata__chips meta-labels">
@@ -350,7 +350,7 @@
           <v-list-item class="metadata__item meta-albums">
             <div class="text-subtitle-2">{{ $gettext("Albums") }}</div>
             <template v-if="isEditable && chipState.albums.removals.length > 0" #append>
-              <p-sidebar-inline-toolbar :editing="true" :can-undo="true" @confirm="confirmAlbums" @undo="undoChipRemovals('albums')" />
+              <p-sidebar-inline-toolbar :editing="true" :can-undo="true" chip-mode @confirm="confirmAlbums" @undo="undoChipRemovals('albums')" />
             </template>
           </v-list-item>
           <v-list-item v-if="visibleAlbums.length > 0" class="metadata__item metadata__chips meta-albums">
@@ -1729,8 +1729,22 @@ export default {
       }
       const norm = this.$util.normalizeTitle(name);
       if (!norm) return false;
-      // Already on the photo? Skip the API call.
-      if (this.labels.some((l) => this.$util.normalizeTitle(l?.Label?.Name) === norm)) return false;
+      // If the typed label matches a chip currently pending removal,
+      // restore it instead of calling the API. Without this branch the
+      // `visibleLabels.some` check below would still let the call through
+      // (the chip is filtered out of visibleLabels) but the resulting
+      // POST would race the deferred DELETE on auto-commit and leave the
+      // photo in an unpredictable state — and intuitively "type the name
+      // you just × clicked" should mean "put it back", not "round-trip".
+      const pending = this.labels.find(
+        (l) => this.isChipPendingRemoval("labels", l?.Label?.ID) && this.$util.normalizeTitle(l?.Label?.Name) === norm
+      );
+      if (pending?.Label?.ID != null) {
+        this.togglePendingChipRemoval("labels", pending.Label.ID);
+        return true;
+      }
+      // Already on the photo (and not pending removal)? Skip the API call.
+      if (this.visibleLabels.some((l) => this.$util.normalizeTitle(l?.Label?.Name) === norm)) return false;
       // Match against the system-wide label list — if a normalized match
       // exists, send the canonical existing-label name so the backend
       // doesn't create a near-duplicate (e.g. typed `Hello Cat` reuses an
@@ -1760,6 +1774,13 @@ export default {
         this.$notify.error(this.$gettext("Name too long"));
         return false;
       }
+      // If the album is pending removal, restore it instead of calling
+      // the API. Mirrors the Labels pending-restore path; see
+      // addLabelImmediate for the rationale.
+      if (this.isChipPendingRemoval("albums", album.UID)) {
+        this.togglePendingChipRemoval("albums", album.UID);
+        return true;
+      }
       if (this.albums.some((a) => a.UID === album.UID)) return false;
       const norm = this.$util.normalizeTitle(title);
       if (this.albumTitleConflicts(norm)) return false;

frontend/src/component/sidebar/inline-toolbar.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="p-sidebar-inline-toolbar d-flex">
+  <div :class="['p-sidebar-inline-toolbar', 'd-flex', { 'p-sidebar-inline-toolbar--chip': chipMode }]">
     <v-btn
       v-if="editing && canUndo"
       :disabled="undoDisabled"
       icon="mdi-undo-variant"
       density="compact"
       variant="plain"
       size="x-small"
-      class="meta-inline-undo"
+      :class="['meta-inline-undo', { 'meta-chip-undo': chipMode }]"
       :title="$gettext('Undo')"
       @mousedown.prevent
       @click.stop="$emit('undo')"
@@ -18,7 +18,7 @@
       density="compact"
       variant="plain"
       size="x-small"
-      class="meta-inline-confirm"
+      :class="['meta-inline-confirm', { 'meta-chip-confirm': chipMode }]"
       :title="$gettext('Save')"
       @mousedown.prevent
       @click.stop="$emit('confirm')"
@@ -58,6 +58,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    // Marks the toolbar as a chip-section toolbar (Labels / Albums staged
+    // removals). Adds the `--chip` modifier class so the Save / Undo
+    // buttons stay visible even when the sidebar root has `hide-edit-save`
+    // / `hide-edit-undo`: chip sections have no keyboard alternative for
+    // committing or undoing pending removals.
+    chipMode: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["confirm", "start", "undo"],
 };

frontend/src/css/lightbox.css

@@ -523,14 +523,18 @@
    + Notes, Escape cancels, and Ctrl+Z reverts inside the focused
    textarea. Per-user preference or A/B variants flip `hideEditUndo` /
    `hideEditSave` on the sidebar root to surface the mouse-driven
-   affordances. The chip-section toolbars share these class names, so
-   the same toggles also hide their batched-removal Save / Undo
-   buttons. */
-.p-lightbox__container > .p-lightbox__sidebar > .p-sidebar-info.hide-edit-undo .meta-inline-undo {
+   affordances. Chip-section toolbars (Labels / Albums) carry the
+   `meta-chip-undo` / `meta-chip-confirm` opt-out class on each button —
+   they have no keyboard alternative for committing or undoing pending
+   removals so their Save/Undo affordances always stay visible. The
+   `:not()` exception sits on the hide rule itself rather than as a
+   separate override to keep the CSS minifier from collapsing them into
+   an `:is()` group that breaks the child combinator. */
+.p-lightbox__container > .p-lightbox__sidebar > .p-sidebar-info.hide-edit-undo .meta-inline-undo:not(.meta-chip-undo) {
     display: none;
 }
 
-.p-lightbox__container > .p-lightbox__sidebar > .p-sidebar-info.hide-edit-save .meta-inline-confirm {
+.p-lightbox__container > .p-lightbox__sidebar > .p-sidebar-info.hide-edit-save .meta-inline-confirm:not(.meta-chip-confirm) {
     display: none;
 }