showDate break on > 5 minutes diff between messages

ts/components/basic/PillContainer.tsx

@@ -10,27 +10,6 @@ type PillContainerProps = {
   onMouseLeave?: () => void;
 };
 
-const StyledPillContainer = styled.div<PillContainerProps>`
-  display: flex;
-  background: none;
-  flex-direction: 'row';
-  flex-grow: 1;
-  flex: 1 1 40%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-items: center;
-  padding: ${props => props.padding || ''};
-  margin: ${props => props.margin || ''};
-  border-radius: 300px;
-  cursor: pointer;
-  border: 1px solid ${props => props.theme.colors.pillDividerColor};
-  transition: ${props => props.theme.common.animations.defaultDuration};
-  &:hover {
-    background: ${props => props.theme.colors.clickableHovered};
-  }
-`;
-
 const StyledPillContainerHoverable = styled.div<PillContainerProps>`
   background: none;
 
@@ -70,10 +49,6 @@ const StyledPillInner = styled.div<PillContainerProps>`
   }
 `;
 
-export const PillContainer = (props: PillContainerProps) => {
-  return <StyledPillContainer {...props}>{props.children}</StyledPillContainer>;
-};
-
 export const PillTooltipWrapper = (props: PillContainerProps) => {
   return <StyledPillContainerHoverable {...props}>{props.children}</StyledPillContainerHoverable>;
 };

ts/components/conversation/ExpireTimer.tsx

@@ -50,13 +50,12 @@ export const ExpireTimer = (props: Props) => {
   }, [expirationTimestamp, timeLeft, setTimeLeft]);
 
   const updateFrequency = 500;
+  useInterval(update, updateFrequency);
 
   if (!(isCorrectSide && expirationLength && expirationTimestamp)) {
     return null;
   }
 
-  useInterval(update, updateFrequency);
-
   const expireTimerColor = theme.colors.textColor;
 
   if (timeLeft <= 60) {

ts/components/session/SessionJoinableDefaultRooms.tsx

@@ -143,7 +143,7 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => {
         <SessionJoinableRoomName {...props} />
       </PillContainerHoverable>
 
-      {showTooltip && <StyledToolTip>{props.name}</StyledToolTip>}
+      {showTooltip && false && <StyledToolTip>{props.name}</StyledToolTip>}
     </PillTooltipWrapper>
   );
 };

ts/components/session/SessionPasswordPrompt.tsx

@@ -31,7 +31,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{ theme: DefaultThe
   }
 
   public componentDidMount() {
-    console.warn('this.inputRef', this.inputRef);
     setTimeout(() => {
       this.inputRef?.focus();
     }, 100);

ts/models/conversation.ts

@@ -202,9 +202,11 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     this.throttledBumpTyping = _.throttle(this.bumpTyping, 300);
     this.updateLastMessage = _.throttle(this.bouncyUpdateLastMessage.bind(this), 1000, {
       trailing: true,
+      leading: true,
     });
     this.triggerUIRefresh = _.throttle(this.triggerUIRefresh, 1000, {
       trailing: true,
+      leading: true,
     });
     this.throttledNotify = _.debounce(this.notify, 500, { maxWait: 5000, trailing: true });
     //start right away the function is called, and wait 1sec before calling it again
@@ -934,7 +936,8 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
   public async addSingleMessage(messageAttributes: MessageAttributesOptionals, setToExpire = true) {
     const model = new MessageModel(messageAttributes);
 
-    const messageId = await model.commit();
+    // no need to trigger a UI update now, we trigger a messageAdded just below
+    const messageId = await model.commit(false);
     model.set({ id: messageId });
 
     if (setToExpire) {

ts/models/message.ts

@@ -1011,14 +1011,16 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     await this.commit();
   }
 
-  public async commit() {
+  public async commit(triggerUIUpdate = true) {
     if (!this.attributes.id) {
       throw new Error('A message always needs an id');
     }
 
     perfStart(`messageCommit-${this.attributes.id}`);
     const id = await saveMessage(this.attributes);
-    this.dispatchMessageUpdate();
+    if (triggerUIUpdate) {
+      this.dispatchMessageUpdate();
+    }
     perfEnd(`messageCommit-${this.attributes.id}`, 'messageCommit');
 
     return id;

ts/state/selectors/conversations.ts

@@ -146,9 +146,10 @@ export type MessagePropsType =
   | 'unread-indicator';
 
 export const getSortedMessagesTypesOfSelectedConversation = createSelector(
-  getMessagesOfSelectedConversation,
+  getSortedMessagesOfSelectedConversation,
   getFirstUnreadMessageId,
   (sortedMessages, firstUnreadId) => {
+    const maxMessagesBetweenTwoDateBreaks = 5;
     // we want to show the date break if there is a large jump in time
     // remember that messages are sorted from the most recent to the oldest
     return sortedMessages.map((msg, index) => {
@@ -159,9 +160,11 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
           ? 0
           : sortedMessages[index + 1].propsForMessage.serverTimestamp ||
             sortedMessages[index + 1].propsForMessage.timestamp;
-      // more than 10 minutes
+
       const showDateBreak =
-        messageTimestamp - previousMessageTimestamp > 10 * 60 * 1000 ? messageTimestamp : undefined;
+        messageTimestamp - previousMessageTimestamp > maxMessagesBetweenTwoDateBreaks * 60 * 1000
+          ? messageTimestamp
+          : undefined;
 
       if (msg.propsForDataExtractionNotification) {
         return {