Add links to message replies and load older messages.

src/components/common/messaging/SystemMessage.tsx

@@ -36,9 +36,10 @@ interface Props {
     attachContext?: boolean;
     message: MessageObject;
     highlight?: boolean;
+    hideInfo?: boolean;
 }
 
-export function SystemMessage({ attachContext, message, highlight }: Props) {
+export function SystemMessage({ attachContext, message, highlight, hideInfo }: Props) {
     const ctx = useForceUpdate();
 
     let data: SystemMessageParsed;
@@ -153,9 +154,9 @@ export function SystemMessage({ attachContext, message, highlight }: Props) {
                       })
                     : undefined
             }>
-            <MessageInfo>
+            { !hideInfo && <MessageInfo>
                 <MessageDetail message={message} position="left" />
-            </MessageInfo>
+            </MessageInfo> }
             <SystemContent>{children}</SystemContent>
         </MessageBase>
     );

src/components/common/messaging/attachments/MessageReply.tsx

@@ -6,11 +6,15 @@ import { Text } from "preact-i18n";
 
 import { useRenderState } from "../../../../lib/renderer/Singleton";
 
-import { useUser } from "../../../../context/revoltjs/hooks";
+import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
 
 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
 import { SystemMessage } from "../SystemMessage";
+import { Users } from "revolt.js/dist/api/objects";
+import { useHistory } from "react-router-dom";
+import { useEffect, useLayoutEffect, useState } from "preact/hooks";
+import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
 
 interface Props {
     channel: string;
@@ -25,18 +29,29 @@ export const ReplyBase = styled.div<{
 }>`
     gap: 4px;
     display: flex;
+    margin: 0 30px;
     font-size: 0.8em;
-    margin-left: 30px;
     user-select: none;
     margin-bottom: 4px;
     align-items: center;
     color: var(--secondary-foreground);
 
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    * {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 
-    svg:first-child {
+    .content {
+        gap: 4px;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+
+        cursor: pointer;
+    }
+
+    > svg:first-child {
         flex-shrink: 0;
         transform: scaleX(-1);
         color: var(--tertiary-foreground);
@@ -62,10 +77,23 @@ export const ReplyBase = styled.div<{
 `;
 
 export function MessageReply({ index, channel, id }: Props) {
+    const ctx = useForceUpdate();
     const view = useRenderState(channel);
     if (view?.type !== "RENDER") return null;
 
-    const message = view.messages.find((x) => x._id === id);
+    const [ message, setMessage ] = useState<MessageObject | undefined>(undefined);
+    useLayoutEffect(() => {
+        // ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable.
+        const m = view.messages.find((x) => x._id === id);
+
+        if (m) {
+            setMessage(m);
+        } else {
+            ctx.client.channels.fetchMessage(channel, id)
+                .then(m => setMessage(mapMessage(m)));
+        }
+    }, [ view.messages ]);
+
     if (!message) {
         return (
             <ReplyBase head={index === 0} fail>
@@ -77,23 +105,38 @@ export function MessageReply({ index, channel, id }: Props) {
         );
     }
 
-    const user = useUser(message.author);
+    const user = useUser(message.author, ctx);
+    const history = useHistory();
 
     return (
         <ReplyBase head={index === 0}>
             <Reply size={16} />
-            <UserShort user={user} size={16} />
-            {message.attachments && message.attachments.length > 0 && (
-                <File size={16} />
-            )}
-            {message.author === SYSTEM_USER_ID ? (
-                <SystemMessage message={message} />
-            ) : (
-                <Markdown
-                    disallowBigEmoji
-                    content={(message.content as string).replace(/\n/g, " ")}
-                />
-            )}
+            { user?.relationship === Users.Relationship.Blocked ?
+                <>Blocked User</> :
+                <>
+                    {message.author === SYSTEM_USER_ID ? (
+                        <SystemMessage message={message} hideInfo />
+                    ) : <>
+                        <UserShort user={user} size={16} />
+                        <div className="content" onClick={() => {
+                            let obj = ctx.client.channels.get(channel);
+                            if (obj?.channel_type === 'TextChannel') {
+                                history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`);
+                            } else {
+                                history.push(`/channel/${channel}/${message._id}`);
+                            }
+                        }}>
+                            {message.attachments && message.attachments.length > 0 && (
+                                <File size={16} />
+                            )}
+                            <Markdown
+                                disallowBigEmoji
+                                content={(message.content as string).replace(/\n/g, " ")}
+                            />
+                        </div>
+                    </>}
+                </>
+            }
         </ReplyBase>
     );
 }