From d20f778bd0a92fa9d3a489964f8e75981e4aadeb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 2 Nov 2023 19:59:18 +0900
Subject: enhance(frontend): tweak MkNotification

---
 packages/frontend/src/components/MkReactionIcon.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

(limited to 'packages/frontend/src/components/MkReactionIcon.vue')

diff --git a/packages/frontend/src/components/MkReactionIcon.vue b/packages/frontend/src/components/MkReactionIcon.vue
index 55c812cbc1..fdc3bfd23c 100644
--- a/packages/frontend/src/components/MkReactionIcon.vue
+++ b/packages/frontend/src/components/MkReactionIcon.vue
@@ -4,16 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
-<MkEmoji v-else :emoji="reaction" :normal="true" :noStyle="noStyle"/>
+<MkCustomEmoji v-if="reaction[0] === ':'" ref="elRef" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
+<MkEmoji v-else ref="elRef" :emoji="reaction" :normal="true" :noStyle="noStyle"/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { defineAsyncComponent, shallowRef } from 'vue';
+import { useTooltip } from '@/scripts/use-tooltip.js';
+import * as os from '@/os.js';
 
 const props = defineProps<{
 	reaction: string;
 	noStyle?: boolean;
 	emojiUrl?: string;
+	withTooltip?: boolean;
 }>();
+
+const elRef = shallowRef();
+
+if (props.withTooltip) {
+	useTooltip(elRef, (showing) => {
+		os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
+			showing,
+			reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'),
+			targetElement: elRef.value.$el,
+		}, {}, 'closed');
+	});
+}
 </script>
-- 
cgit v1.2.3-freya