feat: sensitive channel (#11438)

* feat(backend): add isSensitive to Channel

* feat(backend): support isSensitive in channel endpoints

* feat(frontend/channel-editor): support isSensitive in create/edit channel page

* feat(frontend/channel): show sensitive indicator for sensitive channels

* docs(changelog): add チャンネルをセンシティブ指定できるようになりました

* chore: license header for each file

* chore: add isSensitive of channel to Note object

packages/frontend/src/components/MkChannelPreview.vue

@@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<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>
@@ -102,6 +103,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 {

packages/frontend/src/pages/channel-editor.vue

@@ -20,6 +20,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.color }}</template>
 			</MkColorInput>
 
+			<MkSwitch v-model="isSensitive">
+				<template #label>{{ i18n.ts.sensitive }}</template>
+			</MkSwitch>
+
 			<div>
 				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ti ti-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
 				<div v-else-if="bannerUrl">
@@ -72,6 +76,7 @@ import { useRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import MkFolder from '@/components/MkFolder.vue';
+import MkSwitch from "@/components/MkSwitch.vue";
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
@@ -87,6 +92,7 @@ let description = $ref(null);
 let bannerUrl = $ref<string | null>(null);
 let bannerId = $ref<string | null>(null);
 let color = $ref('#000');
+let isSensitive = $ref(false);
 const pinnedNotes = ref([]);
 
 watch(() => bannerId, async () => {
@@ -110,6 +116,7 @@ async function fetchChannel() {
 	description = channel.description;
 	bannerId = channel.bannerId;
 	bannerUrl = channel.bannerUrl;
+	isSensitive = channel.isSensitive;
 	pinnedNotes.value = channel.pinnedNoteIds.map(id => ({
 		id,
 	}));
@@ -142,6 +149,7 @@ function save() {
 		bannerId: bannerId,
 		pinnedNoteIds: pinnedNotes.value.map(x => x.id),
 		color: color,
+		isSensitive: isSensitive,
 	};
 
 	if (props.channelId) {

packages/frontend/src/pages/channel.vue

@@ -17,6 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<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">
@@ -274,4 +275,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>