💄 style: Better mobile style

src/const/url.ts

@@ -10,5 +10,7 @@ export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 export const PLUGINS_INDEX_URL =
   process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
 
+export const AGENTS_INDEX_URL = process.env.AGENTS_INDEX_URL ?? 'https://chat-agents.lobehub.com';
+
 export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean) =>
   mobile ? `/chat/mobile#session=${id}` : `/chat#session=${id}`;

src/features/MobileTabBar/index.tsx

@@ -1,13 +1,12 @@
 import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { MessageSquare, Settings2, Sticker } from 'lucide-react';
+import { MessageSquare, Sticker } from 'lucide-react';
 import Router from 'next/router';
 import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, token }) => ({
   active: css`
@@ -21,7 +20,6 @@ export default memo<{ className?: string }>(({ className }) => {
   const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
   const { t } = useTranslation('common');
   const { styles } = useStyles();
-  const switchSession = useSessionStore((s) => s.switchSession);
   const items: MobileTabBarProps['items'] = useMemo(
     () => [
       {
@@ -30,23 +28,17 @@ export default memo<{ className?: string }>(({ className }) => {
         ),
         key: 'chat',
         onClick: () => {
-          switchSession();
+          Router.push('/chat');
         },
         title: t('tab.chat'),
       },
       {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={Sticker} />,
         key: 'market',
-
-        title: t('tab.market'),
-      },
-      {
-        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Settings2} />,
-        key: 'settings',
         onClick: () => {
-          Router.push('/settings');
+          Router.push('/market');
         },
-        title: t('tab.setting'),
+        title: t('tab.market'),
       },
     ],
     [t],

src/features/SideBar/BottomActions.tsx

@@ -110,8 +110,18 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
 
   return (
     <>
-      <ActionIcon icon={DiscordIcon} onClick={() => window.open(DISCORD, '__blank')} />
-      <ActionIcon icon={Github} onClick={() => window.open(GITHUB, '__blank')} />
+      <ActionIcon
+        icon={DiscordIcon}
+        onClick={() => window.open(DISCORD, '__blank')}
+        placement={'right'}
+        title={'Discord'}
+      />
+      <ActionIcon
+        icon={Github}
+        onClick={() => window.open(GITHUB, '__blank')}
+        placement={'right'}
+        title={'Github'}
+      />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
         <ActionIcon active={tab === 'settings'} icon={Settings2} />
       </Dropdown>

src/features/SideBar/TopActions.tsx

@@ -26,6 +26,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
           switchBackToChat();
           setTab('chat');
         }}
+        placement={'right'}
         size="large"
         title={t('tab.chat')}
       />
@@ -37,6 +38,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
           Router.push('/market');
           setTab('market');
         }}
+        placement={'right'}
         size="large"
         title={t('tab.market')}
       />

src/layout/AppMobileLayout.tsx

@@ -8,16 +8,19 @@ import SafeSpacing from '@/components/SafeSpacing';
 import MobileTabBar from '@/features/MobileTabBar';
 import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    position: relative;
+const useStyles = createStyles(({ css, cx, stylish }) => ({
+  container: cx(
+    stylish.noScrollbar,
+    css`
+      position: relative;
 
-    overflow-x: hidden;
-    overflow-y: auto;
+      overflow-x: hidden;
+      overflow-y: auto;
 
-    width: 100vw;
-    height: 100vh;
-  `,
+      width: 100vw;
+      height: 100vh;
+    `,
+  ),
   mobileNavBar: css`
     position: fixed;
     z-index: 100;

src/pages/chat/features/Header/Mobile.tsx

@@ -24,7 +24,7 @@ const MobileHeader = memo(() => {
   return (
     <MobileNavBar
       center={<MobileNavBarTitle desc={model} title={displayTitle} />}
-      onBackClick={() => Router.back()}
+      onBackClick={() => Router.push('/chat')}
       right={
         <>
           <ActionIcon icon={LayoutList} onClick={() => toggleConfig()} />

src/pages/chat/features/Header/index.tsx

@@ -1,15 +1,14 @@
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 
+import Desktop from './Desktop';
 import Mobile from './Mobile';
-import PC from './PC';
 
 const Header = memo(() => {
   const { mobile } = useResponsive();
+  const Render = mobile ? Mobile : Desktop;
 
-  if (mobile) return <Mobile />;
-
-  return <PC />;
+  return <Render />;
 });
 
 export default Header;

src/pages/chat/features/SessionList/Desktop.tsx

@@ -0,0 +1,24 @@
+import { DraggablePanelBody } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+
+import FolderPanel from '@/features/FolderPanel';
+
+import Header from './Header';
+
+const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
+
+const Sessions = memo<{ children: ReactNode }>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <FolderPanel>
+      <Header />
+      <DraggablePanelBody className={styles} style={{ padding: 0 }}>
+        {children}
+      </DraggablePanelBody>
+    </FolderPanel>
+  );
+});
+
+export default Sessions;

src/pages/chat/features/SessionList/Header.tsx → src/pages/chat/features/SessionList/Header/Desktop.tsx

@@ -1,12 +1,11 @@
-import { ActionIcon, Logo, MobileNavBar, SearchBar } from '@lobehub/ui';
+import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useSessionStore } from '@/store/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -19,34 +18,11 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Header = memo<{ mobile?: 'navbar' | 'search' }>(({ mobile }) => {
+const Header = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('common');
   const [keywords, createSession] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
 
-  if (mobile === 'navbar') {
-    return (
-      <MobileNavBar
-        center={<Logo type={'text'} />}
-        left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
-        right={<ActionIcon icon={MessageSquarePlus} onClick={createSession} />}
-      />
-    );
-  }
-
-  if (mobile === 'search')
-    return (
-      <Flexbox className={styles.top} padding={16}>
-        <SearchBar
-          allowClear
-          onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
-          placeholder={t('searchAgentPlaceholder')}
-          type={'block'}
-          value={keywords}
-        />
-      </Flexbox>
-    );
-
   return (
     <Flexbox className={styles.top} gap={16} padding={16}>
       <Flexbox distribution={'space-between'} horizontal>

src/pages/chat/features/SessionList/Header/Mobile.tsx

@@ -0,0 +1,42 @@
+import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { MessageSquarePlus, Settings2 } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { useSessionStore } from '@/store/session';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  logo: css`
+    fill: ${token.colorText};
+  `,
+  top: css`
+    position: sticky;
+    top: 0;
+  `,
+}));
+
+const Header = memo(() => {
+  const [createSession] = useSessionStore((s) => [s.createSession]);
+
+  return (
+    <MobileNavBar
+      center={<Logo type={'text'} />}
+      left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
+      right={
+        <>
+          <ActionIcon icon={MessageSquarePlus} onClick={createSession} />
+          <ActionIcon
+            icon={Settings2}
+            onClick={() => {
+              Router.push({ pathname: `/settings` });
+            }}
+          />
+        </>
+      }
+    />
+  );
+});
+
+export default Header;

src/pages/chat/features/SessionList/Header/index.tsx

@@ -0,0 +1,14 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import Desktop from './Desktop';
+import Mobile from './Mobile';
+
+const Header = memo(() => {
+  const { mobile } = useResponsive();
+  const Render = mobile ? Mobile : Desktop;
+
+  return <Render />;
+});
+
+export default Header;

src/pages/chat/features/SessionList/Mobile.tsx

@@ -0,0 +1,26 @@
+import { SearchBar } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const Sessions = memo<{ children: ReactNode }>(({ children }) => {
+  const { t } = useTranslation('common');
+  const [keywords] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
+  return (
+    <>
+      <div style={{ padding: '8px 16px' }}>
+        <SearchBar
+          allowClear
+          onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
+          placeholder={t('searchAgentPlaceholder')}
+          type={'block'}
+          value={keywords}
+        />
+      </div>
+      {children}
+    </>
+  );
+});
+
+export default Sessions;

src/pages/chat/features/SessionList/index.tsx

@@ -1,21 +1,19 @@
-import { DraggablePanelBody } from '@lobehub/ui';
 import { CollapseProps } from 'antd';
-import { createStyles } from 'antd-style';
+import { useResponsive } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import FolderPanel from '@/features/FolderPanel';
-
 import CollapseGroup from './CollapseGroup';
-import Header from './Header';
+import Desktop from './Desktop';
 import Inbox from './Inbox';
 import SessionList from './List';
+import Mobile from './Mobile';
 
-const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
-
-export const Sessions = memo<{ mobile?: boolean }>(({ mobile }) => {
+export const Sessions = memo(() => {
+  const { mobile } = useResponsive();
   const { t } = useTranslation('common');
-  const { styles } = useStyles();
+
+  const Render = mobile ? Mobile : Desktop;
 
   const items: CollapseProps['items'] = useMemo(
     () => [
@@ -28,22 +26,10 @@ export const Sessions = memo<{ mobile?: boolean }>(({ mobile }) => {
     [],
   );
 
-  if (mobile)
-    return (
-      <>
-        <Header mobile={'search'} />
-        <Inbox />
-        <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
-      </>
-    );
-
   return (
-    <FolderPanel>
-      <Header />
-      <DraggablePanelBody className={styles} style={{ padding: 0 }}>
-        <Inbox />
-        <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
-      </DraggablePanelBody>
-    </FolderPanel>
+    <Render>
+      <Inbox />
+      <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
+    </Render>
   );
 });