リアクションを右クリックで検索ページへのリンクを表示できるように (#512)

CHANGELOG_YOJO.md

@@ -25,6 +25,7 @@ Cherrypick 4.11.1
 - Enhance: ノートにつけられたリアクションを対象にした検索ができるように
   - Opensearchのみ対応 
   - Opensearchの設定で` reactionSearchLocalOnly: true`にすることでリモートのカスタム絵文字リアクションをインデックス対象外にできます
+  - リアクションを右クリックすると検索へのボタンを表示できます
 - Enhance: 高度な検索でフォロー中/フォロー外を検索条件にできるように 
 - Fix: 照会かリモートユーザーの投稿取得で作成されたノートの場合通知を発行しないように
 - Enhance(Opensearch): 表記ゆれがヒットしないようにするオプションを追加

locales/index.d.ts

@@ -578,6 +578,14 @@ export interface Locale extends ILocale {
      * ユーザーのノートを検索
      */
     "searchThisUsersNotes": string;
+    /**
+     * このリアクションで検索
+     */
+    "searchThisReaction": string;
+    /**
+     * 部分一致
+     */
+    "partialMatch": string;
     /**
      * 返信
      */

locales/ja-JP.yml

@@ -139,6 +139,8 @@ copyFolderId: "フォルダーIDをコピー"
 copyProfileUrl: "プロフィールURLをコピー"
 searchUser: "ユーザーを検索"
 searchThisUsersNotes: "ユーザーのノートを検索"
+searchThisReaction: "このリアクションで検索"
+partialMatch: "部分一致"
 reply: "返信"
 loadMore: "もっと見る"
 showMore: "もっと見る"

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

@@ -37,6 +37,9 @@ import { checkReactionPermissions } from '@/scripts/check-reaction-permissions.j
 import { customEmojis, customEmojisMap } from '@/custom-emojis.js';
 import { getUnicodeEmoji } from '@/scripts/emojilist.js';
 import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
+import { useRouter } from '@/router/supplier.js';
+import { MenuItem } from '@/types/menu.js';
+import { advanccedNotesSearchAvailable } from '@/scripts/check-permissions.js';
 
 const props = defineProps<{
 	reaction: string;
@@ -66,6 +69,8 @@ const reactionName = computed(() => {
 	return r.slice(0, r.indexOf('@'));
 });
 
+const router = useRouter();
+
 const alternative: ComputedRef<string | null> = computed(() => defaultStore.state.reactableRemoteReactionEnabled ? (customEmojis.value.find(it => it.name === reactionName.value)?.name ?? null) : null);
 
 async function toggleReaction(ev: MouseEvent) {
@@ -152,31 +157,48 @@ function stealReaction(ev: MouseEvent) {
 }
 
 async function menu(ev) {
-	if (!canGetInfo.value) return;
-
-	os.popupMenu([{
+	const isCustomEmoji = props.reaction.endsWith(':');
+	let menu = [isCustomEmoji ? {
 		type: 'label',
 		text: `:${reactionName.value}:`,
-	}, {
+	} : undefined, isCustomEmoji ? {
 		text: i18n.ts.info,
 		icon: 'ti ti-info-circle',
 		action: async () => {
 			const { dispose } = os.popup(MkCustomEmojiDetailedDialog, {
 				emoji: await misskeyApiGet('emoji', {
-					name: props.reaction.replace(/:/g, '').replace(/@\./, ''),
+					name: props.reaction.replace(/:/g, '').replace(/@.+/, ''),
+					...(!props.reaction.endsWith('@.:') && { host: props.reaction.split('@')[1].replace(':', '') }),
 				}),
 			}, {
 				closed: () => dispose(),
 			});
 		},
-	}, customEmojis.value.find(it => it.name === reactionName.value)?.name ? {
+	} : undefined, customEmojis.value.find(it => it.name === reactionName.value)?.name ? {
 		text: i18n.ts.copy,
 		icon: 'ti ti-copy',
 		action: () => {
 			copyToClipboard(`:${reactionName.value}:`);
 			os.toast(i18n.ts.copied, 'copied');
 		},
-	} : undefined], ev.currentTarget ?? ev.target);
+	} : undefined,
+	];
+	if (advanccedNotesSearchAvailable) {
+		menu.push({
+			text: i18n.ts.searchThisReaction,
+			icon: 'ti ti-search',
+			action: () => {
+				router.push(`/search?type=anote&reactions=${encodeURIComponent(isCustomEmoji ? props.reaction.endsWith('@.:') ? props.reaction.replace('@.', '') : props.reaction : props.reaction)}`);
+			},
+		}, isCustomEmoji ? {
+			text: `${i18n.ts.searchThisReaction}(${i18n.ts.partialMatch})`,
+			icon: 'ti ti-search',
+			action: () => {
+				router.push(`/search?type=anote&reactions=${encodeURIComponent(`${ props.reaction.endsWith('@.:') ? props.reaction.replace('@.:', '') : props.reaction.split('@')[0]}*`)}`);
+			},
+		} : undefined );
+	}
+	os.popupMenu(menu, ev.currentTarget ?? ev.target);
 }
 
 function anime() {