From cd3cfe4203867d9e654ffb5bf3c1dd59640f654b Mon Sep 17 00:00:00 2001
From: Kaity A <kaity@theallans.com.au>
Date: Sun, 7 May 2023 09:26:24 +1000
Subject: [PATCH] Add support for CW boosting

---
 locales/en-US.yml                             |   1 +
 packages/client/src/components/MkMenu.vue     |  47 ++-
 packages/client/src/components/MkNote.vue     |   3 +-
 packages/client/src/components/MkNoteSub.vue  |   1 +
 .../client/src/components/MkPopupMenu.vue     |  22 +-
 .../client/src/components/MkRenoteButton.vue  |  43 ++-
 .../src/components/MkSubNoteContent.vue       | 288 ++++++++++--------
 packages/client/src/os.ts                     |   4 +-
 .../client/src/pages/settings/general.vue     |   4 +
 packages/client/src/store.ts                  |   4 +
 packages/client/src/types/menu.ts             |  61 +++-
 11 files changed, 326 insertions(+), 152 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 8da0af981..1ade50c7f 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -886,6 +886,7 @@ global: "Global"
 recommended: "Recommended"
 squareAvatars: "Display squared avatars"
 seperateRenoteQuote: "Separate boost and quote buttons"
+highlightCw: "Highlight content warned posts"
 sent: "Sent"
 received: "Received"
 searchResult: "Search results"
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index e47f32e45..161a7a59a 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -13,6 +13,7 @@
 			>
 				<template v-for="(item, i) in items2">
 					<div v-if="item === null" class="divider"></div>
