feat: improved dotmenu

stylesheets/_modules.scss

@@ -365,65 +365,6 @@
   }
 }
 
-// Module: Message Detail
-
-.module-message-detail {
-  max-width: 650px;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  padding: 20px;
-}
-
-.module-message-detail__message-container {
-  padding-top: 20px;
-  padding-bottom: 20px;
-
-  &:after {
-    content: '.';
-    visibility: hidden;
-    display: block;
-    height: 0;
-    clear: both;
-  }
-}
-
-.module-message-detail__label {
-  font-weight: 300;
-  padding-inline-end: 5px;
-}
-
-.module-message-detail__delete-button-container {
-  text-align: center;
-  margin-top: 10px;
-
-  .session-button {
-    width: 160px;
-    margin: 1rem auto;
-  }
-}
-
-.module-message-detail__contact-container {
-  margin: 20px 0 20px 0;
-}
-
-.module-message-detail__contact {
-  margin-bottom: 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.module-message-detail__contact__text {
-  margin-inline-start: 10px;
-  flex-grow: 1;
-  min-width: 0;
-}
-
-.module-message-detail__contact__error {
-  color: var(--danger-color);
-  font-weight: 300;
-}
-
 // Module: Media Gallery
 
 .module-media-gallery {

ts/components/conversation/header/ConversationHeaderSubtitle.tsx

@@ -41,28 +41,26 @@ const StyledSubtitleDot = styled.span<{ active: boolean }>`
 
 export const SubtitleDotMenu = ({
   id,
-  options,
   selectedOptionIndex,
+  optionsCount,
   style,
 }: {
-  id?: string;
-  options: Array<string | null>;
+  id: string;
   selectedOptionIndex: number;
+  optionsCount: number;
   style: CSSProperties;
 }) => (
-  <Flex id={} container={true} alignItems={'center'} style={style}>
-    {options.map((option, index) => {
-      if (!option) {
-        return null;
-      }
-
-      return (
-        <StyledSubtitleDot
-          key={`subtitleDotMenu-${option}-${index}`}
-          active={selectedOptionIndex === index}
-        />
-      );
-    })}
+  <Flex id={id} container={true} alignItems={'center'} style={style}>
+    {Array(optionsCount)
+      .fill(0)
+      .map((_, index) => {
+        return (
+          <StyledSubtitleDot
+            key={`subtitleDotMenu-${id}-${index}`}
+            active={selectedOptionIndex === index}
+          />
+        );
+      })}
   </Flex>
 );
 
@@ -158,8 +156,9 @@ export const ConversationHeaderSubtitle = (props: ConversationHeaderSubtitleProp
         />
       </Flex>
       <SubtitleDotMenu
-        options={subtitlesArray}
+        id={'conversation-header-subtitle-dots'}
         selectedOptionIndex={subtitlesArray.indexOf(currentSubtitle)}
+        optionsCount={subtitlesArray.length}
         style={{ display: subtitlesArray.length < 2 ? 'none' : undefined, margin: '8px 0' }}
       />
     </StyledSubtitleContainer>

ts/components/conversation/right-panel/overlay/message-info/components/AttachmentCarousel.tsx

@@ -113,7 +113,7 @@ export const AttachmentCarousel = (props: Props) => {
         <SubtitleDotMenu
           id={'attachment-carousel-subtitle-dots'}
           selectedOptionIndex={visibleIndex}
-          options={attachments.length}
+          optionsCount={attachments.length}
           style={{
             display: attachments.length < 2 ? 'none' : undefined,
             backgroundColor: 'var(--modal-background-color)',

ts/state/ducks/conversations.ts

@@ -59,7 +59,6 @@ export type MessagePropsDetails = {
   receivedAt: number;
   errors: Array<Error>;
   sender: string;
-  contacts: Array<ContactPropsMessageDetail>;
   convoId: string;
   messageId: string;
   direction: MessageModelType;