enhance(frontend): 相手がチャットを読む前なら「送信済み」と表示するように

CHANGELOG_CHERRYPICK.md

@@ -83,6 +83,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Enhance: 로컬 유저만 그룹에 초대할 수 있도록
 - Enhance: 노트를 게시한 방식에 따라 토스트 알림의 아이콘과 내용이 다르게 표시되도록
 - Enhance: 'Enter 키를 눌러 보내기' 옵션에 관계없이 채팅에서 Enter 키를 눌러 전송하도록 강제함
+- Enhance: 상대방이 채팅을 읽기 전이면 '보냄'으로 표시하도록
 - Fix: (Friendly) 흐림 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제
 - Fix: (Friendly) 위젯 버튼에서 'UI 애니메이션 줄이기' 옵션이 적용되지 않는 문제
 - Fix: (Friendly) 스크롤을 해도 위젯 버튼이 숨겨지지 않는 문제

locales/en-US.yml

@@ -317,6 +317,7 @@ uploadFromUrlRequested: "Upload requested"
 uploadFromUrlMayTakeTime: "It may take some time until the upload is complete."
 explore: "Explore"
 messageRead: "Read"
+messageSend: "Send"
 noMoreHistory: "There is no further history"
 startMessaging: "Start a new chat"
 nUsersRead: "read by {n}"

locales/index.d.ts

@@ -320,6 +320,7 @@ export interface Locale {
     "uploadFromUrlMayTakeTime": string;
     "explore": string;
     "messageRead": string;
+    "messageSend": string;
     "noMoreHistory": string;
     "startMessaging": string;
     "nUsersRead": string;

locales/ja-JP.yml

@@ -317,6 +317,7 @@ uploadFromUrlRequested: "アップロードをリクエストしました"
 uploadFromUrlMayTakeTime: "アップロードが完了するまで時間がかかる場合があります。"
 explore: "みつける"
 messageRead: "既読"
+messageSend: "送信済み"
 noMoreHistory: "これより過去の履歴はありません"
 startMessaging: "チャットを開始"
 nUsersRead: "{n}人が読みました"

locales/ko-KR.yml

@@ -317,6 +317,7 @@ uploadFromUrlRequested: "업로드를 요청했어요"
 uploadFromUrlMayTakeTime: "업로드가 완료될 때까지 약간의 시간이 필요할 수 있어요."
 explore: "발견하기"
 messageRead: "읽음"
+messageSend: "보냄"
 noMoreHistory: "타임머신이 더 이상은 돌아갈 수 없대요!"
 startMessaging: "대화 시작하기"
 nUsersRead: "{n}명이 읽음"

packages/frontend/src/pages/messaging/messaging-room.message.vue

@@ -27,13 +27,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div></div>
 		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
 		<footer>
-			<template v-if="isGroup">
-				<span v-if="message.reads.length > 0" class="read">{{ i18n.ts.messageRead }} {{ message.reads.length }}</span>
-			</template>
-			<template v-else>
-				<span v-if="isMe && message.isRead" class="read">{{ i18n.ts.messageRead }}</span>
-			</template>
 			<MkTime :time="message.createdAt"/>
+			<template v-if="isGroup">
+				<span v-if="message.reads.length > 0" class="read"><span style="margin-right: 4px;">•</span>{{ i18n.ts.messageRead }} {{ message.reads.length }}</span>
+			</template>
+			<template v-else-if="isMe">
+				<span v-if="!message.isRead" class="read"><span style="margin-right: 4px;">•</span>{{ i18n.ts.messageSend }}</span>
+				<span v-else class="read"><span style="margin-right: 4px;">•</span>{{ i18n.ts.messageRead }}</span>
+			</template>
 			<template v-if="message.is_edited"><i class="ti ti-pencil"></i></template>
 		</footer>
 	</div>
@@ -209,7 +210,7 @@ function del(): void {
 			font-size: 0.65em;
 
 			> .read {
-				margin: 0 8px;
+				margin: 0 4px;
 			}
 
 			> i {