better category null handling

2 files changed, 15 insertions, 5 deletions

diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index b288cb22fe..479d8eb7fb 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -60,7 +60,15 @@
 		</div>
 		<div v-once class="group">
 			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
-			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="computed(() => customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':'))" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
+			<XSection
+				v-for="category in customEmojiCategories"
+				:key="`custom:${category}`"
+				:initial-shown="false"
+				:emojis="computed(() => customEmojis.filter(e => category === null ? e.category == null || e.category === 'null' : e.category === category).map(e => `:${e.name}:`))"
+				@chosen="chosen"
+			>
+				{{ category || i18n.ts.other }}
+			</XSection>
 		</div>
 		<div v-once class="group">
 			<header class="_acrylic">{{ i18n.ts.emoji }}</header>
diff --git a/packages/frontend/src/custom-emojis.ts b/packages/frontend/src/custom-emojis.ts
index 2cd088993d..4dd2e0909f 100644
--- a/packages/frontend/src/custom-emojis.ts
+++ b/packages/frontend/src/custom-emojis.ts
@@ -1,17 +1,19 @@
 import { apiGet } from './os';
 import { miLocalStorage } from './local-storage';
-import { shallowRef, computed, markRaw, watch } from 'vue';
+import { shallowRef, computed, markRaw } from 'vue';
 import * as Misskey from 'misskey-js';
 import { stream } from '@/stream';
 
 const storageCache = miLocalStorage.getItem('emojis');
 export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(storageCache ? JSON.parse(storageCache) : []);
-export const customEmojiCategories = computed<string[]>(() => {
+export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
 	const categories = new Set<string>();
 	for (const emoji of customEmojis.value) {
-		categories.add(emoji.category);
+		if (emoji.category && emoji.category !== 'null') {
+			categories.add(emoji.category);
+		}
 	}
-	return markRaw(Array.from(categories));
+	return markRaw([ ...Array.from(categories), null ]);
 });
 
 stream.on('emojiAdded', emojiData => {