enhance(client): チャットルームリストページのデザインを改善

CHANGELOG_CHERRYPICK.md

@@ -59,6 +59,7 @@
 - 서버 통계 위젯의 원 그래프 디자인 개선
 - 새로운 서버 통계 위젯 추가
 - 알림 기본 정렬을 수직으로 변경
+- 채팅방 목록 페이지 디자인 개선
 - Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제

packages/frontend/assets/unread.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-	 y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<circle fill="#3AA2DC" cx="16.5" cy="16.5" r="6"/>
-</svg>

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

@@ -1,39 +1,38 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
+	<MkSpacer :contentMax="800">
-		<div class="yweeujhr">
+		<div>
-			<MkButton primary class="start" @click="start"><i class="ti ti-plus"></i> {{ i18n.ts.startMessaging }}</MkButton>
+			<div v-if="messages.length > 0">
-
-			<div v-if="messages.length > 0" class="history">
 				<MkA
 					v-for="(message, i) in messages"
 					:key="message.id"
 					v-anim="i"
-					class="message _panel"
+					class="_panel"
-					:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
+					:class="$style.message"
 					:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
 					:data-index="i"
 				>
 					<div>
-						<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" indicator link preview/>
+						<span v-if="!(isMe(message) || (message.groupId ? message.reads.includes($i.id) : message.isRead))" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
+						<MkAvatar :class="$style.avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" indicator link preview/>
 						<header v-if="message.groupId">
-							<span class="name">{{ message.group.name }}</span>
+							<span :class="$style.name">{{ message.group.name }}</span>
-							<MkTime :time="message.createdAt" class="time"/>
+							<MkTime :time="message.createdAt" :class="$style.time"/>
 						</header>
 						<header v-else>
-							<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
+							<span :class="$style.name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
-							<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
+							<span :class="$style.username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
-							<MkTime :time="message.createdAt" class="time"/>
+							<MkTime :time="message.createdAt" :class="$style.time"/>
 						</header>
-						<div class="body">
+						<div>
-							<p class="text"><span v-if="isMe(message)" class="me">{{ i18n.ts.you }}:</span>{{ message.text }}</p>
+							<p :class="$style.text"><span v-if="isMe(message)" :class="$style.me">{{ i18n.ts.you }}:</span>{{ message.text }}</p>
 						</div>
 					</div>
 				</MkA>
 			</div>
 			<div v-if="!fetching && messages.length == 0" class="_fullinfo">
-				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost" alt=""/>
 				<div>{{ i18n.ts.noHistory }}</div>
 			</div>
 			<MkLoading v-if="fetching"/>
@@ -45,7 +44,6 @@
 <script lang="ts" setup>
 import { markRaw, onMounted, onUnmounted } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
-import MkButton from '@/components/MkButton.vue';
 import { acct } from '@/filters/user';
 import * as os from '@/os';
 import { useStream } from '@/stream';
@@ -170,144 +168,112 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.yweeujhr {
+.message {
+	display: block;
+	text-decoration: none !important;
+	margin-bottom: var(--margin);
 
-	> .start {
+	* {
-		margin: 0 auto var(--margin) auto;
+		pointer-events: none;
+		user-select: none;
 	}
 
-	> .history {
+	&:hover {
-		> .message {
+		.avatar {
-			display: block;
+			filter: saturate(200%);
-			text-decoration: none;
-			margin-bottom: var(--margin);
-
-			* {
-				pointer-events: none;
-				user-select: none;
-			}
-
-			&:hover {
-				.avatar {
-					filter: saturate(200%);
-				}
-			}
-
-			&:active {
-			}
-
-			&.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;
-					}
-				}
-			}
 		}
 	}
+
+	&: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;
+		}
+	}
+}
+
+.indicator {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	color: var(--indicator);
+	font-size: 8px;
+}
+
+.name {
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: bold;
+	transition: all 0.1s ease;
+}
+
+.username {
+	margin: 0 8px;
+}
+
+.time {
+	margin: 0 0 0 auto;
+	font-size: .85em;
+}
+
+.avatar {
+	float: left;
+	width: 42px;
+	height: 42px;
+	margin: 0 16px 0 0;
+	border-radius: 8px;
+	transition: all 0.1s ease;
+}
+
+.text {
+	display: block;
+	margin: 0 0 0 0;
+	padding: 0;
+	overflow: hidden;
+	overflow-wrap: break-word;
+	color: var(--faceText);
+}
+
+.me {
+	opacity: 0.7;
+}
+
+.image {
+	display: block;
+	max-width: 100%;
+	max-height: 512px;
 }
 
 @container (max-width: 400px) {
-	.yweeujhr {
+	.message {
-		> .history {
+		> div {
-			> .message {
+			padding: 16px;
-				&:not(.isMe):not(.isRead) {
+			font-size: 0.9em;
-					> div {
-						background-image: none;
-						border-left: solid 4px #3aa2dc;
-					}
-				}
-
-				> div {
-					padding: 16px;
-					font-size: 0.9em;
-
-					> .avatar {
-						margin: 0 12px 0 0;
-					}
-				}
-			}
 		}
 	}
+
+	.avatar {
+		margin: 0 12px 0 0;
+	}
 }
 </style>