From c2852c6591ac768f6bea01a5b09a5e535fba0844 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Fri, 26 Jan 2024 13:14:27 +0800
Subject: [PATCH 1/3] feat: nav icon size

---
 apps/u3/src/components/layout/Nav.tsx         | 37 +++++++++++++++----
 apps/u3/src/components/layout/menu.tsx        | 10 ++---
 .../notification/MobileNotificationNavBtn.tsx |  6 +--
 .../notification/NotificationNavBtn.tsx       |  6 +--
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/apps/u3/src/components/layout/Nav.tsx b/apps/u3/src/components/layout/Nav.tsx
index e8e77865..f13ff9b4 100644
--- a/apps/u3/src/components/layout/Nav.tsx
+++ b/apps/u3/src/components/layout/Nav.tsx
@@ -5,13 +5,14 @@
  * @LastEditTime: 2023-10-30 14:54:49
  * @Description: file description
  */
-import { useCallback, useRef, useState } from 'react';
+import { ComponentPropsWithRef, useCallback, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { isMobile } from 'react-device-detect';
 import useLogin from '../../hooks/shared/useLogin';
 import { CustomNavObject, navs } from '../../route/nav';
 import useRoute from '../../route/useRoute';
+import { cn } from '@/lib/utils';
 
 type Props = {
   onlyIcon?: boolean;
@@ -72,7 +73,7 @@ export default function Nav({ onlyIcon }: Props) {
           isActive={isActive}
           onClick={() => navigate(nav.route.path)}
         >
-          <PcNavItemIconBox isActive={isActive}>{nav.icon}</PcNavItemIconBox>
+          <NavItemIconBox isActive={isActive}>{nav.icon}</NavItemIconBox>
           {!isMobile && renderNavItemText(nav)}
         </PcNavItem>
       );
@@ -116,9 +117,9 @@ export default function Nav({ onlyIcon }: Props) {
                 isActive={groupIsActive}
                 onClick={() => handleGroupClick(item.key)}
               >
-                <PcNavItemIconBox isActive={groupIsActive}>
+                <NavItemIconBox isActive={groupIsActive}>
                   {item.icon}
-                </PcNavItemIconBox>
+                </NavItemIconBox>
                 {!isMobile && renderNavItemText(item)}
               </PcNavItem>
               <GroupChildrenBox>
@@ -179,16 +180,36 @@ export const PcNavItem = styled.div<{ isActive?: boolean; disabled?: boolean }>`
       cursor: not-allowed;
     `};
 `;
-export const PcNavItemIconBox = styled.div<{ isActive?: boolean }>`
-  flex-shrink: 0;
+export function NavItemIconBox({
+  isActive,
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<'div'> & { isActive?: boolean }) {
+  return (
+    <div
+      className={cn(
+        'flex-shrink-0 transition-all ease-out delay-300 relative',
+        className,
+        'max-sm:w-[24px] max-sm:h-[24px]'
+      )}
+      {...props}
+    >
+      <NavItemIconInner isActive={isActive}>{children}</NavItemIconInner>
+    </div>
+  );
+}
+export const NavItemIconInner = styled.div<{ isActive?: boolean }>`
+  width: 100%;
+  height: 100%;
   svg {
+    width: 100%;
+    height: 100%;
     path {
       stroke: ${({ isActive }) => (isActive ? `#fff` : '#718096')};
       transition: all 0.3s ease-out;
     }
   }
-  transition: all 0.3s ease-out;
-  position: relative;
 `;
 export const PcNavItemTextBox = styled.div`
   overflow: hidden;
diff --git a/apps/u3/src/components/layout/menu.tsx b/apps/u3/src/components/layout/menu.tsx
index 1a1b389f..3e5030d9 100644
--- a/apps/u3/src/components/layout/menu.tsx
+++ b/apps/u3/src/components/layout/menu.tsx
@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import LoginButton from './LoginButton';
-import Nav, { NavWrapper, PcNavItem, PcNavItemIconBox } from './Nav';
+import Nav, { NavWrapper, PcNavItem, NavItemIconBox } from './Nav';
 import { ReactComponent as LogoIconSvg } from '../common/assets/imgs/logo-icon.svg';
 import { ReactComponent as MessageChatSquareSvg } from '../common/assets/svgs/message-chat-square.svg';
 import { ReactComponent as ContactUsSvg } from '../common/assets/svgs/contact-us.svg';
@@ -71,9 +71,9 @@ function ContactUsButton() {
           switchNavModal(NavModalName.ContactUs);
         }}
       >
