merge: fix inconsistent relation badges between user profile and user info block (resolves #778) (!716)

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

Closes #778

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

locales/index.d.ts

@@ -5353,6 +5353,10 @@ export interface Locale extends ILocale {
          * オンにすると、このお知らせは通知されず、既読にする必要もなくなります。
          */
         "silenceDescription": string;
+        /**
+         * New
+         */
+        "new": string;
     };
     "_initialAccountSetting": {
         /**
@@ -8442,6 +8446,10 @@ export interface Locale extends ILocale {
          * アプリケーションにアクセス許可を与えるには、ログインが必要です。
          */
         "pleaseLogin": string;
+        /**
+         * Allowed
+         */
+        "allowed": string;
     };
     "_antennaSources": {
         /**
@@ -10603,6 +10611,30 @@ export interface Locale extends ILocale {
      * Mutuals
      */
     "mutuals": string;
+    /**
+     * Private account
+     */
+    "isLocked": string;
+    /**
+     * Administrator
+     */
+    "isAdmin": string;
+    /**
+     * Bot user
+     */
+    "isBot": string;
+    /**
+     * Open
+     */
+    "open": string;
+    /**
+     * Destination address
+     */
+    "emailDestination": string;
+    /**
+     * Date
+     */
+    "date": string;
     /**
      * Quoted.
      */
@@ -10964,6 +10996,10 @@ export interface Locale extends ILocale {
      * Blocking you
      */
     "blockingYou": string;
+    /**
+     * Show warning when opening external URLs
+     */
+    "warnExternalUrl": string;
     "_mfm": {
         /**
          * This is not a widespread feature, it may not display properly on most other fedi software, including other Misskey forks

packages/frontend/src/components/MkUserInfo.vue

@@ -11,7 +11,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 		<p :class="$style.username"><MkAcct :user="user"/></p>
 	</div>
-	<span v-if="$i && $i.id !== user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
+	<ul v-if="$i && $i.id != user.id" :class="$style.infoBadges">
+		<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="$style.description">
 		<div v-if="user.description" :class="$style.mfm">
 			<Mfm :text="user.description" :isBlock="true" :author="user"/>
@@ -144,4 +152,30 @@ defineProps<{
 	top: 8px;
 	right: 8px;
 }
+
+.infoBadges {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+
+	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) {
+		margin-left: 8px;
+	}
+}
 </style>

packages/frontend/src/pages/user/home.vue

@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</button>
 							</div>
 						</div>
-						<ul v-if="$i && $i.id != user.id" class="info-badges">
+						<ul v-if="$i && $i.id != user.id" :class="$style.infoBadges">
 							<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>
@@ -469,32 +469,6 @@ onUnmounted(() => {
 						background: linear-gradient(transparent, rgba(#000, 0.7));
 					}
 
-					> .info-badges {
-						position: absolute;
-						top: 12px;
-						left: 12px;
-
-						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) {
-							margin-left: 8px;
-						}
-					}
-
 					> .actions {
 						position: absolute;
 						top: 12px;
@@ -849,4 +823,30 @@ onUnmounted(() => {
 .pinnedNote:not(:last-child) {
 	border-bottom: solid 0.5px var(--divider);
 }
+
+.infoBadges {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+
+	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) {
+		margin-left: 8px;
+	}
+}
 </style>