Add support for CW boosting

2023-05-07 09:26:24 +10:00 · 2023-05-07 09:26:24 +10:00 · cd3cfe4203
parent e488131e68
commit cd3cfe4203
11 changed files with 326 additions and 152 deletions
--- 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"
--- 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;
--- 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"
--- 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"
--- 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>
--- 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>

--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@ -1,8 +1,14 @@
 <template>
-	<p v-if="note.cw != null" class="cw">
+	<div
+		:class="{
+			hasCw: !!cw,
+			cwHighlight,
+		}"
+	>
+		<p v-if="cw != null" class="cw">
 			<MkA
-			v-if="!detailed && note.replyId"
-			:to="`/notes/${note.replyId}`"
+				v-if="!detailed && appearNote.replyId"
+				:to="`/notes/${appearNote.replyId}`"
 				class="reply-icon"
 				@click.stop
 			>
@ -11,35 +17,35 @@
 			<MkA
 				v-if="
 					conversation &&
-				note.renoteId &&
-				note.renoteId != parentId &&
-				!note.replyId
+					appearNote.renoteId &&
+					appearNote.renoteId != parentId &&
+					!appearNote.replyId
 				"
-			:to="`/notes/${note.renoteId}`"
+				:to="`/notes/${appearNote.renoteId}`"
 				class="reply-icon"
 				@click.stop
 			>
 				<i class="ph-quotes ph-bold ph-lg"></i>
 			</MkA>
 			<Mfm
-			v-if="note.cw != ''"
+				v-if="cw != ''"
 				class="text"
-			:text="note.cw"
-			:author="note.user"
+				:text="cw"
+				:author="appearNote.user"
 				:i="$i"
-			:custom-emojis="note.emojis"
+				:custom-emojis="appearNote.emojis"
 			/>
 		</p>
 		<div class="wrmlmaau">
 			<div
 				class="content"
-			:class="{ collapsed, isLong, showContent: note.cw && !showContent }"
+				:class="{ collapsed, isLong, showContent: cw && !showContent }"
 			>
 				<XCwButton
 					ref="cwButton"
-				v-if="note.cw && !showContent"
+					v-if="cw && !showContent"
 					v-model="showContent"
-				:note="note"
+					:note="appearNote"
 					v-on:keydown="focusFooter"
 				/>
 				<div
@ -49,13 +55,13 @@
 						tabindex: !showContent ? '-1' : null,
 					}"
 				>
-				<span v-if="note.deletedAt" style="opacity: 0.5"
+					<span v-if="appearNote.deletedAt" style="opacity: 0.5"
 						>({{ i18n.ts.deleted }})</span
 					>
-				<template v-if="!note.cw">
+					<template v-if="!cw">
 						<MkA
-						v-if="!detailed && note.replyId"
-						:to="`/notes/${note.replyId}`"
+							v-if="!detailed && appearNote.replyId"
+							:to="`/notes/${appearNote.replyId}`"
 							class="reply-icon"
 							@click.stop
 						>
@ -64,11 +70,11 @@
 						<MkA
 							v-if="
 								conversation &&
-							note.renoteId &&
-							note.renoteId != parentId &&
-							!note.replyId
+								appearNote.renoteId &&
+								appearNote.renoteId != parentId &&
+								!appearNote.replyId
 							"
-						:to="`/notes/${note.renoteId}`"
+							:to="`/notes/${appearNote.renoteId}`"
 							class="reply-icon"
 							@click.stop
 						>
@ -76,22 +82,22 @@
 						</MkA>
 					</template>
 					<Mfm
-					v-if="note.text"
-					:text="note.text"
-					:author="note.user"
+						v-if="appearNote.text"
+						:text="appearNote.text"
+						:author="appearNote.user"
 						:i="$i"
-					:custom-emojis="note.emojis"
+						:custom-emojis="appearNote.emojis"
 					/>
 					<MkA
-					v-if="!detailed && note.renoteId"
+						v-if="!detailed && appearNote.renoteId"
 						class="rp"
-					:to="`/notes/${note.renoteId}`"
+						:to="`/notes/${appearNote.renoteId}`"
 						>{{ i18n.ts.quoteAttached }}: ...</MkA
 					>
-				<div v-if="note.files.length > 0" class="files">
-					<XMediaList :media-list="note.files" />
+					<div v-if="appearNote.files.length > 0" class="files">
+						<XMediaList :media-list="appearNote.files" />
 					</div>
-				<XPoll v-if="note.poll" :note="note" class="poll" />
+					<XPoll v-if="appearNote.poll" :note="appearNote" class="poll" />
 					<template v-if="detailed">
 						<MkUrlPreview
 							v-for="url in urls"
@ -102,15 +108,15 @@
 							class="url-preview"
 						/>
 						<div
-						v-if="note.renote"
+							v-if="appearNote.renote"
 							class="renote"
-						@click.stop="emit('push', note.renote)"
+							@click.stop="emit('push', appearNote.renote)"
 						>
-						<XNoteSimple :note="note.renote" />
+							<XNoteSimple :note="appearNote.renote" />
 						</div>
 					</template>
 					<div
-					v-if="note.cw && !showContent"
+						v-if="cw && !showContent"
 						tabindex="0"
 						v-on:focus="cwButton?.focus()"
 					></div>
@ -119,7 +125,8 @@
 					v-if="isLong"
 					v-model="collapsed"
 				></XShowMoreButton>
-			<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
+				<XCwButton v-if="cw" v-model="showContent" :note="appearNote" />
+			</div>
 		</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;
--- 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: () => {
--- 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(
--- 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",
--- 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;