diff --git a/lib/shared/threads/protocols/farcaster-thread-protocol.js b/lib/shared/threads/protocols/farcaster-thread-protocol.js --- a/lib/shared/threads/protocols/farcaster-thread-protocol.js +++ b/lib/shared/threads/protocols/farcaster-thread-protocol.js @@ -829,8 +829,8 @@ membershipChangesShownInThreadPreview: false, usersWithoutDeviceListExcludedFromSearchResult: false, supportsMediaGallery: false, - nativeChatThreadListIcon: 'lock', - webChatThreadListIcon: 'lock', + nativeChatThreadListIcon: 'farcaster', + webChatThreadListIcon: 'farcaster', threadAncestorLabel: () => 'Farcaster DC', protocolIcon: 'farcaster', description: diff --git a/lib/shared/threads/thread-spec.js b/lib/shared/threads/thread-spec.js --- a/lib/shared/threads/thread-spec.js +++ b/lib/shared/threads/thread-spec.js @@ -484,7 +484,7 @@ +usersWithoutDeviceListExcludedFromSearchResult: boolean, +supportsMediaGallery: boolean, +nativeChatThreadListIcon: string, - +webChatThreadListIcon: 'lock' | 'server', + +webChatThreadListIcon: 'lock' | 'server' | 'farcaster', +threadAncestorLabel: (ancestorPath: React.Node) => React.Node, +protocolIcon: 'lock' | 'server' | 'farcaster', +description: string, 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 @@ -21,6 +21,7 @@ import ThreadAncestorsLabel from '../components/thread-ancestors-label.react.js'; import UnreadDot from '../components/unread-dot.react.js'; import { useColors, useStyles } from '../themes/colors.js'; +import FarcasterLogo from '../vectors/farcaster-logo.react.js'; type Props = { +data: ChatThreadItem, @@ -135,17 +136,27 @@ const iconStyle = data.threadInfo.currentUser.unread ? styles.iconUnread : styles.iconRead; - const iconName = + const nativeChatThreadListIcon = threadSpecs[data.threadInfo.type].protocol().presentationDetails .nativeChatThreadListIcon; + let iconComponent; + if (nativeChatThreadListIcon === 'farcaster') { + iconComponent = ( + + + + ); + } else { + const iconName = nativeChatThreadListIcon === 'lock' ? 'lock' : 'server'; + iconComponent = ; + } + const threadDetails = React.useMemo( () => ( - - - + {iconComponent} @@ -160,9 +171,8 @@ ), [ - iconStyle, + iconComponent, data.threadInfo, - iconName, lastActivity, lastActivityStyle, resolvedThreadInfo.uiName, @@ -298,6 +308,15 @@ iconUnread: { color: 'listForegroundLabel', }, + farcasterIcon: { + backgroundColor: '#855DCD', + borderRadius: 6, + width: 12, + height: 12, + justifyContent: 'center', + alignItems: 'center', + opacity: 0.7, + }, }; export { ChatThreadListItem, chatThreadListItemHeight, spacerHeight }; 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 @@ -24,6 +24,7 @@ import css from './chat-thread-list.css'; import MessagePreview from './message-preview.react.js'; import ThreadAvatar from '../avatars/thread-avatar.react.js'; +import CommIcon from '../comm-icon.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useOnClickThread, @@ -132,8 +133,29 @@ threadSpecs[threadInfo.type].protocol().presentationDetails; const iconClass = unread ? css.iconUnread : css.iconRead; - const icon = - presentationDetails.webChatThreadListIcon === 'lock' ? lock : server; + const webChatThreadListIcon = presentationDetails.webChatThreadListIcon; + + let icon; + if (webChatThreadListIcon === 'farcaster') { + icon = ( +
+ +
+ ); + } else { + let iconComponent; + if (webChatThreadListIcon === 'lock') { + iconComponent = ( + + ); + } else { + iconComponent = ( + + ); + } + icon =
{iconComponent}
; + } + const breadCrumbs = presentationDetails.threadAncestorLabel(ancestorPath); return ( @@ -147,9 +169,7 @@
-
- -
+ {icon}

{breadCrumbs}

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 @@ -297,6 +297,20 @@ padding: 7px 6px 2px 0; } +.farcasterIconBackground { + padding: 2px; + width: 12px; + height: 12px; + border-radius: 12px; + background-color: #855dcd; + display: flex; + justify-content: center; + align-items: center; + margin-left: 3px; + margin-right: 3px; + margin-bottom: -3px; +} + .header { display: flex; flex-direction: row;