publish.sh

+#!/bin/bash
+version=$(cat VERSION)
+
+                  docker build -t revoltchat/client:${version} . &&
+docker tag revoltchat/client:${version} revoltchat/client:latest &&
+                        docker push revoltchat/client:${version} &&
+                            docker push revoltchat/client:latest

src/assets/sounds/Audio.ts

-import message from './message.mp3';
-import call_join from './call_join.mp3';
-import call_leave from './call_leave.mp3';
+import call_join from "./call_join.mp3";
+import call_leave from "./call_leave.mp3";
+import message from "./message.mp3";
+import outbound from "./outbound.mp3";
 
 const SoundMap: { [key in Sounds]: string } = {
     message,
+    outbound,
     call_join,
-    call_leave
-}
+    call_leave,
+};
 
-export type Sounds = 'message' | 'call_join' | 'call_leave';
+export type Sounds = "message" | "outbound" | "call_join" | "call_leave";
+export const SOUNDS_ARRAY: Sounds[] = [
+    "message",
+    "outbound",
+    "call_join",
+    "call_leave",
+];
 
 export function playSound(sound: Sounds) {
-    let file = SoundMap[sound];
-    let el = new Audio(file);
+    const file = SoundMap[sound];
+    const el = new Audio(file);
     try {
         el.play();
     } catch (err) {
-        console.error('Failed to play audio file', file, err);
+        console.error("Failed to play audio file", file, err);
     }
 }

src/components/common/AgeGate.tsx

+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useState } from "preact/hooks";
+
+import { dispatch, getState } from "../../redux";
+
+import Button from "../ui/Button";
+import Checkbox from "../ui/Checkbox";
+
+import { Children } from "../../types/Preact";
+
+const Base = styled.div`
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    padding: 12px;
+
+    img {
+        height: 150px;
+    }
+
+    .subtext {
+        color: var(--secondary-foreground);
+        margin-bottom: 12px;
+        font-size: 14px;
+    }
+
+    .actions {
+        margin-top: 20px;
+        display: flex;
+        gap: 12px;
+    }
+`;
+
+type Props = {
+    gated: boolean;
+    children: Children;
+} & {
+    type: "channel";
+    channel: Channel;
+};
+
+export default observer((props: Props) => {
+    const history = useHistory();
+    const [consent, setConsent] = useState(
+        getState().sectionToggle["nsfw"] ?? false,
+    );
+    const [ageGate, setAgeGate] = useState(false);
+
+    if (ageGate || !props.gated) {
+        return <>{props.children}</>;
+    }
+    if (
+        !(
+            props.channel.channel_type === "Group" ||
+            props.channel.channel_type === "TextChannel"
+        )
+    )
+        return <>{props.children}</>;
+
+    return (
+        <Base>
+            <img
+                loading="eager"
+                src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
+                draggable={false}
+            />
+            <h2>{props.channel.name}</h2>
+            <span className="subtext">
+                <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
+                <a href="#">
+                    <Text id={`app.main.channel.nsfw.learn_more`} />
+                </a>
+            </span>
+
+            <Checkbox
+                checked={consent}
+                onChange={(v) => {
+                    setConsent(v);
+                    if (v) {
+                        dispatch({
+                            type: "SECTION_TOGGLE_SET",
+                            id: "nsfw",
+                            state: true,
+                        });
+                    } else {
+                        dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
+                    }
+                }}>
+                <Text id="app.main.channel.nsfw.confirm" />
+            </Checkbox>
+            <div className="actions">
+                <Button contrast onClick={() => history.goBack()}>
+                    <Text id="app.special.modals.actions.back" />
+                </Button>
+                <Button contrast onClick={() => consent && setAgeGate(true)}>
+                    <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
+                </Button>
+            </div>
+        </Base>
+    );
+});

src/components/common/ChannelIcon.tsx

+import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Channel } from "revolt.js/dist/maps/Channels";
+
 import { useContext } from "preact/hooks";
