note-improvements (#9720)

Co-authored-by: Free <freeplay@duck.com>
Co-committed-by: Free <freeplay@duck.com>

packages/client/src/components/MkNoteDetailed.vue

@@ -301,7 +301,7 @@ if (appearNote.replyId) {
 	os.api('notes/conversation', {
 		noteId: appearNote.replyId,
 	}).then(res => {
-		conversation.value = res;
+		conversation.value = res.reverse();
 	});
 }
 

packages/client/src/components/MkNoteSub.vue

@@ -10,11 +10,13 @@
 			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
+					<i v-if="note.replyId" class="ph-arrow-bend-up-left ph-bold ph-lg reply-icon"></i>
+					<i v-if="note.renoteId != parentId" class="ph-quotes ph-bold ph-lg reply-icon"></i>
 					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content" @click="router.push(notePage(note))">
-					<MkSubNoteContent class="text" :note="note" :detailed="true"/>
+					<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="note.parentId"/>
 				</div>
 			</div>
 			<MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter>
@@ -22,10 +24,10 @@
 	</div>
 	<template v-if="conversation">
 		<template v-if="replies.length == 1">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth"/>
+			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="note.replyId"/>
 		</template>
 		<template v-else-if="depth < 5">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/>
+			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="note.replyId"/>
 		</template>
 		<div v-else-if="replies.length > 0" class="more">
 			<div class="line"></div>
@@ -52,6 +54,7 @@ const router = useRouter();
 const props = withDefaults(defineProps<{
 	note: misskey.entities.Note;
 	conversation?: misskey.entities.Note[];
+	parentId?;
 
 	// how many notes are in between this one and the note being viewed in detail
 	depth?: number;
@@ -115,7 +118,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 					margin: 0;
 					padding: 0;
 					overflow-wrap: break-word;
-
+					> .reply-icon {
+						margin-right: 6px;
+						color: var(--accent);
+					}
 					> .text {
 						margin-right: 8px;
 					}

packages/client/src/components/MkSubNoteContent.vue

@@ -2,16 +2,13 @@
 <div class="wrmlmaau" :class="{ collapsed, isLong }">
 	<div class="body">
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
-		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i></MkA>
+		<template v-if="!note.cw">
+			<i v-if="note.replyId" class="ph-arrow-bend-up-left ph-bold ph-lg reply-icon"></i>
+			<i v-if="note.renoteId != parentId" class="ph-quotes ph-bold ph-lg reply-icon"></i>
+		</template>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">{{ i18n.ts.quoteAttached }}: ...</MkA>
 	</div>
-	<template v-if="detailed">
-		<!-- <div v-if="note.renoteId" class="renote">
-			<XNoteSimple :note="note.renote"/>
-		</div> -->
-		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-	</template>
 	<div v-if="note.files.length > 0">
 		<XMediaList :media-list="note.files"/>
 	</div>
@@ -19,6 +16,12 @@
 		<summary>{{ i18n.ts.poll }}</summary>
 		<XPoll :note="note"/>
 	</div>
+	<template v-if="detailed">
+		<!-- <div v-if="note.renoteId" class="renote">
+			<XNoteSimple :note="note.renote"/>
+		</div> -->
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
+	</template>
 	<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
 		<span>{{ i18n.ts.showMore }}</span>
 	</button>
@@ -41,6 +44,7 @@ import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
+	parentId?;
 	detailed?: boolean;
 }>();
 
@@ -60,7 +64,7 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
 	overflow-wrap: break-word;
 	
 	> .body {
-		> .reply {
+		> .reply-icon {
 			margin-right: 6px;
 			color: var(--accent);
 		}