feat: add auto-update and out-of-date indicator

src/context/modals/components/OutOfDate.tsx

@@ -0,0 +1,47 @@
+import { Text } from "preact-i18n";
+
+import { Modal } from "@revoltchat/ui";
+
+import { noop, noopTrue } from "../../../lib/js";
+
+import { APP_VERSION } from "../../../version";
+import { ModalProps } from "../types";
+
+export default function OutOfDate({
+    onClose,
+    version,
+}: ModalProps<"out_of_date">) {
+    return (
+        <Modal
+            title={<Text id="app.special.modals.out_of_date.title" />}
+            description={
+                <>
+                    <Text id="app.special.modals.out_of_date.description" />
+                    <br />
+                    <Text
+                        id="app.special.modals.out_of_date.version"
+                        fields={{ client: APP_VERSION, server: version }}
+                    />
+                </>
+            }
+            actions={[
+                {
+                    palette: "plain",
+                    onClick: noop,
+                    children: (
+                        <Text id="app.special.modals.out_of_date.attempting" />
+                    ),
+                },
+                {
+                    palette: "plain-secondary",
+                    onClick: noopTrue,
+                    children: (
+                        <Text id="app.special.modals.out_of_date.ignore" />
+                    ),
+                },
+            ]}
+            onClose={onClose}
+            nonDismissable
+        />
+    );
+}

src/context/modals/index.tsx

@@ -11,6 +11,7 @@ import { ulid } from "ulid";
 import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
 import MFARecovery from "./components/MFARecovery";
+import OutOfDate from "./components/OutOfDate";
 import Test from "./components/Test";
 import { Modal } from "./types";
 
@@ -120,5 +121,6 @@ export const modalController = new ModalControllerExtended({
     mfa_flow: MFAFlow,
     mfa_recovery: MFARecovery,
     mfa_enable_totp: MFAEnableTOTP,
+    out_of_date: OutOfDate,
     test: Test,
 });

src/context/modals/types.ts

@@ -24,6 +24,10 @@ export type Modal = {
           secret: string;
           callback: (code?: string) => void;
       }
+    | {
+          type: "out_of_date";
+          version: string;
+      }
     | {
           type: "test";
       }