Merge branch 'develop' into room

packages/frontend/src/components/MkAutocomplete.vue

@@ -483,6 +483,7 @@ onBeforeUnmount(() => {
 	max-height: 28px;
 	margin: 0 8px 0 0;
 	border-radius: 100%;
+	object-fit: cover;
 }
 
 .userName {

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -38,6 +38,7 @@ import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
 import { noteEvents } from '@/composables/use-note-capture.js';
 import { mute as muteEmoji, unmute as unmuteEmoji, checkMuted as isEmojiMuted } from '@/utility/emoji-mute.js';
+import { addToEmojiPalette } from '@/utility/emoji-palette.js';
 import { haptic } from '@/utility/haptic.js';
 
 const props = defineProps<{
@@ -206,6 +207,16 @@ async function menu(ev: PointerEvent) {
 		});
 	}
 
+	if (canToggle.value) {
+		menuItems.push({
+			text: i18n.ts.addToEmojiPalette,
+			icon: 'ti ti-palette',
+			action: () => {
+				addToEmojiPalette(isLocalCustomEmoji ? `:${emojiName.value}:` : props.reaction);
+			},
+		});
+	}
+
 	os.popupMenu(menuItems, ev.currentTarget ?? ev.target);
 }
 

packages/frontend/src/components/MkSelect.vue

@@ -46,6 +46,7 @@ export type ItemOption<T extends OptionValue = OptionValue> = {
 	type?: 'option';
 	value: T;
 	label: string;
+	caption?: string;
 };
 
 export type ItemGroup<T extends OptionValue = OptionValue> = {
@@ -183,6 +184,7 @@ function show() {
 			for (const option of item.items) {
 				menu.push({
 					text: option.label,
+					caption: option.caption,
 					active: computed(() => model.value === option.value),
 					action: () => {
 						model.value = option.value as ModelTChecked;
@@ -196,6 +198,7 @@ function show() {
 		} else {
 			menu.push({
 				text: item.label,
+				caption: item.caption,
 				active: computed(() => model.value === item.value),
 				action: () => {
 					model.value = item.value as ModelTChecked;

packages/frontend/src/components/global/MkCustomEmoji.vue

@@ -50,6 +50,7 @@ import { $i } from '@/i.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
 import { makeEmojiMuteKey, mute as muteEmoji, unmute as unmuteEmoji, checkMuted as checkEmojiMuted } from '@/utility/emoji-mute';
+import { addToEmojiPalette } from '@/utility/emoji-palette.js';
 
 const props = defineProps<{
 	name: string;
@@ -167,8 +168,20 @@ function onClick(ev: PointerEvent) {
 			});
 		}
 
+		if (isLocal.value) {
+			menuItems.push({
+				text: i18n.ts.addToEmojiPalette,
+				icon: 'ti ti-palette',
+				action: () => {
+					addToEmojiPalette(`:${props.name}:`);
+				},
+			});
+		}
+
 		if (($i?.isModerator ?? $i?.isAdmin) && isLocal.value) {
 			menuItems.push({
+				type: 'divider',
+			}, {
 				text: i18n.ts.edit,
 				icon: 'ti ti-pencil',
 				action: async () => {

packages/frontend/src/components/global/MkEmoji.vue

@@ -20,6 +20,7 @@ import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
 import { mute as muteEmoji, unmute as unmuteEmoji, checkMuted as checkMutedEmoji } from '@/utility/emoji-mute.js';
+import { addToEmojiPalette } from '@/utility/emoji-palette.js';
 
 const props = defineProps<{
 	emoji: string;
@@ -94,17 +95,31 @@ function onClick(ev: PointerEvent) {
 
 		menuItems.push({
 			type: 'divider',
-		}, isMuted.value ? {
-			text: i18n.ts.emojiUnmute,
-			icon: 'ti ti-mood-smile',
+		});
+
+		if (isMuted.value) {
+			menuItems.push({
+				text: i18n.ts.emojiUnmute,
+				icon: 'ti ti-mood-smile',
+				action: () => {
+					unmute();
+				},
+			});
+		} else {
+			menuItems.push({
+				text: i18n.ts.emojiMute,
+				icon: 'ti ti-mood-off',
+				action: () => {
+					mute();
+				},
+			});
+		}
+
+		menuItems.push({
+			text: i18n.ts.addToEmojiPalette,
+			icon: 'ti ti-palette',
 			action: () => {
-				unmute();
-			},
-		} : {
-			text: i18n.ts.emojiMute,
-			icon: 'ti ti-mood-off',
-			action: () => {
-				mute();
+				addToEmojiPalette(props.emoji);
 			},
 		});