Page MenuHomePhabricator
Files F3522850

D7210.id24250.diff
No OneTemporary
Actions

D7210.id24250.diff
View Options

diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -6,6 +6,7 @@
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js';
import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
import {
useResolvedThreadInfo,
@@ -17,6 +18,7 @@
import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js';
import css from './chat-thread-list.css';
import MessagePreview from './message-preview.react.js';
+import Avatar from '../components/avatar.react.js';
import { useSelector } from '../redux/redux-utils.js';
import {
useOnClickThread,
@@ -82,12 +84,6 @@
unreadDot = <div className={css.unreadDot} />;
}
- const { color } = item.threadInfo;
- const colorSplotchStyle = React.useMemo(
- () => ({ backgroundColor: `#${color}` }),
- [color],
- );
-
const sidebars = item.sidebars.map((sidebarItem, index) => {
if (sidebarItem.type === 'sidebar') {
const { type, ...sidebarInfo } = sidebarItem;
@@ -128,13 +124,15 @@
});
const { uiName } = useResolvedThreadInfo(threadInfo);
+ const avatarInfo = useGetAvatarForThread(threadInfo);
+
return (
<>
<a className={containerClassName} onClick={selectItemIfNotActiveCreation}>
<div className={css.colorContainer}>
<div className={css.colorSplotchContainer}>
<div className={css.dotContainer}>{unreadDot}</div>
- <div className={css.colorSplotch} style={colorSplotchStyle} />
+ <Avatar size="large" avatarInfo={avatarInfo} />
</div>
</div>
<div className={css.threadButton}>
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
@@ -89,8 +89,7 @@
padding-top: 8px;
}
-div.spacer,
-div.colorSplotch {
+div.spacer {
width: 42px;
border-radius: 1.68px;
}
diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
--- a/web/chat/thread-top-bar.css
+++ b/web/chat/thread-top-bar.css
@@ -16,13 +16,6 @@
overflow: hidden;
}
-div.threadColorSquare {
- width: 24px;
- height: 24px;
- border-radius: 4px;
- flex: 0 0 auto;
-}
-
.threadTitle {
font-size: var(--m-font-16);
font-weight: var(--bold);
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -2,24 +2,20 @@
import * as React from 'react';
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
import { threadIsPending } from 'lib/shared/thread-utils.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
import ThreadMenu from './thread-menu.react.js';
import css from './thread-top-bar.css';
+import Avatar from '../components/avatar.react.js';
type ThreadTopBarProps = {
+threadInfo: ThreadInfo,
};
function ThreadTopBar(props: ThreadTopBarProps): React.Node {
const { threadInfo } = props;
- const threadBackgroundColorStyle = React.useMemo(
- () => ({
- background: `#${threadInfo.color}`,
- }),
- [threadInfo.color],
- );
let threadMenu = null;
if (!threadIsPending(threadInfo.id)) {
@@ -27,13 +23,12 @@
}
const { uiName } = useResolvedThreadInfo(threadInfo);
+ const avatarInfo = useGetAvatarForThread(threadInfo);
+
return (
<div className={css.topBarContainer}>
<div className={css.topBarThreadInfo}>
- <div
- className={css.threadColorSquare}
- style={threadBackgroundColorStyle}
- />
+ <Avatar size="small" avatarInfo={avatarInfo} />
<div className={css.threadTitle}>{uiName}</div>
</div>
{threadMenu}
diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css
--- a/web/navigation-panels/nav-state-info-bar.css
+++ b/web/navigation-panels/nav-state-info-bar.css
@@ -7,11 +7,7 @@
overflow: hidden;
}
-div.threadColorSquare {
- width: 24px;
- height: 24px;
- border-radius: 4px;
- flex: 0 0 auto;
+div.avatarContainer {
margin: 0 12px 0 16px;
}
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -3,10 +3,12 @@
import classnames from 'classnames';
import * as React from 'react';
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import ThreadAncestors from './chat-thread-ancestors.react.js';
import css from './nav-state-info-bar.css';
+import Avatar from '../components/avatar.react.js';
type NavStateInfoBarProps = {
+threadInfo: ThreadInfo,
@@ -14,19 +16,13 @@
function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
const { threadInfo } = props;
- const threadBackgroundColorStyle = React.useMemo(
- () => ({
- background: `#${threadInfo.color}`,
- }),
- [threadInfo.color],
- );
+ const avatarInfo = useGetAvatarForThread(threadInfo);
return (
<>
- <div
- className={css.threadColorSquare}
- style={threadBackgroundColorStyle}
- />
+ <div className={css.avatarContainer}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
+ </div>
<ThreadAncestors threadInfo={threadInfo} />
</>
);

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 7:44 AM (19 h, 20 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2699060
Default Alt Text
D7210.id24250.diff (5 KB)

Event Timeline