fix(frontend): チャットのデザイン調整 (#15708)

* fix(frontend): チャットのデザイン調整

* remove unused locales

* 🎨

* Update XMessage.vue

* Update XMessage.vue

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

locales/index.d.ts

@@ -5509,7 +5509,7 @@ export interface Locale extends ILocale {
          */
         "thisUserAllowsChatOnlyFromFollowers": string;
         /**
-         * このユーザーはフォローしているユーザーからのみチャットを受け付けています。
+         * このユーザーは、このユーザーがフォローしているユーザーからのみチャットを受け付けています。
          */
         "thisUserAllowsChatOnlyFromFollowing": string;
         /**

locales/ja-JP.yml

@@ -1374,7 +1374,7 @@ _chat:
   cannotChatWithTheUser_description: "チャットが使えない状態になっているか、相手がチャットを開放していません。"
   chatWithThisUser: "チャットする"
   thisUserAllowsChatOnlyFromFollowers: "このユーザーはフォロワーからのみチャットを受け付けています。"
-  thisUserAllowsChatOnlyFromFollowing: "このユーザーはフォローしているユーザーからのみチャットを受け付けています。"
+  thisUserAllowsChatOnlyFromFollowing: "このユーザーは、このユーザーがフォローしているユーザーからのみチャットを受け付けています。"
   thisUserAllowsChatOnlyFromMutualFollowing: "このユーザーは相互フォローのユーザーからのみチャットを受け付けています。"
   thisUserNotAllowedChatAnyone: "このユーザーは誰からもチャットを受け付けていません。"
   chatAllowedUsers: "チャットを許可する相手"

packages/frontend/src/components/MkFukidashi.vue

@@ -51,7 +51,7 @@ withDefaults(defineProps<{
 	padding-top: calc(var(--fukidashi-radius) * .13);
 
 	&.accented {
-		--fukidashi-bg: var(--MI_THEME-accent);
+		--fukidashi-bg: color-mix(in srgb, var(--MI_THEME-accent), var(--MI_THEME-panel) 85%);
 	}
 
 	&.shadow {
@@ -87,6 +87,12 @@ withDefaults(defineProps<{
 	padding: 10px 14px;
 }
 
+@container (max-width: 450px) {
+	.content {
+		padding: 8px 12px;
+	}
+}
+
 .tail {
 	position: absolute;
 	top: 0;

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

@@ -7,7 +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" @contextmenu.stop="onContextmenu">
-		<div v-if="!isMe && prefer.s['chat.showSenderName']" :class="$style.header"><MkUserName :user="message.fromUser"/></div>
+		<div :class="$style.header"><MkUserName v-if="!isMe && prefer.s['chat.showSenderName']" :user="message.fromUser"/></div>
 		<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
 			<div v-if="!message.isDeleted" :class="$style.content">
 				<Mfm
@@ -216,10 +216,6 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 		flex-direction: row-reverse;
 		text-align: right;
 
-		.content {
-			color: var(--MI_THEME-fgOnAccent);
-		}
-
 		.footer {
 			flex-direction: row-reverse;
 		}
@@ -230,8 +226,27 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 	position: sticky;
 	top: calc(16px + var(--MI-stickyTop, 0px));
 	display: block;
-	width: 52px;
+	width: 50px;
-	height: 52px;
+	height: 50px;
+}
+
+@container (max-width: 450px) {
+	.root {
+		&.isMe {
+			.avatar {
+				display: none;
+			}
+		}
+	}
+
+	.avatar {
+		width: 42px;
+		height: 42px;
+	}
+
+	.fukidashi {
+		font-size: 90%;
+	}
 }
 
 .body {
@@ -239,6 +254,7 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 }
 
 .header {
+	min-height: 4px; // fukidashiの位置調整も兼ねるため
 	font-size: 80%;
 }
 
@@ -252,9 +268,6 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 	word-break: break-word;
 }
 
-.file {
-}
-
 .footer {
 	display: flex;
 	flex-direction: row;

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

@@ -119,7 +119,8 @@ function start(ev: MouseEvent) {
 }
 
 async function startUser() {
-	os.selectUser().then(user => {
+	// TODO: localOnly は連合に対応したら消す
+	os.selectUser({ localOnly: true }).then(user => {
 		router.push(`/chat/user/${user.id}`);
 	});
 }

packages/frontend/src/pages/chat/room.info.vue

@@ -63,11 +63,11 @@ function save() {
 async function del() {
 	const { canceled } = await os.confirm({
 		type: 'warning',
-		text: i18n.ts.areYouSure,
+		text: i18n.tsx.deleteAreYouSure({ x: name_.value }),
 	});
 	if (canceled) return;
 
-	misskeyApi('chat/rooms/delete', {
+	await os.apiWithDialog('chat/rooms/delete', {
 		roomId: props.room.id,
 	});
 	router.push('/chat');
@@ -81,10 +81,6 @@ watch(isMuted, async () => {
 		mute: isMuted.value,
 	});
 });
-
-onMounted(async () => {
-
-});
 </script>
 
 <style lang="scss" module>

packages/frontend/src/pages/chat/room.members.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkUserCardMini :user="room.owner"/>
 	</MkA>
 
-	<hr>
+	<hr v-if="memberships.length > 0">
 
 	<div v-for="membership in memberships" :key="membership.id" :class="$style.membership">
 		<MkA :class="$style.membershipBody" :to="`${userPage(membership.user)}`">

packages/frontend/src/pages/chat/room.search.vue

@@ -9,20 +9,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 		v-model="searchQuery"
 		:placeholder="i18n.ts._chat.searchMessages"
 		type="search"
+		@enter="search()"
 	>
 		<template #prefix><i class="ti ti-search"></i></template>
 	</MkInput>
 
-	<MkButton v-if="searchQuery.length > 0" primary rounded @click="search">{{ i18n.ts.search }}</MkButton>
+	<MkButton primary rounded @click="search">{{ i18n.ts.search }}</MkButton>
 
 	<MkFoldableSection v-if="searched">
 		<template #header>{{ i18n.ts.searchResult }}</template>
 
-		<div class="_gaps_s">
+		<div v-if="searchResults.length > 0" class="_gaps_s">
 			<div v-for="message in searchResults" :key="message.id" :class="$style.searchResultItem">
 				<XMessage :message="message" :user="message.fromUser" :isSearchResult="true"/>
 			</div>
 		</div>
+		<div v-else class="_fullinfo">
+			<img :src="infoImageUrl" draggable="false"/>
+			<div>{{ i18n.ts.notFound }}</div>
+		</div>
 	</MkFoldableSection>
 </div>
 </template>
@@ -33,6 +38,7 @@ import * as Misskey from 'misskey-js';
 import XMessage from './XMessage.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
+import { infoImageUrl } from '@/instance.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import * as os from '@/os.js';
 import MkInput from '@/components/MkInput.vue';

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

@@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<Transition name="fade">
 					<div v-show="showIndicator" :class="$style.new">
 						<button class="_buttonPrimary" :class="$style.newButton" @click="onIndicatorClick">
-							<i class="fas ti-fw fa-arrow-circle-down" :class="$style.newIcon"></i>{{ i18n.ts.newMessageExists }}
+							<i class="fas ti-fw fa-arrow-circle-down" :class="$style.newIcon"></i>{{ i18n.ts._chat.newMessage }}
 						</button>
 					</div>
 				</Transition>
@@ -391,6 +391,7 @@ const headerActions = computed(() => [{
 
 definePage(computed(() => !initializing.value ? user.value ? {
 	userName: user,
+	title: user.value.name ?? user.value.username,
 	avatar: user,
 } : {
 	title: room.value?.name,