From 3efc376f2b3560b165c1ea14cadc1646debbcb76 Mon Sep 17 00:00:00 2001
From: Natty <natty.sh.git@gmail.com>
Date: Mon, 6 Nov 2023 00:18:16 +0100
Subject: [PATCH] Frontend: Magnetar emoji URL hinting

---
 .../client/src/components/MkReactionIcon.vue         |  4 ++--
 .../src/components/MkReactionsViewer.reaction.vue    |  8 +++++++-
 .../client/src/components/MkReactionsViewer.vue      |  1 +
 .../client/src/components/global/MkEmoji.vue         | 12 +++++++-----
 .../frontend/client/src/scripts-mag/mag-util.ts      |  2 ++
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/fe_calckey/frontend/client/src/components/MkReactionIcon.vue b/fe_calckey/frontend/client/src/components/MkReactionIcon.vue
index 3440ab2..4cdb88c 100644
--- a/fe_calckey/frontend/client/src/components/MkReactionIcon.vue
+++ b/fe_calckey/frontend/client/src/components/MkReactionIcon.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
+import * as Misskey from "calckey-js";
 
 const props = defineProps<{
     reaction: string;
-    customEmojis?: any[]; // TODO
+    customEmojis?: Pick<Misskey.entities.CustomEmoji, "name" | "url">[];
     noStyle?: boolean;
 }>();
 </script>
diff --git a/fe_calckey/frontend/client/src/components/MkReactionsViewer.reaction.vue b/fe_calckey/frontend/client/src/components/MkReactionsViewer.reaction.vue
index 3209e8c..db0f185 100644
--- a/fe_calckey/frontend/client/src/components/MkReactionsViewer.reaction.vue
+++ b/fe_calckey/frontend/client/src/components/MkReactionsViewer.reaction.vue
@@ -14,7 +14,12 @@
         <XReactionIcon
             class="icon"
             :reaction="reaction"
-            :custom-emojis="note.emojis"
+            :custom-emojis="[
+                ...note.emojis,
+                typeof url !== 'undefined'
+                    ? { name: reaction, url: url }
+                    : undefined,
+            ]"
         />
         <span class="count">{{ count }}</span>
     </button>
@@ -34,6 +39,7 @@ import { magReactionSelf } from "@/scripts-mag/mag-util";
 const props = defineProps<{
     reaction: string;
     count: number;
+    url?: string;
     isInitial: boolean;
     note: packed.PackNoteMaybeFull | misskey.entities.Note;
 }>();
diff --git a/fe_calckey/frontend/client/src/components/MkReactionsViewer.vue b/fe_calckey/frontend/client/src/components/MkReactionsViewer.vue
index dfab837..10def9d 100644
--- a/fe_calckey/frontend/client/src/components/MkReactionsViewer.vue
+++ b/fe_calckey/frontend/client/src/components/MkReactionsViewer.vue
@@ -6,6 +6,7 @@
                 : Object.entries(note.reactions)"
             :key="magReactionPairToLegacy(r)[0]"
             :reaction="magReactionPairToLegacy(r)[0]"
+            :url="'url' in r[0] ? r[0]['url'] : undefined"
             :count="magReactionPairToLegacy(r)[1]"
             :is-initial="initialReactions.has(magReactionPairToLegacy(r)[0])"
             :note="note"
diff --git a/fe_calckey/frontend/client/src/components/global/MkEmoji.vue b/fe_calckey/frontend/client/src/components/global/MkEmoji.vue
index baac77c..60b67f2 100644
--- a/fe_calckey/frontend/client/src/components/global/MkEmoji.vue
+++ b/fe_calckey/frontend/client/src/components/global/MkEmoji.vue
@@ -21,8 +21,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue";
-import { CustomEmoji } from "calckey-js/built/entities";
+import { computed } from "vue";
+import * as Misskey from "calckey-js";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import { char2filePath } from "@/scripts/twemoji-base";
 import { defaultStore } from "@/store";
@@ -32,7 +32,7 @@ const props = defineProps<{
     emoji: string;
     normal?: boolean;
     noStyle?: boolean;
-    customEmojis?: CustomEmoji[];
+    customEmojis?: Pick<Misskey.entities.CustomEmoji, "name" | "url">[];
     isReaction?: boolean;
 }>();
 
@@ -45,17 +45,19 @@ const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
 const customEmoji = computed(() =>
     isCustom.value
         ? ce.value.find(
-              (x) => x.name === props.emoji.substr(1, props.emoji.length - 2)
+              (x) => x.name === props.emoji.substring(1, props.emoji.length - 1)
           )
         : null
 );
 const url = computed(() => {
     if (char.value) {
         return char2filePath(char.value);
-    } else {
+    } else if (customEmoji?.value?.url) {
         return defaultStore.state.disableShowingAnimatedImages
             ? getStaticImageUrl(customEmoji.value.url)
             : customEmoji.value.url;
+    } else {
+        return null;
     }
 });
 const alt = computed(() =>
diff --git a/fe_calckey/frontend/client/src/scripts-mag/mag-util.ts b/fe_calckey/frontend/client/src/scripts-mag/mag-util.ts
index ff0fe26..e7eb914 100644
--- a/fe_calckey/frontend/client/src/scripts-mag/mag-util.ts
+++ b/fe_calckey/frontend/client/src/scripts-mag/mag-util.ts
@@ -173,6 +173,8 @@ export function magConvertReaction(
     }
 
     if (reaction.match(/^:.+:$/)) {
+        reaction = reaction.replaceAll(/(^:) | (:$)/, "");
+
         const [name, host] = reaction.split("@");
         return {
             name,