merge: branch 'master' into production

external/lang

@@ -1 +1 @@
-Subproject commit 5af7326c286f729ac6dd4cabff9dfdf7c480b631
+Subproject commit 58a9fb697de00f570d445be4d12e3ce4a5e3522e

package.json

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

src/components/common/messaging/SystemMessage.tsx

@@ -9,6 +9,7 @@ import {
     EditAlt,
     Edit,
     MessageSquareEdit,
+    Key,
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Message, API } from "revolt.js";
@@ -18,6 +19,7 @@ import { useTriggerEvents } from "preact-context-menu";
 
 import { TextReact } from "../../../lib/i18n";
 
+import Markdown from "../../markdown/Markdown";
 import UserShort from "../user/UserShort";
 import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
 
@@ -67,12 +69,15 @@ const iconDictionary = {
     channel_renamed: EditAlt,
     channel_description_changed: Edit,
     channel_icon_changed: MessageSquareEdit,
+    channel_ownership_changed: Key,
     text: InfoCircle,
 };
 
 export const SystemMessage = observer(
     ({ attachContext, message, highlight, hideInfo }: Props) => {
         const data = message.asSystemMessage;
+        if (!data) return null;
+
         const SystemMessageIcon =
             iconDictionary[data.type as API.SystemMessage["type"]] ??
             InfoCircle;
@@ -130,6 +135,22 @@ export const SystemMessage = observer(
                     />
                 );
                 break;
+            case "channel_ownership_changed":
+                children = (
+                    <TextReact
+                        id={`app.main.channel.system.channel_ownership_changed`}
+                        fields={{
+                            from: <UserShort user={data.from} />,
+                            to: <UserShort user={data.to} />,
+                        }}
+                    />
+                );
+                break;
+            case "text":
+                if (message.system?.type === "text") {
+                    children = <Markdown content={message.system?.content} />;
+                }
+                break;
         }
 
         return (

src/components/common/user/UserShort.tsx

@@ -26,7 +26,10 @@ const BotBadge = styled.div`
     border-radius: calc(var(--border-radius) / 2);
 `;
 
-type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
+type UsernameProps = Omit<
+    JSX.HTMLAttributes<HTMLElement>,
+    "children" | "as"
+> & {
     user?: User;
     prefixAt?: boolean;
     masquerade?: API.Masquerade;
@@ -35,6 +38,13 @@ type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
     innerRef?: Ref<any>;
 };
 
+const Name = styled.span<{ colour?: string | null }>`
+    background: ${(props) => props.colour ?? "var(--foreground)"};
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+`;
+
 export const Username = observer(
     ({
         user,
@@ -45,7 +55,7 @@ export const Username = observer(
         ...otherProps
     }: UsernameProps) => {
         let username = user?.username;
-        let color;
+        let color = masquerade?.colour;
 
         if (user && showServerIdentity) {
             const { server } = useParams<{ server?: string }>();
@@ -65,15 +75,10 @@ export const Username = observer(
                         }
                     }
 
-                    if (member.roles && member.roles.length > 0) {
+                    if (!color) {
-                        const srv = client.servers.get(member._id.server);
+                        for (const [_, { colour }] of member.orderedRoles) {
-                        if (srv?.roles) {
+                            if (colour) {
-                            for (const role of member.roles) {
+                                color = colour;
-                                const c = srv.roles[role]?.colour;
-                                if (c) {
-                                    color = c;
-                                    continue;
-                                }
                             }
                         }
                     }
@@ -81,14 +86,19 @@ export const Username = observer(
             }
         }
 
-        if (user?.bot) {
+        const el = (
-            return (
+            <Name {...otherProps} ref={innerRef} colour={color}>
-                <>
+                {prefixAt ? "@" : undefined}
-                    <span {...otherProps} ref={innerRef} style={{ color }}>
                 {masquerade?.name ?? username ?? (
                     <Text id="app.main.channel.unknown_user" />
                 )}
-                    </span>
+            </Name>
+        );
+
+        if (user?.bot) {
+            return (
+                <>
+                    {el}
                     <BotBadge>
                         {masquerade ? (
                             <Text id="app.main.channel.bridge" />
@@ -100,14 +110,7 @@ export const Username = observer(
             );
         }
 
-        return (
+        return el;
-            <span {...otherProps} ref={innerRef} style={{ color }}>
-                {prefixAt ? "@" : undefined}
-                {masquerade?.name ?? username ?? (
-                    <Text id="app.main.channel.unknown_user" />
-                )}
-            </span>
-        );
     },
 );
 

src/controllers/modals/components/MFARecovery.tsx

@@ -23,6 +23,11 @@ const List = styled.div`
     span {
         user-select: text;
     }
+
+    i {
+        opacity: 0;
+        position: absolute;
+    }
 `;
 
 /**
@@ -73,8 +78,10 @@ export default function MFARecovery({
             onClose={onClose}
             signal={signal}>
             <List>
-                {known.map((code) => (
+                {known.map((code, index) => (
-                    <span key={code}>{code}</span>
+                    <span key={code}>
+                        {code} {index !== known.length && <i>{","}</i>}
+                    </span>
                 ))}
             </List>
         </Modal>

src/lib/ContextMenus.tsx

@@ -69,6 +69,7 @@ type Action =
     | { action: "copy_file_link"; attachment: API.File }
     | { action: "open_link"; link: string }
     | { action: "copy_link"; link: string }
+    | { action: "make_owner"; channel: Channel; user: User }
     | { action: "remove_member"; channel: Channel; user: User }
     | { action: "kick_member"; target: Member }
     | { action: "ban_member"; target: Member }
@@ -307,6 +308,15 @@ export default function ContextMenus() {
                     }
                     break;
 
+                case "make_owner":
+                    {
+                        // FIXME: add a modal for this
+                        data.channel.edit({
+                            owner: data.user._id,
+                        });
+                    }
+                    break;
+
                 case "remove_member":
                     {
                         data.channel.removeMember(data.user._id);
@@ -667,11 +677,29 @@ export default function ContextMenus() {
                                 contextualChannel.owner_id === userId &&
                                 userId !== uid
                             ) {
-                                generateAction({
+                                generateAction(
+                                    {
+                                        action: "make_owner",
+                                        channel: contextualChannel,
+                                        user: user!,
+                                    },
+                                    undefined,
+                                    false,
+                                    undefined,
+                                    "var(--error)",
+                                );
+
+                                generateAction(
+                                    {
                                         action: "remove_member",
                                         channel: contextualChannel,
                                         user: user!,
-                                });
+                                    },
+                                    undefined,
+                                    false,
+                                    undefined,
+                                    "var(--error)",
+                                );
                             }
                         }
 

yarn.lock

@@ -3696,7 +3696,7 @@ __metadata:
     remark-math: ^5.1.1
     remark-parse: ^10.0.1
     remark-rehype: ^10.1.0
-    revolt.js: ^6.0.6
+    revolt.js: 6.0.9
     rimraf: ^3.0.2
     sass: ^1.35.1
     semver: ^7.3.7
@@ -7879,20 +7879,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"revolt-api@npm:0.5.4":
+"revolt-api@npm:0.5.5":
-  version: 0.5.4
+  version: 0.5.5
-  resolution: "revolt-api@npm:0.5.4"
+  resolution: "revolt-api@npm:0.5.5"
   dependencies:
     "@insertish/oapi": 0.1.16
     axios: ^0.26.1
     lodash.defaultsdeep: ^4.6.1
-  checksum: bd40acabac1b6c5848b1d6e555297de5aa3e0950a4de67523c4cf986a8037380e3addc5e16babebc8dfa6570cd1d1957efe9a3aaa6a206b9286e5b7f5941d699
+  checksum: 38fa78e3f731a8753916da58347ac930ff911f7a45d67f9d3e55bdaf56be5eb11c8568803209a76d9a40e6d5faa4a5adfc80aa6377528df499080f5e3b75cd2d
   languageName: node
   linkType: hard
 
-"revolt.js@npm:^6.0.6":
+"revolt.js@npm:6.0.9":
-  version: 6.0.6
+  version: 6.0.9
-  resolution: "revolt.js@npm:6.0.6"
+  resolution: "revolt.js@npm:6.0.9"
   dependencies:
     "@insertish/exponential-backoff": 3.1.0-patch.2
     "@insertish/isomorphic-ws": ^4.0.1
@@ -7903,10 +7903,10 @@ __metadata:
     lodash.isequal: ^4.5.0
     long: ^5.2.0
     mobx: ^6.3.2
-    revolt-api: 0.5.4
+    revolt-api: 0.5.5
     ulid: ^2.3.0
     ws: ^8.2.2
-  checksum: 079bdb983c650233378a617b771d7ff64396ce96fbd822fea20e9897fa14c2e589869e4a66f749dc74ce08218af425f97ab42fcaca7a3ab0f68f38f163484260
+  checksum: a3ea924a6793f6a4aa5f62e660b249bd76bbe2f0048d9b374a449f064ee6d65df1b8e4e3af1d15267707ea6d35b6a3101349b0bf41fa323cb5c298ab98de8d45
   languageName: node
   linkType: hard