Collapse inline replied-to post to make it more compact

packages/client/src/components/MkNoteSub.vue

@@ -1,16 +1,16 @@
 <template>
-<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
+<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, supercompact }">
 	<div class="main">
 		<MkAvatar class="avatar" :user="note.user"/>
 		<div class="body">
-			<XNoteHeader class="header" :note="note" :mini="true"/>
+			<XNoteHeader :supercompact="supercompact" class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
 					<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">
-					<MkNoteSubNoteContent class="text" :note="note"/>
+					<MkNoteSubNoteContent class="text" :note="note" :supercompact="supercompact"/>
 				</div>
 			</div>
 		</div>
@@ -38,11 +38,13 @@ const props = withDefaults(defineProps<{
 	note: foundkey.entities.Note;
 	conversation?: foundkey.entities.Note[] | null;
 
+	supercompact?: boolean;
 	// how many notes are in between this one and the note being viewed in detail
 	depth?: number;
 }>(), {
 	conversation: null,
 	depth: 1,
+	supercompact: false,
 });
 
 let showContent = $ref(false);
@@ -67,6 +69,13 @@ const replies: foundkey.entities.Note[] = props.conversation?.filter(item => ite
 		}
 	}
 
+	&.supercompact {
+		> .main > .avatar {
+			width: 30px;
+			height: 30px;
+		}
+	}
+
 	> .main {
 		display: flex;
 
@@ -76,7 +85,7 @@ const replies: foundkey.entities.Note[] = props.conversation?.filter(item => ite
 			margin: 0 8px 0 0;
 			width: 38px;
 			height: 38px;
-			border-radius: 8px;
+			border-radius: calc(8% / 38);
 		}
 
 		> .body {

packages/client/src/components/note-header.vue

@@ -1,10 +1,11 @@
 <template>
 <header class="kkwtjztg">
 	<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
-		<MkUserName :user="note.user"/>
+		<MkUserName v-if="!supercompact" :user="note.user"/>
+		<div v-if="supercompact" class="username"><MkAcct :user="note.user"/></div>
 	</MkA>
 	<div v-if="note.user.isBot" class="is-bot">bot</div>
-	<div class="username"><MkAcct :user="note.user"/></div>
+	<div v-if="!supercompact" class="username"><MkAcct :user="note.user"/></div>
 	<div class="info">
 		<MkA class="created-at" :to="notePage(note)">
 			<MkTime :time="note.createdAt"/>
@@ -23,6 +24,7 @@ import { userPage } from '@/filters/user';
 defineProps<{
 	note: foundkey.entities.Note;
 	pinned?: boolean;
+	supercompact?: boolean;
 }>();
 </script>
 

packages/client/src/components/note.vue

@@ -9,7 +9,7 @@
 	:tabindex="!isDeleted ? '-1' : null"
 	:class="{ renote: isRenote }"
 >
-	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
+	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :supercompact="compactParent" class="reply-to"/>
 	<div v-if="pinned" class="info"><i class="fas fa-thumbtack"></i> {{ i18n.ts.pinnedNote }}</div>
 	<div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ i18n.ts.featured }}</div>
 	<div v-if="isRenote" class="renote">
@@ -131,6 +131,7 @@ import { useNoteCapture } from '@/scripts/use-note-capture';
 const props = defineProps<{
 	note: foundkey.entities.Note;
 	pinned?: boolean;
+	compactParent?: boolean;
 }>();
 
 const inChannel = inject('inChannel', null);

packages/client/src/components/notes.vue

@@ -10,7 +10,7 @@
 	<template #default="{ items: notes }">
 		<div class="giivymft" :class="{ noGap }">
 			<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" class="notes">
-				<XNote :key="note._featuredId_ || note.id" class="qtqtichx" :note="note"/>
+				<XNote :key="note._featuredId_ || note.id" class="qtqtichx" :note="note" :compact-parent="true"/>
 			</XList>
 		</div>
 	</template>

packages/client/src/components/notifications.vue

@@ -9,7 +9,7 @@
 
 	<template #default="{ items: notifications }">
 		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
-			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
+			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" :compact-parent="true"/>
 			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</XList>
 	</template>

packages/client/src/components/sub-note-content.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="wrmlmaau" :class="{ collapsed, isLong }">
+<div class="wrmlmaau" :class="{ collapsed, isLong, supercompact }">
 	<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="fas fa-reply"></i></MkA>
@@ -15,7 +15,7 @@
 		<XPoll :note="note"/>
 	</details>
 	<button v-if="isLong && collapsed" class="fade _button" @click="collapsed = false">
-		<span>{{ i18n.ts.showMore }}</span>
+		<span v-if="!supercompact">{{ i18n.ts.showMore }}</span>
 	</button>
 	<button v-if="isLong && !collapsed" class="showLess _button" @click="collapsed = true">
 		<span>{{ i18n.ts.showLess }}</span>
@@ -31,6 +31,7 @@ import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	note: foundkey.entities.Note;
+	supercompact?: boolean;
 }>();
 
 const isLong = (
@@ -39,7 +40,7 @@ const isLong = (
 		(props.note.text.length > 500)
 	)
 );
-const collapsed = $ref(props.note.cw == null && isLong);
+const collapsed = $ref(props.supercompact || (props.note.cw == null && isLong));
 </script>
 
 <style lang="scss" scoped>
@@ -64,6 +65,10 @@ const collapsed = $ref(props.note.cw == null && isLong);
 		max-height: 9em;
 		overflow: hidden;
 
+		&.supercompact {
+			max-height: 4.5em;
+		}
+
 		> .fade {
 			display: block;
 			position: absolute;