Merge branch 'master' of https://gitlab.insrt.uk/revolt/revite

src/components/common/messaging/Message.tsx

@@ -28,12 +28,14 @@ interface Props {
     attachContext?: boolean;
     queued?: QueuedMessage;
     message: MessageObject;
+    highlight?: boolean;
     contrast?: boolean;
     content?: Children;
     head?: boolean;
 }
 
 function Message({
+    highlight,
     attachContext,
     message,
     contrast,
@@ -72,6 +74,7 @@ function Message({
                 />
             ))}
             <MessageBase
+                highlight={highlight}
                 head={head && !(message.replies && message.replies.length > 0)}
                 contrast={contrast}
                 sending={typeof queued !== "undefined"}

src/components/common/messaging/MessageBase.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import { decodeTime } from "ulid";
 
 import { Text } from "preact-i18n";
@@ -17,8 +17,15 @@ export interface BaseMessageProps {
     blocked?: boolean;
     sending?: boolean;
     contrast?: boolean;
+    highlight?: boolean;
 }
 
+const highlight = keyframes`
+    0% { background: var(--mention); }
+    66% { background: var(--mention); }
+    100% { background: transparent; }
+`;
+
 export default styled.div<BaseMessageProps>`
     display: flex;
     overflow: none;
@@ -70,6 +77,14 @@ export default styled.div<BaseMessageProps>`
             color: var(--error);
         `}
 
+    ${(props) =>
+        props.highlight &&
+        css`
+            animation-name: ${highlight};
+            animation-timing-function: ease;
+            animation-duration: 3s;
+        `}
+
     .detail {
         gap: 8px;
         display: flex;

src/components/common/messaging/SystemMessage.tsx

@@ -35,9 +35,11 @@ type SystemMessageParsed =
 interface Props {
     attachContext?: boolean;
     message: MessageObject;
+    highlight?: boolean;
+    hideInfo?: boolean;
 }
 
-export function SystemMessage({ attachContext, message }: Props) {
+export function SystemMessage({ attachContext, message, highlight, hideInfo }: Props) {
     const ctx = useForceUpdate();
 
     let data: SystemMessageParsed;
@@ -143,6 +145,7 @@ export function SystemMessage({ attachContext, message }: Props) {
 
     return (
         <MessageBase
+            highlight={highlight}
             onContextMenu={
                 attachContext
                     ? attachContextMenu("Menu", {
@@ -151,9 +154,9 @@ export function SystemMessage({ attachContext, message }: 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,32 @@ 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;
+        cursor: pointer;
+        align-items: center;
+        flex-direction: row;
+
+        > * {
+            pointer-events: none;
+        }
+    }
+
+    > svg:first-child {
         flex-shrink: 0;
         transform: scaleX(-1);
         color: var(--tertiary-foreground);
@@ -62,10 +80,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 +108,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>
     );
 }

src/lib/renderer/Singleton.ts

@@ -73,6 +73,16 @@ export class SingletonRenderer extends EventEmitter3 {
     }
 
     async init(id: string, message_id?: string) {
+        if (message_id) {
+            if (this.state.type === 'RENDER') {
+                let message = this.state.messages.find(x => x._id === message_id);
+                if (message) {
+                    this.emit("scroll", { type: "ScrollToView", id: message_id });
+                    return;
+                }
+            }
+        }
+
         this.channel = id;
         this.stale = false;
         this.setStateUnguarded({ type: "LOADING" });

src/pages/channels/ChannelHeader.tsx

@@ -58,6 +58,10 @@ const Info = styled.div`
         font-size: 0.8em;
         font-weight: 400;
         color: var(--secondary-foreground);
+        
+        > * {
+            pointer-events: none;
+        }
     }
 `;
 

src/pages/channels/messaging/MessageArea.tsx

@@ -60,7 +60,9 @@ export function MessageArea({ id }: Props) {
     const status = useContext(StatusContext);
     const { focusTaken } = useContext(IntermediateContext);
 
+    // ? Required data for message links.
     const { message } = useParams<{ message: string }>();
+    const [highlight, setHighlight] = useState<string | undefined>(undefined);
 
     // ? This is the scroll container.
     const ref = useRef<HTMLDivElement>(null);
@@ -99,7 +101,7 @@ export function MessageArea({ id }: Props) {
                 });
             } else if (scrollState.current.type === "ScrollToView") {
                 document.getElementById(scrollState.current.id)
-                    ?.scrollIntoView();
+                    ?.scrollIntoView({ block: 'center' });
                 
                 setScrollState({ type: "Free" });
             } else if (scrollState.current.type === "OffsetTop") {
@@ -170,6 +172,7 @@ export function MessageArea({ id }: Props) {
     // ? If message present or changes, load it as well.
     useEffect(() => {
         if (message) {
+            setHighlight(message);
             SingletonMessageRenderer.init(id, message);
 
             let channel = client.channels.get(id);
@@ -284,7 +287,7 @@ export function MessageArea({ id }: Props) {
                         </RequiresOnline>
                     )}
                     {state.type === "RENDER" && (
-                        <MessageRenderer id={id} state={state} />
+                        <MessageRenderer id={id} state={state} highlight={highlight} />
                     )}
                     {state.type === "EMPTY" && <ConversationStart id={id} />}
                 </div>

src/pages/channels/messaging/MessageRenderer.tsx

@@ -28,6 +28,7 @@ import MessageEditor from "./MessageEditor";
 interface Props {
     id: string;
     state: RenderState;
+    highlight?: string;
     queue: QueuedMessage[];
 }
 
@@ -42,7 +43,7 @@ const BlockedMessage = styled.div`
     }
 `;
 
-function MessageRenderer({ id, state, queue }: Props) {
+function MessageRenderer({ id, state, queue, highlight }: Props) {
     if (state.type !== "RENDER") return null;
 
     const client = useContext(AppContext);
@@ -132,6 +133,7 @@ function MessageRenderer({ id, state, queue }: Props) {
                     key={message._id}
                     message={message}
                     attachContext
+                    highlight={highlight === message._id}
                 />,
             );
         } else {
@@ -158,6 +160,7 @@ function MessageRenderer({ id, state, queue }: Props) {
                             ) : undefined
                         }
                         attachContext
+                        highlight={highlight === message._id}
                     />,
                 );
             }