From 1d22f64d36401f21b7971c40b38c4f472d130d10 Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Mon, 31 Jul 2023 16:32:44 +0900
Subject: [PATCH] feat(frontend/channel): show sensitive indicator for
 sensitive channels

---
 .../frontend/src/components/MkChannelPreview.vue   | 14 ++++++++++++++
 packages/frontend/src/pages/channel.vue            | 14 ++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index 6ef50bddcf..422a5847be 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -3,6 +3,7 @@
 	<div class="banner" :style="bannerStyle">
 		<div class="fade"></div>
 		<div class="name"><i class="ti ti-device-tv"></i> {{ channel.name }}</div>
+		<div v-if="channel.isSensitive" class="sensitiveIndicator">{{ i18n.ts.sensitive }}</div>
 		<div class="status">
 			<div>
 				<i class="ti ti-users ti-fw"></i>
@@ -97,6 +98,19 @@ const bannerStyle = computed(() => {
 			border-radius: 6px;
 			color: #fff;
 		}
+
+		> .sensitiveIndicator {
+			position: absolute;
+			z-index: 1;
+			bottom: 16px;
+			left: 16px;
+			background: rgba(0, 0, 0, 0.7);
+			color: var(--warn);
+			border-radius: 6px;
+			font-weight: bold;
+			font-size: 1em;
+			padding: 4px 7px;
+		}
 	}
 
 	> article {
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 2a056f21d4..75e2f4ca91 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -12,6 +12,7 @@
 						<div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
 						<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
 					</div>
+					<div v-if="channel.isSensitive" :class="$style.sensitiveIndicator">{{ i18n.ts.sensitive }}</div>
 					<div :class="$style.bannerFade"></div>
 				</div>
 				<div v-if="channel.description" :class="$style.description">
@@ -269,4 +270,17 @@ definePageMetadata(computed(() => channel ? {
 .description {
 	padding: 16px;
 }
+
+.sensitiveIndicator {
+	position: absolute;
+	z-index: 1;
+	bottom: 16px;
+	left: 16px;
+	background: rgba(0, 0, 0, 0.7);
+	color: var(--warn);
+	border-radius: 6px;
+	font-weight: bold;
+	font-size: 1em;
+	padding: 4px 7px;
+}
 </style>