diff --git a/web/chat/chat-tabs.css b/web/chat/chat-tabs.css --- a/web/chat/chat-tabs.css +++ b/web/chat/chat-tabs.css @@ -6,7 +6,6 @@ background-color: var(--bg); border-right: 1px solid var(--border-color); display: flex; - flex-direction: column; } div.tabItem { @@ -21,4 +20,7 @@ div.threadList { flex: 1; overflow-y: auto; + display: flex; + flex-direction: column; + justify-content: space-between; } diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css --- a/web/chat/chat-thread-list.css +++ b/web/chat/chat-thread-list.css @@ -301,6 +301,14 @@ div.threadListContainer { display: flex; flex-direction: column; + overflow: auto; +} + +div.createNewThread { + display: flex; + flex-direction: column; + align-items: stretch; + padding: 8px; } img.longArrow { height: 40px; diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js --- a/web/chat/chat-thread-list.react.js +++ b/web/chat/chat-thread-list.react.js @@ -6,7 +6,10 @@ import { emptyItemText } from 'lib/shared/thread-utils'; import { assetCacheURLPrefix, backgroundIllustrationAsset } from '../assets'; +import Button from '../components/button.react'; import Search from '../components/search.react'; +import { useSelector } from '../redux/redux-utils'; +import { useOnClickNewThread } from '../selectors/nav-selectors'; import ChatThreadListItem from './chat-thread-list-item.react'; import css from './chat-thread-list.css'; import { ThreadListContext } from './thread-list-provider'; @@ -23,6 +26,13 @@ setSearchText, searchText, } = threadListContext; + + const onClickNewThread = useOnClickNewThread(); + + const isThreadCreation = useSelector( + state => state.navInfo.chatMode === 'create', + ); + const isBackground = activeTab === 'Background'; const threadComponents: React.Node[] = React.useMemo(() => { @@ -36,14 +46,21 @@ }, [threadList, isBackground]); return ( -