update vue-i18n, simplify logic of muting, always show reasons for mutes, fix RT icon

src/components/status/status.js

@@ -260,18 +260,47 @@ const Status = {
     hasMentionsLine () {
       return this.mentionsLine.length > 0
     },
+    muteReasons () {
+      return [
+        this.userIsMuted ? 'user' : null,
+        status.thread_muted ? 'thread' : null,
+        (this.muteWordHits.length > 0) ? 'wordfilter' : null,
+        (this.muteBotStatuses && this.botStatus) ? 'bot' : null,
+        (this.muteSensitiveStatuses && this.sensitiveStatus) ? 'nsfw' : null
+      ].filter(_ => _)
+    },
+    muteLocalized () {
+      if (this.muteReasons.length === 0) return null
+      const mainReason = () => {
+        switch (this.muteReasons[0]) {
+          case 'user': return this.$t('status.muted_user')
+          case 'thread': return this.$t('status.thread_muted')
+          case 'wordfilter':
+            return this.$t(
+              'status.muted_words',
+              {
+                word: this.muteWordHits[0],
+                numWordsMore: this.muteWordHits.length - 1
+              },
+              this.muteWordHits.length
+            )
+          case 'bot': return this.$t('status.bot_muted')
+          case 'nsfw': return this.$t('status.sensitive_muted')
+        }
+      }
+      console.log(this.muteReasons, mainReason())
+      return this.$t(
+        'status.multi_reason_mute',
+        {
+          main: mainReason(),
+          numReasonsMore: this.muteReasons.length - 1
+        },
+        this.muteReasons.length - 1
+      )
+    },
     muted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
-      const reasonsToMute = this.userIsMuted ||
-        // Thread is muted
-        status.thread_muted ||
-        // Wordfiltered
-        this.muteWordHits.length > 0 ||
-        // bot status
-        (this.muteBotStatuses && this.botStatus && !this.compact) ||
-        // sensitive status
-        (this.muteSensitiveStatuses && this.sensitiveStatus && !this.compact)
-      return !this.unmuted && !this.shouldNotMute && reasonsToMute
+      return !this.unmuted && !this.shouldNotMute && this.muteReasons.length > 0
     },
     userIsMuted () {
       if (this.statusoid.user.id === this.currentUser.id) return false

src/components/status/status.scss

@@ -284,15 +284,10 @@
     gap: 1ex;
 
     & .status-username,
-    & .mute-thread,
-    & .mute-words {
+    & .mute-reason {
       word-wrap: normal;
       word-break: normal;
       white-space: nowrap;
-    }
-
-    & .status-username,
-    & .mute-words {
       text-overflow: ellipsis;
       overflow: hidden;
     }
@@ -302,19 +297,7 @@
       flex: 0 1 auto;
       margin-right: 0.2em;
       font-size: smaller;
-    }
-
-    .mute-thread {
-      flex: 0 0 auto;
-    }
-
-    .mute-words {
-      flex: 1 0 5em;
-      margin-left: 0.2em;
-
-      &::before {
-        content: " ";
-      }
+      display: flex;
     }
 
     .unmute {

src/components/status/status.vue

@@ -30,36 +30,8 @@
             :at="false"
           />
         </small>
-        <small
-          v-if="muteSensitiveStatuses && status.nsfw"
-          class="mute-thread"
-        >
-          {{ $t('status.sensitive_muted') }}
-        </small>
-        <small
-          v-if="muteBotStatuses && botStatus"
-          class="mute-thread"
-        >
-          {{ $t('status.bot_muted') }}
-        </small>
-        <small
-          v-if="showReasonMutedThread"
-          class="mute-thread"
-        >
-          <span>
-            {{ $t('status.thread_muted') }}
-          </span>
-          <span
-            v-if="muteWordHits.length > 0"
-          >
-            {{ $t('status.thread_muted_and_words') }}
-          </span>
-        </small>
-        <small
-          class="mute-words"
-          :title="muteWordHits.join(', ')"
-        >
-          {{ muteWordHits.join(', ') }}
+        <small class="mute-reason">
+          {{ muteLocalized }}
         </small>
         <button
           class="unmute button-unstyled"
@@ -313,13 +285,14 @@
               >
                 <i18n-t
                   keypath="status.reply_to_with_arg"
+                  scope="global"
                 >
                   <template #replyToWithIcon>
                     <StatusPopover
                       v-if="!isPreview"
                       :status-id="status.parent_visible && status.in_reply_to_status_id"
                       class="reply-to-popover"
-                      style="min-width: 0;"
+                      style="min-width: 0"
                       :class="{ '-strikethrough': !status.parent_visible }"
                     >
                       <button
@@ -327,7 +300,10 @@
                         :aria-label="$t('tool_tip.reply')"
                         @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                       >
-                        <i18n-t keypath="status.reply_to_with_icon">
+                        <i18n-t
+                          keypath="status.reply_to_with_icon"
+                          scope="global"
+                        >
                           <template #icon>
                             <FAIcon
                               class="fa-scale-110 fa-old-padding"
@@ -622,15 +598,13 @@
         class="status-container reply-form"
       >
         <PostStatusForm
-          ref="postStatusForm"
           class="reply-body"
           :reply-to="status.id"
           :attentions="status.attentions"
           :replied-user="status.user"
           :copy-message-scope="status.visibility"
           :subject="replySubject"
-          @posted="doToggleReplying"
-          @can-close="doToggleReplying"
+          @posted="toggleReplying"
         />
       </div>
     </template>