-        <PcNavItemIconBox isActive={openContactUsModal}>
+        <NavItemIconBox isActive={openContactUsModal}>
           <ContactUsSvg />
-        </PcNavItemIconBox>
+        </NavItemIconBox>
         {renderNavItemText('Contact US')}
       </PcNavItem>
       <ContactUsModal />
@@ -92,9 +92,9 @@ function MessageButton() {
           switchNavModal(NavModalName.Message);
         }}
       >
-        <PcNavItemIconBox isActive={openMessageModal}>
+        <NavItemIconBox isActive={openMessageModal}>
           <MessageChatSquareSvg />
-        </PcNavItemIconBox>
+        </NavItemIconBox>
         {renderNavItemText('Message')}
       </PcNavItem>
       <MessageModal />
diff --git a/apps/u3/src/components/notification/MobileNotificationNavBtn.tsx b/apps/u3/src/components/notification/MobileNotificationNavBtn.tsx
index 6baf57af..8a154623 100644
--- a/apps/u3/src/components/notification/MobileNotificationNavBtn.tsx
+++ b/apps/u3/src/components/notification/MobileNotificationNavBtn.tsx
@@ -1,7 +1,7 @@
 import { useIsAuthenticated } from '@us3r-network/auth-with-rainbowkit';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { PcNavItem, PcNavItemIconBox } from '../layout/Nav';
