Fixed visibility display

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

@@ -1,22 +1,32 @@
 <template>
-    <span v-if="note.visibility !== 'public'" :class="$style.visibility">
+    <span
+        v-if="note.visibility !== 'public' && note.visibility !== 'Public'"
+        :class="$style.visibility"
+    >
         <i
-            v-if="note.visibility === 'home'"
+            v-if="note.visibility === 'home' || note.visibility === 'Home'"
             class="ph-house ph-bold ph-lg"
             v-tooltip="i18n.ts._visibility.home"
         ></i>
         <i
-            v-else-if="note.visibility === 'followers'"
+            v-else-if="
+                note.visibility === 'followers' ||
+                note.visibility === 'Followers'
+            "
             class="ph-lock ph-bold ph-lg"
             v-tooltip="i18n.ts._visibility.followers"
         ></i>
         <i
-            v-else-if="note.visibility === 'specified'"
+            v-else-if="
+                note.visibility === 'specified' || note.visibility === 'Direct'
+            "
             ref="specified"
             class="ph-envelope-simple-open ph-bold ph-lg"
         ></i>
     </span>
-    <span v-if="note.localOnly" :class="$style.localOnly"
+    <span
+        v-if="magTransProperty(note, 'localOnly', 'local_only')"
+        :class="$style.localOnly"
         ><i
             class="ph-hand-fist ph-bold ph-lg"
             v-tooltip="i18n.ts._visibility.localOnly"
@@ -25,18 +35,24 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
 import XDetails from "@/components/MkUsersTooltip.vue";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { i18n } from "@/i18n";
+import * as Misskey from "calckey-js";
+import { packed } from "magnetar-common";
+import { magTransProperty } from "@/scripts-mag/mag-util";
 
 const props = defineProps<{
-    note: {
-        visibility: string;
-        localOnly?: boolean;
-        visibleUserIds?: string[];
-    };
+    note:
+        | Pick<
+              Misskey.entities.Note,
+              "visibility" | "localOnly" | "visibleUserIds"
+          >
+        | Pick<
+              packed.PackNoteBase,
+              "visibility" | "local_only" | "visible_user_ids"
+          >;
 }>();
 
 const specified = $ref<HTMLElement>();
@@ -44,7 +60,12 @@ const specified = $ref<HTMLElement>();
 if (props.note.visibility === "specified") {
     useTooltip($$(specified), async (showing) => {
         const users = await os.api("users/show", {
-            userIds: props.note.visibleUserIds,
+            userIds:
+                magTransProperty(
+                    props.note,
+                    "visibleUserIds",
+                    "visible_user_ids"
+                ) ?? [],
             limit: 10,
         });
 
@@ -53,7 +74,12 @@ if (props.note.visibility === "specified") {
             {
                 showing,
                 users,
-                count: props.note.visibleUserIds.length,
+                count:
+                    magTransProperty(
+                        props.note,
+                        "visibleUserIds",
+                        "visible_user_ids"
+                    )?.length ?? 0,
                 targetElement: specified,
             },
             {},