Merge remote-tracking branch 'origin/develop' into chat-refactor

src/components/basic_user_card/basic_user_card.js

@@ -36,6 +36,12 @@ const BasicUserCard = {
     allowNonSquareEmoji() {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return useMergedConfigStore().mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return useMergedConfigStore().mergedConfig.scaleMfm
+    },
   },
 }
 

src/components/basic_user_card/basic_user_card.vue

@@ -32,6 +32,8 @@
           :html="user.name"
           :emoji="user.emoji"
           :allow-non-square-emoji="allowNonSquareEmoji"
+          :pause-mfm="pauseMfm"
+          :scale-mfm="scaleMfm"
         />
       </div>
       <div>

src/components/chat_title/chat_title.js

@@ -21,5 +21,11 @@ export default {
     allowNonSquareEmoji() {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return useMergedConfigStore().mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return useMergedConfigStore().mergedConfig.scaleMfm
+    },
   },
 }

src/components/chat_title/chat_title.vue

@@ -20,6 +20,8 @@
       :html="htmlTitle"
       :emoji="user.emoji || []"
       :allow-non-square-emoji="allowNonSquareEmoji"
+      :pause-mfm="pauseMfm"
+      :scale-mfm="scaleMfm"
       :is-local="user.is_local"
     />
   </div>

src/components/global_error/global_error.js

@@ -1,12 +1,13 @@
 import { mapActions, mapState } from 'pinia'