+import { PcNavItem, NavItemIconBox } from '../layout/Nav';
 import { ReactComponent as BellSvg } from '../../route/svgs/bell.svg';
 import {
   useNotificationStore,
@@ -58,7 +58,7 @@ function NotificationButtonStyled({
 }) {
   return (
     <PcNavItem isActive={isActive} onClick={onClick}>
-      <PcNavItemIconBox isActive={isActive}>
+      <NavItemIconBox isActive={isActive}>
         <BellSvg />
         {unreadCount > 0 && (
           <div
@@ -75,7 +75,7 @@ function NotificationButtonStyled({
             "
           />
         )}
-      </PcNavItemIconBox>
+      </NavItemIconBox>
     </PcNavItem>
   );
 }
diff --git a/apps/u3/src/components/notification/NotificationNavBtn.tsx b/apps/u3/src/components/notification/NotificationNavBtn.tsx
index c69a7c16..844312d8 100644
--- a/apps/u3/src/components/notification/NotificationNavBtn.tsx
+++ b/apps/u3/src/components/notification/NotificationNavBtn.tsx
@@ -6,7 +6,7 @@
  * @Description: file description
  */
 import { useIsAuthenticated } from '@us3r-network/auth-with-rainbowkit';
-import { PcNavItem, PcNavItemIconBox } from '../layout/Nav';
+import { PcNavItem, NavItemIconBox } from '../layout/Nav';
 import { ReactComponent as BellSvg } from '../../route/svgs/bell.svg';
 import {
   useNotificationStore,
@@ -63,7 +63,7 @@ function NotificationButtonStyled({
   const { renderNavItemText } = useNav();
   return (
     <PcNavItem isActive={isActive} onClick={onClick}>
-      <PcNavItemIconBox isActive={isActive}>
+      <NavItemIconBox isActive={isActive}>
         <BellSvg />
         {unreadCount > 0 && (
           <div
@@ -80,7 +80,7 @@ function NotificationButtonStyled({
             "
           />
         )}
-      </PcNavItemIconBox>
+      </NavItemIconBox>
       {renderNavItemText(`Notifications`)}
       {unreadCount > 0 && (
         <div

From bb13188826ba1251bd0612c5cd3949e390d2ca10 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Fri, 26 Jan 2024 15:44:05 +0800
Subject: [PATCH 2/3] feat: cast ui optimization

---
 apps/u3/src/components/social/Embed.tsx       |  79 ++++++++-----
 apps/u3/src/components/social/PostCard.tsx    | 110 +-----------------
 .../social/farcaster/U3ZoraMinter.tsx         |  54 ++++++---
 apps/u3/src/container/social/SocialLayout.tsx |  17 +--
 4 files changed, 94 insertions(+), 166 deletions(-)

diff --git a/apps/u3/src/components/social/Embed.tsx b/apps/u3/src/components/social/Embed.tsx
index a14948d1..b2445fea 100644
--- a/apps/u3/src/components/social/Embed.tsx
+++ b/apps/u3/src/components/social/Embed.tsx
@@ -10,12 +10,7 @@ import {
   FarCastEmbedMeta,
   FarCastEmbedMetaCast,
 } from '../../services/social/types';
-import {
-  PostCardCastWrapper,
-  PostCardEmbedWrapper,
-  PostCardImgWrapper,
-  PostCardNftWrapper,
-} from './PostCard';
+import { PostCardEmbedWrapper, PostCardImgWrapper } from './PostCard';
 import {
   getFarcasterEmbedCast,
   getFarcasterEmbedMetadata,
@@ -94,13 +89,14 @@ export default function Embed({
   }
 
   return (
-    <EmbedBox ref={viewRef}>
+    <div className="flex flex-col gap-[10px] overflow-hidden" ref={viewRef}>
       {embedImgs.length > 0 && (
         <>
           <PostCardImgWrapper len={embedImgs.length}>
             {embedImgs.map((img, idx) => (
               // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
               <img
+                className="max-h-[200px] object-cover"
                 src={img.url}
                 alt=""
                 loading="lazy"
@@ -119,7 +115,7 @@ export default function Embed({
           />
         </>
       )}
-      <div className="w-[70%]">
+      <div className="w-full">
         {[...metadata, ...metadataCasts].map(
           (item: FarCastEmbedMeta | FarCastEmbedMetaCast) => {
             if ((item as any).type === 'cast') {
@@ -149,7 +145,7 @@ export default function Embed({
           }
         )}
       </div>
-    </EmbedBox>
+    </div>
   );
 }
 
@@ -178,7 +174,8 @@ function EmbedCast({ data }: { data: FarCastEmbedMetaCast }) {
   }, [data.cast]);
 
   return (
-    <PostCardCastWrapper
+    <div
+      className="w-full rounded-[10px] text-[#fff] p-[20px] cursor-pointer flex gap-[10px] justify-between bg-[#14171a]"
       onClick={(e) => {
         e.stopPropagation();
         navigate(
@@ -188,27 +185,38 @@ function EmbedCast({ data }: { data: FarCastEmbedMetaCast }) {
         );
       }}
     >
-      <div>
-        <div>
+      <div className="w-0 flex-1">
+        <div className="flex items-center gap-[10px]">
           <img
+            className="w-[21px] h-[21px] rounded-[50%] object-cover"
             src={userData.img}
             alt=""
             loading="lazy"
-            className="object-cover"
           />
-          <div>
-            <span className="username">{userData.username}</span>
-            <span className="uname">
+          <div className="flex items-center gap-[5px]">
+            <span className="text-[#fff] text-[12px] font-bold mr-[5px] flex-shrink-0">
+              {userData.username}
+            </span>
+            <span className="text-[#718096] text-[12px] font-normal line-clamp-1">
               @{userData.uname}
               {'  '}·{'  '}
               {dayjs(data.cast.created_at).fromNow()}
             </span>
           </div>
         </div>
-        <p>{data.cast.text}</p>
+        <p className="text-[#c8c4c4] mb-0 mt-[10px] p-0 line-clamp-3">
+          {data.cast.text}
+        </p>
       </div>
-      {castImg && <img src={castImg} alt="" loading="lazy" />}
-    </PostCardCastWrapper>
+      {castImg && (
+        <img
+          className="flex-shrink-0 w-[100px] h-[100px] rounded-[10px] overflow-hidden object-cover"
+          src={castImg}
+          alt=""
+          loading="lazy"
+        />
+      )}
+    </div>
   );
 }
 
@@ -218,16 +226,25 @@ function EmbedNFT({ item }: { item: FarCastEmbedMeta }) {
   }
 
   return (
-    <PostCardNftWrapper
+    <div
+      className="text-[#fff] w-full rounded-[10px] overflow-hidden bg-[#14171a] [cursor:initial]"
       key={item.url}
       onClick={(e) => {
         e.stopPropagation();
       }}
     >
-      <img src={item.image} alt="" loading="lazy" />
-      <div>
-        <h4>{item.collection}</h4>
+      <img
+        className="w-full max-h-[500px] object-cover"
+        src={item.image}
+        alt=""
+        loading="lazy"
+      />
+      <div className="flex justify-between items-center p-[20px]">
+        <h4 className="m-0 text-[#fff] text-[16px] font-normal leading-[30px]">
+          {item.collection}
+        </h4>
         <button
+          className="cursor-pointer rounded-[10px] bg-[#454c99] px-[20px] py-[10px] border-none outline-[none] text-[#fff] text-[16px] font-bold"
           type="button"
           onClick={(e) => {
             e.stopPropagation();
@@ -237,7 +254,7 @@ function EmbedNFT({ item }: { item: FarCastEmbedMeta }) {
           View
         </button>
       </div>
-    </PostCardNftWrapper>
+    </div>
   );
 }
 
@@ -264,14 +281,18 @@ export function EmbedWebsite({
     >
       {(isImg(img || '') && (
         <div
-          className="img"
+          className="img w-full max-h-[200px] object-cover"
           style={{
             backgroundImage: `url(${img})`,
           }}
         />
       )) || (
         <div className="img">
-          <img src={img} alt="" />
+          <img
+            className="img w-full max-h-[200px] object-cover"
+            src={img}
+            alt=""
+          />
         </div>
       )}
       <div className="flex flex-col gap-[10px] p-[16px] font-[Rubik]">
@@ -345,9 +366,3 @@ export function isImg(url?: string) {
     url.endsWith('.gif')
   );
 }
-
-const EmbedBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
diff --git a/apps/u3/src/components/social/PostCard.tsx b/apps/u3/src/components/social/PostCard.tsx
index 9905d366..4c279a85 100644
--- a/apps/u3/src/components/social/PostCard.tsx
+++ b/apps/u3/src/components/social/PostCard.tsx
@@ -377,7 +377,7 @@ export const PostCardImgWrapper = styled.div<{ len: number }>`
         ? 'calc(33% - 12px)'
         : props.len === 2
         ? 'calc(50% - 10px)'
-        : '70%'};
+        : '100%'};
     border-radius: 10px;
     overflow: hidden;
     cursor: pointer;
@@ -393,112 +393,6 @@ export const PostCardVideoWrapper = styled.div`
   max-width: 100%;
 `;
 
-export const PostCardCastWrapper = styled.div`
-  border-radius: 10px;
-  color: #fff;
-  padding: 20px;
-  cursor: pointer;
-  display: flex;
-  gap: 10px;
-  justify-content: space-between;
-  background-color: #14171a;
-  > div {
-    > div {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      > img {
-        width: 21px;
-        height: 21px;
-        border-radius: 50%;
-      }
-      > div {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-      }
-      .username {
-        color: #fff;
-        font-family: Rubik;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        margin-right: 5px;
-      }
-      .uname {
-        color: #718096;
-        font-family: Rubik;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-      }
-    }
-    > p {
-      color: #c8c4c4;
-      margin-bottom: 0;
-      margin-top: 10px;
-      padding: 0;
-      word-break: break-all;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 3;
-      overflow: hidden;
-    }
-  }
-  > img {
-    flex-shrink: 0;
-    width: 100px;
-    height: 100px;
-    border-radius: 10px;
-    overflow: hidden;
-  }
-`;
-
-export const PostCardNftWrapper = styled.div`
-  color: #fff;
-  width: 100%;
-  border-radius: 10px;
-  overflow: hidden;
-  background-color: #14171a;
-  cursor: initial;
-  > img {
-    width: 100%;
-  }
-  > div {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    > h4 {
-      margin: 0;
-      color: #fff;
-      font-family: Rubik;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 30px; /* 187.5% */
-    }
-    > button {
-      cursor: pointer;
-      border-radius: 10px;
-      background: #454c99;
-      padding: 10px 20px;
-      border: none;
-      outline: none;
-      color: inherit;
-      color: #fff;
-      font-family: Rubik;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 700;
-      line-height: normal;
-    }
-  }
-`;
-
 export const PostCardEmbedWrapper = styled.div`
   color: #fff;
   border-radius: 10px;
@@ -506,7 +400,7 @@ export const PostCardEmbedWrapper = styled.div`
   background-color: #14171a;
   text-decoration: none;
   width: 100%;
-  min-height: 373px;
+  min-height: 349px;
   display: flex;
   flex-direction: column;
   cursor: default;
diff --git a/apps/u3/src/components/social/farcaster/U3ZoraMinter.tsx b/apps/u3/src/components/social/farcaster/U3ZoraMinter.tsx
index 36107d02..fe8638a9 100644
--- a/apps/u3/src/components/social/farcaster/U3ZoraMinter.tsx
+++ b/apps/u3/src/components/social/farcaster/U3ZoraMinter.tsx
@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ComponentPropsWithRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { UrlMetadata } from '@mod-protocol/core';
 import { useAccount, useNetwork } from 'wagmi';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
@@ -13,8 +19,6 @@ import { getMetadataWithMod } from '@/services/social/api/farcaster';
 import { FarCastEmbedMeta } from '@/services/social/types';
 import useLogin from '@/hooks/shared/useLogin';
 
-import { PostCardNftWrapper } from '../PostCard';
-
 type ModTransactionData = {
   status: string;
   orderIds: string[];
@@ -161,21 +165,28 @@ export default function U3ZoraMinter({
   }, []);
 
   return (
-    <PostCardNftWrapper
+    <div
+      className="text-[#fff] w-full rounded-[10px] overflow-hidden bg-[#14171a] [cursor:initial]"
       onClick={(e) => {
         e.stopPropagation();
       }}
     >
-      <img src={embedMetadata.image} alt="" loading="lazy" />
-      <div>
-        <h4>{embedMetadata.collection}</h4>
-        {(minting && <button type="button">Minting</button>) ||
+      <img
+        className="w-full max-h-[500px] object-cover"
+        src={embedMetadata.image}
+        alt=""
+        loading="lazy"
+      />
+      <div className="flex justify-between items-center p-[20px]">
+        <h4 className="m-0 text-[#fff] text-[16px] font-normal leading-[30px]">
+          {embedMetadata.collection}
+        </h4>
+        {(minting && <MintButton>Minting</MintButton>) ||
           (modMetadataCheckDone &&
             ((modData &&
               modData.nft?.tokenId &&
               ((transactionHash && (
-                <button
-                  type="button"
+                <MintButton
                   onClick={(e) => {
                     e.stopPropagation();
                     window.open(
@@ -185,30 +196,37 @@ export default function U3ZoraMinter({
                   }}
                 >
                   View NFT
-                </button>
+                </MintButton>
               )) || (
-                <button
-                  type="button"
+                <MintButton
                   onClick={(e) => {
                     e.stopPropagation();
                     transactionAction();
                   }}
                 >
                   Mint
-                </button>
+                </MintButton>
               ))) || (
-              <button
-                type="button"
+              <MintButton
                 onClick={(e) => {
                   e.stopPropagation();
                   window.open(url, '_blank');
                 }}
               >
                 View
-              </button>
+              </MintButton>
             )))}
       </div>
-    </PostCardNftWrapper>
+    </div>
+  );
+}
+function MintButton(props: ComponentPropsWithRef<'button'>) {
+  return (
+    <button
+      type="button"
+      className="cursor-pointer rounded-[10px] bg-[#454c99] px-[20px] py-[10px] border-none outline-[none] text-[#fff] text-[16px] font-bold"
+      {...props}
+    />
   );
 }
 
diff --git a/apps/u3/src/container/social/SocialLayout.tsx b/apps/u3/src/container/social/SocialLayout.tsx
index 4cc30123..a535ab9c 100644
--- a/apps/u3/src/container/social/SocialLayout.tsx
+++ b/apps/u3/src/container/social/SocialLayout.tsx
@@ -27,6 +27,7 @@ import SocialWhoToFollow from '../../components/social/SocialWhoToFollow';
 import TrendChannel from '../../components/social/farcaster/TrendChannel';
 import { LivepeerProvider } from '../../contexts/social/LivepeerCtx';
 import { AllFirst } from './SocialAllFollowing';
+import { cn } from '@/lib/utils';
 
 export default function SocialLayoutContainer() {
   return (
@@ -102,7 +103,13 @@ function SocialLayout() {
           </LeftWrapper>
         )}
 
-        <MainCenter id="main-center">
+        <div
+          id="main-center"
+          className={cn(
+            'w-[600px] mt-[20px] box-border h-[fit-content]',
+            'max-sm:w-full'
+          )}
+        >
           <MainOutletWrapper>
             <Outlet
               context={{
@@ -122,7 +129,7 @@ function SocialLayout() {
               }}
             />
           </MainOutletWrapper>
-        </MainCenter>
+        </div>
 
         {!isMobile && (
           <RightWrapper>
@@ -192,12 +199,6 @@ const MainLeft = styled.div`
 const MainRight = styled.div`
   width: 350px;
 `;
-const MainCenter = styled.div`
-  width: 600px;
-  margin-top: 20px;
-  box-sizing: border-box;
-  height: fit-content;
-`;
 const MainOutletWrapper = styled.div`
   width: 100%;
   max-width: 600px;

From 8a1155691039f93fc5c4b1b766ea079c199262f2 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Fri, 26 Jan 2024 16:23:11 +0800
Subject: [PATCH 3/3] feat: save nav & save mobile ui & remove follow menu

---
 .../components/save/SaveExploreListItem.tsx   | 43 +++++--------------
 apps/u3/src/components/social/PostCard.tsx    |  4 +-
 .../src/components/social/farcaster/FCast.tsx |  4 +-
 apps/u3/src/route/nav.tsx                     |  1 +
 4 files changed, 15 insertions(+), 37 deletions(-)

diff --git a/apps/u3/src/components/save/SaveExploreListItem.tsx b/apps/u3/src/components/save/SaveExploreListItem.tsx
index 064489a8..9100d975 100644
--- a/apps/u3/src/components/save/SaveExploreListItem.tsx
+++ b/apps/u3/src/components/save/SaveExploreListItem.tsx
@@ -1,6 +1,5 @@
 import styled, { StyledComponentPropsWithRef } from 'styled-components';
 import { defaultFormatFromNow } from '../../utils/shared/time';
-import EllipsisText from '../common/text/EllipsisText';
 import LinkBox from '../news/contents/LinkBox';
 import type { SaveExploreListItemData } from './SaveExploreList';
 
@@ -17,12 +16,16 @@ export default function SaveExploreListItem({
     <Wrapper {...props}>
       <ListItemInner>
         <IconLink text={data.url} logo={data?.logo} className="iconLink" />
-        <TitleText>{data.title || data.url}</TitleText>
-        {!!data?.createAt && (
-          <TimeText className="timeText">
-            {defaultFormatFromNow(data.createAt)}
-          </TimeText>
-        )}
+        <div className="flex-1 flex flex-col justify-between gap-[20px] max-sm:flex-row">
+          <div className="flex-[1] font-medium text-[16px] leading-[19px] text-[#ffffff] line-clamp-3 max-sm:line-clamp-1">
+            {data.title || data.url}
+          </div>
+          {!!data?.createAt && (
+            <TimeText className="timeText">
+              {defaultFormatFromNow(data.createAt)}
+            </TimeText>
+          )}
+        </div>
       </ListItemInner>
     </Wrapper>
   );
@@ -53,14 +56,6 @@ const ListItemInner = styled.div`
   gap: 20px;
 `;
 
-const TitleText = styled(EllipsisText)`
-  flex: 1;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 19px;
-  color: #ffffff;
-`;
-
 const TimeText = styled.span`
   font-weight: 400;
   font-size: 14px;
@@ -94,22 +89,4 @@ const IconLink = styled(LinkBox)`
 export const SaveExploreListItemMobile = styled(SaveExploreListItem)`
   padding: 10px;
   height: auto;
-
-  & > div {
-    position: relative;
-  }
-
-  .timeText {
-    position: absolute;
-    right: 10px;
-    bottom: 2px;
-  }
-
-  .bottomBox {
-    padding-right: 100px;
-    .iconLink {
-      padding: 0;
-      height: auto;
-    }
-  }
 `;
diff --git a/apps/u3/src/components/social/PostCard.tsx b/apps/u3/src/components/social/PostCard.tsx
index 4c279a85..ca3f2b5f 100644
--- a/apps/u3/src/components/social/PostCard.tsx
+++ b/apps/u3/src/components/social/PostCard.tsx
@@ -106,7 +106,7 @@ export default function PostCard({
     <PostCardWrapper {...wrapperProps} id={id}>
       <PostCardHeaderWrapper>
         <PostCardUserInfo data={data} />
-        {showMenuBtn && (
+        {/* {showMenuBtn && (
           <div
             onClick={(e) => {
               e.stopPropagation();
@@ -120,7 +120,7 @@ export default function PostCard({
               followAction={followAction}
             />
           </div>
-        )}
+        )} */}
       </PostCardHeaderWrapper>
       <PostCardContentWrapper>
         {contentRender ? contentRender() : data?.content}
diff --git a/apps/u3/src/components/social/farcaster/FCast.tsx b/apps/u3/src/components/social/farcaster/FCast.tsx
index 67ef134f..c935fd0a 100644
--- a/apps/u3/src/components/social/farcaster/FCast.tsx
+++ b/apps/u3/src/components/social/farcaster/FCast.tsx
@@ -190,7 +190,7 @@ export default function FCast({
               <ArrowUpIcon />
             </Button>
           )}
-          {showMenuBtn && (
+          {/* {showMenuBtn && (
             <div>
               <PostCardMenuBtn
                 data={{
@@ -209,7 +209,7 @@ export default function FCast({
                 }}
               />
             </div>
-          )}
+          )} */}
         </div>
       </PostCardHeaderWrapper>
 
diff --git a/apps/u3/src/route/nav.tsx b/apps/u3/src/route/nav.tsx
index 6eaef2eb..88ad0d4f 100644
--- a/apps/u3/src/route/nav.tsx
+++ b/apps/u3/src/route/nav.tsx
@@ -92,6 +92,7 @@ export const navs: CustomNavObject[] = [
         navMap.news,
         navMap.notifications,
         navMap.apps,
+        navMap.save,
       ]
     : [
         navMap.explore,