refactor: ♻️ make skin tones modular

Could possibly be for future custom emoji sets that support custom skin tones? (i.e. Mutant Standard)

packages/client/src/components/MkEmojiPicker.section.vue

@@ -10,11 +10,11 @@
 				"
 			></i>
 			<slot></slot> ({{ emojis.length }})
-			<span v-if="props.skinToneSelector">
+			<span v-if="props.skinToneSelector && props.skinTones">
 				<button
-					v-for="skinTone in skinTones"
+					v-for="skinTone in props.skinTones"
 					class="_button"
-					@click="applySkinTone(skinTones.indexOf(skinTone))"
+					@click="applySkinTone(props.skinTones.indexOf(skinTone) + 1)"
 				>
 					<i
 						class="ph-circle ph-fill ph-fw ph-lg"
@@ -44,17 +44,9 @@ const props = defineProps<{
 	emojis: string[];
 	initialShown?: boolean;
 	skinToneSelector?: boolean;
+	skinTones?: string[];
 }>();
 
-const skinTones = [
-	"#FFDC5E",
-	"#F7DFCF",
-	"#F3D3A3",
-	"#D6AE89",
-	"#B17F56",
-	"#7D523C",
-];
-
 const localEmojis = ref([...props.emojis]);
 
 function applySkinTone(custom?: number) {

packages/client/src/components/MkEmojiPicker.vue

@@ -114,6 +114,7 @@
 						v-for="category in unicodeEmojiCategories"
 						:key="category"
 						:skin-tone-selector="category === 'people'"
+						:skin-tones="unicodeEmojiSkinTones"
 						:emojis="
 							emojilist
 								.filter((e) => e.category === category)
@@ -167,6 +168,7 @@ import XSection from "@/components/MkEmojiPicker.section.vue";
 import {
 	emojilist,
 	unicodeEmojiCategories,
+	unicodeEmojiSkinTones,
 	UnicodeEmojiDef,
 	getNicelyLabeledCategory,
 } from "@/scripts/emojilist";

packages/client/src/scripts/emojilist.ts

@@ -35,6 +35,15 @@ export const categoryMapping = {
 	"Flags": "flags",
 } as const;
 
+export const unicodeEmojiSkinTones = [
+	"#FFDC5E",
+	"#F7DFCF",
+	"#F3D3A3",
+	"#D6AE89",
+	"#B17F56",
+	"#7D523C",
+];
+
 export function addSkinTone(emoji: string, skinTone?: number) {
 	const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone;
 	const skinToneModifiers = [