Merge branch 'small-fixes-and-improvements' into shigusegubu-themes3

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -12,6 +12,7 @@ import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -174,51 +175,9 @@ const EmojiTab = {
       this.sortPackFiles(packName)
     },
 
-    loadPacksPaginated(listFunction) {
-      const pageSize = 25
-      const allPacks = {}
-
-      return listFunction({
-        instance: this.remotePackInstance,
-        page: 1,
-        pageSize: 0,
-      })
-        .then((data) => data.json())
-        .then((data) => {
-          if (data.error !== undefined) {
-            return Promise.reject(data.error)
-          }
-
-          let resultingPromise = Promise.resolve({})
-          for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
-            resultingPromise = resultingPromise
-              .then(() =>
-                listFunction({
-                  instance: this.remotePackInstance,
-                  page: i,
-                  pageSize,
-                }),
-              )
-              .then((data) => data.json())
-              .then((pageData) => {
-                if (pageData.error !== undefined) {
-                  return Promise.reject(pageData.error)
-                }
-
-                assign(allPacks, pageData.packs)
-              })
-          }
-
-          return resultingPromise
-        })
-        .then(() => allPacks)
-        .catch((data) => {
-          this.displayError(data)
-        })
-    },
-
     refreshPackList() {
-      this.loadPacksPaginated(
+      useEmojiStore().getAdminPacks(
+        this.remotePackInstance,
         this.$store.state.api.backendInteractor.listEmojiPacks,
       ).then((allPacks) => {
         this.knownLocalPacks = allPacks
@@ -228,7 +187,8 @@ const EmojiTab = {
       })
     },
     listRemotePacks() {
-      this.loadPacksPaginated(
+      useEmojiStore().getAdminPacks(
+        this.remotePackInstance,
         this.$store.state.api.backendInteractor.listRemoteEmojiPacks,
       )
         .then((allPacks) => {

src/components/status/status.scss

@@ -31,10 +31,10 @@
   }
 
   .pin {
-    padding: var(--status-margin) var(--status-margin) 0;
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    margin-right: 0.5em;
   }
 
   ._misclick-prevention & {
@@ -229,7 +229,6 @@
     display: flex;
     align-items: center;
     padding: 0.4em var(--status-margin);
-    border-bottom: 1px dotted var(--border);
 
     .repeater-avatar {
       flex: 0 0 1.5em;

src/components/status/status.vue

@@ -46,16 +46,6 @@
       </div>
     </template>
     <template v-else>
-      <div
-        v-if="showPinned"
-        class="pin"
-      >
-        <FAIcon
-          icon="thumbtack"
-          class="faint"
-        />
-        <span class="faint">{{ $t('status.pinned') }}</span>
-      </div>
       <div
         v-if="retweet && !noHeading && !inConversation"
         :class="[repeaterClass, { highlighted: repeaterStyle }]"
@@ -179,6 +169,13 @@
               </div>
 
               <span class="heading-right">
+                <span class="pin" v-if="showPinned">
+                  <FAIcon
+                    icon="thumbtack"
+                    class="faint"
+                  />
+                  <span class="faint">{{ $t('status.pinned') }}</span>
+                </span>
                 <router-link
                   class="timeago faint"
                   :to="{ name: 'conversation', params: { id: status.id } }"

src/components/still-image/still-image-emoji-popover.js

@@ -0,0 +1,72 @@
+import Popover from 'components/popover/popover.vue'
+import SelectComponent from 'components/select/select.vue'
+
+import StillImage from './still-image.vue'
+import { mapState } from 'pinia'
+
+import { useInterfaceStore } from 'src/stores/interface'
+import { useEmojiStore } from 'src/stores/emoji'
+
+export default {
+  components: { StillImage, Popover, SelectComponent },
+  props: {
+    shortcode: {
+      type: String,
+      required: true,
+    },
+    isLocal: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      packName: '',
+    }
+  },
+  computed: {
+    isUserAdmin() {
+      return this.$store.state.users.currentUser?.rights.admin
+    },
+    ...mapState(useEmojiStore, ['adminPacksLocal', 'adminPacksLocalLoading'])
+  },
+  methods: {
+    displayError(msg) {
+      useInterfaceStore().pushGlobalNotice({
+        messageKey: 'admin_dash.emoji.error',
+        messageArgs: [msg],
+        level: 'error',
+      })
+    },
+    copyToLocalPack() {
+      this.$store.state.api.backendInteractor
+        .addNewEmojiFile({
+          packName: this.packName,
+          file: this.$attrs.src,
+          shortcode: this.shortcode,
+          filename: '',
+        })
+        .then((resp) => resp.json())
+        .then((resp) => {
+          if (resp.error !== undefined) {
+            this.displayError(resp.error)
+            return
+          }
+          useInterfaceStore().pushGlobalNotice({
+            messageKey: 'admin_dash.emoji.copied_successfully',
+            messageArgs: [this.shortcode, this.packName],
+            level: 'success',
+          })
+
+          this.$refs.emojiPopover.hidePopover()
+          this.packName = ''
+        })
+    },
+
+    fetchEmojiPacksIfAdmin() {
+      useEmojiStore().getAdminPacksLocal().then(() => {
+        this.$refs.emojiPopover.updateStyles()
+      })
+    },
+  },
+}

src/components/still-image/still-image-emoji-popover.vue

@@ -21,169 +21,53 @@
           />
         </div>
 
-        <div v-if="isUserAdmin && !isLocal">
+        <template v-if="isUserAdmin && !isLocal">
-          <button
+          <span
-            class="button button-default btn emoji-popover-button"
+            v-if="adminPacksLocalLoading"
-            type="button"
+            class="loading-spinner"
-            :disabled="packName == ''"
-            @click="copyToLocalPack"
           >
-            {{ $t('admin_dash.emoji.copy_to_pack') }}
+            <FAIcon
-          </button>
+              class="fa-old-padding"
+              spin
+              icon="circle-notch"
+            />
+          </span>
+          <div v-else>
+            <button
+              class="button button-default btn emoji-popover-button"
+              type="button"
+              :disabled="packName == ''"
+              @click="copyToLocalPack"
+            >
+              {{ $t('admin_dash.emoji.copy_to_pack') }}
+            </button>
 
-          <SelectComponent
+            <SelectComponent
-            v-model="packName"
+              v-model="packName"
-          >
-            <option
-              value=""
-              disabled
-              hidden
             >
-              {{ $t('admin_dash.emoji.emoji_pack') }}
+              <option
-            </option>
+                value=""
-            <option
+                disabled
-              v-for="(pack, listPackName) in knownLocalPacks"
+                hidden
-              :key="listPackName"
+              >
-              :label="listPackName"
+                {{ $t('admin_dash.emoji.emoji_pack') }}
-            >
+              </option>
-              {{ listPackName }}
+              <option
-            </option>
+                v-for="(pack, listPackName) in adminPacksLocal"
-          </SelectComponent>
+                :key="listPackName"
-        </div>
+                :label="listPackName"
+              >
+                {{ listPackName }}
+              </option>
+            </SelectComponent>
+          </div>
+        </template>
       </div>
     </template>
   </Popover>
 </template>
 
-<script>
+<script src="./still-image-emoji-popover" />
-import Popover from 'components/popover/popover.vue'
-import SelectComponent from 'components/select/select.vue'
-import { assign } from 'lodash'
-
-import StillImage from './still-image.vue'
-
-import { useInstanceStore } from 'src/stores/instance.js'
-import { useInterfaceStore } from 'src/stores/interface'
-
-export default {
-  components: { StillImage, Popover, SelectComponent },
-  props: {
-    shortcode: {
-      type: String,
-      required: true,
-    },
-    isLocal: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      knownLocalPacks: {},
-      packName: '',
-    }
-  },
-  computed: {
-    isUserAdmin() {
-      return this.$store.state.users.currentUser.rights.admin
-    },
-  },
-  methods: {
-    displayError(msg) {
-      useInterfaceStore().pushGlobalNotice({
-        messageKey: 'admin_dash.emoji.error',
-        messageArgs: [msg],
-        level: 'error',
-      })
-    },
-    copyToLocalPack() {
-      this.$store.state.api.backendInteractor
-        .addNewEmojiFile({
-          packName: this.packName,
-          file: this.$attrs.src,
-          shortcode: this.shortcode,
-          filename: '',
-        })
-        .then((resp) => resp.json())
-        .then((resp) => {
-          if (resp.error !== undefined) {
-            this.displayError(resp.error)
-            return
-          }
-          useInterfaceStore().pushGlobalNotice({
-            messageKey: 'admin_dash.emoji.copied_successfully',
-            messageArgs: [this.shortcode, this.packName],
-            level: 'success',
-          })
-
-          this.$refs.emojiPopover.hidePopover()
-          this.packName = ''
-        })
-    },
-
-    // Copied from emoji_tab.js
-    loadPacksPaginated(listFunction) {
-      const pageSize = 25
-      const allPacks = {}
-
-      return listFunction({
-        instance: useInstanceStore().server,
-        page: 1,
-        pageSize: 0,
-      })
-        .then((data) => data.json())
-        .then((data) => {
-          if (data.error !== undefined) {
-            return Promise.reject(data.error)
-          }
-
-          let resultingPromise = Promise.resolve({})
-          for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
-            resultingPromise = resultingPromise
-              .then(() =>
-                listFunction({
-                  instance: useInstanceStore().server,
-                  page: i,
-                  pageSize,
-                }),
-              )
-              .then((data) => data.json())
-              .then((pageData) => {
-                if (pageData.error !== undefined) {
-                  return Promise.reject(pageData.error)
-                }
-
-                assign(allPacks, pageData.packs)
-              })
-          }
-
-          return resultingPromise
-        })
-        .then(() => allPacks)
-        .catch((data) => {
-          this.displayError(data)
-        })
-    },
-    fetchEmojiPacksIfAdmin() {
-      if (!this.isUserAdmin) return
-
-      this.loadPacksPaginated(
-        this.$store.state.api.backendInteractor.listEmojiPacks,
-      ).then((allPacks) => {
-        // Sort by key
-        const sorted = Object.keys(allPacks)
-          .sort()
-          .reduce((acc, key) => {
-            if (key.length === 0) return acc
-            acc[key] = allPacks[key]
-            return acc
-          }, {})
-        this.knownLocalPacks = sorted
-      })
-    },
-  },
-}
-</script>
 
 <style>
   .emoji-popover {
@@ -191,8 +75,8 @@ export default {
     text-align: center;
 
     .emoji {
-      width: 4.6em;
+      width: calc(var(--emoji-size) * 3);
-      height: 4.6em;
+      height: calc(var(--emoji-size) * 3);
     }
 
     .emoji-popover-centered {

src/components/user_card/user_card.scss

@@ -86,7 +86,7 @@
     padding: 0.6em;
 
     &:not(:last-child) {
-      border-bottom: 1px solid var(--border);
+      border-bottom: 1px dotted var(--border);
     }
 
     .highlighter {

src/components/user_list_popover/user_list_popover.js

@@ -4,6 +4,9 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
@@ -29,6 +32,15 @@ const UserListPopover = {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
   },
+  methods: {
+    generateProfileLink(user) {
+      return generateProfileLink(
+        user.id,
+        user.screen_name,
+        useInstanceStore().restrictedNicknames,
+      )
+    },
+  }
 }
 
 export default UserListPopover

src/components/user_list_popover/user_list_popover.vue

@@ -10,8 +10,9 @@
     <template #content>
       <div class="user-list-popover">
         <template v-if="users.length">
-          <div
+          <router-link
             v-for="(user) in usersCapped"
+            :to="generateProfileLink(user)"
             :key="user.id"
             class="user-list-row"
           >
@@ -32,7 +33,7 @@
               <!-- eslint-enable vue/no-v-html -->
               <span class="user-list-screen-name">{{ user.screen_name_ui }}</span><UnicodeDomainIndicator :user="user" />
             </div>
-          </div>
+          </router-link>
         </template>
         <template v-else>
           <FAIcon
@@ -58,6 +59,7 @@
     padding: 0.25em;
     display: flex;
     flex-direction: row;
+    color: var(--text);
 
     .user-list-names {
       display: flex;

src/services/api/api.service.js

@@ -2089,6 +2089,7 @@ const listEmojiPacks = ({ page, pageSize }) => {
 }
 
 const listRemoteEmojiPacks = ({ instance, page, pageSize }) => {
+  console.log(instance)
   if (!instance.startsWith('http')) {
     instance = 'https://' + instance
   }

src/stores/emoji.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 
+import { merge } from 'lodash'
 import { useInstanceStore } from 'src/stores/instance.js'
 
 import { ensureFinalFallback } from 'src/i18n/languages.js'
@@ -10,6 +11,8 @@ const defaultState = {
   // Custom emoji from server
   customEmoji: [],
   customEmojiFetched: false,
+  adminPacksLocal: null,
+  adminPacksLocalLoading: true,
 
   // Unicode emoji from bundle
   emoji: {},
@@ -178,6 +181,78 @@ export const useEmojiStore = defineStore('emoji', {
       )
     },
 
+    async getAdminPacksLocal(refresh) {
+      if (!refresh && this.adminPacksLocal) return this.adminPacksLocal
+      const backendInteractor = window.vuex.state.api.backendInteractor
+      const listFunction = backendInteractor.listEmojiPacks
+
+      this.adminPacksLocalLoading = true
+      this.adminPacksLocal = await this.getAdminPacks(useInstanceStore().server, listFunction)
+      this.adminPacksLocalLoading = false
+    },
+
+    async getAdminPacks(instance, listFunction) {
+      const currentUser = window.vuex.state.users.currentUser
+
+      if (!currentUser.rights.admin) return
+
+      const pageSize = 25
+      const allPacks = {}
+
+
+      return await listFunction({
+        instance,
+        page: 1,
+        pageSize: 0,
+      })
+        .then((data) => data.json())
+        .then((data) => {
+          if (data.error !== undefined) {
+            return Promise.reject(data.error)
+          }
+
+          const promises = []
+
+          for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
+            promises.push(
+              listFunction({
+                instance,
+                page: i,
+                pageSize,
+              })
+                .then((data) => data.json())
+                .then((pageData) => {
+                if (pageData.error !== undefined) {
+                  return Promise.reject(pageData.error)
+                }
+
+                  return pageData.packs
+                })
+            )
+          }
+
+          return Promise
+            .all(promises)
+            .then((results) => {
+              return merge({}, ...results)
+            })
+        })
+        .then((allPacks) => {
+          // Sort by key
+          return Object
+            .keys(allPacks)
+            .sort()
+            .reduce((acc, key) => {
+              if (key.length === 0) return acc
+              acc[key] = allPacks[key]
+              return acc
+            }, {})
+        })
+        .catch((data) => {
+          this.displayError(data)
+        })
+    },
+
     async getCustomEmoji() {
       try {
         let res = await window.fetch('/api/v1/pleroma/emoji')