Frontend: Magnetar emoji URL hinting

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>

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;
 }>();

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"

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(() =>

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,