From 8b1a60dce238a6e84c6c5bff8395cb642fd86ec7 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 4 Feb 2021 02:22:44 +0300
Subject: [PATCH] Move Emoji pack page to Emoji tab inside Settings page

---
 src/router/index.js                           |  15 -
 .../{components => }/LocalEmojiPack.vue       |   0
 .../{components => }/NewEmojiUploader.vue     |   0
 .../{components => }/RemoteEmojiPack.vue      |   0
 .../{components => }/SingleEmojiEditor.vue    |   0
 src/views/emojiPacks/index.vue                | 344 ------------------
 src/views/settings/components/Emoji.vue       | 229 +++++++++++-
 src/views/settings/styles/main.scss           | 119 ++++++
 8 files changed, 337 insertions(+), 370 deletions(-)
 rename src/views/emojiPacks/{components => }/LocalEmojiPack.vue (100%)
 rename src/views/emojiPacks/{components => }/NewEmojiUploader.vue (100%)
 rename src/views/emojiPacks/{components => }/RemoteEmojiPack.vue (100%)
 rename src/views/emojiPacks/{components => }/SingleEmojiEditor.vue (100%)
 delete mode 100644 src/views/emojiPacks/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 5becbc9e..42d7d3e1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -70,20 +70,6 @@ const invites = {
   ]
 }
 
