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

locales/index.d.ts

@@ -5358,6 +5358,18 @@ export interface Locale extends ILocale {
      * 通常これは自動で行われていますが、何らかの理由により上手く移行されなかった場合は手動で移行処理をトリガーできます。現在の設定情報は上書きされます。
      */
     "migrateOldSettings_description": string;
+    /**
+     * あなたはこのユーザーをブロックしています。
+     */
+    "youAreBlocking": string;
+    /**
+     * あなたはこのユーザーにブロックされています。
+     */
+    "youAreBlocked": string;
+    /**
+     * あなたはこのユーザーをミュートしています。
+     */
+    "youAreMuting": string;
     "_chat": {
         /**
          * まだメッセージはありません
@@ -5485,7 +5497,7 @@ export interface Locale extends ILocale {
          */
         "thisUserAllowsChatOnlyFromFollowers": string;
         /**
-         * このユーザーはフォローしているユーザーからのみチャットを受け付けています。
+         * このユーザーは、このユーザーがフォローしているユーザーからのみチャットを受け付けています。
          */
         "thisUserAllowsChatOnlyFromFollowing": string;
         /**

locales/ja-JP.yml

@@ -1335,6 +1335,9 @@ information: "情報"
 chat: "チャット"
 migrateOldSettings: "旧設定情報を移行"
 migrateOldSettings_description: "通常これは自動で行われていますが、何らかの理由により上手く移行されなかった場合は手動で移行処理をトリガーできます。現在の設定情報は上書きされます。"
+youAreBlocking: "あなたはこのユーザーをブロックしています。"
+youAreBlocked: "あなたはこのユーザーにブロックされています。"
+youAreMuting: "あなたはこのユーザーをミュートしています。"
 
 _chat:
   noMessagesYet: "まだメッセージはありません"
@@ -1368,7 +1371,7 @@ _chat:
   cannotChatWithTheUser_description: "チャットが使えない状態になっているか、相手がチャットを開放していません。"
   chatWithThisUser: "チャットする"
   thisUserAllowsChatOnlyFromFollowers: "このユーザーはフォロワーからのみチャットを受け付けています。"
-  thisUserAllowsChatOnlyFromFollowing: "このユーザーはフォローしているユーザーからのみチャットを受け付けています。"
+  thisUserAllowsChatOnlyFromFollowing: "このユーザーは、このユーザーがフォローしているユーザーからのみチャットを受け付けています。"
   thisUserAllowsChatOnlyFromMutualFollowing: "このユーザーは相互フォローのユーザーからのみチャットを受け付けています。"
   thisUserNotAllowedChatAnyone: "このユーザーは誰からもチャットを受け付けていません。"
   chatAllowedUsers: "チャットを許可する相手"

packages/frontend/src/components/MkFukidashi.vue

@@ -19,11 +19,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<path d="m188.19 87.657c-1.469 2.3218-3.9315 3.8312-6.667 4.0865-2.2309-1.7379-4.9781-2.6816-7.8061-2.6815h-5.1e-4v12.702h12.702v-5.1e-4c2e-5 -1.9998-0.47213-3.9713-1.378-5.754 2.0709-1.6834 3.2732-4.2102 3.273-6.8791-6e-5 -0.49375-0.0413-0.98662-0.1235-1.4735z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".33225" style="paint-order:stroke fill markers"/>
 			</g>
 		</svg>
-		<div :class="$style.content">
+		<div
+			:class="[$style.content, {
+				[$style.contentBgPanel]: contentBgPanel,
+				[$style.small]: small,
+			}]"
+		>
+			<div :class="$style.contentInner">
 				<slot></slot>
 			</div>
 		</div>
 	</div>
+</div>
 </template>
 
 <script setup lang="ts">
@@ -32,11 +39,15 @@ withDefaults(defineProps<{
 	negativeMargin?: boolean;
 	shadow?: boolean;
 	accented?: boolean;
+	contentBgPanel?: boolean;
+	small?: boolean;
 }>(), {
 	tail: 'right',
 	negativeMargin: false,
 	shadow: false,
 	accented: false,
+	contentBgPanel: false,
+	small: false,
 });
 </script>
 
@@ -85,6 +96,26 @@ withDefaults(defineProps<{
 .content {
 	position: relative;
 	padding: 10px 14px;
+
+	&.small {
+		padding: 6px 10px;
+	}
+
+	&.contentBgPanel::before {
+		content: '';
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		width: calc(100% - 4px);
+		height: calc(100% - 4px);
+		background: var(--MI_THEME-panel);
+		border-radius: calc(var(--fukidashi-radius) - 2px);
+	}
+}
+
+.contentInner {
+	position: relative;
+	z-index: 1;
 }
 
 .tail {

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

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="[$style.root, { [$style.isMe]: isMe }]">
-	<MkAvatar :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
+	<MkAvatar v-if="!isMe" :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">
+		<MkFukidashi :tail="isMe ? 'right' : 'left'" :accented="isMe" negativeMargin contentBgPanel small>
 			<div v-if="!message.isDeleted" :class="$style.content">
 				<Mfm
 					v-if="message.text"
@@ -204,10 +204,6 @@ function showMenu(ev: MouseEvent) {
 		flex-direction: row-reverse;
 		text-align: right;
 
-		.content {
-			color: var(--MI_THEME-fgOnAccent);
-		}
-
 		.footer {
 			flex-direction: row-reverse;
 		}
@@ -218,12 +214,14 @@ function showMenu(ev: MouseEvent) {
 	position: sticky;
 	top: calc(16px + var(--MI-stickyTop, 0px));
 	display: block;
-	width: 52px;
+	width: 32px;
-	height: 52px;
+	height: 32px;
 }
 
 .body {
+	padding-top: 4px;
 	margin: 0 12px;
+	box-sizing: border-box;
 }
 
 .header {
@@ -236,9 +234,6 @@ function showMenu(ev: MouseEvent) {
 	word-break: break-word;
 }
 
-.file {
-}
-
 .footer {
 	display: flex;
 	flex-direction: row;

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

@@ -116,7 +116,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

@@ -61,7 +61,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>
@@ -384,6 +384,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,