-import { Hash } from "@styled-icons/feather";
-import { Channels } from "revolt.js/dist/api/objects";
-import { ImageIconBase, IconBaseProps } from "./IconBase";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-interface Props extends IconBaseProps<Channels.GroupChannel | Channels.TextChannel> {
+import { ImageIconBase, IconBaseProps } from "./IconBase";
+import fallback from "./assets/group.png";
+
+interface Props extends IconBaseProps<Channel> {
     isServerChannel?: boolean;
 }
 
-import fallback from './assets/group.png';
-
-export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
-    const client = useContext(AppContext);
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.HTMLAttributes<HTMLImageElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
 
-    const { size, target, attachment, isServerChannel: server, animate, children, as, ...imgProps } = props;
-    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
-    const isServerChannel = server || target?.channel_type === 'TextChannel';
+        const {
+            size,
+            target,
+            attachment,
+            isServerChannel: server,
+            animate,
+            ...imgProps
+        } = props;
+        const iconURL = client.generateFileURL(
+            target?.icon ?? attachment,
+            { max_side: 256 },
+            animate,
+        );
+        const isServerChannel =
+            server ||
+            (target &&
+                (target.channel_type === "TextChannel" ||
+                    target.channel_type === "VoiceChannel"));
 
-    if (typeof iconURL === 'undefined') {
-        if (isServerChannel) {
-            return (
-                <Hash size={size} />
-            )
+        if (typeof iconURL === "undefined") {
+            if (isServerChannel) {
+                if (target?.channel_type === "VoiceChannel") {
+                    return <VolumeFull size={size} />;
+                }
+                return <Hash size={size} />;
+            }
         }
-    }
-
-    return (
-        // ! fixme: replace fallback with <picture /> + <source />
-        <ImageIconBase {...imgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            square={isServerChannel}
-            src={iconURL ?? fallback} />
-    );
-}
+
+        return (
+            // ! TODO: replace fallback with <picture /> + <source />
+            <ImageIconBase
+                {...imgProps}
+                width={size}
+                height={size}
+                loading="lazy"
+                aria-hidden="true"
+                square={isServerChannel}
+                src={iconURL ?? fallback}
+            />
+        );
+    },
+);

src/components/common/CollapsibleSection.tsx

+import { ChevronDown } from "@styled-icons/boxicons-regular";
+
+import { State, store } from "../../redux";
+import { Action } from "../../redux/reducers";
+
+import Details from "../ui/Details";
+
+import { Children } from "../../types/Preact";
+
+interface Props {
+    id: string;
+    defaultValue: boolean;
+
+    sticky?: boolean;
+    large?: boolean;
+
+    summary: Children;
+    children: Children;
+}
+
+export default function CollapsibleSection({
+    id,
+    defaultValue,
+    summary,
+    children,
+    ...detailsProps
+}: Props) {
+    const state: State = store.getState();
+
+    function setState(state: boolean) {
+        if (state === defaultValue) {
+            store.dispatch({
+                type: "SECTION_TOGGLE_UNSET",
+                id,
+            } as Action);
+        } else {
+            store.dispatch({
+                type: "SECTION_TOGGLE_SET",
+                id,
+                state,
+            } as Action);
+        }
+    }
+
+    return (
+        <Details
+            open={state.sectionToggle[id] ?? defaultValue}
+            onToggle={(e) => setState(e.currentTarget.open)}
+            {...detailsProps}>
+            <summary>
+                <div class="padding">
+                    <ChevronDown size={20} />
+                    {summary}
+                </div>
+            </summary>
+            {children}
+        </Details>
+    );
+}

src/components/common/Emoji.tsx

-import twemoji from 'twemoji';
+import { EmojiPacks } from "../../redux/reducers/settings";
 
-var EMOJI_PACK = 'mutant';
+let EMOJI_PACK = "mutant";
 const REVISION = 3;
 
-/*export function setEmojiPack(pack: EmojiPacks) {
+export function setEmojiPack(pack: EmojiPacks) {
     EMOJI_PACK = pack;
-}*/
+}
+
+// Originally taken from Twemoji source code,
+// re-written by bree to be more readable.
+function codePoints(rune: string) {
+    const pairs = [];
+    let low = 0;
+    let i = 0;
+
+    while (i < rune.length) {
+        const charCode = rune.charCodeAt(i++);
+        if (low) {
+            pairs.push(0x10000 + ((low - 0xd800) << 10) + (charCode - 0xdc00));
+            low = 0;
+        } else if (0xd800 <= charCode && charCode <= 0xdbff) {
+            low = charCode;
+        } else {
+            pairs.push(charCode);
+        }
+    }
+
+    return pairs;
+}
 
 // Taken from Twemoji source code.
 // scripts/build.js#344
 // grabTheRightIcon(rawText);
 const UFE0Fg = /\uFE0F/g;