-const emojiPacksDisabled = disabledFeatures.includes('emoji-packs')
-const emojiPacks = {
-  path: '/emoji_packs',
-  component: Layout,
-  children: [
-    {
-      path: 'index',
-      component: () => import('@/views/emojiPacks/index'),
-      name: 'Emoji Packs',
-      meta: { title: 'emoji-packs', icon: 'eye-open', noCache: true }
-    }
-  ]
-}
-
 const moderationLogDisabled = disabledFeatures.includes('moderation-log')
 const moderationLog = {
   path: '/moderation_log',
@@ -179,7 +165,6 @@ export const asyncRouterMap = [
   ...(statusesDisabled ? [] : [statuses]),
   ...(reportsDisabled ? [] : [reports]),
   ...(invitesDisabled ? [] : [invites]),
-  ...(emojiPacksDisabled ? [] : [emojiPacks]),
   ...(moderationLogDisabled ? [] : [moderationLog]),
   ...(mediaProxyCacheDisabled ? [] : [mediaProxyCache]),
   ...(settingsDisabled ? [] : [settings]),
diff --git a/src/views/emojiPacks/components/LocalEmojiPack.vue b/src/views/emojiPacks/LocalEmojiPack.vue
similarity index 100%
rename from src/views/emojiPacks/components/LocalEmojiPack.vue
rename to src/views/emojiPacks/LocalEmojiPack.vue
diff --git a/src/views/emojiPacks/components/NewEmojiUploader.vue b/src/views/emojiPacks/NewEmojiUploader.vue
similarity index 100%
rename from src/views/emojiPacks/components/NewEmojiUploader.vue
rename to src/views/emojiPacks/NewEmojiUploader.vue
diff --git a/src/views/emojiPacks/components/RemoteEmojiPack.vue b/src/views/emojiPacks/RemoteEmojiPack.vue
similarity index 100%
rename from src/views/emojiPacks/components/RemoteEmojiPack.vue
rename to src/views/emojiPacks/RemoteEmojiPack.vue
diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/SingleEmojiEditor.vue
similarity index 100%
rename from src/views/emojiPacks/components/SingleEmojiEditor.vue
rename to src/views/emojiPacks/SingleEmojiEditor.vue
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
deleted file mode 100644
index 90c5e562..00000000
--- a/src/views/emojiPacks/index.vue
+++ /dev/null
@@ -1,344 +0,0 @@
-<template>
-  <div class="emoji-packs">
-    <div class="emoji-packs-header">
-      <h1>{{ $t('emoji.emojiPacks') }}</h1>
-      <reboot-button/>
-    </div>
-    <div class="emoji-header-container">
-      <div class="emoji-packs-header-button-container">
-        <el-button class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
-        <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" popper-class="import-pack-button">
-          <el-button @click="importFromFS">
-            {{ $t('emoji.importPacks') }}
-          </el-button>
-        </el-tooltip>
-      </div>
-    </div>
-    <el-tabs v-model="activeTab" type="card" class="emoji-packs-tabs">
-      <el-tab-pane :label="$t('emoji.localPacks')" name="local">
-        <el-form :label-width="labelWidth" class="emoji-packs-form">
-          <el-form-item :label="$t('emoji.localPacks')">
-            <el-button @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
-          </el-form-item>
-          <el-form-item :label="$t('emoji.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>
-            <span class="emoji-name-warning">{{ $t('emoji.emojiWarning') }}</span>
-          </el-form-item>
-          <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
-            <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" accordion @change="closeRemoteTabs">
-              <local-emoji-pack ref="localEmojiPack" :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
-            </el-collapse>
-          </el-form-item>
-        </el-form>
-        <div class="pagination">
-          <el-pagination
-            :total="localPacksCount"
-            :current-page="currentLocalPacksPage"
-            :page-size="pageSize"
-            hide-on-single-page
-            layout="prev, pager, next"
-            @current-change="handleLocalPageChange"
-          />
-        </div>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('emoji.remotePacks')" name="remote">
-        <el-form :label-width="labelWidth" class="emoji-packs-form">
-          <el-form-item :label="$t('emoji.remotePacks')">
-            <div class="create-pack">
-              <el-input
-                v-model="remoteInstanceAddress"
-                :placeholder="$t('emoji.remoteInstanceAddress')" />
-              <el-button
-                v-loading.fullscreen.lock="fullscreenLoading"
-                :disabled="remoteInstanceAddress.trim() === ''"
-                class="create-pack-button"
-                @click="refreshRemotePacks">
-                {{ $t('emoji.refreshRemote') }}
-              </el-button>
-            </div>
-          </el-form-item>
-          <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
-            <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" accordion @change="closeLocalTabs">
-              <remote-emoji-pack ref="remoteEmojiPack" :active-tab="activeRemotePack" :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
-            </el-collapse>
-          </el-form-item>
-        </el-form>
-        <div class="pagination">
-          <el-pagination
-            :total="remotePacksCount"
-            :current-page="currentRemotePacksPage"
-            :page-size="pageSize"
-            hide-on-single-page
-            layout="prev, pager, next"
-            @current-change="handleRemotePageChange"
-          />
-        </div>
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-import LocalEmojiPack from './components/LocalEmojiPack'
-import RemoteEmojiPack from './components/RemoteEmojiPack'
-import i18n from '@/lang'
-import RebootButton from '@/components/RebootButton'
-
-export default {
-  components: { LocalEmojiPack, RebootButton, RemoteEmojiPack },
-  data() {
-    return {
-      activeTab: 'local',
-      newPackName: '',
-      activeLocalPack: '',
-      activeRemotePack: '',
-      fullscreenLoading: false
-    }
-  },
-  computed: {
-    currentLocalPacksPage() {
-      return this.$store.state.emojiPacks.currentLocalPacksPage
-    },
-    currentRemotePacksPage() {
-      return this.$store.state.emojiPacks.currentRemotePacksPage
-    },
-    isMobile() {
-      return this.$store.state.app.device === 'mobile'
-    },
-    isTablet() {
-      return this.$store.state.app.device === 'tablet'
-    },
-    labelWidth() {
-      if (this.isMobile) {
-        return '105px'
-      } else if (this.isTablet) {
-        return '180px'
-      } else {
-        return '200px'
-      }
-    },
-    localPacks() {
-      return this.$store.state.emojiPacks.localPacks
-    },
-    localPacksCount() {
-      return this.$store.state.emojiPacks.localPacksCount
-    },
-    pageSize() {
-      return this.$store.state.emojiPacks.pageSize
-    },
-    remoteInstanceAddress: {
-      get() {
-        return this.$store.state.emojiPacks.remoteInstance
-      },
-      set(instance) {
-        this.$store.dispatch('SetRemoteInstance', instance)
-      }
-    },
-    remotePacks() {
-      return this.$store.state.emojiPacks.remotePacks
-    },
-    remotePacksCount() {
-      return this.$store.state.emojiPacks.remotePacksCount
-    }
-  },
-  mounted() {
-    this.$store.dispatch('GetNodeInfo')
-    this.$store.dispatch('NeedReboot')
-    this.refreshLocalPacks()
-  },
-  methods: {
-    closeLocalTabs() {
-      this.collapseExistingEmojis()
-      this.activeLocalPack = ''
-    },
-    closeRemoteTabs() {
-      this.collapseExistingEmojis()
-      this.activeRemotePack = ''
-    },
-    collapseExistingEmojis() {
-      if (this.$refs.localEmojiPack && this.$refs.localEmojiPack.length > 0) {
-        this.$refs.localEmojiPack.forEach(el => el.collapse())
-      }
-      if (this.$refs.remoteEmojiPack && this.$refs.remoteEmojiPack.length > 0) {
-        this.$refs.remoteEmojiPack.forEach(el => el.collapse())
-      }
-    },
-    createLocalPack() {
-      this.$store.dispatch('CreatePack', { name: this.newPackName })
-        .then(() => {
-          this.newPackName = ''
-
-          this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
-          this.$store.dispatch('ReloadEmoji')
-        })
-    },
-    handleLocalPageChange(page) {
-      this.$store.dispatch('FetchLocalEmojiPacks', page)
-    },
-    handleRemotePageChange(page) {
-      this.$store.dispatch('SetRemoteEmojiPacks', { page, remoteInstance: this.remoteInstanceAddress })
-    },
-    importFromFS() {
-      this.$store.dispatch('ImportFromFS')
-        .then(() => {
-          this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
-          this.$store.dispatch('ReloadEmoji')
-        })
-    },
-    refreshLocalPacks() {
-      try {
-        this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
-      } catch (e) {
-        return
-      }
-      this.$message({
-        type: 'success',
-        message: i18n.t('emoji.refreshed')
-      })
-    },
-    async refreshRemotePacks() {
-      this.fullscreenLoading = true
-      await this.$store.dispatch('SetRemoteEmojiPacks', { page: 1, remoteInstance: this.remoteInstanceAddress })
-      this.fullscreenLoading = false
-    },
-    async reloadEmoji() {
-      try {
-        this.$store.dispatch('ReloadEmoji')
-      } catch (e) {
-        return
-      }
-      this.$message({
-        type: 'success',
-        message: i18n.t('emoji.reloaded')
-      })
-    }
-  }
-}
-</script>
-
-<style rel='stylesheet/scss' lang='scss'>
-.create-pack {
-  display: flex;
-  justify-content: space-between
-}
-.create-pack-button {
-  margin-left: 10px;
-}
-.emoji-header-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 15px 22px 15px;
-}
-.emoji-name-warning {
-  color: #666666;
-  font-size: 13px;
-  line-height: 22px;
-  margin: 5px 0 0 0;
-  overflow-wrap: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.emoji-packs-header-button-container {
-  display: flex;
-}
-.emoji-packs-form {
-  margin-top: 15px;
-}
-.emoji-packs-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 10px 15px 15px 15px;
-}
-.emoji-packs-tabs {
-  margin: 0 15px 15px 15px;
-}
-.import-pack-button {
-  margin-left: 10px;
-  width: 30%;
-  max-width: 700px;
-}
-h1 {
-  margin: 0;
-}
-.line {
-  width: 100%;
-  height: 0;
-  border: 1px solid #eee;
-  margin-bottom: 22px;
-}
-.pagination {
-  margin: 25px 0;
-  text-align: center;
-}
-.reboot-button {
-  padding: 10px;
-  margin: 0;
-  width: 145px;
-}
-
-@media only screen and (min-width: 1824px) {
-  .emoji-packs {
-    max-width: 1824px;
-    margin: auto;
-  }
-}
-
-@media only screen and (max-width:480px) {
-  .create-pack {
-    height: 82px;
-    flex-direction: column;
-  }
-  .create-pack-button {
-    margin-left: 0;
-  }
-  .divider {
-    margin: 15px 0;
-  }
-  .el-message {
-    min-width: 80%;
-  }
-  .el-message-box {
-    width: 80%;
-  }
-  .emoji-header-container {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .emoji-packs-form {
-    margin: 0 7px;
-    label {
-      padding-right: 8px;
-    }
-    .el-form-item {
-      margin-bottom: 15px;
-    }
-  }
-  .emoji-packs-header {
-    margin: 15px;
-  }
-  .emoji-packs-header-button-container {
-    height: 82px;
-    flex-direction: column;
-    .el-button+.el-button {
-      margin: 7px 0 0 0;
-      width: fit-content;
-    }
-  }
-  .import-pack-button {
-    width: 90%;
-  }
-  .reload-emoji-button {
-    width: fit-content;
-  }
-}
-</style>
diff --git a/src/views/settings/components/Emoji.vue b/src/views/settings/components/Emoji.vue
index a7dffc62..0d85d825 100644
--- a/src/views/settings/components/Emoji.vue
+++ b/src/views/settings/components/Emoji.vue
@@ -1,33 +1,137 @@
 <template>
-  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form :model="emojiData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="emoji" :data="emojiData"/>
-    </el-form>
-    <div class="submit-button-container">
-      <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+  <div class="emoji-packs">
+    <div class="emoji-header-container">
+      <div class="emoji-packs-header-button-container">
+        <el-button class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
+        <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" popper-class="import-pack-button">
+          <el-button @click="importFromFS">
+            {{ $t('emoji.importPacks') }}
+          </el-button>
+        </el-tooltip>
+      </div>
     </div>
+    <el-tabs v-model="activeTab" type="card" class="emoji-packs-tabs">
+      <el-tab-pane v-if="!emojiPacksDisabled" :label="$t('emoji.localPacks')" name="local">
+        <el-form :label-width="labelWidth" class="emoji-packs-form">
+          <el-form-item :label="$t('emoji.localPacks')">
+            <el-button @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
+          </el-form-item>
+          <el-form-item :label="$t('emoji.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>
+            <span class="emoji-name-warning">{{ $t('emoji.emojiWarning') }}</span>
+          </el-form-item>
+          <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
+            <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" accordion @change="closeRemoteTabs">
+              <local-emoji-pack ref="localEmojiPack" :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
+            </el-collapse>
+          </el-form-item>
+        </el-form>
+        <div class="pagination">
+          <el-pagination
+            :total="localPacksCount"
+            :current-page="currentLocalPacksPage"
+            :page-size="pageSize"
+            hide-on-single-page
+            layout="prev, pager, next"
+            @current-change="handleLocalPageChange"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane v-if="!emojiPacksDisabled" :label="$t('emoji.remotePacks')" name="remote">
+        <el-form :label-width="labelWidth" class="emoji-packs-form">
+          <el-form-item :label="$t('emoji.remotePacks')">
+            <div class="create-pack">
+              <el-input
+                v-model="remoteInstanceAddress"
+                :placeholder="$t('emoji.remoteInstanceAddress')" />
+              <el-button
+                v-loading.fullscreen.lock="fullscreenLoading"
+                :disabled="remoteInstanceAddress.trim() === ''"
+                class="create-pack-button"
+                @click="refreshRemotePacks">
+                {{ $t('emoji.refreshRemote') }}
+              </el-button>
+            </div>
+          </el-form-item>
+          <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
+            <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" accordion @change="closeLocalTabs">
+              <remote-emoji-pack ref="remoteEmojiPack" :active-tab="activeRemotePack" :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
+            </el-collapse>
+          </el-form-item>
+        </el-form>
+        <div class="pagination">
+          <el-pagination
+            :total="remotePacksCount"
+            :current-page="currentRemotePacksPage"
+            :page-size="pageSize"
+            hide-on-single-page
+            layout="prev, pager, next"
+            @current-change="handleRemotePageChange"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('settings.settings')" name="settings">
+        <div v-if="!loading" :class="isSidebarOpen" class="form-container">
+          <el-form :model="emojiData" :label-position="labelPosition" :label-width="settingsLabelWidth">
+            <setting :setting-group="emoji" :data="emojiData"/>
+          </el-form>
+          <div class="submit-button-container">
+            <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import i18n from '@/lang'
+import LocalEmojiPack from '../../emojiPacks/LocalEmojiPack'
+import RemoteEmojiPack from '../../emojiPacks/RemoteEmojiPack'
 import Setting from './Setting'
 import _ from 'lodash'
 
 export default {
   name: 'Emoji',
-  components: { Setting },
+  components: { LocalEmojiPack, RemoteEmojiPack, Setting },
+  data() {
+    return {
+      activeTab: 'local',
+      newPackName: '',
+      activeLocalPack: '',
+      activeRemotePack: '',
+      fullscreenLoading: false
+    }
+  },
   computed: {
     ...mapGetters([
       'settings'
     ]),
+    currentLocalPacksPage() {
+      return this.$store.state.emojiPacks.currentLocalPacksPage
+    },
+    currentRemotePacksPage() {
+      return this.$store.state.emojiPacks.currentRemotePacksPage
+    },
     emoji() {
       return this.settings.description.find(setting => setting.key === ':emoji')
     },
     emojiData() {
       return _.get(this.settings.settings, [':pleroma', ':emoji']) || {}
     },
+    emojiPacksDisabled() {
+      const disabledFeatures = process.env.DISABLED_FEATURES || []
+      return disabledFeatures.includes('emoji-packs')
+    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -41,6 +145,41 @@ export default {
       return this.isMobile ? 'top' : 'right'
     },
     labelWidth() {
+      if (this.isMobile) {
+        return '105px'
+      } else if (this.isTablet) {
+        return '180px'
+      } else {
+        return '200px'
+      }
+    },
+    loading() {
+      return this.settings.loading
+    },
+    localPacks() {
+      return this.$store.state.emojiPacks.localPacks
+    },
+    localPacksCount() {
+      return this.$store.state.emojiPacks.localPacksCount
+    },
+    pageSize() {
+      return this.$store.state.emojiPacks.pageSize
+    },
+    remoteInstanceAddress: {
+      get() {
+        return this.$store.state.emojiPacks.remoteInstance
+      },
+      set(instance) {
+        this.$store.dispatch('SetRemoteInstance', instance)
+      }
+    },
+    remotePacks() {
+      return this.$store.state.emojiPacks.remotePacks
+    },
+    remotePacksCount() {
+      return this.$store.state.emojiPacks.remotePacksCount
+    },
+    settingsLabelWidth() {
       if (this.isMobile) {
         return '120px'
       } else if (this.isTablet) {
@@ -48,12 +187,52 @@ export default {
       } else {
         return '280px'
       }
-    },
-    loading() {
-      return this.settings.loading
     }
   },
+  mounted() {
+    this.$store.dispatch('GetNodeInfo')
+    this.$store.dispatch('NeedReboot')
+    this.refreshLocalPacks()
+  },
   methods: {
+    closeLocalTabs() {
+      this.collapseExistingEmojis()
+      this.activeLocalPack = ''
+    },
+    closeRemoteTabs() {
+      this.collapseExistingEmojis()
+      this.activeRemotePack = ''
+    },
+    collapseExistingEmojis() {
+      if (this.$refs.localEmojiPack && this.$refs.localEmojiPack.length > 0) {
+        this.$refs.localEmojiPack.forEach(el => el.collapse())
+      }
+      if (this.$refs.remoteEmojiPack && this.$refs.remoteEmojiPack.length > 0) {
+        this.$refs.remoteEmojiPack.forEach(el => el.collapse())
+      }
+    },
+    createLocalPack() {
+      this.$store.dispatch('CreatePack', { name: this.newPackName })
+        .then(() => {
+          this.newPackName = ''
+
+          this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
+          this.$store.dispatch('ReloadEmoji')
+        })
+    },
+    handleLocalPageChange(page) {
+      this.$store.dispatch('FetchLocalEmojiPacks', page)
+    },
+    handleRemotePageChange(page) {
+      this.$store.dispatch('SetRemoteEmojiPacks', { page, remoteInstance: this.remoteInstanceAddress })
+    },
+    importFromFS() {
+      this.$store.dispatch('ImportFromFS')
+        .then(() => {
+          this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
+          this.$store.dispatch('ReloadEmoji')
+        })
+    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')
@@ -64,6 +243,33 @@ export default {
         type: 'success',
         message: i18n.t('settings.success')
       })
+    },
+    refreshLocalPacks() {
+      try {
+        this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
+      } catch (e) {
+        return
+      }
+      this.$message({
+        type: 'success',
+        message: i18n.t('emoji.refreshed')
+      })
+    },
+    async refreshRemotePacks() {
+      this.fullscreenLoading = true
+      await this.$store.dispatch('SetRemoteEmojiPacks', { page: 1, remoteInstance: this.remoteInstanceAddress })
+      this.fullscreenLoading = false
+    },
+    async reloadEmoji() {
+      try {
+        this.$store.dispatch('ReloadEmoji')
+      } catch (e) {
+        return
+      }
+      this.$message({
+        type: 'success',
+        message: i18n.t('emoji.reloaded')
+      })
     }
   }
 }
@@ -71,5 +277,6 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss'>
 @import '../styles/main';
-@include settings
+@include settings;
+@include emoji;
 </style>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index a2930076..0f97497b 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -867,3 +867,122 @@
     }
   }
 }
