From 3807ac8a7b623af11940ef6feaa945c2834b08f9 Mon Sep 17 00:00:00 2001
From: haorwen <haorwen@qq.com>
Date: Thu, 9 Apr 2026 22:48:47 +0800
Subject: [PATCH] feat: update MobileNavs to use translation for navigation
 labels and bump version to v0.9.77

---
 package.json                   | 2 +-
 src/routes/home/MobileNavs.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index cb87be5e..df2f0a9f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.9.76",
+  "version": "0.9.77",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",
diff --git a/src/routes/home/MobileNavs.tsx b/src/routes/home/MobileNavs.tsx
index cbdd90b1..5490fe1a 100644
--- a/src/routes/home/MobileNavs.tsx
+++ b/src/routes/home/MobileNavs.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { NavLink, useLocation, useMatch } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 
 import ChatIcon from "@/assets/icons/chat.svg";
@@ -11,6 +12,7 @@ import { shallowEqual } from "react-redux";
 // type Props = {}
 
 const MobileNavs = () => {
+  const { t } = useTranslation("common");
   const isHomePath = useMatch(`/`);
   const { pathname } = useLocation();
   const isChatHomePath = useMatch(`/chat`);
@@ -45,7 +47,7 @@ const MobileNavs = () => {
               <div className="flex flex-col gap-1 items-center">
                 <ChatIcon className={!active ? "fill-gray-500" : "fill-primary-500"} />
                 <span className={clsx("text-xs", !active ? "text-gray-500" : "text-primary-500")}>
-                  Chats
+                  {t("chat")}
                 </span>
               </div>
             );
@@ -59,7 +61,7 @@ const MobileNavs = () => {
               <div className="flex flex-col gap-1 items-center">
                 <UserIcon className={!active ? "fill-gray-500" : "fill-primary-500"} />
                 <span className={clsx("text-xs", !active ? "text-gray-500" : "text-primary-500")}>
-                  Contacts
+                  {t("members")}
                 </span>
               </div>
             );
@@ -75,7 +77,7 @@ const MobileNavs = () => {
                   className={clsx("w-6 h-6", !active ? "fill-gray-500" : "fill-primary-500")}
                 />
                 <span className={clsx("text-xs", !active ? "text-gray-500" : "text-primary-500")}>
-                  Settings
+                  {t("setting")}
                 </span>
               </div>
             );