From 759dab47297594218acc43855cdfaa810841b933 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 28 Mar 2020 01:31:07 +0300
Subject: [PATCH 1/3] Split Emoji pack component into local and remote emoji
 pack

---
 .../emojiPacks/components/LocalEmojiPack.vue  | 276 ++++++++++++++++++
 .../{EmojiPack.vue => RemoteEmojiPack.vue}    |  65 +----
 src/views/emojiPacks/index.vue                |  23 +-
 3 files changed, 291 insertions(+), 73 deletions(-)
 create mode 100644 src/views/emojiPacks/components/LocalEmojiPack.vue
 rename src/views/emojiPacks/components/{EmojiPack.vue => RemoteEmojiPack.vue} (71%)

diff --git a/src/views/emojiPacks/components/LocalEmojiPack.vue b/src/views/emojiPacks/components/LocalEmojiPack.vue
new file mode 100644
index 00000000..917ff4dd
--- /dev/null
+++ b/src/views/emojiPacks/components/LocalEmojiPack.vue
@@ -0,0 +1,276 @@
+<template>
+  <el-collapse-item :title="name" :name="name" class="has-background">
+    <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata">
+      <el-form-item :label=" $t('emoji.sharePack')">
+        <el-switch v-model="share" />
+      </el-form-item>
+      <el-form-item :label=" $t('emoji.homepage')">
+        <el-input v-model="homepage" />
+      </el-form-item>
+      <el-form-item :label=" $t('emoji.description')">
+        <el-input v-model="description" type="textarea" />
+      </el-form-item>
+      <el-form-item :label=" $t('emoji.license')">
+        <el-input v-model="license" />
+      </el-form-item>
+      <el-form-item :label=" $t('emoji.fallbackSrc')">
+        <el-input v-model="fallbackSrc" />
+      </el-form-item>
+      <el-form-item
+        v-if="fallbackSrc && fallbackSrc.trim() !== ''"
+        :label=" $t('emoji.fallbackSrcSha')">
+        {{ pack.pack["fallback-src-sha256"] }}
+      </el-form-item>
+    </el-form>
+    <div class="pack-button-container">
+      <div class="save-pack-button-container">
+        <el-button type="primary" class="save-pack-button" @click="savePackMetadata">{{ $t('emoji.saveMetadata') }}</el-button>
+        <el-button class="delete-pack-button" @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
+      </div>
+      <div class="download-pack-button-container">
+        <el-link
+          v-if="pack.pack['can-download']"
+          :href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`"
+          :underline="false"
+          type="primary"
+          target="_blank">
+          <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
+        </el-link>
+      </div>
+    </div>
+    <el-collapse v-model="showPackContent" class="contents-collapse">
+      <el-collapse-item v-if="isLocal" :title=" $t('emoji.addNewEmoji')" name="addEmoji" class="no-background">
+        <new-emoji-uploader :pack-name="name"/>
+      </el-collapse-item>
+      <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
+        <single-emoji-editor
+          v-for="(file, ename) in pack.files"
+          :key="ename"
+          :host="host"
+          :pack-name="name"
+          :name="ename"
+          :file="file"
+          :is-local="isLocal" />
+      </el-collapse-item>
+    </el-collapse>
+  </el-collapse-item>
+</template>
+
+<script>
+import SingleEmojiEditor from './SingleEmojiEditor.vue'
+import NewEmojiUploader from './NewEmojiUploader.vue'
+
+export default {
+  components: { SingleEmojiEditor, NewEmojiUploader },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    pack: {
+      type: Object,
+      required: true
+    },
+    host: {
+      type: String,
+      required: true
+    },
+    isLocal: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      showPackContent: []
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
+    labelWidth() {
+      if (this.isMobile) {
+        return '90px'
+      } else if (this.isTablet) {
+        return '120px'
+      } else {
+        return '120px'
+      }
+    },
+    share: {
+      get() { return this.pack.pack['share-files'] },
+      set(value) {
+        this.$store.dispatch(
+          'UpdateLocalPackVal',
+          { name: this.name, key: 'share-files', value }
+        )
+      }
+    },
+    homepage: {
+      get() { return this.pack.pack['homepage'] },
+      set(value) {
+        this.$store.dispatch(
+          'UpdateLocalPackVal',
+          { name: this.name, key: 'homepage', value }
+        )
+      }
+    },
+    description: {
+      get() { return this.pack.pack['description'] },
+      set(value) {
+        this.$store.dispatch(
+          'UpdateLocalPackVal',
+          { name: this.name, key: 'description', value }
+        )
+      }
+    },
+    license: {
+      get() { return this.pack.pack['license'] },
+      set(value) {
+        this.$store.dispatch(
+          'UpdateLocalPackVal',
+          { name: this.name, key: 'license', value }
+        )
+      }
+    },
+    fallbackSrc: {
+      get() { return this.pack.pack['fallback-src'] },
+      set(value) {
+        if (value.trim() !== '') {
+          this.$store.dispatch(
+            'UpdateLocalPackVal',
+            { name: this.name, key: 'fallback-src', value }
+          )
+        } else {
+          this.$store.dispatch(
+            'UpdateLocalPackVal',
+            { name: this.name, key: 'fallback-src', value: null }
+          )
+          this.$store.dispatch(
+            'UpdateLocalPackVal',
+            { name: this.name, key: 'fallback-src-sha256', value: null }
+          )
+        }
+      }
+    }
+  },
+  methods: {
+    deletePack() {
+      this.$confirm('This will delete the pack, are you sure?', 'Warning', {
+        confirmButtonText: 'Yes, delete the pack',
+        cancelButtonText: 'No, leave it be',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('DeletePack', { name: this.name })
+          .then(() => this.$store.dispatch('ReloadEmoji'))
+          .then(() => this.$store.dispatch('SetLocalEmojiPacks'))
+      }).catch(() => {})
+    },
+    savePackMetadata() {
+      this.$store.dispatch('SavePackMetadata', { packName: this.name })
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+.download-archive {
+  width: 250px
+}
+.download-pack-button-container {
+  width: 265px;
+  .el-link {
+    width: inherit;
+    span {
+      width: inherit;
+      .download-archive {
+        width: inherit;
+      }
+    }
+  }
+}
+.download-shared-pack {
+  display: flex;
+  margin-bottom: 10px;
+}
+.download-shared-pack-button {
+  margin-left: 10px;
+}
+.el-collapse-item__content {
+  padding-bottom: 0;
+}
+.el-collapse-item__header {
+  height: 36px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #606266;
+}
+.emoji-pack-card {
+  margin-top: 5px;
+}
+.emoji-pack-metadata {
+  .el-form-item {
+    margin-bottom: 10px;
+  }
+}
+.has-background .el-collapse-item__header {
+  background: #f6f6f6;
+}
+.no-background .el-collapse-item__header {
+  background: white;
+}
+.pack-button-container {
+  margin: 0 0 18px 120px;
+}
+.save-pack-button-container {
+  margin-bottom: 8px;
+  width: 265px;
+  display: flex;
+  justify-content: space-between;
+}
+@media only screen and (max-width:480px) {
+  .delete-pack-button {
+    width: 45%;
+  }
+  .download-pack-button-container {
+    width: 100%;
+  }
+  .download-shared-pack {
+    flex-direction: column;
+  }
+  .download-shared-pack-button {
+    margin-left: 0;
+    margin-top: 10px;
+    padding: 10px;
+  }
+  .pack-button-container {
+    width: 100%;
+    margin: 0 0 22px 0;
+  }
+  .remote-pack-metadata {
+    .el-form-item__content {
+      line-height: 24px;
+      margin-top: 4px;
+    }
+  }
+  .save-pack-button {
+    width: 54%;
+  }
+  .save-pack-button-container {
+    margin-bottom: 8px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    button {
+      padding: 10px 5px;
+    }
+    .el-button+.el-button {
+      margin-left: 3px;
+    }
+  }
+}
+</style>
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/RemoteEmojiPack.vue
similarity index 71%
rename from src/views/emojiPacks/components/EmojiPack.vue
rename to src/views/emojiPacks/components/RemoteEmojiPack.vue
index d31fcf8a..cb63ec3d 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/RemoteEmojiPack.vue
@@ -1,44 +1,6 @@
 <template>
   <el-collapse-item :title="name" :name="name" class="has-background">
-    <el-form v-if="isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata">
-      <el-form-item :label=" $t('emoji.sharePack')">
-        <el-switch v-model="share" />
-      </el-form-item>
-      <el-form-item :label=" $t('emoji.homepage')">
-        <el-input v-model="homepage" />
-      </el-form-item>
-      <el-form-item :label=" $t('emoji.description')">
-        <el-input v-model="description" type="textarea" />
-      </el-form-item>
-      <el-form-item :label=" $t('emoji.license')">
-        <el-input v-model="license" />
-      </el-form-item>
-      <el-form-item :label=" $t('emoji.fallbackSrc')">
-        <el-input v-model="fallbackSrc" />
-      </el-form-item>
-      <el-form-item
-        v-if="fallbackSrc && fallbackSrc.trim() !== ''"
-        :label=" $t('emoji.fallbackSrcSha')">
-        {{ pack.pack["fallback-src-sha256"] }}
-      </el-form-item>
-    </el-form>
-    <div v-if="isLocal" class="pack-button-container">
-      <div class="save-pack-button-container">
-        <el-button type="primary" class="save-pack-button" @click="savePackMetadata">{{ $t('emoji.saveMetadata') }}</el-button>
-        <el-button class="delete-pack-button" @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
-      </div>
-      <div class="download-pack-button-container">
-        <el-link
-          v-if="pack.pack['can-download']"
-          :href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`"
-          :underline="false"
-          type="primary"
-          target="_blank">
-          <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
-        </el-link>
-      </div>
-    </div>
-    <el-form v-if="!isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
+    <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
       <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" disabled />
       </el-form-item>
