💄 style: Fix SessionList on mobile

src/app/chat/features/SessionListContent/CollapseGroup/index.tsx

@@ -4,12 +4,16 @@ import { createStyles } from 'antd-style';
 import { ChevronDown } from 'lucide-react';
 import { memo } from 'react';
 
-const useStyles = createStyles(({ css, prefixCls, token }) => ({
+const useStyles = createStyles(({ css, prefixCls, token, responsive }) => ({
   container: css`
     .${prefixCls}-collapse-header {
-      padding-inline: 16px !important;
+      padding-inline: 16px 10px !important;
       color: ${token.colorTextDescription} !important;
-      border-radius: 8px !important;
+      border-radius: ${token.borderRadius}px !important;
+
+      ${responsive.mobile} {
+        border-radius: 0 !important;
+      }
 
       &:hover {
         color: ${token.colorText} !important;

src/app/chat/features/SessionListContent/Inbox/index.tsx

@@ -1,22 +1,16 @@
-import { Avatar, List } from '@lobehub/ui';
-import { useHover } from 'ahooks';
 import { useResponsive } from 'antd-style';
 import Link from 'next/link';
-import { memo, useMemo, useRef } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useStyles } from '@/app/chat/features/SessionListContent/List/Item';
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionStore } from '@/store/session';
 
-const { Item } = List;
+import ListItem from '../ListItem';
 
 const Inbox = memo(() => {
-  const ref = useRef(null);
-  const { styles } = useStyles();
-  const isHovering = useHover(ref);
   const { t } = useTranslation('chat');
   const { mobile } = useResponsive();
   const [activeId, activeSession, switchSession] = useSessionStore((s) => [
@@ -25,18 +19,6 @@ const Inbox = memo(() => {
     s.switchSession,
   ]);
 
-  const avatarRender = useMemo(
-    () => (
-      <Avatar
-        animation={isHovering}
-        avatar={DEFAULT_INBOX_AVATAR}
-        size={46}
-        style={{ padding: 3 }}
-      />
-    ),
-    [isHovering],
-  );
-
   return (
     <Link
       aria-label={t('inbox.title')}
@@ -47,11 +29,9 @@ const Inbox = memo(() => {
         else activeSession(INBOX_SESSION_ID);
       }}
     >
-      <Item
-        active={mobile ? false : activeId === INBOX_SESSION_ID}
-        avatar={avatarRender}
-        className={styles.container}
-        ref={ref}
+      <ListItem
+        active={activeId === INBOX_SESSION_ID}
+        avatar={DEFAULT_INBOX_AVATAR}
         title={t('inbox.title')}
       />
     </Link>

src/app/chat/features/SessionListContent/List/Item/index.tsx

@@ -1,8 +1,6 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { Avatar, List, Tag } from '@lobehub/ui';
-import { useHover } from 'ahooks';
-import { createStyles, useResponsive } from 'antd-style';
-import { memo, useMemo, useRef, useState } from 'react';
+import { Tag } from '@lobehub/ui';
+import { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
@@ -10,32 +8,16 @@ import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
+import ListItem from '../../ListItem';
 import Actions from './Actions';
 
-const { Item } = List;
-
-export const useStyles = createStyles(({ css, token, responsive }) => {
-  return {
-    container: css`
-      position: relative;
-      border-radius: ${token.borderRadius}px;
-      ${responsive.mobile} {
-        border-radius: 0;
-      }
-    `,
-  };
-});
-
 interface SessionItemProps {
   id: string;
 }
 
 const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  const isHovering = useHover(ref);
-  const { mobile } = useResponsive();
-  const { styles } = useStyles();
+
   const [defaultModel] = useGlobalStore((s) => [settingsSelectors.defaultAgentConfig(s).model]);
 
   const [
@@ -72,19 +54,6 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
 
   const actions = useMemo(() => <Actions id={id} setOpen={setOpen} />, [id]);
 
-  const avatarRender = useMemo(
-    () => (
-      <Avatar
-        animation={isHovering}
-        avatar={avatar}
-        background={avatarBackground}
-        shape="circle"
-        size={46}
-      />
-    ),
-    [isHovering, avatar, avatarBackground],
-  );
-
   const addon = useMemo(
     () =>
       !showModel ? undefined : (
@@ -96,23 +65,19 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   );
 
   return (
-    <Flexbox paddingBlock={1}>
-      <Item
-        actions={actions}
-        // needn't active state in mobile
-        active={mobile ? false : active}
-        addon={addon}
-        avatar={avatarRender}
-        className={styles.container}
-        date={updateAt}
-        description={description || systemRole}
-        loading={loading}
-        pin={pin}
-        ref={ref}
-        showAction={open || isHovering}
-        title={title}
-      />
-    </Flexbox>
+    <ListItem
+      actions={actions}
+      active={active}
+      addon={addon}
+      avatar={avatar}
+      avatarBackground={avatarBackground}
+      date={updateAt}
+      description={description || systemRole}
+      loading={loading}
+      pin={pin}
+      showAction={open}
+      title={title}
+    />
   );
 }, shallow);
 

src/app/chat/features/SessionListContent/ListItem/index.tsx

@@ -0,0 +1,61 @@
+import { Avatar, List, ListItemProps } from '@lobehub/ui';
+import { useHover } from 'ahooks';
+import { createStyles, useResponsive } from 'antd-style';
+import { memo, useMemo, useRef } from 'react';
+
+const { Item } = List;
+
+const useStyles = createStyles(({ css, token, responsive }) => {
+  return {
+    container: css`
+      position: relative;
+
+      margin-block: 2px;
+      padding-right: 16px;
+      padding-left: 8px;
+
+      border-radius: ${token.borderRadius}px;
+      ${responsive.mobile} {
+        margin-block: 0;
+        padding-left: 12px;
+        border-radius: 0;
+      }
+    `,
+  };
+});
+
+const ListItem = memo<ListItemProps & { avatar: string; avatarBackground?: string }>(
+  ({ avatar, avatarBackground, active, showAction, actions, ...props }) => {
+    const ref = useRef(null);
+    const isHovering = useHover(ref);
+    const { mobile } = useResponsive();
+    const { styles } = useStyles();
+
+    const avatarRender = useMemo(
+      () => (
+        <Avatar
+          animation={isHovering}
+          avatar={avatar}
+          background={avatarBackground}
+          shape="circle"
+          size={46}
+        />
+      ),
+      [isHovering, avatar, avatarBackground],
+    );
+
+    return (
+      <Item
+        actions={actions}
+        active={mobile ? false : active}
+        avatar={avatarRender}
+        className={styles.container}
+        ref={ref}
+        showAction={actions && (isHovering || showAction)}
+        {...(props as any)}
+      />
+    );
+  },
+);
+
+export default ListItem;