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

locales/index.d.ts

@@ -5614,6 +5614,12 @@ export interface Locale extends ILocale {
          * ナビゲーションバーに副ボタンを表示
          */
         "showNavbarSubButtons": string;
+        "_chat": {
+            /**
+             * 送信者の名前を表示
+             */
+            "showSenderName": string;
+        };
     };
     "_preferencesProfile": {
         /**

locales/ja-JP.yml

@@ -1405,6 +1405,9 @@ _settings:
   makeEveryTextElementsSelectable_description: "有効にすると、一部のシチュエーションでのユーザビリティが低下する場合があります。"
   showNavbarSubButtons: "ナビゲーションバーに副ボタンを表示"
 
+  _chat:
+    showSenderName: "送信者の名前を表示"
+
 _preferencesProfile:
   profileName: "プロファイル名"
   profileNameDescription: "このデバイスを識別する名前を設定してください。"

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),
 	},

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);

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,

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'],
 					},