fix: improve the display of Notes in notifications

packages/client/src/components/MkNoteSub.vue

@@ -60,7 +60,7 @@
 				</div>
 				<footer ref="footerEl" class="footer" tabindex="-1">
 					<XReactionsViewer
-						v-if="enableEmojiReactions"
+						v-if="enableEmojiReactions && !hideEmojiViewer"
 						ref="reactionsViewer"
 						:note="appearNote"
 					/>
@@ -84,12 +84,7 @@
 						v-if="!enableEmojiReactions"
 						class="button"
 						:note="appearNote"
-						:count="
-							Object.values(appearNote.reactions).reduce(
-								(partialSum, val) => partialSum + val,
-								0,
-							)
-						"
+						:count="reactionCount"
 						:reacted="appearNote.myReaction != null"
 					/>
 					<XStarButton
@@ -112,6 +107,7 @@
 						@click.stop="react()"
 					>
 						<i :class="icon('ph-smiley')"></i>
+						<p class="count" v-if="reactionCount > 0 && hideEmojiViewer">{{reactionCount}}</p>
 					</button>
 					<button
 						v-if="
@@ -124,6 +120,7 @@
 						@click.stop="undoReact(appearNote)"
 					>
 						<i :class="icon('ph-minus')"></i>
+						<p class="count" v-if="reactionCount > 0 && hideEmojiViewer">{{reactionCount}}</p>
 					</button>
 					<XQuoteButton class="button" :note="appearNote" />
 					<button
@@ -250,6 +247,7 @@ const props = withDefaults(
 		// the actual reply level of this note within the conversation thread
 		replyLevel?: number;
 		autoAddReplies?: boolean;
+		hideEmojiViewer?: boolean;
 	}>(),
 	{
 		depth: 1,
@@ -339,6 +337,11 @@ const lang = localStorage.getItem("lang");
 const translateLang = localStorage.getItem("translateLang");
 const targetLang = (translateLang || lang || navigator.language)?.slice(0, 2);
 
+const reactionCount = computed(() => Object.values(appearNote.value.reactions).reduce(
+								(partialSum, val) => partialSum + val,
+								0,
+							))
+
 const isForeignLanguage: boolean =
 	defaultStore.state.detectPostLanguage &&
 	appearNote.value.text != null &&

packages/client/src/components/MkNotificationFolded.vue

@@ -54,31 +54,18 @@
 				class="time"
 			/>
 		</div>
-		<!-- <MkA
-				v-if="notification.type === 'reaction'"
-				class="text"
-				:to="notePage(notification.note)"
-				:title="getNoteSummary(notification.note)"
-			>
-				<Mfm
-					:text="getNoteSummary(notification.note)"
-					:plain="true"
-					:nowrap="!full"
-					:lang="notification.note.lang"
-					:custom-emojis="notification.note.emojis"
-				/>
-			</MkA> -->
-		<XNote
+		<!-- Since the reacted user list is actually shown above, the emoji-viewer is hidden to prevent visual noise -->
+		<XNoteSub
 			v-if="notification.type === 'renote'"
 			class="content"
-			:note="notification.note.renote"
-			:hide-footer="true"
+			:note="removeReplyTo(notification.note.renote)"
+			:hide-emoji-viewer="true"
 		/>
-		<XNote
+		<XNoteSub
 			v-else
 			class="content"
-			:note="notification.note"
-			:hide-footer="true"
+			:note="removeReplyTo(notification.note)"
+			:hide-emoji-viewer="true"
 		/>
 	</div>
 </template>
@@ -100,7 +87,8 @@ import type {
 	NotificationFolded,
 	ReactionNotificationFolded,
 } from "@/types/notification";
-import XNote from "@/components/MkNote.vue";
+import XNoteSub from "@/components/MkNoteSub.vue";
+import type { entities } from "firefish-js";
 
 const props = withDefaults(
 	defineProps<{
@@ -151,6 +139,16 @@ function getText() {
 	return res;
 }
 
+/**
+ * Delete reply-related properties that are not needed for notifications
+ */
+function removeReplyTo(note: entities.Note): entities.Note {
+	return Object.assign(note, {
+		replyId: null,
+		reply: undefined,
+	});
+}
+
 useTooltip(reactionRef, (showing) => {
 	const n = props.notification as ReactionNotificationFolded;
 	os.popup(