投稿フォームにNSFWガイドラインへの導線を追加 (MisskeyIO#182)

locales/index.d.ts

@@ -1981,6 +1981,7 @@ export interface Locale {
             "e": string;
             "f": string;
         };
+        "guidelineInfo": string;
     };
     "_profile": {
         "name": string;

locales/ja-JP.yml

@@ -1897,6 +1897,7 @@ _postForm:
     d: "言いたいことは？"
     e: "ここに書いてください"
     f: "あなたが書くのを待っています..."
+  guidelineInfo: "[NSFWガイドライン]({nsfwGuideUrl})を必ずお読みになってからご利用ください。"
 
 _profile:
   name: "名前"

packages/frontend/src/components/MkInfo.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.warn]: warn }]">
+<div :class="[$style.root, { [$style.warn]: warn, [$style.rounded]: rounded }]">
 	<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
 	<i v-else class="ti ti-info-circle" :class="$style.i"></i>
 	<slot></slot>
@@ -14,9 +14,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { } from 'vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	warn?: boolean;
-}>();
+	rounded?: boolean;
+}>(), {
+	rounded: true,
+});
 </script>
 
 <style lang="scss" module>
@@ -25,13 +28,16 @@ const props = defineProps<{
 	font-size: 90%;
 	background: var(--infoBg);
 	color: var(--infoFg);
-	border-radius: var(--radius);
 	white-space: pre-wrap;
 
 	&.warn {
 		background: var(--infoWarnBg);
 		color: var(--infoWarnFg);
 	}
+
+	&.rounded {
+		border-radius: var(--radius);
+	}
 }
 
 .i {

packages/frontend/src/components/MkPostForm.vue

@@ -71,6 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 	</div>
 	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
+	<MkInfo v-if="files.length > 0" warn :class="$style.guidelineInfo" :rounded="false"><Mfm :text="i18n.t('_postForm.guidelineInfo', { tosUrl: instance.tosUrl, nsfwGuideUrl })"/></MkInfo>
 	<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/>
 	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
@@ -189,6 +190,8 @@ let recentHashtags = $ref(JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]')
 let imeText = $ref('');
 let showingOptions = $ref(false);
 
+const nsfwGuideUrl = 'https://go.misskey.io/media-guideline';
+
 const draftKey = $computed((): string => {
 	let key = props.channel ? `channel:${props.channel.id}` : '';
 
@@ -1178,6 +1181,10 @@ defineExpose({
 	color: var(--accent);
 }
 
+.guidelineInfo {
+	margin-top: 8px;
+}
+
 @container (max-width: 500px) {
 	.headerRight {
 		font-size: .9em;