-const U200D = String.fromCharCode(0x200D);
-function toCodePoint(emoji: string) {
-    return twemoji.convert.toCodePoint(emoji.indexOf(U200D) < 0 ?
-        emoji.replace(UFE0Fg, '') :
-        emoji
-    );
+const U200D = String.fromCharCode(0x200d);
+function toCodePoint(rune: string) {
+    return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, "") : rune)
+        .map((val) => val.toString(16))
+        .join("-");
 }
 
 function parseEmoji(emoji: string) {
-    let codepoint = toCodePoint(emoji);
+    const codepoint = toCodePoint(emoji);
     return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
 }
 
-export default function Emoji({ emoji, size }: { emoji: string, size?: number }) {
+export default function Emoji({
+    emoji,
+    size,
+}: {
+    emoji: string;
+    size?: number;
+}) {
     return (
         <img
             alt={emoji}
+            loading="lazy"
             className="emoji"
             draggable={false}
             src={parseEmoji(emoji)}
-            style={size ? { width: `${size}px`, height: `${size}px` } : undefined}
+            style={
+                size ? { width: `${size}px`, height: `${size}px` } : undefined
+            }
         />
-    )
+    );
 }
 
 export function generateEmoji(emoji: string) {
-    return `<img class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(emoji)}" />`;
+    return `<img loading="lazy" class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
+        emoji,
+    )}" />`;
 }

src/components/common/IconBase.tsx

