fix(frontend): isEnabledUrlPreview をリアクティブに判定する

Author: taiyme

packages/frontend/src/components/MkLink.vue

@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, defineAsyncComponent, shallowRef } from 'vue';
 import { url as local } from '@/config.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
-import * as os from '@/os.js';
+import { popup } from '@/os.js';
 import { isEnabledUrlPreview } from '@/instance.js';
 import MkA, { type MkABehavior } from '@/components/global/MkA.vue';
 
@@ -46,15 +46,15 @@ const anchorElement = computed(() => {
 	return rootEl.value.getAnchorElement();
 });
 
-if (isEnabledUrlPreview.value) {
-	useTooltip(anchorElement, (showing) => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
+useTooltip(anchorElement, (showing) => {
+	if (isEnabledUrlPreview.value && anchorElement.value != null) {
+		popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 			showing,
 			url: props.url,
 			source: anchorElement.value,
 		}, {}, 'closed');
-	});
-}
+	}
+});
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/global/MkUrl.vue

@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, defineAsyncComponent, shallowRef } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@/config.js';
-import * as os from '@/os.js';
+import { popup } from '@/os.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
 import { safeURIDecode } from '@/scripts/safe-uri-decode.js';
 import { isEnabledUrlPreview } from '@/instance.js';
@@ -60,15 +60,15 @@ const anchorElement = computed(() => {
 	return rootEl.value.getAnchorElement();
 });
 
-if (props.showUrlPreview && isEnabledUrlPreview.value) {
-	useTooltip(anchorElement, (showing) => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
+useTooltip(anchorElement, (showing) => {
+	if (props.showUrlPreview && isEnabledUrlPreview.value && anchorElement.value != null) {
+		popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 			showing,
 			url: props.url,
 			source: anchorElement.value,
 		}, {}, 'closed');
-	});
-}
+	}
+});
 
 const schema = url.protocol;
 const hostname = decodePunycode(url.hostname);