Page MenuHomePhabricator
Files F3741737

D10523.id35309.diff
No OneTemporary
Actions

D10523.id35309.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
@@ -3,15 +3,7 @@
background-color: var(--bg);
border-right: 1px solid var(--border-color);
display: flex;
-}
-
-div.tabItem {
- display: flex;
- align-items: center;
-}
-
-div.tabItem svg {
- padding-right: 8px;
+ flex-direction: column;
}
div.threadList {
@@ -20,4 +12,5 @@
display: flex;
flex-direction: column;
justify-content: space-between;
+ border-top: 1px solid var(--border-color);
}
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
@@ -7,17 +7,33 @@
import css from './chat-tabs.css';
import ChatThreadList from './chat-thread-list.react.js';
-import ChatThreadTab from './chat-thread-tab.react.js';
import { ThreadListContext } from './thread-list-provider.js';
-import Tabs from '../components/tabs-legacy.react.js';
+import Tabs, { type TabData } from '../components/tabs.react.js';
import { useSelector } from '../redux/redux-utils.js';
+type TabType = 'Background' | 'Focus';
+
function ChatTabs(): React.Node {
let backgroundTitle = 'Background';
const unreadBackgroundCountVal = useSelector(unreadBackgroundCount);
if (unreadBackgroundCountVal) {
backgroundTitle += ` (${unreadBackgroundCountVal})`;
}
+
+ const tabsData: $ReadOnlyArray<TabData<TabType>> = React.useMemo(
+ () => [
+ {
+ id: 'Focus',
+ header: 'Focused',
+ },
+ {
+ id: 'Background',
+ header: backgroundTitle,
+ },
+ ],
+ [backgroundTitle],
+ );
+
const threadListContext = React.useContext(ThreadListContext);
invariant(
threadListContext,
@@ -25,55 +41,31 @@
);
const { activeTab, setActiveTab } = threadListContext;
- const setActiveChatTab = React.useCallback(
- (newTab: 'Background' | 'Focus') => {
- setActiveTab(newTab);
- },
- [setActiveTab],
- );
-
- const chatThreadList = React.useMemo(
+ const tabs = React.useMemo(
() => (
- <div className={css.threadList}>
- <ChatThreadList />
- </div>
- ),
- [],
- );
-
- const focusTabsItem = React.useMemo(
- () => (
- <Tabs.Item id="Focus" header={<ChatThreadTab title="Focused" />}>
- {chatThreadList}
- </Tabs.Item>
+ <Tabs
+ tabItems={tabsData}
+ activeTab={activeTab}
+ setTab={setActiveTab}
+ headerStyle="pill"
+ />
),
- [chatThreadList],
+ [activeTab, setActiveTab, tabsData],
);
- const backgroundTabsItem = React.useMemo(
+ const chatTabs = React.useMemo(
() => (
- <Tabs.Item
- id="Background"
- header={<ChatThreadTab title={backgroundTitle} />}
- >
- {chatThreadList}
- </Tabs.Item>
+ <div className={css.container}>
+ {tabs}
+ <div className={css.threadList}>
+ <ChatThreadList />
+ </div>
+ </div>
),
- [backgroundTitle, chatThreadList],
+ [tabs],
);
- return (
- <div className={css.container}>
- <Tabs.Container
- activeTab={activeTab}
- setTab={setActiveChatTab}
- headerStyle="pill"
- >
- {focusTabsItem}
- {backgroundTabsItem}
- </Tabs.Container>
- </div>
- );
+ return chatTabs;
}
export default ChatTabs;
diff --git a/web/chat/chat-thread-tab.react.js b/web/chat/chat-thread-tab.react.js
deleted file mode 100644
--- a/web/chat/chat-thread-tab.react.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import css from './chat-tabs.css';
-
-type Props = {
- +title: string,
-};
-function ChatThreadTab(props: Props): React.Node {
- const { title } = props;
-
- return <div className={css.tabItem}>{title}</div>;
-}
-
-export default ChatThreadTab;

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 10, 12:10 PM (15 h, 49 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2843474
Default Alt Text
D10523.id35309.diff (3 KB)

Event Timeline