Enhance(frontend): リアクションピッカーを調整 (#13354)

* 打てない絵文字を表示しないのではなくグレーアウトするように など

* fix: 今度は検索とピン留めに効いてなかった

* lint fix

* use Map

* 斜めに線を引いてわかりやすく

* 斜め線は右上からのほうが良かったかも

* デザイン調整

packages/frontend/src/scripts/check-reaction-permissions.ts

@@ -1,6 +1,10 @@
 import * as Misskey from 'misskey-js';
+import { UnicodeEmojiDef } from './emojilist.js';
 
-export function checkReactionPermissions(me: Misskey.entities.MeDetailed, note: Misskey.entities.Note, emoji: Misskey.entities.EmojiSimple): boolean {
+export function checkReactionPermissions(me: Misskey.entities.MeDetailed, note: Misskey.entities.Note, emoji: Misskey.entities.EmojiSimple | UnicodeEmojiDef): boolean {
+  if ('char' in emoji) return true; // UnicodeEmojiDefなら常にリアクション可能
+
+  emoji = emoji as Misskey.entities.EmojiSimple;
   const roleIdsThatCanBeUsedThisEmojiAsReaction = emoji.roleIdsThatCanBeUsedThisEmojiAsReaction ?? [];
   return !(emoji.localOnly && note.user.host !== me.host)
       && !(emoji.isSensitive && (note.reactionAcceptance === 'nonSensitiveOnly' || note.reactionAcceptance === 'nonSensitiveOnlyForLocalLikeOnlyForRemote'))

packages/frontend/src/scripts/emojilist.ts

@@ -20,6 +20,10 @@ export const emojilist: UnicodeEmojiDef[] = _emojilist.map(x => ({
 	category: unicodeEmojiCategories[x[2]],
 }));
 
+export const unicodeEmojisMap = new Map<string, UnicodeEmojiDef>(
+	emojilist.map(x => [x.char, x])
+);
+
 const _indexByChar = new Map<string, number>();
 const _charGroupByCategory = new Map<string, string[]>();
 for (let i = 0; i < emojilist.length; i++) {