nothing

add parseInt in poll expires_in to make sure FE sends integers in all cases

Closes #1251

See merge request pleroma/pleroma-fe!1802

ci/deploy.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-TARGET="pleroma@froth.zone:/opt/pleroma-fe"
+TARGET="pleroma@froth.zone:/var/www/pleroma/pleroma-fe"
 
 #rsync -ra public/ "${TARGET}/instance/static"
 #cp dist/index.html  "${TARGET}/instance/static/index.html"

package.json

@@ -15,12 +15,12 @@
     "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@babel/runtime": "7.20.7",
+    "@babel/runtime": "7.21.0",
     "@chenfengyuan/vue-qrcode": "2.0.0",
-    "@fortawesome/fontawesome-svg-core": "6.2.1",
-    "@fortawesome/free-regular-svg-icons": "6.2.1",
-    "@fortawesome/free-solid-svg-icons": "6.2.1",
-    "@fortawesome/vue-fontawesome": "3.0.2",
+    "@fortawesome/fontawesome-svg-core": "6.3.0",
+    "@fortawesome/free-regular-svg-icons": "6.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.3.0",
+    "@fortawesome/vue-fontawesome": "3.0.3",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
     "@vuelidate/core": "2.0.0",
@@ -47,11 +47,11 @@
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.20.7",
+    "@babel/core": "7.21.0",
     "@babel/eslint-parser": "7.19.1",
-    "@babel/plugin-transform-runtime": "7.19.6",
+    "@babel/plugin-transform-runtime": "7.21.0",
     "@babel/preset-env": "7.20.2",
-    "@babel/register": "7.18.9",
+    "@babel/register": "7.21.0",
     "@intlify/vue-i18n-loader": "5.0.0",
     "@ungap/event-target": "0.2.3",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",

src/boot/after_store.js

@@ -253,6 +253,7 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
       store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
       store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
+      store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') || features.includes('custom_emoji_reactions') })
       store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
       store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
       store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })

src/components/emoji_input/emoji_input.js

@@ -134,6 +134,9 @@ const EmojiInput = {
     padEmoji () {
       return this.$store.getters.mergedConfig.padEmoji
     },
+    defaultCandidateIndex () {
+      return this.$store.getters.mergedConfig.autocompleteSelect ? 0 : -1
+    },
     preText () {
       return this.modelValue.slice(0, this.caret)
     },
@@ -287,7 +290,7 @@ const EmojiInput = {
           ...rest,
           img: imageUrl || ''
         }))
