feat: 🧐 bring back misskey's moderation displays on profile

packages/client/src/components/MkSignin.vue

@@ -160,7 +160,6 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from "vue";
 import { toUnicode } from "punycode/";
-import { showSuspendedDialog } from "../scripts/show-suspended-dialog";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
 import MkInfo from "@/components/MkInfo.vue";
@@ -367,6 +366,14 @@ function resetPassword() {
 		"closed"
 	);
 }
+
+function showSuspendedDialog() {
+	os.alert({
+		type: "error",
+		title: i18n.ts.yourAccountSuspendedTitle,
+		text: i18n.ts.yourAccountSuspendedDescription,
+	});
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -7,9 +7,22 @@
 			:class="{ wide: !narrow }"
 		>
 			<div class="main">
-				<!-- TODO -->
-				<!-- <div class="punished" v-if="user.isSuspended"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
-				<!-- <div class="punished" v-if="user.isSilenced"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
+				<div v-if="$i?.isModerator || $i?.isAdmin">
+					<div class="punished" v-if="user.isSilenced">
+						<i
+							class="ph-warning ph-bold ph-lg"
+							style="margin-right: 8px; color: var(--warn)"
+						></i>
+						{{ i18n.ts.silenced }}
+					</div>
+					<div class="punished" v-if="user.isSuspended">
+						<i
+							class="ph-warning ph-bold ph-lg"
+							style="margin-right: 8px; color: var(--warn)"
+						></i>
+						{{ i18n.ts.suspended }}
+					</div>
+				</div>
 
 				<div class="profile">
 					<MkMoved
@@ -447,7 +460,10 @@ onUnmounted(() => {
 	> .main {
 		> .punished {
 			font-size: 0.8em;
-			padding: 16px;
+			padding: 10px;
+			color: var(--infoWarnBg);
+			background-color: var(--infoWarnFg);
+			border-radius: 10px;
 		}
 
 		> .profile {

packages/client/src/scripts/show-suspended-dialog.ts

@@ -1,10 +0,0 @@
-import * as os from "@/os";
-import { i18n } from "@/i18n";
-
-export function showSuspendedDialog() {
-	return os.alert({
-		type: "error",
-		title: i18n.ts.yourAccountSuspendedTitle,
-		text: i18n.ts.yourAccountSuspendedDescription,
-	});
-}