@lobehub/chat 0.151.7 → 0.151.8

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.151.8](https://github.com/lobehub/lobe-chat/compare/v0.151.7...v0.151.8)
+
+<sup>Released on **2024-04-30**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Move NavBar to `[@nav](https://github.com/nav)` slot route.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Move NavBar to `[@nav](https://github.com/nav)` slot route, closes [#2306](https://github.com/lobehub/lobe-chat/issues/2306) ([aee7231](https://github.com/lobehub/lobe-chat/commit/aee7231))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.151.7](https://github.com/lobehub/lobe-chat/compare/v0.151.6...v0.151.7)
 
 <sup>Released on **2024-04-30**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.151.7",
+  "version": "0.151.8",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/{layout/DefaultLayout/Desktop/SideBar → app/(main)/@nav/_layout/Desktop}/index.tsx

@@ -1,17 +1,16 @@
+'use client';
+
 import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { SidebarTabKey } from '@/store/global/initialState';
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 
 import Avatar from './Avatar';
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
-interface Props {
-  sidebarKey?: SidebarTabKey;
-}
-
-export default memo<Props>(({ sidebarKey }) => {
+const Nav = memo(() => {
+  const sidebarKey = useActiveTabKey();
   return (
     <SideNav
       avatar={<Avatar />}
@@ -21,3 +20,7 @@ export default memo<Props>(({ sidebarKey }) => {
     />
   );
 });
+
+Nav.displayName = 'DesktopNav';
+
+export default Nav;

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Bot, MessageSquare, User } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { rgba } from 'polished';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
+import { SidebarTabKey } from '@/store/global/initialState';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    svg {
+      fill: ${rgba(token.colorPrimary, 0.33)};
+    }
+  `,
+  container: css`
+    position: fixed;
+    z-index: 100;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  `,
+}));
+
+const Nav = memo(() => {
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+  const activeKey = useActiveTabKey();
+  const router = useRouter();
+  const items: MobileTabBarProps['items'] = useMemo(
+    () => [
+      {
+        icon: (active) => (
+          <Icon className={active ? styles.active : undefined} icon={MessageSquare} />
+        ),
+        key: SidebarTabKey.Chat,
+        onClick: () => {
+          router.push('/chat');
+        },
+        title: t('tab.chat'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
+        key: SidebarTabKey.Market,
+        onClick: () => {
+          router.push('/market');
+        },
+        title: t('tab.market'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
+        key: SidebarTabKey.Setting,
+        onClick: () => {
+          router.push('/settings');
+        },
+        title: t('tab.setting'),
+      },
+    ],
+    [t],
+  );
+
+  return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} safeArea />;
+});
+
+Nav.displayName = 'MobileNav';
+
+export default Nav;

package/src/app/(main)/@nav/default.tsx

@@ -0,0 +1,10 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const Nav = ServerLayout({ Desktop, Mobile });
+
+Nav.displayName = 'Nav';
+
+export default Nav;

package/src/app/(main)/_layout/Desktop.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsPWA } from '@/hooks/useIsPWA';
+
+import { LayoutProps } from './type';
+
+const Layout = memo<LayoutProps>(({ children, nav }) => {
+  const isPWA = useIsPWA();
+  const theme = useTheme();
+
+  return (
+    <Flexbox
+      height={'100%'}
+      horizontal
+      style={{
+        borderTop: isPWA ? `1px solid ${theme.colorBorder}` : undefined,
+        position: 'relative',
+      }}
+      width={'100%'}
+    >
+      {nav}
+      {children}
+    </Flexbox>
+  );
+});
+
+Layout.displayName = 'DesktopMainLayout';
+
+export default Layout;

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { memo } from 'react';
+
+import { LayoutProps } from './type';
+
+const MOBILE_IGNORE_NAV_ROUTES = ['/settings/', '/chat/'];
+
+const Layout = memo(({ children, nav }: LayoutProps) => {
+  const pathname = usePathname();
+  const hideNav = MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
+
+  return (
+    <>
+      {children}
+      {!hideNav && nav}
+    </>
+  );
+});
+
+Layout.displayName = 'MobileMainLayout';
+
+export default Layout;

package/src/app/(main)/_layout/type.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  children: ReactNode;
+  nav: ReactNode;
+}

package/src/app/(main)/chat/(mobile)/features/ChatInput/index.tsx

@@ -27,7 +27,7 @@ const ChatInputMobileLayout = memo(() => {
       setExpand={setExpand}
       style={{
         background: `linear-gradient(to bottom, ${theme.colorFillQuaternary}, transparent)`,
-        width: '100vw',
+        width: '100%',
       }}
       textAreaLeftAddons={<STT mobile />}
       textAreaRightAddons={

package/src/app/(main)/chat/(mobile)/index.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
 import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
 
@@ -15,10 +17,9 @@ const ChatMobilePage = memo(() => {
   }, []);
 
   return (
-    <>
-      <SessionHeader />
+    <MobileContentLayout header={<SessionHeader />} withNav>
       <SessionList />
-    </>
+    </MobileContentLayout>
   );
 });
 

package/src/app/(main)/chat/(mobile)/mobile/ChatHeader/index.tsx

@@ -48,6 +48,7 @@ const MobileHeader = memo(() => {
         </>
       }
       showBackButton
+      style={{ width: '100%' }}
     />
   );
 });

package/src/app/(main)/chat/(mobile)/mobile/page.tsx

@@ -2,8 +2,8 @@
 
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Conversation from '@/features/Conversation';
 
 import SessionHydration from '../../components/SessionHydration';
@@ -15,15 +15,12 @@ const TopicList = dynamic(() => import('../features/TopicList'));
 
 const Chat = memo(() => {
   return (
-    <>
-      <ChatHeader />
-      <Flexbox height={'calc(100% - 44px)'} horizontal>
-        <Conversation chatInput={<ChatInput />} mobile />
-        <TopicList />
-        <TelemetryNotification mobile />
-      </Flexbox>
+    <MobileContentLayout header={<ChatHeader />}>
+      <Conversation chatInput={<ChatInput />} mobile />
+      <TopicList />
+      <TelemetryNotification mobile />
       <SessionHydration />
-    </>
+    </MobileContentLayout>
   );
 });
 export default Chat;

package/src/app/(main)/chat/settings/(mobile)/index.tsx

@@ -2,14 +2,15 @@
 
 import { memo } from 'react';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
 import EditPage from '../features/EditPage';
 import Header from './Header';
 
 const ChatSettings = memo(() => (
-  <>
-    <Header />
+  <MobileContentLayout header={<Header />} withNav={false}>
     <EditPage />
-  </>
+  </MobileContentLayout>
 ));
 
 export default ChatSettings;

package/src/app/(main)/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/layout.tsx

@@ -0,0 +1,11 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
+
+const MainLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
+
+MainLayout.displayName = 'MainLayout';
+
+export default MainLayout;

package/src/app/(main)/market/_layout/Mobile/index.tsx

@@ -1,18 +1,16 @@
 import { PropsWithChildren } from 'react';
-import { Flexbox } from 'react-layout-kit';
+
+import MobileContentLayout from '@/components/server/MobileNavLayout';
 
 import AgentSearchBar from '../../features/AgentSearchBar';
 import Header from './Header';
 
 const MobileLayout = ({ children }: PropsWithChildren) => {
   return (
-    <>
-      <Header />
-      <Flexbox flex={1} gap={16} style={{ padding: 16 }}>
-        <AgentSearchBar mobile />
-        {children}
-      </Flexbox>
-    </>
+    <MobileContentLayout gap={16} header={<Header />} style={{ paddingInline: 16 }} withNav>
+      <AgentSearchBar mobile />
+      {children}
+    </MobileContentLayout>
   );
 };
 

package/src/app/(main)/market/features/AgentSearchBar/index.tsx

@@ -3,6 +3,7 @@
 import { SearchBar } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useMarketStore } from '@/store/market';
@@ -19,18 +20,20 @@ const AgentSearchBar = memo<{ mobile?: boolean }>(({ mobile: controlledMobile })
   }, [value, setKeywords]);
 
   return (
-    <SearchBar
-      allowClear
-      enableShortKey={!mobile}
-      onChange={(e) => setValue(e.target.value)}
-      onPressEnter={handleSearch}
-      onSubmit={handleSearch}
-      placeholder={t('search.placeholder')}
-      shortKey={'k'}
-      spotlight={!mobile}
-      type={mobile ? 'block' : 'ghost'}
-      value={value}
-    />
+    <Flexbox flex={'none'} paddingBlock={mobile ? 8 : 0}>
+      <SearchBar
+        allowClear
+        enableShortKey={!mobile}
+        onChange={(e) => setValue(e.target.value)}
+        onPressEnter={handleSearch}
+        onSubmit={handleSearch}
+        placeholder={t('search.placeholder')}
+        shortKey={'k'}
+        spotlight={!mobile}
+        type={mobile ? 'block' : 'ghost'}
+        value={value}
+      />
+    </Flexbox>
   );
 });
 

package/src/app/(main)/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'));

package/src/app/(main)/settings/_layout/Mobile/index.tsx

@@ -2,6 +2,7 @@
 
 import { PropsWithChildren } from 'react';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
 import { useIsSubSlug } from '@/hooks/useIsSubSlug';
 
 import SubSettingHeader from './SubSettingHeader';
@@ -11,10 +12,9 @@ const MobileLayout = ({ children }: PropsWithChildren) => {
 
   if (isSubPath)
     return (
-      <>
-        <SubSettingHeader />
+      <MobileContentLayout header={<SubSettingHeader />} withNav={false}>
         {children}
-      </>
+      </MobileContentLayout>
     );
 
   return children;

package/src/app/layout.tsx

@@ -8,7 +8,6 @@ import Analytics from '@/components/Analytics';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
-import LayoutRoutes from '@/layout/routes';
 import { isMobileDevice } from '@/utils/responsive';
 
 const RootLayout = async ({ children }: PropsWithChildren) => {
@@ -21,9 +20,7 @@ const RootLayout = async ({ children }: PropsWithChildren) => {
     <html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
         <GlobalProvider>
-          <AuthProvider>
-            <LayoutRoutes>{children}</LayoutRoutes>
-          </AuthProvider>
+          <AuthProvider>{children}</AuthProvider>
         </GlobalProvider>
         <Analytics />
         <SpeedInsights />

package/src/app/page.tsx

@@ -14,6 +14,8 @@ const Page = () => {
   );
 };
 
+Page.displayName = 'Loading';
+
 export default Page;
 
 export const metadata: Metadata = {

package/src/components/404/index.tsx

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { MAX_WIDTH } from '@/const/layoutTokens';
 
-const Page404 = memo(() => {
+const NotFound = memo(() => {
   const { t } = useTranslation('error');
   return (
     <Flexbox align={'center'} justify={'center'} style={{ height: '100%', width: '100%' }}>
@@ -38,4 +38,6 @@ const Page404 = memo(() => {
   );
 });
 
-export default Page404;
+NotFound.displayName = 'NotFound';
+
+export default NotFound;

package/src/components/Error/index.tsx

@@ -11,12 +11,12 @@ import { MAX_WIDTH } from '@/const/layoutTokens';
 
 import { type ErrorType, sentryCaptureException } from './sentryCaptureException';
 
-interface PageErrorProps {
+interface ErrorCaptureProps {
   error: ErrorType;
   reset: () => void;
 }
 
-const PageError = memo<PageErrorProps>(({ reset, error }) => {
+const ErrorCapture = memo<ErrorCaptureProps>(({ reset, error }) => {
   const { t } = useTranslation('error');
 
   useLayoutEffect(() => {
@@ -53,4 +53,6 @@ const PageError = memo<PageErrorProps>(({ reset, error }) => {
   );
 });
 
-export default PageError;
+ErrorCapture.displayName = 'ErrorCapture';
+
+export default ErrorCapture;

package/src/components/server/MobileNavLayout.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { Flexbox, type FlexboxProps } from 'react-layout-kit';
+
+interface MobileContentLayoutProps extends FlexboxProps {
+  header?: ReactNode;
+  withNav?: boolean;
+}
+
+const MobileContentLayout = ({
+  children,
+  withNav,
+  style,
+  header,
+  ...rest
+}: MobileContentLayoutProps) => {
+  const content = (
+    <Flexbox
+      height="100%"
+      style={{
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        position: 'relative',
+        ...style,
+        // TabNav Height
+        paddingBottom: withNav ? 48 : style?.paddingBottom,
+      }}
+      width="100%"
+      {...rest}
+    >
+      {children}
+    </Flexbox>
+  );
+
+  if (!header) return content;
+
+  return (
+    <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+      {header}
+      <Flexbox
+        height="100%"
+        style={{
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          position: 'relative',
+          ...style,
+          // TabNav Height
+          paddingBottom: withNav ? 48 : style?.paddingBottom,
+        }}
+        width="100%"
+        {...rest}
+      >
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+MobileContentLayout.displayName = 'MobileContentLayout';
+
+export default MobileContentLayout;

package/src/components/server/ServerLayout.tsx

@@ -2,17 +2,16 @@ import { FC, PropsWithChildren } from 'react';
 
 import { isMobileDevice } from '@/utils/responsive';
 
-interface ServerLayoutProps {
-  Desktop: FC<PropsWithChildren>;
-  Mobile: FC<PropsWithChildren>;
+interface ServerLayoutProps<T> {
+  Desktop: FC<T>;
+  Mobile: FC<T>;
 }
 
 const ServerLayout =
-  ({ Desktop, Mobile }: ServerLayoutProps) =>
-  ({ children }: PropsWithChildren) => {
+  <T extends PropsWithChildren>({ Desktop, Mobile }: ServerLayoutProps<T>): FC<T> =>
+  (props: T) => {
     const mobile = isMobileDevice();
-
-    return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+    return mobile ? <Mobile {...props} /> : <Desktop {...props} />;
   };
 
 ServerLayout.displayName = 'ServerLayout';

package/src/database/client/models/__tests__/sessionGroup.test.ts

@@ -89,6 +89,16 @@ describe('SessionGroupModel', () => {
         expect(session.group).not.toEqual(createdGroup.id);
       });
     });
+    it('should update associated sessions to default group when a session group is deleted', async () => {
+      const createdGroup = await SessionGroupModel.create(
+        sessionGroupData.name,
+        sessionGroupData.sort,
+      );
+      const sessionId = await SessionModel.create('agent', {}, createdGroup.id);
+      await SessionGroupModel.delete(createdGroup.id);
+      const updatedSession = await SessionModel.findById(sessionId.id);
+      expect(updatedSession.group).toEqual('default');
+    });
   });
 
   describe('query', () => {
@@ -153,6 +163,14 @@ describe('SessionGroupModel', () => {
       expect(fetchedGroups[0].id).toEqual(group2.id);
       expect(fetchedGroups[1].id).toEqual(group1.id);
     });
+
+    it('should sort session groups correctly when only b has a sort value', async () => {
+      const groupA = await SessionGroupModel.create('groupA'); // sort undefined
+      const groupB = await SessionGroupModel.create('groupB', 1); // sort defined
+      const fetchedGroups = await SessionGroupModel.query();
+      expect(fetchedGroups[0].id).toEqual(groupB.id);
+      expect(fetchedGroups[1].id).toEqual(groupA.id);
+    });
   });
 
   describe('updateOrder', () => {

package/src/features/Conversation/index.tsx

@@ -9,14 +9,13 @@ import SkeletonList from './components/SkeletonList';
 const ChatList = lazy(() => import('./components/VirtualizedList'));
 
 const useStyles = createStyles(
-  ({ css, responsive, stylish }) => css`
+  ({ css, responsive }) => css`
     position: relative;
     overflow-y: auto;
     height: 100%;
 
     ${responsive.mobile} {
-      ${stylish.noScrollbar}
-      width: 100vw;
+      width: 100%;
     }
   `,
 );
@@ -32,6 +31,7 @@ const Conversation = memo<ConversationProps>(({ chatInput, mobile }) => {
   return (
     <Flexbox
       flex={1}
+      height={'100%'}
       // `relative` is required, ChatInput's absolute position needs it
       style={{ position: 'relative' }}
     >

package/src/styles/mobileHeader.ts

@@ -3,5 +3,6 @@ import { CSSProperties } from 'react';
 export const mobileHeaderSticky: CSSProperties = {
   position: 'sticky',
   top: 0,
+  width: '100%',
   zIndex: 100,
 };

package/src/layout/DefaultLayout/Desktop/index.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { useTheme } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
-import { useActiveTabKey } from '@/hooks/useActiveTabKey';
-import { useIsPWA } from '@/hooks/useIsPWA';
-
-import SideBar from './SideBar';
-
-const Desktop = memo<PropsWithChildren>(({ children }) => {
-  const isPWA = useIsPWA();
-  const theme = useTheme();
-
-  const sidebarKey = useActiveTabKey();
-
-  return (
-    <Flexbox
-      height={'100%'}
-      horizontal
-      style={isPWA ? { borderTop: `1px solid ${theme.colorBorder}` } : {}}
-      width={'100%'}
-    >
-      <SideBar sidebarKey={sidebarKey} />
-      {children}
-    </Flexbox>
-  );
-});
-
-export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });

package/src/layout/DefaultLayout/Mobile/index.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { type MobileNavBarTitleProps } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import dynamic from 'next/dynamic';
-import { CSSProperties, PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import SafeSpacing from '@/components/SafeSpacing';
-import { SidebarTabKey } from '@/store/global/initialState';
-
-const MobileTabBar = dynamic(() => import('@/features/MobileTabBar'));
-
-const useStyles = createStyles(({ css, cx, stylish }) => ({
-  container: cx(
-    stylish.noScrollbar,
-    css`
-      position: relative;
-      overflow: hidden auto;
-      width: 100vw;
-      height: 100%;
-    `,
-  ),
-  mobileTabBar: css`
-    position: fixed;
-    z-index: 100;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  `,
-}));
-
-interface AppMobileLayoutProps extends PropsWithChildren {
-  className?: string;
-  showTabBar?: boolean;
-  style?: CSSProperties;
-  tabBarKey?: SidebarTabKey;
-  title?: MobileNavBarTitleProps;
-}
-
-const AppLayoutMobile = memo<AppMobileLayoutProps>(
-  ({ children, showTabBar, tabBarKey, style, className }) => {
-    const { styles, cx } = useStyles();
-
-    return (
-      <Flexbox className={cx(styles.container, className)} style={style}>
-        {children}
-        {showTabBar && (
-          <>
-            <SafeSpacing mobile position={'bottom'} />
-            <MobileTabBar className={styles.mobileTabBar} tabBarKey={tabBarKey} />
-          </>
-        )}
-      </Flexbox>
-    );
-  },
-);
-
-export default AppLayoutMobile;

package/src/layout/DefaultLayout/index.ts

@@ -1,2 +0,0 @@
-export { default as DefaultLayoutDesktop } from './Desktop';
-export { default as DefaultLayoutMobile } from './Mobile';

package/src/layout/routes/Desktop.tsx

@@ -1,18 +0,0 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
-import { PropsWithChildren, memo } from 'react';
-
-import { DefaultLayoutDesktop } from '@/layout/DefaultLayout';
-
-const defaultLayoutRoutes = new Set(['/']);
-
-const DesktopLayout = memo<PropsWithChildren>(({ children }) => {
-  const pathname = usePathname();
-
-  if (defaultLayoutRoutes.has(pathname)) return children;
-
-  return <DefaultLayoutDesktop>{children}</DefaultLayoutDesktop>;
-});
-
-export default DesktopLayout;

package/src/layout/routes/Mobile.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
-import { PropsWithChildren, memo } from 'react';
-
-import { useActiveTabKey } from '@/hooks/useActiveTabKey';
-import { useIsSubSlug } from '@/hooks/useIsSubSlug';
-import { DefaultLayoutMobile } from '@/layout/DefaultLayout';
-
-const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  const pathname = usePathname();
-  const tabBarKey = useActiveTabKey();
-  const isSubPath = useIsSubSlug();
-
-  if (pathname === '/') return children;
-
-  return (
-    <DefaultLayoutMobile showTabBar={!isSubPath} tabBarKey={tabBarKey}>
-      {children}
-    </DefaultLayoutMobile>
-  );
-});
-
-export default MobileLayout;

package/src/layout/routes/index.tsx

@@ -1,8 +0,0 @@
-import ServerLayout from '@/components/server/ServerLayout';
-
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-
-const LayoutRoutes = ServerLayout({ Desktop, Mobile });
-
-export default LayoutRoutes;