Page MenuHomePhabricator

D4469.diff
No OneTemporary

D4469.diff

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 (
- <div className={css.threadListContainer}>
- <Search
- onChangeText={setSearchText}
- searchText={searchText}
- placeholder="Search chats"
- />
- <div>{threadComponents}</div>
- </div>
+ <>
+ <div className={css.threadListContainer}>
+ <Search
+ onChangeText={setSearchText}
+ searchText={searchText}
+ placeholder="Search chats"
+ />
+ <div>{threadComponents}</div>
+ </div>
+ <div className={css.createNewThread}>
+ <Button disabled={isThreadCreation} onClick={onClickNewThread}>
+ Create new chat
+ </Button>
+ </div>
+ </>
);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 30, 12:18 AM (21 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2598770
Default Alt Text
D4469.diff (2 KB)

Event Timeline