Merge branch 'consistent-mutes' into 'develop'

Consistent mutes Closes #1348 See merge request pleroma/pleroma-fe!1965
2025-01-04 17:08:06 +00:00 · 2025-01-04 17:08:06 +00:00 · f61f224bb1
commit f61f224bb1
parent 2c520bdc4f 4ed8847b9d
19 changed files with 106 additions and 125 deletions
--- a/changelog.d/mutes.change
+++ b/changelog.d/mutes.change
@ -0,0 +1 @@
+better display of mute reason on posts
--- a/package.json
+++ b/package.json
@ -44,7 +44,7 @@
    "url": "0.11.0",
    "utf8": "3.0.0",
    "vue": "3.2.45",
-    "vue-i18n": "9.2.2",
+    "vue-i18n": "10",
    "vue-router": "4.1.6",
    "vue-template-compiler": "2.7.14",
    "vue-virtual-scroller": "^2.0.0-beta.7",
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -73,7 +73,7 @@
            </template>
            <template #text>
              <span>
-                {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
+                {{ $t('status.show_all_conversation', { numStatus: otherTopLevelCount }, otherTopLevelCount) }}
              </span>
            </template>
          </i18n-t>
@ -146,7 +146,7 @@
                  </template>
                  <template #text>
                    <span>
-                      {{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
+                      {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).length - 1).length - 1 }) }}
                    </span>
                  </template>
                </i18n-t>
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -293,9 +293,12 @@ const EmojiInput = {
        }))
      this.highlighted = this.defaultCandidateIndex
      this.$refs.screenReaderNotice.announce(
-        this.$tc('tool_tip.autocomplete_available',
-          this.suggestions.length,
-          { number: this.suggestions.length }))
+        this.$t(
+          'tool_tip.autocomplete_available',
+          { number: this.suggestions.length },
+          this.suggestions.length
+        )
+      )
    }
  },
  methods: {
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@ -92,7 +92,7 @@ const EmojiReactions = {
            toggled: this.reactedWith(reaction.name)
          }
        ],
-        'aria-label': this.$tc('status.reaction_count_label', reaction.count, { num: reaction.count })
+        'aria-label': this.$t('status.reaction_count_label', { num: reaction.count }, reaction.count)
      }
    }
  }
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@ -14,7 +14,7 @@
          class="fa-scale-110 icon"
          icon="comments"
        />
