enhance(frontend): チャットの送信者名を表示できるように

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

@@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="[$style.root, { [$style.isMe]: isMe }]">
 	<MkAvatar :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
 	<div :class="$style.body">
+		<div v-if="!isMe && prefer.s['chat.showSenderName']" :class="$style.header"><MkUserName :user="message.fromUser"/></div>
 		<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
 			<div v-if="!message.isDeleted" :class="$style.content">
 				<Mfm v-if="message.text" ref="text" class="_selectable" :text="message.text" :i="$i"/>
@@ -191,6 +192,10 @@ function showMenu(ev: MouseEvent) {
 	margin: 0 12px;
 }
 
+.header {
+	font-size: 80%;
+}
+
 .content {
 	overflow: clip;
 	overflow-wrap: break-word;

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

@@ -52,7 +52,7 @@ const headerTabs = computed(() => [{
 
 definePage(() => ({
 	title: i18n.ts.chat + ' (beta)',
-	icon: 'ti ti-message',
+	icon: 'ti ti-messages',
 }));
 </script>
 

packages/frontend/src/pages/settings/preferences.vue

@@ -429,6 +429,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
+			<SearchMarker :keywords="['chat', 'messaging']">
+				<MkFolder>
+					<template #label><SearchLabel>{{ i18n.ts.chat }}</SearchLabel></template>
+					<template #icon><i class="ti ti-messages"></i></template>
+
+					<div class="_gaps_m">
+						<SearchMarker :keywords="['show', 'sender', 'name']">
+							<MkPreferenceContainer k="chat.showSenderName">
+								<MkSwitch v-model="chatShowSenderName">
+									<template #label><SearchLabel>{{ i18n.ts._settings._chat.showSenderName }}</SearchLabel></template>
+								</MkSwitch>
+							</MkPreferenceContainer>
+						</SearchMarker>
+					</div>
+				</MkFolder>
+			</SearchMarker>
+
 			<SearchMarker :keywords="['other']">
 				<MkFolder>
 					<template #label><SearchLabel>{{ i18n.ts.other }}</SearchLabel></template>
@@ -609,6 +626,7 @@ const emojiStyle = prefer.model('emojiStyle');
 const useBlurEffectForModal = prefer.model('useBlurEffectForModal');
 const useBlurEffect = prefer.model('useBlurEffect');
 const defaultFollowWithReplies = prefer.model('defaultFollowWithReplies');
+const chatShowSenderName = prefer.model('chat.showSenderName');
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);