feat: add Home tab to mobile bottom nav with iframe landing page

public/locales/de/common.json

@@ -1,4 +1,5 @@
 {
+  "home": "Start",
   "chat": "Chat",
   "members": "Mitglieder",
   "favs": "Gespeichert",

public/locales/en/common.json

@@ -1,4 +1,5 @@
 {
+  "home": "Home",
   "chat": "Chat",
   "members": "Members",
   "favs": "Saved Items",

public/locales/es/common.json

@@ -1,4 +1,5 @@
 {
+  "home": "Inicio",
   "chat": "Chat",
   "members": "Miembros",
   "favs": "Elementos Guardados",

public/locales/fr/common.json

@@ -1,4 +1,5 @@
 {
+  "home": "Accueil",
   "chat": "Chat",
   "members": "Membres",
   "favs": "Éléments Enregistrés",

public/locales/jp/common.json

@@ -1,4 +1,5 @@
 {
+  "home": "ホーム",
   "chat": "チャット",
   "members": "メンバー",
   "favs": "お気に入り",

public/locales/pt/common.json

@@ -1,4 +1,5 @@
 {
+  "home": "Início",
   "chat": "Chat",
   "members": "Members",
   "favs": "Saved Items",

public/locales/ru/common.json

@@ -1,4 +1,5 @@
 {
+  "home": "Главная",
   "chat": "Чат",
   "members": "Участники",
   "favs": "Сохраненные элементы",

public/locales/tr/common.json

@@ -1,4 +1,5 @@
 {
+  "home": "Ana Sayfa",
   "chat": "Sohbet",
   "members": "Üeyler",
   "favs": "Kaydedilmiş Öğeler",

public/locales/zh/common.json

@@ -1,4 +1,5 @@
 {
+  "home": "首页",
   "chat": "聊天",
   "members": "成员",
   "favs": "收藏",

src/routes/chat/index.tsx

@@ -91,7 +91,7 @@ function ChatPage() {
         <div
           className={clsx(
             `left-container flex-col md:rounded-l-2xl w-full ${mobileHeight} md:h-full md:max-w-[250px] md:min-w-[268px] shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] bg-white dark:!bg-gray-800`,
-            isMainPath ? "flex" : "hidden md:flex"
+            isChatHomePath ? "flex" : "hidden md:flex"
           )}
         >
           <Server readonly={isGuest} />
@@ -102,7 +102,7 @@ function ChatPage() {
           className={clsx(
             `right-container md:rounded-r-2xl w-full bg-white dark:!bg-gray-700`,
             placeholderVisible && "h-full flex-center",
-            isMainPath && "hidden md:flex"
+            isChatHomePath && "hidden md:flex"
           )}
         >
           {voiceFullscreenVisible && <VoiceFullscreen id={contextId} context={context} />}

src/routes/home/MobileNavs.tsx

@@ -9,7 +9,11 @@ import UserIcon from "@/assets/icons/user.svg";
 import { useAppSelector } from "../../app/store";
 import { shallowEqual } from "react-redux";
 
-// type Props = {}
+const HomeIcon = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+    <path d="M10.55 2.533a2.25 2.25 0 0 1 2.9 0l6.75 5.695c.508.428.8 1.057.8 1.72v9.802a1.75 1.75 0 0 1-1.75 1.75h-3.5a1.75 1.75 0 0 1-1.75-1.75v-5a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25v5a1.75 1.75 0 0 1-1.75 1.75h-3.5A1.75 1.75 0 0 1 3 19.75V9.948c0-.663.292-1.292.8-1.72l6.75-5.695Z" />
+  </svg>
+);
 
 const MobileNavs = () => {
   const { t } = useTranslation("common");
@@ -17,7 +21,6 @@ const MobileNavs = () => {
   const { pathname } = useLocation();
   const isChatHomePath = useMatch(`/chat`);
   const isDMChat = useMatch(`/chat/dm/:user_id`);
-  // const isSettingPage = useMatch(`/setting`);
   const isChannelChat = useMatch(`/chat/channel/:channel_id`);
   const { chat: chatPath, user: userPath } = useAppSelector(
     (store) => store.ui.rememberedNavs,
@@ -25,11 +28,9 @@ const MobileNavs = () => {
   );
 
   const linkClass = `flex`;
-  const isChatPage = isHomePath || pathname.startsWith("/chat");
+  const isChatPage = pathname.startsWith("/chat");
   const isChattingPage = !!isDMChat || !!isChannelChat;
-  // console.log("rrr", isDMChat, isChannelChat);
 
-  // 有点绕
   const chatNav = isChatHomePath ? "/chat" : chatPath || "/chat";
   const userNav = userPath || "/users";
   return (
@@ -39,6 +40,21 @@ const MobileNavs = () => {
         isChattingPage && "hidden"
       )}
     >
+      <li>
+        <NavLink className={() => `${linkClass}`} to="/" end>
+          {({ isActive }) => {
+            const active = isActive || !!isHomePath;
+            return (
+              <div className="flex flex-col gap-1 items-center">
+                <HomeIcon className={!active ? "fill-gray-500 text-gray-500" : "fill-primary-500 text-primary-500"} />
+                <span className={clsx("text-xs", !active ? "text-gray-500" : "text-primary-500")}>
+                  {t("home")}
+                </span>
+              </div>
+            );
+          }}
+        </NavLink>
+      </li>
       <li>
         <NavLink className={() => `${linkClass}`} to={chatNav}>
           {({ isActive }) => {