chat button in mobile bar

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.9.1",
+	"version": "12.119.0-calc.9.2",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/pages/messaging/messaging-room.message.vue

@@ -3,43 +3,30 @@
 	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
 	<div class="content">
 		<div class="balloon" :class="{ noText: message.text == null }">
-			<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
+			<button v-if="isMe" class="delete-button" :title="i18n.ts.delete" @click="del">
 				<img src="/client-assets/remove.png" alt="Delete"/>
 			</button>
 			<div v-if="!message.isDeleted" class="content">
 				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
 				<div v-if="message.file" class="file">
-					<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name" max-width="400px" style="border-radius: 5px"/>
+					<XMediaList v-if="message.file.type.split('/')[0] == 'image' || message.file.type.split('/')[0] == 'video'" :media-list="[message.file]" max-width="400px" style="border-radius: 5px"/>
-					<VuePlyr v-else-if="message.file.type.split('/')[0] == 'video'">
-						<video
-							:alt="message.file.name"
-							:download="message.file.url"
-							preload="none"
-							controls
-							@contextmenu.stop
-						>
-							<source
-								:src="message.file.url"
-							>
-						</video>
-					</VuePlyr>
 					<a v-else :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
 						<p>{{ message.file.name }}</p>
 					</a>
 				</div>
 			</div>
 			<div v-else class="content">
-				<p class="is-deleted">{{ $ts.deleted }}</p>
+				<p class="is-deleted">{{ i18n.ts.deleted }}</p>
 			</div>
 		</div>
 		<div></div>
 		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
 		<footer>
 			<template v-if="isGroup">
-				<span v-if="message.reads.length > 0" class="read">{{ $ts.messageRead }} {{ message.reads.length }}</span>
+				<span v-if="message.reads.length > 0" class="read">{{ i18n.ts.messageRead }} {{ message.reads.length }}</span>
 			</template>
 			<template v-else>
-				<span v-if="isMe && message.isRead" class="read">{{ $ts.messageRead }}</span>
+				<span v-if="isMe && message.isRead" class="read">{{ i18n.ts.messageRead }}</span>
 			</template>
 			<MkTime :time="message.createdAt"/>
 			<template v-if="message.is_edited"><i class="ph-pencil-bold ph-lg"></i></template>
@@ -53,11 +40,12 @@ import { } from 'vue';
 import * as mfm from 'mfm-js';
 import VuePlyr from 'vue-plyr';
 import type * as Misskey from 'misskey-js';
-import XImage from '@/components/MkMediaImage.vue';
+import XMediaList from '@/components/MkMediaList.vue';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	message: Misskey.entities.MessagingMessage;

packages/client/src/ui/_common_/navbar-for-mobile.vue

@@ -45,7 +45,6 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
 import { host } from '@/config';
-import { search } from '@/scripts/search';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { openAccountMenu as openAccountMenu_ } from '@/account';

packages/client/src/ui/universal.vue

@@ -19,10 +19,31 @@
 	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ph-stack-bold ph-lg"></i></button>
 
 	<div v-if="isMobile" class="buttons">
-		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ph-list-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle-fill"></i></span></button>
+		<button class="button nav _button" @click="drawerMenuShowing = true">
-		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="ph-house-bold ph-lg"></i></button>
+			<div class="button-wrapper">
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ph-bell-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle-fill"></i></span></button>
+				<i class="ph-list-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle-fill"></i></span>
-		<button class="button widget _button" @click="widgetsShowing = true"><i class="ph-stack-bold ph-lg"></i></button>
+			</div>
+		</button>
+		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')">
+			<div class="button-wrapper">
+				<i class="ph-house-bold ph-lg"></i>
+			</div>
+		</button>
+		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')">
+			<div class="button-wrapper">
+				<i class="ph-bell-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle-fill"></i></span>
+			</div>
+		</button>
+		<button class="button widget _button" @click="mainRouter.push('/my/messaging')">
+			<div class="button-wrapper">
+				<i class="ph-chats-teardrop-bold ph-lg"></i>
+			</div>
+		</button>
+		<button class="button widget _button" @click="widgetsShowing = true">
+			<div class="button-wrapper">
+				<i class="ph-stack-bold ph-lg"></i>
+			</div>
+		</button>
 	</div>
 
 	<button v-if="isMobile && mainRouter.currentRoute.value.name === 'index'" ref="postButton" class="postButton button post _button" @click="os.post()"><i class="ph-pencil-bold ph-lg"></i></button>
@@ -68,7 +89,6 @@ import { defaultStore } from '@/store';
 import { navbarItemDef } from '@/navbar';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
-import { Router } from '@/nirax';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
@@ -340,7 +360,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 			margin: auto;
 			height: 3.5rem;
 			border-radius: 8px;
-			/* background: var(--panel); */
 			background-position: center;
 			transition: background 0.6s;
 			color: var(--fg);
@@ -351,6 +370,14 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 				transition: background 0.1s;
 			}
 
+			> .button-wrapper:active {
+				background-color: var(--accentedBg);
+				width: 60%;
+				border-radius: 10px;
+				transform: translateY(-0.5em);
+				transition: all 0.2s;
+			}
+
 			&:not(:last-child) {
 				margin-right: 12px;
 			}