fix: ellipsis on name rather than pubkey

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

Hide file tree

Showing 29 changed files with 192 additions and 158 deletions.
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -255,8 +255,6 @@
 
 .module-conversation__user,
 .module-message__author {
-  margin-top: var(--margins-sm);
-  margin-bottom: var(--margins-xs);
   font-size: var(--font-size-sm);
   font-weight: 300;
   line-height: 18px;
@@ -611,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,27 +24,42 @@ export const ContactName = (props: Props) => {
   const convoName = useNicknameOrProfileNameOrShortenedPubkey(pubkey);
   const isPrivate = useIsPrivate(pubkey);
   const shouldShowProfile = Boolean(convoName || profileName || name);
-  const styles = (boldProfileName
-    ? {
-        fontWeight: 'bold',
-      }
-    : {}) as React.CSSProperties;
+
+  const commonStyles = {
+    // 'flex-shrink': 100,
+    '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');
 
   return (
     <span
       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);
 
@@ -146,22 +147,14 @@ export const MessageContent = (props: Props) => {
     return null;
   }
 
-  const {
-    direction,
-    text,
-    timestamp,
-    serverTimestamp,
-    previews,
-    quote,
-    attachments,
-  } = contentProps;
+  const { direction, text, timestamp, serverTimestamp, previews, quote, attachments } =
+    contentProps;
 
   const hasContentBeforeAttachment = !isEmpty(previews) || !isEmpty(quote) || !isEmpty(text);
 
   const toolTipTitle = moment(serverTimestamp || timestamp).format('llll');
 
-  const isDetailViewAndSupportsAttachmentCarousel =
-    props.isDetailView && canDisplayImage(attachments);
+  const isDetailViewAndSupportsAttachmentCarousel = isDetailView && canDisplayImage(attachments);
 
   return (
     <StyledMessageContent
@@ -188,6 +181,7 @@ export const MessageContent = (props: Props) => {
           display: 'flex',
           flexDirection: 'column',
           gap: 'var(--margins-xs)',
+          maxWidth: '100%',
         }}
       >
         <IsMessageVisibleContext.Provider value={isMessageVisible}>
@@ -199,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}