feat: add changelog modal

src/context/modals/components/Changelog.tsx

@@ -0,0 +1,105 @@
+import dayjs from "dayjs";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useMemo, useState } from "preact/hooks";
+
+import { CategoryButton, Column, Modal } from "@revoltchat/ui";
+import type { Action } from "@revoltchat/ui/esm/components/design/atoms/display/Modal";
+
+import { noopTrue } from "../../../lib/js";
+
+import {
+    changelogEntries,
+    changelogEntryArray,
+    ChangelogPost,
+} from "../../../assets/changelogs";
+import { ModalProps } from "../types";
+
+const Image = styled.img`
+    border-radius: var(--border-radius);
+`;
+
+function RenderLog({ post }: { post: ChangelogPost }) {
+    return (
+        <Column>
+            {post.content.map((entry) =>
+                typeof entry === "string" ? (
+                    <span>{entry}</span>
+                ) : (
+                    <Image src={entry.src} />
+                ),
+            )}
+        </Column>
+    );
+}
+
+/**
+ * Changelog rendering modal
+ */
+export default function Changelog({
+    initial,
+    onClose,
+}: ModalProps<"changelog">) {
+    const [log, setLog] = useState(initial);
+
+    const entry = useMemo(
+        () => (log ? changelogEntries[log] : undefined),
+        [log],
+    );
+
+    const actions = useMemo(() => {
+        const arr: Action[] = [
+            {
+                palette: "primary",
+                children: <Text id="app.special.modals.actions.close" />,
+                onClick: noopTrue,
+            },
+        ];
+
+        if (log) {
+            arr.push({
+                palette: "plain-secondary",
+                children: <Text id="app.special.modals.changelogs.older" />,
+                onClick: () => {
+                    setLog(undefined);
+                    return false;
+                },
+            });
+        }
+
+        return arr;
+    }, [log]);
+
+    return (
+        <Modal
+            title={
+                entry?.title ?? (
+                    <Text id="app.special.modals.changelogs.title" />
+                )
+            }
+            description={
+                entry ? (
+                    dayjs(entry.date).calendar()
+                ) : (
+                    <Text id="app.special.modals.changelogs.description" />
+                )
+            }
+            actions={actions}
+            onClose={onClose}>
+            {entry ? (
+                <RenderLog post={entry} />
+            ) : (
+                <Column>
+                    {changelogEntryArray.map((entry, index) => (
+                        <CategoryButton
+                            key={index}
+                            onClick={() => setLog(index + 1)}>
+                            {entry.title}
+                        </CategoryButton>
+                    ))}
+                </Column>
+            )}
+        </Modal>
+    );
+}

src/context/modals/index.tsx

@@ -8,6 +8,7 @@ import {
 import type { Client, API } from "revolt.js";
 import { ulid } from "ulid";
 
+import Changelog from "./components/Changelog";
 import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
 import MFARecovery from "./components/MFARecovery";
@@ -118,6 +119,7 @@ class ModalControllerExtended extends ModalController<Modal> {
 }
 
 export const modalController = new ModalControllerExtended({
+    changelog: Changelog,
     mfa_flow: MFAFlow,
     mfa_recovery: MFARecovery,
     mfa_enable_totp: MFAEnableTOTP,

src/context/modals/types.ts

@@ -28,6 +28,10 @@ export type Modal = {
           type: "out_of_date";
           version: string;
       }
+    | {
+          type: "changelog";
+          initial?: number;
+      }
     | {
           type: "test";
       }

src/context/revoltjs/SyncManager.tsx

@@ -18,7 +18,10 @@ export default function SyncManager() {
     // Sync settings from Revolt.
     useEffect(() => {
         if (client) {
-            state.sync.pull(client);
+            state.sync
+                .pull(client)
+                .catch(console.error)
+                .finally(() => state.changelog.checkForUpdates());
         }
     }, [client]);