Page MenuHomePhabricator
Files F2908080

D3373.diff
No OneTemporary
Actions

D3373.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,43 +9,14 @@
flex-direction: column;
}
-div.tabs {
- display: flex;
- flex-direction: row;
- color: var(--fg);
- background: var(--bg);
-}
-
div.tabItem {
display: flex;
- justify-content: center;
align-items: center;
- width: 50%;
- padding: 16px 0;
- text-align: center;
- cursor: pointer;
- background-color: var(--bg);
- color: var(--color-disabled);
- border: 2px solid var(--border-color);
- border-width: 0 0 3px 0;
- transition: 150ms;
-}
-div.tabItem:hover {
- color: var(--fg);
- transition: 150ms;
}
+
div.tabItem svg {
padding-right: 8px;
}
-div.tabItemActive {
- border: outset var(--thread-selection);
- color: var(--fg);
- border-width: 0 0 3px 0;
-}
-div.tabItemInactive {
- background-color: var(--bg);
- color: var(--color-disabled);
-}
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,52 @@
);
const { activeTab, setActiveTab } = threadListContext;
- const onClickHome = React.useCallback(() => setActiveTab('Focus'), [
- setActiveTab,
- ]);
- const onClickBackground = React.useCallback(
- () => setActiveTab('Background'),
+ const setActiveChatTab = React.useCallback(
+ (newTab: 'Background' | 'Focus') => {
+ setActiveTab(newTab);
+ },
[setActiveTab],
);
- return (
- <div className={css.container}>
- <div className={css.tabs}>
- <ChatThreadTab
- title="Focus"
- tabIsActive={activeTab === 'Focus'}
- onClick={onClickHome}
- icon="message-filled-round"
- />
- <ChatThreadTab
- title={backgroundTitle}
- tabIsActive={activeTab === 'Background'}
- onClick={onClickBackground}
- icon="bell-disabled"
- />
- </div>
+ const chatThreadList = React.useMemo(
+ () => (
<div className={css.threadList}>
<ChatThreadList />
</div>
+ ),
+ [],
+ );
+
+ const focusTabsItem = React.useMemo(
+ () => (
+ <Tabs.Item
+ id="Focus"
+ header={<ChatThreadTab title="Focus" icon="message-filled-round" />}
+ >
+ {chatThreadList}
+ </Tabs.Item>
+ ),
+ [chatThreadList],
+ );
+
+ const backgroundTabsItem = React.useMemo(
+ () => (
+ <Tabs.Item
+ id="Background"
+ header={<ChatThreadTab title={backgroundTitle} icon="bell-disabled" />}
+ >
+ {chatThreadList}
+ </Tabs.Item>
+ ),
+ [backgroundTitle, chatThreadList],
+ );
+
+ return (
+ <div className={css.container}>
+ <Tabs.Container activeTab={activeTab} setTab={setActiveChatTab}>
+ {focusTabsItem}
+ {backgroundTabsItem}
+ </Tabs.Container>
</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,20 +7,15 @@
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, {
- [css.tabItemActive]: tabIsActive,
- });
+ const { title, icon } = props;
return (
- <div className={className} onClick={onClick}>
+ <div className={css.tabItem}>
<SWMansionIcon icon={icon} size={24} />
- <span>{title}</span>
+ {title}
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Oct 7, 1:33 PM (21 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2254607
Default Alt Text
D3373.diff (4 KB)

Event Timeline