wip

packages/backend/src/server/api/endpoints/chat/messages/timeline.ts

@@ -75,6 +75,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 
 				const messages = await this.chatService.userTimeline(me.id, other.id, ps.sinceId, ps.untilId, ps.limit);
 
+				this.chatService.readUserChatMessage(me.id, other.id);
+
 				return await this.chatMessageEntityService.packLiteMany(messages);
 			}/* else if (ps.roomId != null) {
 				// Fetch recipient (room)

packages/frontend/src/components/MkPagination.vue

@@ -24,15 +24,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</slot>
 	</div>
 
-	<div v-else ref="rootEl">
+	<div v-else ref="rootEl" class="_gaps">
-		<div v-show="pagination.reversed && more" key="_more_" class="_margin">
+		<div v-show="pagination.reversed && more" key="_more_">
 			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMoreAhead">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
 		</div>
 		<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
-		<div v-show="!pagination.reversed && more" key="_more_" class="_margin">
+		<div v-show="!pagination.reversed && more" key="_more_">
 			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMore">
 				{{ i18n.ts.loadMore }}
 			</MkButton>

packages/frontend/src/pages/chat/home.vue

@@ -5,9 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <PageWithHeader :actions="headerActions" :tabs="headerTabs">
-	<MkSpacer :contentMax="800">
+	<MkSpacer :contentMax="700">
 		<div class="_gaps">
-			<MkButton primary :class="$style.start" @click="start"><i class="ti ti-plus"></i> {{ i18n.ts.startChat }}</MkButton>
+			<MkButton primary gradate :class="$style.start" @click="start"><i class="ti ti-plus"></i> {{ i18n.ts.startChat }}</MkButton>
 
 			<div v-if="history.length > 0" :class="$style.history">
 				<MkA
@@ -17,18 +17,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 					class="_panel"
 					:to="item.message.toRoomId ? `/chat/room/${item.message.toRoomId}` : `/chat/user/${item.other!.id}`"
 				>
-					<MkAvatar v-if="item.other" :class="$style.avatar" :user="item.other" indicator link preview/>
+					<MkAvatar v-if="item.other" :class="$style.messageAvatar" :user="item.other" indicator :preview="false"/>
-					<header v-if="item.message.room">
+					<div :class="$style.messageBody">
-						<span :class="$style.name">{{ item.message.room.name }}</span>
+						<header v-if="item.message.room" :class="$style.messageHeader">
-						<MkTime :time="item.message.createdAt" :class="$style.time"/>
+							<span :class="$style.messageHeaderName">{{ item.message.room.name }}</span>
+							<MkTime :time="item.message.createdAt" :class="$style.messageHeaderTime"/>
 						</header>
-					<header v-else>
+						<header v-else :class="$style.messageHeader">
-						<MkUserName :class="$style.name" :user="item.other!"/>
+							<MkUserName :class="$style.messageHeaderName" :user="item.other!"/>
-						<MkAcct :class="$style.username" :user="item.other!"/>
+							<MkAcct :class="$style.messageHeaderUsername" :user="item.other!"/>
-						<MkTime :time="item.message.createdAt" :class="$style.time"/>
+							<MkTime :time="item.message.createdAt" :class="$style.messageHeaderTime"/>
 						</header>
-					<div :class="$style.body">
+						<div :class="$style.messageBodyText"><span v-if="item.isMe" :class="$style.iSaid">{{ i18n.ts.you }}:</span>{{ item.message.text }}</div>
-						<p :class="$style.text"><span v-if="item.isMe" :class="$style.iSaid">{{ i18n.ts.you }}:</span>{{ item.message.text }}</p>
 					</div>
 				</MkA>
 			</div>
@@ -145,4 +145,75 @@ definePage(() => ({
 .start {
 	margin: 0 auto;
 }
+
+.message {
+	position: relative;
+	display: flex;
+	padding: 16px 24px;
+
+	&.isRead,
+	&.isMe {
+		opacity: 0.8;
+	}
+
+	&:not(.isMe):not(.isRead) {
+		&::before {
+			content: '';
+			position: absolute;
+			top: 8px;
+			right: 8px;
+			width: 8px;
+			height: 8px;
+			border-radius: 100%;
+			background-color: var(--MI_THEME-accent);
+		}
+	}
+}
+
+.messageAvatar {
+	width: 50px;
+	height: 50px;
+	margin: 0 16px 0 0;
+}
+
+.messageBody {
+	flex: 1;
+	min-width: 0;
+}
+
+.messageHeader {
+	display: flex;
+	align-items: center;
+	margin-bottom: 2px;
+	white-space: nowrap;
+	overflow: clip;
+}
+
+.messageHeaderName {
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 1em;
+	font-weight: bold;
+}
+
+.messageHeaderUsername {
+	margin: 0 8px;
+}
+
+.messageHeaderTime {
+	margin-left: auto;
+}
+
+.messageBodyText {
+	overflow: hidden;
+	overflow-wrap: break-word;
+	font-size: 1.1em;
+}
+
+.iSaid {
+	font-weight: bold;
+	margin-right: 0.5em;
+}
 </style>

packages/frontend/src/pages/chat/room.message.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="[$style.root, { [$style.isMe]: isMe }]">
-	<MkAvatar :class="$style.avatar" :user="user" link/>
+	<MkAvatar :class="$style.avatar" :user="user" link :preview="false"/>
 	<div :class="$style.body">
 		<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
 			<div v-if="!message.isDeleted" :class="$style.content">