diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue index 36aeb83d52..ac2e1a8111 100644 --- a/packages/client/src/components/MkEmojiPicker.vue +++ b/packages/client/src/components/MkEmojiPicker.vue @@ -113,19 +113,19 @@ <header>{{ i18n.ts.emoji }}</header> <XSection v-for="category in unicodeEmojiCategories" - :key="category" - :skin-tone-selector="category === 'people'" + :key="category.slug" + :skin-tone-selector="category.slug === 'people_body'" :skin-tones="unicodeEmojiSkinTones" :skin-tone-labels="unicodeEmojiSkinToneLabels" :emojis=" emojilist - .filter((e) => e.category === category) + .filter( + (e) => e.category_slug === category.slug, + ) .map((e) => e.emoji) " @chosen="chosen" - >{{ - getNicelyLabeledCategory(category) || category - }}</XSection + >{{ category.name }}</XSection > </div> </div> @@ -169,11 +169,7 @@ import type { entities } from "firefish-js"; import { FocusTrap } from "focus-trap-vue"; import XSection from "@/components/MkEmojiPicker.section.vue"; import type { UnicodeEmojiDef } from "@/scripts/emojilist"; -import { - emojilist, - getNicelyLabeledCategory, - unicodeEmojiCategories, -} from "@/scripts/emojilist"; +import { emojilist, unicodeEmojiCategories } from "@/scripts/emojilist"; import { getStaticImageUrl } from "@/scripts/get-static-image-url"; import Ripple from "@/components/MkRipple.vue"; import * as os from "@/os"; diff --git a/packages/client/src/scripts/emojilist.ts b/packages/client/src/scripts/emojilist.ts index 1e9482b6bb..6384b15982 100644 --- a/packages/client/src/scripts/emojilist.ts +++ b/packages/client/src/scripts/emojilist.ts @@ -6,35 +6,17 @@ import { defaultStore } from "@/store"; export interface UnicodeEmojiDef { emoji: string; - category: (typeof unicodeEmojiCategories)[number]; + category: (typeof unicodeEmojiCategories)[number]["name"]; + category_slug: (typeof unicodeEmojiCategories)[number]["slug"]; skin_tone_support: boolean; slug: string; keywords?: string[]; } -export const unicodeEmojiCategories = [ - "emotion", - "people", - "animals_and_nature", - "food_and_drink", - "activity", - "travel_and_places", - "objects", - "symbols", - "flags", -] as const; - -export const categoryMapping = { - "Smileys & Emotion": "emotion", - "People & Body": "people", - "Animals & Nature": "animals_and_nature", - "Food & Drink": "food_and_drink", - Activities: "activity", - "Travel & Places": "travel_and_places", - Objects: "objects", - Symbols: "symbols", - Flags: "flags", -} as const; +export const unicodeEmojiCategories = data.map((categories) => ({ + slug: categories.slug, + name: categories.name, +})); export function addSkinTone(emoji: string, skinTone?: number) { const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone; @@ -57,41 +39,20 @@ export function addSkinTone(emoji: string, skinTone?: number) { } } -const newData = {}; - -for (const originalCategory of Object.keys(data)) { - const newCategory = categoryMapping[originalCategory]; - if (newCategory) { - newData[newCategory] = newData[newCategory] || []; - for (const emojiIndex of Object.keys(data[originalCategory])) { - const emojiObj = { ...data[originalCategory][emojiIndex] }; - emojiObj.category = newCategory; - emojiObj.keywords = keywordSet[emojiObj.emoji]; - newData[newCategory].push(emojiObj); - } - } -} - -export const emojilist: UnicodeEmojiDef[] = Object.keys(newData).reduce( - (acc, category) => { - const categoryItems = newData[category].map((item) => { - return { - emoji: item.emoji, - slug: item.slug, - category: item.category, - skin_tone_support: item.skin_tone_support || false, - keywords: item.keywords || [], - }; - }); - return acc.concat(categoryItems); - }, - [], -); - -export function getNicelyLabeledCategory(internalName) { - return ( - Object.keys(categoryMapping).find( - (key) => categoryMapping[key] === internalName, - ) || internalName - ); -} +export const emojilist: UnicodeEmojiDef[] = data + .flatMap((category) => + category.emojis.map((emoji) => ({ + ...emoji, + category: category.name, + category_slug: category.slug, + keywords: keywordSet[emoji.emoji], + })), + ) + .map((item) => ({ + emoji: item.emoji, + slug: item.slug, + category: item.category, + category_slug: item.category_slug, + skin_tone_support: item.skin_tone_support || false, + keywords: item.keywords || [], + }));