merge: Minor improvements to relation badges on user profiles (!674)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/674

Approved-by: Marie <github@yuugi.dev>
Approved-by: dakkar <dakkar@thenautilus.net>

4 files changed, 20 insertions, 6 deletions

diff --git a/locales/en-US.yml b/locales/en-US.yml
index ab09ccaf86..e50a78e414 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -271,6 +271,7 @@ defaultValueIs: "Default: {value}"
 noCustomEmojis: "There are no emoji"
 noJobs: "There are no jobs"
 federating: "Federating"
+blockingYou: "Blocking you"
 blocked: "Blocked"
 blockedByBase: "This host is blocked implicitly because a base domain is blocked. To unblock this host, first unblock the base domain(s)."
 silencedByBase: "This host is silenced implicitly because a base domain is silenced. To un-silence this host, first un-silence the base domain(s)."
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 742bab2341..6d6ee68c1c 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1101,6 +1101,10 @@ export interface Locale extends ILocale {
      */
     "federating": string;
     /**
+     * Blocking you
+     */
+    "blockingYou": string;
+    /**
      * ブロック中
      */
     "blocked": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 67a4580560..f2c3d67133 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -271,6 +271,7 @@ defaultValueIs: "デフォルト: {value}"
 noCustomEmojis: "絵文字はありません"
 noJobs: "ジョブはありません"
 federating: "連合中"
+blockingYou: "Blocking you"
 blocked: "ブロック中"
 blockedByBase: "This host is blocked implicitly because a base domain is blocked. To unblock this host, first unblock the base domain(s)."
 silencedByBase: "This host is silenced implicitly because a base domain is silenced. To un-silence this host, first un-silence the base domain(s)."
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 2ec47889d6..92879b23d3 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -30,12 +30,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</button>
 							</div>
 						</div>
-						<div v-if="$i && $i.id != user.id" class="info-badges">
-							<span v-if="user.isFollowed">{{ i18n.ts.followsYou }}</span>
-							<span v-if="user.isMuted">{{ i18n.ts.muted }}</span>
-							<span v-if="user.isRenoteMuted">{{ i18n.ts.renoteMuted }}</span>
-							<span v-if="user.isBlocking">{{ i18n.ts.blocked }}</span>
-						</div>
+						<ul v-if="$i && $i.id != user.id" class="info-badges">
+							<li v-if="user.isFollowed && user.isFollowing">{{ i18n.ts.mutuals }}</li>
+							<li v-else-if="user.isFollowing">{{ i18n.ts.following }}</li>
+							<li v-else-if="user.isFollowed">{{ i18n.ts.followsYou }}</li>
+							<li v-if="user.isMuted">{{ i18n.ts.muted }}</li>
+							<li v-if="user.isRenoteMuted">{{ i18n.ts.renoteMuted }}</li>
+							<li v-if="user.isBlocking">{{ i18n.ts.blocked }}</li>
+							<li v-if="user.isBlocked && $i.isModerator">{{ i18n.ts.blockingYou }}</li>
+						</ul>
 						<div class="actions">
 							<button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
 							<MkFollowButton v-if="$i?.id != user.id" v-model:user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
@@ -469,12 +472,17 @@ onUnmounted(() => {
 						display: flex;
 						flex-direction: row;
 
+						padding: 0;
+						margin: 0;
+
 						> * {
 							padding: 4px 8px;
 							color: #fff;
 							background: rgba(0, 0, 0, 0.7);
 							font-size: 0.7em;
 							border-radius: var(--radius-sm);
+							list-style-type: none;
+							margin-left: 0;
 						}
 
 						> :not(:first-child) {