Fix: System messages would break replies.

Fix: Show correct time format on left side of messages.

src/components/common/messaging/MessageBase.tsx

@@ -1,4 +1,3 @@
-import dayjs from "dayjs";
 import styled, { css } from "styled-components";
 import { decodeTime } from "ulid";
 
@@ -7,6 +6,8 @@ import { Text } from "preact-i18n";
 import { MessageObject } from "../../../context/revoltjs/util";
 
 import Tooltip from "../Tooltip";
+import { useDictionary } from "../../../lib/i18n";
+import { dayjs } from "../../../context/Locale";
 
 export interface BaseMessageProps {
     head?: boolean;
@@ -170,13 +171,15 @@ export function MessageDetail({
     message: MessageObject;
     position: "left" | "top";
 }) {
+    const dict = useDictionary();
+
     if (position === "left") {
         if (message.edited) {
             return (
                 <>
                     <time className="copyTime">
                         <i className="copyBracket">[</i>
-                        {dayjs(decodeTime(message._id)).format("H:mm")}
+                        {dayjs(decodeTime(message._id)).format(dict.dayjs.timeFormat)}
                         <i className="copyBracket">]</i>
                     </time>
                     <span className="edited">
@@ -191,7 +194,7 @@ export function MessageDetail({
                 <>
                     <time>
                         <i className="copyBracket">[</i>
-                        {dayjs(decodeTime(message._id)).format("H:mm")}
+                        {dayjs(decodeTime(message._id)).format(dict.dayjs.timeFormat)}
                         <i className="copyBracket">]</i>
                     </time>
                 </>

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

@@ -9,6 +9,8 @@ import { useUser } from "../../../../context/revoltjs/hooks";
 
 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
+import { SYSTEM_USER_ID } from "revolt.js";
+import { SystemMessage } from "../SystemMessage";
 
 interface Props {
     channel: string;
@@ -84,10 +86,13 @@ export function MessageReply({ index, channel, id }: Props) {
             {message.attachments && message.attachments.length > 0 && (
                 <File size={16} />
             )}
-            <Markdown
-                disallowBigEmoji
-                content={(message.content as string).replace(/\n/g, " ")}
-            />
+            { message.author === SYSTEM_USER_ID ?
+                <SystemMessage message={message} /> :
+                <Markdown
+                    disallowBigEmoji
+                    content={(message.content as string).replace(/\n/g, " ")}
+                />
+            }
         </ReplyBase>
     );
 }

src/components/common/messaging/bars/ReplyBar.tsx

@@ -21,6 +21,8 @@ import IconButton from "../../../ui/IconButton";
 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
 import { ReplyBase } from "../attachments/MessageReply";
+import { SystemMessage } from "../SystemMessage";
+import { SYSTEM_USER_ID } from "revolt.js";
 
 interface Props {
     channel: string;
@@ -100,13 +102,13 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
                                 message.attachments.length > 0 && (
                                     <File size={16} />
                                 )}
-                            <Markdown
-                                disallowBigEmoji
-                                content={(message.content as string).replace(
-                                    /\n/g,
-                                    " ",
-                                )}
-                            />
+                            { message.author === SYSTEM_USER_ID ?
+                                <SystemMessage message={message} /> :
+                                <Markdown
+                                    disallowBigEmoji
+                                    content={(message.content as string).replace(/\n/g, " ")}
+                                />
+                            }
                         </ReplyBase>
                         <span class="actions">
                             <IconButton