Merge branch 'io' into merge-upstream

packages/frontend/src/components/MkDialog.vue

@@ -27,13 +27,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
 		<div v-if="text" :class="$style.text"><Mfm :text="text"/></div>
-		<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" :autocomplete="input.autocomplete" @keydown="onInputKeydown">
-			<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
-			<template #caption>
-				<span v-if="okButtonDisabled && disabledReason === 'charactersExceeded'" v-text="i18n.t('_dialog.charactersExceeded', { current: (inputValue as string).length, max: input.maxLength ?? 'NaN' })"/>
-				<span v-else-if="okButtonDisabled && disabledReason === 'charactersBelow'" v-text="i18n.t('_dialog.charactersBelow', { current: (inputValue as string).length, min: input.minLength ?? 'NaN' })"/>
-			</template>
-		</MkInput>
+		<template v-if="input">
+			<MkInput v-if="input.type != 'textarea'" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" :autocomplete="input.autocomplete" @keydown="onInputKeydown">
+				<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
+				<template #caption>
+					<span v-if="okButtonDisabled && disabledReason === 'charactersExceeded'" v-text="i18n.t('_dialog.charactersExceeded', { current: (inputValue as string).length, max: input.maxLength ?? 'NaN' })"/>
+					<span v-else-if="okButtonDisabled && disabledReason === 'charactersBelow'" v-text="i18n.t('_dialog.charactersBelow', { current: (inputValue as string).length, min: input.minLength ?? 'NaN' })"/>
+				</template>
+			</MkInput>
+			<MkTextarea v-if="input.type === 'textarea'" v-model="inputValue" :placeholder="input.placeholder || undefined" :autocomplete="input.autocomplete">
+				<template #label>{{ input.placeholder }}</template>
+				<template #caption>
+					<span v-if="okButtonDisabled && disabledReason === 'charactersExceeded'" v-text="i18n.t('_dialog.charactersExceeded', { current: (inputValue as string).length, max: input.maxLength ?? 'NaN' })"/>
+					<span v-else-if="okButtonDisabled && disabledReason === 'charactersBelow'" v-text="i18n.t('_dialog.charactersBelow', { current: (inputValue as string).length, min: input.minLength ?? 'NaN' })"/>
+				</template>
+			</MkTextarea>
+		</template>
 		<MkSelect v-if="select" v-model="selectedValue" autofocus>
 			<template v-if="select.items">
 				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
@@ -61,10 +70,11 @@ import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
 import { i18n } from '@/i18n.js';
 
 type Input = {
-	type: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search' | 'datetime-local';
+	type: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search' | 'datetime-local' | 'textarea';
 	placeholder?: string | null;
 	autocomplete?: string;
 	default: string | number | null;

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"/>
@@ -188,6 +189,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}` : '';
 
@@ -1188,6 +1191,10 @@ defineExpose({
 	color: var(--accent);
 }
 
+.guidelineInfo {
+	margin-top: 8px;
+}
+
 @container (max-width: 500px) {
 	.headerRight {
 		font-size: .9em;

packages/frontend/src/os.ts

@@ -251,7 +251,7 @@ export function actions<T extends {
 }
 
 export function inputText(props: {
-	type?: 'text' | 'email' | 'password' | 'url';
+	type?: 'text' | 'email' | 'password' | 'url' | 'textarea';
 	title?: string | null;
 	text?: string | null;
 	placeholder?: string | null;

packages/frontend/src/pages/custom-emojis-manager.vue

@@ -228,6 +228,7 @@ const setCategoryBulk = async () => {
 
 const setLicenseBulk = async () => {
 	const { canceled, result } = await os.inputText({
+		type: 'textarea',
 		title: 'License',
 	});
 	if (canceled) return;