Replaced messaging with search in the mobile view

packages/client/src/components/MkChatPreview.vue

@@ -1,200 +0,0 @@
-<template>
-	<MkA
-		class="rivslvers"
-		tabindex="-1"
-		:class="{
-			isMe: isMe(message),
-			isRead: message.groupId
-				? message.reads.includes($i?.id)
-				: message.isRead,
-		}"
-		:to="
-			message.groupId
-				? `/my/messaging/group/${message.groupId}`
-				: `/my/messaging/${getAcct(
-						isMe(message) ? message.recipient : message.user
-				  )}`
-		"
-	>
-		<div class="message _block">
-			<MkAvatar
-				class="avatar"
-				:user="
-					message.groupId
-						? message.user
-						: isMe(message)
-						? message.recipient
-						: message.user
-				"
-				:show-indicator="true"
-			/>
-			<header v-if="message.groupId">
-				<span class="name">{{ message.group.name }}</span>
-				<MkTime :time="message.createdAt" class="time" />
-			</header>
-			<header v-else>
-				<span class="name"
-					><MkUserName
-						:user="
-							isMe(message) ? message.recipient : message.user
-						"
-				/></span>
-				<span class="username"
-					>@{{
-						acct(isMe(message) ? message.recipient : message.user)
-					}}</span
-				>
-				<MkTime :time="message.createdAt" class="time" />
-			</header>
-			<div class="body">
-				<p class="text">
-					<span v-if="isMe(message)" class="me"
-						>{{ i18n.ts.you }}:
-					</span>
-					<Mfm
-						v-if="message.text != null && message.text.length > 0"
-						:text="message.text"
-					/>
-					<span v-else> 📎</span>
-				</p>
-			</div>
-		</div>
-	</MkA>
-</template>
-
-<script lang="ts" setup>
-import * as Acct from "calckey-js/built/acct";
-import { i18n } from "@/i18n";
-import { acct } from "@/filters/user";
-import { $i } from "@/account";
-
-const getAcct = Acct.toString;
-
-const props = defineProps<{
-	message: Record<string, any>;
-}>();
-
-function isMe(message): boolean {
-	return message.userId === $i?.id;
-}
-</script>
-
-<style lang="scss" scoped>
-.rivslvers {
-	> .message {
-		display: block;
-		text-decoration: none;
-		margin-bottom: var(--margin);
-
-		* {
-			pointer-events: none;
-			user-select: none;
-		}
-
-		&:hover {
-			.avatar {
-				filter: saturate(200%);
-			}
-		}
-
-		&.isRead,
-		&.isMe {
-			opacity: 0.8;
-		}
-
-		&:not(.isMe):not(.isRead) {
-			> div {
-				background-image: url("/client-assets/unread.svg");
-				background-repeat: no-repeat;
-				background-position: 0 center;
-			}
-		}
-
-		&:after {
-			content: "";
-			display: block;
-			clear: both;
-		}
-
-		padding: 20px 30px;
-
-		> header {
-			display: flex;
-			align-items: center;
-			margin-bottom: 2px;
-			white-space: nowrap;
-			overflow: hidden;
-
-			> .name {
-				margin: 0;
-				padding: 0;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				font-size: 1em;
-				font-weight: bold;
-				transition: all 0.1s ease;
-			}
-
-			> .username {
-				margin: 0 8px;
-			}
-
-			> .time {
-				margin: 0 0 0 auto;
-			}
-		}
-
-		> .avatar {
-			float: left;
-			width: 54px;
-			height: 54px;
-			margin: 0 16px 0 0;
-			border-radius: 8px;
-			transition: all 0.1s ease;
-		}
-
-		> .body {
-			> .text {
-				display: block;
-				margin: 0 0 0 0;
-				padding: 0;
-				overflow: hidden;
-				overflow-wrap: break-word;
-				text-decoration: none;
-				font-size: 1.1em;
-				color: var(--faceText);
-
-				.me {
-					opacity: 0.7;
-				}
-			}
-
-			> .image {
-				display: block;
-				max-width: 100%;
-				max-height: 512px;
-			}
-		}
-	}
-
-	&.max-width_400px {
-		> .message {
-			&:not(.isMe):not(.isRead) {
-				> div {
-					background-image: none;
-					border-left: solid 4px #3aa2dc;
-				}
-			}
-
-			> div {
-				padding: 16px;
-				font-size: 0.9em;
-
-				> .avatar {
-					margin: 0 12px 0 0;
-				}
-			}
-		}
-	}
-}
-</style>

packages/client/src/ui/universal.vue

@@ -59,6 +59,14 @@
 					<i class="ph-house ph-bold ph-lg"></i>
 				</div>
 			</button>
+			<button
+				class="button widget _button"
+				@click="search"
+			>
+				<div class="button-wrapper">
+					<i class="ph-magnifying-glass ph-bold ph-lg"></i>
+				</div>
+			</button>
 			<button
 				class="button notifications _button"
 				@click="
@@ -68,7 +76,7 @@
 			>
 				<div
 					class="button-wrapper"
-					:class="buttonAnimIndex === 1 ? 'on' : ''"
+					:class="buttonAnimIndex === 2 ? 'on' : ''"
 				>
 					<i class="ph-bell ph-bold ph-lg"></i
 					><span v-if="$i?.hasUnreadNotification" class="indicator"
@@ -76,25 +84,6 @@
 					></span>
 				</div>
 			</button>
-			<button
-				class="button messaging _button"
-				@click="
-					mainRouter.push('/my/messaging');
-					updateButtonState();
-				"
-			>
-				<div
-					class="button-wrapper"
-					:class="buttonAnimIndex === 2 ? 'on' : ''"
-				>
-					<i class="ph-chats-teardrop ph-bold ph-lg"></i
-					><span
-						v-if="$i?.hasUnreadMessagingMessage"
-						class="indicator"
-						><i class="ph-circle ph-fill"></i
-					></span>
-				</div>
-			</button>
 			<button
 				class="button widget _button"
 				@click="widgetsShowing = true"
@@ -174,6 +163,7 @@ import {
 	setPageMetadata,
 } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
+import {search} from "@/scripts/search";
 
 const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
 const XSidebar = defineAsyncComponent(() => import("@/ui/_common_/navbar.vue"));
@@ -225,10 +215,6 @@ function updateButtonState(): void {
 		return;
 	}
 	if (routerState.includes("/my/notifications")) {
-		buttonAnimIndex.value = 1;
-		return;
-	}
-	if (routerState.includes("/my/messaging")) {
 		buttonAnimIndex.value = 2;
 		return;
 	}