enhance(frontend): 노트 작성 영역에서 각 항목이 더 잘 구분되도록 조정함

CHANGELOG_CHERRYPICK.md

@@ -29,6 +29,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGELOG.md#2024xx) 문서를 참고하십시오.
 
 ### Client
+- Enhance: 노트 작성 영역에서 각 항목이 더 잘 구분되도록 조정함
 - Fix: 노트 삭제 예약 기한을 `기간 지정`으로 설정한 경우 노트가 즉시 삭제될 수 있음
 
 ### Server

packages/frontend/src/components/MkEventEditor.vue

@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="zmdxowut">
-	<MkInput v-model="title" small type="text" class="input">
+	<span>{{ i18n.ts.event }}</span>
+	<MkInput v-model="title" small type="text" class="input" style="margin: 16px 0 0 0;">
 		<template #label>*{{ i18n.ts.title }}</template>
 	</MkInput>
 	<section>
@@ -227,10 +228,14 @@ watch([
 .zmdxowut {
 	padding: 8px 16px;
 
-	>section {
+	> span {
+		opacity: 0.7;
+	}
+
+	> section {
 		margin: 16px 0 0 0;
 
-		>div {
+		> div {
 			margin: 0 8px;
 			display: flex;
 			flex-direction: row;
@@ -240,18 +245,18 @@ watch([
 			&:last-child {
 				flex: 1 0 auto;
 
-				>div {
+				> div {
 					flex-grow: 1;
 				}
 
-				>section {
+				> section {
 					// MAGIC: Prevent div above from growing unless wrapped to its own line
 					flex-grow: 9999;
 					align-items: end;
 					display: flex;
 					gap: 4px;
 
-					>.input {
+					> .input {
 						flex: 1 1 auto;
 					}
 				}

packages/frontend/src/components/MkPollEditor.vue

@@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="zmdxowus">
+	<span>{{ i18n.ts.poll }}</span>
 	<p v-if="choices.length < 2" class="caution">
 		<i class="ti ti-alert-triangle"></i>{{ i18n.ts._poll.noOnlyOneChoice }}
 	</p>
@@ -149,6 +150,10 @@ watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('
 .zmdxowus {
 	padding: 8px 16px;
 
+	> span {
+		opacity: 0.7;
+	}
+
 	> .caution {
 		margin: 0 0 8px 0;
 		font-size: 0.8em;

packages/frontend/src/components/MkPostForm.vue

@@ -77,7 +77,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/>
 	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 	<MkScheduledNoteDelete v-if="scheduledNoteDelete" v-model="scheduledNoteDelete" @destroyed="scheduledNoteDelete = null"/>
-	<MkScheduleEditor v-if="scheduleNote" v-model="scheduleNote" @destroyed="scheduleNote = null"/>
+	<MkSchedulePostEditor v-if="scheduleNote" v-model="scheduleNote" @destroyed="scheduleNote = null"/>
 	<MkNotePreview v-if="showPreview && textLength > 0" :class="$style.preview" :text="text" :files="files" :poll="poll ?? undefined" :useCw="useCw" :cw="cw" :user="postAccount ?? $i" :showProfile="showProfilePreview"/>
 	<div v-if="showingOptions" style="padding: 8px 16px;">
 	</div>
@@ -139,7 +139,7 @@ import { vibrate } from '@/scripts/vibrate.js';
 import * as sound from '@/scripts/sound.js';
 import { mfmFunctionPicker } from '@/scripts/mfm-function-picker.js';
 import MkScheduledNoteDelete, { type DeleteScheduleEditorModelValue } from '@/components/MkScheduledNoteDelete.vue';
-import MkScheduleEditor from '@/components/MkScheduleEditor.vue';
+import MkSchedulePostEditor from '@/components/MkSchedulePostEditor.vue';
 import { listScheduleNotePost } from '@/os.js';
 
 const $i = signinRequired();

packages/frontend/src/components/MkPostFormSimple.vue

@@ -88,7 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<XPostFormAttaches v-if="showForm" v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/>
 	<MkPollEditor v-if="poll && showForm" v-model="poll" @destroyed="poll = null"/>
 	<MkScheduledNoteDelete v-if="scheduledNoteDelete" v-model="scheduledNoteDelete" @destroyed="scheduledNoteDelete = null"/>
-	<MkScheduleEditor v-if="scheduleNote" v-model="scheduleNote" @destroyed="scheduleNote = null"/>
+	<MkSchedulePostEditor v-if="scheduleNote" v-model="scheduleNote" @destroyed="scheduleNote = null"/>
 	<MkNotePreview v-if="showPreview && showForm && textLength > 0" :class="$style.preview" :text="text" :files="files" :poll="poll ?? undefined" :useCw="useCw" :cw="cw" :user="postAccount ?? $i" :showProfile="showProfilePreview"/>
 	<div v-if="showingOptions && showForm" style="padding: 8px 16px;">
 	</div>
@@ -156,7 +156,7 @@ import XSigninDialog from '@/components/MkSigninDialog.vue';
 import * as sound from '@/scripts/sound.js';
 import { mfmFunctionPicker } from '@/scripts/mfm-function-picker.js';
 import MkScheduledNoteDelete, { type DeleteScheduleEditorModelValue } from '@/components/MkScheduledNoteDelete.vue';
-import MkScheduleEditor from '@/components/MkScheduleEditor.vue';
+import MkSchedulePostEditor from '@/components/MkSchedulePostEditor.vue';
 import { listScheduleNotePost } from '@/os.js';
 
 const $i = signinRequired();

packages/frontend/src/components/MkSchedulePostEditor.vue

@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div style="padding: 8px 16px;">
-	<section>
+	<span style="opacity: 0.7;">{{ i18n.ts.schedulePost }}</span>
+	<section style="margin: 16px 0 0 0;">
 		<MkInput v-model="atDate" small type="date" class="input">
 			<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
 		</MkInput>