feat(messaging): show last read message divider

src/pages/channels/Channel.tsx

@@ -21,7 +21,7 @@ import MessageBox from "../../components/common/messaging/MessageBox";
 import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
 import NewMessages from "../../components/common/messaging/bars/NewMessages";
 import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
-import Header, { PageHeader } from "../../components/ui/Header";
+import { PageHeader } from "../../components/ui/Header";
 
 import RightSidebar from "../../components/navigation/RightSidebar";
 import ChannelHeader from "./ChannelHeader";
@@ -130,7 +130,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                 <ChannelContent>
                     <VoiceHeader id={channel._id} />
                     <NewMessages channel={channel} last_id={last_id} />
-                    <MessageArea channel={channel} />
+                    <MessageArea channel={channel} last_id={last_id} />
                     <TypingIndicator channel={channel} />
                     <JumpToBottom channel={channel} />
                     <MessageBox channel={channel} />

src/pages/channels/messaging/MessageArea.tsx

@@ -51,13 +51,14 @@ const Area = styled.div`
 `;
 
 interface Props {
+    last_id?: string;
     channel: Channel;
 }
 
 export const MessageAreaWidthContext = createContext(0);
 export const MESSAGE_AREA_PADDING = 82;
 
-export const MessageArea = observer(({ channel }: Props) => {
+export const MessageArea = observer(({ last_id, channel }: Props) => {
     const history = useHistory();
     const status = useContext(StatusContext);
     const { focusTaken } = useContext(IntermediateContext);
@@ -323,6 +324,7 @@ export const MessageArea = observer(({ channel }: Props) => {
                     )}
                     {renderer.state === "RENDER" && (
                         <MessageRenderer
+                            last_id={last_id}
                             renderer={renderer}
                             highlight={highlight}
                         />

src/pages/channels/messaging/MessageRenderer.tsx

@@ -30,6 +30,7 @@ import ConversationStart from "./ConversationStart";
 import MessageEditor from "./MessageEditor";
 
 interface Props {
+    last_id?: string;
     highlight?: string;
     renderer: ChannelRenderer;
 }
@@ -45,7 +46,7 @@ const BlockedMessage = styled.div`
     }
 `;
 
-export default observer(({ renderer, highlight }: Props) => {
+export default observer(({ last_id, renderer, highlight }: Props) => {
     const client = useClient();
     const userId = client.user!._id;
     const queue = useApplicationState().queue;
@@ -94,6 +95,7 @@ export default observer(({ renderer, highlight }: Props) => {
     }
 
     let head = true;
+    let divided = false;
     function compare(
         current: string,
         curAuthor: string,
@@ -107,16 +109,25 @@ export default observer(({ renderer, highlight }: Props) => {
             btime = decodeTime(previous),
             bdate = new Date(btime);
 
+        let unread = false;
+        if (!divided && last_id && previous >= last_id) {
+            unread = true;
+            divided = true;
+        }
+
+        head = false;
         if (
+            unread ||
             adate.getFullYear() !== bdate.getFullYear() ||
             adate.getMonth() !== bdate.getMonth() ||
             adate.getDate() !== bdate.getDate()
         ) {
-            render.push(<DateDivider date={adate} />);
+            render.push(<DateDivider date={adate} unread={unread} />);
             head = true;
         }
 
         head =
+            head ||
             curAuthor !== prevAuthor ||
             Math.abs(btime - atime) >= 420000 ||
             !isEqual(currentMasq, previousMasq);