Frontend: Fixed a bunch of ⚡ jank ⚡

fe_calckey/frontend/client/src/components/MagUserPreview.vue

@@ -132,7 +132,7 @@ import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
-import { packed, endpoints } from "magnetar-common";
+import { endpoints, packed } from "magnetar-common";
 import { host as localHost } from "@/config";
 import { toUnicode } from "punycode";
 
@@ -165,7 +165,6 @@ let collapsed = $ref(!isLong);
 onMounted(() => {
     const options = { detail: true, profile: true, relation: true };
 
-    debugger;
     if (typeof props.userTag === "object") {
         const canonical =
             !props.userTag.host || props.userTag.host === localHost

fe_calckey/frontend/client/src/components/MkRenoteButton.vue

@@ -37,6 +37,7 @@ import {
     magLegacyVisibility,
     magTransMap,
     magTransProperty,
+    magVisibility,
 } from "@/scripts-mag/mag-util";
 import * as Misskey from "calckey-js";
 
@@ -59,7 +60,7 @@ const hasRenotedBefore = ref<boolean>(
 
 const canRenote = computed(
     () =>
-        ["public", "home", "Public", "Home"].includes(props.note.visibility) ||
+        ["Public", "Home"].includes(magVisibility(props.note.visibility)) ||
         ($i && props.note.user.id === $i.id)
 );
 
@@ -91,7 +92,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 
     let buttonActions: Array<MenuItem> = [];
 
-    if (props.note.visibility === "public") {
+    if (magVisibility(props.note.visibility) === "Public") {
         buttonActions.push({
             text: i18n.ts.renote,
             icon: "ph-repeat ph-bold ph-lg",
@@ -118,7 +119,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
         });
     }
 
-    if (["public", "home", "Public", "home"].includes(props.note.visibility)) {
+    if (["Public", "Home"].includes(magVisibility(props.note.visibility))) {
         buttonActions.push({
             text: `${i18n.ts.renote} (${i18n.ts._visibility.home})`,
             icon: "ph-house ph-bold ph-lg",
@@ -145,7 +146,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
         });
     }
 
-    if (props.note.visibility === "specified") {
+    if (magVisibility(props.note.visibility) === "Direct") {
         buttonActions.push({
             text: `${i18n.ts.renote} (${i18n.ts.recipient})`,
             icon: "ph-envelope-simple-open ph-bold ph-lg",
@@ -211,7 +212,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
             action: () => {
                 os.api(
                     "notes/create",
-                    magLegacyVisibility(props.note.visibility) === "specified"
+                    magVisibility(props.note.visibility) === "Direct"
                         ? {
                               renoteId: props.note.id,
                               visibility: magLegacyVisibility(

fe_calckey/frontend/client/src/components/global/MagEmoji.vue

@@ -17,6 +17,7 @@
         decoding="async"
     />
     <span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
+    <span v-else-if="isRaw"><i class="ph-file-dashed ph-lg"></i></span>
     <span v-else>{{ emoji }}</span>
 </template>
 
@@ -41,8 +42,12 @@ const props = defineProps<{
 
 const isCustom = computed(() => magIsCustomEmoji(props.emoji));
 
+const isRaw = computed(
+    () => !magIsCustomEmoji(props.emoji) && !magIsUnicodeEmoji(props.emoji)
+);
+
 const char = computed(() =>
-    magIsUnicodeEmoji(props.emoji) ? props.emoji : null
+    magIsUnicodeEmoji(props.emoji) ? (props.emoji as string) : null
 );
 const useOsNativeEmojis = computed(
     () => defaultStore.state.useOsNativeEmojis && !props.isReaction
@@ -52,8 +57,8 @@ const url = computed(() => {
         return char2filePath(char.value);
     } else if (magIsCustomEmoji(props.emoji)) {
         return defaultStore.state.disableShowingAnimatedImages
-            ? getStaticImageUrl(props.emoji.url)
-            : props.emoji.url;
+            ? getStaticImageUrl((props.emoji as types.ReactionShortcode).url)
+            : (props.emoji as types.ReactionShortcode).url;
     } else {
         return null;
     }

fe_calckey/frontend/client/src/directives/tooltip.ts

@@ -3,7 +3,7 @@
 
 import { defineAsyncComponent, Directive, ref } from "vue";
 import { isTouchUsing } from "@/scripts/touch";
-import { popup, alert } from "@/os";
+import { alert, popup } from "@/os";
 import { mainRouter } from "@/router";
 
 const start = isTouchUsing ? "touchstart" : "mouseover";
@@ -118,6 +118,6 @@ export default {
     unmounted(el, binding, vn) {
         const self = el._tooltipDirective_;
         window.clearInterval(self.checkTimer);
-        if (self) self.close();
+        if (typeof self.close === "function") self.close();
     },
 } as Directive;

fe_calckey/frontend/client/src/scripts-mag/mag-util.ts

@@ -173,6 +173,35 @@ export function magLegacyVisibility(
     }
 }
 
+export function magVisibility(
+    vis: types.NoteVisibility | Misskey.entities.Note["visibility"]
+): types.NoteVisibility;
+
+export function magVisibility(vis: undefined): undefined;
+
+export function magVisibility(
+    vis: types.NoteVisibility | Misskey.entities.Note["visibility"] | undefined
+): types.NoteVisibility | undefined {
+    if (typeof vis === "undefined") return vis;
+
+    switch (vis) {
+        case "public":
+            return "Public";
+        case "home":
+            return "Home";
+        case "followers":
+            return "Followers";
+        case "specified":
+            return "Direct";
+
+        case "Public":
+        case "Home":
+        case "Followers":
+        case "Direct":
+            return vis;
+    }
+}
+
 export function magCustomEmoji(
     emoji: Misskey.entities.CustomEmoji
 ): types.ReactionShortcode {
@@ -267,8 +296,11 @@ export function magReactionEquals(a: types.Reaction, b: types.Reaction) {
         const { name: rName, host: rHost } = a;
 
         return name === rName && (host ?? null) === (rHost ?? null);
-    } else if ("raw" in a && "raw" in (b as { raw: string })) {
-        return a.raw === (b as { raw: string }).raw;
+    } else if (
+        "raw" in (a as { raw: string }) &&
+        "raw" in (b as { raw: string })
+    ) {
+        return (a as { raw: string }).raw === (b as { raw: string }).raw;
     }
 
     return false;