ap note preview

packages/frontend/src/components/MkNoteSimple.vue

@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 		<div>
 			<p v-if="note.cw != null" :class="$style.cw">
-				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
+				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis" @click.stop="defaultStore.state.clickToOpen ? noteclick(note.id) : undefined"/>
 				<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll"/>
 			</p>
 			<div v-show="note.cw == null || showContent">
@@ -27,12 +27,20 @@ import * as Misskey from 'misskey-js';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
+import { useRouter } from '@/router/supplier.js';
 
 const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();
 
 const showContent = ref(false);
+
+function noteclick(id: string) {
+	const selection = document.getSelection();
+	if (selection?.toString().length === 0) {
+		useRouter().push(`/notes/${id}`);
+	}
+}
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkUrlPreview.vue

@@ -43,6 +43,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkButton>
 	</div>
 </template>
+<template v-else-if="apNote && apExpanded">
+	<MkNoteSimple :note="apNote" :class="$style.linkNote"/>
+	<div :class="$style.action">
+		<MkButton :small="true" inline @click="apExpanded = false">
+			<i class="ti ti-x"></i> {{ i18n.ts.close }}
+		</MkButton>
+	</div>
+</template>
 <div v-else>
 	<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substring(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 		<div v-if="thumbnail && !sensitive" :class="$style.thumbnail" :style="defaultStore.state.dataSaver.urlPreview ? '' : `background-image: url('${thumbnail}')`">
@@ -78,14 +86,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i class="ti ti-picture-in-picture"></i> {{ i18n.ts.openInWindow }}
 			</MkButton>
 		</div>
+		<div v-else-if="!apExpanded && apNote" :class="$style.action">
+			<MkButton :small="true" inline @click="apExpanded = true">
+				<i class="ti ti-world-x"></i> {{ i18n.ts.expandTweet }}
+			</MkButton>
+		</div>
 	</template>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
-import { url as local } from '@@/js/config.js';
+import * as Misskey from 'misskey-js';
-import { versatileLang } from '@@/js/intl-const.js';
+import MkNoteSimple from './MkNoteSimple.vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import type { summaly } from '@misskey-dev/summaly';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
@@ -131,6 +145,8 @@ const tweetExpanded = ref(props.detail);
 const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
 const tweetHeight = ref(150);
 const unknownUrl = ref(false);
+const apExpanded = ref(false);
+const apNote = ref<Misskey.entities.Note | null>(null);
 
 onDeactivated(() => {
 	playerEnabled.value = false;
@@ -178,6 +194,16 @@ window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLa
 		sitename.value = info.sitename;
 		player.value = info.player;
 		sensitive.value = info.sensitive ?? false;
+
+		if (info.activityPub) {
+			misskeyApi('ap/show', {
+				uri: info.activityPub,
+			}).then(res => {
+				if (res.type === 'Note') {
+					apNote.value = res.object;
+				}
+			});
+		}
 	});
 
 function adjustTweetHeight(message: any) {
@@ -236,6 +262,14 @@ onUnmounted(() => {
 	width: 100%;
 }
 
+.linkNote {
+	margin-top: 5px;
+	padding: 16px;
+	border: solid 1px var(--renote);
+	border-radius: var(--radius-sm);
+	overflow: clip;
+}
+
 .link {
 	position: relative;
 	display: block;