Page MenuHomePhabricator
Files F3243452

D3147.id9650.diff
No OneTemporary
Actions

D3147.id9650.diff
View Options

diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -45,6 +45,7 @@
MessagePositionInfo,
} from './position-types';
import RelationshipPrompt from './relationship-prompt/relationship-prompt';
+import ThreadTopBar from './thread-top-bar.react';
type BaseProps = {
+setModal: (modal: ?React.Node) => void,
@@ -284,6 +285,7 @@
});
return connectDropTarget(
<div className={containerStyle} ref={this.containerRef}>
+ <ThreadTopBar threadInfo={threadInfo} />
<div className={css.outerMessageContainer}>
{relationshipPrompt}
<div className={messageContainerStyle} ref={this.messageContainerRef}>
diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
new file mode 100644
--- /dev/null
+++ b/web/chat/thread-top-bar.css
@@ -0,0 +1,34 @@
+div.topBarContainer {
+ display: flex;
+ background-color: var(--bg);
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px;
+ color: var(--thread-top-bar-color);
+ border-bottom: 1px solid var(--border);
+}
+
+div.topBarThreadInfo {
+ height: 24px;
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+}
+
+div.threadColorSquare {
+ width: 24px;
+ height: 24px;
+ border-radius: 4px;
+}
+
+p.threadTitle {
+ font-size: var(--m-font-16);
+ font-weight: var(--bold);
+}
+
+button.topBarMenu {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ color: var(--thread-top-bar-menu-color);
+}
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/thread-top-bar.react.js
@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import SWMansionIcon from '../SWMansionIcon.react';
+import css from './thread-top-bar.css';
+
+type threadTopBarProps = {
+ +threadInfo: ThreadInfo,
+};
+function ThreadTopBar(props: threadTopBarProps): React.Node {
+ const { threadInfo } = props;
+ const threadBackgroundColorStyle = React.useMemo(
+ () => ({
+ background: `#${threadInfo.color}`,
+ }),
+ [threadInfo.color],
+ );
+
+ return (
+ <div className={css.topBarContainer}>
+ <div className={css.topBarThreadInfo}>
+ <div
+ className={css.threadColorSquare}
+ style={threadBackgroundColorStyle}
+ />
+ <p className={css.threadTitle}>{threadInfo.uiName}</p>
+ </div>
+ <button className={css.topBarMenu}>
+ <SWMansionIcon icon="menu-vertical" size={20} />
+ </button>
+ </div>
+ );
+}
+
+export default ThreadTopBar;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -96,4 +96,6 @@
--disconnected-bar-connecting-bg: var(--shades-white-70);
--disconnected-bar-connecting-color: var(--shades-black-100);
--permission-color: var(--shades-white-60);
+ --thread-top-bar-color: var(--shades-white-100);
+ --thread-top-bar-menu-color: var(--shades-white-70);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 15, 8:49 AM (2 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2493695
Default Alt Text
D3147.id9650.diff (3 KB)

Event Timeline