feat(messaging): show last read message divider

src/components/ui/DateDivider.tsx

@@ -14,7 +14,7 @@ const Base = styled.div<{ unread?: boolean }>`
         margin-top: -2px;
         font-size: 0.6875rem;
         line-height: 0.6875rem;
-        padding: 2px 0 2px 0;
+        padding-inline-start: 5px;
         padding-inline-end: 5px;
         color: var(--tertiary-foreground);
         background: var(--primary-background);
@@ -30,7 +30,8 @@ const Base = styled.div<{ unread?: boolean }>`
 const Unread = styled.div`
     background: var(--accent);
     color: white;
-    padding: 5px 8px;
+    font-size: 7px;
+    padding: 2px 6px;
     border-radius: 60px;
     font-weight: 600;
 `;

src/mobx/stores/helpers/STheme.ts

@@ -201,10 +201,12 @@ export default class STheme {
     }
 }
 
-function getContrastingColour(hex: string, fallback = "black"): string {
+function getContrastingColour(hex: string, fallback?: string): string {
+    if (typeof hex !== "string") return "black";
+
     // TODO: Switch to color-parse
     // Try parse hex value.
-    hex = hex.replace("#", "");
+    hex = hex.replace(/#/g, "");
     const r = parseInt(hex.substr(0, 2), 16) / 255;
     const g = parseInt(hex.substr(2, 2), 16) / 255;
     const b = parseInt(hex.substr(4, 2), 16) / 255;

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);