+					<template v-else-if="item.hidden || item.visible !== undefined && !item.visible" />
 					<span v-else-if="item.type === 'label'" class="label item">
 						<span :style="item.textStyle || ''">{{
 							item.text
@@ -21,6 +22,7 @@
 					<span
 						v-else-if="item.type === 'pending'"
 						class="pending item"
+						:class="classMap(item.classes)"
 					>
 						<span><MkEllipsis /></span>
 					</span>
@@ -28,6 +30,7 @@
 						v-else-if="item.type === 'link'"
 						:to="item.to"
 						class="_button item"
+						:class="classMap(item.classes)"
 						@click.passive="close(true)"
 						@mouseenter.passive="onItemMouseEnter(item)"
 						@mouseleave.passive="onItemMouseLeave(item)"
@@ -56,6 +59,7 @@
 						:target="item.target"
 						:download="item.download"
 						class="_button item"
+						:class="classMap(item.classes)"
 						@click="close(true)"
 						@mouseenter.passive="onItemMouseEnter(item)"
 						@mouseleave.passive="onItemMouseLeave(item)"
@@ -73,9 +77,9 @@
 						></span>
 					</a>
 					<button
-						v-else-if="item.type === 'user' && !items.hidden"
+						v-else-if="item.type === 'user'"
 						class="_button item"
-						:class="{ active: item.active }"
+						:class="{ active: item.active, ...classMap(item.classes) }"
 						:disabled="item.active"
 						@click="clicked(item.action, $event)"
 						@mouseenter.passive="onItemMouseEnter(item)"
@@ -93,6 +97,7 @@
 					<span
 						v-else-if="item.type === 'switch'"
 						class="item"
+						:class="classMap(item.classes)"
 						@mouseenter.passive="onItemMouseEnter(item)"
 						@mouseleave.passive="onItemMouseLeave(item)"
 					>
@@ -104,10 +109,26 @@
 							>{{ item.text }}</FormSwitch
 						>
 					</span>
+					<span
+						v-else-if="item.type === 'input'"
+						:tabindex="i"
+						class="item"
+						:class="classMap(item.classes)"
+						@mouseenter.passive="onItemMouseEnter(item)"
+						@mouseleave.passive="onItemMouseLeave(item)"
+					>
+						<FormInput
+							v-model="item.ref"
+							:disabled="item.disabled"
+							class="form-input"
+							:required="item.required"
+							:placeholder="item.placeholder"
+						/>
+					</span>
 					<button
 						v-else-if="item.type === 'parent'"
 						class="_button item parent"
-						:class="{ childShowing: childShowingItem === item }"
+						:class="{ childShowing: childShowingItem === item, ...classMap(item.classes) }"
 						@mouseenter="showChildren(item, $event)"
 						@click="showChildren(item, $event)"
 					>
@@ -126,9 +147,9 @@
 						></span>
 					</button>
 					<button
-						v-else-if="!item.hidden"
+						v-else
 						class="_button item"
-						:class="{ danger: item.danger, active: item.active }"
+						:class="{ danger: item.danger, active: item.active, ...classMap(item.classes) }"
 						:disabled="item.active"
 						@click="clicked(item.action, $event)"
 						@mouseenter.passive="onItemMouseEnter(item)"
@@ -186,7 +207,8 @@ import {
 } from "vue";
 import { focusPrev, focusNext } from "@/scripts/focus";
 import FormSwitch from "@/components/form/switch.vue";
-import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
+import FormInput from "@/components/form/input.vue";
+import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuClasses } from "@/types/menu";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { FocusTrap } from "focus-trap-vue";
@@ -244,6 +266,19 @@ watch(
 let childMenu = $ref<MenuItem[] | null>();
 let childTarget = $ref<HTMLElement | null>();
 
+function classMap(classes?: MenuClasses) {
+	if (!classes) return {};
+
+	return (
+		Array.isArray(classes)
+		? classes
+		: classes.value
+	).reduce((acc, cls) => {
+		acc[cls] = true;
+		return acc;
+	}, {});
+}
+
 function closeChild() {
 	childMenu = null;
 	childShowingItem = null;
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 08bd27fc0..a61cc965d 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -79,7 +79,7 @@
 				<div class="body">
 					<MkSubNoteContent
 						class="text"
-						:note="appearNote"
+						:note="note"
 						:detailed="true"
 						:detailedView="detailedView"
 						:parentId="appearNote.parentId"
@@ -139,6 +139,7 @@
 						class="button"
 						:note="appearNote"
 						:count="appearNote.renoteCount"
+						:renoteCw="note.cw"
 					/>
 					<XStarButtonNoEmoji
 						v-if="!enableEmojiReactions"
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 9a239f94e..f4e1fd463 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -69,6 +69,7 @@
 						class="button"
 						:note="appearNote"
 						:count="appearNote.renoteCount"
+						:renoteCw="note.cw"
 					/>
 					<XStarButtonNoEmoji
 						v-if="!enableEmojiReactions"
diff --git a/packages/client/src/components/MkPopupMenu.vue b/packages/client/src/components/MkPopupMenu.vue
index 5f1ed037b..e213ccf75 100644
--- a/packages/client/src/components/MkPopupMenu.vue
+++ b/packages/client/src/components/MkPopupMenu.vue
@@ -17,17 +17,19 @@
 			:max-height="maxHeight"
 			:as-drawer="type === 'drawer'"
 			class="sfhdhdhq"
-			:class="{ drawer: type === 'drawer' }"
+			:class="{
+				drawer: type === 'drawer',
+				...classMap(classes),
+			}"
 			@close="modal.close()"
 		/>
 	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
 import MkModal from "./MkModal.vue";
 import MkMenu from "./MkMenu.vue";
-import { MenuItem } from "@/types/menu";
+import { MenuClasses, MenuItem } from "@/types/menu";
 
 defineProps<{
 	items: MenuItem[];
@@ -35,6 +37,7 @@ defineProps<{
 	width?: number;
 	viaKeyboard?: boolean;
 	src?: any;
+	classes?: MenuClasses;
 }>();
 
 const emit = defineEmits<{
@@ -42,6 +45,19 @@ const emit = defineEmits<{
 }>();
 
 let modal = $ref<InstanceType<typeof MkModal>>();
+
+function classMap(classes?: MenuClasses) {
+	if (!classes) return {};
+
+	return (
+		Array.isArray(classes)
+		? classes
+		: classes.value
+	).reduce((acc, cls) => {
+		acc[cls] = true;
+		return acc;
+	}, {});
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index ea01fcdc0..0aa68ed43 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -4,6 +4,7 @@
 		ref="buttonRef"
 		v-tooltip.noDelay.bottom="i18n.ts.renote"
 		class="eddddedb _button canRenote"
+		:class="{ addCw }"
 		@click="renote(false, $event)"
 	>
 		<i class="ph-repeat ph-bold ph-lg"></i>
@@ -25,13 +26,18 @@ import { $i } from "@/account";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import { MenuItem } from "@/types/menu";
+import { add } from "date-fns";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
 	count: number;
+	renoteCw?: string | null;
 }>();
 
 const buttonRef = ref<HTMLElement>();
+const addCw = ref<boolean>(!!props.renoteCw);
+const cwInput = ref<string>(props.renoteCw ?? "");
 
 const canRenote = computed(
 	() =>
@@ -39,6 +45,8 @@ const canRenote = computed(
 		props.note.userId === $i.id
 );
 
+const getCw = () => (addCw.value ? cwInput.value : props.note.cw ?? undefined);
+
 useTooltip(buttonRef, async (showing) => {
 	const renotes = await os.api("notes/renotes", {
 		noteId: props.note.id,
@@ -73,7 +81,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 	const users = renotes.map((x) => x.user.id);
 	const hasRenotedBefore = users.includes($i.id);
 
-	let buttonActions = [];
+	let buttonActions: Array<MenuItem> = [];
 
 	if (props.note.visibility === "public" || props.note.visibility === "hidden") {
 		buttonActions.push({
@@ -85,6 +93,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 				os.api("notes/create", {
 					renoteId: props.note.id,
 					visibility: "public",
+					cw: getCw(),
 				});
 				const el =
 					ev &&
@@ -111,6 +120,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 				os.api("notes/create", {
 					renoteId: props.note.id,
 					visibility: "home",
+					cw: getCw(),
 				});
 				const el =
 					ev &&
@@ -138,6 +148,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 					renoteId: props.note.id,
 					visibility: "specified",
 					visibleUserIds: props.note.visibleUserIds,
+					cw: getCw(),
 				});
 				const el =
 					ev &&
@@ -162,6 +173,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 				os.api("notes/create", {
 					renoteId: props.note.id,
 					visibility: "followers",
+					cw: getCw(),
 				});
 				const el =
 					ev &&
@@ -179,7 +191,29 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 		});
 	}
 
-	if (!defaultStore.state.seperateRenoteQuote) {
+	const showQuote = !defaultStore.state.seperateRenoteQuote;
+
+	if (!props.note.cw || props.note.cw === "") {
+		buttonActions.push({
+			type: "switch",
+			ref: addCw,
+			text: "Add content warning",
+		});
+
+		buttonActions.push({
+			type: "input",
+			ref: cwInput,
+			placeholder: "Content warning",
+			required: true,
+			visible: addCw,
+		});
+
+		if (showQuote || hasRenotedBefore) {
+			buttonActions.push(null);
+		}
+	}
+
+	if (showQuote) {
 		buttonActions.push({
 			text: i18n.ts.quote,
 			icon: "ph-quotes ph-bold ph-lg",
@@ -204,7 +238,10 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 			},
 		});
 	}
-	os.popupMenu(buttonActions, buttonRef.value, { viaKeyboard });
+	
+	os.popupMenu(buttonActions, buttonRef.value, {
+		viaKeyboard,
+	});
 };
 </script>
 
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 3224f2da6..ec2fd3449 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -1,125 +1,132 @@
 <template>
-	<p v-if="note.cw != null" class="cw">
-		<MkA
-			v-if="!detailed && note.replyId"
-			:to="`/notes/${note.replyId}`"
-			class="reply-icon"
-			@click.stop
-		>
-			<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
-		</MkA>
-		<MkA
-			v-if="
-				conversation &&
-				note.renoteId &&
-				note.renoteId != parentId &&
-				!note.replyId
-			"
-			:to="`/notes/${note.renoteId}`"
-			class="reply-icon"
-			@click.stop
-		>
-			<i class="ph-quotes ph-bold ph-lg"></i>
-		</MkA>
-		<Mfm
-			v-if="note.cw != ''"
-			class="text"
-			:text="note.cw"
-			:author="note.user"
-			:i="$i"
-			:custom-emojis="note.emojis"
-		/>
-	</p>
-	<div class="wrmlmaau">
-		<div
-			class="content"
-			:class="{ collapsed, isLong, showContent: note.cw && !showContent }"
-		>
-			<XCwButton
-				ref="cwButton"
-				v-if="note.cw && !showContent"
-				v-model="showContent"
-				:note="note"
-				v-on:keydown="focusFooter"
-			/>
-			<div
-				class="body"
-				v-bind="{
-					'aria-label': !showContent ? '' : null,
-					tabindex: !showContent ? '-1' : null,
-				}"
+	<div
+		:class="{
+			hasCw: !!cw,
+			cwHighlight,
+		}"
+	>
+		<p v-if="cw != null" class="cw">
+			<MkA
+				v-if="!detailed && appearNote.replyId"
+				:to="`/notes/${appearNote.replyId}`"
+				class="reply-icon"
+				@click.stop
 			>
-				<span v-if="note.deletedAt" style="opacity: 0.5"
-					>({{ i18n.ts.deleted }})</span
-				>
-				<template v-if="!note.cw">
-					<MkA
-						v-if="!detailed && note.replyId"
-						:to="`/notes/${note.replyId}`"
-						class="reply-icon"
-						@click.stop
-					>
-						<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
-					</MkA>
-					<MkA
-						v-if="
-							conversation &&
-							note.renoteId &&
-							note.renoteId != parentId &&
-							!note.replyId
-						"
-						:to="`/notes/${note.renoteId}`"
-						class="reply-icon"
-						@click.stop
-					>
-						<i class="ph-quotes ph-bold ph-lg"></i>
-					</MkA>
-				</template>
-				<Mfm
-					v-if="note.text"
-					:text="note.text"
-					:author="note.user"
-					:i="$i"
-					:custom-emojis="note.emojis"
+				<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+			</MkA>
+			<MkA
+				v-if="
+					conversation &&
+					appearNote.renoteId &&
+					appearNote.renoteId != parentId &&
+					!appearNote.replyId
+				"
+				:to="`/notes/${appearNote.renoteId}`"
+				class="reply-icon"
+				@click.stop
+			>
+				<i class="ph-quotes ph-bold ph-lg"></i>
+			</MkA>
+			<Mfm
+				v-if="cw != ''"
+				class="text"
+				:text="cw"
+				:author="appearNote.user"
+				:i="$i"
+				:custom-emojis="appearNote.emojis"
+			/>
+		</p>
+		<div class="wrmlmaau">
+			<div
+				class="content"
+				:class="{ collapsed, isLong, showContent: cw && !showContent }"
+			>
+				<XCwButton
+					ref="cwButton"
+					v-if="cw && !showContent"
+					v-model="showContent"
+					:note="appearNote"
+					v-on:keydown="focusFooter"
 				/>
-				<MkA
-					v-if="!detailed && note.renoteId"
-					class="rp"
-					:to="`/notes/${note.renoteId}`"
-					>{{ i18n.ts.quoteAttached }}: ...</MkA
-				>
-				<div v-if="note.files.length > 0" class="files">
-					<XMediaList :media-list="note.files" />
-				</div>
-				<XPoll v-if="note.poll" :note="note" class="poll" />
-				<template v-if="detailed">
-					<MkUrlPreview
-						v-for="url in urls"
-						:key="url"
-						:url="url"
-						:compact="true"
-						:detail="false"
-						class="url-preview"
-					/>
-					<div
-						v-if="note.renote"
-						class="renote"
-						@click.stop="emit('push', note.renote)"
-					>
-						<XNoteSimple :note="note.renote" />
-					</div>
-				</template>
 				<div
-					v-if="note.cw && !showContent"
-					tabindex="0"
-					v-on:focus="cwButton?.focus()"
-				></div>
+					class="body"
+					v-bind="{
+						'aria-label': !showContent ? '' : null,
+						tabindex: !showContent ? '-1' : null,
+					}"
+				>
+					<span v-if="appearNote.deletedAt" style="opacity: 0.5"
+						>({{ i18n.ts.deleted }})</span
+					>
+					<template v-if="!cw">
+						<MkA
+							v-if="!detailed && appearNote.replyId"
+							:to="`/notes/${appearNote.replyId}`"
+							class="reply-icon"
+							@click.stop
+						>
+							<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+						</MkA>
+						<MkA
+							v-if="
+								conversation &&
+								appearNote.renoteId &&
+								appearNote.renoteId != parentId &&
+								!appearNote.replyId
+							"
+							:to="`/notes/${appearNote.renoteId}`"
+							class="reply-icon"
+							@click.stop
+						>
+							<i class="ph-quotes ph-bold ph-lg"></i>
+						</MkA>
+					</template>
+					<Mfm
+						v-if="appearNote.text"
+						:text="appearNote.text"
+						:author="appearNote.user"
+						:i="$i"
+						:custom-emojis="appearNote.emojis"
+					/>
+					<MkA
+						v-if="!detailed && appearNote.renoteId"
+						class="rp"
+						:to="`/notes/${appearNote.renoteId}`"
+						>{{ i18n.ts.quoteAttached }}: ...</MkA
+					>
+					<div v-if="appearNote.files.length > 0" class="files">
+						<XMediaList :media-list="appearNote.files" />
+					</div>
+					<XPoll v-if="appearNote.poll" :note="appearNote" class="poll" />
+					<template v-if="detailed">
+						<MkUrlPreview
+							v-for="url in urls"
+							:key="url"
+							:url="url"
+							:compact="true"
+							:detail="false"
+							class="url-preview"
+						/>
+						<div
+							v-if="appearNote.renote"
+							class="renote"
+							@click.stop="emit('push', appearNote.renote)"
+						>
+							<XNoteSimple :note="appearNote.renote" />
+						</div>
+					</template>
+					<div
+						v-if="cw && !showContent"
+						tabindex="0"
+						v-on:focus="cwButton?.focus()"
+					></div>
+				</div>
+				<XShowMoreButton
+					v-if="isLong"
+					v-model="collapsed"
+				></XShowMoreButton>
+				<XCwButton v-if="cw" v-model="showContent" :note="appearNote" />
 			</div>
-			<XShowMoreButton
-				v-if="isLong"
-				v-model="collapsed"
-			></XShowMoreButton>
-			<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
 		</div>
 	</div>
 </template>
@@ -136,6 +143,7 @@ import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import XCwButton from "@/components/MkCwButton.vue";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -150,16 +158,30 @@ const emit = defineEmits<{
 	(ev: "focusfooter"): void;
 }>();
 
+const note = props.note;
+
+const isRenote =
+	note.renote != null &&
+	note.text == null &&
+	note.fileIds.length === 0 &&
+	note.poll == null;
+
+let appearNote = $computed(() =>
+	isRenote ? (note.renote as misskey.entities.Note) : note
+);
+let cw = $computed(() => appearNote.cw || note.cw);
+const cwHighlight = defaultStore.state.highlightCw;
+
 const cwButton = ref<HTMLElement>();
 const isLong =
 	!props.detailedView &&
-	props.note.cw == null &&
-	props.note.text != null &&
-	(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
-const collapsed = $ref(props.note.cw == null && isLong);
+	!cw &&
+	appearNote.text != null &&
+	(appearNote.text.split("\n").length > 9 || appearNote.text.length > 500);
+const collapsed = $ref(!cw && isLong);
 
-const urls = props.note.text
-	? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
+const urls = appearNote.text
+	? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5)
 	: null;
 
 let showContent = $ref(false);
@@ -193,6 +215,23 @@ function focusFooter(ev) {
 	overflow-wrap: break-word;
 	> .text {
 		margin-right: 8px;
+		padding-inline-start: 0.25em;
+	}
+}
+.cwHighlight.hasCw {
+	outline: 1px dotted var(--cwFg);
+	border-radius: 5px;
+	> .wrmlmaau {
+		padding-inline-start: 0.25em;
+	}
+	> .cw {
+		background-color: var(--cwFg);
+		color: var(--cwBg);
+		border-top-left-radius: 5px;
+		border-top-right-radius: 5px;
+		> .reply-icon {
+			color: var(--cwBg);
+		}
 	}
 }
 .wrmlmaau {
@@ -224,11 +263,9 @@ function focusFooter(ev) {
 			> .url-preview {
 				margin-top: 8px;
 			}
-
 			> .poll {
 				font-size: 80%;
 			}
-
 			> .renote {
 				padding-top: 8px;
 				> * {
@@ -243,7 +280,6 @@ function focusFooter(ev) {
 				}
 			}
 		}
-
 		&.collapsed,
 		&.showContent {
 			position: relative;
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index ae78a73a4..cbb6f267d 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -1,6 +1,6 @@
 // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
 
-import { Component, markRaw, Ref, ref, defineAsyncComponent } from "vue";
+import { Component, markRaw, Ref, ref, defineAsyncComponent, ComputedRef } from "vue";
 import { EventEmitter } from "eventemitter3";
 import insertTextAtCursor from "insert-text-at-cursor";
 import * as Misskey from "calckey-js";
@@ -764,6 +764,7 @@ export function popupMenu(
 		align?: string;
 		width?: number;
 		viaKeyboard?: boolean;
+		classes?: string[] | Ref<Array<string>> | ComputedRef<Array<string>>;
 	},
 ) {
 	return new Promise((resolve, reject) => {
@@ -776,6 +777,7 @@ export function popupMenu(
 				width: options?.width,
 				align: options?.align,
 				viaKeyboard: options?.viaKeyboard,
+				classes: options?.classes,
 			},
 			{
 				closed: () => {
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index b8cdb3fd9..587cf94a9 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -123,6 +123,9 @@
 			<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
 				i18n.ts.seperateRenoteQuote
 			}}</FormSwitch>
+			<FormSwitch v-model="highlightCw" class="_formBlock">{{
+				i18n.ts.highlightCw
+			}}</FormSwitch>
 			<FormSwitch v-model="useSystemFont" class="_formBlock">{{
 				i18n.ts.useSystemFont
 			}}</FormSwitch>
@@ -302,6 +305,7 @@ const useReactionPickerForContextMenu = computed(
 const seperateRenoteQuote = computed(
 	defaultStore.makeGetterSetter("seperateRenoteQuote")
 );
+const highlightCw = computed(defaultStore.makeGetterSetter("highlightCw"));
 const squareAvatars = computed(defaultStore.makeGetterSetter("squareAvatars"));
 const showUpdates = computed(defaultStore.makeGetterSetter("showUpdates"));
 const swipeOnDesktop = computed(
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index b4e10d275..390997e97 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -146,6 +146,10 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: true,
 		},
+		highlightCw: {
+			where: "device",
+			default: true,
+		},
 		nsfw: {
 			where: "device",
 			default: "respect" as "respect" | "force" | "ignore",
diff --git a/packages/client/src/types/menu.ts b/packages/client/src/types/menu.ts
index 5e7f2f07a..d3a713296 100644
--- a/packages/client/src/types/menu.ts
+++ b/packages/client/src/types/menu.ts
@@ -1,16 +1,23 @@
 import * as Misskey from "calckey-js";
-import { Ref } from "vue";
+import { ComputedRef, Ref } from "vue";
+
+export type MenuClasses = Array<string> | Ref<Array<string>> | ComputedRef<Array<string>>;
+export type MenuBase = {
+	classes?: MenuClasses;
+	hidden?: boolean | Ref<boolean>;
+	visible?: boolean | Ref<boolean>;
+}
 
 export type MenuAction = (ev: MouseEvent) => void;
 
 export type MenuDivider = null;
 export type MenuNull = undefined;
-export type MenuLabel = {
+export type MenuLabel = MenuBase & {
 	type: "label";
 	text: string;
 	textStyle?: string;
 };
-export type MenuLink = {
+export type MenuLink = MenuBase & {
 	type: "link";
 	to: string;
 	text: string;
@@ -19,7 +26,7 @@ export type MenuLink = {
 	indicate?: boolean;
 	avatar?: Misskey.entities.User;
 };
-export type MenuA = {
+export type MenuA = MenuBase & {
 	type: "a";
 	href: string;
 	target?: string;
@@ -29,22 +36,21 @@ export type MenuA = {
 	icon?: string;
 	indicate?: boolean;
 };
-export type MenuUser = {
+export type MenuUser = MenuBase & {
 	type: "user";
 	user: Misskey.entities.User;
 	active?: boolean;
 	indicate?: boolean;
-	hidden?: boolean;
 	action: MenuAction;
 };
-export type MenuSwitch = {
+export type MenuSwitch = MenuBase & {
 	type: "switch";
 	ref: Ref<boolean>;
 	text: string;
 	textStyle?: string;
 	disabled?: boolean;
 };
-export type MenuButton = {
+export type MenuButton = MenuBase & {
 	type?: "button";
 	text: string;
 	textStyle?: string;
@@ -52,11 +58,28 @@ export type MenuButton = {
 	indicate?: boolean;
 	danger?: boolean;
 	active?: boolean;
-	hidden?: boolean;
 	avatar?: Misskey.entities.User;
 	action: MenuAction;
 };
-export type MenuParent = {
+export type MenuButtonMultipleIcons = MenuBase & {
+	type?: "button";
+	text: string;
+	textStyle?: string;
+	icons: string[];
+	indicate?: boolean;
+	danger?: boolean;
+	active?: boolean;
+	avatar?: Misskey.entities.User;
+	action: MenuAction;
+};
+export type MenuInput = MenuBase & {
+	type: "input";
+	ref: Ref<string>;
+	placeholder: string;
+	disabled?: boolean;
+	required?: boolean | Ref<boolean>;
+};
+export type MenuParent = MenuBase & {
 	type: "parent";
 	text: string;
 	textStyle?: string;
@@ -64,7 +87,9 @@ export type MenuParent = {
 	children: OuterMenuItem[];
 };
 
-export type MenuPending = { type: "pending" };
+export type MenuPending = MenuBase & {
+	type: "pending";
+};
 
 type OuterMenuItem =
 	| MenuDivider
@@ -75,9 +100,19 @@ type OuterMenuItem =
 	| MenuUser
 	| MenuSwitch
 	| MenuButton
+	| MenuButtonMultipleIcons
+	| MenuInput
 	| MenuParent;
 type OuterPromiseMenuItem = Promise<
-	MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent
+	| MenuLabel
+	| MenuLink
+	| MenuA
+	| MenuUser
+	| MenuSwitch
+	| MenuButton
+	| MenuButtonMultipleIcons
+	| MenuInput
+	| MenuParent
 >;
 export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
 export type InnerMenuItem =
@@ -89,4 +124,6 @@ export type InnerMenuItem =
 	| MenuUser
 	| MenuSwitch
 	| MenuButton
+	| MenuButtonMultipleIcons
+	| MenuInput
 	| MenuParent;