revert unnecessary MaybeRef in components

packages/client/src/components/MkChartTooltip.vue

@@ -28,11 +28,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from "vue";
 import MkTooltip from "./MkTooltip.vue";
 
 const props = defineProps<{
-	showing: Ref<boolean>;
+	showing: boolean;
 	x: number;
 	y: number;
 	title?: string;

packages/client/src/components/MkReactionTooltip.vue

@@ -19,13 +19,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from "vue";
 import type { entities } from "firefish-js";
 import MkTooltip from "./MkTooltip.vue";
 import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 defineProps<{
-	showing: Ref<boolean>;
+	showing: boolean;
 	reaction: string;
 	emojis: entities.EmojiLite[];
 	targetElement: HTMLElement;

packages/client/src/components/MkReactionsViewer.details.vue

@@ -30,13 +30,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from "vue";
 import type { entities } from "firefish-js";
 import MkTooltip from "./MkTooltip.vue";
 import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 defineProps<{
-	showing: Ref<boolean>;
+	showing: boolean;
 	reaction: string;
 	users: entities.User[]; // TODO
 	count: number;

packages/client/src/components/MkTooltip.vue

@@ -5,7 +5,7 @@
 		@after-leave="emit('closed')"
 	>
 		<div
-			v-show="unref(showing)"
+			v-show="showing"
 			ref="el"
 			class="buebdbiu _acrylic _shadow"
 			:style="{ zIndex, maxWidth: maxWidth + 'px' }"
@@ -19,21 +19,14 @@
 </template>
 
 <script lang="ts" setup>
-import {
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
-	type MaybeRef,
-	nextTick,
-	onMounted,
-	onUnmounted,
-	ref,
-	unref,
-} from "vue";
 import * as os from "@/os";
 import { calcPopupPosition } from "@/scripts/popup-position";
 import { defaultStore } from "@/store";
 
 const props = withDefaults(
 	defineProps<{
-		showing: MaybeRef<boolean>;
+		showing: boolean;
 		targetElement?: HTMLElement | null;
 		x?: number;
 		y?: number;

packages/client/src/components/MkUsersTooltip.vue

@@ -19,12 +19,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from "vue";
 import type { entities } from "firefish-js";
 import MkTooltip from "./MkTooltip.vue";
 
 defineProps<{
-	showing: Ref<boolean>;
+	showing: boolean;
 	users: entities.User[];
 	count: number;
 	targetElement?: HTMLElement;

packages/client/src/components/MkWaitingDialog.vue

@@ -13,7 +13,7 @@
 			]"
 		>
 			<i
-				v-if="unref(success)"
+				v-if="success"
 				:class="[$style.icon, $style.success, iconify('ph-check')]"
 			></i>
 			<MkLoading
@@ -29,16 +29,15 @@
 </template>
 
 <script lang="ts" setup>
-import type { MaybeRef } from "vue";
+import { shallowRef, watch } from "vue";
-import { shallowRef, unref, watch } from "vue";
 import MkModal from "@/components/MkModal.vue";
 import iconify from "@/scripts/icon";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const props = defineProps<{
-	success: MaybeRef<boolean>;
+	success: boolean;
-	showing: MaybeRef<boolean>;
+	showing: boolean;
 	text?: string;
 }>();
 

packages/client/src/os.ts

@@ -3,7 +3,7 @@
 import { EventEmitter } from "eventemitter3";
 import { type Endpoints, type entities, api as firefishApi } from "firefish-js";
 import insertTextAtCursor from "insert-text-at-cursor";
-import type { Component, Ref } from "vue";
+import type { Component, MaybeRef, Ref } from "vue";
 import { defineAsyncComponent, markRaw, ref } from "vue";
 import { i18n } from "./i18n";
 import MkDialog from "@/components/MkDialog.vue";
@@ -213,9 +213,13 @@ interface VueComponentConstructor<P, E> {
 
 type NonArrayAble<A> = A extends Array<unknown> ? never : A;
 
+type CanUseRef<T> = {
+	[K in keyof T]: MaybeRef<T[K]>;
+};
+
 export async function popup<Props, Emits>(
 	component: VueComponentConstructor<Props, Emits>,
-	props: Props,
+	props: CanUseRef<Props>,
 	events: Partial<NonArrayAble<NonNullable<Emits>>> = {},
 	disposeEvent?: keyof Partial<NonArrayAble<NonNullable<Emits>>>,
 ) {
@@ -240,6 +244,7 @@ export async function popup<Props, Emits>(
 		id,
 	};
 
+	// Hint: Vue will automatically resolve ref here, so it is safe to use ref in props
 	popups.value.push(state);
 
 	return {