From d2d986619110666a7490d11c2404102bb82ce9a2 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 5 Oct 2019 02:13:58 +0300
Subject: [PATCH 01/25] Rename EmojiPacks module and view

---
 src/api/{emoji_packs.js => emojiPacks.js}                     | 0
 src/store/index.js                                            | 4 ++--
 src/store/modules/{emoji_packs.js => emojiPacks.js}           | 2 +-
 .../{emoji-packs => emojiPacks}/components/EmojiPack.vue      | 0
 .../components/NewEmojiUploader.vue                           | 0
 .../components/PropertyEditingRow.vue                         | 0
 .../components/SingleEmojiEditor.vue                          | 4 ++--
 src/views/{emoji-packs => emojiPacks}/index.vue               | 4 ++--
 8 files changed, 7 insertions(+), 7 deletions(-)
 rename src/api/{emoji_packs.js => emojiPacks.js} (100%)
 rename src/store/modules/{emoji_packs.js => emojiPacks.js} (98%)
 rename src/views/{emoji-packs => emojiPacks}/components/EmojiPack.vue (100%)
 rename src/views/{emoji-packs => emojiPacks}/components/NewEmojiUploader.vue (100%)
 rename src/views/{emoji-packs => emojiPacks}/components/PropertyEditingRow.vue (100%)
 rename src/views/{emoji-packs => emojiPacks}/components/SingleEmojiEditor.vue (97%)
 rename src/views/{emoji-packs => emojiPacks}/index.vue (95%)

diff --git a/src/api/emoji_packs.js b/src/api/emojiPacks.js
similarity index 100%
rename from src/api/emoji_packs.js
rename to src/api/emojiPacks.js
diff --git a/src/store/index.js b/src/store/index.js
index 985074a0..668b4d44 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -12,7 +12,7 @@ import user from './modules/user'
 import userProfile from './modules/userProfile'
 import users from './modules/users'
 import getters from './getters'
-import emoji_packs from './modules/emoji_packs.js'
+import emojiPacks from './modules/emojiPacks.js'
 
 Vue.use(Vuex)
 
@@ -29,7 +29,7 @@ const store = new Vuex.Store({
     user,
     userProfile,
     users,
-    emoji_packs
+    emojiPacks
   },
   getters
 })
diff --git a/src/store/modules/emoji_packs.js b/src/store/modules/emojiPacks.js
similarity index 98%
rename from src/store/modules/emoji_packs.js
rename to src/store/modules/emojiPacks.js
index 1cee0060..6a14e406 100644
--- a/src/store/modules/emoji_packs.js
+++ b/src/store/modules/emojiPacks.js
@@ -7,7 +7,7 @@ import {
   deletePack,
   savePackMetadata,
   importFromFS,
-  updatePackFile } from '@/api/emoji_packs'
+  updatePackFile } from '@/api/emojiPacks'
 
 import { Message } from 'element-ui'
 
diff --git a/src/views/emoji-packs/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
similarity index 100%
rename from src/views/emoji-packs/components/EmojiPack.vue
rename to src/views/emojiPacks/components/EmojiPack.vue
diff --git a/src/views/emoji-packs/components/NewEmojiUploader.vue b/src/views/emojiPacks/components/NewEmojiUploader.vue
similarity index 100%
rename from src/views/emoji-packs/components/NewEmojiUploader.vue
rename to src/views/emojiPacks/components/NewEmojiUploader.vue
diff --git a/src/views/emoji-packs/components/PropertyEditingRow.vue b/src/views/emojiPacks/components/PropertyEditingRow.vue
similarity index 100%
rename from src/views/emoji-packs/components/PropertyEditingRow.vue
rename to src/views/emojiPacks/components/PropertyEditingRow.vue
diff --git a/src/views/emoji-packs/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
similarity index 97%
rename from src/views/emoji-packs/components/SingleEmojiEditor.vue
rename to src/views/emojiPacks/components/SingleEmojiEditor.vue
index e5d7b01b..17eddb73 100644
--- a/src/views/emoji-packs/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -21,7 +21,7 @@
         <p>Select the local pack to copy to</p>
         <el-select v-model="copyToLocalPackName" placeholder="Local pack">
           <el-option
-            v-for="(_pack, name) in $store.state.emoji_packs.localPacks"
+            v-for="(_pack, name) in $store.state.emojiPacks.localPacks"
             :key="name"
             :label="name"
             :value="name" />
@@ -64,7 +64,7 @@
 
 <script>
 
