Compact mentions to just heads inside notifications

packages/client/src/components/MkNoteSub.vue

@@ -10,7 +10,7 @@
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content">
-					<MkNoteSubNoteContent class="text" :note="note" :supercompact="supercompact && note.cw == null"/>
+					<MkNoteSubNoteContent class="text" :note="note" :supercompact="supercompact && note.cw == null" :compact-heads="compactHeads"/>
 				</div>
 			</div>
 		</div>
@@ -39,12 +39,14 @@ const props = withDefaults(defineProps<{
 	conversation?: foundkey.entities.Note[] | null;
 
 	supercompact?: boolean;
+	compactHeads?: boolean;
 	// how many notes are in between this one and the note being viewed in detail
 	depth?: number;
 }>(), {
 	conversation: null,
 	depth: 1,
 	supercompact: false,
+	compactHeads: false,
 });
 
 let showContent = $ref(false);

packages/client/src/components/global/misskey-flavored-markdown.vue

@@ -1,5 +1,5 @@
 <template>
-<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :custom-emojis="customEmojis" :is-note="isNote" class="havbbuyv" :class="{ nowrap }"/>
+<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :custom-emojis="customEmojis" :is-note="isNote" class="havbbuyv" :class="{ nowrap }" :compact-heads="compactHeads"/>
 </template>
 
 <script lang="ts" setup>
@@ -12,6 +12,7 @@ withDefaults(defineProps<{
 	author?: any;
 	customEmojis?: any;
 	isNote?: boolean;
+	compactHeads?: boolean;
 }>(), {
 	plain: false,
 	nowrap: false,

packages/client/src/components/mention.vue

@@ -1,7 +1,7 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
+<MkA v-if="url.startsWith('/')" v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe, [$style.compact]: compact }]" :to="url" :style="{ background: bgCss }">
-	<img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
+	<img :class="[$style.icon, { [$style.compact]: compact }]" :src="`/avatar/@${username}@${host}`" alt="">
-	<span class="main">
+	<span v-if="!compact" class="main">
 		<span class="username">@{{ username }}</span>
 		<span v-if="(host != localHost) || defaultStore.state.showFullAcct" :class="$style.mainHost">@{{ toUnicode(host) }}</span>
 	</span>
@@ -25,6 +25,7 @@ import { defaultStore } from '@/store';
 const props = defineProps<{
 	username: string;
 	host: string;
+	compact?: boolean;
 }>();
 
 const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
@@ -49,6 +50,10 @@ useCssModule();
 	border-radius: 999px;
 	color: var(--mention);
 
+	&.compact {
+		padding: 0;
+	}
+
 	&.isMe {
 		color: var(--mentionMe);
 	}
@@ -61,6 +66,14 @@ useCssModule();
 	margin: 0 0.2em 0 0;
 	vertical-align: bottom;
 	border-radius: 100%;
+
+	.compact > & {
+		margin: 0;
+		border: 0.1em solid var(--mention);
+	}
+	.compact.isMe > & {
+		border: 0.1em solid var(--mentionMe);
+	}
 }
 
 .mainHost {

packages/client/src/components/mfm.ts

@@ -42,6 +42,11 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		compactHeads: {
+			required: false,
+			type: Boolean,
+			default: false,
+		}
 	},
 
 	render() {
@@ -232,6 +237,7 @@ export default defineComponent({
 						key: Math.random(),
 						host: (token.props.host == null && this.author && this.author.host != null ? this.author.host : token.props.host) || host,
 						username: token.props.username,
+						compact: this.compactHeads,
 					})];
 				}
 

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" :supercompact="compactParent" class="reply-to"/>
+	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :supercompact="compactParent" :compact-heads="compactHeads" 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">
@@ -43,7 +43,7 @@
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
 					<div class="text">
 						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i ref="parentReply" class="fas fa-reply"></i></MkA>
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis" :compact-heads="compactHeads"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
@@ -134,6 +134,7 @@ const props = defineProps<{
 	note: foundkey.entities.Note;
 	pinned?: boolean;
 	compactParent?: boolean;
+	compactHeads?: boolean;
 }>();
 
 const inChannel = inject('inChannel', null);

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" :compact-parent="true"/>
+			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" :compact-parent="true" :compact-heads="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

@@ -3,7 +3,7 @@
 	<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 ref="parentReply" class="fas fa-reply"></i></MkA>
-		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis" :compact-heads="compactHeads"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
 	<details v-if="note.files.length > 0">
@@ -36,6 +36,7 @@ import { useTooltip } from '@/scripts/use-tooltip';
 const props = defineProps<{
 	note: foundkey.entities.Note;
 	supercompact?: boolean;
+	compactHeads?: boolean;
 }>();
 
 const isLong = (