From 51313e7ec2b4c551c02f1cfa640e32b522452cbb Mon Sep 17 00:00:00 2001
From: tar_bin <tar.bin.master@gmail.com>
Date: Sun, 21 May 2023 14:25:59 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=83=89=E3=83=A9=E3=83=95=E3=83=88?=
 =?UTF-8?q?=E3=81=AE=E7=B5=B5=E6=96=87=E5=AD=97=E3=81=AF=E8=A9=B2=E5=BD=93?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=82=AD=E3=83=BC=E3=82=92=E5=85=A5=E5=8A=9B?=
 =?UTF-8?q?=E3=81=95=E3=82=8C=E3=81=A6=E3=82=82=E8=A1=A8=E7=A4=BA=E3=81=97?=
 =?UTF-8?q?=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit f332fbc47eabc373e292076078ad673d72e6a5c9)
---
 packages/frontend/src/components/global/MkCustomEmoji.vue | 3 ++-
 packages/frontend/src/custom-emojis.ts                    | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/global/MkCustomEmoji.vue b/packages/frontend/src/components/global/MkCustomEmoji.vue
index 063b122f8b..c77fb4c098 100644
--- a/packages/frontend/src/components/global/MkCustomEmoji.vue
+++ b/packages/frontend/src/components/global/MkCustomEmoji.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<span v-if="errored">:{{ customEmojiName }}:</span>
+<span v-if="errored || isDraft">:{{ customEmojiName }}:</span>
 <img v-else :class="[$style.root, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" :src="url" :alt="alt" :title="alt" decoding="async" @error="errored = true" @load="errored = false"/>
 </template>
 
@@ -25,6 +25,7 @@ const props = defineProps<{
 
 const customEmojiName = computed(() => (props.name[0] === ':' ? props.name.substring(1, props.name.length - 1) : props.name).replace('@.', ''));
 const isLocal = computed(() => !props.host && (customEmojiName.value.endsWith('@.') || !customEmojiName.value.includes('@')));
+const isDraft = computed(() => customEmojisNameMap.value.get(customEmojiName.value)?.draft ?? false);
 
 const rawUrl = computed(() => {
 	if (props.url) {
diff --git a/packages/frontend/src/custom-emojis.ts b/packages/frontend/src/custom-emojis.ts
index 8ecd1bd2eb..9b4b56b7de 100644
--- a/packages/frontend/src/custom-emojis.ts
+++ b/packages/frontend/src/custom-emojis.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { shallowRef, computed, markRaw, watch } from 'vue';
+import { shallowRef, computed, markRaw, triggerRef,watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { api, apiGet } from '@/os.js';
 import { useStream } from '@/stream.js';
@@ -11,6 +11,7 @@ import { get, set } from '@/scripts/idb-proxy.js';
 
 const storageCache = await get('emojis');
 export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(Array.isArray(storageCache) ? storageCache : []);
+export const customEmojisNameMap = computed(() => new Map(customEmojis.value.map(item => [item.name, item])));
 export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
 	const categories = new Set<string>();
 	for (const emoji of customEmojis.value) {
@@ -34,16 +35,19 @@ const stream = useStream();
 
 stream.on('emojiAdded', emojiData => {
 	customEmojis.value = [emojiData.emoji, ...customEmojis.value];
+	triggerRef(customEmojis);
 	set('emojis', customEmojis.value);
 });
 
 stream.on('emojiUpdated', emojiData => {
 	customEmojis.value = customEmojis.value.map(item => emojiData.emojis.find(search => search.name === item.name) as Misskey.entities.CustomEmoji ?? item);
+	triggerRef(customEmojis);
 	set('emojis', customEmojis.value);
 });
 
 stream.on('emojiDeleted', emojiData => {
 	customEmojis.value = customEmojis.value.filter(item => !emojiData.emojis.some(search => search.name === item.name));
+	triggerRef(customEmojis);
 	set('emojis', customEmojis.value);
 });
 
@@ -60,6 +64,7 @@ export async function fetchCustomEmojis(force = false) {
 	}
 
 	customEmojis.value = res.emojis;
+	triggerRef(customEmojis);
 	set('emojis', res.emojis);
 	set('lastEmojisFetchedAt', now);
 }