From a0159f1e18bec19e01bdca5cac435b9ee81e3fa1 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Wed, 6 Aug 2025 19:18:13 +0300
Subject: [PATCH] Allow copying just one emoji from another pack into a local
 one

---
 .../settings_modal/admin_tabs/emoji_tab.js    |  6 +-
 .../settings_modal/admin_tabs/emoji_tab.vue   |  5 +-
 .../helpers/emoji_editing_popover.vue         | 75 +++++++++++++++----
 src/i18n/en.json                              |  2 +
 4 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index a315756e8..d8f769e0b 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -145,9 +145,9 @@ const EmojiTab = {
       })
     },
 
-    updatePackFiles (newFiles) {
-      this.pack.files = newFiles
-      this.sortPackFiles(this.packName)
+    updatePackFiles (newFiles, packName) {
+      this.knownPacks[packName].files = newFiles
+      this.sortPackFiles(packName)
     },
 
     loadPacksPaginated (listFunction) {
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 333ff8b0e..9095192fe 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -387,11 +387,12 @@
               ref="emojiPopovers"
               :key="shortcode"
               placement="top"
-              :title="$t('admin_dash.emoji.editing', [shortcode])"
-              :disabled="pack.remote !== undefined"
+              :title="$t(`admin_dash.emoji.${pack.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
               :shortcode="shortcode"
               :file="file"
               :pack-name="packName"
+              :remote="pack.remote"
+              :known-local-packs="knownLocalPacks"
               @update-pack-files="updatePackFiles"
               @display-error="displayError"
             >
diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
index 1cca45fbf..48c5f1a5e 100644
--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
@@ -7,7 +7,6 @@
     popover-class="emoji-tab-edit-popover popover-default"
     :bound-to="{ x: 'container' }"
     :offset="{ y: 5 }"
-    :disabled="disabled"
     :class="{'emoji-unsaved': isEdited}"
   >
     <template #trigger>
@@ -63,16 +62,47 @@
           </label>
         </div>
 
+        <div class="emoji-tab-popover-input" v-if="remote !== undefined">
+          <label>
+            {{ $t('admin_dash.emoji.copy_to') }}
+
+            <Select
+              v-model="copyToPack"
+              class="form-control"
+            >
+              <option
+                value=""
+                disabled
+                hidden
+              >
+                {{ $t('admin_dash.emoji.emoji_pack') }}
+              </option>
+              <option
+                v-for="(pack, listPackName) in knownLocalPacks"
+                :key="listPackName"
+                :label="listPackName"
+              >
+                {{ listPackName }}
+              </option>
+            </Select>
+          </label>
+        </div>
+
+        <!--
+             For local emojis, disable the button if nothing was edited.
+             For remote emojis, also disable it if a local pack is not selected.
+             Remote emojis are processed by the same function that uploads new ones, as that is effectively what it does
+        -->
         <button
           class="button button-default btn"
           type="button"
-          :disabled="newUpload ? uploadFile.length == 0 : !isEdited"
-          @click="newUpload ? uploadEmoji() : saveEditedEmoji()"
+          :disabled="saveButtonDisabled"
+          @click="(newUpload || this.remote !== undefined) ? uploadEmoji() : saveEditedEmoji()"
         >
           {{ $t('admin_dash.emoji.save') }}
         </button>
 
-        <template v-if="!newUpload">
+        <template v-if="!newUpload && remote === undefined">
           <button
             class="button button-default btn emoji-tab-popover-button"
             type="button"
@@ -107,19 +137,16 @@
 import Popover from 'components/popover/popover.vue'
 import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
 import StillImage from 'components/still-image/still-image.vue'
+import Select from 'components/select/select.vue'
 
 export default {
-  components: { Popover, ConfirmModal, StillImage },
+  components: { Popover, ConfirmModal, StillImage, Select },
   inject: ['emojiAddr'],
   props: {
     placement: {
       type: String,
       required: true
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
 
     newUpload: Boolean,
 
@@ -140,6 +167,14 @@ export default {
       type: String,
       // Only exists when this is not a new upload
       default: ''
+    },
+
+    // Only exists for emojis from remote packs
+    remote: {
+      type: Object
+    },
+    knownLocalPacks: {
+      type: Object
     }
   },
   emits: ['updatePackFiles', 'displayError'],
@@ -148,7 +183,8 @@ export default {
       uploadFile: [],
       editedShortcode: this.shortcode,
       editedFile: this.file,
-      deleteModalVisible: false
+      deleteModalVisible: false,
+      copyToPack: ""
     }
   },
   computed: {
@@ -163,6 +199,12 @@ export default {
     },
     isEdited () {
       return !this.newUpload && (this.editedShortcode !== this.shortcode || this.editedFile !== this.file)
+    },
+    saveButtonDisabled() {
+      if (this.remote === undefined)
+        return this.newUpload ? this.uploadFile.length == 0 : !this.isEdited
+      else
+        return this.copyToPack === ""
     }
   },
   methods: {
@@ -181,9 +223,10 @@ export default {
       }).then(resp => this.$emit('updatePackFiles', resp))
     },
     uploadEmoji () {
+      let packName = this.remote === undefined ? this.packName : this.copyToPack
       this.$store.state.api.backendInteractor.addNewEmojiFile({
-        packName: this.packName,
-        file: this.uploadFile[0],
+        packName: packName,
+        file: this.remote === undefined ? this.uploadFile[0] : this.emojiAddr(this.file),
         shortcode: this.editedShortcode,
         filename: this.editedFile
       }).then(resp => resp.json()).then(resp => {
@@ -192,7 +235,7 @@ export default {
           return
         }
 
-        this.$emit('updatePackFiles', resp)
+        this.$emit('updatePackFiles', resp, packName)
         this.$refs.emojiPopover.hidePopover()
 
         this.editedFile = ''
@@ -215,7 +258,7 @@ export default {
           return
         }
 
-        this.$emit('updatePackFiles', resp)
+        this.$emit('updatePackFiles', resp, this.packName)
       })
     }
   }
@@ -232,5 +275,9 @@ export default {
       width: 32px;
       height: 32px;
     }
+
+    .Select {
+      display: inline-block;
+    }
   }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5363eda98..39d0978a2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1215,6 +1215,8 @@
       "download_as_name_full": "New name, leave blank to reuse",
       "files": "Files",
       "editing": "Editing {0}",
+      "copying": "Copying {0}",
+      "copy_to": "Copy to",
       "delete_title": "Delete?",
       "metadata_changed": "Metadata different from saved",
       "emoji_changed": "Unsaved emoji file changes, check highlighted emoji",