-import { addressOfEmojiInPack } from '@/api/emoji_packs'
+import { addressOfEmojiInPack } from '@/api/emojiPacks'
 
 export default {
   props: {
diff --git a/src/views/emoji-packs/index.vue b/src/views/emojiPacks/index.vue
similarity index 95%
rename from src/views/emoji-packs/index.vue
rename to src/views/emojiPacks/index.vue
index eb64fbed..642f6ef8 100644
--- a/src/views/emoji-packs/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -49,7 +49,7 @@
           </el-button>
         </div>
 
-        <div v-for="(pack, name) in $store.state.emoji_packs.localPacks" :key="name">
+        <div v-for="(pack, name) in $store.state.emojiPacks.localPacks" :key="name">
           <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
           <el-divider />
         </div>
@@ -64,7 +64,7 @@
           Refresh remote packs
         </el-button>
 
-        <div v-for="(pack, name) in $store.state.emoji_packs.remotePacks" :key="name">
+        <div v-for="(pack, name) in $store.state.emojiPacks.remotePacks" :key="name">
           <emoji-pack :name="name" :pack="pack" :host="remoteInstanceAddress" :is-local="false" />
           <el-divider />
         </div>

From 4e2b24ea4b7ead810d76b54d511cdf16b97ec96b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 5 Oct 2019 02:15:26 +0300
Subject: [PATCH 02/25] Remove emoji packs from router and add it to Settings
 tab

---
 src/lang/en.js               |  3 ++-
 src/router/index.js          | 15 ---------------
 src/views/settings/index.vue |  6 +++++-
 3 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 8088e441..fd23f379 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -312,7 +312,8 @@ export default {
     rateLimiters: 'Rate limiters',
     database: 'Database',
     other: 'Other',
-    success: 'Settings changed successfully!'
+    success: 'Settings changed successfully!',
+    emojiPacks: 'Emoji packs'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/router/index.js b/src/router/index.js
index a5c496cc..53dbf8ec 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,20 +63,6 @@ const moderationLog = {
   ]
 }
 
-const emojiPacksDisabled = disabledFeatures.includes('emoji-packs')
-const emojiPacks = {
-  path: '/emoji-packs',
-  component: Layout,
-  children: [
-    {
-      path: 'index',
-      component: () => import('@/views/emoji-packs/index'),
-      name: 'Emoji packs',
-      meta: { title: 'emoji-packs', icon: 'settings', noCache: true }
-    }
-  ]
-}
-
 export const constantRouterMap = [
   {
     path: '/redirect',
@@ -144,7 +130,6 @@ export const asyncRouterMap = [
   ...(invitesDisabled ? [] : [invites]),
   ...(moderationLogDisabled ? [] : [moderationLog]),
   ...(settingsDisabled ? [] : [settings]),
-  ...(emojiPacksDisabled ? [] : [emojiPacks]),
   {
     path: '/users/:id',
     component: Layout,
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 79ae7727..5e0c482b 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -23,6 +23,9 @@
       <el-tab-pane :label="$t('settings.endpoint')">
         <endpoint/>
       </el-tab-pane>
+      <el-tab-pane :label="$t('settings.emojiPacks')">
+        <emoji-packs/>
+      </el-tab-pane>
       <el-tab-pane :label="$t('settings.frontend')">
         <frontend/>
       </el-tab-pane>
@@ -71,9 +74,10 @@
 
 <script>
 import { ActivityPub, Authentication, AutoLinker, Captcha, Database, Endpoint, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Upload, WebPush } from './components'
+import EmojiPacks from '../emojiPacks/index'
 
 export default {
-  components: { ActivityPub, Authentication, AutoLinker, Captcha, Database, Endpoint, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Upload, WebPush },
+  components: { ActivityPub, Authentication, AutoLinker, Captcha, Database, Endpoint, EmojiPacks, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Upload, WebPush },
   computed: {
     isMobile() {
       return this.$store.state.app.device === 'mobile'

From 30a1a25ff78aeceaab3d29f6746c50041bd739f8 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 5 Oct 2019 15:11:19 +0300
Subject: [PATCH 03/25] Improve interface for Emoji packs

---
 src/lang/en.js                 |  12 ++-
 src/views/emojiPacks/index.vue | 175 +++++++++++++++------------------
 2 files changed, 89 insertions(+), 98 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index fd23f379..c7903c68 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -313,7 +313,17 @@ export default {
     database: 'Database',
     other: 'Other',
     success: 'Settings changed successfully!',
-    emojiPacks: 'Emoji packs'
+    emojiPacks: 'Emoji packs',
+    reloadEmoji: 'Reload emoji',
+    importPacks: 'Import packs from the server filesystem',
+    importEmojiTooltip: 'Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither',
+    localPacks: 'Local packs',
+    refreshLocalPacks: 'Refresh local packs',
+    createLocalPack: 'Create a new local pack',
+    packs: 'Packs',
+    remotePacks: 'Remote packs',
+    remoteInstanceAddress: 'Remote instance address',
+    refreshRemote: 'Refresh remote packs'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 642f6ef8..c798f8b5 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -1,123 +1,89 @@
 <template>
-  <el-container class="emoji-packs-container">
-    <el-header>
-      <h1>
-        Emoji packs
-      </h1>
-    </el-header>
-
-    <el-row class="local-packs-actions">
-      <el-button type="primary" @click="reloadEmoji">
-        Reload emoji
-      </el-button>
-
-      <el-tooltip effects="dark" content="Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither" placement="bottom">
-        <el-button type="success" @click="importFromFS">
-          Import packs from the server filesystem
+  <div>
+    <div class="button-container">
+      <el-button type="primary" @click="reloadEmoji">{{ $t('settings.reloadEmoji') }}</el-button>
+      <el-tooltip :content="$t('settings.importEmojiTooltip')" effects="dark" placement="bottom">
+        <el-button type="primary" @click="importFromFS">
+          {{ $t('settings.importPacks') }}
         </el-button>
       </el-tooltip>
-    </el-row>
-
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="Local packs" name="local">
-        <div>
-          Local packs can be viewed and downloaded for backup here.
-        </div>
-
-        <div class="local-packs-actions">
-          <el-popover
-            v-model="createNewPackVisible"
-            placement="bottom"
-            trigger="click">
-
-            <el-input v-model="newPackName" placeholder="Name" />
-            <el-button
-              :disabled="newPackName.trim() === ''"
-              class="create-pack-button"
-              type="success"
-              @click="createLocalPack" >
-              Create
-            </el-button>
-
-            <el-button slot="reference" type="success">
-              Create a new local pack
-            </el-button>
-          </el-popover>
-
-          <el-button type="primary" @click="refreshLocalPacks">
-            Refresh local packs
+    </div>
+    <div class="line"/>
+    <el-form :label-width="labelWidth">
+      <el-form-item :label="$t('settings.localPacks')">
+        <el-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button>
+      </el-form-item>
+      <el-form-item :label="$t('settings.createLocalPack')">
+        <div class="create-pack">
+          <el-input v-model="newPackName" :placeholder="$t('users.name')" />
+          <el-button
+            :disabled="newPackName.trim() === ''"
+            class="create-pack-button"
+            @click="createLocalPack">
+            {{ $t('users.create') }}
           </el-button>
         </div>
-
-        <div v-for="(pack, name) in $store.state.emojiPacks.localPacks" :key="name">
+      </el-form-item>
+      <el-form-item v-if="localPacks.length > 0" :label="$t('settings.packs')">
+        <div v-for="(pack, name) in localPacks" :key="name">
           <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
           <el-divider />
         </div>
-      </el-tab-pane>
-
-      <el-tab-pane label="Remote packs" name="remote">
-        <el-input
-          v-model="remoteInstanceAddress"
-          class="remote-instance-input"
-          placeholder="Remote instance address" />
-        <el-button type="primary" @click="refreshRemotePacks">
-          Refresh remote packs
-        </el-button>
-
-        <div v-for="(pack, name) in $store.state.emojiPacks.remotePacks" :key="name">
-          <emoji-pack :name="name" :pack="pack" :host="remoteInstanceAddress" :is-local="false" />
+      </el-form-item>
+      <div class="line"/>
+      <el-form-item :label="$t('settings.remotePacks')">
+        <div class="create-pack">
+          <el-input
+            v-model="remoteInstanceAddress"
+            :placeholder="$t('settings.remoteInstanceAddress')" />
+          <el-button
+            :disabled="remoteInstanceAddress.trim() === ''"
+            class="create-pack-button"
+            @click="refreshRemotePacks">
+            {{ $t('settings.refreshRemote') }}
+          </el-button>
+        </div>
+      </el-form-item>
+      <el-form-item v-if="remotePacks.length > 0" :label="$t('settings.packs')">
+        <div v-for="(pack, name) in remotePacks" :key="name">
+          <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
           <el-divider />
         </div>
-
-      </el-tab-pane>
-    </el-tabs>
-  </el-container>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
-<style>
-  .emoji-packs-container {
-    margin: 22px 0 0 15px;
-  }
-
-  .local-packs-actions {
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-
-  .remote-instance-input {
-    max-width: 10%;
-  }
-
-  .create-pack-button {
-    margin-top: 1em;
-  }
-</style>
-
 <script>
 import EmojiPack from './components/EmojiPack'
 
 export default {
   components: { EmojiPack },
-
   data() {
     return {
-      activeName: 'local',
       remoteInstanceAddress: '',
-      downloadFromState: null,
-
-      newPackName: '',
-      createNewPackVisible: false
+      newPackName: ''
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    labelWidth() {
+      return this.isMobile ? '100px' : '210px'
+    },
+    localPacks() {
+      return this.$store.state.emojiPacks.localPacks
+    },
+    remotePacks() {
+      return this.$store.state.emojiPacks.remotePacks
     }
   },
-
   mounted() {
     this.refreshLocalPacks()
   },
-
   methods: {
     createLocalPack() {
-      this.createNewPackVisible = false
-
       this.$store.dispatch('CreatePack', { name: this.newPackName })
         .then(() => {
           this.newPackName = ''
@@ -126,19 +92,15 @@ export default {
           this.$store.dispatch('ReloadEmoji')
         })
     },
-
     refreshLocalPacks() {
       this.$store.dispatch('SetLocalEmojiPacks')
     },
-
     refreshRemotePacks() {
       this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress })
     },
-
     reloadEmoji() {
       this.$store.dispatch('ReloadEmoji')
     },
-
     importFromFS() {
       this.$store.dispatch('ImportFromFS')
         .then(() => {
@@ -149,3 +111,22 @@ export default {
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss'>
+.button-container {
+  margin: 0 0 22px 20px;
+}
+.create-pack {
+  display: flex;
+  justify-content: space-between
+}
+.create-pack-button {
+  margin-left: 10px;
+}
+.line {
+    width: 100%;
+    height: 0;
+    border: 1px solid #eee;
+    margin-bottom: 22px;
+  }
+</style>

From 932d20cfc6510fac049a4833e0e0f33096ebdf92 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 6 Oct 2019 02:17:50 +0300
Subject: [PATCH 04/25] Add form for entering or changing emoji pack metadata

---
 src/lang/en.js                                |   9 +-
 src/views/emojiPacks/components/EmojiPack.vue | 137 ++++++------------
 .../components/PropertyEditingRow.vue         |  27 ----
 src/views/emojiPacks/index.vue                |  18 +--
 4 files changed, 58 insertions(+), 133 deletions(-)
 delete mode 100644 src/views/emojiPacks/components/PropertyEditingRow.vue

diff --git a/src/lang/en.js b/src/lang/en.js
index c7903c68..a84a4ec3 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -323,7 +323,14 @@ export default {
     packs: 'Packs',
     remotePacks: 'Remote packs',
     remoteInstanceAddress: 'Remote instance address',
-    refreshRemote: 'Refresh remote packs'
+    refreshRemote: 'Refresh remote packs',
+    sharePack: 'Share pack',
+    homepage: 'Homepage',
+    description: 'Description',
+    license: 'License',
+    fallbackSrc: 'Fallback source',
+    fallbackSrcSha: 'Fallback source SHA',
+    savePackMetadata: 'Save pack metadata'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index d29ea9b2..71708ee3 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,111 +1,56 @@
 <template>
-  <div>
-    <h2>{{ name }}</h2>
-
-    <prop-editing-row name="Share pack">
-      <el-switch v-model="share" :disabled="!isLocal" />
-    </prop-editing-row>
-    <prop-editing-row name="Homepage">
-      <el-input v-if="isLocal" v-model="homepage" />
-      <el-input v-else :value="homepage" />
-    </prop-editing-row>
-    <prop-editing-row name="Description">
-      <el-input v-if="isLocal" :rows="2" v-model="description" type="textarea" />
-      <el-input v-else :rows="2" :value="description" type="textarea" />
-    </prop-editing-row>
-    <prop-editing-row name="License">
-      <el-input v-if="isLocal" v-model="license" />
-      <el-input v-else :value="license" />
-    </prop-editing-row>
-    <prop-editing-row name="Fallback source">
-      <el-input v-if="isLocal" v-model="fallbackSrc" />
-      <el-input v-else :value="fallbackSrc" />
-    </prop-editing-row>
-
-    <prop-editing-row v-if="fallbackSrc && fallbackSrc.trim() !== ''" name="Fallback source SHA">
-      {{ pack.pack["fallback-src-sha256"] }}
-    </prop-editing-row>
-
-    <el-button v-if="isLocal" type="success" @click="savePackMetadata">Save pack metadata</el-button>
-
-    <el-collapse v-model="shownPackEmoji" class="contents-collapse">
-      <el-collapse-item :name="name" title="Show pack contents">
-        <new-emoji-uploader v-if="isLocal" :pack-name="name" class="new-emoji-uploader" />
-
-        <h4>Manage existing emoji</h4>
-
-        <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>
-
-    <div v-if="!isLocal" class="shared-pack-dl-box">
-      <div>
-        This will download the "{{ name }}" pack to the current instance under the name
-        "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" (can be changed below).
-        It will then be usable and shareable from the current instance.
-      </div>
-
-      <el-button type="primary" @click="downloadFromInstance">
-        Download shared pack to current instance
-      </el-button>
-
-      <el-input v-model="downloadSharedAs" class="dl-as-input" placeholder="Download as (optional)" />
-    </div>
-
-    <el-link
-      v-if="pack.pack['can-download']"
-      :href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`"
-      type="primary"
-      target="_blank">
-      Download pack archive
-    </el-link>
-
-    <div v-if="isLocal" class="pack-actions">
-      <el-button type="danger" @click="deletePack">
-        Delete the local pack
-      </el-button>
-    </div>
-  </div>
+  <el-collapse-item :title="name" :name="name">
+    <el-form label-width="120px" size="small">
+      <el-form-item :label="$t('settings.sharePack')">
+        <el-switch v-model="share" :disabled="!isLocal" />
+      </el-form-item>
+      <el-form-item :label="$t('settings.homepage')">
+        <el-input v-if="isLocal" v-model="homepage" />
+        <el-input v-else :value="homepage" />
+      </el-form-item>
+      <el-form-item :label="$t('settings.description')">
+        <el-input v-if="isLocal" v-model="description" type="textarea" />
+        <el-input v-else :value="description" type="textarea" />
+      </el-form-item>
+      <el-form-item :label="$t('settings.license')">
+        <el-input v-if="isLocal" v-model="license" />
+        <el-input v-else :value="license" />
+      </el-form-item>
+      <el-form-item :label="$t('settings.fallbackSrc')">
+        <el-input v-if="isLocal" v-model="fallbackSrc" />
+        <el-input v-else :value="fallbackSrc" />
+      </el-form-item>
+      <el-form-item
+        v-if="fallbackSrc && fallbackSrc.trim() !== ''"
+        :label="$t('settings.fallbackSrcSha')">
+        {{ pack.pack["fallback-src-sha256"] }}
+      </el-form-item>
+      <el-form-item class="save-pack-button">
+        <el-button v-if="isLocal" type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </el-collapse-item>
 </template>
 
 <style>
-  .shared-pack-dl-box {
-    margin: 1em;
-  }
-
-  .dl-as-input {
-    margin: 1em;
-    max-width: 30%;
-  }
-
-  .contents-collapse {
-    margin: 1em;
-  }
-
-  .pack-actions {
-    margin-top: 1em;
-  }
-
-  .new-emoji-uploader {
-    margin-bottom: 3em;
-  }
+.el-collapse-item__content {
+  padding-bottom: 0;
+}
+.el-collapse-item__header {
+  height: 36px;
+}
+.emoji-pack-card {
+  margin-top: 5px;
+}
 </style>
 
 <script>
-import PropEditingRow from './PropertyEditingRow.vue'
 import SingleEmojiEditor from './SingleEmojiEditor.vue'
 import NewEmojiUploader from './NewEmojiUploader.vue'
 
 export default {
 
-  components: { PropEditingRow, SingleEmojiEditor, NewEmojiUploader },
+  components: { SingleEmojiEditor, NewEmojiUploader },
   props: {
     name: {
       type: String,
diff --git a/src/views/emojiPacks/components/PropertyEditingRow.vue b/src/views/emojiPacks/components/PropertyEditingRow.vue
deleted file mode 100644
index 8696e06a..00000000
--- a/src/views/emojiPacks/components/PropertyEditingRow.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <el-row :gutter="20" class="prop-row">
-    <el-col :span="4">
-      <b>{{ name }}</b>
-    </el-col>
-    <el-col :span="10">
-      <slot/>
-    </el-col>
-  </el-row>
-</template>
-
-<style>
-  .prop-row {
-    margin-bottom: 1em;
-  }
-</style>
-
-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index c798f8b5..41854e70 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -24,11 +24,10 @@
           </el-button>
         </div>
       </el-form-item>
-      <el-form-item v-if="localPacks.length > 0" :label="$t('settings.packs')">
-        <div v-for="(pack, name) in localPacks" :key="name">
+      <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('settings.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" />
-          <el-divider />
-        </div>
+        </el-collapse>
       </el-form-item>
       <div class="line"/>
       <el-form-item :label="$t('settings.remotePacks')">
@@ -44,11 +43,10 @@
           </el-button>
         </div>
       </el-form-item>
-      <el-form-item v-if="remotePacks.length > 0" :label="$t('settings.packs')">
-        <div v-for="(pack, name) in remotePacks" :key="name">
+      <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('settings.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="true" />
-          <el-divider />
-        </div>
+        </el-collapse>
       </el-form-item>
     </el-form>
   </div>
@@ -62,7 +60,9 @@ export default {
   data() {
     return {
       remoteInstanceAddress: '',
-      newPackName: ''
+      newPackName: '',
+      activeLocalPack: '',
+      activeRemotePack: ''
     }
   },
   computed: {

From 9bc103042b4c515ce0b73dfba0f68b70b35c2ae0 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 7 Oct 2019 03:09:53 +0300
Subject: [PATCH 05/25] Add form for uploading new emoji

---
 src/lang/en.js                                |  11 +-
 src/views/emojiPacks/components/EmojiPack.vue |  12 +-
 .../components/NewEmojiUploader.vue           | 129 +++++++++---------
 src/views/emojiPacks/index.vue                |   4 +-
 4 files changed, 85 insertions(+), 71 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index a84a4ec3..1250f0df 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -330,7 +330,16 @@ export default {
     license: 'License',
     fallbackSrc: 'Fallback source',
     fallbackSrcSha: 'Fallback source SHA',
-    savePackMetadata: 'Save pack metadata'
+    savePackMetadata: 'Save pack metadata',
+    addNewEmoji: 'Add new emoji to the pack',
+    shortcode: 'Shortcode',
+    uploadFile: 'Upload a file',
+    customFilename: 'Custom filename',
+    optional: 'optional',
+    customFilenameDesc: 'Custom file name (optional)',
+    url: 'URL',
+    required: 'required',
+    clickToUpload: 'Click to upload'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index 71708ee3..5003a61c 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,6 +1,6 @@
 <template>
   <el-collapse-item :title="name" :name="name">
-    <el-form label-width="120px" size="small">
+    <el-form label-width="120px" label-position="left" size="small">
       <el-form-item :label="$t('settings.sharePack')">
         <el-switch v-model="share" :disabled="!isLocal" />
       </el-form-item>
@@ -29,6 +29,11 @@
         <el-button v-if="isLocal" type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button>
       </el-form-item>
     </el-form>
+    <el-collapse v-model="showPackContent" class="contents-collapse">
+      <el-collapse-item :name="name" title="Show pack contents">
+        <new-emoji-uploader v-if="isLocal" :pack-name="name"/>
+      </el-collapse-item>
+    </el-collapse>
   </el-collapse-item>
 </template>
 
@@ -38,6 +43,9 @@
 }
 .el-collapse-item__header {
   height: 36px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #606266;
 }
 .emoji-pack-card {
   margin-top: 5px;
@@ -72,7 +80,7 @@ export default {
 
   data() {
     return {
-      shownPackEmoji: [],
+      showPackContent: [],
       downloadSharedAs: ''
     }
   },
diff --git a/src/views/emojiPacks/components/NewEmojiUploader.vue b/src/views/emojiPacks/components/NewEmojiUploader.vue
index d62011de..0770e332 100644
--- a/src/views/emojiPacks/components/NewEmojiUploader.vue
+++ b/src/views/emojiPacks/components/NewEmojiUploader.vue
@@ -1,49 +1,53 @@
 <template>
-  <div>
-    <h4>Add new emoji to the pack</h4>
-
-    <el-row :gutter="20">
-      <el-col :span="4" class="new-emoji-col">
-        <el-input v-model="shortcode" placeholder="Shortcode" />
-      </el-col>
-
-      <el-col :span="8">
-        <div>
-          <h5>Upload a file</h5>
-        </div>
-        File name
-        <el-input v-model="customFileName" size="mini" placeholder="Custom file name (optional)"/>
-        <input ref="fileUpload" type="file" accept="image/*" >
-
-        <div class="or">
-          or
-        </div>
-
-        <div>
-          <h5>Enter a URL</h5>
-        </div>
-        <el-input v-model="imageUploadURL" placeholder="Image URL" />
-
-        <small>
-          (If both are filled, the file is used)
-        </small>
-      </el-col>
-
-      <el-col :span="4" class="new-emoji-col">
-        <el-button :disabled="shortcode.trim() == ''" @click="upload">Upload</el-button>
-      </el-col>
-    </el-row>
-  </div>
+  <el-form label-width="130px" label-position="left" size="small">
+    <div class="add-new-emoji">{{ $t('settings.addNewEmoji') }}</div>
+    <el-form-item :label="$t('settings.shortcode')">
+      <el-input v-model="shortcode" :placeholder="$t('settings.required')"/>
+    </el-form-item>
+    <el-form-item :label="$t('settings.customFilename')">
+      <el-input v-model="customFileName" :placeholder="$t('settings.optional')"/>
+    </el-form-item>
+    <el-form-item :label="$t('settings.uploadFile')">
+      <!-- <div class="upload-file-url">
+        <el-input v-model="imageUploadURL" :placeholder="$t('settings.url')"/>
+        <el-button :disabled="shortcodePresent" class="upload-button" @click="uploadEmoji">{{ $t('settings.upload') }}</el-button>
+      </div>
+      <div class="upload-container">
+        <p class="text">or</p>-->
+      <el-upload
+        :http-request="uploadEmoji"
+        :multiple="false"
+        :show-file-list="false"
+        action="add">
+        <el-button :disabled="shortcodePresent" type="primary">{{ $t('settings.clickToUpload') }}</el-button>
+      </el-upload>
+      <!-- </div> -->
+    </el-form-item>
+  </el-form>
 </template>
 
 <style>
-  .new-emoji-col {
-    margin-top: 8em;
-  }
-
-  .or {
-    margin: 1em;
-  }
+.add-new-emoji {
+  height: 36px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #606266;
+}
+.text {
+  line-height: 20px;
+  margin-right: 15px
+}
+.upload-container {
+  display: flex;
+  align-items: baseline;
+}
+.upload-button {
+  margin-left: 10px;
+}
+.upload-file-url {
+  display: flex;
+  justify-content: space-between
+}
 </style>
 
 <script>
@@ -54,7 +58,6 @@ export default {
       required: true
     }
   },
-
   data() {
     return {
       shortcode: '',
@@ -62,31 +65,25 @@ export default {
       customFileName: ''
     }
   },
-
+  computed: {
+    shortcodePresent() {
+      return this.shortcode.trim() === ''
+    }
+  },
   methods: {
-    upload() {
-      let file = null
+    uploadEmoji({ file }) {
+      this.$store.dispatch('UpdateAndSavePackFile', {
+        action: 'add',
+        packName: this.packName,
+        shortcode: this.shortcode,
+        file,
+        fileName: this.customFileName
+      }).then(() => {
+        this.shortcode = ''
+        this.imageUploadURL = ''
 
-      if (this.$refs.fileUpload.files.length > 0) {
-        file = this.$refs.fileUpload.files[0]
-      } else if (this.imageUploadURL.trim() !== '') {
-        file = this.imageUploadURL
-      }
-
-      if (file !== null) {
-        this.$store.dispatch('UpdateAndSavePackFile', {
-          action: 'add',
-          packName: this.packName,
-          shortcode: this.shortcode,
-          file: file,
-          fileName: this.customFileName
-        }).then(() => {
-          this.shortcode = ''
-          this.imageUploadURL = ''
-
-          this.$store.dispatch('ReloadEmoji')
-        })
-      }
+        this.$store.dispatch('ReloadEmoji')
+      })
     }
   }
 }
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 41854e70..6a8c7f31 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -61,8 +61,8 @@ export default {
     return {
       remoteInstanceAddress: '',
       newPackName: '',
-      activeLocalPack: '',
-      activeRemotePack: ''
+      activeLocalPack: [],
+      activeRemotePack: []
     }
   },
   computed: {

From 12e836ff26f4e6e57ba16c9d02be18ec29e8b361 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 8 Oct 2019 03:08:14 +0300
Subject: [PATCH 06/25] Rework managing emojis

---
 src/lang/en.js                                |  15 +-
 src/views/emojiPacks/components/EmojiPack.vue |  12 +-
 .../components/NewEmojiUploader.vue           |   1 -
 .../components/SingleEmojiEditor.vue          | 133 +++++++++---------
 4 files changed, 94 insertions(+), 67 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 1250f0df..e501cfe3 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -339,7 +339,20 @@ export default {
     customFilenameDesc: 'Custom file name (optional)',
     url: 'URL',
     required: 'required',
-    clickToUpload: 'Click to upload'
+    clickToUpload: 'Click to upload',
+    showPackContents: 'Show pack contents',
+    manageEmoji: 'Manage existing emoji',
+    file: 'File',
+    update: 'Update',
+    remove: 'Remove',
+    selectLocalPack: 'Select the local pack to copy to',
+    localPack: 'Local pack',
+    specifyShortcode: 'Specify a custom shortcode',
+    specifyFilename: 'Specify a custom filename',
+    leaveEmptyShortcode: 'leave empty to use the same shortcode',
+    leaveEmptyFilename: 'leave empty to use the same filename',
+    copy: 'Copy',
+    copyToLocalPack: 'Copy to local pack'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index 5003a61c..9094e12f 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -30,9 +30,19 @@
       </el-form-item>
     </el-form>
     <el-collapse v-model="showPackContent" class="contents-collapse">
-      <el-collapse-item :name="name" title="Show pack contents">
+      <el-collapse-item :title="$t('settings.addNewEmoji')" name="addEmoji">
         <new-emoji-uploader v-if="isLocal" :pack-name="name"/>
       </el-collapse-item>
+      <el-collapse-item :title="$t('settings.manageEmoji')" name="manageEmoji">
+        <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>
diff --git a/src/views/emojiPacks/components/NewEmojiUploader.vue b/src/views/emojiPacks/components/NewEmojiUploader.vue
index 0770e332..4bb8b441 100644
--- a/src/views/emojiPacks/components/NewEmojiUploader.vue
+++ b/src/views/emojiPacks/components/NewEmojiUploader.vue
@@ -1,6 +1,5 @@
 <template>
   <el-form label-width="130px" label-position="left" size="small">
-    <div class="add-new-emoji">{{ $t('settings.addNewEmoji') }}</div>
     <el-form-item :label="$t('settings.shortcode')">
       <el-input v-model="shortcode" :placeholder="$t('settings.required')"/>
     </el-form-item>
diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index 17eddb73..39df6bf8 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -1,71 +1,50 @@
 <template>
-  <el-row :gutter="20">
-    <el-col :span="4">
-      <el-input v-if="isLocal" v-model="modifyingName" placeholder="Name/Shortcode" />
-      <el-input v-else :value="modifyingName" placeholder="Name/Shortcode" />
-    </el-col>
-    <el-col :span="6">
-      <el-input v-if="isLocal" v-model="modifyingFile" placeholder="File"/>
-      <el-input v-else :value="modifyingFile" placeholder="File"/>
-    </el-col>
+  <div>
+    <div v-if="isLocal" class="emoji-container">
+      <img
+        :src="addressOfEmojiInPack(host, packName, file)"
+        class="emoji-preview-img">
+      <el-input v-model="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
+      <el-input v-model="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
+      <div class="emoji-buttons">
+        <el-button type="primary" class="emoji-button" @click="update">{{ $t('settings.update') }}</el-button>
+        <el-button class="emoji-button" @click="remove">{{ $t('settings.remove') }}</el-button>
+      </div>
+    </div>
 
-    <el-col v-if="isLocal" :span="2">
-      <el-button type="primary" @click="update">Update</el-button>
-    </el-col>
-    <el-col v-if="isLocal" :span="2">
-      <el-button type="danger" @click="remove">Remove</el-button>
-    </el-col>
-
-    <el-col v-if="!isLocal" :span="4">
-      <el-popover v-model="copyToLocalVisible" placement="bottom">
-        <p>Select the local pack to copy to</p>
-        <el-select v-model="copyToLocalPackName" placeholder="Local pack">
+    <div v-if="!isLocal" class="emoji-container">
+      <img
+        :src="addressOfEmojiInPack(host, packName, file)"
+        class="emoji-preview-img">
+      <el-input :value="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
+      <el-input :value="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
+      <el-popover v-model="copyPopoverVisible" placement="left-start" popper-class="copy-popover">
+        <p>{{ $t('settings.selectLocalPack') }}</p>
+        <el-select v-model="copyToLocalPackName" :placeholder="$t('settings.localPack')">
           <el-option
-            v-for="(_pack, name) in $store.state.emojiPacks.localPacks"
+            v-for="(_pack, name) in localPacks"
             :key="name"
             :label="name"
             :value="name" />
         </el-select>
-
-        <p>Specify a custom shortcode (leave empty to use the same shortcode)</p>
-        <el-input v-model="copyToShortcode" placeholder="Shortcode (optional)" />
-
-        <p>Specify a custom filename (leavy empty to use the same filename)</p>
-        <el-input v-model="copyToFilename" placeholder="Filename (optional)" />
-
+        <p>{{ $t('settings.specifyShortcode') }}</p>
+        <el-input v-model="copyToShortcode" :placeholder="$t('settings.leaveEmptyShortcode')"/>
+        <p>{{ $t('settings.specifyFilename') }}</p>
+        <el-input v-model="copyToFilename" :placeholder="$t('settings.leaveEmptyFilename')"/>
         <el-button
           :disabled="!copyToLocalPackName"
-          type="success"
+          type="primary"
           class="copy-to-local-button"
-          @click="copyToLocal">Copy</el-button>
-
-        <el-button slot="reference" type="primary">Copy to local pack...</el-button>
+          @click="copyToLocal">{{ $t('settings.copy') }}</el-button>
+        <el-button slot="reference" type="primary" class="emoji-button">{{ $t('settings.copyToLocalPack') }}</el-button>
       </el-popover>
-    </el-col>
-
-    <el-col :span="2">
-      <img
-        :src="addressOfEmojiInPack(host, packName, file)"
-        class="emoji-preview-img">
-    </el-col>
-  </el-row>
+    </div>
+  </div>
 </template>
 
-<style>
-  .emoji-preview-img {
-    max-width: 5em;
-  }
-
-  .copy-to-local-button {
-    margin-top: 2em;
-    float: right;
-  }
-</style>
-
 <script>
 
 import { addressOfEmojiInPack } from '@/api/emojiPacks'
-
 export default {
   props: {
     host: {
@@ -89,33 +68,33 @@ export default {
       required: true
     }
   },
-
   data() {
     return {
       newName: null,
       newFile: null,
-
       copyToLocalPackName: null,
-      copyToLocalVisible: false,
+      copyPopoverVisible: false,
       copyToShortcode: '',
       copyToFilename: ''
     }
   },
-
   computed: {
-    modifyingName: {
+    emojiName: {
       get() {
-        // Return a modified name if it was actually modified, otherwise return the old name
+        // Return a modified name if it was modified, otherwise return the old name
         return this.newName !== null ? this.newName : this.name
       },
       set(val) { this.newName = val }
     },
-    modifyingFile: {
+    emojiFile: {
       get() {
-        // Return a modified name if it was actually modified, otherwise return the old name
+        // Return a modified name if it was modified, otherwise return the old name
         return this.newFile !== null ? this.newFile : this.file
       },
       set(val) { this.newFile = val }
+    },
+    localPacks() {
+      return this.$store.state.emojiPacks.localPacks
     }
   },
   methods: {
@@ -124,8 +103,8 @@ export default {
         action: 'update',
         packName: this.packName,
         oldName: this.name,
-        newName: this.modifyingName,
-        newFilename: this.modifyingFile
+        newName: this.emojiName,
+        newFilename: this.emojiFile
       }).then(() => {
         this.newName = null
         this.newFile = null
@@ -151,7 +130,6 @@ export default {
         })
       })
     },
-
     copyToLocal() {
       this.$store.dispatch('UpdateAndSavePackFile', {
         action: 'add',
@@ -168,8 +146,35 @@ export default {
         this.$store.dispatch('ReloadEmoji')
       })
     },
-
     addressOfEmojiInPack
   }
 }
 </script>
+
+<style>
+.copy-popover {
+  width: 330px
+}
+.emoji-button {
+  margin-left: 10px
+}
+.emoji-buttons {
+  min-width: 210px
+}
+.emoji-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.emoji-preview-img {
+  max-width: 5em;
+}
+.emoji-info {
+  margin-left: 10px
+}
+.copy-to-local-button {
+  margin-top: 12px;
+  float: right;
+}
+</style>

From d74bdecc32d622e45a1436dd0fe019da6d25625f Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 9 Oct 2019 18:24:27 +0300
Subject: [PATCH 07/25] Add ability to delete pack, download an archive and
 download a pack

---
 src/lang/en.js                                | 11 ++-
 src/views/emojiPacks/components/EmojiPack.vue | 77 ++++++++++++++-----
 2 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index e501cfe3..46b4b641 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -352,7 +352,16 @@ export default {
     leaveEmptyShortcode: 'leave empty to use the same shortcode',
     leaveEmptyFilename: 'leave empty to use the same filename',
     copy: 'Copy',
-    copyToLocalPack: 'Copy to local pack'
+    copyToLocalPack: 'Copy to local pack',
+    thisWillDownload: 'This will download the',
+    downloadToCurrentInstance: 'pack to the current instance under the name',
+    canBeChanged: 'can be changed below',
+    willBeUsable: 'It will then be usable and shareable from the current instance',
+    downloadPack: 'Download pack',
+    deletePack: 'Delete pack',
+    downloadSharedPack: 'Download shared pack to current instance',
+    downloadAsOptional: 'Download as (optional)',
+    downloadPackArchive: 'Download pack archive'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index 9094e12f..3f819de8 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -25,15 +25,26 @@
         :label="$t('settings.fallbackSrcSha')">
         {{ pack.pack["fallback-src-sha256"] }}
       </el-form-item>
-      <el-form-item class="save-pack-button">
-        <el-button v-if="isLocal" type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button>
+      <el-form-item v-if="isLocal" class="save-pack-button">
+        <el-button type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button>
+        <el-button @click="deletePack">{{ $t('settings.deletePack') }}</el-button>
+      </el-form-item>
+      <el-form-item>
+        <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('settings.downloadPackArchive') }}</el-button>
+        </el-link>
       </el-form-item>
     </el-form>
     <el-collapse v-model="showPackContent" class="contents-collapse">
-      <el-collapse-item :title="$t('settings.addNewEmoji')" name="addEmoji">
-        <new-emoji-uploader v-if="isLocal" :pack-name="name"/>
+      <el-collapse-item v-if="isLocal" :title="$t('settings.addNewEmoji')" name="addEmoji">
+        <new-emoji-uploader :pack-name="name"/>
       </el-collapse-item>
-      <el-collapse-item :title="$t('settings.manageEmoji')" name="manageEmoji">
+      <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title="$t('settings.manageEmoji')" name="manageEmoji">
         <single-emoji-editor
           v-for="(file, ename) in pack.files"
           :key="ename"
@@ -43,25 +54,23 @@
           :file="file"
           :is-local="isLocal" />
       </el-collapse-item>
+      <el-collapse-item v-if="!isLocal" :title="$t('settings.downloadPack')" name="downloadPack">
+        <p>
+          {{ $t('settings.thisWillDownload') }} "{{ name }}" {{ $t('settings.downloadToCurrentInstance') }}
+          "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('settings.canBeChanged') }}).
+          {{ $t('settings.willBeUsable') }}.
+        </p>
+        <div class="download-shared-pack">
+          <el-input v-model="downloadSharedAs" :placeholder="$t('settings.downloadAsOptional')"/>
+          <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance">
+            {{ $t('settings.downloadSharedPack') }}
+          </el-button>
+        </div>
+      </el-collapse-item>
     </el-collapse>
   </el-collapse-item>
 </template>
 
-<style>
-.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;
-}
-</style>
-
 <script>
 import SingleEmojiEditor from './SingleEmojiEditor.vue'
 import NewEmojiUploader from './NewEmojiUploader.vue'
@@ -179,3 +188,31 @@ export default {
   }
 }
 </script>
+
+<style>
+.download-archive {
+  width: 250px
+}
+.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;
+}
+.save-pack-button {
+  margin-bottom: 5px
+}
+</style>

From 117c3ca644de05f936c09e1b288ec3f597e02449 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 10 Oct 2019 04:01:31 +0300
Subject: [PATCH 08/25] Add background for collapse headers

---
 src/views/emojiPacks/components/EmojiPack.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index 3f819de8..a04ea5d1 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-collapse-item :title="name" :name="name">
+  <el-collapse-item :title="name" :name="name" class="has-background">
     <el-form label-width="120px" label-position="left" size="small">
       <el-form-item :label="$t('settings.sharePack')">
         <el-switch v-model="share" :disabled="!isLocal" />
@@ -41,10 +41,10 @@
       </el-form-item>
     </el-form>
     <el-collapse v-model="showPackContent" class="contents-collapse">
-      <el-collapse-item v-if="isLocal" :title="$t('settings.addNewEmoji')" name="addEmoji">
+      <el-collapse-item v-if="isLocal" :title="$t('settings.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('settings.manageEmoji')" name="manageEmoji">
+      <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title="$t('settings.manageEmoji')" name="manageEmoji" class="no-background">
         <single-emoji-editor
           v-for="(file, ename) in pack.files"
           :key="ename"
@@ -54,7 +54,7 @@
           :file="file"
           :is-local="isLocal" />
       </el-collapse-item>
-      <el-collapse-item v-if="!isLocal" :title="$t('settings.downloadPack')" name="downloadPack">
+      <el-collapse-item v-if="!isLocal" :title="$t('settings.downloadPack')" name="downloadPack" class="no-background">
         <p>
           {{ $t('settings.thisWillDownload') }} "{{ name }}" {{ $t('settings.downloadToCurrentInstance') }}
           "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('settings.canBeChanged') }}).
@@ -189,7 +189,7 @@ export default {
 }
 </script>
 
-<style>
+<style rel='stylesheet/scss' lang='scss'>
 .download-archive {
   width: 250px
 }
@@ -212,6 +212,12 @@ export default {
 .emoji-pack-card {
   margin-top: 5px;
 }
+.has-background .el-collapse-item__header {
+  background: #f6f6f6;
+}
+.no-background .el-collapse-item__header {
+  background: white;
+}
 .save-pack-button {
   margin-bottom: 5px
 }

From f0899ec2639dd5f3fc09bd4324c14bdde8fd8ec5 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 11 Oct 2019 02:49:16 +0300
Subject: [PATCH 09/25] Update api for AddRight and DeleteRight actions

---
 src/api/__mocks__/users.js |  2 +-
 src/api/users.js           | 14 ++++++++------
 src/store/modules/users.js | 24 ++++++++++++++++--------
 src/views/users/index.vue  |  4 +++-
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index 016772a7..07aca91e 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -48,7 +48,7 @@ export async function searchUsers(query, filters, authHost, token, page = 1) {
   }})
 }
 
-export async function addRight(nickname, right, authHost, token) {
+export async function addRight(nicknames, right, authHost, token) {
   return Promise.resolve({ data:
     { [`is_${right}`]: true }
   })
diff --git a/src/api/users.js b/src/api/users.js
index 1e97da92..9351cc45 100644
--- a/src/api/users.js
+++ b/src/api/users.js
@@ -2,12 +2,13 @@ import request from '@/utils/request'
 import { getToken } from '@/utils/auth'
 import { baseName } from './utils'
 
-export async function addRight(nickname, right, authHost, token) {
+export async function addRight(nicknames, right, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
-    url: `/api/pleroma/admin/users/${nickname}/permission_group/${right}`,
+    url: `/api/pleroma/admin/users/permission_group/${right}`,
     method: 'post',
-    headers: authHeaders(token)
+    headers: authHeaders(token),
+    data: { nicknames }
   })
 }
 
@@ -21,12 +22,13 @@ export async function createNewAccount(nickname, email, password, authHost, toke
   })
 }
 
-export async function deleteRight(nickname, right, authHost, token) {
+export async function deleteRight(nicknames, right, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
-    url: `/api/pleroma/admin/users/${nickname}/permission_group/${right}`,
+    url: `/api/pleroma/admin/users/permission_group/${right}`,
     method: 'delete',
-    headers: authHeaders(token)
+    headers: authHeaders(token),
+    data: { nicknames }
   })
 }
 
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index b3d35108..f087d930 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -76,6 +76,14 @@ const users = {
     }
   },
   actions: {
+    async AddRight({ dispatch, getters, state }, { users, right }) {
+      const usersNicknames = users.map(user => user.nickname)
+      await addRight(usersNicknames, right, getters.authHost, getters.token)
+
+      dispatch('FetchUsers', { page: state.currentPage })
+      // const updatedUser = { ...user, roles: { ...user.roles, [right]: !user.roles[right] }}
+      // commit('SWAP_USER', updatedUser)
+    },
     async AddTag({ commit, getters }, { users, tag }) {
       const nicknames = users.map(user => user.nickname)
       await tagUser(nicknames, [tag], getters.authHost, getters.token)
@@ -90,6 +98,14 @@ const users = {
       await createNewAccount(nickname, email, password, getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
     },
+    async DeleteRight({ dispatch, getters, state }, { users, right }) {
+      const usersNicknames = users.map(user => user.nickname)
+      await deleteRight(usersNicknames, right, getters.authHost, getters.token)
+
+      dispatch('FetchUsers', { page: state.currentPage })
+      // const updatedUser = { ...user, roles: { ...user.roles, [right]: !user.roles[right] }}
+      // commit('SWAP_USER', updatedUser)
+    },
     async DeleteUser({ commit, getters, state }, user) {
       const { data } = await deleteUser(user.nickname, getters.authHost, getters.token)
       const users = state.fetchedUsers.filter(user => user.nickname !== data)
@@ -146,14 +162,6 @@ const users = {
       const currentFilters = { ...defaultFilters, ...filters }
       commit('SET_USERS_FILTERS', currentFilters)
       dispatch('SearchUsers', { query: state.searchQuery, page: 1 })
-    },
-    async ToggleRight({ commit, getters }, { user, right }) {
-      user.roles[right]
-        ? await deleteRight(user.nickname, right, getters.authHost, getters.token)
-        : await addRight(user.nickname, right, getters.authHost, getters.token)
-
-      const updatedUser = { ...user, roles: { ...user.roles, [right]: !user.roles[right] }}
-      commit('SWAP_USER', updatedUser)
     }
   }
 }
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 062b23c8..cce607dd 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -308,7 +308,9 @@ export default {
         : this.$store.dispatch('AddTag', { users: [user], tag })
     },
     toggleUserRight(user, right) {
-      this.$store.dispatch('ToggleRight', { user, right })
+      user.roles[right]
+        ? this.$store.dispatch('DeleteRight', { users: [user], right })
+        : this.$store.dispatch('AddRight', { users: [user], right })
     }
   }
 }

From 77a153deac0c840ee25b0e12c046b546b90a91bf Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 11 Oct 2019 03:28:55 +0300
Subject: [PATCH 10/25] Update api for ActivateUsers and DeactivateUsers
 actions

---
 src/api/users.js                              | 29 +++++++++++++------
 src/store/modules/users.js                    | 15 ++++++----
 src/views/reports/components/TimelineItem.vue | 14 +++++----
 src/views/users/index.vue                     |  8 +++--
 4 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/api/users.js b/src/api/users.js
index 9351cc45..12e13e6f 100644
--- a/src/api/users.js
+++ b/src/api/users.js
@@ -2,6 +2,16 @@ import request from '@/utils/request'
 import { getToken } from '@/utils/auth'
 import { baseName } from './utils'
 
+export async function activateUsers(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/activate`,
+    method: 'patch',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
 export async function addRight(nicknames, right, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
@@ -22,6 +32,16 @@ export async function createNewAccount(nickname, email, password, authHost, toke
   })
 }
 
+export async function deactivateUsers(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/deactivate`,
+    method: 'patch',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
 export async function deleteRight(nicknames, right, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
@@ -96,15 +116,6 @@ export async function tagUser(nicknames, tags, authHost, token) {
   })
 }
 
-export async function toggleUserActivation(nickname, authHost, token) {
-  return await request({
-    baseURL: baseName(authHost),
-    url: `/api/pleroma/admin/users/${nickname}/toggle_activation`,
-    method: 'patch',
-    headers: authHeaders(token)
-  })
-}
-
 export async function untagUser(nicknames, tags, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index f087d930..f35ad9aa 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -1,13 +1,14 @@
 import {
+  activateUsers,
   addRight,
   createNewAccount,
+  deactivateUsers,
   deleteRight,
   deleteUser,
   fetchUsers,
   getPasswordResetToken,
   searchUsers,
   tagUser,
-  toggleUserActivation,
   untagUser,
   requirePasswordReset
 } from '@/api/users'
@@ -76,6 +77,10 @@ const users = {
     }
   },
   actions: {
+    async ActivateUsers({ commit, getters }, nicknames) {
+      const { data } = await activateUsers(nicknames, getters.authHost, getters.token)
+      commit('SWAP_USERS', data)
+    },
     async AddRight({ dispatch, getters, state }, { users, right }) {
       const usersNicknames = users.map(user => user.nickname)
       await addRight(usersNicknames, right, getters.authHost, getters.token)
@@ -98,6 +103,10 @@ const users = {
       await createNewAccount(nickname, email, password, getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
     },
+    async DeactivateUsers({ commit, getters }, nicknames) {
+      const { data } = await deactivateUsers(nicknames, getters.authHost, getters.token)
+      commit('SWAP_USERS', data)
+    },
     async DeleteRight({ dispatch, getters, state }, { users, right }) {
       const usersNicknames = users.map(user => user.nickname)
       await deleteRight(usersNicknames, right, getters.authHost, getters.token)
@@ -148,10 +157,6 @@ const users = {
         loadUsers(commit, page, response.data)
       }
     },
-    async ToggleUserActivation({ commit, getters }, nickname) {
-      const { data } = await toggleUserActivation(nickname, getters.authHost, getters.token)
-      commit('SWAP_USER', data)
-    },
     async ToggleUsersFilter({ commit, dispatch, state }, filters) {
       const defaultFilters = {
         local: false,
diff --git a/src/views/reports/components/TimelineItem.vue b/src/views/reports/components/TimelineItem.vue
index 771298aa..96433a22 100644
--- a/src/views/reports/components/TimelineItem.vue
+++ b/src/views/reports/components/TimelineItem.vue
@@ -21,7 +21,7 @@
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item
                 v-if="showDeactivatedButton(report.account)"
-                @click.native="handleDeactivation(report.account)">
+                @click.native="toggleActivation(report.account)">
                 {{ report.account.deactivated ? $t('users.activateAccount') : $t('users.deactivateAccount') }}
               </el-dropdown-item>
               <el-dropdown-item
@@ -139,17 +139,19 @@ export default {
           return 'primary'
       }
     },
+    handleDeletion(user) {
+      this.$store.dispatch('DeleteUser', user)
+    },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('L HH:mm')
     },
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
     },
-    handleDeactivation({ nickname }) {
-      this.$store.dispatch('ToggleUserActivation', nickname)
-    },
-    handleDeletion(user) {
-      this.$store.dispatch('DeleteUser', user)
+    toggleActivation({ deactivated, nickname }) {
+      deactivated
+        ? this.$store.dispatch('ActivateUsers', [nickname])
+        : this.$store.dispatch('DeactivateUsers', [nickname])
     },
     toggleTag(user, tag) {
       user.tags.includes(tag)
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index cce607dd..bd2cd7c4 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -80,7 +80,7 @@
               <el-dropdown-item
                 v-if="showDeactivatedButton(scope.row.id)"
                 :divided="showAdminAction(scope.row)"
-                @click.native="handleDeactivation(scope.row)">
+                @click.native="toggleActivation(scope.row)">
                 {{ scope.row.deactivated ? $t('users.activateAccount') : $t('users.deactivateAccount') }}
               </el-dropdown-item>
               <el-dropdown-item
@@ -275,8 +275,10 @@ export default {
 
       this.$store.dispatch('RequirePasswordReset', { nickname })
     },
-    handleDeactivation({ nickname }) {
-      this.$store.dispatch('ToggleUserActivation', nickname)
+    toggleActivation({ deactivated, nickname }) {
+      deactivated
+        ? this.$store.dispatch('ActivateUsers', [nickname])
+        : this.$store.dispatch('DeactivateUsers', [nickname])
     },
     handleDeletion(user) {
       this.$store.dispatch('DeleteUser', user)

From 42f73e6c7900d6490f488e0727b85d5d71983a97 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 12 Oct 2019 09:44:44 +0300
Subject: [PATCH 11/25] Pass users instead of nicknames to actions that toggle
 activation

---
 src/store/modules/users.js                    | 10 ++++++----
 src/views/reports/components/TimelineItem.vue |  8 ++++----
 src/views/users/index.vue                     |  8 ++++----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index f35ad9aa..b26024dc 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -77,8 +77,9 @@ const users = {
     }
   },
   actions: {
-    async ActivateUsers({ commit, getters }, nicknames) {
-      const { data } = await activateUsers(nicknames, getters.authHost, getters.token)
+    async ActivateUsers({ commit, getters }, users) {
+      const usersNicknames = users.map(user => user.nickname)
+      const { data } = await activateUsers(usersNicknames, getters.authHost, getters.token)
       commit('SWAP_USERS', data)
     },
     async AddRight({ dispatch, getters, state }, { users, right }) {
@@ -103,8 +104,9 @@ const users = {
       await createNewAccount(nickname, email, password, getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
     },
-    async DeactivateUsers({ commit, getters }, nicknames) {
-      const { data } = await deactivateUsers(nicknames, getters.authHost, getters.token)
+    async DeactivateUsers({ commit, getters }, users) {
+      const usersNicknames = users.map(user => user.nickname)
+      const { data } = await deactivateUsers(usersNicknames, getters.authHost, getters.token)
       commit('SWAP_USERS', data)
     },
     async DeleteRight({ dispatch, getters, state }, { users, right }) {
diff --git a/src/views/reports/components/TimelineItem.vue b/src/views/reports/components/TimelineItem.vue
index 96433a22..34336f79 100644
--- a/src/views/reports/components/TimelineItem.vue
+++ b/src/views/reports/components/TimelineItem.vue
@@ -148,10 +148,10 @@ export default {
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
     },
-    toggleActivation({ deactivated, nickname }) {
-      deactivated
-        ? this.$store.dispatch('ActivateUsers', [nickname])
-        : this.$store.dispatch('DeactivateUsers', [nickname])
+    toggleActivation(user) {
+      user.deactivated
+        ? this.$store.dispatch('ActivateUsers', [user])
+        : this.$store.dispatch('DeactivateUsers', [user])
     },
     toggleTag(user, tag) {
       user.tags.includes(tag)
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index bd2cd7c4..b5cf1251 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -275,10 +275,10 @@ export default {
 
       this.$store.dispatch('RequirePasswordReset', { nickname })
     },
-    toggleActivation({ deactivated, nickname }) {
-      deactivated
-        ? this.$store.dispatch('ActivateUsers', [nickname])
-        : this.$store.dispatch('DeactivateUsers', [nickname])
+    toggleActivation(user) {
+      user.deactivated
+        ? this.$store.dispatch('ActivateUsers', [user])
+        : this.$store.dispatch('DeactivateUsers', [user])
     },
     handleDeletion(user) {
       this.$store.dispatch('DeleteUser', user)

From d0025dfe7a4400a4fbd1a7203a0b70ac1a9896ea Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 12 Oct 2019 09:45:43 +0300
Subject: [PATCH 12/25] Update test mocks for api calls that toggle activation

---
 src/api/__mocks__/users.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index 07aca91e..f2e2103b 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -33,11 +33,6 @@ export async function getPasswordResetToken(nickname, authHost, token) {
   return Promise.resolve({ data: { token: 'g05lxnBJQnL', link: 'http://url/api/pleroma/password_reset/g05lxnBJQnL' }})
 }
 
-export async function toggleUserActivation(nickname, authHost, token) {
-  const response = users.find(user => user.nickname === nickname)
-  return Promise.resolve({ data: { ...response, deactivated: !response.deactivated }})
-}
-
 export async function searchUsers(query, filters, authHost, token, page = 1) {
   const filteredUsers = filterUsers(filters)
   const response = filteredUsers.filter(user => user.nickname === query)
@@ -48,12 +43,29 @@ export async function searchUsers(query, filters, authHost, token, page = 1) {
   }})
 }
 
+export async function activateUsers(nicknames, authHost, token) {
+  const response = nicknames.map(nickname => {
+    const currentUser = users.find(user => user.nickname === nickname)
+    return { ...currentUser, deactivated: false }
+  })
+  return Promise.resolve({ data: response })
+}
+
 export async function addRight(nicknames, right, authHost, token) {
+  console.log(nicknames)
   return Promise.resolve({ data:
     { [`is_${right}`]: true }
   })
 }
 
+export async function deactivateUsers(nicknames, authHost, token) {
+  const response = nicknames.map(nickname => {
+    const currentUser = users.find(user => user.nickname === nickname)
+    return { ...currentUser, deactivated: true }
+  })
+  return Promise.resolve({ data: response })
+}
+
 export async function deleteRight(nickname, right, authHost, token) {
   return Promise.resolve({ data:
     { [`is_${right}`]: false }

From 58573a7de8773c406e114633cd2b2f7bb5fc8be4 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 12 Oct 2019 09:53:02 +0300
Subject: [PATCH 13/25] Remove multiple calls of functions that moderate users

---
 .../users/components/MultipleUsersMenu.vue    | 82 ++++++++-----------
 1 file changed, 32 insertions(+), 50 deletions(-)

diff --git a/src/views/users/components/MultipleUsersMenu.vue b/src/views/users/components/MultipleUsersMenu.vue
index ecd2baf2..2c6f630c 100644
--- a/src/views/users/components/MultipleUsersMenu.vue
+++ b/src/views/users/components/MultipleUsersMenu.vue
@@ -150,87 +150,69 @@ export default {
   },
   methods: {
     mappers() {
-      const applyActionToAllUsers = (filteredUsers, fn) => Promise.all(filteredUsers.map(fn))
-        .then(() => {
-          this.$message({
-            type: 'success',
-            message: this.$t('users.completed')
-          })
-          this.$emit('apply-action')
-        }).catch((err) => {
+      const applyAction = (users, dispatchAction) => {
+        try {
+          dispatchAction(users)
+        } catch (err) {
           console.log(err)
           return
+        }
+        this.$message({
+          type: 'success',
+          message: this.$t('users.completed')
         })
+        this.$emit('apply-action')
+      }
       return {
         grantRight: (right) => () => {
           const filterUsersFn = user => user.local && !user.roles[right] && this.$store.state.user.id !== user.id
-          const toggleRightFn = async(user) => await this.$store.dispatch('ToggleRight', { user, right })
+          const addRightFn = async(users) => await this.$store.dispatch('AddRight', { users, right })
           const filtered = this.selectedUsers.filter(filterUsersFn)
 
-          applyActionToAllUsers(filtered, toggleRightFn)
+          applyAction(filtered, addRightFn)
         },
         revokeRight: (right) => () => {
           const filterUsersFn = user => user.local && user.roles[right] && this.$store.state.user.id !== user.id
-          const toggleRightFn = async(user) => await this.$store.dispatch('ToggleRight', { user, right })
+          const deleteRightFn = async(users) => await this.$store.dispatch('DeleteRight', { users, right })
           const filtered = this.selectedUsers.filter(filterUsersFn)
 
-          applyActionToAllUsers(filtered, toggleRightFn)
+          applyAction(filtered, deleteRightFn)
         },
         activate: () => {
           const filtered = this.selectedUsers.filter(user => user.deactivated && this.$store.state.user.id !== user.id)
-          const toggleActivationFn = async(user) => await this.$store.dispatch('ToggleUserActivation', user.nickname)
+          const activateUsersFn = async(users) => await this.$store.dispatch('ActivateUsers', users)
 
-          applyActionToAllUsers(filtered, toggleActivationFn)
+          applyAction(filtered, activateUsersFn)
         },
         deactivate: () => {
           const filtered = this.selectedUsers.filter(user => !user.deactivated && this.$store.state.user.id !== user.id)
-          const toggleActivationFn = async(user) => await this.$store.dispatch('ToggleUserActivation', user.nickname)
+          const deactivateUsersFn = async(users) => await this.$store.dispatch('DeactivateUsers', users)
 
-          applyActionToAllUsers(filtered, toggleActivationFn)
+          applyAction(filtered, deactivateUsersFn)
         },
         remove: () => {
           const filtered = this.selectedUsers.filter(user => this.$store.state.user.id !== user.id)
           const deleteAccountFn = async(user) => await this.$store.dispatch('DeleteUser', user)
 
-          applyActionToAllUsers(filtered, deleteAccountFn)
+          applyAction(filtered, deleteAccountFn)
         },
-        addTag: (tag) => async() => {
-          const filterUsersFn = user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-            ? user.local && !user.tags.includes(tag)
-            : !user.tags.includes(tag)
-          const users = this.selectedUsers.filter(filterUsersFn)
+        addTag: (tag) => () => {
+          const filtered = this.selectedUsers.filter(user =>
+            tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+              ? user.local && !user.tags.includes(tag)
+              : !user.tags.includes(tag))
+          const addTagFn = async(users) => await this.$store.dispatch('AddTag', { users, tag })
 
-          try {
-            await this.$store.dispatch('AddTag', { users, tag })
-          } catch (err) {
-            console.log(err)
-            return
-          }
-
-          this.$message({
-            type: 'success',
-            message: this.$t('users.completed')
-          })
-          this.$emit('apply-action')
+          applyAction(filtered, addTagFn)
         },
         removeTag: (tag) => async() => {
-          const filterUsersFn = user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-            ? user.local && user.tags.includes(tag)
-            : user.tags.includes(tag)
-          const users = this.selectedUsers.filter(filterUsersFn)
+          const filtered = this.selectedUsers.filter(user =>
+            tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+              ? user.local && user.tags.includes(tag)
+              : user.tags.includes(tag))
+          const removeTagFn = async(users) => await this.$store.dispatch('RemoveTag', { users, tag })
 
-          try {
-            await this.$store.dispatch('RemoveTag', { users, tag })
-          } catch (err) {
-            console.log(err)
-            return
-          }
-
-          this.$message({
-            type: 'success',
-            message: this.$t('users.completed')
-          })
-          this.$emit('apply-action')
+          applyAction(filtered, removeTagFn)
         },
         requirePasswordReset: () => {
           this.selectedUsers.map(user => this.$store.dispatch('RequirePasswordReset', user))

From 4d58527201cdbeea34e00ec3f6fb093402ab7b68 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 16 Oct 2019 14:24:35 +0200
Subject: [PATCH 14/25] Update api function and module action for user deletion

---
 src/api/users.js                              |  7 +--
 src/store/modules/users.js                    | 45 ++++++++-----------
 src/views/reports/components/TimelineItem.vue |  2 +-
 src/views/users/index.vue                     |  2 +-
 4 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/api/users.js b/src/api/users.js
index 12e13e6f..fb168d6c 100644
--- a/src/api/users.js
+++ b/src/api/users.js
@@ -52,12 +52,13 @@ export async function deleteRight(nicknames, right, authHost, token) {
   })
 }
 
-export async function deleteUser(nickname, authHost, token) {
+export async function deleteUsers(nicknames, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
-    url: `/api/pleroma/admin/users?nickname=${nickname}`,
+    url: `/api/pleroma/admin/users`,
     method: 'delete',
-    headers: authHeaders(token)
+    headers: authHeaders(token),
+    data: { nicknames }
   })
 }
 
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index b26024dc..497f0b87 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -4,7 +4,7 @@ import {
   createNewAccount,
   deactivateUsers,
   deleteRight,
-  deleteUser,
+  deleteUsers,
   fetchUsers,
   getPasswordResetToken,
   searchUsers,
@@ -77,24 +77,20 @@ const users = {
     }
   },
   actions: {
-    async ActivateUsers({ commit, getters }, users) {
+    async ActivateUsers({ dispatch, getters, state }, users) {
       const usersNicknames = users.map(user => user.nickname)
-      const { data } = await activateUsers(usersNicknames, getters.authHost, getters.token)
-      commit('SWAP_USERS', data)
+      await activateUsers(usersNicknames, getters.authHost, getters.token)
+      dispatch('FetchUsers', { page: state.currentPage })
     },
     async AddRight({ dispatch, getters, state }, { users, right }) {
       const usersNicknames = users.map(user => user.nickname)
       await addRight(usersNicknames, right, getters.authHost, getters.token)
-
       dispatch('FetchUsers', { page: state.currentPage })
-      // const updatedUser = { ...user, roles: { ...user.roles, [right]: !user.roles[right] }}
-      // commit('SWAP_USER', updatedUser)
     },
-    async AddTag({ commit, getters }, { users, tag }) {
+    async AddTag({ dispatch, getters, state }, { users, tag }) {
       const nicknames = users.map(user => user.nickname)
       await tagUser(nicknames, [tag], getters.authHost, getters.token)
-
-      commit('SWAP_USERS', users.map(user => ({ ...user, tags: [...user.tags, tag] })))
+      dispatch('FetchUsers', { page: state.currentPage })
     },
     async ClearFilters({ commit, dispatch, state }) {
       commit('CLEAR_USERS_FILTERS')
@@ -104,46 +100,41 @@ const users = {
       await createNewAccount(nickname, email, password, getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
     },
-    async DeactivateUsers({ commit, getters }, users) {
+    async DeactivateUsers({ dispatch, getters, state }, users) {
       const usersNicknames = users.map(user => user.nickname)
-      const { data } = await deactivateUsers(usersNicknames, getters.authHost, getters.token)
-      commit('SWAP_USERS', data)
+      await deactivateUsers(usersNicknames, getters.authHost, getters.token)
+      dispatch('FetchUsers', { page: state.currentPage })
     },
     async DeleteRight({ dispatch, getters, state }, { users, right }) {
       const usersNicknames = users.map(user => user.nickname)
       await deleteRight(usersNicknames, right, getters.authHost, getters.token)
-
       dispatch('FetchUsers', { page: state.currentPage })
-      // const updatedUser = { ...user, roles: { ...user.roles, [right]: !user.roles[right] }}
-      // commit('SWAP_USER', updatedUser)
     },
-    async DeleteUser({ commit, getters, state }, user) {
-      const { data } = await deleteUser(user.nickname, getters.authHost, getters.token)
-      const users = state.fetchedUsers.filter(user => user.nickname !== data)
-      commit('SET_USERS', users)
+    async DeleteUsers({ dispatch, getters, state }, users) {
+      const usersNicknames = users.map(user => user.nickname)
+      await deleteUsers(usersNicknames, getters.authHost, getters.token)
     },
-    async RequirePasswordReset({ commit, getters, state }, user) {
+    async RequirePasswordReset({ getters }, user) {
       await requirePasswordReset(user.nickname, getters.authHost, getters.token)
     },
-    async FetchUsers({ commit, state, getters, dispatch }, { page }) {
+    async FetchUsers({ commit, dispatch, getters, state }, { page }) {
       commit('SET_LOADING', true)
       const filters = Object.keys(state.filters).filter(filter => state.filters[filter]).join()
       const response = await fetchUsers(filters, getters.authHost, getters.token, page)
-      await dispatch('GetNodeInfo')
+      // await dispatch('GetNodeInfo')
       loadUsers(commit, page, response.data)
     },
-    async GetPasswordResetToken({ commit, state, getters }, nickname) {
+    async GetPasswordResetToken({ commit, getters }, nickname) {
       const { data } = await getPasswordResetToken(nickname, getters.authHost, getters.token)
       commit('SET_PASSWORD_RESET_TOKEN', data)
     },
     RemovePasswordToken({ commit }) {
       commit('SET_PASSWORD_RESET_TOKEN', { link: '', token: '' })
     },
-    async RemoveTag({ commit, getters }, { users, tag }) {
+    async RemoveTag({ dispatch, getters, state }, { users, tag }) {
       const nicknames = users.map(user => user.nickname)
       await untagUser(nicknames, [tag], getters.authHost, getters.token)
-
-      commit('SWAP_USERS', users.map(user => ({ ...user, tags: user.tags.filter(userTag => userTag !== tag) })))
+      dispatch('FetchUsers', { page: state.currentPage })
     },
     async SearchUsers({ commit, dispatch, state, getters }, { query, page }) {
       if (query.length === 0) {
diff --git a/src/views/reports/components/TimelineItem.vue b/src/views/reports/components/TimelineItem.vue
index 34336f79..e7e41e7b 100644
--- a/src/views/reports/components/TimelineItem.vue
+++ b/src/views/reports/components/TimelineItem.vue
@@ -140,7 +140,7 @@ export default {
       }
     },
     handleDeletion(user) {
-      this.$store.dispatch('DeleteUser', user)
+      this.$store.dispatch('DeleteUsers', [user])
     },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('L HH:mm')
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index b5cf1251..bd255c7b 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -281,7 +281,7 @@ export default {
         : this.$store.dispatch('DeactivateUsers', [user])
     },
     handleDeletion(user) {
-      this.$store.dispatch('DeleteUser', user)
+      this.$store.dispatch('DeleteUsers', [user])
     },
     handlePageChange(page) {
       const searchQuery = this.$store.state.users.searchQuery

From d47b3287bdd594c78d1d3844695115f6f08936e1 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 16 Oct 2019 21:00:25 +0200
Subject: [PATCH 15/25] Fix user deletion for multiple users

---
 src/views/users/components/MultipleUsersMenu.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/users/components/MultipleUsersMenu.vue b/src/views/users/components/MultipleUsersMenu.vue
index 2c6f630c..53f778b8 100644
--- a/src/views/users/components/MultipleUsersMenu.vue
+++ b/src/views/users/components/MultipleUsersMenu.vue
@@ -150,9 +150,9 @@ export default {
   },
   methods: {
     mappers() {
-      const applyAction = (users, dispatchAction) => {
+      const applyAction = async(users, dispatchAction) => {
         try {
-          dispatchAction(users)
+          await dispatchAction(users)
         } catch (err) {
           console.log(err)
           return
@@ -192,7 +192,7 @@ export default {
         },
         remove: () => {
           const filtered = this.selectedUsers.filter(user => this.$store.state.user.id !== user.id)
-          const deleteAccountFn = async(user) => await this.$store.dispatch('DeleteUser', user)
+          const deleteAccountFn = async(users) => await this.$store.dispatch('DeleteUsers', users)
 
           applyAction(filtered, deleteAccountFn)
         },

From 408b9dcc64bea70d8a6ad25ef121c20c2aa9f252 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 16 Oct 2019 22:30:29 +0200
Subject: [PATCH 16/25] Fix displaying error message when there is no error
 response

---
 src/utils/request.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/utils/request.js b/src/utils/request.js
index bbed6501..51e74601 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -10,14 +10,19 @@ const service = axios.create({
 service.interceptors.response.use(
   response => response,
   error => {
+    let errorMessage
     console.log(`Error ${error}`)
-    console.log(error.response.data)
 
-    // If there's an "error" property in the json, use it
-    const edata = error.response.data.error ? error.response.data.error : error.response.data
+    if (error.response) {
+      // If there's an "error" property in the json, use it
+      const edata = error.response.data.error ? error.response.data.error : error.response.data
+      errorMessage = `${error.message} - ${edata}`
+    } else {
+      errorMessage = error
+    }
 
     Message({
-      message: `${error.message} - ${edata}`,
+      message: errorMessage,
       type: 'error',
       duration: 5 * 1000
     })

From 6975f435272cd47c2374663ef4ea2e50a5a5197e Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 17 Oct 2019 22:42:04 +0200
Subject: [PATCH 17/25] Add optimistic update for actions that moderate users

---
 src/store/modules/users.js | 54 +++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 497f0b87..c7b54010 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -38,12 +38,6 @@ const users = {
     SET_LOADING: (state, status) => {
       state.loading = status
     },
-    SWAP_USER: (state, updatedUser) => {
-      const updated = state.fetchedUsers.map(user => user.id === updatedUser.id ? updatedUser : user)
-      state.fetchedUsers = updated
-        .map(user => user.nickname ? user : { ...user, nickname: '' })
-        .sort((a, b) => a.nickname.localeCompare(b.nickname))
-    },
     SWAP_USERS: (state, users) => {
       const usersWithoutSwapped = users.reduce((acc, user) => {
         return acc.filter(u => u.id !== user.id)
@@ -77,17 +71,32 @@ const users = {
     }
   },
   actions: {
-    async ActivateUsers({ dispatch, getters, state }, users) {
+    async ActivateUsers({ commit, dispatch, getters, state }, users) {
+      const updatedUsers = users.map(user => {
+        return { ...user, deactivated: false }
+      })
+      commit('SWAP_USERS', updatedUsers)
+
       const usersNicknames = users.map(user => user.nickname)
       await activateUsers(usersNicknames, getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
     },
-    async AddRight({ dispatch, getters, state }, { users, right }) {
+    async AddRight({ commit, dispatch, getters, state }, { users, right }) {
+      const updatedUsers = users.map(user => {
+        return user.local ? { ...user, roles: { ...user.roles, [right]: true }} : user
+      })
+      commit('SWAP_USERS', updatedUsers)
+
       const usersNicknames = users.map(user => user.nickname)
       await addRight(usersNicknames, right, getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
     },
-    async AddTag({ dispatch, getters, state }, { users, tag }) {
+    async AddTag({ commit, dispatch, getters, state }, { users, tag }) {
+      const updatedUsers = users.map(user => {
+        return { ...user, tags: [...user.tags, tag] }
+      })
+      commit('SWAP_USERS', updatedUsers)
+
       const nicknames = users.map(user => user.nickname)
       await tagUser(nicknames, [tag], getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
@@ -100,17 +109,31 @@ const users = {
       await createNewAccount(nickname, email, password, getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
     },
-    async DeactivateUsers({ dispatch, getters, state }, users) {
+    async DeactivateUsers({ commit, dispatch, getters, state }, users) {
+      const updatedUsers = users.map(user => {
+        return { ...user, deactivated: true }
+      })
+      commit('SWAP_USERS', updatedUsers)
+
       const usersNicknames = users.map(user => user.nickname)
       await deactivateUsers(usersNicknames, getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
     },
-    async DeleteRight({ dispatch, getters, state }, { users, right }) {
+    async DeleteRight({ commit, dispatch, getters, state }, { users, right }) {
+      const updatedUsers = users.map(user => {
+        return user.local ? { ...user, roles: { ...user.roles, [right]: false }} : user
+      })
+      commit('SWAP_USERS', updatedUsers)
+
       const usersNicknames = users.map(user => user.nickname)
       await deleteRight(usersNicknames, right, getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })
     },
-    async DeleteUsers({ dispatch, getters, state }, users) {
+    async DeleteUsers({ commit, getters, state }, users) {
+      const deletedUsersIds = users.map(deletedUser => deletedUser.id)
+      const updatedUsers = state.fetchedUsers.filter(user => !deletedUsersIds.includes(user.id))
+      commit('SET_USERS', updatedUsers)
+
       const usersNicknames = users.map(user => user.nickname)
       await deleteUsers(usersNicknames, getters.authHost, getters.token)
     },
@@ -131,7 +154,12 @@ const users = {
     RemovePasswordToken({ commit }) {
       commit('SET_PASSWORD_RESET_TOKEN', { link: '', token: '' })
     },
-    async RemoveTag({ dispatch, getters, state }, { users, tag }) {
+    async RemoveTag({ commit, dispatch, getters, state }, { users, tag }) {
+      const updatedUsers = users.map(user => {
+        return { ...user, tags: user.tags.filter(userTag => userTag !== tag) }
+      })
+      commit('SWAP_USERS', updatedUsers)
+
       const nicknames = users.map(user => user.nickname)
       await untagUser(nicknames, [tag], getters.authHost, getters.token)
       dispatch('FetchUsers', { page: state.currentPage })

From fa2410d61409f926ecd047f0b2879d9daf8cbf42 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 18 Oct 2019 13:57:48 +0200
Subject: [PATCH 18/25] Fix tests for updated user actions

---
 src/api/__mocks__/users.js                 |  5 +--
 test/views/users/index.test.js             | 48 +++++++++-------------
 test/views/users/multipleUsersMenu.test.js |  7 ----
 3 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index f2e2103b..b5aca6a1 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -52,7 +52,6 @@ export async function activateUsers(nicknames, authHost, token) {
 }
 
 export async function addRight(nicknames, right, authHost, token) {
-  console.log(nicknames)
   return Promise.resolve({ data:
     { [`is_${right}`]: true }
   })
@@ -72,9 +71,9 @@ export async function deleteRight(nickname, right, authHost, token) {
   })
 }
 
-export async function deleteUser(nickname, authHost, token) {
+export async function deleteUsers(nicknames, authHost, token) {
   return Promise.resolve({ data:
-    nickname
+    nicknames
   })
 }
 
diff --git a/test/views/users/index.test.js b/test/views/users/index.test.js
index d435e1ce..63473aaf 100644
--- a/test/views/users/index.test.js
+++ b/test/views/users/index.test.js
@@ -75,7 +75,7 @@ describe('Users actions', () => {
     store = new Vuex.Store(cloneDeep(storeConfig))
   })
 
-  it('grants admin and moderator rights to a local user', async (done) => {
+  it('grants admin right to a local user', async (done) => {
     const wrapper = mount(Users, {
       store,
       localVue,
@@ -87,14 +87,28 @@ describe('Users actions', () => {
     const user = store.state.users.fetchedUsers[2]
     expect(user.roles.admin).toBe(false)
     expect(user.roles.moderator).toBe(false)
-
     wrapper.find(htmlElement(3, 1)).trigger('click')
-    await flushPromises()
-    wrapper.find(htmlElement(3, 2)).trigger('click')
-    await flushPromises()
 
     const updatedUser = store.state.users.fetchedUsers[2]
     expect(updatedUser.roles.admin).toBe(true)
+    done()
+  })
+
+  it('grants moderator right to a local user', async (done) => {
+    const wrapper = mount(Users, {
+      store,
+      localVue,
+      sync: false,
+      stubs: ['router-link']
+    })
+    await flushPromises()
+
+    const user = store.state.users.fetchedUsers[2]
+    expect(user.roles.admin).toBe(false)
+    expect(user.roles.moderator).toBe(false)
+    wrapper.find(htmlElement(3, 2)).trigger('click')
+
+    const updatedUser = store.state.users.fetchedUsers[2]
     expect(updatedUser.roles.moderator).toBe(true)
     done()
   })
@@ -126,9 +140,7 @@ describe('Users actions', () => {
 
     const user = store.state.users.fetchedUsers[1]
     expect(user.deactivated).toBe(false)
-
     wrapper.find(htmlElement(2, 1)).trigger('click')
-    await flushPromises()
 
     const updatedUser = store.state.users.fetchedUsers[1]
     expect(updatedUser.deactivated).toBe(true)
@@ -166,9 +178,7 @@ describe('Users actions', () => {
     expect(user2.tags.length).toBe(1)
 
     wrapper.find(htmlElement(1, 5)).trigger('click')
-    await flushPromises()
     wrapper.find(htmlElement(2, 5)).trigger('click')
-    await flushPromises()
 
     const updatedUser1 = store.state.users.fetchedUsers[0]
     const updatedUser2 = store.state.users.fetchedUsers[1]
@@ -188,33 +198,13 @@ describe('Users actions', () => {
 
     const user = store.state.users.fetchedUsers[1]
     expect(user.tags.length).toBe(1)
-
     wrapper.find(htmlElement(2, 6)).trigger('click')
-    await flushPromises()
 
     const updatedUser = store.state.users.fetchedUsers[1]
     expect(updatedUser.tags.length).toBe(0)
     done()
   })
 
-  it('shows check icon when tag is added', async (done) => {
-    const wrapper = mount(Users, {
-      store,
-      localVue,
-      sync: false,
-      stubs: ['router-link']
-    })
-    await flushPromises()
-
-    expect(wrapper.find(`${htmlElement(1, 5)} i`).exists()).toBe(false)
-
-    wrapper.find(htmlElement(1, 5)).trigger('click')
-    await flushPromises()
-
-    expect(wrapper.find(`${htmlElement(1, 5)} i`).exists()).toBe(true)
-    done()
-  })
-
   it('does not change user index in array when tag is added', async (done) => {
     const wrapper = mount(Users, {
       store,
diff --git a/test/views/users/multipleUsersMenu.test.js b/test/views/users/multipleUsersMenu.test.js
index c92232bf..7770a501 100644
--- a/test/views/users/multipleUsersMenu.test.js
+++ b/test/views/users/multipleUsersMenu.test.js
@@ -51,7 +51,6 @@ describe('Apply users actions to multiple users', () => {
     expect(user2.roles.admin).toBe(false)
     expect(user3.roles.admin).toBe(false)
     grantRight('admin')()
-    await flushPromises()
 
     const updatedUser1 = store.state.users.fetchedUsers[0]
     const updatedUser2 = store.state.users.fetchedUsers[1]
@@ -88,7 +87,6 @@ describe('Apply users actions to multiple users', () => {
     expect(user2.roles.moderator).toBe(false)
     expect(user3.roles.moderator).toBe(false)
     grantRight('moderator')()
-    await flushPromises()
 
     const updatedUser1 = store.state.users.fetchedUsers[0]
     const updatedUser2 = store.state.users.fetchedUsers[1]
@@ -123,7 +121,6 @@ describe('Apply users actions to multiple users', () => {
     expect(user1.roles.admin).toBe(true)
     expect(user2.roles.admin).toBe(false)
     revokeRight('admin')()
-    await flushPromises()
 
     const updatedUser1 = store.state.users.fetchedUsers[0]
     const updatedUser2 = store.state.users.fetchedUsers[2]
@@ -173,7 +170,6 @@ describe('Apply users actions to multiple users', () => {
     const user = store.state.users.fetchedUsers[2]
     expect(user.deactivated).toBe(true)
     activate()
-    await flushPromises()
 
     const updatedUser = store.state.users.fetchedUsers[2]
     expect(updatedUser.deactivated).toBe(false)
@@ -203,7 +199,6 @@ describe('Apply users actions to multiple users', () => {
     expect(user1.deactivated).toBe(false)
     expect(user2.deactivated).toBe(false)
     deactivate()
-    await flushPromises()
 
     const updatedUser1 = store.state.users.fetchedUsers[0]
     const updatedUser2 = store.state.users.fetchedUsers[1]
@@ -270,7 +265,6 @@ describe('Apply users actions to multiple users', () => {
     expect(user1.tags.length).toBe(0)
     expect(user2.tags.length).toBe(1)
     addTag('strip_media')()
-    await flushPromises()
 
     const updatedUser1 = store.state.users.fetchedUsers[0]
     const updatedUser2 = store.state.users.fetchedUsers[1]
@@ -311,7 +305,6 @@ describe('Apply users actions to multiple users', () => {
     expect(user1.tags.length).toBe(1)
     expect(user2.tags.length).toBe(1)
     removeTag('strip_media')()
-    await flushPromises()
 
     const updatedUser1 = store.state.users.fetchedUsers[1]
     const updatedUser2 = store.state.users.fetchedUsers[2]

From caba7eaefd9e2945a5eda918f470ad60d14c8ceb Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 18 Oct 2019 18:12:55 +0200
Subject: [PATCH 19/25] Return dispatching action that gets node info

---
 src/store/modules/users.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index c7b54010..df3c946d 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -144,7 +144,7 @@ const users = {
       commit('SET_LOADING', true)
       const filters = Object.keys(state.filters).filter(filter => state.filters[filter]).join()
       const response = await fetchUsers(filters, getters.authHost, getters.token, page)
-      // await dispatch('GetNodeInfo')
+      await dispatch('GetNodeInfo')
       loadUsers(commit, page, response.data)
     },
     async GetPasswordResetToken({ commit, getters }, nickname) {

From 4bd8015dfa58a2a14a50247681c4b8f0deae179e Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 18 Oct 2019 18:27:46 +0200
Subject: [PATCH 20/25] Update Changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be0fb971..8efd8c5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Changed
 
 - `mailerEnabled` must be set to `true` in order to require password reset (password reset currently only works via email)
+- Actions in users module (ActivateUsers, AddRight, DeactivateUsers, DeleteRight, DeleteUsers) now accept an array of users instead of one user
+
+### Added
+- Optimistic update for actions in users module and fetching users after api function finished its execution
 
 ## [1.2.0] - 2019-09-27
 

From 736ec2d7f59f219a9411d1b939ed82583fe0d586 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 20 Oct 2019 16:38:43 +0000
Subject: [PATCH 21/25] Remove fetching initial data for config

---
 CHANGELOG.md                    |   1 +
 src/api/initialDataForConfig.js | 117 --------------------------------
 src/store/modules/settings.js   |   7 +-
 3 files changed, 2 insertions(+), 123 deletions(-)
 delete mode 100644 src/api/initialDataForConfig.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8efd8c5c..cf9cc2a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Changed
 
 - `mailerEnabled` must be set to `true` in order to require password reset (password reset currently only works via email)
+- remove fetching initial data for configuring server settings
 - Actions in users module (ActivateUsers, AddRight, DeactivateUsers, DeleteRight, DeleteUsers) now accept an array of users instead of one user
 
 ### Added
diff --git a/src/api/initialDataForConfig.js b/src/api/initialDataForConfig.js
deleted file mode 100644
index f24ffb9a..00000000
--- a/src/api/initialDataForConfig.js
+++ /dev/null
@@ -1,117 +0,0 @@
-export const initialSettings = [
-  {
-    group: 'pleroma',
-    key: ':instance',
-    value: [
-      { 'tuple': [':name', 'Pleroma'] },
-      { 'tuple': [':email', 'example@example.com'] },
-      { 'tuple': [':notify_email', 'noreply@example.com'] },
-      { 'tuple': [':description', 'A Pleroma instance, an alternative fediverse server'] },
-      { 'tuple': [':limit', 5000] },
-      { 'tuple': [':remote_limit', 100000] },
-      { 'tuple': [':upload_limit', 16 * 1048576] },
-      { 'tuple': [':avatar_upload_limit', 2 * 1048576] },
-      { 'tuple': [':background_upload_limit', 4 * 1048576] },
-      { 'tuple': [':banner_upload_limit', 4 * 1048576] },
-      { 'tuple': [':poll_limits', [
-        { 'tuple': [':max_options', 20] },
-        { 'tuple': [':max_option_chars', 200] },
-        { 'tuple': [':min_expiration', 0] },
-        { 'tuple': [':max_expiration', 365 * 86400] }
-      ]] },
-      { 'tuple': [':registrations_open', true] },
-      { 'tuple': [':invites_enabled', false] },
-      { 'tuple': [':account_activation_required', false] },
-      { 'tuple': [':federating', true] },
-      { 'tuple': [':federation_reachability_timeout_days', 7] },
-      { 'tuple':
-        [':federation_publisher_modules', ['Pleroma.Web.ActivityPub.Publisher', 'Pleroma.Web.Websub', 'Pleroma.Web.Salmon']] },
-      { 'tuple': [':allow_relay', true] },
-      { 'tuple': [':rewrite_policy', 'Pleroma.Web.ActivityPub.MRF.NoOpPolicy'] },
-      { 'tuple': [':public', true] },
-      { 'tuple': [':managed_config', true] },
-      { 'tuple': [':static_dir', 'instance/static/'] },
-      { 'tuple': [':allowed_post_formats', ['text/plain', 'text/html', 'text/markdown', 'text/bbcode']] },
-      { 'tuple': [':mrf_transparency', true] },
-      { 'tuple': [':extended_nickname_format', false] },
-      { 'tuple': [':max_pinned_statuses', 1] },
-      { 'tuple': [':no_attachment_links', false] },
-      { 'tuple': [':max_report_comment_size', 1000] },
-      { 'tuple': [':safe_dm_mentions', false] },
-      { 'tuple': [':healthcheck', false] },
-      { 'tuple': [':remote_post_retention_days', 90] },
-      { 'tuple': [':skip_thread_containment', true] },
-      { 'tuple': [':limit_to_local_content', ':unauthenticated'] },
-      { 'tuple': [':dynamic_configuration', true] },
-      { 'tuple': [':max_account_fields', 10] },
-      { 'tuple': [':max_remote_account_fields', 20] },
-      { 'tuple': [':account_field_name_length', 255] },
-      { 'tuple': [':account_field_value_length', 255] },
-      { 'tuple': [':external_user_synchronization', true] },
-      { 'tuple': [':user_bio_length', 5000] },
-      { 'tuple': [':user_name_length', 100] }
-    ]
-  },
-  {
-    group: 'mime',
-    key: ':types',
-    value: {
-      'application/activity+json': ['activity+json'],
-      'application/jrd+json': ['jrd+json'],
-      'application/ld+json': ['activity+json'],
-      'application/xml': ['xml'],
-      'application/xrd+xml': ['xrd+xml']
-    }
-  },
-  {
-    group: 'cors_plug',
-    key: ':max_age',
-    value: 86400
-  },
-  {
-    group: 'cors_plug',
-    key: ':methods',
-    value: ['POST', 'PUT', 'DELETE', 'GET', 'PATCH', 'OPTIONS']
-  },
-  {
-    group: 'cors_plug',
-    key: ':expose',
-    value: [
-      'Link',
-      'X-RateLimit-Reset',
-      'X-RateLimit-Limit',
-      'X-RateLimit-Remaining',
-      'X-Request-Id',
-      'Idempotency-Key'
-    ]
-  },
-  {
-    group: 'cors_plug',
-    key: ':credentials',
-    value: true
-  },
-  {
-    group: 'cors_plug',
-    key: ':headers',
-    value: ['Authorization', 'Content-Type', 'Idempotency-Key']
-  },
-  {
-    group: 'tesla',
-    key: ':adapter',
-    value: 'Tesla.Adapter.Hackney'
-  },
-  {
-    group: 'pleroma',
-    key: ':markup',
-    value: [
-      { 'tuple': [':allow_inline_images', true] },
-      { 'tuple': [':allow_headings', false] },
-      { 'tuple': [':allow_tables', false] },
-      { 'tuple': [':allow_fonts', false] },
-      { 'tuple': [':scrub_policy', [
-        'Pleroma.HTML.Transform.MediaProxy',
-        'Pleroma.HTML.Scrubber.Default'
-      ]] }
-    ]
-  }
-]
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 3ee58c4e..bb6bd8c1 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,5 +1,4 @@
 import { fetchSettings, updateSettings, uploadMedia } from '@/api/settings'
-import { initialSettings } from '@/api/initialDataForConfig'
 import { filterIgnored, parseTuples, valueHasTuples, wrapConfig } from './normalizers'
 
 const settings = {
@@ -116,11 +115,7 @@ const settings = {
     async FetchSettings({ commit, dispatch, getters }) {
       commit('SET_LOADING', true)
       const response = await fetchSettings(getters.authHost, getters.token)
-      if (response.data.configs.length === 0) {
-        dispatch('SubmitChanges', initialSettings)
-      } else {
-        commit('SET_SETTINGS', response.data.configs)
-      }
+      commit('SET_SETTINGS', response.data.configs)
       commit('SET_LOADING', false)
     },
     RewriteConfig({ commit }, { tab, data }) {

From 0cde91e4ea95abb0993b2aafbf6a7305161f0749 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 21 Oct 2019 23:10:39 +0200
Subject: [PATCH 22/25] Add form for displaying remote pask metadata

---
 src/views/emojiPacks/components/EmojiPack.vue | 55 +++++++++++++++----
 src/views/emojiPacks/index.vue                |  2 +-
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index a04ea5d1..81e2da99 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,31 +1,27 @@
 <template>
   <el-collapse-item :title="name" :name="name" class="has-background">
-    <el-form label-width="120px" label-position="left" size="small">
+    <el-form v-if="isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
       <el-form-item :label="$t('settings.sharePack')">
-        <el-switch v-model="share" :disabled="!isLocal" />
+        <el-switch v-model="share" />
       </el-form-item>
       <el-form-item :label="$t('settings.homepage')">
-        <el-input v-if="isLocal" v-model="homepage" />
-        <el-input v-else :value="homepage" />
+        <el-input v-model="homepage" />
       </el-form-item>
       <el-form-item :label="$t('settings.description')">
-        <el-input v-if="isLocal" v-model="description" type="textarea" />
-        <el-input v-else :value="description" type="textarea" />
+        <el-input v-model="description" type="textarea" />
       </el-form-item>
       <el-form-item :label="$t('settings.license')">
-        <el-input v-if="isLocal" v-model="license" />
-        <el-input v-else :value="license" />
+        <el-input v-model="license" />
       </el-form-item>
       <el-form-item :label="$t('settings.fallbackSrc')">
-        <el-input v-if="isLocal" v-model="fallbackSrc" />
-        <el-input v-else :value="fallbackSrc" />
+        <el-input v-model="fallbackSrc" />
       </el-form-item>
       <el-form-item
         v-if="fallbackSrc && fallbackSrc.trim() !== ''"
         :label="$t('settings.fallbackSrcSha')">
         {{ pack.pack["fallback-src-sha256"] }}
       </el-form-item>
-      <el-form-item v-if="isLocal" class="save-pack-button">
+      <el-form-item class="save-pack-button">
         <el-button type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button>
         <el-button @click="deletePack">{{ $t('settings.deletePack') }}</el-button>
       </el-form-item>
@@ -40,6 +36,38 @@
         </el-link>
       </el-form-item>
     </el-form>
+    <el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
+      <el-form-item :label="$t('settings.sharePack')">
+        <el-switch v-model="share" disabled />
+      </el-form-item>
+      <el-form-item v-if="homepage" :label="$t('settings.homepage')">
+        <span>{{ homepage }}</span>
+      </el-form-item>
+      <el-form-item v-if="description" :label="$t('settings.description')">
+        <span>{{ description }}</span>
+      </el-form-item>
+      <el-form-item v-if="license" :label="$t('settings.license')">
+        <span>{{ license }}</span>
+      </el-form-item>
+      <el-form-item v-if="fallbackSrc" :label="$t('settings.fallbackSrc')">
+        <span>{{ fallbackSrc }}</span>
+      </el-form-item>
+      <el-form-item
+        v-if="fallbackSrc && fallbackSrc.trim() !== ''"
+        :label="$t('settings.fallbackSrcSha')">
+        {{ pack.pack["fallback-src-sha256"] }}
+      </el-form-item>
+      <el-form-item>
+        <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('settings.downloadPackArchive') }}</el-button>
+        </el-link>
+      </el-form-item>
+    </el-form>
     <el-collapse v-model="showPackContent" class="contents-collapse">
       <el-collapse-item v-if="isLocal" :title="$t('settings.addNewEmoji')" name="addEmoji" class="no-background">
         <new-emoji-uploader :pack-name="name"/>
@@ -212,6 +240,11 @@ export default {
 .emoji-pack-card {
   margin-top: 5px;
 }
+.emoji-pack-metadata {
+  .el-form-item {
+    margin-bottom: 10px;
+  }
+}
 .has-background .el-collapse-item__header {
   background: #f6f6f6;
 }
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 6a8c7f31..5e2e468d 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -45,7 +45,7 @@
       </el-form-item>
       <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('settings.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="true" />
+          <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
         </el-collapse>
       </el-form-item>
     </el-form>

From f060155fdbbdf984756a97ebc2cc2ef8d4c276fe Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 22 Oct 2019 22:19:21 +0200
Subject: [PATCH 23/25] Fix displaying errors with html content

---
 src/utils/request.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/utils/request.js b/src/utils/request.js
index bbed6501..40511c3e 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,9 +15,12 @@ service.interceptors.response.use(
 
     // If there's an "error" property in the json, use it
     const edata = error.response.data.error ? error.response.data.error : error.response.data
+    const message = !error.response.headers['content-type'].includes('application/json')
+      ? `${error.message}`
+      : `${error.message} - ${edata}`
 
     Message({
-      message: `${error.message} - ${edata}`,
+      message,
       type: 'error',
       duration: 5 * 1000
     })

From 6aab2dd6646a9ca3e0651cbe22018fbe3b27f754 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 23 Oct 2019 01:07:45 +0200
Subject: [PATCH 24/25] Add ability to upload file from an url

---
 .../components/NewEmojiUploader.vue           | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/views/emojiPacks/components/NewEmojiUploader.vue b/src/views/emojiPacks/components/NewEmojiUploader.vue
index 4bb8b441..0715cde8 100644
--- a/src/views/emojiPacks/components/NewEmojiUploader.vue
+++ b/src/views/emojiPacks/components/NewEmojiUploader.vue
@@ -7,20 +7,20 @@
       <el-input v-model="customFileName" :placeholder="$t('settings.optional')"/>
     </el-form-item>
     <el-form-item :label="$t('settings.uploadFile')">
-      <!-- <div class="upload-file-url">
+      <div class="upload-file-url">
         <el-input v-model="imageUploadURL" :placeholder="$t('settings.url')"/>
-        <el-button :disabled="shortcodePresent" class="upload-button" @click="uploadEmoji">{{ $t('settings.upload') }}</el-button>
+        <el-button :disabled="shortcodePresent" type="primary" class="upload-button" @click="uploadEmoji">{{ $t('settings.upload') }}</el-button>
       </div>
       <div class="upload-container">
-        <p class="text">or</p>-->
-      <el-upload
-        :http-request="uploadEmoji"
-        :multiple="false"
-        :show-file-list="false"
-        action="add">
-        <el-button :disabled="shortcodePresent" type="primary">{{ $t('settings.clickToUpload') }}</el-button>
-      </el-upload>
-      <!-- </div> -->
+        <p class="text">or</p>
+        <el-upload
+          :http-request="uploadEmoji"
+          :multiple="false"
+          :show-file-list="false"
+          action="add">
+          <el-button :disabled="shortcodePresent" type="primary">{{ $t('settings.clickToUpload') }}</el-button>
+        </el-upload>
+      </div>
     </el-form-item>
   </el-form>
 </template>
@@ -75,11 +75,12 @@ export default {
         action: 'add',
         packName: this.packName,
         shortcode: this.shortcode,
-        file,
+        file: file || this.imageUploadURL,
         fileName: this.customFileName
       }).then(() => {
         this.shortcode = ''
         this.imageUploadURL = ''
+        this.customFileName = ''
 
         this.$store.dispatch('ReloadEmoji')
       })

From 7afb327a608c3b7831b4a150696e7dd6b0c16cdc Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 23 Oct 2019 01:19:02 +0200
Subject: [PATCH 25/25] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be0fb971..ce127f5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Changed
 
+- moves emoji pack configuration from the main menu to settings tab, redesigns it and fixes bugs
 - `mailerEnabled` must be set to `true` in order to require password reset (password reset currently only works via email)
 
 ## [1.2.0] - 2019-09-27