From f596a9ee3c12d8ca6ce4148554adb3fada23645f Mon Sep 17 00:00:00 2001
From: GrapeApple0 <84321396+GrapeApple0@users.noreply.github.com>
Date: Mon, 23 Oct 2023 07:53:00 +0000
Subject: [PATCH] =?UTF-8?q?=E3=83=8E=E3=83=BC=E3=83=88=E8=A9=B3=E7=B4=B0?=
 =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=81=A7=E5=BC=95=E7=94=A8=E4=B8=80=E8=A6=A7?=
 =?UTF-8?q?=E3=82=92=E3=83=AA=E3=83=97=E3=83=A9=E3=82=A4=E3=82=BF=E3=83=96?=
 =?UTF-8?q?=E3=81=A7=E3=81=AF=E3=81=AA=E3=81=8F=E5=BC=95=E7=94=A8=E3=82=BF?=
 =?UTF-8?q?=E3=83=96=E3=81=A7=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkNoteDetailed.vue         | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 4f40feffdd..e8a4c79ade 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -134,6 +134,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'replies' }]" @click="tab = 'replies'"><i class="ti ti-arrow-back-up"></i> {{ i18n.ts.replies }}</button>
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'renotes' }]" @click="tab = 'renotes'"><i class="ti ti-repeat"></i> {{ i18n.ts.renotes }}</button>
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'reactions' }]" @click="tab = 'reactions'"><i class="ti ti-icons"></i> {{ i18n.ts.reactions }}</button>
+		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'quote' }]" @click="tab = 'quote'"><i class="ti ti-quote"></i> {{ i18n.ts.quote }}</button>
 	</div>
 	<div>
 		<div v-if="tab === 'replies'" :class="$style.tab_replies">
@@ -170,6 +171,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</template>
 			</MkPagination>
 		</div>
+		<div v-if="tab === 'quote'" :class="$style.tab_quotes">
+			<div v-if="!quotesLoaded" style="padding: 16px">
+				<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.showMore }}</MkButton>
+			</div>
+			<MkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.quote" :detail="true"/>
+		</div>
 	</div>
 </div>
 <div v-else class="_panel" :class="$style.muted" @click="muted = false">
@@ -262,6 +269,7 @@ const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : n
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
 const conversation = ref<Misskey.entities.Note[]>([]);
 const replies = ref<Misskey.entities.Note[]>([]);
+const quotes = ref<Misskey.entities.Note[]>([]);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id);
 
 const keymap = {
@@ -507,6 +515,18 @@ function loadReplies() {
 	});
 }
 
+const quotesLoaded = ref(false);
+function loadQuotes() {
+	quotesLoaded.value = true;
+	os.api('notes/children', {
+		noteId: appearNote.id,
+		limit: 30,
+	}).then(res => {
+		res.filter(item => item.renoteId != null)
+		quotes.value = res;
+	});
+}
+
 const conversationLoaded = ref(false);
 function loadConversation() {
 	conversationLoaded.value = true;
@@ -720,6 +740,10 @@ function loadConversation() {
 	border-top: solid 0.5px var(--divider);
 }
 
+.quote:not(:first-child) {
+	border-top: solid 0.5px var(--divider);
+}
+
 .tabs {
 	border-top: solid 0.5px var(--divider);
 	border-bottom: solid 0.5px var(--divider);
@@ -745,6 +769,10 @@ function loadConversation() {
 	padding: 16px;
 }
 
+.tab_quotes {
+	padding: 16px;
+}
+
 .reactionTabs {
 	display: flex;
 	gap: 8px;