@@ -71,9 +33,6 @@
       </el-form-item>
     </el-form>
     <el-collapse v-model="showPackContent" class="contents-collapse">
-      <el-collapse-item v-if="isLocal" :title=" $t('emoji.addNewEmoji')" name="addEmoji" class="no-background">
-        <new-emoji-uploader :pack-name="name"/>
-      </el-collapse-item>
       <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
         <single-emoji-editor
           v-for="(file, ename) in pack.files"
@@ -84,7 +43,7 @@
           :file="file"
           :is-local="isLocal" />
       </el-collapse-item>
-      <el-collapse-item v-if="!isLocal" :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
+      <el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
         <p>
           {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }}
           "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}).
@@ -103,10 +62,9 @@
 
 <script>
 import SingleEmojiEditor from './SingleEmojiEditor.vue'
-import NewEmojiUploader from './NewEmojiUploader.vue'
 
 export default {
-  components: { SingleEmojiEditor, NewEmojiUploader },
+  components: { SingleEmojiEditor },
   props: {
     name: {
       type: String,
@@ -125,7 +83,6 @@ export default {
       required: true
     }
   },
-
   data() {
     return {
       showPackContent: [],
@@ -216,22 +173,6 @@ export default {
         { instanceAddress, packName: this.name, as: this.downloadSharedAs }
       ).then(() => this.$store.dispatch('ReloadEmoji'))
         .then(() => this.$store.dispatch('SetLocalEmojiPacks'))
-    },
-
-    deletePack() {
-      this.$confirm('This will delete the pack, are you sure?', 'Warning', {
-        confirmButtonText: 'Yes, delete the pack',
-        cancelButtonText: 'No, leave it be',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('DeletePack', { name: this.name })
-          .then(() => this.$store.dispatch('ReloadEmoji'))
-          .then(() => this.$store.dispatch('SetLocalEmojiPacks'))
-      }).catch(() => {})
-    },
-
-    savePackMetadata() {
-      this.$store.dispatch('SavePackMetadata', { packName: this.name })
     }
   }
 }
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 2757e3a4..70c832ed 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -27,7 +27,7 @@
       </el-form-item>
       <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
         <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack">
-          <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
+          <local-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
         </el-collapse>
       </el-form-item>
       <el-divider class="divider"/>
@@ -46,7 +46,7 @@
       </el-form-item>
       <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
         <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack">
-          <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
+          <remote-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
         </el-collapse>
       </el-form-item>
     </el-form>
@@ -54,11 +54,12 @@
 </template>
 
 <script>
-import EmojiPack from './components/EmojiPack'
+import LocalEmojiPack from './components/LocalEmojiPack'
+import RemoteEmojiPack from './components/RemoteEmojiPack'
 import i18n from '@/lang'
 
 export default {
-  components: { EmojiPack },
+  components: { LocalEmojiPack, RemoteEmojiPack },
   data() {
     return {
       remoteInstanceAddress: '',
@@ -103,6 +104,13 @@ export default {
           this.$store.dispatch('ReloadEmoji')
         })
     },
+    importFromFS() {
+      this.$store.dispatch('ImportFromFS')
+        .then(() => {
+          this.$store.dispatch('SetLocalEmojiPacks')
+          this.$store.dispatch('ReloadEmoji')
+        })
+    },
     refreshLocalPacks() {
       try {
         this.$store.dispatch('SetLocalEmojiPacks')
@@ -127,13 +135,6 @@ export default {
         type: 'success',
         message: i18n.t('emoji.reloaded')
       })
-    },
-    importFromFS() {
-      this.$store.dispatch('ImportFromFS')
-        .then(() => {
-          this.$store.dispatch('SetLocalEmojiPacks')
-          this.$store.dispatch('ReloadEmoji')
-        })
     }
   }
 }