-        {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
+        {{ $t('notifications.unread_chats', { num: unreadChatCount }, unreadChatCount) }}
      </router-link>
    </div>
    <div
@ -31,7 +31,7 @@
          class="fa-scale-110 icon"
          icon="bullhorn"
        />
-        {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
+        {{ $t('notifications.unread_announcements', { num: unreadAnnouncementCount }, unreadAnnouncementCount) }}
      </router-link>
    </div>
    <div
@ -48,7 +48,7 @@
          class="fa-scale-110 icon"
          icon="user-plus"
        />
-        {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
+        {{ $t('notifications.unread_follow_requests', { num: followRequestCount }, followRequestCount) }}
      </router-link>
    </div>
    <i18n-t
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -9,7 +9,7 @@
        :key="index"
      >
        <label>
-          {{ index === 0 ? $t('settings.primary_language') : $tc('settings.fallback_language', index, { index }) }}
+          {{ index === 0 ? $t('settings.primary_language') : $t('settings.fallback_language', { index }, index) }}
          <Select
            class="language-select"
            :model-value="controlledLanguage[index]"
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@ -98,7 +98,7 @@
    <span
      class="counter"
    >
-      {{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
+      {{ $t('media_modal.counter', { current: currentIndex + 1, total: media.length }, currentIndex + 1) }}
    </span>
    <span
      v-if="loading"
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@ -85,10 +85,10 @@
      </span>
      <div class="total">
        <template v-if="typeof poll.voters_count === 'number'">
-          {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}
+          {{ $t("polls.people_voted_count", { count: poll.voters_count }, poll.voters_count) }}
        </template>
        <template v-else>
-          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}
+          {{ $t("polls.votes_count", { count: poll.votes_count }, poll.votes_count) }}
        </template>
        <span v-if="expiresAt !== null">
          &nbsp;·&nbsp;
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@ -84,7 +84,7 @@
            :key="unit"
            :value="unit"
          >
-            {{ $tc(`time.unit.${unit}_short`, expiryAmount, ['']) }}
+            {{ $t(`time.unit.${unit}_short`, [''], expiryAmount) }}
          </option>
        </Select>
      </div>
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@ -201,7 +201,7 @@
                  <span>{{ $t('registration.validations.birthday_required') }}</span>
                </li>
                <li v-if="v$.user.birthday.maxValue.$invalid">
-                  <span>{{ $tc('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
+                  <span>{{ $t('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
                </li>
              </ul>
            </div>
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@ -80,7 +80,7 @@
              <span
                v-else-if="backup.state === 'running'"
              >
-                {{ $tc('settings.backup_running', backup.processed_number, { number: backup.processed_number }) }}
+                {{ $t('settings.backup_running', { number: backup.processed_number }, backup.processed_number) }}
              </span>
              <span
                v-else-if="backup.state === 'failed'"
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -260,18 +260,46 @@ 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')
+        }
+      }
+      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
--- a/src/components/status/status.scss
+++ b/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 {
--- a/src/components/status/status.vue
+++ b/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,6 +285,7 @@
              >
                <i18n-t
                  keypath="status.reply_to_with_arg"
+                  scope="global"
                >
                  <template #replyToWithIcon>
                    <StatusPopover
@ -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"
@ -481,10 +457,10 @@
            <button
              v-if="showOtherRepliesAsButton && replies.length > 1"
              class="button-unstyled -link"
-              :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
+              :title="$t('status.ancestor_follow', { numReplies: replies.length - 1 }, replies.length - 1)"
              @click.prevent="dive"
            >
-              {{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
+              {{ $t('status.replies_list_with_others', { numReplies: replies.length - 1 }, replies.length - 1) }}
            </button>
            <span
              v-else
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@ -89,7 +89,7 @@
        </template>
        <template #text>
          <span>
-            {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
+            {{ $t('status.thread_follow', { numStatus: totalReplyCount[status.id] }, totalReplyCount[status.id]) }}
          </span>
        </template>
      </i18n-t>
@ -108,7 +108,7 @@
        </template>
        <template #text>
          <span>
-            {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
+            {{ $t('status.thread_show_full', { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }, totalReplyCount[status.id]) }}
          </span>
        </template>
      </i18n-t>
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@ -40,7 +40,7 @@ export default {
      return this.timeAsDate.toLocaleString(this.browserLocale)
    },
    relativeTimeString () {
-      const timeString = this.$i18n.tc(this.relativeTime.key, this.relativeTime.num, [this.relativeTime.num])
+      const timeString = this.$i18n.t(this.relativeTime.key, [this.relativeTime.num], this.relativeTime.num)

      if (typeof this.templateKey === 'string' && this.relativeTime.key !== 'time.now') {
        return this.$i18n.t(this.templateKey, [timeString])
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -1243,6 +1243,8 @@
    "status_unavailable": "Status unavailable",
    "copy_link": "Copy link to status",
    "external_source": "External source",
+    "muted_words": "Wordfiltered: {word} | Wordfiltered: {word} and {numWordsMore} more words",
+    "multi_reason_mute": "{main} | {main} + one more reason | {main} + {numReasonsMore} more reasons",
    "thread_muted": "Thread muted",
    "thread_muted_and_words": ", has words:",
    "sensitive_muted": "Muting sensitive content",
@ -1405,6 +1407,7 @@
  },
  "tool_tip": {
    "media_upload": "Upload media",
+    "mentions": "Mentions",
    "repeat": "Repeat",
    "reply": "Reply",
    "favorite": "Favorite",
--- a/yarn.lock
+++ b/yarn.lock
@ -1804,30 +1804,21 @@
    source-map "0.6.1"
    yaml-eslint-parser "^0.3.2"

-"@intlify/core-base@9.2.2":
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
-  integrity sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==
+"@intlify/core-base@10.0.5":
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-10.0.5.tgz#c4d992381f8c3a50c79faf67be3404b399c3be28"
+  integrity sha512-F3snDTQs0MdvnnyzTDTVkOYVAZOE/MHwRvF7mn7Jw1yuih4NrFYLNYIymGlLmq4HU2iIdzYsZ7f47bOcwY73XQ==
  dependencies:
-    "@intlify/devtools-if" "9.2.2"
-    "@intlify/message-compiler" "9.2.2"
-    "@intlify/shared" "9.2.2"
-    "@intlify/vue-devtools" "9.2.2"
+    "@intlify/message-compiler" "10.0.5"
+    "@intlify/shared" "10.0.5"

-"@intlify/devtools-if@9.2.2":
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz#b13d9ac4b4e2fe6d2e7daa556517a8061fe8bd39"
-  integrity sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==
+"@intlify/message-compiler@10.0.5":
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-10.0.5.tgz#4eeace9f4560020d5e5d77f32bed7755e71d8efd"
+  integrity sha512-6GT1BJ852gZ0gItNZN2krX5QAmea+cmdjMvsWohArAZ3GmHdnNANEcF9JjPXAMRtQ6Ux5E269ymamg/+WU6tQA==
  dependencies:
-    "@intlify/shared" "9.2.2"
-
-"@intlify/message-compiler@9.2.2":
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz#e42ab6939b8ae5b3d21faf6a44045667a18bba1c"
-  integrity sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==
-  dependencies:
-    "@intlify/shared" "9.2.2"
-    source-map "0.6.1"
+    "@intlify/shared" "10.0.5"
+    source-map-js "^1.0.2"

 "@intlify/message-compiler@next":
  version "9.2.0-beta.34"
@ -1837,24 +1828,21 @@
    "@intlify/shared" "9.2.0-beta.34"
    source-map "0.6.1"

+"@intlify/shared@10.0.5":
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-10.0.5.tgz#1b46ca8b541f03508fe28da8f34e4bb85506d6bc"
+  integrity sha512-bmsP4L2HqBF6i6uaMqJMcFBONVjKt+siGluRq4Ca4C0q7W2eMaVZr8iCgF9dKbcVXutftkC7D6z2SaSMmLiDyA==
+
 "@intlify/shared@9.2.0-beta.34", "@intlify/shared@next":
  version "9.2.0-beta.34"
  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.0-beta.34.tgz#e8e9a93455eadcc9785fe2e2437fe037fc267f7d"
  integrity sha512-hbUKcVbTOkLVpnlSeZE1OPgEI7FpvhuZF/gb84xECTjXEImIa3u0fIcJKUUffv3dlAx8fMOE5xKgDzngidm0tw==

-"@intlify/shared@9.2.2", "@intlify/shared@^9.2.2":
+"@intlify/shared@^9.2.2":
  version "9.2.2"
  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
  integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==

-"@intlify/vue-devtools@9.2.2":
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
-  integrity sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==
-  dependencies:
-    "@intlify/core-base" "9.2.2"
-    "@intlify/shared" "9.2.2"
-
 "@intlify/vue-i18n-loader@5.0.1":
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/@intlify/vue-i18n-loader/-/vue-i18n-loader-5.0.1.tgz#af7d32059e32138e91495e5240f7ce2adb71c738"
@ -2410,16 +2398,16 @@
  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.3.tgz#a44c52e8fa6d22f84db3abdcdd0be5135b7dd7cf"
  integrity sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg==

-"@vue/devtools-api@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
-  integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
-
 "@vue/devtools-api@^6.4.5":
  version "6.4.5"
  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
  integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==

+"@vue/devtools-api@^6.5.0":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/reactivity-transform@3.2.45":
  version "3.2.45"
  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz#07ac83b8138550c83dfb50db43cde1e0e5e8124d"
@ -9206,15 +9194,14 @@ vue-eslint-parser@^9.0.1:
    lodash "^4.17.21"
    semver "^7.3.6"

-vue-i18n@9.2.2:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
-  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
+vue-i18n@10:
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-10.0.5.tgz#fdf4e6c7b669e80cfa3a12ed9625e2b46671cdf0"
+  integrity sha512-9/gmDlCblz3i8ypu/afiIc/SUIfTTE1mr0mZhb9pk70xo2csHAM9mp2gdQ3KD2O0AM3Hz/5ypb+FycTj/lHlPQ==
  dependencies:
-    "@intlify/core-base" "9.2.2"
-    "@intlify/shared" "9.2.2"
-    "@intlify/vue-devtools" "9.2.2"
-    "@vue/devtools-api" "^6.2.1"
+    "@intlify/core-base" "10.0.5"
+    "@intlify/shared" "10.0.5"
+    "@vue/devtools-api" "^6.5.0"

 vue-loader@17.0.1:
  version "17.0.1"