Page MenuHomePhabricator
Files F3487491

D3373.id10186.diff
No OneTemporary
Actions

D3373.id10186.diff
View Options

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
@@ -9,18 +9,9 @@
flex-direction: column;
}
-div.tabs {
- display: flex;
- flex-direction: row;
- color: var(--fg);
- background: var(--bg);
-}
-
div.tabItem {
display: flex;
justify-content: center;
- width: 50%;
- padding: 16px 0;
text-align: center;
cursor: pointer;
}
@@ -30,16 +21,6 @@
div.tabItem span svg {
padding-right: 12px;
}
-div.tabItemActive {
- border: outset var(--thread-selection);
- border-width: 0 0 3px 0;
-}
-div.tabItemInactive {
- background-color: var(--bg);
- color: var(--color-disabled);
- border: 2px solid var(--border-color);
- border-width: 0 0 3px 0;
-}
div.threadList {
flex: 1;
diff --git a/web/chat/chat-tabs.react.js b/web/chat/chat-tabs.react.js
--- a/web/chat/chat-tabs.react.js
+++ b/web/chat/chat-tabs.react.js
@@ -5,6 +5,7 @@
import { unreadBackgroundCount } from 'lib/selectors/thread-selectors';
+import Tabs from '../components/tabs.react';
import { useSelector } from '../redux/redux-utils';
import css from './chat-tabs.css';
import ChatThreadList from './chat-thread-list.react';
@@ -24,33 +25,45 @@
);
const { activeTab, setActiveTab } = threadListContext;
- const onClickHome = React.useCallback(() => setActiveTab('Focus'), [
- setActiveTab,
- ]);
- const onClickBackground = React.useCallback(
- () => setActiveTab('Background'),
+ const setActiveChatTab = React.useCallback(
+ (newTab: string) => {
+ invariant(
+ newTab === 'Background' || newTab === 'Focus',
+ 'newTab must be Background or Focus',
+ );
+ setActiveTab(newTab);
+ },
[setActiveTab],
);
- return (
- <div className={css.container}>
- <div className={css.tabs}>
- <ChatThreadTab
- title="Focus"
- tabIsActive={activeTab === 'Focus'}
- onClick={onClickHome}
- icon="Filled"
- />
- <ChatThreadTab
- title={backgroundTitle}
- tabIsActive={activeTab === 'Background'}
- onClick={onClickBackground}
- icon="bell-disabled"
- />
- </div>
+ const chatThreadList = React.useMemo(
+ () => (
<div className={css.threadList}>
<ChatThreadList />
</div>
+ ),
+ [],
+ );
+
+ const tabs = React.useMemo(
+ () => [
+ {
+ id: 'Focus',
+ header: <ChatThreadTab title="Focus" icon="Filled" />,
+ content: chatThreadList,
+ },
+ {
+ id: 'Background',
+ header: <ChatThreadTab title={backgroundTitle} icon="bell-disabled" />,
+ content: chatThreadList,
+ },
+ ],
+ [backgroundTitle, chatThreadList],
+ );
+
+ return (
+ <div className={css.container}>
+ <Tabs tabs={tabs} activeTab={activeTab} setTab={setActiveChatTab}></Tabs>
</div>
);
}
diff --git a/web/chat/chat-thread-tab.react.js b/web/chat/chat-thread-tab.react.js
--- a/web/chat/chat-thread-tab.react.js
+++ b/web/chat/chat-thread-tab.react.js
@@ -1,6 +1,5 @@
// @flow
-import classNames from 'classnames';
import * as React from 'react';
import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
@@ -8,19 +7,13 @@
type Props = {
+title: string,
- +onClick: (title: string) => void,
- +tabIsActive: boolean,
+icon: Icon,
};
function ChatThreadTab(props: Props): React.Node {
- const { title, onClick, tabIsActive, icon } = props;
- const className = classNames({
- [css.tabItem]: true,
- [css.tabItemActive]: tabIsActive,
- [css.tabItemInactive]: !tabIsActive,
- });
+ const { title, icon } = props;
+
return (
- <div className={className} onClick={onClick}>
+ <div className={css.tabItem}>
<span>
<SWMansionIcon icon={icon} size={24} />
{title}

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 19, 8:08 AM (21 h, 8 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2676058
Default Alt Text
D3373.id10186.diff (3 KB)

Event Timeline