Add a way to edit system message channels.

external/lang

@@ -1 +1 @@
-Subproject commit 66e4563231bcfab8f8b7cf3fa0f5b86797719b7b
+Subproject commit 7ed91d39ac72edc9d70c8e531caf50172bd79ff6

src/pages/settings/server/Members.tsx

@@ -1,7 +1,6 @@
 import styles from './Panes.module.scss';
 import { useEffect, useState } from "preact/hooks";
 import { Servers } from "revolt.js/dist/api/objects";
-import UserIcon from "../../../components/common/user/UserIcon";
 import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
 
 interface Props {
@@ -23,7 +22,7 @@ export function Members({ server }: Props) {
     return (
         <div className={styles.members}>
             <div className={styles.subtitle}>
-                X Members
+                { members?.length ?? 0 } Members
             </div>
             { members && members.length > 0 && users?.map(x => x && 
                 <div className={styles.member}>

src/pages/settings/server/Overview.tsx

@@ -1,10 +1,13 @@
 import { Text } from "preact-i18n";
+import isEqual from "lodash.isequal";
 import styles from './Panes.module.scss';
 import Button from "../../../components/ui/Button";
-import { Servers } from "revolt.js/dist/api/objects";
 import InputBox from "../../../components/ui/InputBox";
+import ComboBox from "../../../components/ui/ComboBox";
+import { Servers, Server } from "revolt.js/dist/api/objects";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { useContext, useEffect, useState } from "preact/hooks";
+import { getChannelName } from "../../../context/revoltjs/util";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
 
@@ -17,16 +20,18 @@ export function Overview({ server }: Props) {
 
     const [name, setName] = useState(server.name);
     const [description, setDescription] = useState(server.description ?? '');
+    const [systemMessages, setSystemMessages] = useState(server.system_messages);
 
     useEffect(() => setName(server.name), [ server.name ]);
     useEffect(() => setDescription(server.description ?? ''), [ server.description ]);
+    useEffect(() => setSystemMessages(server.system_messages), [ server.system_messages ]);
 
     const [ changed, setChanged ] = useState(false);
     function save() {
-        let changes: any = {};
+        let changes: Partial<Pick<Servers.Server, 'name' | 'description' | 'system_messages'>> = {};
         if (name !== server.name) changes.name = name;
-        if (description !== server.description)
-            changes.description = description;
+        if (description !== server.description) changes.description = description;
+        if (!isEqual(systemMessages, server.system_messages)) changes.system_messages = systemMessages;
         
         client.servers.edit(server._id, changes);
         setChanged(false);
@@ -76,6 +81,43 @@ export function Overview({ server }: Props) {
                     if (!changed) setChanged(true)
                 }}
             />
+
+            <h3>
+                <Text id="app.settings.server_pages.overview.system_messages" />
+            </h3>
+            {[
+                [ 'User Joined', 'user_joined' ],
+                [ 'User Left', 'user_left' ],
+                [ 'User Kicked', 'user_kicked' ],
+                [ 'User Banned', 'user_banned' ]
+            ].map(([ i18n, key ]) =>
+                // ! FIXME: temporary code just so we can expose the options
+                <p style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                    <span style={{ flexShrink: '0' }}>{i18n}</span>
+                    <ComboBox value={systemMessages?.[key as keyof typeof systemMessages] ?? 'disabled'}
+                        onChange={e => {
+                            if (!changed) setChanged(true)
+                            const v = e.currentTarget.value;
+                            if (v === 'disabled') {
+                                const { [key as keyof typeof systemMessages]: _, ...other } = systemMessages;
+                                setSystemMessages(other);
+                            } else {
+                                setSystemMessages({
+                                    ...systemMessages,
+                                    [key]: v
+                                });
+                            }
+                        }}>
+                        <option value='disabled'><Text id="general.disabled" /></option>
+                        { server.channels.map(id => {
+                            const channel = client.channels.get(id);
+                            if (!channel) return null;
+                            return <option value={id}>{ getChannelName(client, channel, true) }</option>;
+                        }) }
+                    </ComboBox>
+                </p>
+            )}
+
             <p>
                 <Button onClick={save} contrast disabled={!changed}>
                     <Text id="app.special.modals.actions.save" />