-
-import ErrorModal from 'src/components/error_modal/error_modal.vue'
+import { defineAsyncComponent } from 'vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
 
 const GlobalError = {
   components: {
-    ErrorModal,
+    ErrorModal: defineAsyncComponent(
+      () => import('src/components/error_modal/error_modal.vue'),
+    ),
   },
   computed: {
     title() {

src/components/mention_link/mention_link.js

@@ -9,6 +9,7 @@ import {
   highlightStyle,
 } from '../../services/user_highlighter/user_highlighter.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
@@ -89,8 +90,7 @@ const MentionLink = {
       // XXX assumed that domain does not contain @
       return (
         this.user &&
-        (this.userNameFullUi.split('@')[1] ||
-          this.$store.getters.instanceDomain)
+        (this.userNameFullUi.split('@')[1] || useInstanceStore().instanceDomain)
       )
     },
     userNameFull() {

src/components/notification/notification.js

@@ -217,6 +217,12 @@ const Notification = {
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return this.mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return this.mergedConfig.scaleMfm
+    },
     shouldConfirmApprove() {
       return this.mergedConfig.modalOnApproveFollow
     },

src/components/notification/notification.scss

@@ -10,11 +10,6 @@
     cursor: pointer;
   }
 
-  &.Status {
-    /* stylelint-disable-next-line declaration-no-important */
-    background-color: transparent !important;
-  }
-
   --emoji-size: 1em;
 
   &:hover {

src/components/notification/notification.style.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Notification',
-  selector: '.Notification',
+  selector: '.NotificationParent',
   validInnerComponents: [
     'Text',
     'Link',
@@ -9,5 +9,11 @@ export default {
     'Avatar',
     'PollGraph',
   ],
-  defaultRules: [],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+      },
+    },
+  ],
 }

src/components/notification/notification.vue

@@ -4,7 +4,7 @@
     ref="root"
   >
     <Status
-      class="Notification"
+      class="Notification panel-body"
       :compact="true"
       :statusoid="notification.status"
       @click="interacted"
@@ -13,7 +13,7 @@
   <article
     v-else
     ref="root"
-    class="NotificationParent"
+    class="NotificationParent panel-body"
     :class="{ '-expandable': expandable }"
   >
     <div
@@ -72,6 +72,8 @@
                 :html="notification.from_profile.name_html"
                 :emoji="notification.from_profile.emoji"
                 :allow-non-square-emoji="allowNonSquareEmoji"
+                :pause-mfm="pauseMfm"
+                :scale-mfm="scaleMfm"
                 :is-local="notification.from_profile.is_local"
               />
             </bdi>

src/components/notifications/notifications.vue

@@ -51,7 +51,6 @@
           <NotificationFilters class="rightside-button" />
         </div>
         <div
-          class="panel-body"
           role="feed"
         >
           <div

src/components/palette_editor/palette_editor.vue

@@ -20,7 +20,9 @@
           :show-ratio="true"
           :contrast="contrast[key]"
         />
-        <div v-else>{{ '&nbsp;' }}</div>
+        <div v-else>
+          {{ '&nbsp;' }}
+        </div>
       </div>
     </div>
     <div class="buttons">

src/components/poll/poll.js

@@ -57,6 +57,12 @@ export default {
     allowNonSquareEmoji() {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return useMergedConfigStore().mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return useMergedConfigStore().mergedConfig.scaleMfm
+    },
     loggedIn() {
       return this.$store.state.users.currentUser
     },

src/components/poll/poll.vue

@@ -25,6 +25,8 @@
               :handle-links="false"
               :emoji="emoji"
               :allow-non-square-emoji="allowNonSquareEmoji"
+              :pause-mfm="pauseMfm"
+              :scale-mfm="scaleMfm"
             />
           </div>
           <div

src/components/post_status_form/post_status_form.js

@@ -603,7 +603,7 @@ const PostStatusForm = {
           this.$emit('posted', data)
         })
         .catch((error) => {
-          this.error = data.error
+          this.error = error
         })
         .finally(() => {
           this.posting = false

src/components/rich_content/rich_content.jsx

@@ -118,6 +118,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    pauseMfm: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
+    scaleMfm: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render() {
@@ -313,7 +323,139 @@ export default {
           const newChildren = Array.isArray(children)
             ? [...children].reverse().map(processItemReverse).reverse()
             : children
-          return <Tag {...getAttrs(opener)}>{newChildren}</Tag>
+          const attrs = getAttrs(opener)
+          const newAttrs = { ...attrs }
+          const fullAttrs = getAttrs(opener, () => true)
+          const classname = fullAttrs['class']
+          const isMFM = classname?.startsWith('mfm-')
+          if (isMFM) {
+            const mfmOperator = /^mfm-(\w+)$/.exec(classname)?.[1]
+            newAttrs['class'] = [
+              'mfm',
+              this.pauseMfm ? '-pause' : '',
+              this.scaleMfm ? '-scale' : '',
+            ]
+              .filter((x) => x)
+              .join(' ')
+            newAttrs['data-mfm-operator'] = mfmOperator
+            switch (mfmOperator) {
+              case 'position': {
+                const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 0
+                const y = Number.parseFloat(fullAttrs['data-mfm-y']) || 0
+                newAttrs.style = [
+                  'transform:',
+                  `translate(calc(${x} * (var(--emoji-size) / 2)), `,
+                  `calc(${y} * (var(--emoji-size) / 2)))`,
+                ].join(' ')
+                break
+              }
+              case 'scale': {
+                const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 1
+                const y = Number.parseFloat(fullAttrs['data-mfm-y']) || 1
+                newAttrs.style = ['transform:', `scale(${x}, ${y})`].join(' ')
+                break
+              }
+              case 'rotate': {
+                const deg = Number.parseFloat(fullAttrs['data-mfm-deg']) || 0
+                newAttrs.style = [
+                  `transform: rotate(${deg}deg)`,
+                  'transform-origin: center',
+                ].join(';')
+                break
+              }
+              case 'bg': {
+                const color = fullAttrs['data-mfm-color'] || 0
+                newAttrs.style = [`background-color: #${color}`].join(' ')
+                break
+              }
+              case 'fg': {
+                const color = fullAttrs['data-mfm-color'] || 0
+                newAttrs.style = [`color: #${color}`].join(';')
+                break
+              }
+              case 'spin': {
+                const speed = fullAttrs['data-mfm-speed'] || '1s'
+                const delay = fullAttrs['data-mfm-delay'] || 0
+                const left = fullAttrs['data-mfm-left'] != null
+                const alternate = fullAttrs['data-mfm-alternate'] != null
+                const y = fullAttrs['data-mfm-y'] != null
+                const x = fullAttrs['data-mfm-x'] != null
+
+                const anim = [
+                  x ? 'mfm-spinX' : null,
+                  y ? 'mfm-spinY' : null,
+                  'mfm-spin',
+                ].filter((a) => a)[0]
+
+                const direction = [
+                  alternate ? 'alternate' : null,
+                  left ? 'reverse' : null,
+                  'normal',
+                ].filter((a) => a)[0]
+
+                newAttrs.style = [
+                  `animation-name: ${anim}`,
+                  `animation-duration: ${speed}`,
+                  'animation-iteration-count: infinite',
+                  `animation-delay: ${delay}`,
+                  `animation-direction: ${direction}`,
+                  'animation-fill-mode: none',
+                  'animation-timing-function: linear',
+                ].join(';')
+                break
+              }
+              case 'flip': {
+                newAttrs.style = 'transform: scaleX(-1)'
+                break
+              }
+              case 'border': {
+                const width = fullAttrs['data-mfm-width'] || '0'
+                const style = fullAttrs['data-mfm-style'] || 'solid'
+                const color = fullAttrs['data-mfm-color'] || 'transparent'
+                const radius = fullAttrs['data-mfm-radius'] || '0'
+                const noclip = fullAttrs['data-mfm-noclip'] || false
+
+                newAttrs.style = [
+                  `border: ${width} ${style} ${color}`,
+                  `border-radius: ${radius}`,
+                  `overflow: ${noclip ? 'visible' : 'clip'}`,
+                ].join(';')
+                break
+              }
+              case 'tada':
+              case 'jelly':
+              case 'twitch':
+              case 'shake':
+              case 'jump':
+              case 'bounce':
+              case 'rainbow': {
+                const speed = fullAttrs['data-mfm-speed'] || '1s'
+                const delay = fullAttrs['data-mfm-delay'] || 0
+
+                const rules = [
+                  `animation-name: mfm-${mfmOperator}`,
+                  `animation-duration: ${speed}`,
+                  'animation-iteration-count: infinite',
+                  `animation-delay: ${delay}`,
+                  'animation-direction: normal',
+                  'animation-fill-mode: none',
+                  'animation-timing-function: linear',
+                ].join(';')
+                newAttrs.style = rules
+                break
+              }
+              case 'sparkle':
+              case 'x2':
+              case 'x3':
+              case 'x4':
+                // handled by css
+                break
+              default:
+                console.warn('Unsupported MFM operator:', mfmOperator, opener)
+                break
+            }
+          }
+          return <Tag {...newAttrs}>{newChildren}</Tag>
         } else {
           return <Tag />
         }

src/components/rich_content/rich_content.scss

@@ -100,9 +100,371 @@
   .cyantext {
     color: var(--funtextCyantext);
   }
+
+  .mfm {
+    display: inline-block;
+
+    &.-scale {
+      font-size: calc(var(--emoji-size) / 2);
+    }
+
+    &:not(.-scale) {
+      --emoji-size: 2em;
+    }
+
+    &.-pause {
+      animation-play-state: paused;
+    }
+
+    &[data-mfm-operator="x2"] {
+      font-size: 300%
+    }
+
+    &[data-mfm-operator="x3"] {
+      font-size: 400%
+    }
+
+    &[data-mfm-operator="x4"] {
+      font-size: 600%
+    }
+
+    &[data-mfm-operator="sparkle"] {
+      position: relative;
+
+      &::before,
+      &::after {
+        content: '✨';
+        position: absolute;
+        opacity: 0.4;
+        z-index: -1;
+        animation-name: cheap-sparkle;
+        animation-duration: 1s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: infinite;
+      }
+
+      &::before {
+        left: 0;
+        animation-direction: alternate;
+      }
+
+      &::after {
+        right: 0;
+        animation-direction: alternate-reverse;
+      }
+    }
+
+    .emoji {
+      /* Misskey's emoji width knows no bounds */
+      /* stylelint-disable-next-line declaration-no-important */
+      max-width: unset !important;
+    }
+  }
+
+  &:hover .mfm {
+    animation-play-state: running;
+  }
 }
 
 a .RichContent {
   /* stylelint-disable-next-line declaration-no-important */
   color: var(--link) !important;
 }
+
+@keyframes mfm-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes mfm-spinX {
+  0% {
+    transform: perspective(8em) rotateX(0);
+  }
+
+  100% {
+    transform: perspective(8em) rotateX(360deg);
+  }
+}
+
+@keyframes mfm-spinY {
+  0% {
+    transform: perspective(8em) rotateY(0);
+  }
+
+  100% {
+    transform: perspective(8em) rotateY(360deg);
+  }
+}
+
+@keyframes mfm-jump {
+  0% {
+    transform: translateY(0);
+  }
+
+  25% {
+    transform: translateY(-1em);
+  }
+
+  50% {
+    transform: translateY(0);
+  }
+
+  75% {
+    transform: translateY(-0.5em);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mfm-bounce {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+
+  25% {
+    transform: translateY(-16px) scale(1);
+  }
+
+  50% {
+    transform: translateY(0) scale(1);
+  }
+
+  75% {
+    transform: translateY(0) scale(1.5,.75);
+  }
+
+  100% {
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes mfm-twitch {
+  0% {
+    transform: translate(7px, -2px);
+  }
+
+  5% {
+    transform: translate(-3px, 1px);
+  }
+
+  10% {
+    transform: translate(-7px, -1px);
+  }
+
+  15% {
+    transform: translateY(-1px);
+  }
+
+  20% {
+    transform: translate(-8px, 6px);
+  }
+
+  25% {
+    transform: translate(-4px, -3px);
+  }
+
+  30% {
+    transform: translate(-4px, -6px);
+  }
+
+  35% {
+    transform: translate(-8px, -8px);
+  }
+
+  40% {
+    transform: translate(4px, 6px);
+  }
+
+  45% {
+    transform: translate(-3px, 1px);
+  }
+
+  50% {
+    transform: translate(2px, -10px);
+  }
+
+  55% {
+    transform: translate(-7px);
+  }
+
+  60% {
+    transform: translate(-2px, 4px);
+  }
+
+  65% {
+    transform: translate(3px, -8px);
+  }
+
+  70% {
+    transform: translate(6px, 7px);
+  }
+
+  75% {
+    transform: translate(-7px, -2px);
+  }
+
+  80% {
+    transform: translate(-7px, -8px);
+  }
+
+  85% {
+    transform: translate(9px, 3px);
+  }
+
+  90% {
+    transform: translate(-3px, -2px);
+  }
+
+  95% {
+    transform: translate(-10px, 2px);
+  }
+
+  100% {
+    transform: translate(-2px, -6px);
+  }
+}
+
+@keyframes mfm-shake {
+  0% {
+    transform: translate(-3px, -1px) rotate(-8deg);
+  }
+
+  5% {
+    transform: translateY(-1px) rotate(-10deg);
+  }
+
+  10% {
+    transform: translate(1px, -3px) rotate(0);
+  }
+
+  15% {
+    transform: translate(1px, 1px) rotate(11deg);
+  }
+
+  20% {
+    transform: translate(-2px, 1px) rotate(1deg);
+  }
+
+  25% {
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+
+  30% {
+    transform: translate(-1px, 2px) rotate(-3deg);
+  }
+
+  35% {
+    transform: translate(2px, 1px) rotate(6deg);
+  }
+
+  40% {
+    transform: translate(-2px, -3px) rotate(-9deg);
+  }
+
+  45% {
+    transform: translateY(-1px) rotate(-12deg);
+  }
+
+  50% {
+    transform: translate(1px, 2px) rotate(10deg);
+  }
+
+  55% {
+    transform: translateY(-3px) rotate(8deg);
+  }
+
+  60% {
+    transform: translate(1px, -1px) rotate(8deg);
+  }
+
+  65% {
+    transform: translateY(-1px) rotate(-7deg);
+  }
+
+  70% {
+    transform: translate(-1px, -3px) rotate(6deg);
+  }
+
+  75% {
+    transform: translateY(-2px) rotate(4deg);
+  }
+
+  80% {
+    transform: translate(-2px, -1px) rotate(3deg);
+  }
+
+  85% {
+    transform: translate(1px, -3px) rotate(-10deg);
+  }
+
+  90% {
+    transform: translate(1px) rotate(3deg);
+  }
+
+  95% {
+    transform: translate(-2px) rotate(-3deg);
+  }
+
+  100% {
+    transform: translate(2px, 1px) rotate(2deg);
+  }
+}
+
+@keyframes mfm-rubberBand {
+  0% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.25, .75);
+  }
+
+  40% {
+    transform: scale(.75, 1.25);
+  }
+
+  50% {
+    transform: scale(1.15, .85);
+  }
+
+  65% {
+    transform: scale(.95, 1.05);
+  }
+
+  75% {
+    transform: scale(1.05, .95);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes mfm-rainbow {
+  0% {
+    filter: hue-rotate() contrast(150%) saturate(150%);
+  }
+
+  100% {
+    filter: hue-rotate(360deg) contrast(150%) saturate(150%);
+  }
+}
+
+@keyframes cheap-sparkle {
+  0% {
+    filter: hue-rotate() contrast(150%) saturate(150%);
+    transform: translateY(-0.5em);
+  }
+
+  100% {
+    filter: hue-rotate(360deg) contrast(150%) saturate(150%);
+    transform: translateY(0.5em);
+  }
+}

src/components/settings_modal/tabs/posts_tab.vue

@@ -174,6 +174,16 @@
             {{ $t('settings.non_square_emoji') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="scaleMfm">
+            {{ $t('settings.scale_mfm') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="pauseMfm">
+            {{ $t('settings.pause_mfm') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             :local="true"

src/components/status/status.js

@@ -136,6 +136,12 @@ const Status = {
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return this.mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return this.mergedConfig.scaleMfm
+    },
     repeaterClass() {
       const user = this.statusoid.user
       return highlightClass(user)

src/components/status/status.vue

@@ -71,6 +71,8 @@
                 :html="retweeterHtml"
                 :emoji="retweeterUser.emoji"
                 :allow-non-square-emoji="allowNonSquareEmoji"
+                :pause-mfm="pauseMfm"
+                :scale-mfm="scaleMfm"
                 :is-local="retweeterUser.is_local"
               />
             </router-link>

src/components/status_action_buttons/status_action_buttons.js

@@ -134,8 +134,8 @@ const StatusActionButtons = {
       }
     },
     doActionReal(button) {
-      button
-        .action?.(this.funcArg)
+      const promise = button.action?.(this.funcArg) ?? Promise.resolve()
+      promise
         .then(() => this.$emit('onSuccess'))
         .catch((err) => this.$emit('onError', err))
     },

src/components/status_body/status_body.js

@@ -59,6 +59,12 @@ const StatusBody = {
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return this.mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return this.mergedConfig.scaleMfm
+    },
     // This is a bit hacky, but we want to approximate post height before rendering
     // so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
     // as well as approximate line count by counting characters and approximating ~80

src/components/status_body/status_body.vue

@@ -16,6 +16,8 @@
           :emoji="status.emojis"
           :is-local="status.isLocal"
           :allow-non-square-emoji="allowNonSquareEmoji"
+          :pause-mfm="pauseMfm"
+          :scale-mfm="scaleMfm"
         />
         <button
           v-show="hasLongSubject && showingLongSubject"
@@ -49,6 +51,8 @@
           :attentions="status.attentions"
           :is-local="status.is_local"
           :allow-non-square-emoji="allowNonSquareEmoji"
+          :pause-mfm="pauseMfm"
+          :scale-mfm="scaleMfm"
           @parse-ready="onParseReady"
         />
         <div

src/components/tab_switcher/tab_switcher.jsx

@@ -86,7 +86,7 @@ export default {
         this.onSwitch.call(null, this.slots()[index].key)
       }
       this.active = index
-      if (this.scrollableTabs) {
+      if (this.scrollableTabs && this.$refs.contents) {
         this.$refs.contents.scrollTop = 0
       }
     },

src/components/user_card/user_card.js

@@ -433,6 +433,12 @@ export default {
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return this.mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return this.mergedConfig.scaleMfm
+    },
     hideUserStats() {
       return this.mergedConfig.hideUserStats
     },

src/components/user_card/user_card.vue

@@ -141,6 +141,8 @@
                     :html="editable ? newName : user.name_unescaped"
                     :emoji="editable ? emoji : user.emoji"
                     :allow-non-square-emoji="allowNonSquareEmoji"
+                    :pause-mfm="pauseMfm"
+                    :scale-mfm="scaleMfm"
                   />
                 </router-link>
                 <EmojiInput
@@ -487,6 +489,8 @@
         :html="editable ? escapedNewBio : user.description_html"
         :emoji="editable ? emoji : user.emoji"
         :allow-non-square-emoji="allowNonSquareEmoji"
+        :pause-mfm="pauseMfm"
+        :scale-mfm="scaleMfm"
         :handle-links="true"
       />
     </template>
@@ -542,6 +546,8 @@
               :html="field.name"
               :emoji="editable ? emoji : user.emoji"
               :allow-non-square-emoji="allowNonSquareEmoji"
+              :pause-mfm="pauseMfm"
+              :scale-mfm="scaleMfm"
             />
           </dt>
           <dd
@@ -552,6 +558,8 @@
               :html="field.value"
               :emoji="editable ? emoji : user.emoji"
               :allow-non-square-emoji="allowNonSquareEmoji"
+              :pause-mfm="pauseMfm"
+              :scale-mfm="scaleMfm"
             />
           </dd>
         </dl>

src/components/user_list_popover/user_list_popover.js

@@ -27,6 +27,12 @@ const UserListPopover = {
     allowNonSquareEmoji() {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return useMergedConfigStore().mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return useMergedConfigStore().mergedConfig.scaleMfm
+    },
   },
   methods: {
     generateProfileLink(user) {

src/components/user_list_popover/user_list_popover.vue

@@ -29,6 +29,8 @@
                 :html="user.name_html"
                 :emoji="user.emoji"
                 :allow-non-square-emoji="allowNonSquareEmoji"
+                :pause-mfm="pauseMfm"
+                :scale-mfm="scaleMfm"
               />
               <!-- eslint-enable vue/no-v-html -->
               <span class="user-list-screen-name">{{ user.screen_name_ui }}</span><UnicodeDomainIndicator :user="user" />