+
+@mixin emoji {
+  .create-pack {
+    display: flex;
+    justify-content: space-between
+  }
+  .create-pack-button {
+    margin-left: 10px;
+  }
+  .emoji-header-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 15px 22px 15px;
+  }
+  .emoji-name-warning {
+    color: #666666;
+    font-size: 13px;
+    line-height: 22px;
+    margin: 5px 0 0 0;
+    overflow-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .emoji-packs-header-button-container {
+    display: flex;
+  }
+  .emoji-packs-form {
+    margin-top: 15px;
+  }
+  .emoji-packs-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 10px 15px 15px 15px;
+  }
+  .emoji-packs-tabs {
+    margin: 0 15px 15px 15px;
+  }
+  .import-pack-button {
+    margin-left: 10px;
+    width: 30%;
+    max-width: 700px;
+  }
+  h1 {
+    margin: 0;
+  }
+  .line {
+    width: 100%;
+    height: 0;
+    border: 1px solid #eee;
+    margin-bottom: 22px;
+  }
+  .pagination {
+    margin: 25px 0;
+    text-align: center;
+  }
+  .reboot-button {
+    padding: 10px;
+    margin: 0;
+    width: 145px;
+  }
+  
+  @media only screen and (min-width: 1824px) {
+    .emoji-packs {
+      max-width: 1824px;
+      margin: auto;
+    }
+  }
+  
+  @media only screen and (max-width:480px) {
+    .create-pack {
+      height: 82px;
+      flex-direction: column;
+    }
+    .create-pack-button {
+      margin-left: 0;
+    }
+    .divider {
+      margin: 15px 0;
+    }
+    .el-message {
+      min-width: 80%;
+    }
+    .el-message-box {
+      width: 80%;
+    }
+    .emoji-header-container {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .emoji-packs-form {
+      margin: 0 7px;
+      label {
+        padding-right: 8px;
+      }
+      .el-form-item {
+        margin-bottom: 15px;
+      }
+    }
+    .emoji-packs-header {
+      margin: 15px;
+    }
+    .emoji-packs-header-button-container {
+      height: 82px;
+      flex-direction: column;
+      .el-button+.el-button {
+        margin: 7px 0 0 0;
+        width: fit-content;
+      }
+    }
+    .import-pack-button {
+      width: 90%;
+    }
+    .reload-emoji-button {
+      width: fit-content;
+    }
+  }
+}