Fix: System messages would break replies.

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

external/lang

@@ -1 +1 @@
-Subproject commit 1d2b4d0147ef4bd0613c44c702233f7af888d6c0
+Subproject commit ce5e32d444a35a691ac6b0abfbc722945e7cdf46

package.json

@@ -67,7 +67,7 @@
     "@typescript-eslint/eslint-plugin": "^4.27.0",
     "@typescript-eslint/parser": "^4.27.0",
     "classnames": "^2.3.1",
-    "dayjs": "^1.10.5",
+    "dayjs": "^1.10.6",
     "detect-browser": "^5.2.0",
     "eslint": "^7.28.0",
     "eslint-config-preact": "^1.1.4",

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
+            { message.author === SYSTEM_USER_ID ?
-                disallowBigEmoji
+                <SystemMessage message={message} /> :
-                content={(message.content as string).replace(/\n/g, " ")}
+                <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
+                            { message.author === SYSTEM_USER_ID ?
-                                disallowBigEmoji
+                                <SystemMessage message={message} /> :
-                                content={(message.content as string).replace(
+                                <Markdown
-                                    /\n/g,
+                                    disallowBigEmoji
-                                    " ",
+                                    content={(message.content as string).replace(/\n/g, " ")}
-                                )}
+                                />
-                            />
+                            }
                         </ReplyBase>
                         <span class="actions">
                             <IconButton

src/components/ui/DateDivider.tsx

@@ -1,5 +1,6 @@
-import dayjs from "dayjs";
+
 import styled, { css } from "styled-components";
+import { dayjs } from "../../context/Locale";
 
 const Base = styled.div<{ unread?: boolean }>`
     height: 0;

src/context/Locale.tsx

@@ -1,4 +1,6 @@
-import dayjs from "dayjs";
+import dayJS from "dayjs";
+export const dayjs = dayJS;
+
 import calendar from "dayjs/plugin/calendar";
 import format from "dayjs/plugin/localizedFormat";
 import update from "dayjs/plugin/updateLocale";
@@ -143,12 +145,11 @@ function Locale({ children, locale }: Props) {
     // TODO: clean this up and use the built in Intl API
     function transformLanguage(source: { [key: string]: any }) {
         const obj = defaultsDeep(source, definition);
-
         const dayjs = obj.dayjs;
         const defaults = dayjs.defaults;
 
         const twelvehour = defaults?.twelvehour === "yes" || true;
-        const separator: "/" | "-" | "." = defaults?.date_separator ?? "/";
+        const separator: string = defaults?.date_separator ?? "/";
         const date: "traditional" | "simplified" | "ISO8601" =
             defaults?.date_format ?? "traditional";
 
@@ -159,19 +160,22 @@ function Locale({ children, locale }: Props) {
         };
 
         dayjs["sameElse"] = DATE_FORMATS[date];
+        dayjs["timeFormat"] = twelvehour ? "hh:mm A" : "HH:mm";
+
         Object.keys(dayjs)
             .filter((k) => typeof dayjs[k] === 'string')
             .forEach(
                 (k) =>
                     (dayjs[k] = dayjs[k].replace(
                         /{{time}}/g,
-                        twelvehour ? "LT" : "HH:mm",
+                        dayjs["timeFormat"],
                     )),
             );
 
         return obj;
     }
 
+    dayjs.updateLocale("en", { calendar: { ...definition.dayjs, sameDay: 'sussy baka' } });
     useEffect(() => {
         if (locale === "en") {
             const defn = transformLanguage(definition);
@@ -193,7 +197,7 @@ function Locale({ children, locale }: Props) {
                     dayjs.updateLocale(target, { calendar: defn.dayjs });
                 }
 
-                dayjs.locale(dayjs_locale.default);
+                dayjs.locale(target, dayjs_locale.default);
                 setDefinition(defn);
             },
         );

src/lib/i18n.tsx

@@ -12,11 +12,21 @@ interface Props {
     fields: Fields;
 }
 
+export interface Dictionary {
+    dayjs: {
+        defaults: {
+            twelvehour: 'yes' | 'no';
+            separator: string;
+            date: "traditional" | "simplified" | "ISO8601";
+        },
+        timeFormat: string
+    };
+    [key: string]: Object | string;
+}
+
 export interface IntlType {
     intl: {
-        dictionary: {
+        dictionary: Dictionary;
-            [key: string]: Object | string;
-        };
     };
 }
 
@@ -60,3 +70,8 @@ export function useTranslation() {
     return (id: string, fields?: Object, plural?: number, fallback?: string) =>
         translate(id, "", intl.dictionary, fields, plural, fallback);
 }
+
+export function useDictionary() {
+    const { intl } = useContext(IntlContext) as unknown as IntlType;
+    return intl.dictionary;
+}

src/pages/settings/panes/Sessions.tsx

@@ -10,7 +10,7 @@ import {
     Safari,
     Windows,
 } from "@styled-icons/simple-icons";
-import dayjs from "dayjs";
+
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useHistory } from "react-router-dom";
 import { decodeTime } from "ulid";
@@ -24,6 +24,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import Button from "../../../components/ui/Button";
 import Preloader from "../../../components/ui/Preloader";
 import Tip from "../../../components/ui/Tip";
+import { dayjs } from "../../../context/Locale";
 
 dayjs.extend(relativeTime);
 

yarn.lock

@@ -1997,7 +1997,7 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
-dayjs@^1.10.5:
+dayjs@^1.10.6:
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"
   integrity sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw==