me when the

packages/client/src/components/MkChatPreview.vue

@@ -0,0 +1,193 @@
+<template>
+<MkA
+	tabindex="-1"
+	class="rivslvers"
+	:class="{
+		isMe: isMe(message),
+		isRead: message.groupId ? message.reads.includes($i.id) : message.isRead,
+	}"
+	:to="
+		message.groupId
+			? `/my/messaging/group/${message.groupId}`
+			: `/my/messaging/${getAcct(
+				isMe(message) ? message.recipient : message.user
+			)}`
+	"
+>
+	<div>
+		<MkAvatar
+			class="avatar"
+			:user="
+				message.groupId
+					? message.user
+					: isMe(message)
+						? message.recipient
+						: message.user
+			"
+			:show-indicator="true"
+		/>
+		<header v-if="message.groupId">
+			<span class="name">{{ message.group.name }}</span>
+			<MkTime :time="message.createdAt" class="time"/>
+		</header>
+		<header v-else>
+			<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
+			<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
+			<MkTime :time="message.createdAt" class="time"/>
+		</header>
+		<div class="body">
+			<p class="text">
+				<span v-if="isMe(message)" class="me">{{ i18n.ts.you }}: </span>
+				<span v-if="message.text != null && message.text.length > 0">{{
+					message.text
+				}}</span>
+				<span v-else> 📎</span>
+			</p>
+		</div>
+	</div>
+</MkA>
+</template>
+
+<script lang="ts" setup>
+import * as Acct from 'misskey-js/built/acct';
+import { i18n } from '@/i18n';
+import { acct } from '@/filters/user';
+import { $i } from '@/account';
+
+const getAcct = Acct.toString;
+
+const props = defineProps<{
+	message: Record<string, any>;
+}>();
+
+function isMe(message): boolean {
+	return message.userId === $i?.id;
+}
+</script>
+
+<style lang="scss" scoped>
+.rivslvers {
+	> .message {
+		display: block;
+		text-decoration: none;
+		margin-bottom: var(--margin);
+
+		* {
+			pointer-events: none;
+			user-select: none;
+		}
+
+		&:hover {
+			.avatar {
+				filter: saturate(200%);
+			}
+		}
+
+		&.isRead,
+		&.isMe {
+			opacity: 0.8;
+		}
+
+		&:not(.isMe):not(.isRead) {
+			> div {
+				background-image: url("/client-assets/unread.svg");
+				background-repeat: no-repeat;
+				background-position: 0 center;
+			}
+		}
+
+		&:after {
+			content: "";
+			display: block;
+			clear: both;
+		}
+
+		> div {
+			padding: 20px 30px;
+
+			&:after {
+				content: "";
+				display: block;
+				clear: both;
+			}
+
+			> header {
+				display: flex;
+				align-items: center;
+				margin-bottom: 2px;
+				white-space: nowrap;
+				overflow: hidden;
+
+				> .name {
+					margin: 0;
+					padding: 0;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					font-size: 1em;
+					font-weight: bold;
+					transition: all 0.1s ease;
+				}
+
+				> .username {
+					margin: 0 8px;
+				}
+
+				> .time {
+					margin: 0 0 0 auto;
+				}
+			}
+
+			> .avatar {
+				float: left;
+				width: 54px;
+				height: 54px;
+				margin: 0 16px 0 0;
+				border-radius: 8px;
+				transition: all 0.1s ease;
+			}
+
+			> .body {
+				> .text {
+					display: block;
+					margin: 0 0 0 0;
+					padding: 0;
+					overflow: hidden;
+					overflow-wrap: break-word;
+					font-size: 1.1em;
+					color: var(--faceText);
+
+					.me {
+						opacity: 0.7;
+					}
+				}
+
+				> .image {
+					display: block;
+					max-width: 100%;
+					max-height: 512px;
+				}
+			}
+		}
+	}
+
+	&.max-width_400px {
+		> .message {
+			&:not(.isMe):not(.isRead) {
+				> div {
+					background-image: none;
+					border-left: solid 4px #3aa2dc;
+				}
+			}
+
+			> div {
+				padding: 16px;
+				font-size: 0.9em;
+
+				> .avatar {
+					margin: 0 12px 0 0;
+				}
+			}
+		}
+	}
+}
+</style>

packages/client/src/pages/messaging/index.vue

@@ -80,7 +80,6 @@ import { Virtual } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import MkChatPreview from '@/components/MkChatPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
-import { acct } from '@/filters/user';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { useRouter } from '@/router';
@@ -94,11 +93,23 @@ import 'swiper/scss/virtual';
 
 const router = useRouter();
 
-
 let messages = $ref([]);
 let connection = $ref(null);
 
-const getAcct = Acct.toString;
+const dmsPagination = {
+	endpoint: 'messaging/history' as const,
+	limit: 20,
+	params: {
+		group: false,
+	},
+};
+const groupsPagination = {
+	endpoint: 'messaging/history' as const,
+	limit: 10,
+	params: {
+		group: true,
+	},
+};
 
 const tabs = ['dms', 'groups'];
 let tab = $ref(tabs[0]);
@@ -136,10 +147,6 @@ function syncSlide(index) {
 	swiperRef.slideTo(index);
 }
 
-function isMe(message) {
-	return message.userId === $i.id;
-}
-
 function onMessage(message) {
 	if (message.recipientId) {
 		messages = messages.filter(m => !(