From 1f45482cf20ff5a6ef5d95b12ace851a8e261b86 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 23 Oct 2025 01:54:15 -0400
Subject: [PATCH] make emoji categories reactive

---
 .../frontend/src/components/MkEmojiPicker.vue | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index cf7087d798..657044d979 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -150,6 +150,9 @@ const props = withDefaults(defineProps<{
 	targetNote?: Misskey.entities.Note;
 }>(), {
 	showPinned: true,
+	pinnedEmojis: undefined,
+	maxHeight: undefined,
+	targetNote: undefined,
 });
 
 const emit = defineEmits<{
@@ -184,37 +187,41 @@ const searchResultCustom = ref<Misskey.entities.EmojiSimple[]>([]);
 const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
 const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
 
-const customEmojiFolderRoot: CustomEmojiFolderTree = { value: '', category: '', children: [] };
+const customEmojiFolderRoot = computed<CustomEmojiFolderTree>(() => {
+	const root = { value: '', category: '', children: [] };
 
-function parseAndMergeCategories(input: string, root: CustomEmojiFolderTree): CustomEmojiFolderTree {
-	const parts = input.split('/').map(p => p.trim());
-	let currentNode: CustomEmojiFolderTree = root;
+	function parseAndMergeCategories(category: string): CustomEmojiFolderTree {
+		const parts = category.split('/').map(p => p.trim());
+		let currentNode: CustomEmojiFolderTree = root;
 
-	const currentPath = [] as string[];
-	for (const part of parts) {
-		currentPath.push(part);
-		let existingNode = currentNode.children.find((node) => node.value === part);
+		const currentPath = [] as string[];
+		for (const part of parts) {
+			currentPath.push(part);
+			let existingNode = currentNode.children.find((node) => node.value === part);
 
-		if (!existingNode) {
-			const newNode: CustomEmojiFolderTree = { value: part, category: currentPath.join("/"), children: [] };
-			currentNode.children.push(newNode);
-			existingNode = newNode;
+			if (!existingNode) {
+				const newNode: CustomEmojiFolderTree = { value: part, category: currentPath.join("/"), children: [] };
+				currentNode.children.push(newNode);
+				existingNode = newNode;
+			}
+
+			currentNode = existingNode;
 		}
 
-		currentNode = existingNode;
+		return currentNode;
 	}
 
-	return currentNode;
-}
+	customEmojiCategories.value.forEach(ec => {
+		if (ec !== null) {
+			parseAndMergeCategories(ec);
+		}
+	});
 
-customEmojiCategories.value.forEach(ec => {
-	if (ec !== null) {
-		parseAndMergeCategories(ec, customEmojiFolderRoot);
-	}
+	parseAndMergeCategories('');
+
+	return root;
 });
 
-parseAndMergeCategories('', customEmojiFolderRoot);
-
 watch(q, () => {
 	if (emojisEl.value) emojisEl.value.scrollTop = 0;