From ca9e84ad4b65bf23277b5ea36c8160a303a54c19 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 28 Mar 2020 01:52:53 +0300
Subject: [PATCH 2/3] Add loading when fetching remote packs

---
 src/views/emojiPacks/index.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 70c832ed..28f964d8 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -37,6 +37,7 @@
             v-model="remoteInstanceAddress"
             :placeholder="$t('emoji.remoteInstanceAddress')" />
           <el-button
+            v-loading.fullscreen.lock="fullscreenLoading"
             :disabled="remoteInstanceAddress.trim() === ''"
             class="create-pack-button"
             @click="refreshRemotePacks">
@@ -65,7 +66,8 @@ export default {
       remoteInstanceAddress: '',
       newPackName: '',
       activeLocalPack: [],
-      activeRemotePack: []
+      activeRemotePack: [],
+      fullscreenLoading: false
     }
   },
   computed: {
@@ -122,8 +124,10 @@ export default {
         message: i18n.t('emoji.refreshed')
       })
     },
-    refreshRemotePacks() {
-      this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress })
+    async refreshRemotePacks() {
+      this.fullscreenLoading = true
+      await this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress })
+      this.fullscreenLoading = false
     },
     async reloadEmoji() {
       try {

From 2a38907ebe6eb2d8db8291d39f8c9d9fa0fa991a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 29 Mar 2020 20:42:24 +0300
Subject: [PATCH 3/3] Load emoji packs that are open in collapse

---
 src/store/modules/emojiPacks.js               |   7 ++
 .../emojiPacks/components/RemoteEmojiPack.vue | 119 +++++++++---------
 src/views/emojiPacks/index.vue                |   6 +-
 3 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/src/store/modules/emojiPacks.js b/src/store/modules/emojiPacks.js
index 282a069e..f92e0fa5 100644
--- a/src/store/modules/emojiPacks.js
+++ b/src/store/modules/emojiPacks.js
@@ -15,11 +15,15 @@ import Vue from 'vue'
 
 const packs = {
   state: {
+    activeCollapseItems: [],
     localPacks: {},
     remoteInstance: '',
     remotePacks: {}
   },
   mutations: {
+    SET_ACTIVE_COLLAPSE_ITEMS: (state, items) => {
+      state.activeCollapseItems = items
+    },
     SET_LOCAL_PACKS: (state, packs) => {
       state.localPacks = packs
     },
@@ -99,6 +103,9 @@ const packs = {
         commit('UPDATE_LOCAL_PACK_PACK', { name: packName, pack: result.data })
       }
     },
+    SetActiveCollapseItems({ commit, state }, activeItems) {
+      commit('SET_ACTIVE_COLLAPSE_ITEMS', activeItems)
+    },
     async SetLocalEmojiPacks({ commit, getters }) {
       const { data } = await listPacks(getters.authHost)
       commit('SET_LOCAL_PACKS', data)
diff --git a/src/views/emojiPacks/components/RemoteEmojiPack.vue b/src/views/emojiPacks/components/RemoteEmojiPack.vue
index cb63ec3d..0c9ecaf3 100644
--- a/src/views/emojiPacks/components/RemoteEmojiPack.vue
+++ b/src/views/emojiPacks/components/RemoteEmojiPack.vue
@@ -1,62 +1,64 @@
 <template>
   <el-collapse-item :title="name" :name="name" class="has-background">
-    <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
-      <el-form-item :label=" $t('emoji.sharePack')">
-        <el-switch v-model="share" disabled />
-      </el-form-item>
-      <el-form-item v-if="homepage" :label=" $t('emoji.homepage')">
-        <span>{{ homepage }}</span>
-      </el-form-item>
-      <el-form-item v-if="description" :label=" $t('emoji.description')">
-        <span>{{ description }}</span>
-      </el-form-item>
-      <el-form-item v-if="license" :label=" $t('emoji.license')">
-        <span>{{ license }}</span>
-      </el-form-item>
-      <el-form-item v-if="fallbackSrc" :label=" $t('emoji.fallbackSrc')">
-        <span>{{ fallbackSrc }}</span>
-      </el-form-item>
-      <el-form-item
-        v-if="fallbackSrc && fallbackSrc.trim() !== ''"
-        :label=" $t('emoji.fallbackSrcSha')">
-        {{ pack.pack["fallback-src-sha256"] }}
-      </el-form-item>
-      <el-form-item>
-        <el-link
-          v-if="pack.pack['can-download']"
-          :href="pack.pack['fallback-src']"
-          :underline="false"
-          type="primary"
-          target="_blank">
-          <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
-        </el-link>
-      </el-form-item>
-    </el-form>
-    <el-collapse v-model="showPackContent" class="contents-collapse">
-      <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
-        <single-emoji-editor
-          v-for="(file, ename) in pack.files"
-          :key="ename"
-          :host="host"
-          :pack-name="name"
-          :name="ename"
-          :file="file"
-          :is-local="isLocal" />
-      </el-collapse-item>
-      <el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
-        <p>
-          {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }}
-          "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}).
-          {{ $t('emoji.willBeUsable') }}.
-        </p>
-        <div class="download-shared-pack">
-          <el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
-          <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance(pack.pack['homepage'])">
-            {{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
-          </el-button>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
+    <div v-if="loadRemotePack">
+      <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
+        <el-form-item :label=" $t('emoji.sharePack')">
+          <el-switch v-model="share" disabled />
+        </el-form-item>
+        <el-form-item v-if="homepage" :label=" $t('emoji.homepage')">
+          <span>{{ homepage }}</span>
+        </el-form-item>
+        <el-form-item v-if="description" :label=" $t('emoji.description')">
+          <span>{{ description }}</span>
+        </el-form-item>
+        <el-form-item v-if="license" :label=" $t('emoji.license')">
+          <span>{{ license }}</span>
+        </el-form-item>
+        <el-form-item v-if="fallbackSrc" :label=" $t('emoji.fallbackSrc')">
+          <span>{{ fallbackSrc }}</span>
+        </el-form-item>
+        <el-form-item
+          v-if="fallbackSrc && fallbackSrc.trim() !== ''"
+          :label=" $t('emoji.fallbackSrcSha')">
+          {{ pack.pack["fallback-src-sha256"] }}
+        </el-form-item>
+        <el-form-item>
+          <el-link
+            v-if="pack.pack['can-download']"
+            :href="pack.pack['fallback-src']"
+            :underline="false"
+            type="primary"
+            target="_blank">
+            <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
+          </el-link>
+        </el-form-item>
+      </el-form>
+      <el-collapse v-model="showPackContent" class="contents-collapse">
+        <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
+          <single-emoji-editor
+            v-for="(file, ename) in pack.files"
+            :key="ename"
+            :host="host"
+            :pack-name="name"
+            :name="ename"
+            :file="file"
+            :is-local="isLocal" />
+        </el-collapse-item>
+        <el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
+          <p>
+            {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }}
+            "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}).
+            {{ $t('emoji.willBeUsable') }}.
+          </p>
+          <div class="download-shared-pack">
+            <el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
+            <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance(pack.pack['homepage'])">
+              {{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
+            </el-button>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
   </el-collapse-item>
 </template>
 
@@ -108,6 +110,9 @@ export default {
         return '120px'
       }
     },
+    loadRemotePack() {
+      return this.$store.state.emojiPacks.activeCollapseItems.includes(this.name)
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 28f964d8..8154f254 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -46,7 +46,7 @@
         </div>
       </el-form-item>
       <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
-        <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack">
+        <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" @change="setActiveCollapseItems">
           <remote-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
         </el-collapse>
       </el-form-item>
@@ -139,6 +139,10 @@ export default {
         type: 'success',
         message: i18n.t('emoji.reloaded')
       })
+    },
+    setActiveCollapseItems(activeItems) {
+      const items = Array.isArray(activeItems) ? activeItems : [activeItems]
+      this.$store.dispatch('SetActiveCollapseItems', items)
     }
   }
 }