Merge branch 'master' into cleanup

src/pages/developer/Developer.tsx

@@ -4,6 +4,7 @@ import Header from "../../components/ui/Header";
 import PaintCounter from "../../lib/PaintCounter";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 import { useUserPermission } from "../../context/revoltjs/hooks";
+import { Wrench } from "@styled-icons/boxicons-solid";
 
 export default function Developer() {
     // const voice = useContext(VoiceContext);
@@ -12,7 +13,10 @@ export default function Developer() {
 
     return (
         <div>
-            <Header placement="primary">Developer Tab</Header>
+            <Header placement="primary">
+                <Wrench size="24" />
+                Developer Tab
+            </Header>
             <div style={{ padding: "16px" }}>
                 <PaintCounter always />
             </div>

src/pages/friends/Friend.module.scss

@@ -14,57 +14,6 @@
     padding: 0 10px 10px 10px;
     user-select: none;
     overflow-y: scroll;
-    
-    summary {
-        position: sticky;
-        z-index: 10;
-        top: -1px;
-    }
-
-    .overline {
-        display: flex;
-        align-items: center;
-        background: var(--primary-background);
-        padding: 5px 0;
-        cursor: pointer;
-
-        .title {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-        
-        svg {
-            margin-inline-end: 4px;
-        }
-    }
-
-    details {
-        summary {
-            outline: none;
-            list-style: none;
-            transition: .2s opacity;
-
-            &::marker, &::-webkit-details-marker {
-                display: none;
-            }
-
-            svg {
-                flex-shrink: 0;
-                transition: .2s ease transform;
-            }
-        }
-
-        &:not([open]) {
-            summary {
-                opacity: .7;
-            }
-            
-            summary svg {
-                transform: rotateZ(-90deg);
-            }
-        }
-    }
 
     &[data-empty="true"] {
         img {
@@ -145,7 +94,6 @@
 .divider {
     width: 1px;
     height: 24px;
-    margin: 0 8px;
     background: var(--primary-background);
 }
 

src/pages/friends/Friends.tsx

@@ -14,6 +14,8 @@ import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regu
 import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
 import { TextReact } from "../../lib/i18n";
 import { Children } from "../../types/Preact";
+import Details from "../../components/ui/Details";
+import CollapsibleSection from "../../components/common/CollapsibleSection";
 
 export default function Friends() {
     const { openScreen } = useIntermediate();
@@ -29,17 +31,17 @@ export default function Friends() {
         ) ],
         [ 'app.special.friends.sent', users.filter(x =>
             x.relationship === Users.Relationship.Outgoing
-        ) ],
+        ), 'outgoing' ],
         [ 'app.status.online', friends.filter(x =>
             x.online && x.status?.presence !== Users.Presence.Invisible
-        ) ],
+        ), 'online' ],
         [ 'app.status.offline', friends.filter(x =>
             !x.online || x.status?.presence === Users.Presence.Invisible
-        ) ],
-        [ 'app.special.friends.blocked', friends.filter(x =>
+        ), 'offline' ],
+        [ 'app.special.friends.blocked', users.filter(x =>
             x.relationship === Users.Relationship.Blocked
-        ) ]
-    ] as [ string, User[] ][];
+        ), 'blocked' ]
+    ] as [ string, User[], string ][];
 
     const incoming = lists[0][1];
     const userlist: Children[] = incoming.map(x => <b>{ x.username }</b>);
