noteコンポーネントを二つに分けたり

src/client/components/note.vue

@@ -8,7 +8,6 @@
 	v-hotkey="keymap"
 	v-size="{ max: [500, 450, 350, 300] }"
 >
-	<XSub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
 	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
 	<div class="info" v-if="pinned"><Fa :icon="faThumbtack"/> {{ $ts.pinnedNote }}</div>
 	<div class="info" v-if="appearNote._prId_"><Fa :icon="faBullhorn"/> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <Fa :icon="faTimes"/></button></div>
@@ -57,7 +56,7 @@
 						<XMediaList :media-list="appearNote.files"/>
 					</div>
 					<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
-					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
+					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="false" class="url-preview"/>
 					<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
 					<button v-if="collapsed" class="fade _button" @click="collapsed = false">
 						<span>{{ $ts.showMore }}</span>
@@ -90,7 +89,6 @@
 			</footer>
 		</div>
 	</article>
-	<XSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
 <div v-else class="_panel muted" @click="muted = false">
 	<I18n :src="$ts.userSaysSomething" tag="small">
@@ -157,11 +155,6 @@ export default defineComponent({
 			type: Object,
 			required: true
 		},
-		detail: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
 		pinned: {
 			type: Boolean,
 			required: false,
@@ -174,7 +167,6 @@ export default defineComponent({
 	data() {
 		return {
 			connection: null,
-			conversation: [],
 			replies: [],
 			showContent: false,
 			collapsed: false,
@@ -277,7 +269,7 @@ export default defineComponent({
 			this.connection = os.stream;
 		}
 
-		this.collapsed = !this.detail && this.appearNote.cw == null && this.appearNote.text && (
+		this.collapsed = this.appearNote.cw == null && this.appearNote.text && (
 			(this.appearNote.text.split('\n').length > 9) ||
 			(this.appearNote.text.length > 500)
 		);
@@ -291,23 +283,6 @@ export default defineComponent({
 			}
 			this.$emit('update:note', Object.freeze(result));
 		}
-
-		if (this.detail) {
-			os.api('notes/children', {
-				noteId: this.appearNote.id,
-				limit: 30
-			}).then(replies => {
-				this.replies = replies;
-			});
-
-			if (this.appearNote.replyId) {
-				os.api('notes/conversation', {
-					noteId: this.appearNote.replyId
-				}).then(conversation => {
-					this.conversation = conversation.reverse();
-				});
-			}
-		}
 	},
 
 	mounted() {
@@ -951,10 +926,6 @@ export default defineComponent({
 		padding-bottom: 0;
 	}
 
-	> .reply-to-more {
-		opacity: 0.7;
-	}
-
 	> .renote {
 		display: flex;
 		align-items: center;

src/client/components/notes.vue

@@ -15,7 +15,7 @@
 	</div>
 
 	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
-		<XNote :note="note" @update:note="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
+		<XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
 	</XList>
 
 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
@@ -55,12 +55,6 @@ export default defineComponent({
 			required: true
 		},
 
-		detail: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-
 		prop: {
 			type: String,
 			required: false

src/client/components/url-preview.vue

@@ -243,7 +243,7 @@ export default defineComponent({
 		display: block;
 		font-size: 14px;
 		box-shadow: 0 0 0 1px var(--divider);
-		border-radius: 6px;
+		border-radius: 8px;
 		overflow: hidden;
 
 		&:hover {

src/client/pages/note.vue

@@ -2,14 +2,14 @@
 <div class="fcuexfpr">
 	<div v-if="note" class="note">
 		<div class="_section" v-if="showNext">
-			<XNotes class="_content" :pagination="next"/>
+			<XNotes class="_content _noGap_" :pagination="next"/>
 		</div>
 
 		<div class="_section main">
 			<MkButton v-if="!showNext && hasNext" class="load next _content" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
 			<div class="_content _vMargin">
 				<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_vMargin"/>
-				<XNote v-model:note="note" :key="note.id" :detail="true" class="_vMargin"/>
+				<XNoteDetailed v-model:note="note" :key="note.id" class="_vMargin"/>
 			</div>
 			<div class="_content clips _vMargin" v-if="clips && clips.length > 0">
 				<div class="title">{{ $ts.clip }}</div>
@@ -25,7 +25,7 @@
 		</div>
 
 		<div class="_section" v-if="showPrev">
-			<XNotes class="_content" :pagination="prev"/>
+			<XNotes class="_content _noGap_" :pagination="prev"/>
 		</div>
 	</div>
 
@@ -39,6 +39,7 @@
 import { computed, defineComponent } from 'vue';
 import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import XNote from '@/components/note.vue';
+import XNoteDetailed from '@/components/note-detailed.vue';
 import XNotes from '@/components/notes.vue';
 import MkRemoteCaution from '@/components/remote-caution.vue';
 import MkButton from '@/components/ui/button.vue';
@@ -47,6 +48,7 @@ import * as os from '@/os';
 export default defineComponent({
 	components: {
 		XNote,
+		XNoteDetailed,
 		XNotes,
 		MkRemoteCaution,
 		MkButton,