moved the unread indicator to outside of message items

main.js

@@ -348,7 +348,9 @@ async function createWindow() {
 
   if (config.get('openDevTools')) {
     // Open the DevTools.
-    mainWindow.webContents.openDevTools();
+    mainWindow.webContents.openDevTools({
+      mode: 'bottom',
+    });
   }
 
   captureClicks(mainWindow);

ts/components/session/SessionSearchInput.tsx

@@ -3,11 +3,11 @@ import { useSelector } from 'react-redux';
 import { getConversationsCount } from '../../state/selectors/conversations';
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 
-interface Props {
+type Props = {
   searchString: string;
   onChange: any;
   placeholder: string;
-}
+};
 
 export const SessionSearchInput = (props: Props) => {
   const { searchString, onChange, placeholder } = props;

ts/components/session/conversation/SessionMessagesList.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { QuoteClickOptions } from '../../../models/messageType';
-import { getSortedMessagesTypesOfSelectedConversation } from '../../../state/selectors/conversations';
+import { PropsForDataExtractionNotification, QuoteClickOptions } from '../../../models/messageType';
 import {
-  DataExtractionNotificationItem,
-  GenericMessageItem,
-  GroupInvitationItem,
-  GroupUpdateItem,
-  TimerNotificationItem,
-} from './SessionMessagesTypes';
+  PropsForExpirationTimer,
+  PropsForGroupInvitation,
+  PropsForGroupUpdate,
+} from '../../../state/ducks/conversations';
+import { getSortedMessagesTypesOfSelectedConversation } from '../../../state/selectors/conversations';
+import { DataExtractionNotification } from '../../conversation/DataExtractionNotification';
+import { GroupInvitation } from '../../conversation/GroupInvitation';
+import { GroupNotification } from '../../conversation/GroupNotification';
+import { Message } from '../../conversation/Message';
+import { TimerNotification } from '../../conversation/TimerNotification';
+import { SessionLastSeenIndicator } from './SessionLastSeenIndicator';
 
 export const SessionMessagesList = (props: {
   scrollToQuoteMessage: (options: QuoteClickOptions) => Promise<void>;
@@ -18,55 +22,44 @@ export const SessionMessagesList = (props: {
   return (
     <>
       {messagesProps.map(messageProps => {
-        if (messageProps.messageType === 'group-notification') {
-          return (
-            <GroupUpdateItem
-              key={messageProps.props.messageId}
-              groupNotificationProps={messageProps.props}
-            />
-          );
+        const messageId = messageProps.message.props.messageId;
+        const unreadIndicator = messageProps.showUnreadIndicator ? (
+          <SessionLastSeenIndicator key={`unread-indicator-${messageId}`} />
+        ) : null;
+        if (messageProps.message?.messageType === 'group-notification') {
+          const msgProps = messageProps.message.props as PropsForGroupUpdate;
+          return [<GroupNotification key={messageId} {...msgProps} />, unreadIndicator];
         }
 
-        if (messageProps.messageType === 'group-invitation') {
-          return (
-            <GroupInvitationItem
-              key={messageProps.props.messageId}
-              propsForGroupInvitation={messageProps.props}
-            />
-          );
+        if (messageProps.message?.messageType === 'group-invitation') {
+          const msgProps = messageProps.message.props as PropsForGroupInvitation;
+          return [<GroupInvitation key={messageId} {...msgProps} />, unreadIndicator];
         }
 
-        if (messageProps.messageType === 'data-extraction') {
-          return (
-            <DataExtractionNotificationItem
-              key={messageProps.props.messageId}
-              propsForDataExtractionNotification={messageProps.props}
-            />
-          );
+        if (messageProps.message?.messageType === 'data-extraction') {
+          const msgProps = messageProps.message.props as PropsForDataExtractionNotification;
+
+          return [<DataExtractionNotification key={messageId} {...msgProps} />, unreadIndicator];
         }
 
-        if (messageProps.messageType === 'timer-notification') {
-          return (
-            <TimerNotificationItem
-              key={messageProps.props.messageId}
-              timerProps={messageProps.props}
-            />
-          );
+        if (messageProps.message?.messageType === 'timer-notification') {
+          const msgProps = messageProps.message.props as PropsForExpirationTimer;
+
+          return [<TimerNotification key={messageId} {...msgProps} />, unreadIndicator];
         }
 
         if (!messageProps) {
           return null;
         }
 
-        // firstMessageOfSeries tells us to render the avatar only for the first message
-        // in a series of messages from the same user
-        return (
-          <GenericMessageItem
-            key={messageProps.props.messageId}
-            messageId={messageProps.props.messageId}
-            scrollToQuoteMessage={props.scrollToQuoteMessage}
-          />
-        );
+        return [
+          <Message
+            messageId={messageId}
+            onQuoteClick={props.scrollToQuoteMessage}
+            key={messageId}
+          />,
+          unreadIndicator,
+        ];
       })}
     </>
   );

ts/components/session/conversation/SessionMessagesTypes.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { PropsForDataExtractionNotification, QuoteClickOptions } from '../../../models/messageType';
-import {
-  PropsForExpirationTimer,
-  PropsForGroupInvitation,
-  PropsForGroupUpdate,
-} from '../../../state/ducks/conversations';
-import { getFirstUnreadMessageId } from '../../../state/selectors/conversations';
-import { DataExtractionNotification } from '../../conversation/DataExtractionNotification';
-import { GroupInvitation } from '../../conversation/GroupInvitation';
-import { GroupNotification } from '../../conversation/GroupNotification';
-import { Message } from '../../conversation/Message';
-import { TimerNotification } from '../../conversation/TimerNotification';
-import { SessionLastSeenIndicator } from './SessionLastSeenIndicator';
-
-export const UnreadIndicator = (props: { messageId: string }) => {
-  const isFirstUnreadOnOpen = useSelector(getFirstUnreadMessageId);
-  if (!isFirstUnreadOnOpen || isFirstUnreadOnOpen !== props.messageId) {
-    return null;
-  }
-  return <SessionLastSeenIndicator key={`unread-indicator-${props.messageId}`} />;
-};
-
-export const GroupUpdateItem = (props: { groupNotificationProps: PropsForGroupUpdate }) => {
-  return (
-    <React.Fragment key={props.groupNotificationProps.messageId}>
-      <GroupNotification
-        key={props.groupNotificationProps.messageId}
-        {...props.groupNotificationProps}
-      />
-      <UnreadIndicator messageId={props.groupNotificationProps.messageId} />
-    </React.Fragment>
-  );
-};
-
-export const GroupInvitationItem = (props: {
-  propsForGroupInvitation: PropsForGroupInvitation;
-}) => {
-  return (
-    <React.Fragment key={props.propsForGroupInvitation.messageId}>
-      <GroupInvitation
-        key={props.propsForGroupInvitation.messageId}
-        {...props.propsForGroupInvitation}
-      />
-
-      <UnreadIndicator messageId={props.propsForGroupInvitation.messageId} />
-    </React.Fragment>
-  );
-};
-
-export const DataExtractionNotificationItem = (props: {
-  propsForDataExtractionNotification: PropsForDataExtractionNotification;
-}) => {
-  return (
-    <React.Fragment key={props.propsForDataExtractionNotification.messageId}>
-      <DataExtractionNotification
-        key={props.propsForDataExtractionNotification.messageId}
-        {...props.propsForDataExtractionNotification}
-      />
-
-      <UnreadIndicator messageId={props.propsForDataExtractionNotification.messageId} />
-    </React.Fragment>
-  );
-};
-
-export const TimerNotificationItem = (props: { timerProps: PropsForExpirationTimer }) => {
-  return (
-    <React.Fragment key={props.timerProps.messageId}>
-      <TimerNotification key={props.timerProps.messageId} {...props.timerProps} />
-
-      <UnreadIndicator messageId={props.timerProps.messageId} />
-    </React.Fragment>
-  );
-};
-
-export const GenericMessageItem = (props: {
-  messageId: string;
-  scrollToQuoteMessage: (options: QuoteClickOptions) => Promise<void>;
-}) => {
-  const messageId = props.messageId;
-
-  return (
-    <React.Fragment key={messageId}>
-      <Message messageId={messageId} onQuoteClick={props.scrollToQuoteMessage} key={messageId} />
-      <UnreadIndicator messageId={messageId} />
-    </React.Fragment>
-  );
-};

ts/state/createStore.ts

@@ -42,7 +42,7 @@ export const createStore = (initialState: any) =>
     preloadedState: initialState,
     middleware: (getDefaultMiddleware: any) =>
       getDefaultMiddleware({
-        serializableCheck: false,
-        immutableCheck: false,
+        serializableCheck: true,
+        immutableCheck: true,
       }).concat(middlewareList),
   });

ts/state/ducks/conversations.ts

@@ -660,9 +660,9 @@ const conversationsSlice = createSlice({
         return state;
       }
 
+      // keep the unread visible just like in other apps. It will be shown until the user changes convo
       return {
         ...state,
-        firstUnreadMessageId: undefined,
       };
     },
 
@@ -833,7 +833,6 @@ export async function openConversationWithMessages(args: {
 
   const initialMessages = await getMessages(conversationKey, 30);
   perfEnd('getMessages', 'getMessages');
-  console.warn('initialMessages', initialMessages);
 
   window.inboxStore?.dispatch(
     actions.openConversationExternal({

ts/state/selectors/conversations.ts

@@ -130,53 +130,74 @@ export const getSortedMessagesOfSelectedConversation = createSelector(
   }
 );
 
+export const getFirstUnreadMessageId = createSelector(
+  getConversations,
+  (state: ConversationsStateType): string | undefined => {
+    return state.firstUnreadMessageId;
+  }
+);
+
 export type MessagePropsType =
   | 'group-notification'
   | 'group-invitation'
   | 'data-extraction'
   | 'timer-notification'
-  | 'regular-message';
+  | 'regular-message'
+  | 'unread-indicator';
 
 export const getSortedMessagesTypesOfSelectedConversation = createSelector(
   getMessagesOfSelectedConversation,
-  (
-    sortedMessages
-  ): Array<{
-    messageType: MessagePropsType;
-    props: any;
-  }> => {
+  getFirstUnreadMessageId,
+  (sortedMessages, firstUnreadId) => {
     return sortedMessages.map(msg => {
+      const isFirstUnread = Boolean(firstUnreadId === msg.propsForMessage.id);
+
       if (msg.propsForDataExtractionNotification) {
         return {
-          messageType: 'data-extraction',
-          props: { ...msg.propsForDataExtractionNotification, messageId: msg.propsForMessage.id },
+          showUnreadIndicator: isFirstUnread,
+          message: {
+            messageType: 'data-extraction',
+            props: { ...msg.propsForDataExtractionNotification, messageId: msg.propsForMessage.id },
+          },
         };
       }
 
       if (msg.propsForGroupInvitation) {
         return {
-          messageType: 'group-invitation',
-          props: { ...msg.propsForGroupInvitation, messageId: msg.propsForMessage.id },
+          showUnreadIndicator: isFirstUnread,
+          message: {
+            messageType: 'group-invitation',
+            props: { ...msg.propsForGroupInvitation, messageId: msg.propsForMessage.id },
+          },
         };
       }
 
       if (msg.propsForGroupNotification) {
         return {
-          messageType: 'group-notification',
-          props: { ...msg.propsForGroupNotification, messageId: msg.propsForMessage.id },
+          showUnreadIndicator: isFirstUnread,
+          message: {
+            messageType: 'group-notification',
+            props: { ...msg.propsForGroupNotification, messageId: msg.propsForMessage.id },
+          },
         };
       }
 
       if (msg.propsForTimerNotification) {
         return {
-          messageType: 'data-extraction',
-          props: { ...msg.propsForTimerNotification, messageId: msg.propsForMessage.id },
+          showUnreadIndicator: isFirstUnread,
+          message: {
+            messageType: 'timer-notification',
+            props: { ...msg.propsForTimerNotification, messageId: msg.propsForMessage.id },
+          },
         };
       }
 
       return {
-        messageType: 'regular-message',
-        props: { messageId: msg.propsForMessage.id },
+        showUnreadIndicator: isFirstUnread,
+        message: {
+          messageType: 'regular-message',
+          props: { messageId: msg.propsForMessage.id },
+        },
       };
     });
   }
@@ -538,13 +559,6 @@ function sortMessages(
   return messagesSorted;
 }
 
-export const getFirstUnreadMessageId = createSelector(
-  getConversations,
-  (state: ConversationsStateType): string | undefined => {
-    return state.firstUnreadMessageId;
-  }
-);
-
 export const getMostRecentMessageId = createSelector(
   getSortedMessagesOfSelectedConversation,
   (messages: Array<MessageModelPropsWithoutConvoProps>): string | undefined => {