-import { Attachment } from "revolt.js/dist/api/objects";
+import { Attachment } from "revolt-api/types/Autumn";
 import styled, { css } from "styled-components";
 
 export interface IconBaseProps<T> {
@@ -6,29 +6,54 @@ export interface IconBaseProps<T> {
     attachment?: Attachment;
 
     size: number;
+    hover?: boolean;
     animate?: boolean;
 }
 
 interface IconModifiers {
-    square?: boolean
+    square?: boolean;
+    hover?: boolean;
 }
 
 export default styled.svg<IconModifiers>`
+    flex-shrink: 0;
+
     img {
         width: 100%;
         height: 100%;
         object-fit: cover;
 
-        ${ props => !props.square && css`
-            border-radius: 50%;
-        ` }
+        ${(props) =>
+            !props.square &&
+            css`
+                border-radius: 50%;
+            `}
     }
+
+    ${(props) =>
+        props.hover &&
+        css`
+            &:hover .icon {
+                filter: brightness(0.8);
+            }
+        `}
 `;
 
 export const ImageIconBase = styled.img<IconModifiers>`
+    flex-shrink: 0;
     object-fit: cover;
 
-    ${ props => !props.square && css`
-        border-radius: 50%;
-    ` }
+    ${(props) =>
+        !props.square &&
+        css`
+            border-radius: 50%;
+        `}
+
+    ${(props) =>
+        props.hover &&
+        css`
+            &:hover img {
+                filter: brightness(0.8);
+            }
+        `}
 `;

src/components/common/LocaleSelector.tsx

-import ComboBox from "../ui/ComboBox";
+import { dispatch } from "../../redux";
 import { connectState } from "../../redux/connector";
-import { WithDispatcher } from "../../redux/reducers";
-import { LanguageEntry, Languages } from "../../context/Locale";
 
-type Props = WithDispatcher & {
+import { Language, Languages } from "../../context/Locale";
+
+import ComboBox from "../ui/ComboBox";
+
+type Props = {
     locale: string;
 };
 
@@ -11,18 +13,16 @@ export function LocaleSelector(props: Props) {
     return (
         <ComboBox
             value={props.locale}
-            onChange={e =>
-                props.dispatcher &&
-                props.dispatcher({
+            onChange={(e) =>
+                dispatch({
                     type: "SET_LOCALE",
-                    locale: e.currentTarget.value as any
+                    locale: e.currentTarget.value as Language,
                 })
-            }
-        >
-            {Object.keys(Languages).map(x => {
-                const l = (Languages as any)[x] as LanguageEntry;
+            }>
+            {Object.keys(Languages).map((x) => {
+                const l = Languages[x as keyof typeof Languages];
                 return (
-                    <option value={x}>
+                    <option value={x} key={x}>
                         {l.emoji} {l.display}
                     </option>
                 );
@@ -31,12 +31,8 @@ export function LocaleSelector(props: Props) {
     );
 }
 
-export default connectState(
-    LocaleSelector,
-    state => {
-        return {
-            locale: state.locale
-        };
-    },
-    true
-);
+export default connectState(LocaleSelector, (state) => {
+    return {
+        locale: state.locale,
+    };
+});

src/components/common/ServerHeader.tsx

-import Header from "../ui/Header";
-import styled from "styled-components";
+import { Cog } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import IconButton from "../ui/IconButton";
-import { Settings } from "@styled-icons/feather";
-import { Server } from "revolt.js/dist/api/objects";
 import { ServerPermission } from "revolt.js/dist/api/permissions";
-import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
+import { Server } from "revolt.js/dist/maps/Servers";
+import styled from "styled-components";
+
+import Header from "../ui/Header";
+import IconButton from "../ui/IconButton";
 
 interface Props {
-    server: Server,
-    ctx: HookContext
+    server: Server;
 }
 
 const ServerName = styled.div`
     flex-grow: 1;
 `;
 
-export default function ServerHeader({ server, ctx }: Props) {
-    const permissions = useServerPermission(server._id, ctx);
-    const bannerURL = ctx.client.servers.getBannerURL(server._id, { width: 480 }, true);
+export default observer(({ server }: Props) => {
+    const bannerURL = server.generateBannerURL({ width: 480 });
 
     return (
-        <Header placement="secondary"
-            background={typeof bannerURL !== 'undefined'}
-            style={{ background: bannerURL ? `linear-gradient(to bottom, transparent 50%, #000e), url('${bannerURL}')` : undefined }}>
-            <ServerName>
-                { server.name }
-            </ServerName>
-            { (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
-                <Link to={`/server/${server._id}/settings`}>
-                    <IconButton>
-                        <Settings size={24} />
-                    </IconButton>
-                </Link>
-            </div> }
+        <Header
+            borders
+            placement="secondary"
+            background={typeof bannerURL !== "undefined"}
+            style={{
+                background: bannerURL ? `url('${bannerURL}')` : undefined,
+            }}>
+            <ServerName>{server.name}</ServerName>
+            {(server.permission & ServerPermission.ManageServer) > 0 && (
+                <div className="actions">
+                    <Link to={`/server/${server._id}/settings`}>
+                        <IconButton>
+                            <Cog size={24} />
+                        </IconButton>
+                    </Link>
+                </div>
+            )}
         </Header>
-    )
-}
+    );
+});

src/components/common/ServerIcon.tsx

+import { observer } from "mobx-react-lite";
+import { Server } from "revolt.js/dist/maps/Servers";
 import styled from "styled-components";
+
 import { useContext } from "preact/hooks";
-import { Server } from "revolt.js/dist/api/objects";
-import { IconBaseProps, ImageIconBase } from "./IconBase";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
+import { IconBaseProps, ImageIconBase } from "./IconBase";
+
 interface Props extends IconBaseProps<Server> {
     server_name?: string;
 }
 
 const ServerText = styled.div`
     display: grid;
-    padding: .2em;
+    padding: 0.2em;
     overflow: hidden;
     border-radius: 50%;
     place-items: center;
@@ -18,30 +22,47 @@ const ServerText = styled.div`
     background: var(--primary-background);
 `;
 
-const fallback = '/assets/group.png';
-export default function ServerIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
-    const client = useContext(AppContext);
+// const fallback = "/assets/group.png";
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.HTMLAttributes<HTMLImageElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
+
+        const { target, attachment, size, animate, server_name, ...imgProps } =
+            props;
+        const iconURL = client.generateFileURL(
+            target?.icon ?? attachment,
+            { max_side: 256 },
+            animate,
+        );
 
-    const { target, attachment, size, animate, server_name, children, as, ...imgProps } = props;
-    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
+        if (typeof iconURL === "undefined") {
+            const name = target?.name ?? server_name ?? "";
 
-    if (typeof iconURL === 'undefined') {
-        const name = target?.name ?? server_name ?? '';
+            return (
+                <ServerText style={{ width: size, height: size }}>
+                    {name
+                        .split(" ")
+                        .map((x) => x[0])
+                        .filter((x) => typeof x !== "undefined")}
+                </ServerText>
+            );
+        }
 
         return (
-            <ServerText style={{ width: size, height: size }}>
-                { name.split(' ')
-                      .map(x => x[0])
-                      .filter(x => typeof x !== 'undefined') }
-            </ServerText>
-        )
-    }
-
-    return (
-        <ImageIconBase {...imgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            src={iconURL} />
-    );
-}
+            <ImageIconBase
+                {...imgProps}
+                width={size}
+                height={size}
+                src={iconURL}
+                loading="lazy"
+                aria-hidden="true"
+            />
+        );
+    },
+);