Feat(Frontend): カスタム絵文字を簡単に絵文字ピッカーに追加できるようにした

Co-authored-by: yukineko <[email protected]>

locales/index.d.ts

@@ -5304,6 +5304,10 @@ export interface Locale extends ILocale {
      * 絵文字ピッカーに追加
      */
     "addToEmojiPicker": string;
+    /**
+     * デフォルトに設定されているプロファイルに追加
+     */
+    "addToDefaultEmojiProfile": string;
     /**
      * リアクション数の非表示
      */

locales/ja-JP.yml

@@ -1322,6 +1322,7 @@ postForm: "投稿フォーム"
 postFormBottomSettingsDescription: "投稿フォームの下部に表示される項目の並び替えが出来ます。項目をクリックすると削除できます。"
 clearPost: "投稿フォームをリセット"
 addToEmojiPicker: "絵文字ピッカーに追加"
+addToDefaultEmojiProfile: "デフォルトに設定されているプロファイルに追加"
 hideReactionCount: "リアクション数の非表示"
 hideReactionUsers: "誰がリアクションをしたのかを非表示にする"
 hideReactionUsersDescription: "リアクションをホバーした際のユーザー一覧と、ノート詳細ページのリアクションタブにあるリアクションをしたユーザー一覧を非表示にします"

packages/frontend/src/components/MkEmojiPicker.vue

@@ -50,7 +50,7 @@ SPDX-FileCopyrightText: syuilo and misskey-project , Type4ny-projectSPDX-License
 		<div v-if="tab === 'index'" class="group index">
 			<section v-if="showPinned">
 				<div style="display: flex; ">
-					<div v-for="a in profileMax" :key="a" :title="defaultStore.state[`pickerProfileName${a > 1 ? a - 1 : ''}`]" class="sllfktkhgl" :class="{ active: activeIndex === a || isDefaultProfile === a }" @click="pinnedProfileSelect(a)">
+					<div v-for="a in profileMax" :key="a" :title="defaultStore.state[`pickerProfileName${a > 1 ? a - 1 : ''}`]" class="sllfktkhgl" :class="{ active: activeIndex === a }" @click="pinnedProfileSelect(a)">
 						{{ defaultStore.state[`pickerProfileName${a > 1 ? a - 1 : ''}`] }}
 					</div>
 				</div>

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

@@ -53,19 +53,27 @@ const emit = defineEmits<{
 }>();
 
 const buttonEl = shallowRef<HTMLElement>();
-
+const isLocal = computed(() => !props.reaction.match(/@\w/));
 const emojiName = computed(() => props.reaction.replace(/:/g, '').replace(/@\./, ''));
 const emoji = computed(() => customEmojisMap.get(emojiName.value) ?? getUnicodeEmoji(props.reaction));
+const isAvailable = computed(() => isLocal.value ? true : customEmojisMap.has(getReactionName(props.reaction)));
 
 const canToggle = computed(() => {
 	return !props.reaction.match(/@\w/) && $i && emoji.value && checkReactionPermissions($i, props.note, emoji.value);
 });
+
 const canGetInfo = computed(() => !props.reaction.match(/@\w/) && props.reaction.includes(':'));
+const plainReaction = computed(() => customEmojisMap.has(emojiName.value) ? getReactionName(props.reaction, true) : props.reaction);
+
+function getReactionName(reaction: string, formated = false) {
+	const r = reaction.replaceAll(':', '').replace(/@.*/, '');
+	return formated ? `:${r}:` : r;
+}
 
 async function toggleReaction() {
 	if (!canToggle.value) return;
 
-	const oldReaction = props.note.myReactions?.includes(props.reaction) ? props.reaction : null;
+	const oldReaction = props.note.myReactions.includes(props.reaction) ? props.reaction : null;
 	if (oldReaction) {
 		const confirm = await os.confirm({
 			type: 'warning',
@@ -126,7 +134,13 @@ async function menu(ev) {
 				closed: () => dispose(),
 			});
 		},
-	}], ev.currentTarget ?? ev.target);
+	}, ...(isAvailable.value && !defaultStore.state[`reactions${defaultStore.state.pickerProfileDefault}`].includes(plainReaction.value) ? [{
+		text: i18n.ts.addToDefaultEmojiProfile,
+		icon: 'ti ti-plus',
+		action: () => {
+			defaultStore.set(`reactions${defaultStore.state.pickerProfileDefault}`, [...defaultStore.state[`reactions${defaultStore.state.pickerProfileDefault > 1 ? defaultStore.state.pickerProfileDefault - 1 : ''}`], plainReaction.value]);
+		},
+	}] : [])], ev.currentTarget ?? ev.target);
 }
 
 function anime() {

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

@@ -65,20 +65,20 @@ const rawUrl = computed(() => {
 
 const url = computed(() => {
 	if (rawUrl.value == null) return undefined;
-  const useOriginalSize = props.useOriginalSize;
-  const enableDataSaverMode = defaultStore.state.enableUltimateDataSaverMode;
-  let datasaver_result ;
-  if (enableDataSaverMode) {
-    datasaver_result = useOriginalSize ? undefined : 'datasaver';
-  } else {
-    datasaver_result = useOriginalSize ? undefined : 'emoji';
-  }
+	const useOriginalSize = props.useOriginalSize;
+	const enableDataSaverMode = defaultStore.state.enableUltimateDataSaverMode;
+	let datasaver_result;
+	if (enableDataSaverMode) {
+		datasaver_result = useOriginalSize ? undefined : 'datasaver';
+	} else {
+		datasaver_result = useOriginalSize ? undefined : 'emoji';
+	}
 	const proxied =
 		(rawUrl.value.startsWith('/emoji/') || (props.useOriginalSize && isLocal.value))
 			? rawUrl.value
 			: getProxiedImageUrl(
 				rawUrl.value,
-            datasaver_result,
+				datasaver_result,
 				false,
 				true,
 			);
@@ -109,6 +109,12 @@ function onClick(ev: MouseEvent) {
 				react(`:${props.name}:`);
 				sound.playMisskeySfx('reaction');
 			},
+		}] : []), ...(!defaultStore.state[`reactions${defaultStore.state.pickerProfileDefault}`].includes(`:${props.name}:`) ? [{
+			text: i18n.ts.addToDefaultEmojiPicker,
+			icon: 'ti ti-plus',
+			action: () => {
+				defaultStore.set(`reactions${defaultStore.state.pickerProfileDefault}`, [...defaultStore.state[`reactions${defaultStore.state.pickerProfileDefault > 1 ? defaultStore.state.pickerProfileDefault - 1 : ''}`], `:${props.name}:`]);
+			},
 		}] : []), {
 			text: i18n.ts.info,
 			icon: 'ti ti-info-circle',

packages/frontend/src/timeline-header.ts

@@ -124,9 +124,9 @@ export const timelineHeaderItemDef = reactive<Partial<Record<TimelineHeaderItem,
 		};
 		return acc;
 	}, {}),
-	...defaultStore.reactiveState.remoteLocalTimeline.value.reduce((acc, t) => {
+	...defaultStore.reactiveState.remoteLocalTimeline.value.reduce((acc, t : {host:string; name:string;}) => {
 		acc['remoteLocalTimeline:' + t.host.replace('https://', '')] = {
-			title: 'remoteLocaltimeline:' + t.name,
+			title: t.name,
 			icon: 'ti ti-star',
 			iconOnly: true,
 		};