@@ -56,7 +58,7 @@ export default function Friends() {
                 <div className={styles.actions}>
                     {/*<Tooltip content={"Create Category"} placement="bottom">
                         <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
-                            <ListPlus size={24} />
+                            <ListPlus size={28} />
                         </IconButton>
                     </Tooltip>
                     <div className={styles.divider} />*/}
@@ -107,22 +109,18 @@ export default function Friends() {
                 </div> }
 
                 {
-                    lists.map(([i18n, list], index) => {
+                    lists.map(([i18n, list, section_id], index) => {
                         if (index === 0) return;
                         if (list.length === 0) return;
 
                         return (
-                            <details open>
-                                <summary>
-                                    <Overline className={styles.overline} type="subtle">
-                                        <ChevronDown size={20} />
-                                        <div className={styles.title}>
-                                            <Text id={i18n} /> — { list.length }
-                                        </div>
-                                    </Overline>
-                                </summary>
+                            <CollapsibleSection
+                                id={`friends_${section_id}`}
+                                defaultValue={true}
+                                sticky large
+                                summary={<div class="title"><Text id={i18n} /> — { list.length }</div>}>
                                 { list.map(x => <Friend key={x._id} user={x} />) }
-                            </details>
+                            </CollapsibleSection>
                         )
                     })
                 }

src/pages/settings/Settings.module.scss

@@ -93,7 +93,7 @@
             margin: 1rem 12px 0;
             font-size: 10px;
             color: var(--secondary-foreground);
-            font-family: "Fira Mono", monospace;
+            font-family: var(--monoscape-font), monospace;
             user-select: text;
 
             display: grid;

src/pages/settings/Settings.tsx

@@ -10,22 +10,19 @@ import {
     Bell,
     Palette,
     Coffee,
-    Globe,
     IdCard,
-    LogOut,
-    Sync as SyncIcon,
-    Shield,
-    Vial,
-    User
-} from "@styled-icons/boxicons-regular";
-import { Brush, Megaphone } from "@styled-icons/boxicons-solid";
+    CheckShield,
+    Flask,
+    User,
+    Megaphone
+} from "@styled-icons/boxicons-solid";
+import { Sync as SyncIcon, Globe, LogOut } from "@styled-icons/boxicons-regular";
 import { Gitlab } from "@styled-icons/boxicons-logos";
 import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
 import LineDivider from "../../components/ui/LineDivider";
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
 import ButtonItem from "../../components/navigation/items/ButtonItem";
 import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
-
 import { Account } from "./panes/Account";
 import { Profile } from "./panes/Profile";
 import { Sessions } from "./panes/Sessions";
@@ -64,7 +61,7 @@ export default function Settings() {
                 },
                 {
                     id: 'sessions',
-                    icon: <Shield size={20} />,
+                    icon: <CheckShield size={20} />,
                     title: <Text id="app.settings.pages.sessions.title" />
                 },
                 {
@@ -91,7 +88,7 @@ export default function Settings() {
                 {
                     divider: true,
                     id: 'experiments',
-                    icon: <Vial size={20} />,
+                    icon: <Flask size={20} />,
                     title: <Text id="app.settings.pages.experiments.title" />
                 },
                 {

src/pages/settings/panes/Account.tsx

@@ -5,7 +5,8 @@ import Button from "../../../components/ui/Button";
 import { Users } from "revolt.js/dist/api/objects";
 import { Link, useHistory } from "react-router-dom";
 import Overline from "../../../components/ui/Overline";
-import { At, Key, Envelope } from "@styled-icons/boxicons-regular";
+import { Envelope, Key } from "@styled-icons/boxicons-solid";
+import { At } from "@styled-icons/boxicons-regular";
 import { useContext, useEffect, useState } from "preact/hooks";
 import UserIcon from "../../../components/common/user/UserIcon";
 import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
@@ -47,9 +48,7 @@ export function Account() {
     return (
         <div className={styles.user}>
             <div className={styles.banner}>
-                <Link to="/settings/profile">
-                    <UserIcon target={user} size={72} />
-                </Link>
+                <UserIcon className={styles.avatar} target={user} size={72} onClick={() => switchPage("profile")}/>
                 <div className={styles.username}>@{user.username}</div>
             </div>
             <div className={styles.details}>

src/pages/settings/panes/Appearance.tsx

@@ -2,15 +2,18 @@ import { Text } from "preact-i18n";
 import styles from "./Panes.module.scss";
 import { debounce } from "../../../lib/debounce";
 import Button from "../../../components/ui/Button";
+import Checkbox from "../../../components/ui/Checkbox";
+import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";
 import { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import ColourSwatches from "../../../components/ui/ColourSwatches";
 import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
-import { Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import CollapsibleSection from "../../../components/common/CollapsibleSection";
+import { FONTS, FONT_KEYS, MONOSCAPE_FONTS, MONOSCAPE_FONT_KEYS, Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
 
 // @ts-ignore
 import pSBC from 'shade-blend-color';
@@ -129,6 +132,25 @@ export function Component(props: Props & WithDispatcher) {
                 </Radio>
             </div>*/}
 
+            <h3>
+                <Text id="app.settings.pages.appearance.font" />
+            </h3>
+            <ComboBox value={theme.font} onChange={e => setTheme({ custom: { font: e.currentTarget.value as any } })}>
+                {
+                    FONT_KEYS
+                        .map(key =>
+                            <option value={key}>{ FONTS[key as keyof typeof FONTS].name }</option>
+                        )
+                }
+            </ComboBox>
+            <p>
+                <Checkbox checked={props.settings.theme?.ligatures === true}
+                    onChange={() => setTheme({ ligatures: !props.settings.theme?.ligatures })}
+                    description={<Text id="app.settings.pages.appearance.ligatures_desc" />}>
+                    <Text id="app.settings.pages.appearance.ligatures" />
+                </Checkbox>
+            </p>
+
             <h3>
                 <Text id="app.settings.pages.appearance.emoji_pack" />
             </h3>
@@ -171,11 +193,7 @@ export function Component(props: Props & WithDispatcher) {
                 </div>
             </div>
 
-            <details>
-                <summary>
-                    <Text id="app.settings.pages.appearance.advanced" />
-                    <div className={styles.divider}></div>
-                </summary>
+            <CollapsibleSection id="settings_advanced_appearance" defaultValue={false} summary={<Text id="app.settings.pages.appearance.advanced" />}>
                 <h3>
                     <Text id="app.settings.pages.appearance.overrides" />
                 </h3>
@@ -263,6 +281,19 @@ export function Component(props: Props & WithDispatcher) {
                         </div>
                     ))}
                 </div>
+
+                <h3>
+                    <Text id="app.settings.pages.appearance.mono_font" />
+                </h3>
+                <ComboBox value={theme.monoscapeFont} onChange={e => setTheme({ custom: { monoscapeFont: e.currentTarget.value as any } })}>
+                    {
+                        MONOSCAPE_FONT_KEYS
+                            .map(key =>
+                                <option value={key}>{ MONOSCAPE_FONTS[key as keyof typeof MONOSCAPE_FONTS].name }</option>
+                            )
+                    }
+                </ComboBox>
+
                 <h3>
                     <Text id="app.settings.pages.appearance.custom_css" />
                 </h3>
@@ -272,7 +303,7 @@ export function Component(props: Props & WithDispatcher) {
                     code
                     value={css}
                     onChange={ev => setCSS(ev.currentTarget.value)} />
-            </details>
+            </CollapsibleSection>
         </div>
     );
 }

src/pages/settings/panes/Notifications.tsx

@@ -39,6 +39,7 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
             <Checkbox
                 disabled={!("Notification" in window)}
                 checked={options?.desktopEnabled ?? false}
+                description={<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />}
                 onChange={async desktopEnabled => {
                     if (desktopEnabled) {
                         let permission = await Notification.requestPermission();
@@ -57,13 +58,11 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
                 }}
             >
                 <Text id="app.settings.pages.notifications.enable_desktop" />
-                <p>
-                    <Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
-                </p>
             </Checkbox>
             <Checkbox
                 disabled={typeof pushEnabled === "undefined"}
                 checked={pushEnabled ?? false}
+                description={<Text id="app.settings.pages.notifications.descriptions.enable_push" />}
                 onChange={async pushEnabled => {
                     try {
                         const reg = await navigator.serviceWorker?.getRegistration();
@@ -99,9 +98,6 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
                 }}
             >
                 <Text id="app.settings.pages.notifications.enable_push" />
-                <p>
-                    <Text id="app.settings.pages.notifications.descriptions.enable_push" />
-                </p>
             </Checkbox>
             <h3>
                 <Text id="app.settings.pages.notifications.sounds" />

src/pages/settings/panes/Panes.module.scss

@@ -8,16 +8,18 @@
         align-items: center;
         background: var(--secondary-header);
 
+        .avatar {
+            cursor: pointer;
+            transition: 0.2s ease filter;
+
+            &:hover {
+                filter: brightness(80%);
+            }
+        }
+
         .username {
             font-size: 24px;
-        }
-
-        a {
-            transition: 0.2s ease filter;
-        }
-
-        a:hover {
-            filter: brightness(80%);
+            font-weight: 600;
         }
     }
 
@@ -32,6 +34,10 @@
             display: flex;
             align-items: center;
             flex-direction: row;
+
+            > svg {
+                flex-shrink: 0;
+            }
         }
 
         .detail {
@@ -321,30 +327,16 @@
     }
 }
 
-.notifications {
-    label {
-        margin-top: 12px;
-    }
-
-    p {
-        margin-top: 0;
-        font-size: 0.9em;
-        color: var(--secondary-foreground);
-    }
-}
-
 .languages {
     .list {
         margin-bottom: 1em;
         
         .entry {
-            padding: 2px 8px;
             height: 50px;
-            border-radius: 4px;
         }
 
         .entry > span > span {
-            gap: 8px;
+            gap: 20px;
             display: flex;
             align-items: center;
             flex-direction: row;

src/pages/settings/panes/Sync.tsx

@@ -25,6 +25,7 @@ export function Component(props: Props & WithDispatcher) {
                     ([ key, title ]) =>
                         <Checkbox
                             checked={(props.options?.disabled ?? []).indexOf(key) === -1}
+                            description={<Text id={`app.settings.pages.sync.descriptions.${key}`} />}
                             onChange={enabled => {
                                 props.dispatcher({
                                     type: enabled ? 'SYNC_ENABLE_KEY' : 'SYNC_DISABLE_KEY',
@@ -33,9 +34,6 @@ export function Component(props: Props & WithDispatcher) {
                             }}
                         >
                             <Text id={`app.settings.pages.${title}`} />
-                            <p>
-                                <Text id={`app.settings.pages.sync.descriptions.${key}`} />
-                            </p>
                         </Checkbox>
                 )
             }

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,11 +81,6 @@ export function Overview({ server }: Props) {
                     if (!changed) setChanged(true)
                 }}
             />
-            <p>
-                <Button onClick={save} contrast disabled={!changed}>
-                    <Text id="app.special.modals.actions.save" />
-                </Button>
-            </p>
 
             <h3>
                 <Text id="app.main.servers.custom_banner" />
@@ -95,6 +95,48 @@ export function Overview({ server }: Props) {
                 previewURL={client.servers.getBannerURL(server._id, { width: 1000 }, true)}
                 remove={() => client.servers.edit(server._id, { remove: 'Banner' })}
             />
+
+            <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', flex: `25%` }}>{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" />
+                </Button>
+            </p>
         </div>
     );
 }

src/pages/settings/server/Roles.tsx

@@ -49,7 +49,7 @@ export function Roles({ server }: Props) {
             <div className={styles.list}>
                 <div className={styles.title}>
                     <h1><Text id="app.settings.server_pages.roles.title" /></h1>
-                    <Plus size={16} onClick={() =>
+                    <Plus size={22} onClick={() =>
                         openScreen({ id: 'special_input', type: 'create_role', server: server._id, callback: id => setRole(id) })} />
                 </div>
                 { [ 'default', ...Object.keys(roles) ]