feat(client): Implement threaded replies

Resolve #2113
Resolve #5819

src/client/components/note.sub.vue

@@ -1,7 +1,8 @@
 <template>
-<div class="wrpstxzv" v-size="[{ max: 450 }]">
+<div class="wrpstxzv" :class="{ children }" v-size="[{ max: 450 }]">
-	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
+		<mk-avatar class="avatar" :user="note.user"/>
+		<div class="body">
 			<x-note-header class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
@@ -14,6 +15,8 @@
 			</div>
 		</div>
 	</div>
+	<x-sub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :children="true"/>
+</div>
 </template>
 
 <script lang="ts">
@@ -23,6 +26,8 @@ import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
 
 export default Vue.extend({
+	name: 'x-sub',
+
 	components: {
 		XNoteHeader,
 		XSubNoteContent,
@@ -34,6 +39,16 @@ export default Vue.extend({
 			type: Object,
 			required: true
 		},
+		detail: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		children: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		// TODO
 		truncate: {
 			type: Boolean,
@@ -41,23 +56,28 @@ export default Vue.extend({
 		}
 	},
 
-	inject: {
-		narrow: {
-			default: false
-		}
-	},
-
 	data() {
 		return {
-			showContent: false
+			showContent: false,
+			replies: [],
 		};
+	},
+
+	created() {
+		if (this.detail) {
+			this.$root.api('notes/children', {
+				noteId: this.note.id,
+				limit: 5
+			}).then(replies => {
+				this.replies = replies;
+			});
 		}
+	},
 });
 </script>
 
 <style lang="scss" scoped>
 .wrpstxzv {
-	display: flex;
 	padding: 16px 32px;
 	font-size: 0.9em;
 
@@ -65,6 +85,18 @@ export default Vue.extend({
 		padding: 14px 16px;
 	}
 
+	&.children {
+		padding: 10px 0 0 16px;
+		font-size: 1em;
+
+		&.max-width_450px {
+			padding: 10px 0 0 8px;
+		}
+	}
+
+	> .main {
+		display: flex;
+
 		> .avatar {
 			flex-shrink: 0;
 			display: block;
@@ -74,7 +106,7 @@ export default Vue.extend({
 			border-radius: 8px;
 		}
 
-	> .main {
+		> .body {
 			flex: 1;
 			min-width: 0;
 
@@ -104,4 +136,10 @@ export default Vue.extend({
 			}
 		}
 	}
+
+	> .reply {
+		border-left: solid 1px var(--divider);
+		margin-top: 10px;
+	}
+}
 </style>

src/client/components/note.vue

@@ -79,7 +79,7 @@
 			<div class="deleted" v-if="appearNote.deletedAt != null">{{ $t('deleted') }}</div>
 		</div>
 	</article>
-	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply"/>
+	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
 </template>