⚡️ perf: refactor Chat Layout to improve performance (lobehub#2339)

* ♻️ refactor: Refactor Chat Layout

* ✅ test: Fix test

* 🐛 fix: Fix ci

* 🔧 chore: Rename workspace

* 🔧 chore: Revert sync style

* 🐛 fix: Fix review problem

* 💄 style: Fix style

* 🔧 chore: Revert useInterceptingRoutes

* 🐛 fix: Fix review problem

* 💄 style: Remove animation

* 🐛 fix: Fix panel

* 🐛 fix: Fix mobile style

* 🐛 fix: Fix Workspace Modal

* 🐛 fix: FIx ios keyboard scroll back

* 🐛 fix: Fix lint

* 🔧 chore: prepare to rebase

* 🐛 fix: Fix PWA

* 🐛 fix: Fix safearea

src/app/(main)/(mobile)/me/features/Header.tsx

@@ -1,35 +1,28 @@
 'use client';
 
 import { ActionIcon, MobileNavBar } from '@lobehub/ui';
-import { useScroll } from 'ahooks';
 import { useTheme } from 'antd-style';
 import { Moon, Sun } from 'lucide-react';
 import { memo } from 'react';
 
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
-import { mobileHeaderFixed } from '@/styles/mobileHeader';
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 const Header = memo(() => {
   const theme = useTheme();
-  const scroll = useScroll(() => document.querySelector('#lobe-mobile-scroll-container'));
   const switchThemeMode = useUserStore((s) => s.switchThemeMode);
-  const showBackground = (scroll as any)?.top > 44;
 
   return (
     <MobileNavBar
       right={
         <ActionIcon
-          color={showBackground ? undefined : theme.colorBgLayout}
           icon={theme.isDarkMode ? Moon : Sun}
           onClick={() => switchThemeMode(theme.isDarkMode ? 'light' : 'dark')}
           size={MOBILE_HEADER_ICON_SIZE}
         />
       }
-      style={{
-        ...mobileHeaderFixed,
-        background: showBackground ? undefined : 'transparent',
-      }}
+      style={mobileHeaderSticky}
     />
   );
 });

src/app/(main)/(mobile)/me/loading.tsx

@@ -7,21 +7,10 @@ import { Flexbox } from 'react-layout-kit';
 import Divider from '@/components/Cell/Divider';
 import SkeletonLoading from '@/components/SkeletonLoading';
 
-import { useStyles } from './features/style';
-
 const Loading = memo(() => {
-  const { styles } = useStyles();
   return (
     <>
-      <Flexbox align={'center'} className={styles.bannerBox} justify={'center'} />
-      <Flexbox
-        align={'center'}
-        className={styles.info}
-        gap={12}
-        horizontal
-        paddingBlock={12}
-        paddingInline={12}
-      >
+      <Flexbox align={'center'} gap={12} horizontal paddingBlock={12} paddingInline={12}>
         <Skeleton.Avatar active shape={'circle'} size={48} />
         <Skeleton.Button active block />
       </Flexbox>

src/app/(main)/(mobile)/me/page.tsx

@@ -7,7 +7,6 @@ import DataStatistics from '@/features/User/DataStatistics';
 import UserInfo from '@/features/User/UserInfo';
 import { isMobileDevice } from '@/utils/responsive';
 
-import AvatarBanner from './features/AvatarBanner';
 import Cate from './features/Cate';
 import ExtraCate from './features/ExtraCate';
 
@@ -18,10 +17,8 @@ const Page = () => {
 
   return (
     <>
-      <AvatarBanner>
-        <UserInfo />
-        <DataStatistics paddingInline={16} />
-      </AvatarBanner>
+      <UserInfo />
+      <DataStatistics paddingInline={12} style={{ paddingBottom: 6 }} />
       <Divider />
       <Cate />
       <ExtraCate />

src/app/(main)/@nav/_layout/Mobile.tsx

@@ -63,7 +63,7 @@ const Nav = memo(() => {
     [t],
   );
 
-  return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} safeArea />;
+  return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} />;
 });
 
 Nav.displayName = 'MobileNav';

src/app/(main)/_layout/Mobile.tsx

@@ -3,13 +3,17 @@
 import { usePathname } from 'next/navigation';
 import { memo } from 'react';
 
+import { useQuery } from '@/hooks/useQuery';
+
 import { LayoutProps } from './type';
 
 const MOBILE_IGNORE_NAV_ROUTES = ['/settings/', '/chat/'];
 
 const Layout = memo(({ children, nav }: LayoutProps) => {
+  const { showMobileWorkspace } = useQuery();
   const pathname = usePathname();
-  const hideNav = MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
+  const hideNav =
+    showMobileWorkspace || MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
 
   return (
     <>

src/app/(main)/chat/(workspace)/@conversation/default.tsx

@@ -0,0 +1,23 @@
+import ChatHydration from '@/components/StoreHydration/ChatHydration';
+import Conversation from '@/features/Conversation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import DesktopChatInput from './features/ChatInput/Desktop';
+import MobileChatInput from './features/ChatInput/Mobile';
+
+const ChatConversation = () => {
+  const mobile = isMobileDevice();
+  const ChatInput = mobile ? MobileChatInput : DesktopChatInput;
+
+  return (
+    <>
+      <Conversation mobile={mobile} />
+      <ChatInput />
+      <ChatHydration />
+    </>
+  );
+};
+
+ChatConversation.displayName = 'ChatConversation';
+
+export default ChatConversation;