-      this.highlighted = -1
+      this.highlighted = this.defaultCandidateIndex
       this.$refs.screenReaderNotice.announce(
         this.$tc('tool_tip.autocomplete_available',
           this.suggestions.length,

src/components/emoji_input/suggestor.js

@@ -94,8 +94,9 @@ export const suggestUsers = ({ dispatch, state }) => {
 
     const newSuggestions = state.users.users.filter(
       user =>
-        user.screen_name.toLowerCase().startsWith(noPrefix) ||
-        user.name.toLowerCase().startsWith(noPrefix)
+        user.screen_name && user.name && (
+          user.screen_name.toLowerCase().startsWith(noPrefix) ||
+            user.name.toLowerCase().startsWith(noPrefix))
     ).slice(0, 20).sort((a, b) => {
       let aScore = 0
       let bScore = 0

src/components/emoji_picker/emoji_picker.js

@@ -98,6 +98,11 @@ const EmojiPicker = {
       required: false,
       type: Boolean,
       default: false
+    },
+    hideCustomEmoji: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -280,6 +285,9 @@ const EmojiPicker = {
       return 0
     },
     allCustomGroups () {
+      if (this.hideCustomEmoji) {
+        return {}
+      }
       const emojis = this.$store.getters.groupedCustomEmojis
       if (emojis.unpacked) {
         emojis.unpacked.text = this.$t('emoji.unpacked')

src/components/emoji_reactions/emoji_reactions.vue

@@ -2,7 +2,7 @@
   <div class="EmojiReactions">
     <UserListPopover
       v-for="(reaction) in emojiReactions"
-      :key="reaction.name"
+      :key="reaction.url || reaction.name"
       :users="accountsForEmoji[reaction.name]"
     >
       <button
@@ -11,7 +11,21 @@
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
-        <span class="reaction-emoji">{{ reaction.name }}</span>
+        <span
+          class="reaction-emoji"
+        >
+          <img
+            v-if="reaction.url"
+            :src="reaction.url"
+            :title="reaction.name"
+            class="reaction-emoji-content"
+            width="1em"
+          >
+          <span
+            v-else
+            class="reaction-emoji reaction-emoji-content"
+          >{{ reaction.name }}</span>
+        </span>
         <span>{{ reaction.count }}</span>
       </button>
     </UserListPopover>
@@ -35,6 +49,8 @@
   margin-top: 0.25em;
   flex-wrap: wrap;
 
+  --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));
+
   .emoji-reaction {
     padding: 0 0.5em;
     margin-right: 0.5em;
@@ -45,8 +61,24 @@
     box-sizing: border-box;
 
     .reaction-emoji {
-      width: 1.25em;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       margin-right: 0.25em;
+      line-height: var(--emoji-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .reaction-emoji-content {
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      line-height: inherit;
+      overflow: hidden;
+      font-size: calc(var(--emoji-size) * 0.8);
+      margin: 0;
     }
 
     &:focus {

src/components/font_control/font_control.vue

@@ -4,6 +4,7 @@
     :class="{ custom: isCustom }"
   >
     <label
+      :id="name + '-label'"
       :for="preset === 'custom' ? name : name + '-font-switcher'"
       class="label"
     >
@@ -12,7 +13,8 @@
     <input
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
-      class="opt exlcude-disabled"
+      :aria-labelledby="name + '-label'"
+      class="opt exlcude-disabled visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@@ -21,6 +23,7 @@
       v-if="typeof fallback !== 'undefined'"
       class="opt-l"
       :for="name + '-o'"
+      :aria-hidden="true"
     />
     {{ ' ' }}
     <Select

src/components/navigation/navigation.js

@@ -87,3 +87,21 @@ export const ROOT_ITEMS = {
     criteria: ['announcements']
   }
 }
+
+export function routeTo (item, currentUser) {
+  if (!item.route && !item.routeObject) return null
+
+  let route
+
+  if (item.routeObject) {
+    route = item.routeObject
+  } else {
+    route = { name: (item.anon || currentUser) ? item.route : item.anonRoute }
+  }
+
+  if (USERNAME_ROUTES.has(route.name)) {
+    route.params = { username: currentUser.screen_name, name: currentUser.screen_name }
+  }
+
+  return route
+}

src/components/navigation/navigation_entry.js

@@ -1,5 +1,5 @@
 import { mapState } from 'vuex'
-import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
+import { routeTo } from 'src/components/navigation/navigation.js'
 import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
@@ -26,17 +26,7 @@ const NavigationEntry = {
   },
   computed: {
     routeTo () {
-      if (!this.item.route && !this.item.routeObject) return null
-      let route
-      if (this.item.routeObject) {
-        route = this.item.routeObject
-      } else {
-        route = { name: (this.item.anon || this.currentUser) ? this.item.route : this.item.anonRoute }
-      }
-      if (USERNAME_ROUTES.has(route.name)) {
-        route.params = { username: this.currentUser.screen_name, name: this.currentUser.screen_name }
-      }
-      return route
+      return routeTo(this.item, this.currentUser)
     },
     getters () {
       return this.$store.getters

src/components/navigation/navigation_pins.js

@@ -1,5 +1,5 @@
 import { mapState } from 'vuex'
-import { TIMELINES, ROOT_ITEMS, USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
+import { TIMELINES, ROOT_ITEMS, routeTo } from 'src/components/navigation/navigation.js'
 import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -31,14 +31,7 @@ const NavPanel = {
   props: ['limit'],
   methods: {
     getRouteTo (item) {
-      if (item.routeObject) {
-        return item.routeObject
-      }
-      const route = { name: (item.anon || this.currentUser) ? item.route : item.anonRoute }
-      if (USERNAME_ROUTES.has(route.name)) {
-        route.params = { username: this.currentUser.screen_name }
-      }
-      return route
+      return routeTo(item, this.currentUser)
     }
   },
   computed: {

src/components/notification/notification.vue

@@ -121,7 +121,16 @@
                   scope="global"
                   keypath="notifications.reacted_with"
                 >
-                  <span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
+                  <img
+                    v-if="notification.emoji_url"
+                    class="emoji-reaction-emoji emoji-reaction-emoji-image"
+                    :src="notification.emoji_url"
+                    :name="notification.emoji"
+                  >
+                  <span
+                    v-else
+                    class="emoji-reaction-emoji"
+                  >{{ notification.emoji }}</span>
                 </i18n-t>
               </small>
             </span>
@@ -153,8 +162,8 @@
             </router-link>
             <button
               class="button-unstyled expand-icon"
-              :title="$t('tool_tip.toggle_expand')"
               :aria-expanded="statusExpanded"
+              :title="$t('tool_tip.toggle_expand')"
               @click.prevent="toggleStatusExpanded"
             >
               <FAIcon

src/components/notifications/notifications.scss

@@ -129,6 +129,13 @@
 
   .emoji-reaction-emoji {
     font-size: 1.3em;
+    max-width: 1.25em;
+    height: 1.25em;
+    width: auto;
+  }
+
+  .emoji-reaction-emoji-image {
+    vertical-align: middle;
   }
 
   .notification-details {

src/components/poll/poll.js

@@ -12,7 +12,8 @@ export default {
   data () {
     return {
       loading: false,
-      choices: []
+      choices: [],
+      randomSeed: `${Math.random()}`.replace('.', '-')
     }
   },
   created () {

src/components/poll/poll.vue

@@ -4,53 +4,63 @@
     :class="containerClass"
   >
     <div
-      v-for="(option, index) in options"
-      :key="index"
-      class="poll-option"
+      :role="showResults ? 'section' : (poll.multiple ? 'group' : 'radiogroup')"
     >
       <div
-        v-if="showResults"
-        :title="resultTitle(option)"
-        class="option-result"
+        v-for="(option, index) in options"
+        :key="index"
+        class="poll-option"
       >
-        <div class="option-result-label">
-          <span class="result-percentage">
-            {{ percentageForOption(option.votes_count) }}%
-          </span>
-          <RichContent
-            :html="option.title_html"
-            :handle-links="false"
-            :emoji="emoji"
+        <div
+          v-if="showResults"
+          :title="resultTitle(option)"
+          class="option-result"
+        >
+          <div class="option-result-label">
+            <span class="result-percentage">
+              {{ percentageForOption(option.votes_count) }}%
+            </span>
+            <RichContent
+              :html="option.title_html"
+              :handle-links="false"
+              :emoji="emoji"
+            />
+          </div>
+          <div
+            class="result-fill"
+            :style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
           />
         </div>
         <div
-          class="result-fill"
-          :style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
-        />
-      </div>
-      <div
-        v-else
-        @click="activateOption(index)"
-      >
-        <input
-          v-if="poll.multiple"
-          type="checkbox"
-          :disabled="loading"
-          :value="index"
-        >
-        <input
           v-else
-          type="radio"
-          :disabled="loading"
-          :value="index"
+          tabindex="0"
+          :role="poll.multiple ? 'checkbox' : 'radio'"
+          :aria-labelledby="`option-vote-${randomSeed}-${index}`"
+          :aria-checked="choices[index]"
+          @click="activateOption(index)"
         >
-        <label class="option-vote">
-          <RichContent
-            :html="option.title_html"
-            :handle-links="false"
-            :emoji="emoji"
-          />
-        </label>
+          <input
+            v-if="poll.multiple"
+            type="checkbox"
+            class="poll-checkbox"
+            :disabled="loading"
+            :value="index"
+          >
+          <input
+            v-else
+            type="radio"
+            :disabled="loading"
+            :value="index"
+          >
+          <label class="option-vote">
+            <RichContent
+              :id="`option-vote-${randomSeed}-${index}`"
+              :html="option.title_html"
+              :handle-links="false"
+              :emoji="emoji"
+            />
+          </label>
+        </div>
       </div>
     </div>
     <div class="footer faint">
@@ -161,5 +171,9 @@
     padding: 0 0.5em;
     margin-right: 0.5em;
   }
+
+  .poll-checkbox {
+    display: none;
+  }
 }
 </style>

src/components/post_status_form/post_status_form.vue

@@ -281,12 +281,10 @@
         >
           {{ $t('post_status.post') }}
         </button>
-        <!-- touchstart is used to keep the OSK at the same position after a message send -->
         <button
           v-else
           :disabled="uploadingFiles || disableSubmit"
           class="btn button-default"
-          @touchstart.stop.prevent="postStatus($event, newStatus)"
           @click.stop.prevent="postStatus($event, newStatus)"
         >
           {{ $t('post_status.post') }}

src/components/range_input/range_input.vue

@@ -4,6 +4,7 @@
     :class="{ disabled: !present || disabled }"
   >
     <label
+      :id="name + '-label'"
       :for="name"
       class="label"
     >
@@ -12,7 +13,8 @@
     <input
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
-      class="opt"
+      :aria-labelledby="name + '-label'"
+      class="opt visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"
@@ -21,6 +23,7 @@
       v-if="typeof fallback !== 'undefined'"
       class="opt-l"
       :for="name + '-o'"
+      :aria-hidden="true"
     />
     <input
       :id="name"
@@ -34,9 +37,10 @@
       @input="$emit('update:modelValue', $event.target.value)"
     >
     <input
-      :id="name"
+      :id="name + '-numeric'"
       class="input-number"
       type="number"
+      :aria-labelledby="name + '-label'"
       :value="modelValue || fallback"
       :disabled="!present || disabled"
       :max="hardMax"

src/components/react_button/react_button.js

@@ -1,10 +1,9 @@
-import Checkbox from '../checkbox/checkbox.vue'
+// import Checkbox from '../checkbox/checkbox.vue'
 import Popover from '../popover/popover.vue'
-import { ensureFinalFallback } from '../../i18n/languages.js'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
-import { trim } from 'lodash'
 
 library.add(
   faPlus,
@@ -22,108 +21,33 @@ const ReactButton = {
   },
   components: {
     Popover,
-    Checkbox
+    EmojiPicker
   },
   methods: {
-    addReaction (event, emoji, close, keepReactOpen) {
+    addReaction (event) {
+      const emoji = event.insertion
       const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
       } else {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
-      this.keepReactOpen = keepReactOpen
-      if (!keepReactOpen) {
-        close()
+    },
+    show () {
+      if (!this.expanded) {
+        this.$refs.picker.showPicker()
       }
     },
     onShow () {
       this.expanded = true
-      this.focusInput()
     },
     onClose () {
       this.expanded = false
-    },
-    focusInput () {
-      this.$nextTick(() => {
-        const input = document.querySelector('.reaction-picker-filter > input')
-        if (input) input.focus()
-      })
-    },
-    // Vaguely adjusted copypaste from emoji_input and emoji_picker!
-    maybeLocalizedEmojiNamesAndKeywords (emoji) {
-      const names = [emoji.displayText]
-      const keywords = []
-
-      if (emoji.displayTextI18n) {
-        names.push(this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args))
-      }
-
-      if (emoji.annotations) {
-        this.languages.forEach(lang => {
-          names.push(emoji.annotations[lang]?.name)
-
-          keywords.push(...(emoji.annotations[lang]?.keywords || []))
-        })
-      }
-
-      return {
-        names: names.filter(k => k),
-        keywords: keywords.filter(k => k)
-      }
-    },
-    maybeLocalizedEmojiName (emoji) {
-      if (!emoji.annotations) {
-        return emoji.displayText
-      }
-
-      if (emoji.displayTextI18n) {
-        return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
-      }
-
-      for (const lang of this.languages) {
-        if (emoji.annotations[lang]?.name) {
-          return emoji.annotations[lang].name
-        }
-      }
-
-      return emoji.displayText
     }
   },
   computed: {
-    commonEmojis () {
-      const hardcodedSet = new Set(['👍', '😠', '👀', '😂', '🔥', '🤥', '🤔', '🤪', '🤸‍♂️', '💊', '✍️', '✏️', '📈', '📉', '❔', '❌', '🦧', '🦉', '🍼', '🖍️', '🔧', '🧛🏿'])
-      return this.$store.getters.standardEmojiList.filter(emoji => hardcodedSet.has(emoji.replacement))
-    },
-    languages () {
-      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
-    },
-    emojis () {
-      if (this.filterWord !== '') {
-        const keywordLowercase = trim(this.filterWord.toLowerCase())
-
-        const orderedEmojiList = []
-        for (const emoji of this.$store.getters.standardEmojiList) {
-          const indices = this.maybeLocalizedEmojiNamesAndKeywords(emoji)
-            .keywords
-            .map(k => k.toLowerCase().indexOf(keywordLowercase))
-            .filter(k => k > -1)
-
-          const indexOfKeyword = indices.length ? Math.min(...indices) : -1
-
-          if (indexOfKeyword > -1) {
-            if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
-              orderedEmojiList[indexOfKeyword] = []
-            }
-            orderedEmojiList[indexOfKeyword].push(emoji)
-          }
-        }
-        return orderedEmojiList.flat()
-      }
-      return this.$store.getters.standardEmojiList || []
-    },
-    mergedConfig () {
-      return this.$store.getters.mergedConfig
+    hideCustomEmoji () {
+      return !this.$store.state.instance.pleromaChatMessagesAvailable
     }
   }
 }

src/components/react_button/react_button.vue

@@ -1,78 +1,39 @@
 <template>
-  <Popover
-    trigger="click"
-    class="ReactButton"
-    placement="top"
-    :offset="{ y: 5 }"
-    :bound-to="{ x: 'container' }"
-    remove-padding
-    popover-class="ReactButton popover-default"
-    @show="onShow"
-    @close="onClose"
-  >
-    <template #content="{close}">
-      <div class="reaction-picker-filter">
-        <input
-          v-model="filterWord"
-          size="1"
-          :placeholder="$t('emoji.search_emoji')"
-          @input="$event.target.composing = false"
-        >
-      </div>
-      <div class="keep-open">
-        <Checkbox v-model="keepReactOpen">
-          {{ $t('emoji.keep_open') }}
-        </Checkbox>
-      </div>
-      <div class="reaction-picker">
-        <span
-          v-for="emoji in commonEmojis"
-          :key="emoji.replacement"
-          class="emoji-button"
-          :title="maybeLocalizedEmojiName(emoji)"
-          @click="addReaction($event, emoji.replacement, close, keepReactOpen)"
-        >
-          {{ emoji.replacement }}
-        </span>
-        <div class="reaction-picker-divider" />
-        <span
-          v-for="(emoji, key) in emojis"
-          :key="key"
-          class="emoji-button"
-          :title="maybeLocalizedEmojiName(emoji)"
-          @click="addReaction($event, emoji.replacement, close, keepReactOpen)"
-        >
-          {{ emoji.replacement }}
-        </span>
-        <div class="reaction-bottom-fader" />
-      </div>
-    </template>
-    <template #trigger>
-      <span
-        class="button-unstyled popover-trigger"
-        :title="$t('tool_tip.add_reaction')"
-      >
-        <FALayers>
-          <FAIcon
-            class="fa-scale-110 fa-old-padding"
-            :icon="['far', 'smile-beam']"
-          />
-          <FAIcon
-            v-show="!expanded"
-            class="focus-marker"
-            transform="shrink-6 up-9 right-17"
-            icon="plus"
-          />
-          <FAIcon
-            v-show="expanded"
-            class="focus-marker"
-            transform="shrink-6 up-9 right-17"
-            icon="times"
-          />
-        </FALayers>
-      </span>
-    </template>
-  </Popover>
+  <span class="ReactButton">
+    <EmojiPicker
+      ref="picker"
+      :enable-sticker-picker="enableStickerPicker"
+      :hide-custom-emoji="hideCustomEmoji"
+      class="emoji-picker-panel"
+      @emoji="addReaction"
+      @show="onShow"
+      @close="onClose"
+    />
+    <span
+      class="button-unstyled popover-trigger"
+      :title="$t('tool_tip.add_reaction')"
+      @click.stop.prevent="show"
+    >
+      <FALayers>
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          :icon="['far', 'smile-beam']"
+        />
+        <FAIcon
+          v-show="!expanded"
+          class="focus-marker"
+          transform="shrink-6 up-9 right-17"
+          icon="plus"
+        />
+        <FAIcon
+          v-show="expanded"
+          class="focus-marker"
+          transform="shrink-6 up-9 right-17"
+          icon="times"
+        />
+      </FALayers>
+    </span>
+  </span>
 </template>
 
 <script src="./react_button.js"></script>
@@ -140,11 +101,6 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-  }
-
-  .popover-trigger-button {
-    /* override of popover internal stuff */
-    width: auto;
 
     @include unfocused-style {
       .focus-marker {

src/components/settings_modal/helpers/float_setting.vue

@@ -0,0 +1,16 @@
+<template>
+  <NumberSetting
+    v-bind="$attrs"
+  >
+    <slot />
+  </NumberSetting>
+</template>
+
+<script>
+import NumberSetting from './number_setting.vue'
+export default {
+  components: {
+    NumberSetting
+  }
+}
+</script>

src/components/settings_modal/helpers/integer_setting.vue

@@ -1,27 +1,17 @@
 <template>
-  <span
-    v-if="matchesExpertLevel"
-    class="IntegerSetting"
+  <NumberSetting
+    v-bind="$attrs"
+    truncate="1"
   >
-    <label :for="path">
-      <slot />
-    </label>
-    <input
-      :id="path"
-      class="number-input"
-      type="number"
-      step="1"
-      :disabled="disabled"
-      :min="min || 0"
-      :value="state"
-      @change="update"
-    >
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-  </span>
+    <slot />
+  </NumberSetting>
 </template>
 
-<script src="./integer_setting.js"></script>
+<script>
+import NumberSetting from './number_setting.vue'
+export default {
+  components: {
+    NumberSetting
+  }
+}
+</script>

src/components/settings_modal/helpers/number_setting.js

@@ -8,6 +8,8 @@ export default {
     path: String,
     disabled: Boolean,
     min: Number,
+    step: Number,
+    truncate: Number,
     expert: [Number, String]
   },
   computed: {
@@ -15,8 +17,11 @@ export default {
       const [firstSegment, ...rest] = this.path.split('.')
       return [firstSegment + 'DefaultValue', ...rest].join('.')
     },
+    parent () {
+      return this.$parent.$parent
+    },
     state () {
-      const value = get(this.$parent, this.path)
+      const value = get(this.parent, this.path)
       if (value === undefined) {
         return this.defaultState
       } else {
@@ -24,21 +29,28 @@ export default {
       }
     },
     defaultState () {
-      return get(this.$parent, this.pathDefault)
+      return get(this.parent, this.pathDefault)
     },
     isChanged () {
       return this.state !== this.defaultState
     },
     matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
+      return (this.expert || 0) <= this.parent.expertLevel
     }
   },
   methods: {
+    truncateValue (value) {
+      if (!this.truncate) {
+        return value
+      }
+
+      return Math.trunc(value / this.truncate) * this.truncate
+    },
     update (e) {
-      set(this.$parent, this.path, parseInt(e.target.value))
+      set(this.parent, this.path, this.truncateValue(parseFloat(e.target.value)))
     },
     reset () {
-      set(this.$parent, this.path, this.defaultState)
+      set(this.parent, this.path, this.defaultState)
     }
   }
 }

src/components/settings_modal/helpers/number_setting.vue

@@ -0,0 +1,27 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="NumberSetting"
+  >
+    <label :for="path">
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="number-input"
+      type="number"
+      :step="step || 1"
+      :disabled="disabled"
+      :min="min || 0"
+      :value="state"
+      @change="update"
+    >
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+  </span>
+</template>
+
+<script src="./number_setting.js"></script>

src/components/settings_modal/tabs/general_tab.js

@@ -2,6 +2,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
+import FloatSetting from '../helpers/float_setting.vue'
 import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
@@ -63,6 +64,7 @@ const GeneralTab = {
     BooleanSetting,
     ChoiceSetting,
     IntegerSetting,
+    FloatSetting,
     SizeSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,

src/components/settings_modal/tabs/general_tab.vue

@@ -308,6 +308,15 @@
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
+        <li>
+          <FloatSetting
+            v-if="user"
+            path="emojiReactionsScale"
+            expert="1"
+          >
+            {{ $t('settings.emoji_reactions_scale') }}
+          </FloatSetting>
+        </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
           <BooleanSetting
@@ -535,6 +544,14 @@
             {{ $t('settings.pad_emoji') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="autocompleteSelect"
+            expert="1"
+          >
+            {{ $t('settings.autocomplete_select_first') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
   </div>

src/components/shadow_control/shadow_control.vue

@@ -129,12 +129,13 @@
           v-model="selected.inset"
           :disabled="!present"
           name="inset"
-          class="input-inset"
+          class="input-inset visible-for-screenreader-only"
           type="checkbox"
         >
         <label
           class="checkbox-label"
           for="inset"
+          :aria-hidden="true"
         />
       </div>
       <div

src/components/status_body/status_body.vue

@@ -69,26 +69,29 @@
             @parseReady="onParseReady"
           />
           <div>
-              <label class="label">{{ $t('status.override_translation_source_language') }}</label>
-              {{ ' ' }}
-              <Select
-                id="source-language-switcher"
-                v-model="translateFrom"
-                class="preset-switcher"
+            <label class="label">{{ $t('status.override_translation_source_language') }}</label>
+            {{ ' ' }}
+            <Select
+              id="source-language-switcher"
+              v-model="translateFrom"
+              class="preset-switcher"
+            >
+              <option
+                v-for="language in translationLanguages"
+                :key="language.key"
+                :value="language.value"
               >
-                <option
-                  v-for="language in translationLanguages"
-                  :key="language.key"
-                  :value="language.value"
-                >
-                  {{ language.label }}
-                </option>
-              </Select>
-              {{ ' ' }}
-              <button @click="translateStatus" class="btn button-default">
-                {{ $t('status.translate') }}
-              </button>
-            </div>
+                {{ language.label }}
+              </option>
+            </Select>
+            {{ ' ' }}
+            <button
+              class="btn button-default"
+              @click="translateStatus"
+            >
+              {{ $t('status.translate') }}
+            </button>
+          </div>
         </div>
 
         <button

src/components/tab_switcher/tab_switcher.jsx

@@ -117,6 +117,7 @@ export default {
                 onClick={this.clickTab(index)}
                 class={classesTab.join(' ')}
                 type="button"
+                role="tab"
               >
                 <img src={props.image} title={props['image-tooltip']}/>
                 {props.label ? '' : props.label}
@@ -131,6 +132,7 @@ export default {
               onClick={this.clickTab(index)}
               class={classesTab.join(' ')}
               type="button"
+              role="tab"
             >
               {!props.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={props.icon}/>)}
               <span class="text">
@@ -167,11 +169,15 @@ export default {
 
     return (
       <div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}>
-        <div class="tabs">
+        <div
+          class="tabs"
+          role="tablist"
+        >
           {tabs}
         </div>
         <div
           ref="contents"
+          role="tabpanel"
           class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
           v-body-scroll-lock={this.bodyScrollLock}
         >

src/i18n/en.json

@@ -472,8 +472,10 @@
     "domain_mutes": "Domains",
     "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
     "pad_emoji": "Pad emoji with spaces when adding from picker",
+    "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
     "swap_reacts": "Swap Reactions with Favorite Button",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
+    "emoji_reactions_scale": "Reactions scale factor",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "wordfilter": "Wordfilter",

src/i18n/zh.json

@@ -295,7 +295,7 @@
     "change_password_error": "修改密码的时候出了点问题。",
     "changed_password": "成功修改了密码！",
     "collapse_subject": "折叠带主题的内容",
-    "composing": "写作",
+    "composing": "撰写",
     "confirm_new_password": "确认新密码",
     "current_avatar": "当前头像",
     "current_password": "当前密码",
@@ -737,7 +737,8 @@
     "mention_link_use_tooltip": "点击提及链接时显示用户卡片",
     "mention_link_show_avatar": "在链接旁边显示用户头像",
     "mention_link_show_avatar_quick": "在提及内容旁边显示用户头像",
-    "user_popover_avatar_action_open": "打开个人资料"
+    "user_popover_avatar_action_open": "打开个人资料",
+    "autocomplete_select_first": "当有自动完成的结果时，自动选择第一个候选项"
   },
   "time": {
     "day": "{0} 天",

src/modules/config.js

@@ -105,6 +105,7 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
+  emojiReactionsScale: 1.0,
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -124,6 +125,7 @@ export const defaultState = {
   conversationOtherRepliesButton: undefined, // instance default
   conversationTreeFadeAncestors: undefined, // instance default
   maxDepthInThread: undefined, // instance default
+  autocompleteSelect: undefined, // instance default
   translationLanguage: undefined, // instance default,
   supportedTranslationLanguages: [] // instance default
 }
@@ -194,6 +196,7 @@ const config = {
         case 'sidebarColumnWidth':
         case 'contentColumnWidth':
         case 'notifsColumnWidth':
+        case 'emojiReactionsScale':
           applyConfig(state)
           break
         case 'customTheme':

src/modules/instance.js

@@ -107,6 +107,7 @@ const defaultState = {
   conversationOtherRepliesButton: 'below',
   conversationTreeFadeAncestors: false,
   maxDepthInThread: 6,
+  autocompleteSelect: false,
 
   // Nasty stuff
   customEmoji: [],
@@ -125,6 +126,7 @@ const defaultState = {
   // Feature-set, apparently, not everything here is reported...
   shoutAvailable: false,
   pleromaChatMessagesAvailable: false,
+  pleromaCustomEmojiReactionsAvailable: false,
   gopherAvailable: false,
   mediaProxyAvailable: false,
   suggestionsEnabled: false,

src/modules/statuses.js

@@ -656,7 +656,7 @@ const statuses = {
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
     translateStatus ({ rootState, commit }, { id, translation, language, from }) {
-      return rootState.api.backendInteractor.translateStatus({ id: id, translation, language, from })
+      return rootState.api.backendInteractor.translateStatus({ id, translation, language, from })
         .then((translation) => commit('setTranslatedStatus', { id, translation }))
     },
     muteConversation ({ rootState, commit }, statusId) {

src/services/api/api.service.js

@@ -857,7 +857,7 @@ const postStatus = ({
   })
   if (pollOptions.some(option => option !== '')) {
     const normalizedPoll = {
-      expires_in: poll.expiresIn,
+      expires_in: parseInt(poll.expiresIn, 10),
       multiple: poll.multiple
     }
     Object.keys(normalizedPoll).forEach(key => {
@@ -917,7 +917,7 @@ const editStatus = ({
 
   if (pollOptions.some(option => option !== '')) {
     const normalizedPoll = {
-      expires_in: poll.expiresIn,
+      expires_in: parseInt(poll.expiresIn, 10),
       multiple: poll.multiple
     }
     Object.keys(normalizedPoll).forEach(key => {

src/services/entity_normalizer/entity_normalizer.service.js

@@ -445,6 +445,7 @@ export const parseNotification = (data) => {
       : parseUser(data.target)
     output.from_profile = parseUser(data.account)
     output.emoji = data.emoji
+    output.emoji_url = data.emoji_url
     if (data.report) {
       output.report = data.report
       output.report.content = data.report.content

src/services/style_setter/style_setter.js

@@ -21,8 +21,8 @@ export const applyTheme = (input) => {
   body.classList.remove('hidden')
 }
 
-const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth }) =>
-  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth })
+const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
+  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })
 
 const defaultConfigColumns = configColumns(defaultState)
 

yarn.lock

@@ -14,6 +14,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ampproject/remapping@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "@ampproject/remapping@npm:2.2.0"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.1.0"
+    "@jridgewell/trace-mapping": "npm:^0.3.9"
+  checksum: 468104da656991a578ac6c9e074fe9e6a810c37e90106a738464c971a9cea37ae29c3752c8946f884a82da458597fdff57da70c4fca3fb560d29038132d2d524
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:7.0.0, @babel/code-frame@npm:^7.0.0":
   version: 7.0.0
   resolution: "@babel/code-frame@npm:7.0.0"
@@ -62,26 +72,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.20.7":
-  version: 7.20.7
-  resolution: "@babel/core@npm:7.20.7"
+"@babel/core@npm:7.21.0":
+  version: 7.21.0
+  resolution: "@babel/core@npm:7.21.0"
   dependencies:
-    "@ampproject/remapping": "npm:^2.1.0"
+    "@ampproject/remapping": "npm:^2.2.0"
     "@babel/code-frame": "npm:^7.18.6"
-    "@babel/generator": "npm:^7.20.7"
+    "@babel/generator": "npm:^7.21.0"
     "@babel/helper-compilation-targets": "npm:^7.20.7"
-    "@babel/helper-module-transforms": "npm:^7.20.7"
-    "@babel/helpers": "npm:^7.20.7"
-    "@babel/parser": "npm:^7.20.7"
+    "@babel/helper-module-transforms": "npm:^7.21.0"
+    "@babel/helpers": "npm:^7.21.0"
+    "@babel/parser": "npm:^7.21.0"
     "@babel/template": "npm:^7.20.7"
-    "@babel/traverse": "npm:^7.20.7"
-    "@babel/types": "npm:^7.20.7"
+    "@babel/traverse": "npm:^7.21.0"
+    "@babel/types": "npm:^7.21.0"
     convert-source-map: "npm:^1.7.0"
     debug: "npm:^4.1.0"
     gensync: "npm:^1.0.0-beta.2"
-    json5: "npm:^2.2.1"
+    json5: "npm:^2.2.2"
     semver: "npm:^6.3.0"
-  checksum: 8d4a8bec128417f0a3cbcfbfb153855ecd8cae825271ed42a8fd7f0dfdd9f0f24f05ca3b95a897524a445d44a308cd12a521b726c285f5f2a41c343cfdde9f91
+  checksum: 012560d64c2b0e8e3cc6a13fec5813a547d22223bfa80cb4262b83540fa6ce46cecc281f4a0610422235172d655325d2cf4142064fd380083060d50189a55149
   languageName: node
   linkType: hard
 
@@ -188,6 +198,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.21.0":
+  version: 7.21.1
+  resolution: "@babel/generator@npm:7.21.1"
+  dependencies:
+    "@babel/types": "npm:^7.21.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.2"
+    "@jridgewell/trace-mapping": "npm:^0.3.17"
+    jsesc: "npm:^2.5.1"
+  checksum: 270e9ffb474197bdb9e302c7d0cb269c6bedcfc108124c2d8948f09e5d90ab501ea2559f83896c4a7b548a2eec5b842bcc82bf359b39735ca619b22359dc88f6
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.16.7":
   version: 7.16.7
   resolution: "@babel/helper-annotate-as-pure@npm:7.16.7"
@@ -387,6 +409,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-function-name@npm:^7.21.0":
+  version: 7.21.0
+  resolution: "@babel/helper-function-name@npm:7.21.0"
+  dependencies:
+    "@babel/template": "npm:^7.20.7"
+    "@babel/types": "npm:^7.21.0"
+  checksum: 8dd9f12d53dd12ef9a90b41b2fa2bb330b96828990b3b1ea4faec01d4859c74d1e0fed51f73f90c50eb7e4aea95e75576de465662eed5ff345e14f6875ce427b
+  languageName: node
+  linkType: hard
+
 "@babel/helper-get-function-arity@npm:^7.16.7":
   version: 7.16.7
   resolution: "@babel/helper-get-function-arity@npm:7.16.7"
@@ -523,6 +555,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.21.0":
+  version: 7.21.0
+  resolution: "@babel/helper-module-transforms@npm:7.21.0"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.18.9"
+    "@babel/helper-module-imports": "npm:^7.18.6"
+    "@babel/helper-simple-access": "npm:^7.20.2"
+    "@babel/helper-split-export-declaration": "npm:^7.18.6"
+    "@babel/helper-validator-identifier": "npm:^7.19.1"
+    "@babel/template": "npm:^7.20.7"
+    "@babel/traverse": "npm:^7.21.0"
+    "@babel/types": "npm:^7.21.0"
+  checksum: c98389b5a1c4b5debacbfb530a7b75eb8271396e5f98922ffcf504c84d6899ff62cc167238f66dde3c2c92ca77dd40ce70c9abac0b2f6d2e68163c9a676b10e3
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-optimise-call-expression@npm:7.18.6"
@@ -760,14 +808,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.20.7":
-  version: 7.20.7
-  resolution: "@babel/helpers@npm:7.20.7"
+"@babel/helpers@npm:^7.21.0":
+  version: 7.21.0
+  resolution: "@babel/helpers@npm:7.21.0"
   dependencies:
     "@babel/template": "npm:^7.20.7"
-    "@babel/traverse": "npm:^7.20.7"
-    "@babel/types": "npm:^7.20.7"
-  checksum: 7dfa50d44c1ecd71a06116e0343aaeea3d93a10df2d452e327e15e33645201e5155f28b3550d242892e595364d88d3169a738e25bf758432cfe276999b11c777
+    "@babel/traverse": "npm:^7.21.0"
+    "@babel/types": "npm:^7.21.0"
+  checksum: 540e8d0c199fdddc8160c37a84f137ddb372eb0d710f9d519c3843916b1e9ff52ee1439435c24ad0818178b7e6715de6e37e51e33cff17f7722edf3e92e9a8ad
   languageName: node
   linkType: hard
 
@@ -876,6 +924,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.21.0":
+  version: 7.21.1
+  resolution: "@babel/parser@npm:7.21.1"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 4692c4da80404b7cdb5f3806b25f51dfc0583003a2ef0a7c5582f6c9a388d6ab1bd58735c8d813feab1fa65a1130a7fbd297f410a98d876fb5627ae50e7d3139
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.18.6"
@@ -1588,19 +1645,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:7.19.6":
-  version: 7.19.6
-  resolution: "@babel/plugin-transform-runtime@npm:7.19.6"
+"@babel/plugin-transform-runtime@npm:7.21.0":
+  version: 7.21.0
+  resolution: "@babel/plugin-transform-runtime@npm:7.21.0"
   dependencies:
     "@babel/helper-module-imports": "npm:^7.18.6"
-    "@babel/helper-plugin-utils": "npm:^7.19.0"
+    "@babel/helper-plugin-utils": "npm:^7.20.2"
     babel-plugin-polyfill-corejs2: "npm:^0.3.3"
     babel-plugin-polyfill-corejs3: "npm:^0.6.0"
     babel-plugin-polyfill-regenerator: "npm:^0.4.1"
     semver: "npm:^6.3.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 7767c5590811ab55ab11484056e5b6600735cd1779fa086d4d08ad4fc2b21925db95f7ed4c627c80ffe2c4ae66c400965e6db5a778587c9a00a9febc1588bea9
+  checksum: 49bba207790eaec9ce12755ce38bddc31f0a5e5bd77f875a1632f84eac9ba07688741216ffc977d4f76671411e9f24257932989c72eeae25d48de0529455fbd8
   languageName: node
   linkType: hard
 
@@ -1783,9 +1840,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/register@npm:7.18.9":
-  version: 7.18.9
-  resolution: "@babel/register@npm:7.18.9"
+"@babel/register@npm:7.21.0":
+  version: 7.21.0
+  resolution: "@babel/register@npm:7.21.0"
   dependencies:
     clone-deep: "npm:^4.0.1"
     find-cache-dir: "npm:^2.0.0"
@@ -1794,16 +1851,16 @@ __metadata:
     source-map-support: "npm:^0.5.16"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: e66100046daa1dee8bed8322d17f8374b47d3b30945accd3761303ca7bf93db406cea5edd530684b4964dbf969c1b5d0aaea07ecf5146ee68cf0fee6b1de88b5
+  checksum: 2d4e9d5a23a006d981c6bcd5ff71dbe71e29e05beb1b6b21bf14bd2a1c122de020d628d850e3fb3b366a1dd5f8a61fb8aac56216f9f84e56598da7f109526d5e
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.20.7":
-  version: 7.20.7
-  resolution: "@babel/runtime@npm:7.20.7"
+"@babel/runtime@npm:7.21.0":
+  version: 7.21.0
+  resolution: "@babel/runtime@npm:7.21.0"
   dependencies:
     regenerator-runtime: "npm:^0.13.11"
-  checksum: b22b904439569fa3b28627fc398d9bb9619f14bc9165cdf63ab5fa248660a10104ae81514607cbe55e4e26fe0d4048a89263f47f1f3da1e37f8e670b95acf244
+  checksum: adff473f615f797cffbd64d6839a5e3816e6e7942a6c9bfc23369e6d89a18c92eda974e2f538540a0ce543c28e3d637c59a0a8c391cee978e0b7dc31b606ef08
   languageName: node
   linkType: hard
 
@@ -1968,6 +2025,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.21.0":
+  version: 7.21.0
+  resolution: "@babel/traverse@npm:7.21.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.18.6"
+    "@babel/generator": "npm:^7.21.0"
+    "@babel/helper-environment-visitor": "npm:^7.18.9"
+    "@babel/helper-function-name": "npm:^7.21.0"
+    "@babel/helper-hoist-variables": "npm:^7.18.6"
+    "@babel/helper-split-export-declaration": "npm:^7.18.6"
+    "@babel/parser": "npm:^7.21.0"
+    "@babel/types": "npm:^7.21.0"
+    debug: "npm:^4.1.0"
+    globals: "npm:^11.1.0"
+  checksum: d1ffd7c6ed6392872d063ba07465f29125b1734d9b67218383ce4567ba831367af574a905399001bbcf134e987d2e97aa1120cc93796812b39f23a1790de29ee
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.0.0-beta.49":
   version: 7.2.2
   resolution: "@babel/types@npm:7.2.2"
@@ -2031,7 +2106,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.20.2, @babel/types@npm:^7.20.7, @babel/types@npm:^7.8.3":
+"@babel/types@npm:^7.20.2, @babel/types@npm:^7.20.7":
   version: 7.20.7
   resolution: "@babel/types@npm:7.20.7"
   dependencies:
@@ -2042,6 +2117,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.21.0":
+  version: 7.21.0
+  resolution: "@babel/types@npm:7.21.0"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.19.4"
+    "@babel/helper-validator-identifier": "npm:^7.19.1"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: fe4d4327cb218345d9cf4d8e38956ab00830714f69c97e2d26f4dc7e544c8e76ea3549a1e51110d1b176784ed48df95b88ba40c9a68589c863d1bddeb6ee93ff
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.7.4":
   version: 7.7.4
   resolution: "@babel/types@npm:7.7.4"
@@ -2053,6 +2139,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.8.3":
+  version: 7.21.3
+  resolution: "@babel/types@npm:7.21.3"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.19.4"
+    "@babel/helper-validator-identifier": "npm:^7.19.1"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: ee92ebb0c92a821ff938ca18283f92b159d6467618fd086b8307b4ebfbfb49f1e6a55111c944ee51000449ce8bc7abd4b8a7c8f24ba0361cfb2455412d3305e4
+  languageName: node
+  linkType: hard
+
 "@chenfengyuan/vue-qrcode@npm:2.0.0":
   version: 2.0.0
   resolution: "@chenfengyuan/vue-qrcode@npm:2.0.0"
@@ -2097,47 +2194,47 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-common-types@npm:6.2.1":
-  version: 6.2.1
-  resolution: "@fortawesome/fontawesome-common-types@npm:6.2.1"
-  checksum: dccff10b278a85faaf9f0e3cbcfd543c3c7a2870457bd710294fdbc0f3ce5b0bec720d989da0cff010656ff712e3766b8591f8c6ee8f9b5f2a2b6c238903572a
+"@fortawesome/fontawesome-common-types@npm:6.3.0":
+  version: 6.3.0
+  resolution: "@fortawesome/fontawesome-common-types@npm:6.3.0"
+  checksum: bde2ed1cd828160196829e8e3406a3ab66053fbdc5a06d904b2e0b0f950a13b595ff68da0938abddfaf130bbbe265d2f35a01909624e9083cbd02bb9c1683b75
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-svg-core@npm:6.2.1":
-  version: 6.2.1
-  resolution: "@fortawesome/fontawesome-svg-core@npm:6.2.1"
+"@fortawesome/fontawesome-svg-core@npm:6.3.0":
+  version: 6.3.0
+  resolution: "@fortawesome/fontawesome-svg-core@npm:6.3.0"
   dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:6.2.1"
-  checksum: 1e7901c49d440b6892400bd603a225436fb9bae787455f3b6cb8fc95a2f0f1f530f120b9ba6e24e4c982fcff40c97a0524631dcfebf5d5bd6b06387c435bf7ec
+    "@fortawesome/fontawesome-common-types": "npm:6.3.0"
+  checksum: 216ade7dcd7f51adca09df43d53ce16a9ef5086c58d143cf86640230c6f2200f9dca9d648963ff1e4466c850e667de688ef60d019fe22e99c14c7b32940ce14b
   languageName: node
   linkType: hard
 
-"@fortawesome/free-regular-svg-icons@npm:6.2.1":
-  version: 6.2.1
-  resolution: "@fortawesome/free-regular-svg-icons@npm:6.2.1"
+"@fortawesome/free-regular-svg-icons@npm:6.3.0":
+  version: 6.3.0
+  resolution: "@fortawesome/free-regular-svg-icons@npm:6.3.0"
   dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:6.2.1"
-  checksum: c69b0b65a6f059fcc704c45ace9b5b2c463f575abeca847b3ab758e87317e3b542a5d647d0d2ff1ececb6019da32839cd3962384f95a2bbf3567b97f77cbbe3e
+    "@fortawesome/fontawesome-common-types": "npm:6.3.0"
+  checksum: 3abb588e556fd7606fd7271df7736e2c198238ad794b651b468e4439db7c6665ccf3622f3d98d81ae670e0f2894c89a1d82c9ab74c1c5c83d17e18371caa47c5
   languageName: node
   linkType: hard
 
-"@fortawesome/free-solid-svg-icons@npm:6.2.1":
-  version: 6.2.1
-  resolution: "@fortawesome/free-solid-svg-icons@npm:6.2.1"
+"@fortawesome/free-solid-svg-icons@npm:6.3.0":
+  version: 6.3.0
+  resolution: "@fortawesome/free-solid-svg-icons@npm:6.3.0"
   dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:6.2.1"
-  checksum: 1c0effafa1f6b5de5da5d4c0eac3ca75951f59e9820f23e28aa45e89d739a41826ade4d8bd8127a478d8e10a92c05d981c1a22a521adc7f71bb94e23a6956d1b
+    "@fortawesome/fontawesome-common-types": "npm:6.3.0"
+  checksum: e235bf6911e21b0942fdcbd427baf78324243db7a26459c00ff7320b625154f11e3d4e51aaa52a7a40fb1ee263739a1658db68fbff12e0407f07bde89ea8ed02
   languageName: node
   linkType: hard
 
-"@fortawesome/vue-fontawesome@npm:3.0.2":
-  version: 3.0.2
-  resolution: "@fortawesome/vue-fontawesome@npm:3.0.2"
+"@fortawesome/vue-fontawesome@npm:3.0.3":
+  version: 3.0.3
+  resolution: "@fortawesome/vue-fontawesome@npm:3.0.3"
   peerDependencies:
     "@fortawesome/fontawesome-svg-core": ~1 || ~6
     vue: ">= 3.0.0 < 4"
-  checksum: 3107f1c6d73792922d40a74d32b710abfb80a58fe299fa2875803752593bae7b796fa91fec16ff9ebcd41092c7196623e87564726dbe60858dfa3140627a24fa
+  checksum: e300b4996b2e3c392bf32cc07530f138bbdac778858d09874eaea07af7f1fdebabce474aa2942f506f9fcf8634f9a3b7bfbdd8f927fe0877a856f0db594b1359
   languageName: node
   linkType: hard
 
@@ -2174,12 +2271,16 @@ __metadata:
   linkType: hard
 
 "@intlify/bundle-utils@npm:next":
-  version: 4.0.0
-  resolution: "@intlify/bundle-utils@npm:4.0.0"
+  version: 5.4.0
+  resolution: "@intlify/bundle-utils@npm:5.4.0"
   dependencies:
-    "@intlify/message-compiler": "npm:next"
-    "@intlify/shared": "npm:next"
+    "@intlify/message-compiler": "npm:9.3.0-beta.17"
+    "@intlify/shared": "npm:9.3.0-beta.17"
+    acorn: "npm:^8.8.2"
+    escodegen: "npm:^2.0.0"
+    estree-walker: "npm:^2.0.2"
     jsonc-eslint-parser: "npm:^1.0.1"
+    magic-string: "npm:^0.30.0"
     source-map: "npm:0.6.1"
     yaml-eslint-parser: "npm:^0.3.2"
   peerDependenciesMeta:
@@ -2187,7 +2288,7 @@ __metadata:
       optional: true
     vue-i18n:
       optional: true
-  checksum: baaed39bed4f960e836210643aac7d4e99bd8a07a6b529370feba21410088e191f1b386623017fb48af747d7fdfbc302b9ed6705e09b4dfac26ad2ee08471d55
+  checksum: 5440f7054a381a85c6b26ab4f03c7380edf07052ae78f6e413cc0885e9503dfdae3d4c92b1bb2e0faf8bff878173d4b7a6eb636e49b5531c2229a979cce37cbb
   languageName: node
   linkType: hard
 
@@ -2222,13 +2323,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@intlify/message-compiler@npm:next":
-  version: 9.3.0-beta.16
-  resolution: "@intlify/message-compiler@npm:9.3.0-beta.16"
+"@intlify/message-compiler@npm:9.3.0-beta.17":
+  version: 9.3.0-beta.17
+  resolution: "@intlify/message-compiler@npm:9.3.0-beta.17"
   dependencies:
-    "@intlify/shared": "npm:9.3.0-beta.16"
+    "@intlify/shared": "npm:9.3.0-beta.17"
     source-map: "npm:0.6.1"
-  checksum: 172ccff5d1adaf5494ee362a50ae15566eb7d548a37bf36cef42f963e7749abea2e13748ac2f3eaf65fa1d011bc7319939715611550dd1bf8b8880f8c497655f
+  checksum: ea313cd6102ab1482c6348727a35495c97defec97a18028d5c39d0f62d502b828a3282aaf0520b58c833f85a4601f0f70179aeb24104a1bf5ab594ad1957441f
   languageName: node
   linkType: hard
 
@@ -2239,10 +2340,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@intlify/shared@npm:9.3.0-beta.16, @intlify/shared@npm:next":
-  version: 9.3.0-beta.16
-  resolution: "@intlify/shared@npm:9.3.0-beta.16"
-  checksum: c44fc2875687c3f89c2a9d6b0c5f42d0e27da03576265357036865b1bdc0a710374eaed05153f97336aed6dc3ce44e06ec9d9ba2726583d3cb84a7b811e56339
+"@intlify/shared@npm:9.3.0-beta.17, @intlify/shared@npm:next":
+  version: 9.3.0-beta.17
+  resolution: "@intlify/shared@npm:9.3.0-beta.17"
+  checksum: 673378860a4791c9d6ace87706996f23eae7874c82e98a1f1b48e584ce4a74ca83551aa54bb039f28f861bec9bb07bdd82e2493643405984c3ffd54e29957836
   languageName: node
   linkType: hard
 
@@ -2308,6 +2409,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/gen-mapping@npm:^0.1.0":
+  version: 0.1.1
+  resolution: "@jridgewell/gen-mapping@npm:0.1.1"
+  dependencies:
+    "@jridgewell/set-array": "npm:^1.0.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
+  checksum: 5e4c9ef71682a0d827050cc53f10308825f8a0930ab2b54094381de293f92a53b290091fbe910c17048eae31c1b99c5ef8474ae8267192f83b40023619367331
+  languageName: node
+  linkType: hard
+
 "@jridgewell/gen-mapping@npm:^0.3.0, @jridgewell/gen-mapping@npm:^0.3.2":
   version: 0.3.2
   resolution: "@jridgewell/gen-mapping@npm:0.3.2"
@@ -2319,6 +2430,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/resolve-uri@npm:3.1.0":
+  version: 3.1.0
+  resolution: "@jridgewell/resolve-uri@npm:3.1.0"
+  checksum: 6b641bb7e25bc92a9848898cc91a77a390f393f086297ec2336d911387bdd708919c418e74a22732cfc21d0e7300b94306f437d2e9de5ab58b33ebc6c39d6f9d
+  languageName: node
+  linkType: hard
+
 "@jridgewell/resolve-uri@npm:^3.0.3":
   version: 3.0.5
   resolution: "@jridgewell/resolve-uri@npm:3.0.5"
@@ -2326,7 +2444,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/set-array@npm:^1.0.1":
+"@jridgewell/set-array@npm:^1.0.0, @jridgewell/set-array@npm:^1.0.1":
   version: 1.1.2
   resolution: "@jridgewell/set-array@npm:1.1.2"
   checksum: e7e3f00d10622a6e48cc59041537f99972ed110dca8bfdf575be101c5920d4e4d4fab315d601df9aebbd6b97f4ce857f0347902701ed034a0627ca554b64db0f
@@ -2343,6 +2461,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/sourcemap-codec@npm:1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.13":
+  version: 1.4.14
+  resolution: "@jridgewell/sourcemap-codec@npm:1.4.14"
+  checksum: 2147ea75c966fed8a7d9ed6679b7e8c380fa790a9bea5a64f4ec1c26d24e44b461aa60fc3b228cea03a46708d9d1bcf19508035bf27ad5e8f63d0998ed1d1117
+  languageName: node
+  linkType: hard
+
 "@jridgewell/sourcemap-codec@npm:^1.4.10":
   version: 1.4.11
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.11"
@@ -2370,6 +2495,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/trace-mapping@npm:^0.3.17":
+  version: 0.3.17
+  resolution: "@jridgewell/trace-mapping@npm:0.3.17"
+  dependencies:
+    "@jridgewell/resolve-uri": "npm:3.1.0"
+    "@jridgewell/sourcemap-codec": "npm:1.4.14"
+  checksum: 388a2f604c1159dd29fdf3077c2a21fd2d322145f24cade868c0a7c55cfc993f3af82dd2e979438d9f06148c38af780abc7c0aa2eddbb34fab41698bb86d82e1
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.14
   resolution: "@jridgewell/trace-mapping@npm:0.3.14"
@@ -3238,6 +3373,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.8.2":
+  version: 8.8.2
+  resolution: "acorn@npm:8.8.2"
+  bin:
+    acorn: bin/acorn
+  checksum: 5a47325f0aa08202080cb167d5b8103720d8a1d199f57988afa48bdfbc3c9973270b00e38c2c874240a49929625beaaae8c4ec683f5272b5f07f1119a457e5d0
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:6, agent-base@npm:^6.0.2":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
@@ -3248,13 +3392,13 @@ __metadata:
   linkType: hard
 
 "agentkeepalive@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "agentkeepalive@npm:4.2.1"
+  version: 4.3.0
+  resolution: "agentkeepalive@npm:4.3.0"
   dependencies:
     debug: "npm:^4.1.0"
-    depd: "npm:^1.1.2"
+    depd: "npm:^2.0.0"
     humanize-ms: "npm:^1.2.1"
-  checksum: c0a7067d1bec147b40bc046ed3ad32bfff35014e7d20e21219f90a21df661d85124e5ffa5bd89118d7ceac9105e2e9b0525ea317a2958b39a357535394b483b0
+  checksum: b3cce4e2faf86c01bad23b471a67f4aa2e6001b833bc2f63a3d5a8b2a671636f8aac7d215e6f8243ce1c07c7a5d8d5fa90ab894ff0d9f0c3e05c2cda801103fb
   languageName: node
   linkType: hard
 
@@ -5017,14 +5161,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"depd@npm:2.0.0":
+"depd@npm:2.0.0, depd@npm:^2.0.0":
   version: 2.0.0
   resolution: "depd@npm:2.0.0"
   checksum: 170e90bfa90081462303140623fdf938aeba2f066b1c7a9a1c599b257ea8127d36b9d39fad5a9d71f5282a3bb5a8ca287ce4d8c6cecd0f65e6bf3779cc6091be
   languageName: node
   linkType: hard
 
-"depd@npm:^1.1.2, depd@npm:~1.1.2":
+"depd@npm:~1.1.2":
   version: 1.1.2
   resolution: "depd@npm:1.1.2"
   checksum: e9fb93771e7cf3d88c4e38ca95742f7c58cae31928eb5e67a1a14d970325a02755451bb7fafc2db72333a5cf7fc14e07e4f8d709c0df70143355e77e8d090bac
@@ -7889,6 +8033,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json5@npm:^2.2.2":
+  version: 2.2.3
+  resolution: "json5@npm:2.2.3"
+  bin:
+    json5: lib/cli.js
+  checksum: e298f92c92197e956eb7a93304f74b5b80b4c3fe412f44a1f3d4c966e5ddf2e8ef2ac7ce0b0c40c78735bf2901c29257a653e1da684dae8e7835932e4904d6a0
+  languageName: node
+  linkType: hard
+
 "jsonc-eslint-parser@npm:^1.0.1":
   version: 1.4.1
   resolution: "jsonc-eslint-parser@npm:1.4.1"
@@ -8643,9 +8796,9 @@ __metadata:
   linkType: hard
 
 "lru-cache@npm:^7.7.1":
-  version: 7.16.1
-  resolution: "lru-cache@npm:7.16.1"
-  checksum: 5619d4ffd5a45fb68a02bef904d6d72427c54a7a6a051126797eaa20f7429c17e681fe9cdd0de12b69a737e5f0df817f626ca5916f50e85141865dcf075873ae
+  version: 7.18.3
+  resolution: "lru-cache@npm:7.18.3"
+  checksum: 884c7cb51963cc45bc0d864c704d141c904c93db1bbc236be0eed759e35fc44b5e794a34b0666e193926e5a4320b66e787b1cf531f4f89ed8514a97156f07cb1
   languageName: node
   linkType: hard
 
@@ -8658,6 +8811,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.0":
+  version: 0.30.0
+  resolution: "magic-string@npm:0.30.0"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.4.13"
+  checksum: ed9c8873be1494aaebba171705ae16bc14646d933410f53cf4a997b53a0d231e8aa7f168b7c3ed942099f19ad0c3e419e4033a01b758b94f0eb1e48d65ab6078
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:^2.0.0, make-dir@npm:^2.1.0":
   version: 2.1.0
   resolution: "make-dir@npm:2.1.0"
@@ -9041,9 +9203,9 @@ __metadata:
   linkType: hard
 
 "minipass@npm:^4.0.0":
-  version: 4.0.3
-  resolution: "minipass@npm:4.0.3"
-  checksum: f0e10358a29253eb64295f0cb2790acd2109279c2c721ea1883bfcab1bac4434cc75027d98993fade26f0ecaa984e0144b6af677a6da86aeaa96ddd317d84dbe
+  version: 4.2.5
+  resolution: "minipass@npm:4.2.5"
+  checksum: 9663cd373005095bc6b9f1c779e6beef3269e171a4049c2c6532ae430dea93647bfa6cf4fab43fc908f9e8ad333a3dbaadca20c15eb4ba9b697c764b7be90d65
   languageName: node
   linkType: hard
 
@@ -9925,17 +10087,17 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "pleroma_fe@workspace:."
   dependencies:
-    "@babel/core": "npm:7.20.7"
+    "@babel/core": "npm:7.21.0"
     "@babel/eslint-parser": "npm:7.19.1"
-    "@babel/plugin-transform-runtime": "npm:7.19.6"
+    "@babel/plugin-transform-runtime": "npm:7.21.0"
     "@babel/preset-env": "npm:7.20.2"
-    "@babel/register": "npm:7.18.9"
-    "@babel/runtime": "npm:7.20.7"
+    "@babel/register": "npm:7.21.0"
+    "@babel/runtime": "npm:7.21.0"
     "@chenfengyuan/vue-qrcode": "npm:2.0.0"
-    "@fortawesome/fontawesome-svg-core": "npm:6.2.1"
-    "@fortawesome/free-regular-svg-icons": "npm:6.2.1"
-    "@fortawesome/free-solid-svg-icons": "npm:6.2.1"
-    "@fortawesome/vue-fontawesome": "npm:3.0.2"
+    "@fortawesome/fontawesome-svg-core": "npm:6.3.0"
+    "@fortawesome/free-regular-svg-icons": "npm:6.3.0"
+    "@fortawesome/free-solid-svg-icons": "npm:6.3.0"
+    "@fortawesome/vue-fontawesome": "npm:3.0.3"
     "@intlify/vue-i18n-loader": "npm:5.0.0"
     "@kazvmoe-infra/pinch-zoom-element": "npm:1.2.0"
     "@kazvmoe-infra/unicode-emoji-json": "npm:0.4.0"
@@ -10813,7 +10975,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
+"readable-stream@npm:^3.4.0":
   version: 3.6.0
   resolution: "readable-stream@npm:3.6.0"
   dependencies:
@@ -10824,6 +10986,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readable-stream@npm:^3.6.0":
+  version: 3.6.2
+  resolution: "readable-stream@npm:3.6.2"
+  dependencies:
+    inherits: "npm:^2.0.3"
+    string_decoder: "npm:^1.1.1"
+    util-deprecate: "npm:^1.0.1"
+  checksum: b1cbe0fea6b407fc75bfbe4f6c54d48899e638d54a8a1207b5040c60566dd5f65059b32c3edf0ac0ce621ea46929b3337e8a19410870eff98b8be5a3ba543b7a
+  languageName: node
+  linkType: hard
+
 "readable-stream@npm:~2.3.6":
   version: 2.3.7
   resolution: "readable-stream@npm:2.3.7"