fix(client): emoji data format change

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";

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 || [],
+	}));