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

6 files changed, 50 insertions, 11 deletions

diff --git a/packages/frontend/src/navbar.ts b/packages/frontend/src/navbar.ts
index 894df83721..82e59bc7d6 100644
--- a/packages/frontend/src/navbar.ts
+++ b/packages/frontend/src/navbar.ts
@@ -112,7 +112,7 @@ export const navbarItemDef = reactive({
 	},
 	chat: {
 		title: i18n.ts.chat,
-		icon: 'ti ti-message',
+		icon: 'ti ti-messages',
 		to: '/chat',
 		indicated: computed(() => $i != null && $i.hasUnreadChatMessages),
 	},
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue
index 1e7f8e20ea..bc348c6fb1 100644
--- a/packages/frontend/src/pages/chat/XMessage.vue
+++ b/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;
diff --git a/packages/frontend/src/pages/chat/home.vue b/packages/frontend/src/pages/chat/home.vue
index c2b272a42d..9bb7235a64 100644
--- a/packages/frontend/src/pages/chat/home.vue
+++ b/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>
 
diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue
index f461ee9bc9..3a7d2cd490 100644
--- a/packages/frontend/src/pages/settings/preferences.vue
+++ b/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);
diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts
index 310c3856eb..801bb29e8c 100644
--- a/packages/frontend/src/preferences/def.ts
+++ b/packages/frontend/src/preferences/def.ts
@@ -374,6 +374,10 @@ export const PREF_DEF = {
 		default: 'left' as 'left' | 'right' | 'center',
 	},
 
+	'chat.showSenderName': {
+		default: false,
+	},
+
 	'game.dropAndFusion': {
 		default: {
 			bgmVolume: 0.25,
diff --git a/packages/frontend/src/utility/autogen/settings-search-index.ts b/packages/frontend/src/utility/autogen/settings-search-index.ts
index 316319bbf0..1e41dffe22 100644
--- a/packages/frontend/src/utility/autogen/settings-search-index.ts
+++ b/packages/frontend/src/utility/autogen/settings-search-index.ts
@@ -487,47 +487,59 @@ export const searchIndexes: SearchIndexItem[] = [
 				id: 'vPQPvmntL',
 				children: [
 					{
-						id: 'zoogNoJEO',
+						id: 'zZxyXHk3A',
+						label: i18n.ts._settings._chat.showSenderName,
+						keywords: ['show', 'sender', 'name'],
+					},
+				],
+				label: i18n.ts.chat,
+				keywords: ['chat', 'messaging'],
+			},
+			{
+				id: 'sCscGhMmH',
+				children: [
+					{
+						id: 'dLkRNHn3k',
 						label: i18n.ts.squareAvatars,
 						keywords: ['avatar', 'icon', 'square'],
 					},
 					{
-						id: '7ix3kvMyU',
+						id: 'BvooTWFW5',
 						label: i18n.ts.seasonalScreenEffect,
 						keywords: ['effect', 'show'],
 					},
 					{
-						id: '6RxgjmMLN',
+						id: 'yzbghkAq0',
 						label: i18n.ts.openImageInNewTab,
 						keywords: ['image', 'photo', 'picture', 'media', 'thumbnail', 'new', 'tab'],
 					},
 					{
-						id: 'alM3BcFzs',
+						id: 'aSbKFHbOy',
 						label: i18n.ts.withRepliesByDefaultForNewlyFollowed,
 						keywords: ['follow', 'replies'],
 					},
 					{
-						id: 'yzbghkAq0',
+						id: '89bn97UgY',
 						label: i18n.ts.whenServerDisconnected,
 						keywords: ['server', 'disconnect', 'reconnect', 'reload', 'streaming'],
 					},
 					{
-						id: '4SPd8QhYx',
+						id: 'hgf3rgdA6',
 						label: i18n.ts.numberOfPageCache,
 						keywords: ['cache', 'page'],
 					},
 					{
-						id: 'BoNg4LwOq',
+						id: '6FVdHPhhv',
 						label: i18n.ts.forceShowAds,
 						keywords: ['ad', 'show'],
 					},
 					{
-						id: 'hgf3rgdA6',
+						id: '5Bx5DAST1',
 						label: i18n.ts.hemisphere,
 						keywords: [],
 					},
 					{
-						id: 'nnj4DkjhP',
+						id: 'wv7Cwiwb1',
 						label: i18n.ts.additionalEmojiDictionary,
 						keywords: ['emoji', 'dictionary', 'additional', 'extra'],
 					},