Page MenuHomePhabricator
Files F3517605

D13320.id44187.diff
No OneTemporary
Actions

D13320.id44187.diff
View Options

diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js
--- a/native/chat/chat-thread-list-item.react.js
+++ b/native/chat/chat-thread-list-item.react.js
@@ -1,10 +1,12 @@
// @flow
+import Icon from '@expo/vector-icons/FontAwesome.js';
import * as React from 'react';
import { Text, View } from 'react-native';
import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js';
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import { threadTypeIsThick } from 'lib/types/thread-types-enum.js';
import type { UserInfo } from 'lib/types/user-types.js';
import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
@@ -148,10 +150,22 @@
[data.threadInfo, styles.avatarContainer],
);
+ const isThick = threadTypeIsThick(data.threadInfo.type);
+ const iconStyle = data.threadInfo.currentUser.unread
+ ? styles.iconUnread
+ : styles.iconRead;
+
+ const iconName = isThick ? 'lock' : 'server';
+
const threadDetails = React.useMemo(
() => (
<View style={styles.threadDetails}>
- <ThreadAncestorsLabel threadInfo={data.threadInfo} />
+ <View style={styles.header}>
+ <View style={styles.iconContainer}>
+ <Icon name={iconName} size={12} style={iconStyle} />
+ </View>
+ <ThreadAncestorsLabel threadInfo={data.threadInfo} />
+ </View>
<View style={styles.row}>
<SingleLine style={threadNameStyle}>
{resolvedThreadInfo.uiName}
@@ -164,11 +178,15 @@
</View>
),
[
+ iconStyle,
data.threadInfo,
+ iconName,
lastActivity,
lastActivityStyle,
lastMessage,
resolvedThreadInfo.uiName,
+ styles.header,
+ styles.iconContainer,
styles.row,
styles.threadDetails,
threadNameStyle,
@@ -292,6 +310,19 @@
spacer: {
height: spacerHeight,
},
+ header: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ iconContainer: {
+ marginRight: 6,
+ },
+ iconRead: {
+ color: 'listForegroundTertiaryLabel',
+ },
+ iconUnread: {
+ color: 'listForegroundLabel',
+ },
};
export { ChatThreadListItem, chatThreadListItemHeight, spacerHeight };
diff --git a/native/components/thread-ancestors-label.react.js b/native/components/thread-ancestors-label.react.js
--- a/native/components/thread-ancestors-label.react.js
+++ b/native/components/thread-ancestors-label.react.js
@@ -6,6 +6,7 @@
import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import { threadTypeIsThick } from 'lib/types/thread-types-enum.js';
import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
import { useColors, useStyles } from '../themes/colors.js';
@@ -50,16 +51,17 @@
return unread ? [styles.pathText, styles.unread] : styles.pathText;
}, [styles.pathText, styles.unread, unread]);
- const threadAncestorsLabel = React.useMemo(
- () => (
+ const isThick = threadTypeIsThick(threadInfo.type);
+
+ return React.useMemo(() => {
+ const label = isThick ? 'Local DM' : ancestorPath;
+
+ return (
<Text numberOfLines={1} style={ancestorPathStyle}>
- {ancestorPath}
+ {label}
</Text>
- ),
- [ancestorPath, ancestorPathStyle],
- );
-
- return threadAncestorsLabel;
+ );
+ }, [ancestorPath, ancestorPathStyle, isThick]);
}
const unboundStyles = {
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
@@ -1,11 +1,17 @@
// @flow
+import {
+ faServer as server,
+ faLock as lock,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import * as React from 'react';
import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js';
import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
+import { threadTypeIsThick } from 'lib/types/thread-types-enum.js';
import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
import {
useResolvedThreadInfo,
@@ -124,6 +130,12 @@
const { uiName } = useResolvedThreadInfo(threadInfo);
+ const isThick = threadTypeIsThick(threadInfo.type);
+
+ const iconClass = unread ? css.iconUnread : css.iconRead;
+ const icon = isThick ? lock : server;
+ const breadCrumbs = isThick ? 'Local DM' : ancestorPath;
+
return (
<>
<a className={containerClassName} onClick={selectItemIfNotActiveCreation}>
@@ -134,7 +146,12 @@
</div>
</div>
<div className={css.threadButton}>
- <p className={breadCrumbsClassName}>{ancestorPath}</p>
+ <div className={css.header}>
+ <div className={css.iconWrapper}>
+ <FontAwesomeIcon size="xs" className={iconClass} icon={icon} />
+ </div>
+ <p className={breadCrumbsClassName}>{breadCrumbs}</p>
+ </div>
<div className={css.threadRow}>
<div className={titleClassName}>{uiName}</div>
</div>
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
@@ -284,3 +284,21 @@
.searchBarContainer {
padding: 1rem;
}
+
+.iconRead {
+ color: var(--breadcrumb-color);
+}
+
+.iconUnread {
+ color: var(--breadcrumb-color-unread);
+}
+
+.iconWrapper {
+ padding: 7px 6px 2px 0;
+}
+
+.header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 23, 5:54 PM (19 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2694689
Default Alt Text
D13320.id44187.diff (5 KB)

Event Timeline