Commit c00e9608 authored by Joel's avatar Joel

fix: two list scroll ui

parent 2c016606
...@@ -64,6 +64,8 @@ const Sidebar: FC<ISidebarProps> = ({ ...@@ -64,6 +64,8 @@ const Sidebar: FC<ISidebarProps> = ({
checkHasPinned() checkHasPinned()
}, [controlUpdateList]) }, [controlUpdateList])
const maxListHeight = isInstalledApp ? 'max-h-[30vh]' : 'max-h-[40vh]'
return ( return (
<div <div
className={ className={
...@@ -88,13 +90,13 @@ const Sidebar: FC<ISidebarProps> = ({ ...@@ -88,13 +90,13 @@ const Sidebar: FC<ISidebarProps> = ({
<PencilSquareIcon className="mr-2 h-4 w-4" /> {t('share.chat.newChat')} <PencilSquareIcon className="mr-2 h-4 w-4" /> {t('share.chat.newChat')}
</Button> </Button>
</div> </div>
<div className='flex-grow'> <div className='flex-grow h-0 overflow-y-auto overflow-x-hidden'>
{/* pinned list */} {/* pinned list */}
{hasPinned && ( {hasPinned && (
<div className='mt-4 px-4'> <div className='mt-4 px-4'>
<div className='mb-1.5 leading-[18px] text-xs text-gray-500 font-medium uppercase'>{t('share.chat.pinnedTitle')}</div> <div className='mb-1.5 leading-[18px] text-xs text-gray-500 font-medium uppercase'>{t('share.chat.pinnedTitle')}</div>
<List <List
className='max-h-[40vh]' className={maxListHeight}
currentId={currentId} currentId={currentId}
onCurrentIdChange={onCurrentIdChange} onCurrentIdChange={onCurrentIdChange}
list={pinnedList} list={pinnedList}
...@@ -114,7 +116,7 @@ const Sidebar: FC<ISidebarProps> = ({ ...@@ -114,7 +116,7 @@ const Sidebar: FC<ISidebarProps> = ({
<div className='mb-1.5 leading-[18px] text-xs text-gray-500 font-medium uppercase'>{t('share.chat.unpinnedTitle')}</div> <div className='mb-1.5 leading-[18px] text-xs text-gray-500 font-medium uppercase'>{t('share.chat.unpinnedTitle')}</div>
)} )}
<List <List
className={cn(hasPinned ? 'max-h-[40vh]' : 'flex-grow')} className={cn(hasPinned ? maxListHeight : 'flex-grow')}
currentId={currentId} currentId={currentId}
onCurrentIdChange={onCurrentIdChange} onCurrentIdChange={onCurrentIdChange}
list={list} list={list}
......
...@@ -27,6 +27,7 @@ export type IListProps = { ...@@ -27,6 +27,7 @@ export type IListProps = {
} }
const List: FC<IListProps> = ({ const List: FC<IListProps> = ({
className,
currentId, currentId,
onCurrentIdChange, onCurrentIdChange,
list, list,
...@@ -60,7 +61,7 @@ const List: FC<IListProps> = ({ ...@@ -60,7 +61,7 @@ const List: FC<IListProps> = ({
return ( return (
<nav <nav
ref={listRef} ref={listRef}
className="space-y-1 bg-white pb-[60px] overflow-y-auto" className={cn(className, 'shrink-0 space-y-1 bg-white pb-[60px] overflow-y-auto')}
> >
{list.map((item) => { {list.map((item) => {
const isCurrent = item.id === currentId const isCurrent = item.id === currentId
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment