fix: consolidate isDetailView into one type called hasDetailView

which we import in various components

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -20,6 +20,7 @@ import {
 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';
@@ -32,9 +33,8 @@ export type MessageContentSelectorProps = Pick<
   'text' | 'direction' | 'timestamp' | 'serverTimestamp' | 'previews' | 'quote' | 'attachments'
 >;
 
-type Props = {
+type Props = hasDetailView & {
   messageId: string;
-  isDetailView?: boolean;
 };
 
 // TODO not too sure what is this doing? It is not preventDefault()

ts/components/conversation/message/message-content/MessageContentWithStatus.tsx

@@ -15,6 +15,7 @@ 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';
@@ -26,15 +27,14 @@ export type MessageContentWithStatusSelectorProps = { isGroup: boolean } & Pick<
   'conversationType' | 'direction' | 'isDeleted'
 >;
 
-type Props = {
+type Props = hasDetailView & {
   messageId: string;
   ctxMenuID: string;
-  isDetailView?: boolean;
   dataTestId: string;
   enableReactions: boolean;
 };
 
-const StyledMessageContentContainer = styled.div<{ isIncoming: boolean; isDetailView: boolean }>`
+const StyledMessageContentContainer = styled.div<hasDetailView & { isIncoming: boolean }>`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

ts/components/conversation/message/message-content/MessageQuote.tsx

@@ -8,11 +8,11 @@ import { openConversationToSpecificMessage } from '../../../../state/ducks/conve
 import { StateType } from '../../../../state/reducer';
 import { useMessageDirection } from '../../../../state/selectors';
 import { getMessageQuoteProps } from '../../../../state/selectors/conversations';
+import { hasDetailView } from '../message-item/Message';
 import { Quote } from './quote/Quote';
 
-type Props = {
+type Props = hasDetailView & {
   messageId: string;
-  isDetailView?: boolean;
 };
 
 export type MessageQuoteSelectorProps = Pick<MessageRenderingProps, 'quote' | 'direction'>;

ts/components/conversation/message/message-content/MessageReactions.tsx

@@ -9,6 +9,7 @@ import { SortedReactionList } from '../../../../types/Reaction';
 import { nativeEmojiData } from '../../../../util/emoji';
 import { Flex } from '../../../basic/Flex';
 import { SessionIcon } from '../../../icon';
+import { hasDetailView } from '../message-item/Message';
 import { Reaction, ReactionProps } from '../reactions/Reaction';
 import { StyledPopupContainer } from '../reactions/ReactionPopup';
 
@@ -137,7 +138,7 @@ export type MessageReactsSelectorProps = Pick<
   'convoId' | 'serverId' | 'reacts' | 'sortedReacts'
 >;
 
-type Props = {
+type Props = hasDetailView & {
   messageId: string;
   hasReactLimit?: boolean;
   onClick: (emoji: string) => void;
@@ -147,7 +148,6 @@ type Props = {
   inModal?: boolean;
   onSelected?: (emoji: string) => boolean;
   noAvatar: boolean;
-  isDetailView?: boolean;
 };
 
 export const MessageReactions = (props: Props) => {

ts/components/conversation/message/message-content/MessageStatus.tsx

@@ -10,9 +10,9 @@ import { useSelectedIsGroupOrCommunity } from '../../../../state/selectors/selec
 import { SpacerXS } from '../../../basic/Text';
 import { SessionIcon, SessionIconType } from '../../../icon';
 import { ExpireTimer } from '../../ExpireTimer';
+import { hasDetailView } from '../message-item/Message';
 
-type Props = {
+type Props = hasDetailView & {
-  isDetailView: boolean;
   messageId: string;
   dataTestId?: string | undefined;
 };

ts/components/conversation/message/message-content/quote/Quote.tsx

@@ -4,6 +4,7 @@ import { isEmpty } from 'lodash';
 import styled from 'styled-components';
 import { useIsMessageSelectionMode } from '../../../../../state/selectors/selectedConversation';
 import * as MIME from '../../../../../types/MIME';
+import { hasDetailView } from '../../message-item/Message';
 import { QuoteAuthor } from './QuoteAuthor';
 import { QuoteIconContainer } from './QuoteIconContainer';
 import { QuoteText } from './QuoteText';
@@ -43,14 +44,13 @@ const StyledQuoteTextContent = styled.div`
   justify-content: center;
 `;
 
-export type QuoteProps = {
+export type QuoteProps = hasDetailView & {
   author: string;
   isFromMe: boolean;
   isIncoming: boolean;
   referencedMessageNotFound: boolean;
   text?: string;
   attachment?: QuotedAttachmentType;
-  isDetailView?: boolean;
 
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };

ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx

@@ -4,9 +4,10 @@ import { useQuoteAuthorName } from '../../../../../hooks/useParamSelector';
 import { PubKey } from '../../../../../session/types';
 import { useSelectedIsPublic } from '../../../../../state/selectors/selectedConversation';
 import { ContactName } from '../../../ContactName';
+import { hasDetailView } from '../../message-item/Message';
 import { QuoteProps } from './Quote';
 
-const StyledQuoteAuthor = styled.div<{ isIncoming: boolean; isDetailView?: boolean }>`
+const StyledQuoteAuthor = styled.div<hasDetailView & { isIncoming: boolean }>`
   color: ${props =>
     props.isIncoming
       ? 'var(--message-bubbles-received-text-color)'
@@ -23,7 +24,7 @@ const StyledQuoteAuthor = styled.div<{ isIncoming: boolean; isDetailView?: boole
   }
 `;
 
-type QuoteAuthorProps = Pick<QuoteProps, 'author' | 'isIncoming'> & { isDetailView?: boolean };
+type QuoteAuthorProps = Pick<QuoteProps, 'author' | 'isIncoming'> & hasDetailView;
 
 export const QuoteAuthor = (props: QuoteAuthorProps) => {
   const { author, isIncoming, isDetailView } = props;

ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx

@@ -9,6 +9,7 @@ import { getConversationController } from '../../../../session/conversations';
 import { PropsForExpiringMessage, messagesExpired } from '../../../../state/ducks/conversations';
 import { getIncrement } from '../../../../util/timer';
 import { ExpireTimer } from '../../ExpireTimer';
+import { hasDetailView } from './Message';
 import { ReadableMessage, ReadableMessageProps } from './ReadableMessage';
 
 const EXPIRATION_CHECK_MINIMUM = 2000;
@@ -81,10 +82,10 @@ const StyledReadableMessage = styled(ReadableMessage)<{
 `;
 
 export interface ExpirableReadableMessageProps
-  extends Omit<ReadableMessageProps, 'receivedAt' | 'isUnread'> {
+  extends hasDetailView,
+    Omit<ReadableMessageProps, 'receivedAt' | 'isUnread'> {
   messageId: string;
   isControlMessage?: boolean;
-  isDetailView?: boolean;
 }
 
 function ExpireTimerControlMessage({

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -14,6 +14,7 @@ import {
 } from '../../../../state/selectors/conversations';
 import { MessageContentWithStatuses } from '../message-content/MessageContentWithStatus';
 import { StyledMessageReactionsContainer } from '../message-content/MessageReactions';
+import { hasDetailView } from './Message';
 
 export type GenericReadableMessageSelectorProps = Pick<
   MessageRenderingProps,
@@ -26,10 +27,9 @@ export type GenericReadableMessageSelectorProps = Pick<
   | 'isDeleted'
 >;
 
-type Props = {
+type Props = hasDetailView & {
   messageId: string;
   ctxMenuID: string;
-  isDetailView?: boolean;
 };
 
 const highlightedMessageAnimation = keyframes`
@@ -38,11 +38,12 @@ const highlightedMessageAnimation = keyframes`
   }
 `;
 
-const StyledReadableMessage = styled.div<{
+const StyledReadableMessage = styled.div<
+  hasDetailView & {
     selected: boolean;
     isRightClicked: boolean;
-  isDetailView?: boolean;
+  }
-}>`
+>`
   display: flex;
   align-items: center;
   width: 100%;

ts/components/conversation/message/message-item/Message.tsx

@@ -10,9 +10,11 @@ import { GenericReadableMessage } from './GenericReadableMessage';
 // Same as MIN_WIDTH in ImageGrid.tsx
 export const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = THUMBNAIL_SIDE;
 
-type Props = {
+/** when the message info panel is displayed for a message, we disable onClick and make some other minor UI changes */
+export type hasDetailView = { isDetailView?: boolean };
+
+type Props = hasDetailView & {
   messageId: string;
-  isDetailView?: boolean; // when the detail is shown for a message, we disable click and some other stuff
 };
 
 export const Message = (props: Props) => {