From f1a7cebea76b58a6fa07cf248054266897c537b2 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:07:19 +0900
Subject: [PATCH 1/4] Update MkUrlPreview.vue

---
 .../frontend/src/components/MkUrlPreview.vue  | 42 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index f38e31c8943..988c5741302 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -43,6 +43,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkButton>
 	</div>
 </template>
+<template v-else-if="noteId && tweetExpanded">
+	<div :class="$style.quote">
+		<MkNoteSimple :note="getNote(noteId)" :class="$style.quoteNote"/>
+	</div>
+	<div :class="$style.action">
+		<MkButton :small="true" inline @click="tweetExpanded = 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}')`">
@@ -70,6 +80,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i class="ti ti-brand-x"></i> {{ i18n.ts.expandTweet }}
 			</MkButton>
 		</div>
+		<div v-if="noteId" :class="$style.action">
+			<MkButton :small="true" inline @click="tweetExpanded = true">
+				<i class="ti ti-eye"></i> {{ i18n.ts.expandNote }}
+			</MkButton>
+		</div>
 		<div v-if="!playerEnabled && player.url" :class="$style.action">
 			<MkButton :small="true" inline @click="playerEnabled = true">
 				<i class="ti ti-player-play"></i> {{ i18n.ts.enablePlayer }}
@@ -89,7 +104,9 @@ import { url as local } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { deviceKind } from '@/scripts/device-kind.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkButton from '@/components/MkButton.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import { versatileLang } from '@@/js/intl-const.js';
 import { transformPlayerUrl } from '@/scripts/player-url-transform.js';
 import { defaultStore } from '@/store.js';
@@ -127,7 +144,8 @@ const player = ref({
 } as SummalyResult['player']);
 const playerEnabled = ref(false);
 const tweetId = ref<string | null>(null);
-const tweetExpanded = ref(props.detail);
+const noteId = ref<string | null>(null);
+const tweetExpanded = ref(props.detail); // noteと兼用
 const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
 const tweetHeight = ref(150);
 const unknownUrl = ref(false);
@@ -144,6 +162,17 @@ if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twi
 	if (m) tweetId.value = m[1];
 }
 
+if (self && requestUrl.pathname.startsWith('/notes/')) {
+	const m = requestUrl.pathname.match(/^\/notes\/(\w+)$/);
+	if (m) noteId.value = m[1];
+}
+
+function getNote(id: string) {
+	return misskeyApi('notes/show', {
+		noteId: noteId.value,
+	});
+}
+
 if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
 	requestUrl.hostname = 'www.youtube.com';
 }
@@ -330,6 +359,17 @@ onUnmounted(() => {
 	margin-top: 6px;
 }
 
+.quote {
+	padding: 8px 0;
+}
+
+.quoteNote {
+	padding: 16px;
+	border: dashed 1px var(--MI_THEME-renote);
+	border-radius: 8px;
+	overflow: clip;
+}
+
 @container (max-width: 400px) {
 	.link {
 		font-size: 12px;

From 363c20a249eb7913934f2fdb7b46a207681bd187 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:25:16 +0900
Subject: [PATCH 2/4] Update MkUrlPreview.vue

---
 packages/frontend/src/components/MkUrlPreview.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 988c5741302..7b6c4877870 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 <template v-else-if="noteId && tweetExpanded">
 	<div :class="$style.quote">
-		<MkNoteSimple :note="getNote(noteId)" :class="$style.quoteNote"/>
+		<MkNoteSimple :note="noteRecord.value[noteId]" :class="$style.quoteNote"/>
 	</div>
 	<div :class="$style.action">
 		<MkButton :small="true" inline @click="tweetExpanded = false">
@@ -81,7 +81,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkButton>
 		</div>
 		<div v-if="noteId" :class="$style.action">
-			<MkButton :small="true" inline @click="tweetExpanded = true">
+			<MkButton :small="true" inline @click="onExpandNote()">
 				<i class="ti ti-eye"></i> {{ i18n.ts.expandNote }}
 			</MkButton>
 		</div>
@@ -99,6 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import type { summaly } from '@misskey-dev/summaly';
 import { url as local } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
@@ -145,6 +146,7 @@ const player = ref({
 const playerEnabled = ref(false);
 const tweetId = ref<string | null>(null);
 const noteId = ref<string | null>(null);
+const noteRecord = ref<Record<string, Misskey.entities.Note>>({});
 const tweetExpanded = ref(props.detail); // noteと兼用
 const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
 const tweetHeight = ref(150);
@@ -167,10 +169,11 @@ if (self && requestUrl.pathname.startsWith('/notes/')) {
 	if (m) noteId.value = m[1];
 }
 
-function getNote(id: string) {
-	return misskeyApi('notes/show', {
+function onExpandNote() {
+	noteRecord[noteId] = misskeyApi('notes/show', {
 		noteId: noteId.value,
 	});
+	tweetExpanded.value = true;
 }
 
 if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {

From 3de9af27ddf448601fd69b7ab07a18d7e4d6a4da Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:40:28 +0900
Subject: [PATCH 3/4] fix

---
 packages/frontend/src/components/MkUrlPreview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 7b6c4877870..d2225a2c123 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -170,7 +170,7 @@ if (self && requestUrl.pathname.startsWith('/notes/')) {
 }
 
 function onExpandNote() {
-	noteRecord[noteId] = misskeyApi('notes/show', {
+	noteRecord.value[noteId.value] = misskeyApi('notes/show', {
 		noteId: noteId.value,
 	});
 	tweetExpanded.value = true;

From b2b85ad6dab96edc49eb4d80342ef2b7be00d1de Mon Sep 17 00:00:00 2001
From: FineArchs <cicada1003@gmail.com>
Date: Thu, 10 Oct 2024 17:25:44 +0900
Subject: [PATCH 4/4] fix

---
 packages/frontend/src/components/MkUrlPreview.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index d2225a2c123..839fe7c62b7 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 <template v-else-if="noteId && tweetExpanded">
 	<div :class="$style.quote">
-		<MkNoteSimple :note="noteRecord.value[noteId]" :class="$style.quoteNote"/>
+		<MkNoteSimple :note="noteRecord[noteId]" :class="$style.quoteNote"/>
 	</div>
 	<div :class="$style.action">
 		<MkButton :small="true" inline @click="tweetExpanded = false">
@@ -169,8 +169,8 @@ if (self && requestUrl.pathname.startsWith('/notes/')) {
 	if (m) noteId.value = m[1];
 }
 
-function onExpandNote() {
-	noteRecord.value[noteId.value] = misskeyApi('notes/show', {
+async function onExpandNote() {
+	noteRecord.value[noteId.value] = await misskeyApi('notes/show', {
 		noteId: noteId.value,
 	});
 	tweetExpanded.value = true;