enhance(frontend): 投稿フォームの設定メニューを改良 (#14804)

* enhance(frontend): 投稿フォームの設定メニューを改良 * Update Changelog * indent * MkMenuのitemを切り出して共通化 * remove unused expose * fix: ドロワーなどのOptionが当たらない問題を修正 * 他のpopupMenuの項目選択時と挙動をあわせる * チュートリアルで詰む問題を修正 * Revert "MkMenuのitemを切り出して共通化" This reverts commit ce3679798c. * enhance: slotで共通化 * Update MkPostFormOtherMenu.vue * remove duplicated locale key * refactor: メニューの定義をMkPostForm側で行うように * Update CHANGELOG.md * [ci skip] Update MkPostFormOtherMenu.vue * Update MkPostForm.vue * Update CHANGELOG.md --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
2025-03-16 14:05:58 +09:00 · 2025-03-16 14:05:58 +09:00 · ce6b2448ce
parent 7d44b47fdf
commit ce6b2448ce
8 changed files with 360 additions and 168 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -14,6 +14,9 @@
 - Enhance: CWの注釈テキストが入力されていない場合, Postボタンを非アクティブに
 - Enhance: CWを無効にした場合, 注釈テキストが最大入力文字数を超えていても投稿できるように
 - Enhance: テーマ設定画面のデザインを改善
+- Enhance: 投稿フォームの設定メニューを改良
+  - 投稿フォームをリセットできるように
+  - 文字数カウントを復活
 - Fix: テーマ切り替え時に一部の色が変わらない問題を修正

 ### Server
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -5346,6 +5346,10 @@ export interface Locale extends ILocale {
     * 投稿フォーム
     */
    "postForm": string;
+    /**
+     * 文字数
+     */
+    "textCount": string;
    "_emojiPalette": {
        /**
         * パレット
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -1332,6 +1332,7 @@ preferenceSyncConflictChoiceCancel: "同期の有効化をキャンセル"
 paste: "ペースト"
 emojiPalette: "絵文字パレット"
 postForm: "投稿フォーム"
+textCount: "文字数"

 _emojiPalette:
  palettes: "パレット"
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@ -15,9 +15,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@focusin.passive.stop="() => {}"
 >
 	<div
-		ref="itemsEl"
-		v-hotkey="keymap"
-		tabindex="0"
 		class="_popup _shadow"
 		:class="$style.menu"
 		:style="{
@ -27,147 +24,156 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@keydown.stop="() => {}"
 		@contextmenu.self.prevent="() => {}"
 	>
-		<template v-for="item in (items2 ?? [])">
-			<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
-			<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
-				<span style="opacity: 0.7;">{{ item.text }}</span>
+		<slot name="header"></slot>
+		<div
+			ref="itemsEl"
+			v-hotkey="keymap"
+			tabindex="0"
+			:class="$style.menuItems"
+		>
+			<template v-for="item in (items2 ?? [])">
+				<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
+				<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
+					<span style="opacity: 0.7;">{{ item.text }}</span>
+				</span>
+				<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
+					<span><MkEllipsis/></span>
+				</span>
+				<MkA
+					v-else-if="item.type === 'link'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item]"
+					:to="item.to"
+					@click.passive="close(true)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+					<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text">{{ item.text }}</span>
+						<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+					</div>
+				</MkA>
+				<a
+					v-else-if="item.type === 'a'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item]"
+					:href="item.href"
+					:target="item.target"
+					:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
+					:download="item.download"
+					@click.passive="close(true)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text">{{ item.text }}</span>
+						<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+					</div>
+				</a>
+				<button
+					v-else-if="item.type === 'user'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item, { [$style.active]: item.active }]"
+					@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
+					<div v-if="item.indicate" :class="$style.item_content">
+						<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+					</div>
+				</button>
+				<button
+					v-else-if="item.type === 'switch'"
+					role="menuitemcheckbox"
+					tabindex="0"
+					:class="['_button', $style.item]"
+					:disabled="unref(item.disabled)"
+					@click.prevent="switchItem(item)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+					<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+					<div :class="$style.item_content">
+						<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
+						<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+					</div>
+				</button>
+				<button
+					v-else-if="item.type === 'radio'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+					:disabled="unref(item.disabled)"
+					@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+					@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+					@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+						<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+					</div>
+				</button>
+				<button
+					v-else-if="item.type === 'radioOption'"
+					role="menuitemradio"
+					tabindex="0"
+					:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
+					@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<div :class="$style.icon">
+						<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
+					</div>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text">{{ item.text }}</span>
+					</div>
+				</button>
+				<button
+					v-else-if="item.type === 'parent'"
+					role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+					@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
+					@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
+					@click.prevent="!preferClick ? null : showChildren(item, $event)"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+						<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+					</div>
+				</button>
+				<button
+					v-else role="menuitem"
+					tabindex="0"
+					:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
+					@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
+					@mouseenter.passive="onItemMouseEnter"
+					@mouseleave.passive="onItemMouseLeave"
+				>
+					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+					<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+					<div :class="$style.item_content">
+						<span :class="$style.item_content_text">{{ item.text }}</span>
+						<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+					</div>
+				</button>
+			</template>
+			<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
+				<span>{{ i18n.ts.none }}</span>
 			</span>
-			<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
-				<span><MkEllipsis/></span>
-			</span>
-			<MkA
-				v-else-if="item.type === 'link'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				:to="item.to"
-				@click.passive="close(true)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</MkA>
-			<a
-				v-else-if="item.type === 'a'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				:href="item.href"
-				:target="item.target"
-				:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
-				:download="item.download"
-				@click.passive="close(true)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</a>
-			<button
-				v-else-if="item.type === 'user'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, { [$style.active]: item.active }]"
-				@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
-				<div v-if="item.indicate" :class="$style.item_content">
-					<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'switch'"
-				role="menuitemcheckbox"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				:disabled="unref(item.disabled)"
-				@click.prevent="switchItem(item)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-				<div :class="$style.item_content">
-					<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
-					<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'radio'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-				:disabled="unref(item.disabled)"
-				@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-				@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-				@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-					<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'radioOption'"
-				role="menuitemradio"
-				tabindex="0"
-				:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
-				@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<div :class="$style.icon">
-					<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
-				</div>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'parent'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-				@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
-				@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
-				@click.prevent="!preferClick ? null : showChildren(item, $event)"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-					<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-				</div>
-			</button>
-			<button
-				v-else role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
-				@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</button>
-		</template>
-		<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
-			<span>{{ i18n.ts.none }}</span>
-		</span>
+		</div>
+		<slot name="footer"></slot>
 	</div>
 	<div v-if="childMenu">
 		<XChild ref="child" :items="childMenu" :targetElement="childTarget!" :rootElement="itemsEl!" @actioned="childActioned" @closed="closeChild"/>
@ -429,7 +435,7 @@ onBeforeUnmount(() => {
 .root {
 	&.center {
 		> .menu {
-			> .item {
+			.item {
 				text-align: center;
 			}
 		}
@ -439,7 +445,7 @@ onBeforeUnmount(() => {
 		> .menu {
 			min-width: 230px;

-			> .item {
+			.item {
 				padding: 6px 20px;
 				font-size: 0.95em;
 				line-height: 24px;
@ -452,36 +458,38 @@ onBeforeUnmount(() => {
 		margin: auto;

 		> .menu {
-			padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 			width: 100%;
 			border-radius: 24px;
 			border-bottom-right-radius: 0;
 			border-bottom-left-radius: 0;

-			> .item {
-				font-size: 1em;
-				padding: 12px 24px;
+			> .menuItems {
+				padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;

-				&::before {
-					width: calc(100% - 24px);
-					border-radius: 12px;
+				> .item {
+					font-size: 1em;
+					padding: 12px 24px;
+
+					&::before {
+						width: calc(100% - 24px);
+						border-radius: 12px;
+					}
+
+					> .icon {
+						margin-right: 14px;
+						width: 24px;
+					}
 				}

-				> .icon {
-					margin-right: 14px;
-					width: 24px;
+				> .divider {
+					margin: 12px 0;
 				}
 			}
-
-			> .divider {
-				margin: 12px 0;
-			}
 		}
 	}
 }

 .menu {
-	padding: 8px 0;
 	box-sizing: border-box;
 	max-width: 100vw;
 	min-width: 200px;
@ -493,6 +501,11 @@ onBeforeUnmount(() => {
 	}
 }

+.menuItems {
+	padding: 8px 0;
+	box-sizing: border-box;
+}
+
 .item {
 	display: flex;
 	align-items: center;
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div :class="$style.headerRight">
 			<template v-if="!(channel != null && fixed)">
-				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
+				<button v-if="channel == null" ref="visibilityButton" v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
 					<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
 					<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
 					<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
@ -32,15 +32,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<span :class="$style.headerRightButtonText">{{ channel.name }}</span>
 				</button>
 			</template>
-			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
+			<button v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
 				<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
 				<span v-else><i class="ti ti-rocket-off"></i></span>
 			</button>
-			<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button" :class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]" @click="toggleReactionAcceptance">
-				<span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span>
-				<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
-				<span v-else><i class="ti ti-icons"></i></span>
-			</button>
+			<button ref="otherSettingsButton" v-tooltip="i18n.ts.other" class="_button" :class="$style.headerRightItem" @click="showOtherSettings"><i class="ti ti-dots"></i></button>
 			<button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
 				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
@ -111,6 +107,7 @@ import { toASCII } from 'punycode.js';
 import { host, url } from '@@/js/config.js';
 import type { ShallowRef } from 'vue';
 import type { PostFormProps } from '@/types/post-form.js';
+import type { MenuItem } from '@/types/menu.js';
 import type { PollEditorModelValue } from '@/components/MkPollEditor.vue';
 import MkNotePreview from '@/components/MkNotePreview.vue';
 import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
@ -171,6 +168,7 @@ const textareaEl = shallowRef<HTMLTextAreaElement | null>(null);
 const cwInputEl = shallowRef<HTMLInputElement | null>(null);
 const hashtagsInputEl = shallowRef<HTMLInputElement | null>(null);
 const visibilityButton = shallowRef<HTMLElement>();
+const otherSettingsButton = shallowRef<HTMLElement>();

 const posting = ref(false);
 const posted = ref(false);
@ -556,6 +554,47 @@ async function toggleReactionAcceptance() {
 	reactionAcceptance.value = select.result;
 }

+//#region その他の設定メニューpopup
+function showOtherSettings() {
+	let reactionAcceptanceIcon = 'ti ti-icons';
+
+	if (reactionAcceptance.value === 'likeOnly') {
+		reactionAcceptanceIcon = 'ti ti-heart _love';
+	} else if (reactionAcceptance.value === 'likeOnlyForRemote') {
+		reactionAcceptanceIcon = 'ti ti-heart-plus';
+	}
+
+	const menuDef = [{
+		icon: reactionAcceptanceIcon,
+		text: i18n.ts.reactionAcceptance,
+		action: () => {
+			toggleReactionAcceptance();
+		},
+	}, { type: 'divider' }, {
+		icon: 'ti ti-trash',
+		text: i18n.ts.reset,
+		danger: true,
+		action: async () => {
+			if (props.mock) return;
+			const { canceled } = await os.confirm({
+				type: 'question',
+				text: i18n.ts.resetAreYouSure,
+			});
+			if (canceled) return;
+			clear();
+		},
+	}] satisfies MenuItem[];
+
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkPostFormOtherMenu.vue')), {
+		items: menuDef,
+		textLength: textLength.value,
+		src: otherSettingsButton.value,
+	}, {
+		closed: () => dispose(),
+	});
+}
+//#endregion
+
 function pushVisibleUser(user: Misskey.entities.UserDetailed) {
 	if (!visibleUsers.value.some(u => u.username === user.username && u.host === user.host)) {
 		visibleUsers.value.push(user);
--- a/packages/frontend/src/components/MkPostFormOtherMenu.vue
+++ b/packages/frontend/src/components/MkPostFormOtherMenu.vue
@ -0,0 +1,128 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :zPriority="'high'" :src="src" :transparentBg="true" @click="modal?.close()" @closed="emit('closed')" @esc="modal?.close()">
+	<MkMenu
+		:items="items"
+		:align="align"
+		:width="width"
+		:maxHeight="maxHeight"
+		:asDrawer="type === 'drawer'"
+		@close="modal?.close()"
+	>
+		<template #header>
+			<div :class="[$style.textCountRoot, { [$style.asDrawer]: type === 'drawer' }]">
+				<div :class="$style.textCountLabel">{{ i18n.ts.textCount }}</div>
+				<div
+					:class="[$style.textCount,
+						{ [$style.danger]: textCountPercentage > 100 },
+						{ [$style.warning]: textCountPercentage > 90 && textCountPercentage <= 100 },
+					]"
+				>
+					<div :class="$style.textCountGraph"></div>
+					<div><span :class="$style.textCountCurrent">{{ number(textLength) }}</span> / {{ number(maxTextLength) }}</div>
+				</div>
+			</div>
+		</template>
+	</MkMenu>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { computed, useTemplateRef } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkModal from '@/components/MkModal.vue';
+import MkMenu from '@/components/MkMenu.vue';
+import { instance } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import number from '@/filters/number.js';
+import type { MenuItem } from '@/types/menu.js';
+
+const modal = useTemplateRef('modal');
+
+const props = defineProps<{
+	items: MenuItem[];
+	textLength: number;
+	align?: 'center' | string;
+	width?: number;
+	src?: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const maxTextLength = computed(() => {
+	return instance ? instance.maxNoteTextLength : 1000;
+});
+
+const textCountPercentage = computed(() => {
+	return props.textLength / maxTextLength.value * 100;
+});
+</script>
+
+<style lang="scss" module>
+.textCountRoot {
+	--textCountBg: color-mix(in srgb, var(--MI_THEME-panel), var(--MI_THEME-fg) 15%);
+	background-color: var(--textCountBg);
+	padding: 10px 14px;
+
+	&.asDrawer {
+		padding: 12px 24px;
+	}
+}
+
+.textCountLabel {
+	font-size: 11px;
+	opacity: 0.8;
+	margin-bottom: 4px;
+}
+
+.textCount {
+	display: flex;
+	gap: var(--MI-marginHalf);
+	align-items: center;
+	font-size: 12px;
+	--countColor: var(--MI_THEME-accent);
+
+	&.danger {
+		--countColor: var(--MI_THEME-error);
+	}
+
+	&.warning {
+		--countColor: var(--MI_THEME-warn);
+	}
+
+	.textCountGraph {
+		position: relative;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		background-image: conic-gradient(
+			var(--countColor) 0% v-bind("Math.min(100, textCountPercentage) + '%'"),
+			rgba(0, 0, 0, .2) v-bind("Math.min(100, textCountPercentage) + '%'") 100%
+		);
+
+		&::after {
+			content: '';
+			position: absolute;
+			width: 16px;
+			height: 16px;
+			border-radius: 50%;
+			background-color: var(--textCountBg);
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
+
+	.textCountCurrent {
+		color: var(--countColor);
+		font-weight: 700;
+		font-size: 18px;
+	}
+}
+</style>
--- a/packages/frontend/src/filters/number.ts
+++ b/packages/frontend/src/filters/number.ts
@ -5,4 +5,4 @@

 import { numberFormat } from '@@/js/intl-const.js';

-export default n => n == null ? 'N/A' : numberFormat.format(n);
+export default (n?: number) => n == null ? 'N/A' : numberFormat.format(n);
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@ -436,6 +436,10 @@ rt {
 	color: var(--MI_THEME-link);
 }

+._love {
+	color: var(--MI_THEME-love);
+}
+
 ._caption {
 	font-size: 0.8em;
 	opacity: 0.7;