fix: ellipsis on name rather than pubkey

also cleaned up our contexts a little bit
oxen-io · Mar 19, 2024 · cef59be · cef59be
1 parent 4774c8a
commit cef59be
Show file tree

Hide file tree

Showing 29 changed files with 176 additions and 136 deletions.
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -609,6 +609,9 @@
   flex-direction: column;
   align-items: stretch;
   overflow: hidden;
+  max-height: 100%;
+  display: flex;
+  gap: 5px;
 
   .session-icon-button:first-child {
     margin-right: var(--margins-sm);

diff --git a/ts/components/conversation/ContactName.tsx b/ts/components/conversation/ContactName.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
 import classNames from 'classnames';
-import { CSSProperties } from 'styled-components';
+import React from 'react';
 
-import { Emojify } from './Emojify';
 import {
-  useNicknameOrProfileNameOrShortenedPubkey,
   useIsPrivate,
+  useNicknameOrProfileNameOrShortenedPubkey,
 } from '../../hooks/useParamSelector';
+import { Emojify } from './Emojify';
 
 type Props = {
   pubkey: string;
@@ -25,12 +24,20 @@ export const ContactName = (props: Props) => {
   const convoName = useNicknameOrProfileNameOrShortenedPubkey(pubkey);
   const isPrivate = useIsPrivate(pubkey);
   const shouldShowProfile = Boolean(convoName || profileName || name);
+
+  const commonStyles = {
+    'min-width': 0,
+    'text-overflow': 'ellipsis',
+    overflow: 'hidden',
+  } as React.CSSProperties;
+
   const styles = (
     boldProfileName
       ? {
           fontWeight: 'bold',
+          ...commonStyles,
         }
-      : {}
+      : commonStyles
   ) as React.CSSProperties;
   const textProfile = profileName || name || convoName || window.i18n('anonymous');
 
@@ -39,15 +46,19 @@ export const ContactName = (props: Props) => {
       className={classNames(prefix, compact && 'compact')}
       dir="auto"
       data-testid={`${prefix}__profile-name`}
-      style={{ textOverflow: 'inherit' }}
+      style={{
+        textOverflow: 'inherit',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 'var(--margins-xs)',
+      }}
     >
       {shouldShowProfile ? (
-        <span style={styles as CSSProperties} className={`${prefix}__profile-name`}>
+        <div style={styles} className={`${prefix}__profile-name`}>
           <Emojify text={textProfile} sizeClass="small" isGroup={!isPrivate} />
-        </span>
+        </div>
       ) : null}
-      {shouldShowProfile ? ' ' : null}
-      {shouldShowPubkey ? <span className={`${prefix}__profile-number`}>{pubkey}</span> : null}
+      {shouldShowPubkey ? <div className={`${prefix}__profile-number`}>{pubkey}</div> : null}
     </span>
   );
 };
diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import {
@@ -10,10 +10,10 @@ import {
   isVideoAttachment,
 } from '../../types/Attachment';
 
+import { useIsMessageVisible } from '../../contexts/isMessageVisibleContext';
 import { useMessageSelected } from '../../state/selectors';
 import { THUMBNAIL_SIDE } from '../../types/attachments/VisualAttachment';
 import { Image } from './Image';
-import { IsMessageVisibleContext } from './message/message-content/MessageContent';
 
 type Props = {
   attachments: Array<AttachmentTypeWithPath>;
@@ -46,7 +46,7 @@ const Row = (
     totalAttachmentsCount,
     selected,
   } = props;
-  const isMessageVisible = useContext(IsMessageVisibleContext);
+  const isMessageVisible = useIsMessageVisible();
   const moreMessagesOverlay = totalAttachmentsCount > 3;
   const moreMessagesOverlayText = moreMessagesOverlay ? `+${totalAttachmentsCount - 3}` : undefined;
 

diff --git a/ts/components/conversation/SessionLastSeenIndicator.tsx b/ts/components/conversation/SessionLastSeenIndicator.tsx
@@ -1,9 +1,9 @@
-import React, { useContext, useLayoutEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
+import { useScrollToLoadedMessage } from '../../contexts/ScrollToLoadedMessage';
 import { getQuotedMessageToAnimate } from '../../state/selectors/conversations';
 import { isDarkTheme } from '../../state/selectors/theme';
-import { ScrollToLoadedMessageContext } from './SessionMessagesListContainer';
 
 const LastSeenBar = styled.div`
   height: 2px;
@@ -52,7 +52,7 @@ export const SessionLastSeenIndicator = (props: {
   const darkMode = useSelector(isDarkTheme);
   // if this unread-indicator is not unique it's going to cause issues
   const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate);
-  const scrollToLoadedMessage = useContext(ScrollToLoadedMessageContext);
+  const scrollToLoadedMessage = useScrollToLoadedMessage();
 
   const { messageId, didScroll, setDidScroll } = props;
 

diff --git a/ts/components/conversation/SessionMessagesList.tsx b/ts/components/conversation/SessionMessagesList.tsx
@@ -26,9 +26,10 @@ import { Message } from './message/message-item/Message';
 import { MessageRequestResponse } from './message/message-item/MessageRequestResponse';
 import { CallNotification } from './message/message-item/notification-bubble/CallNotification';
 
-import { DataExtractionNotification } from './message/message-item/DataExtractionNotification';
+import { IsDetailMessageViewContext } from '../../contexts/isDetailViewContext';
 import { SessionLastSeenIndicator } from './SessionLastSeenIndicator';
 import { TimerNotification } from './TimerNotification';
+import { DataExtractionNotification } from './message/message-item/DataExtractionNotification';
 import { InteractionNotification } from './message/message-item/InteractionNotification';
 
 function isNotTextboxEvent(e: KeyboardEvent) {
@@ -98,7 +99,7 @@ export const SessionMessagesList = (props: {
   }
 
   return (
-    <>
+    <IsDetailMessageViewContext.Provider value={false}>
       {messagesProps.map(messageProps => {
         const messageId = messageProps.message.props.messageId;
         const unreadIndicator = messageProps.showUnreadIndicator ? (
@@ -170,6 +171,6 @@ export const SessionMessagesList = (props: {
 
         return [<Message messageId={messageId} key={messageId} />, ...componentToMerge];
       })}
-    </>
+    </IsDetailMessageViewContext.Provider>
   );
 };
diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx
@@ -15,6 +15,10 @@ import {
 } from '../../state/ducks/conversations';
 import { SessionScrollButton } from '../SessionScrollButton';
 
+import {
+  ScrollToLoadedMessageContext,
+  ScrollToLoadedReasons,
+} from '../../contexts/ScrollToLoadedMessage';
 import { StateType } from '../../state/reducer';
 import {
   getQuotedMessageToAnimate,
@@ -31,17 +35,6 @@ export type SessionMessageListProps = {
 };
 export const messageContainerDomID = 'messages-container';
 
-export type ScrollToLoadedReasons =
-  | 'quote-or-search-result'
-  | 'go-to-bottom'
-  | 'unread-indicator'
-  | 'load-more-top'
-  | 'load-more-bottom';
-
-export const ScrollToLoadedMessageContext = React.createContext(
-  (_loadedMessageIdToScrollTo: string, _reason: ScrollToLoadedReasons) => {}
-);
-
 type Props = SessionMessageListProps & {
   conversationKey?: string;
   messagesProps: Array<SortedMessageModelProps>;

diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx
@@ -1,10 +1,13 @@
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import moment from 'moment';
-import React, { createContext, useCallback, useContext, useLayoutEffect, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useState } from 'react';
 import { InView } from 'react-intersection-observer';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
+import { useScrollToLoadedMessage } from '../../../../contexts/ScrollToLoadedMessage';
+import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext';
+import { IsMessageVisibleContext } from '../../../../contexts/isMessageVisibleContext';
 import { MessageModelType, MessageRenderingProps } from '../../../../models/messageType';
 import { StateType } from '../../../../state/reducer';
 import {
@@ -19,8 +22,6 @@ import {
 } from '../../../../state/selectors/conversations';
 import { useSelectedIsPrivate } from '../../../../state/selectors/selectedConversation';
 import { canDisplayImage } from '../../../../types/Attachment';
-import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
-import { hasDetailView } from '../message-item/Message';
 import { MessageAttachment } from './MessageAttachment';
 import { MessageAvatar } from './MessageAvatar';
 import { MessageHighlighter } from './MessageHighlighter';
@@ -33,7 +34,7 @@ export type MessageContentSelectorProps = Pick<
   'text' | 'direction' | 'timestamp' | 'serverTimestamp' | 'previews' | 'quote' | 'attachments'
 >;
 
-type Props = hasDetailView & {
+type Props = {
   messageId: string;
 };
 
@@ -76,13 +77,13 @@ const StyledMessageOpaqueContent = styled(MessageHighlighter)<{
   ${props => props.selected && `box-shadow: var(--drop-shadow);`}
 `;
 
-export const IsMessageVisibleContext = createContext(false);
-
 const StyledAvatarContainer = styled.div`
   align-self: flex-end;
 `;
 
 export const MessageContent = (props: Props) => {
+  const isDetailView = useIsDetailMessageView();
+
   const [highlight, setHighlight] = useState(false);
   const [didScroll, setDidScroll] = useState(false);
   const contentProps = useSelector((state: StateType) =>
@@ -91,9 +92,9 @@ export const MessageContent = (props: Props) => {
   const isDeleted = useMessageIsDeleted(props.messageId);
   const [isMessageVisible, setMessageIsVisible] = useState(false);
 
-  const scrollToLoadedMessage = useContext(ScrollToLoadedMessageContext);
+  const scrollToLoadedMessage = useScrollToLoadedMessage();
   const selectedIsPrivate = useSelectedIsPrivate();
-  const hideAvatar = useHideAvatarInMsgList(props.messageId, props.isDetailView);
+  const hideAvatar = useHideAvatarInMsgList(props.messageId, isDetailView);
 
   const [imageBroken, setImageBroken] = useState(false);
 
@@ -153,8 +154,7 @@ export const MessageContent = (props: Props) => {
 
   const toolTipTitle = moment(serverTimestamp || timestamp).format('llll');
 
-  const isDetailViewAndSupportsAttachmentCarousel =
-    props.isDetailView && canDisplayImage(attachments);
+  const isDetailViewAndSupportsAttachmentCarousel = isDetailView && canDisplayImage(attachments);
 
   return (
     <StyledMessageContent
@@ -181,6 +181,7 @@ export const MessageContent = (props: Props) => {
           display: 'flex',
           flexDirection: 'column',
           gap: 'var(--margins-xs)',
+          maxWidth: '100%',
         }}
       >
         <IsMessageVisibleContext.Provider value={isMessageVisible}>
@@ -192,7 +193,7 @@ export const MessageContent = (props: Props) => {
             >
               {!isDeleted && (
                 <>
-                  <MessageQuote messageId={props.messageId} isDetailView={props.isDetailView} />
+                  <MessageQuote messageId={props.messageId} />
                   <MessageLinkPreview
                     messageId={props.messageId}
                     handleImageError={handleImageError}

diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
+import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext';
 import { replyToMessage } from '../../../../interactions/conversationInteractions';
 import { MessageRenderingProps } from '../../../../models/messageType';
 import { toggleSelectedMessageId } from '../../../../state/ducks/conversations';
@@ -15,7 +16,6 @@ import {
 import { Reactions } from '../../../../util/reactions';
 import { Flex } from '../../../basic/Flex';
 import { ExpirableReadableMessage } from '../message-item/ExpirableReadableMessage';
-import { hasDetailView } from '../message-item/Message';
 import { MessageAuthorText } from './MessageAuthorText';
 import { MessageContent } from './MessageContent';
 import { MessageContextMenu } from './MessageContextMenu';
@@ -27,32 +27,35 @@ export type MessageContentWithStatusSelectorProps = { isGroup: boolean } & Pick<
   'conversationType' | 'direction' | 'isDeleted'
 >;
 
-type Props = hasDetailView & {
+type Props = {
   messageId: string;
   ctxMenuID: string;
   dataTestId: string;
   enableReactions: boolean;
 };
 
-const StyledMessageContentContainer = styled.div<hasDetailView & { isIncoming: boolean }>`
+const StyledMessageContentContainer = styled.div<{ isIncoming: boolean; isDetailView: boolean }>`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: ${props => (props.isIncoming ? 'flex-start' : 'flex-end')};
   padding-left: ${props => (props.isDetailView || props.isIncoming ? 0 : '25%')};
   padding-right: ${props => (props.isDetailView || !props.isIncoming ? 0 : '25%')};
   width: 100%;
+  max-width: '100%';
   margin-right: var(--margins-md);
 `;
 
 const StyledMessageWithAuthor = styled.div`
-  max-width: '100%';
+  max-width: 100%;
   display: flex;
   flex-direction: column;
   min-width: 0;
 `;
 
 export const MessageContentWithStatuses = (props: Props) => {
+  const isDetailView = useIsDetailMessageView();
+
   const contentProps = useSelector((state: StateType) =>
     getMessageContentWithStatusesSelectorProps(state, props.messageId)
   );
@@ -91,7 +94,7 @@ export const MessageContentWithStatuses = (props: Props) => {
     }
   };
 
-  const { messageId, ctxMenuID, isDetailView = false, dataTestId, enableReactions } = props;
+  const { messageId, ctxMenuID, dataTestId, enableReactions } = props;
   const [popupReaction, setPopupReaction] = useState('');
 
   if (!contentProps) {
@@ -128,21 +131,22 @@ export const MessageContentWithStatuses = (props: Props) => {
         messageId={messageId}
         className={classNames('module-message', `module-message--${direction}`)}
         role={'button'}
-        isDetailView={isDetailView}
         onClick={onClickOnMessageOuterContainer}
         onDoubleClickCapture={onDoubleClickReplyToMessage}
         dataTestId={dataTestId}
       >
-        <Flex container={true} flexDirection="column" flexShrink={0} alignItems="flex-end">
+        <Flex
+          container={true}
+          flexDirection="column"
+          flexShrink={0}
+          alignItems="flex-end"
+          maxWidth="100%"
+        >
           <StyledMessageWithAuthor>
             {!isDetailView && <MessageAuthorText messageId={messageId} />}
-            <MessageContent messageId={messageId} isDetailView={isDetailView} />
+            <MessageContent messageId={messageId} />
           </StyledMessageWithAuthor>
-          <MessageStatus
-            dataTestId="msg-status"
-            messageId={messageId}
-            isDetailView={isDetailView}
-          />
+          <MessageStatus dataTestId="msg-status" messageId={messageId} />
         </Flex>
         {!isDeleted && (
           <MessageContextMenu
@@ -161,7 +165,6 @@ export const MessageContentWithStatuses = (props: Props) => {
           setPopupReaction={setPopupReaction}
           onPopupClick={handlePopupClick}
           noAvatar={hideAvatar}
-          isDetailView={isDetailView}
         />
       ) : null}
     </StyledMessageContentContainer>