feat: display timeout status on client

package.json

@@ -144,7 +144,7 @@
         "remark-math": "^5.1.1",
         "remark-parse": "^10.0.1",
         "remark-rehype": "^10.1.0",
-        "revolt.js": "6.0.13",
+        "revolt.js": "6.0.16",
         "rimraf": "^3.0.2",
         "sass": "^1.35.1",
         "semver": "^7.3.7",

src/components/common/messaging/MessageBox.tsx

@@ -25,6 +25,8 @@ import {
 import { state, useApplicationState } from "../../../mobx/State";
 import { Reply } from "../../../mobx/stores/MessageQueue";
 
+import { dayjs } from "../../../context/Locale";
+
 import { emojiDictionary } from "../../../assets/emojis";
 import {
     clientController,
@@ -226,6 +228,34 @@ export default observer(({ channel }: Props) => {
 
     const renderer = getRenderer(channel);
 
+    if (channel.server?.member?.timeout) {
+        return (
+            <Base>
+                <Blocked>
+                    <Action>
+                        <PermissionTooltip
+                            permission="SendMessages"
+                            placement="top">
+                            <ShieldX size={22} />
+                        </PermissionTooltip>
+                    </Action>
+                    <div className="text">
+                        <Text
+                            id="app.main.channel.misc.timed_out"
+                            fields={{
+                                // TODO: make this reactive
+                                time: dayjs().to(
+                                    channel.server.member.timeout,
+                                    true,
+                                ),
+                            }}
+                        />
+                    </div>
+                </Blocked>
+            </Base>
+        );
+    }
+
     if (!channel.havePermission("SendMessage")) {
         return (
             <Base>

src/components/common/user/UserShort.tsx

@@ -1,3 +1,4 @@
+import { TimeFive } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
 import { User, API } from "revolt.js";
@@ -8,8 +9,11 @@ import { Text } from "preact-i18n";
 
 import { internalEmit } from "../../../lib/eventEmitter";
 
+import { dayjs } from "../../../context/Locale";
+
 import { useClient } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
+import Tooltip from "../Tooltip";
 import UserIcon from "./UserIcon";
 
 const BotBadge = styled.div`
@@ -64,6 +68,7 @@ export const Username = observer(
     }: UsernameProps) => {
         let username = user?.username;
         let color = masquerade?.colour;
+        let timed_out: Date | undefined;
 
         if (user && showServerIdentity) {
             const { server } = useParams<{ server?: string }>();
@@ -83,6 +88,10 @@ export const Username = observer(
                         }
                     }
 
+                    if (member.timeout) {
+                        timed_out = member.timeout;
+                    }
+
                     if (!color) {
                         for (const [_, { colour }] of member.orderedRoles) {
                             if (colour) {
@@ -95,12 +104,31 @@ export const Username = observer(
         }
 
         const el = (
-            <Name {...otherProps} ref={innerRef} colour={color}>
-                {prefixAt ? "@" : undefined}
-                {masquerade?.name ?? username ?? (
-                    <Text id="app.main.channel.unknown_user" />
+            <>
+                <Name {...otherProps} ref={innerRef} colour={color}>
+                    {prefixAt ? "@" : undefined}
+                    {masquerade?.name ?? username ?? (
+                        <Text id="app.main.channel.unknown_user" />
+                    )}
+                </Name>
+
+                {timed_out && (
+                    <Tooltip
+                        content={
+                            <Text
+                                id="app.main.channel.user_timed_out"
+                                fields={{
+                                    time: dayjs(timed_out).fromNow(true),
+                                }}
+                            />
+                        }>
+                        <TimeFive
+                            size={16}
+                            color="var(--secondary-foreground)"
+                        />
+                    </Tooltip>
                 )}
-            </Name>
+            </>
         );
 
         if (user?.bot) {

yarn.lock

@@ -3754,7 +3754,7 @@ __metadata:
     remark-math: ^5.1.1
     remark-parse: ^10.0.1
     remark-rehype: ^10.1.0
-    revolt.js: 6.0.13
+    revolt.js: 6.0.16
     rimraf: ^3.0.2
     sass: ^1.35.1
     semver: ^7.3.7
@@ -8023,9 +8023,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"revolt.js@npm:6.0.13":
-  version: 6.0.13
-  resolution: "revolt.js@npm:6.0.13"
+"revolt.js@npm:6.0.16":
+  version: 6.0.16
+  resolution: "revolt.js@npm:6.0.16"
   dependencies:
     "@insertish/exponential-backoff": 3.1.0-patch.2
     "@insertish/isomorphic-ws": ^4.0.1
@@ -8039,7 +8039,7 @@ __metadata:
     revolt-api: 0.5.5
     ulid: ^2.3.0
     ws: ^8.2.2
-  checksum: 15fae99ced07c93942122bcc190bb03c62bf6c9bb90ca35aec5c1ed12f547e1dad7b596c549784ba8bf38ebbb96e62af195305ec92ec9fadf69969a1681b8e23
+  checksum: eb7381de4a149a216496f3467b19b8e52548b0dfd02c5a0f6274f05ca7ed4d37f9985408b1b2317e4ae3b35c439df88b5ad33620c6aa5a8731783a47d14421e3
   languageName: node
   linkType: hard