merge: branch 'master' into production

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,7 @@
+contact_links:
+  - name: Lounge Chat
+    url: https://rvlt.gg/Testers
+    about: Ask questions and discuss with others.
+  - name: Discussions
+    url: https://github.com/orgs/revoltchat/discussions
+    about: For larger feature requests and general question & answer.

.github/workflows/docker.yml

@@ -5,7 +5,7 @@ on:
         branches:
             - "master"
         tags:
-            - "v*"
+            - "*"
         paths-ignore:
             - ".github/**"
             - "!.github/workflows/docker.yml"

.github/workflows/mirroring.yml

@@ -4,7 +4,6 @@ on:
     push:
         branches:
             - "master"
-            - "production"
 
 jobs:
     to_gitlab:

.gitlab-ci.yml

@@ -1,40 +0,0 @@
-image: node:16-buster
-
-variables:
-  GIT_SUBMODULE_STRATEGY: recursive
-
-cache:
-  paths:
-    - node_modules
-
-# Fetch dependencies and setup project for compilation.
-install:
-  stage: prepare
-  script:
-    - yarn
-
-# Type check the project
-typecheck:
-  stage: test
-  needs:
-    - install
-  dependencies: 
-    - install
-  script:
-    - yarn typecheck
-
-# Lint the project and check prettier output.
-lint:
-  stage: test
-  allow_failure: true
-  needs:
-    - install
-  dependencies: 
-    - install
-  script:
-    - yarn lint
-    - yarn --check 'src/**/*.{js,jsx,ts,tsx}'
-
-stages:
-  - prepare
-  - test

.prettierrc.js

@@ -4,10 +4,12 @@ module.exports = {
     jsxBracketSameLine: true,
     importOrder: [
         "preact|classnames|.scss$",
+        "^@revoltchat",
         "/(lib)",
         "/(redux|mobx)",
         "/(context)",
-        "/(ui|common)|.svg|.webp|.png|.jpg$",
+        "/(ui|common)$",
+        ".svg|.webp|.png|.jpg$",
         "^[./]",
     ],
     importOrderSeparation: true,

README.md

@@ -4,6 +4,14 @@
 
 This is the web client for Revolt, which is also available live at [app.revolt.chat](https://app.revolt.chat).
 
+## Pending Rewrite
+
+The following code is pending a partial or full rewrite:
+
+-   `src/components`: components are being migrated to [revoltchat/components](https://github.com/revoltchat/components)
+-   `src/styles`: needs to be migrated to [revoltchat/components](https://github.com/revoltchat/components)
+-   `src/lib`: this needs to be organised
+
 ## Stack
 
 -   [Preact](https://preactjs.com/)
@@ -43,7 +51,7 @@ You can now access the client at http://local.revolt.chat:3000.
 ## CLI Commands
 
 | Command                                 | Description                                  |
-| ------------------- | -------------------------------------------- |
+| --------------------------------------- | -------------------------------------------- |
 | `yarn pull`                             | Setup assets required for Revite.            |
 | `yarn dev`                              | Start the Revolt client in development mode. |
 | `yarn build`                            | Build the Revolt client.                     |
@@ -53,6 +61,7 @@ You can now access the client at http://local.revolt.chat:3000.
 | `yarn typecheck`                        | Run TypeScript type checking on the client.  |
 | `yarn start`                            | Start a local sirv server with built client. |
 | `yarn start:inject`                     | Inject a given API URL and start server.     |
+| `yarn lint \| egrep "no-literals" -B 1` | Scan for untranslated strings.               |
 
 ## License
 

VERSION

@@ -1 +0,0 @@
-0.5.3-1

external/lang

@@ -1 +1 @@
-Subproject commit bac88cffd196a2afacf7d726e4f7ef19bd6bd94c
+Subproject commit 5af7326c286f729ac6dd4cabff9dfdf7c480b631

package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.0.0",
+    "version": "1.0.1",
     "scripts": {
         "dev": "node scripts/setup_assets.js --check && vite",
         "pull": "node scripts/setup_assets.js",
@@ -39,38 +39,19 @@
                     "varsIgnorePattern": "^_"
                 }
             ],
-            "require-jsdoc": [
+            "react/jsx-no-literals": "warn"
-                "error",
-                {
-                    "require": {
-                        "FunctionDeclaration": true,
-                        "MethodDefinition": true,
-                        "ClassDeclaration": true,
-                        "ArrowFunctionExpression": false,
-                        "FunctionExpression": false
-                    },
-                    "ignore": {
-                        "MethodDefinition": [
-                            "toJSON",
-                            "hydrate"
-                        ]
-                    }
-                }
-            ]
         }
     },
     "dependencies": {
-        "@fontsource/bitter": "^4.5.0",
-        "@insertish/vite-plugin-babel-macros": "^1.0.5",
         "fs-extra": "^10.0.0",
         "klaw": "^3.0.0",
-        "react-beautiful-dnd": "^13.1.0",
         "sirv-cli": "^1.0.14",
         "vite": "^2.6.14"
     },
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.17.9",
         "@fontsource/atkinson-hyperlegible": "^4.4.5",
+        "@fontsource/bitter": "^4.5.7",
         "@fontsource/comic-neue": "^4.4.5",
         "@fontsource/fira-code": "^4.4.5",
         "@fontsource/inter": "^4.4.5",
@@ -90,27 +71,29 @@
         "@fontsource/ubuntu": "^4.4.5",
         "@fontsource/ubuntu-mono": "^4.4.5",
         "@hcaptcha/react-hcaptcha": "^0.3.6",
+        "@insertish/vite-plugin-babel-macros": "^1.0.5",
         "@preact/preset-vite": "^2.0.0",
-        "@revoltchat/ui": "1.0.31",
+        "@revoltchat/ui": "1.0.76",
         "@rollup/plugin-replace": "^2.4.2",
         "@styled-icons/boxicons-logos": "^10.38.0",
         "@styled-icons/boxicons-regular": "^10.38.0",
         "@styled-icons/boxicons-solid": "^10.38.0",
         "@styled-icons/simple-icons": "^10.33.0",
-        "@tippyjs/react": "^4.2.5",
+        "@tippyjs/react": "4.2.6",
         "@traptitech/markdown-it-katex": "^3.4.3",
         "@traptitech/markdown-it-spoiler": "^1.1.6",
         "@trivago/prettier-plugin-sort-imports": "^2.0.2",
+        "@types/lodash": "^4",
         "@types/lodash.defaultsdeep": "^4.6.6",
         "@types/lodash.isequal": "^4.5.5",
-        "@types/markdown-it": "^12.0.2",
         "@types/node": "^15.12.4",
         "@types/preact-i18n": "^2.3.0",
         "@types/prismjs": "^1.16.5",
-        "@types/react-beautiful-dnd": "^13.1.2",
+        "@types/react-beautiful-dnd": "^13",
         "@types/react-helmet": "^6.1.1",
         "@types/react-router-dom": "^5.1.7",
         "@types/react-scroll": "^1.8.2",
+        "@types/semver": "^7",
         "@types/styled-components": "^5.1.10",
         "@types/twemoji": "^12.1.1",
         "@typescript-eslint/eslint-plugin": "^4.27.0",
@@ -122,37 +105,56 @@
         "detect-browser": "^5.2.0",
         "eslint": "^7.28.0",
         "eslint-config-preact": "^1.1.4",
+        "eslint-plugin-jsdoc": "^39.3.2",
+        "eslint-plugin-mobx": "^0.0.8",
         "eventemitter3": "^4.0.7",
+        "history": "4",
         "json-stringify-deterministic": "^1.0.2",
         "localforage": "^1.9.0",
+        "lodash": "^4.17.21",
         "lodash.defaultsdeep": "^4.6.1",
         "lodash.isequal": "^4.5.0",
         "long": "^5.2.0",
-        "markdown-it": "^12.0.6",
+        "mdast-util-to-hast": "^12.1.2",
-        "markdown-it-emoji": "^2.0.0",
         "mediasoup-client": "npm:@insertish/mediasoup-client@3.6.36-esnext",
-        "mobx": "^6.3.2",
+        "mobx": "^6.6.0",
-        "mobx-react-lite": "^3.3.0",
+        "mobx-react-lite": "3.4.0",
         "preact": "^10.5.14",
-        "preact-context-menu": "0.4.0-patch.0",
+        "preact-context-menu": "0.4.1",
         "preact-i18n": "^2.4.0-preactx",
         "prettier": "^2.3.1",
-        "prismjs": "^1.23.0",
+        "prismjs": "^1.28.0",
-        "react-device-detect": "^1.17.0",
+        "qrcode.react": "^3.0.2",
+        "react-beautiful-dnd": "^13.1.0",
+        "react-device-detect": "2.2.2",
         "react-helmet": "^6.1.0",
         "react-hook-form": "6.3.0",
         "react-overlapping-panels": "1.2.2",
         "react-router-dom": "^5.2.0",
         "react-scroll": "^1.8.2",
-        "react-virtuoso": "^1.10.4",
+        "react-virtuoso": "^2.12.0",
-        "revolt.js": "6.0.0-2",
+        "rehype-katex": "^6.0.2",
+        "rehype-prism": "^2.1.3",
+        "rehype-react": "^7.1.1",
+        "remark-breaks": "^3.0.2",
+        "remark-gfm": "^3.0.1",
+        "remark-math": "^5.1.1",
+        "remark-parse": "^10.0.1",
+        "remark-rehype": "^10.1.0",
+        "revolt.js": "^6.0.6",
         "rimraf": "^3.0.2",
         "sass": "^1.35.1",
+        "semver": "^7.3.7",
         "shade-blend-color": "^1.0.0",
+        "slate": "^0.81.1",
+        "slate-history": "^0.66.0",
+        "slate-react": "^0.81.0",
         "stacktrace-js": "^2.0.2",
         "styled-components": "^5.3.0",
         "typescript": "^4.4.2",
         "ulid": "^2.3.0",
+        "unified": "^10.1.2",
+        "unist-util-visit": "^4.1.0",
         "use-resize-observer": "^7.0.0",
         "vite-plugin-pwa": "^0.11.13",
         "workbox-precaching": "^6.1.5"

scripts/publish.sh

@@ -1,7 +1,30 @@
 #!/bin/bash
-version=$(cat VERSION)
+# Build and publish release to production server
+
+# Remote Server
+REMOTE=revolt-de-nrb-1
+
+# Remote Directory
+REMOTE_DIR=/root/revite
+
+# Post-install script
+POST_INSTALL="pm2 restart revite"
+
+# Assets
+export REVOLT_SAAS=https://github.com/revoltchat/assets
+
+
+# 1. Build Revite
+yarn
+yarn build
+
+# 2. Archive built files
+tar -czvf build.tar.gz dist
+
+# 3. Upload built files
+scp build.tar.gz $REMOTE:$REMOTE_DIR/build.tar.gz
+rm build.tar.gz
+
+# 4. Apply changes
+ssh $REMOTE "cd $REMOTE_DIR; tar -xvzf build.tar.gz; rm build.tar.gz; $POST_INSTALL"
 
-                  docker build -t revoltchat/client:${version} . &&
-docker tag revoltchat/client:${version} revoltchat/client:latest &&
-                        docker push revoltchat/client:${version} &&
-                            docker push revoltchat/client:latest

scripts/setup_assets.js

@@ -3,8 +3,8 @@ const { copy, remove, access } = require("fs-extra");
 const { exec: cexec } = require("child_process");
 const { resolve } = require("path");
 
-let target = process.env.REVOLT_SASS;
+let target = process.env.REVOLT_SAAS;
-let branch = process.env.REVOLT_SASS_BRANCH;
+let branch = process.env.REVOLT_SAAS_BRANCH;
 let DEFAULT_DIRECTORY = "public/assets_default";
 let OUT_DIRECTORY = "public/assets";
 

src/assets/changelogs.ts

@@ -0,0 +1,38 @@
+type Element =
+    | string
+    | {
+          type: "image";
+          src: string;
+      };
+
+export interface ChangelogPost {
+    date: Date;
+    title: string;
+    content: Element[];
+}
+
+export const changelogEntries: Record<number, ChangelogPost> = {
+    1: {
+        date: new Date("2022-06-12T20:39:16.674Z"),
+        title: "Secure your account with 2FA",
+        content: [
+            "Two-factor authentication is now available to all users, you can now head over to settings to enable recovery codes and an authenticator app.",
+            {
+                type: "image",
+                src: "https://autumn.revolt.chat/attachments/E21kwmuJGcASgkVLiSIW0wV3ggcaOWjW0TQF7cdFNY/image.png",
+            },
+            "Once enabled, you will be prompted on login.",
+            {
+                type: "image",
+                src: "https://autumn.revolt.chat/attachments/LWRYoKR2tE1ggW_Lzm547P1pnrkNgmBaoCAfWvHE74/image.png",
+            },
+            "Other authentication methods coming later, stay tuned!",
+        ],
+    },
+};
+
+export const changelogEntryArray = Object.keys(changelogEntries).map(
+    (index) => changelogEntries[index as unknown as number],
+);
+
+export const latestChangelog = changelogEntryArray.length;

src/assets/emojis.ts

@@ -1850,7 +1850,7 @@ export const emojiDictionary = {
     scotland: "🏴󠁧󠁢󠁳󠁣󠁴󠁿",
     wales: "🏴󠁧󠁢󠁷󠁬󠁳󠁿",
     ...{
-        "1984": "custom:1984.gif",
+        1984: "custom:1984.gif",
         KekW: "custom:KekW.png",
         amogus: "custom:amogus.gif",
         awaa: "custom:awaa.png",
@@ -1952,5 +1952,6 @@ export const emojiDictionary = {
         huggies: "custom:huggies.png",
         noted: "custom:noted.gif",
         waving: "custom:waving.png",
+        mogusvented: "custom:mogusvented.png",
     },
 };

src/components/README.md

@@ -0,0 +1,14 @@
+The following folders should not be added to or modified:
+
+-   `common`
+-   `markdown`
+-   `native`
+-   `ui`
+
+The following are part-legacy, will remain in place and will be rewritten to some degree still:
+
+-   `navigation`
+
+The following are mostly good to go:
+
+-   `settings`

src/components/common/AgeGate.tsx

@@ -6,14 +6,11 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
+import { Button, Checkbox } from "@revoltchat/ui";
+
 import { useApplicationState } from "../../mobx/State";
 import { SECTION_NSFW } from "../../mobx/stores/Layout";
 
-import Button from "../ui/Button";
-import Checkbox from "../ui/Checkbox";
-
-import { Children } from "../../types/Preact";
-
 const Base = styled.div`
     display: flex;
     flex-grow: 1;
@@ -80,16 +77,16 @@ export default observer((props: Props) => {
             </span>
 
             <Checkbox
-                checked={layout.getSectionState(SECTION_NSFW, false)}
+                title={<Text id="app.main.channel.nsfw.confirm" />}
-                onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}>
+                value={layout.getSectionState(SECTION_NSFW, false)}
-                <Text id="app.main.channel.nsfw.confirm" />
+                onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}
-            </Checkbox>
+            />
             <div className="actions">
-                <Button contrast onClick={() => history.goBack()}>
+                <Button palette="secondary" onClick={() => history.goBack()}>
                     <Text id="app.special.modals.actions.back" />
                 </Button>
                 <Button
-                    contrast
+                    palette="secondary"
                     onClick={() =>
                         layout.getSectionState(SECTION_NSFW) && setAgeGate(true)
                     }>

src/components/common/AutoComplete.tsx

@@ -3,9 +3,8 @@ import styled, { css } from "styled-components/macro";
 
 import { StateUpdater, useState } from "preact/hooks";
 
-import { useClient } from "../../context/revoltjs/RevoltClient";
-
 import { emojiDictionary } from "../../assets/emojis";
+import { useClient } from "../../controllers/client/ClientController";
 import ChannelIcon from "./ChannelIcon";
 import Emoji from "./Emoji";
 import UserIcon from "./user/UserIcon";
@@ -88,7 +87,7 @@ export function useAutoComplete(
                             ? "emoji"
                             : "user",
                         search.toLowerCase(),
-                        j + 1,
+                        current === ":" ? j + 1 : j,
                     ];
                 }
             }
@@ -242,7 +241,7 @@ export function useAutoComplete(
                     );
                 } else if (state.type === "user") {
                     content.splice(
-                        index - 1,
+                        index,
                         search.length + 1,
                         "<@",
                         state.matches[state.selected]._id,
@@ -250,7 +249,7 @@ export function useAutoComplete(
                     );
                 } else {
                     content.splice(
-                        index - 1,
+                        index,
                         search.length + 1,
                         "<#",
                         state.matches[state.selected]._id,

src/components/common/ChannelIcon.tsx

@@ -2,12 +2,9 @@ import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js";
 
-import { useContext } from "preact/hooks";
-
-import { AppContext } from "../../context/revoltjs/RevoltClient";
-
 import fallback from "./assets/group.png";
 
+import { useClient } from "../../controllers/client/ClientController";
 import { ImageIconBase, IconBaseProps } from "./IconBase";
 
 interface Props extends IconBaseProps<Channel> {
@@ -22,7 +19,7 @@ export default observer(
                 keyof Props | "children" | "as"
             >,
     ) => {
-        const client = useContext(AppContext);
+        const client = useClient();
 
         const {
             size,

src/components/common/CollapsibleSection.tsx

@@ -1,11 +1,9 @@
 import { ChevronDown } from "@styled-icons/boxicons-regular";
 
+import { Details } from "@revoltchat/ui";
+
 import { useApplicationState } from "../../mobx/State";
 
-import Details from "../ui/Details";
-
-import { Children } from "../../types/Preact";
-
 interface Props {
     id: string;
     defaultValue: boolean;
@@ -34,7 +32,7 @@ export default function CollapsibleSection({
             }
             {...detailsProps}>
             <summary>
-                <div class="padding">
+                <div className="padding">
                     <ChevronDown size={20} />
                     {summary}
                 </div>

src/components/common/Emoji.tsx

@@ -1,3 +1,5 @@
+import { emojiDictionary } from "../../assets/emojis";
+
 export type EmojiPack = "mutant" | "twemoji" | "noto" | "openmoji";
 
 let EMOJI_PACK: EmojiPack = "mutant";
@@ -40,7 +42,7 @@ function toCodePoint(rune: string) {
         .join("-");
 }
 
-function parseEmoji(emoji: string) {
+export function parseEmoji(emoji: string) {
     if (emoji.startsWith("custom:")) {
         return `https://dl.insrt.uk/projects/revolt/emotes/${emoji.substring(
             7,

src/components/common/LocaleSelector.tsx

@@ -1,6 +1,6 @@
-import { useApplicationState } from "../../mobx/State";
+import { ComboBox } from "@revoltchat/ui";
 
-import ComboBox from "../ui/ComboBox";
+import { useApplicationState } from "../../mobx/State";
 
 import { Language, Languages } from "../../../external/lang/Languages";
 

src/components/common/ServerHeader.tsx

@@ -7,8 +7,9 @@ import styled, { css } from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import IconButton from "../ui/IconButton";
+import { IconButton } from "@revoltchat/ui";
 
+import { modalController } from "../../controllers/modals/ModalController";
 import Tooltip from "./Tooltip";
 
 interface Props {
@@ -60,6 +61,9 @@ const ServerBanner = styled.div<Omit<Props, "server">>`
             overflow: hidden;
             text-overflow: ellipsis;
             flex-grow: 1;
+
+            cursor: pointer;
+            color: var(--foreground);
         }
     }
 `;
@@ -121,7 +125,13 @@ export default observer(({ server }: Props) => {
                         </svg>
                     </Tooltip>
                 ) : undefined}
-                <div className="title">{server.name}</div>
+                <a
+                    className="title"
+                    onClick={() =>
+                        modalController.push({ type: "server_info", server })
+                    }>
+                    {server.name}
+                </a>
                 {server.havePermission("ManageServer") && (
                     <Link to={`/server/${server._id}/settings`}>
                         <IconButton>

src/components/common/ServerIcon.tsx

@@ -4,8 +4,7 @@ import styled from "styled-components/macro";
 
 import { useContext } from "preact/hooks";
 
-import { AppContext } from "../../context/revoltjs/RevoltClient";
+import { useClient } from "../../controllers/client/ClientController";
-
 import { IconBaseProps, ImageIconBase } from "./IconBase";
 
 interface Props extends IconBaseProps<Server> {
@@ -34,7 +33,7 @@ export default observer(
                 keyof Props | "children" | "as"
             >,
     ) => {
-        const client = useContext(AppContext);
+        const client = useClient();
 
         const { target, attachment, size, animate, server_name, ...imgProps } =
             props;

src/components/common/Tooltip.tsx

@@ -3,8 +3,6 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import { Children } from "../../types/Preact";
-
 type Props = Omit<TippyProps, "children"> & {
     children: Children;
     content: Children;

src/components/common/UpdateIndicator.tsx

@@ -3,13 +3,13 @@ import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
 
 import { useEffect, useState } from "preact/hooks";
 
+import { IconButton } from "@revoltchat/ui";
+
 import { internalSubscribe } from "../../lib/eventEmitter";
 
 import { useApplicationState } from "../../mobx/State";
 
-import IconButton from "../ui/IconButton";
+import { updateSW } from "../../updateWorker";
-
-import { updateSW } from "../../main";
 import Tooltip from "./Tooltip";
 
 let pendingUpdate = false;
@@ -31,7 +31,7 @@ export default function UpdateIndicator({ style }: Props) {
 
     if (style === "titlebar") {
         return (
-            <div class="actions">
+            <div className="actions">
                 <Tooltip
                     content="A new update is available!"
                     placement="bottom">
@@ -46,7 +46,7 @@ export default function UpdateIndicator({ style }: Props) {
         );
     }
 
-    if (window.isNative) return null;
+    if (window.isNative && window.native.getConfig().frame) return null;
 
     return (
         <IconButton onClick={() => updateSW(true)}>

src/components/common/messaging/Message.tsx

@@ -5,17 +5,16 @@ import { useTriggerEvents } from "preact-context-menu";
 import { memo } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
+import { Category } from "@revoltchat/ui";
+
 import { internalEmit } from "../../../lib/eventEmitter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { QueuedMessage } from "../../../mobx/stores/MessageQueue";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { I18nError } from "../../../context/Locale";
-import { useClient } from "../../../context/revoltjs/RevoltClient";
 
-import Overline from "../../ui/Overline";
+import { modalController } from "../../../controllers/modals/ModalController";
-
-import { Children } from "../../../types/Preact";
 import Markdown from "../../markdown/Markdown";
 import UserIcon from "../user/UserIcon";
 import { Username } from "../user/UserShort";
@@ -52,12 +51,10 @@ const Message = observer(
         queued,
         hideReply,
     }: Props) => {
-        const client = useClient();
+        const client = message.client;
         const user = message.author;
 
-        const { openScreen } = useIntermediate();
+        const content = message.content;
-
-        const content = message.content as string;
         const head =
             preferHead || (message.reply_ids && message.reply_ids.length > 0);
 
@@ -70,7 +67,10 @@ const Message = observer(
             : undefined;
 
         const openProfile = () =>
-            openScreen({ id: "profile", user_id: message.author_id });
+            modalController.push({
+                type: "user_profile",
+                user_id: message.author_id,
+            });
 
         const handleUserClick = (e: MouseEvent) => {
             if (e.shiftKey && user?._id) {
@@ -162,13 +162,18 @@ const Message = observer(
                         {replacement ?? <Markdown content={content} />}
                         {!queued && <InviteList message={message} />}
                         {queued?.error && (
-                            <Overline type="error" error={queued.error} />
+                            <Category>
+                                <I18nError error={queued.error} />
+                            </Category>
                         )}
                         {message.attachments?.map((attachment, index) => (
                             <Attachment
                                 key={index}
                                 attachment={attachment}
-                                hasContent={index > 0 || content.length > 0}
+                                hasContent={
+                                    index > 0 ||
+                                    (content ? content.length > 0 : false)
+                                }
                             />
                         ))}
                         {message.embeds?.map((embed, index) => (

src/components/common/messaging/MessageBox.tsx

@@ -1,21 +1,15 @@
-import { Send, ShieldX } from "@styled-icons/boxicons-solid";
+import { HappyBeaming, Send, ShieldX } from "@styled-icons/boxicons-solid";
 import Axios, { CancelTokenSource } from "axios";
-import Long from "long";
 import { observer } from "mobx-react-lite";
-import {
+import { Channel } from "revolt.js";
-    Channel,
-    DEFAULT_PERMISSION_DIRECT_MESSAGE,
-    DEFAULT_PERMISSION_VIEW_ONLY,
-    Permission,
-    Server,
-    U32_MAX,
-    UserPermission,
-} from "revolt.js";
 import styled, { css } from "styled-components/macro";
 import { ulid } from "ulid";
 
 import { Text } from "preact-i18n";
-import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+import { memo } from "preact/compat";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+
+import { IconButton, Picker } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { debounce } from "../../../lib/debounce";
@@ -28,20 +22,19 @@ import {
     SMOOTH_SCROLL_ON_RECEIVE,
 } from "../../../lib/renderer/Singleton";
 
-import { useApplicationState } from "../../../mobx/State";
+import { state, useApplicationState } from "../../../mobx/State";
 import { Reply } from "../../../mobx/stores/MessageQueue";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { emojiDictionary } from "../../../assets/emojis";
+import { useClient } from "../../../controllers/client/ClientController";
+import { takeError } from "../../../controllers/client/jsx/error";
 import {
     FileUploader,
     grabFiles,
     uploadFile,
-} from "../../../context/revoltjs/FileUploads";
+} from "../../../controllers/client/jsx/legacy/FileUploads";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { modalController } from "../../../controllers/modals/ModalController";
-import { takeError } from "../../../context/revoltjs/util";
+import { RenderEmoji } from "../../markdown/plugins/emoji";
-
-import IconButton from "../../ui/IconButton";
-
 import AutoComplete, { useAutoComplete } from "../AutoComplete";
 import { PermissionTooltip } from "../Tooltip";
 import FilePreview from "./bars/FilePreview";
@@ -104,7 +97,7 @@ const Blocked = styled.div`
 `;
 
 const Action = styled.div`
-    > div {
+    > a {
         height: 48px;
         width: 48px;
         display: flex;
@@ -127,7 +120,7 @@ const Action = styled.div`
 `;
 
 const FileAction = styled.div`
-    > div {
+    > a {
         height: 48px;
         width: 62px;
         display: flex;
@@ -136,6 +129,10 @@ const FileAction = styled.div`
     }
 `;
 
+const FloatingLayer = styled.div`
+    position: relative;
+`;
+
 const ThisCodeWillBeReplacedAnywaysSoIMightAsWellJustDoItThisWay__Padding = styled.div`
     width: 16px;
 `;
@@ -146,6 +143,57 @@ const RE_SED = new RegExp("^s/([^])*/([^])*$");
 // Tests for code block delimiters (``` at start of line)
 const RE_CODE_DELIMITER = new RegExp("^```", "gm");
 
+const HackAlertThisFileWillBeReplaced = observer(({ channel }: Props) => {
+    const renderEmoji = useMemo(
+        () =>
+            memo(({ emoji }: { emoji: string }) => (
+                <RenderEmoji match={emoji} {...({} as any)} />
+            )),
+        [],
+    );
+
+    const emojis: Record<string, any> = {
+        default: Object.keys(emojiDictionary),
+    };
+
+    // ! FIXME: also expose typing from component
+    const categories: any[] = [];
+
+    for (const server of state.ordering.orderedServers) {
+        // ! FIXME: add a separate map on each server for emoji
+        const list = [...channel.client.emojis.values()]
+            .filter((emoji) => emoji.parent.id === server._id)
+            .map((x) => x._id);
+
+        if (list.length > 0) {
+            emojis[server._id] = list;
+            categories.push({
+                id: server._id,
+                name: server.name,
+                iconURL: server.generateIconURL({ max_side: 256 }),
+            });
+        }
+    }
+
+    categories.push({
+        id: "default",
+        name: "Default",
+        emoji: "smiley",
+    });
+
+    return (
+        <Picker
+            emojis={emojis}
+            categories={categories}
+            renderEmoji={renderEmoji}
+            onSelect={(emoji) => {
+                const v = state.draft.get(channel._id);
+                state.draft.set(channel._id, `${v ? `${v} ` : ""}:${emoji}:`);
+            }}
+        />
+    );
+});
+
 // ! FIXME: add to app config and load from app config
 export const CAN_UPLOAD_AT_ONCE = 5;
 
@@ -157,8 +205,8 @@ export default observer(({ channel }: Props) => {
     });
     const [typing, setTyping] = useState<boolean | number>(false);
     const [replies, setReplies] = useState<Reply[]>([]);
-    const { openScreen } = useIntermediate();
+    const [picker, setPicker] = useState(false);
-    const client = useContext(AppContext);
+    const client = useClient();
     const translate = useTranslation();
 
     const renderer = getRenderer(channel);
@@ -309,6 +357,7 @@ export default observer(({ channel }: Props) => {
     async function sendFile(content: string) {
         if (uploadState.type !== "attached") return;
         const attachments: string[] = [];
+        setMessage;
 
         const cancel = Axios.CancelToken.source();
         const files = uploadState.files;
@@ -482,7 +531,10 @@ export default observer(({ channel }: Props) => {
                                 files: [...uploadState.files, ...files],
                             }),
                         () =>
-                            openScreen({ id: "error", error: "FileTooLarge" }),
+                            modalController.push({
+                                type: "error",
+                                error: "FileTooLarge",
+                            }),
                         true,
                     )
                 }
@@ -505,6 +557,11 @@ export default observer(({ channel }: Props) => {
                 replies={replies}
                 setReplies={setReplies}
             />
+            <FloatingLayer>
+                {picker && (
+                    <HackAlertThisFileWillBeReplaced channel={channel} />
+                )}
+            </FloatingLayer>
             <Base>
                 {channel.havePermission("UploadFiles") ? (
                     <FileAction>
@@ -625,19 +682,20 @@ export default observer(({ channel }: Props) => {
                     onFocus={onFocus}
                     onBlur={onBlur}
                 />
-                {/*<Action>
+                {state.experiments.isEnabled("picker") && (
-                    <IconButton>
-                        <Box size={24} />
-                    </IconButton>
-                </Action>
                     <Action>
-                    <IconButton>
+                        <IconButton onClick={() => setPicker(!picker)}>
                             <HappyBeaming size={24} />
                         </IconButton>
-                </Action>*/}
+                    </Action>
+                )}
                 <Action>
                     <IconButton
-                        className="mobile"
+                        className={
+                            state.settings.get("appearance:show_send_button")
+                                ? ""
+                                : "mobile"
+                        }
                         onClick={send}
                         onMouseDown={(e) => e.preventDefault()}>
                         <Send size={20} />

src/components/common/messaging/attachments/Attachment.tsx

@@ -3,10 +3,9 @@ import { API } from "revolt.js";
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
 import { useTriggerEvents } from "preact-context-menu";
-import { useContext, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
-
-import { AppContext } from "../../../../context/revoltjs/RevoltClient";
 
+import { useClient } from "../../../../controllers/client/ClientController";
 import AttachmentActions from "./AttachmentActions";
 import { SizedGrid } from "./Grid";
 import ImageFile from "./ImageFile";
@@ -21,7 +20,7 @@ interface Props {
 const MAX_ATTACHMENT_WIDTH = 480;
 
 export default function Attachment({ attachment, hasContent }: Props) {
-    const client = useContext(AppContext);
+    const client = useClient();
     const { filename, metadata } = attachment;
     const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
 

src/components/common/messaging/attachments/AttachmentActions.tsx

@@ -11,18 +11,18 @@ import styles from "./AttachmentActions.module.scss";
 import classNames from "classnames";
 import { useContext } from "preact/hooks";
 
+import { IconButton } from "@revoltchat/ui";
+
 import { determineFileSize } from "../../../../lib/fileSize";
 
-import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+import { useClient } from "../../../../controllers/client/ClientController";
-
-import IconButton from "../../../ui/IconButton";
 
 interface Props {
     attachment: API.File;
 }
 
 export default function AttachmentActions({ attachment }: Props) {
-    const client = useContext(AppContext);
+    const client = useClient();
     const { filename, metadata, size } = attachment;
 
     const url = client.generateFileURL(attachment);

src/components/common/messaging/attachments/Grid.tsx

@@ -2,8 +2,6 @@ import styled from "styled-components/macro";
 
 import { Ref } from "preact";
 
-import { Children } from "../../../../types/Preact";
-
 const Grid = styled.div<{ width: number; height: number }>`
     --width: ${(props) => props.width}px;
     --height: ${(props) => props.height}px;

src/components/common/messaging/attachments/ImageFile.tsx

@@ -2,10 +2,10 @@ import { API } from "revolt.js";
 
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
-import { useContext, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 
-import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../controllers/client/ClientController";
-import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+import { modalController } from "../../../../controllers/modals/ModalController";
 
 enum ImageLoadingState {
     Loading,
@@ -19,8 +19,7 @@ type Props = JSX.HTMLAttributes<HTMLImageElement> & {
 
 export default function ImageFile({ attachment, ...props }: Props) {
     const [loading, setLoading] = useState(ImageLoadingState.Loading);
-    const client = useContext(AppContext);
+    const client = useClient();
-    const { openScreen } = useIntermediate();
     const url = client.generateFileURL(attachment)!;
 
     return (
@@ -32,7 +31,9 @@ export default function ImageFile({ attachment, ...props }: Props) {
             className={classNames(styles.image, {
                 [styles.loading]: loading !== ImageLoadingState.Loaded,
             })}
-            onClick={() => openScreen({ id: "image_viewer", attachment })}
+            onClick={() =>
+                modalController.push({ type: "image_viewer", attachment })
+            }
             onMouseDown={(ev) => ev.button === 1 && window.open(url, "_blank")}
             onLoad={() => setLoading(ImageLoadingState.Loaded)}
             onError={() => setLoading(ImageLoadingState.Error)}

src/components/common/messaging/attachments/TextFile.tsx

@@ -3,16 +3,12 @@ import { API } from "revolt.js";
 
 import styles from "./Attachment.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
-import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
+import { Button, Preloader } from "@revoltchat/ui";
-import {
-    AppContext,
-    StatusContext,
-} from "../../../../context/revoltjs/RevoltClient";
 
-import Preloader from "../../../ui/Preloader";
+import { useClient } from "../../../../controllers/client/ClientController";
-import { Button } from "@revoltchat/ui";
+import RequiresOnline from "../../../../controllers/client/jsx/RequiresOnline";
 
 interface Props {
     attachment: API.File;
@@ -24,9 +20,8 @@ export default function TextFile({ attachment }: Props) {
     const [gated, setGated] = useState(attachment.size > 100_000);
     const [content, setContent] = useState<undefined | string>(undefined);
     const [loading, setLoading] = useState(false);
-    const status = useContext(StatusContext);
-    const client = useContext(AppContext);
 
+    const client = useClient();
     const url = client.generateFileURL(attachment)!;
 
     useEffect(() => {
@@ -57,7 +52,7 @@ export default function TextFile({ attachment }: Props) {
                     setLoading(false);
                 });
         }
-    }, [content, loading, gated, status, attachment._id, attachment.size, url]);
+    }, [content, loading, gated, attachment._id, attachment.size, url]);
 
     return (
         <div

src/components/common/messaging/bars/FilePreview.tsx

@@ -149,12 +149,12 @@ function FileEntry({
                     <EmptyEntry className="icon">
                         <File size={36} />
                     </EmptyEntry>
-                    <div class="overlay">
+                    <div className="overlay">
                         <XCircle size={36} />
                     </div>
                 </PreviewBox>
-                <span class="fn">{file.name}</span>
+                <span className="fn">{file.name}</span>
-                <span class="size">{determineFileSize(file.size)}</span>
+                <span className="size">{determineFileSize(file.size)}</span>
             </Entry>
         );
 
@@ -169,13 +169,18 @@ function FileEntry({
     return (
         <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
             <PreviewBox onClick={remove}>
-                <img class="icon" src={url} alt={file.name} loading="eager" />
+                <img
-                <div class="overlay">
+                    className="icon"
+                    src={url}
+                    alt={file.name}
+                    loading="eager"
+                />
+                <div className="overlay">
                     <XCircle size={36} />
                 </div>
             </PreviewBox>
-            <span class="fn">{file.name}</span>
+            <span className="fn">{file.name}</span>
-            <span class="size">{determineFileSize(file.size)}</span>
+            <span className="size">{determineFileSize(file.size)}</span>
         </Entry>
     );
 }

src/components/common/messaging/bars/MessageOverlayBar.tsx

@@ -7,7 +7,6 @@ import {
     Notification,
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { Permission } from "revolt.js";
 import { Message as MessageObject } from "revolt.js";
 import styled from "styled-components";
 
@@ -20,12 +19,7 @@ import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 import { QueuedMessage } from "../../../../mobx/stores/MessageQueue";
 
-import {
+import { modalController } from "../../../../controllers/modals/ModalController";
-    Screen,
-    useIntermediate,
-} from "../../../../context/intermediate/Intermediate";
-import { useClient } from "../../../../context/revoltjs/RevoltClient";
-
 import Tooltip from "../../../common/Tooltip";
 
 interface Props {
@@ -88,8 +82,7 @@ const Divider = styled.div`
 `;
 
 export const MessageOverlayBar = observer(({ message, queued }: Props) => {
-    const client = useClient();
+    const client = message.client;
-    const { openScreen, writeClipboard } = useIntermediate();
     const isAuthor = message.author_id === client.user!._id;
 
     const [copied, setCopied] = useState<"link" | "id">(null!);
@@ -137,11 +130,10 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
                         onClick={(e) =>
                             e.shiftKey
                                 ? message.delete()
-                                : openScreen({
+                                : modalController.push({
-                                      id: "special_prompt",
                                       type: "delete_message",
                                       target: message,
-                                  } as unknown as Screen)
+                                  })
                         }>
                         <Trash size={18} color={"var(--error)"} />
                     </Entry>
@@ -190,7 +182,7 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
                         <Entry
                             onClick={() => {
                                 setCopied("link");
-                                writeClipboard(message.url);
+                                modalController.writeText(message.url);
                             }}>
                             <LinkAlt size={18} />
                         </Entry>
@@ -201,7 +193,7 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
                         <Entry
                             onClick={() => {
                                 setCopied("id");
-                                writeClipboard(message._id);
+                                modalController.writeText(message._id);
                             }}>
                             <InfoSquare size={18} />
                         </Entry>

src/components/common/messaging/bars/ReplyBar.tsx

@@ -7,6 +7,8 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { StateUpdater, useEffect } from "preact/hooks";
 
+import { IconButton } from "@revoltchat/ui";
+
 import { internalSubscribe } from "../../../../lib/eventEmitter";
 
 import { useApplicationState } from "../../../../mobx/State";
@@ -14,8 +16,6 @@ import { SECTION_MENTION } from "../../../../mobx/stores/Layout";
 import { Reply } from "../../../../mobx/stores/MessageQueue";
 
 import Tooltip from "../../../common/Tooltip";
-import IconButton from "../../../ui/IconButton";
-
 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
 import { SystemMessage } from "../SystemMessage";
@@ -152,11 +152,11 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                 return (
                     <Base key={reply.id}>
                         <ReplyBase preview>
-                            <div class="replyto">
+                            <div className="replyto">
                                 <Text id="app.main.channel.reply.replying" />
                             </div>
-                            <div class="content">
+                            <div className="content">
-                                <div class="username">
+                                <div className="username">
                                     <UserShort
                                         size={16}
                                         showServerIdentity
@@ -164,7 +164,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                         masquerade={message.masquerade!}
                                     />
                                 </div>
-                                <div class="message">
+                                <div className="message">
                                     {message.attachments && (
                                         <>
                                             <File size={16} />
@@ -196,7 +196,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                 </div>
                             </div>
                         </ReplyBase>
-                        <span class="actions">
+                        <span className="actions">
                             {message.author_id !== client.user!._id && (
                                 <IconButton
                                     onClick={() => {
@@ -225,7 +225,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                         content={
                                             <Text id="app.main.channel.reply.toggle" />
                                         }>
-                                        <span class="toggle">
+                                        <span className="toggle">
                                             <At size={15} />
                                             <Text
                                                 id={

src/components/common/messaging/embed/Embed.tsx

@@ -4,9 +4,8 @@ import styles from "./Embed.module.scss";
 import classNames from "classnames";
 import { useContext } from "preact/hooks";
 
-import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../controllers/client/ClientController";
-import { useClient } from "../../../../context/revoltjs/RevoltClient";
+import { modalController } from "../../../../controllers/modals/ModalController";
-
 import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
 import Markdown from "../../../markdown/Markdown";
 import Attachment from "../attachments/Attachment";
@@ -24,7 +23,6 @@ const MAX_PREVIEW_SIZE = 150;
 export default function Embed({ embed }: Props) {
     const client = useClient();
 
-    const { openScreen, openLink } = useIntermediate();
     const maxWidth = Math.min(
         useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
         MAX_EMBED_WIDTH,
@@ -59,7 +57,7 @@ export default function Embed({ embed }: Props) {
 
             if (embed.type === "Text") {
                 mw = MAX_EMBED_WIDTH;
-                mh = 0;
+                mh = 1;
             } else {
                 switch (embed.special?.type) {
                     case "YouTube":
@@ -143,7 +141,7 @@ export default function Embed({ embed }: Props) {
                                 <a
                                     onMouseDown={(ev) =>
                                         (ev.button === 0 || ev.button === 1) &&
-                                        openLink(embed.url!)
+                                        modalController.openLink(embed.url!)
                                     }
                                     className={styles.title}>
                                     {embed.title}
@@ -191,8 +189,12 @@ export default function Embed({ embed }: Props) {
                     type="text/html"
                     frameBorder="0"
                     loading="lazy"
-                    onClick={() => openScreen({ id: "image_viewer", embed })}
+                    onClick={() =>
-                    onMouseDown={(ev) => ev.button === 1 && openLink(embed.url)}
+                        modalController.push({ type: "image_viewer", embed })
+                    }
+                    onMouseDown={(ev) =>
+                        ev.button === 1 && modalController.openLink(embed.url)
+                    }
                 />
             );
         }

src/components/common/messaging/embed/EmbedInvite.tsx

@@ -1,5 +1,4 @@
 import { Group } from "@styled-icons/boxicons-solid";
-import { reaction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { Message, API } from "revolt.js";
@@ -7,19 +6,18 @@ import styled, { css } from "styled-components/macro";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { Button, Category, Preloader } from "@revoltchat/ui";
+
 import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 
-import {
+import { I18nError } from "../../../../context/Locale";
-    AppContext,
-    ClientStatus,
-    StatusContext,
-} from "../../../../context/revoltjs/RevoltClient";
-import { takeError } from "../../../../context/revoltjs/util";
 
 import ServerIcon from "../../../../components/common/ServerIcon";
-import Button from "../../../../components/ui/Button";
+import {
-import Overline from "../../../ui/Overline";
+    useClient,
-import Preloader from "../../../ui/Preloader";
+    useSession,
+} from "../../../../controllers/client/ClientController";
+import { takeError } from "../../../../controllers/client/jsx/error";
 
 const EmbedInviteBase = styled.div`
     width: 400px;
@@ -78,8 +76,8 @@ type Props = {
 
 export function EmbedInvite({ code }: Props) {
     const history = useHistory();
-    const client = useContext(AppContext);
+    const session = useSession()!;
-    const status = useContext(StatusContext);
+    const client = session.client!;
     const [processing, setProcessing] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
     const [joinError, setJoinError] = useState<string | undefined>(undefined);
@@ -90,7 +88,7 @@ export function EmbedInvite({ code }: Props) {
     useEffect(() => {
         if (
             typeof invite === "undefined" &&
-            (status === ClientStatus.ONLINE || status === ClientStatus.READY)
+            (session.state === "Online" || session.state === "Ready")
         ) {
             client
                 .fetchInvite(code)
@@ -99,7 +97,7 @@ export function EmbedInvite({ code }: Props) {
                 )
                 .catch((err) => setError(takeError(err)));
         }
-    }, [client, code, invite, status]);
+    }, [client, code, invite, session.state]);
 
     if (typeof invite === "undefined") {
         return error ? (
@@ -159,7 +157,11 @@ export function EmbedInvite({ code }: Props) {
                     </Button>
                 )}
             </EmbedInviteBase>
-            {joinError && <Overline type="error" error={joinError} />}
+            {joinError && (
+                <Category>
+                    <I18nError error={joinError} />
+                </Category>
+            )}
         </>
     );
 }

src/components/common/messaging/embed/EmbedMedia.tsx

@@ -3,8 +3,8 @@ import { API } from "revolt.js";
 
 import styles from "./Embed.module.scss";
 
-import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { useClient } from "../../../../controllers/client/ClientController";
-import { useClient } from "../../../../context/revoltjs/RevoltClient";
+import { modalController } from "../../../../controllers/modals/ModalController";
 
 interface Props {
     embed: API.Embed;
@@ -14,7 +14,6 @@ interface Props {
 
 export default function EmbedMedia({ embed, width, height }: Props) {
     if (embed.type !== "Website") return null;
-    const { openScreen } = useIntermediate();
     const client = useClient();
 
     switch (embed.special?.type) {
@@ -117,8 +116,8 @@ export default function EmbedMedia({ embed, width, height }: Props) {
                         loading="lazy"
                         style={{ width, height }}
                         onClick={() =>
-                            openScreen({
+                            modalController.push({
-                                id: "image_viewer",
+                                type: "image_viewer",
                                 embed: embed.image!,
                             })
                         }

src/components/common/messaging/embed/EmbedMediaActions.tsx

@@ -3,7 +3,7 @@ import { API } from "revolt.js";
 
 import styles from "./Embed.module.scss";
 
-import IconButton from "../../../ui/IconButton";
+import { IconButton } from "@revoltchat/ui";
 
 interface Props {
     embed: API.Image;
@@ -20,7 +20,7 @@ export default function EmbedMediaActions({ embed }: Props) {
             </span>
             <a
                 href={embed.url}
-                class={styles.openIcon}
+                className={styles.openIcon}
                 target="_blank"
                 rel="noreferrer">
                 <IconButton>

src/components/common/user/UserBadges.tsx

@@ -16,6 +16,7 @@ enum Badges {
     Paw = 128,
     EarlyAdopter = 256,
     ReservedRelevantJokeBadge1 = 512,
+    ReservedRelevantJokeBadge2 = 1024,
 }
 
 const BadgesBase = styled.div`
@@ -135,6 +136,13 @@ export default function UserBadges({ badges, uid }: Props) {
                 ) : (
                     <></>
                 )}
+                {badges & Badges.ReservedRelevantJokeBadge2 ? (
+                    <Tooltip content="It's Morbin Time">
+                        <img src="/assets/badges/amorbus.svg" />
+                    </Tooltip>
+                ) : (
+                    <></>
+                )}
                 {badges & Badges.Paw ? (
                     <Tooltip content="🦊">
                         <img src="/assets/badges/paw.svg" />

src/components/common/user/UserCheckbox.tsx

@@ -1,17 +1,24 @@
 import { User } from "revolt.js";
 
-import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
+import { Checkbox, Row, Column } from "@revoltchat/ui";
 
 import UserIcon from "./UserIcon";
 import { Username } from "./UserShort";
 
-type UserProps = Omit<CheckboxProps, "children"> & { user: User };
+type UserProps = { value: boolean; onChange: (v: boolean) => void; user: User };
 
 export default function UserCheckbox({ user, ...props }: UserProps) {
     return (
-        <Checkbox {...props}>
+        <Checkbox
+            {...props}
+            title={
+                <Row centred>
                     <UserIcon target={user} size={32} />
+                    <Column centred>
                         <Username user={user} />
-        </Checkbox>
+                    </Column>
+                </Row>
+            }
+        />
     );
 }

src/components/common/user/UserHeader.tsx

@@ -7,13 +7,11 @@ import styled from "styled-components/macro";
 import { openContextMenu } from "preact-context-menu";
 import { Text, Localizer } from "preact-i18n";
 
+import { Header, IconButton } from "@revoltchat/ui";
+
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { modalController } from "../../../controllers/modals/ModalController";
-
-import Header from "../../ui/Header";
-import IconButton from "../../ui/IconButton";
-
 import Tooltip from "../Tooltip";
 import UserStatus from "./UserStatus";
 
@@ -49,16 +47,16 @@ interface Props {
 }
 
 export default observer(({ user }: Props) => {
-    const { writeClipboard } = useIntermediate();
-
     return (
-        <Header topBorder placement="secondary">
+        <Header topBorder palette="secondary">
             <HeaderBase>
                 <Localizer>
                     <Tooltip content={<Text id="app.special.copy_username" />}>
                         <span
                             className="username"
-                            onClick={() => writeClipboard(user.username)}>
+                            onClick={() =>
+                                modalController.writeText(user.username)
+                            }>
                             @{user.username}
                         </span>
                     </Tooltip>

src/components/common/user/UserHover.tsx

@@ -1,7 +1,6 @@
 import { User } from "revolt.js";
 import styled from "styled-components/macro";
 
-import { Children } from "../../../types/Preact";
 import Tooltip from "../Tooltip";
 import { Username } from "./UserShort";
 import UserStatus from "./UserStatus";

src/components/common/user/UserIcon.tsx

@@ -6,10 +6,9 @@ import styled, { css } from "styled-components/macro";
 
 import { useApplicationState } from "../../../mobx/State";
 
-import { useClient } from "../../../context/revoltjs/RevoltClient";
-
 import fallback from "../assets/user.png";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import IconBase, { IconBaseProps } from "../IconBase";
 
 type VoiceStatus = "muted" | "deaf";
@@ -114,7 +113,7 @@ export default observer(
                     y="0"
                     width="32"
                     height="32"
-                    class="icon"
+                    className="icon"
                     mask={mask ?? (status ? "url(#user)" : undefined)}>
                     {<img src={url} draggable={false} loading="lazy" />}
                 </foreignObject>

src/components/common/user/UserShort.tsx

@@ -8,9 +8,8 @@ import { Text } from "preact-i18n";
 
 import { internalEmit } from "../../../lib/eventEmitter";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../controllers/client/ClientController";
-import { useClient } from "../../../context/revoltjs/RevoltClient";
+import { modalController } from "../../../controllers/modals/ModalController";
-
 import UserIcon from "./UserIcon";
 
 const BotBadge = styled.div`
@@ -125,9 +124,9 @@ export default function UserShort({
     masquerade?: API.Masquerade;
     showServerIdentity?: boolean;
 }) {
-    const { openScreen } = useIntermediate();
     const openProfile = () =>
-        user && openScreen({ id: "profile", user_id: user._id });
+        user &&
+        modalController.push({ type: "user_profile", user_id: user._id });
 
     const handleUserClick = (e: MouseEvent) => {
         if (e.shiftKey && user?._id) {

src/components/markdown/Markdown.module.scss

@@ -1,218 +0,0 @@
-.markdown {
-    :global(.emoji) {
-        object-fit: contain;
-
-        height: 1.25em;
-        width: 1.25em;
-        margin: 0 0.05em 0 0.1em;
-        vertical-align: -0.2em;
-    }
-
-    &[data-large-emojis="true"] :global(.emoji) {
-        width: 3rem;
-        height: 3rem;
-        margin-bottom: 0;
-        margin-top: 1px;
-        margin-right: 2px;
-        vertical-align: -0.3em;
-    }
-
-    p,
-    pre {
-        margin: 0;
-    }
-
-    a {
-        text-decoration: none;
-
-        &[data-type="mention"] {
-            padding: 0 6px;
-            flex-shrink: 0;
-            font-weight: 600;
-            display: inline-block;
-            background: var(--secondary-background);
-            border-radius: calc(var(--border-radius) * 2);
-
-            &:hover {
-                text-decoration: none;
-            }
-        }
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    ul,
-    ol,
-    blockquote {
-        margin: 0;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        &:not(:first-child) {
-            margin-top: 12px;
-        }
-    }
-
-    ul,
-    ol {
-        list-style-position: inside;
-        padding-left: 10px;
-    }
-
-    blockquote {
-        margin: 2px 0;
-        padding: 2px 0;
-        background: var(--hover);
-        border-radius: var(--border-radius);
-        border-inline-start: 4px solid var(--tertiary-background);
-
-        > * {
-            margin: 0 8px;
-        }
-    }
-
-    pre {
-        padding: 1em;
-        overflow-x: scroll;
-        border-radius: var(--border-radius);
-        background: var(--block) !important;
-    }
-
-    p > code {
-        padding: 1px 4px;
-        flex-shrink: 0;
-    }
-
-    code {
-        color: white;
-        font-size: 90%;
-        background: var(--block);
-        border-radius: var(--border-radius);
-        font-family: var(--monospace-font), monospace;
-        border-radius: 3px;
-        -webkit-box-decoration-break: clone;
-    }
-
-    input[type="checkbox"] {
-        margin-right: 4px;
-        pointer-events: none;
-    }
-
-    table {
-        border-collapse: collapse;
-
-        th,
-        td {
-            padding: 6px;
-            border: 1px solid var(--tertiary-foreground);
-        }
-    }
-
-    :global(.katex-block) {
-        overflow-x: auto;
-    }
-
-    :global(.spoiler) {
-        padding: 0 2px;
-        cursor: pointer;
-        user-select: none;
-        color: transparent;
-        background: #151515;
-        border-radius: var(--border-radius);
-
-        > * {
-            opacity: 0;
-            pointer-events: none;
-        }
-
-        &:global(.shown) {
-            cursor: auto;
-            user-select: all;
-            color: var(--foreground);
-            background: var(--secondary-background);
-
-            > * {
-                opacity: 1;
-                pointer-events: unset;
-            }
-        }
-    }
-
-    :global(.code) {
-        font-family: var(--monospace-font), monospace;
-
-        :global(.lang) {
-            width: fit-content;
-            padding-bottom: 8px;
-
-            div {
-                color: #111;
-                cursor: pointer;
-                padding: 2px 6px;
-                font-weight: 600;
-                user-select: none;
-                display: inline-block;
-                background: var(--accent);
-
-                font-size: 10px;
-                text-transform: uppercase;
-                box-shadow: 0 2px #787676;
-                border-radius: calc(var(--border-radius) / 3);
-
-                &:active {
-                    transform: translateY(1px);
-                    box-shadow: 0 1px #787676;
-                }
-            }
-        }
-    }
-
-    input[type="checkbox"] {
-        width: 0;
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    label {
-        pointer-events: none;
-    }
-
-    input[type="checkbox"] + label:before {
-        width: 12px;
-        height: 12px;
-        content: "a";
-        font-size: 10px;
-        margin-right: 6px;
-        line-height: 12px;
-        background: white;
-        position: relative;
-        display: inline-block;
-        border-radius: var(--border-radius);
-    }
-
-    input[type="checkbox"][checked="true"] + label:before {
-        content: "✓";
-        align-items: center;
-        display: inline-flex;
-        justify-content: center;
-        background: var(--accent);
-    }
-
-    input[type="checkbox"] + label {
-        line-height: 12px;
-        position: relative;
-    }
-}

src/components/markdown/Markdown.tsx

@@ -1,13 +1,15 @@
 import { Suspense, lazy } from "preact/compat";
 
-const Renderer = lazy(() => import("./Renderer"));
+const Renderer = lazy(() => import("./RemarkRenderer"));
 
 export interface MarkdownProps {
-    content?: string | null;
+    content: string;
     disallowBigEmoji?: boolean;
 }
 
 export default function Markdown(props: MarkdownProps) {
+    if (!props.content) return null;
+
     return (
         // @ts-expect-error Typings mis-match.
         <Suspense fallback={props.content}>

src/components/markdown/RemarkRenderer.tsx

@@ -0,0 +1,220 @@
+import "katex/dist/katex.min.css";
+import rehypeKatex from "rehype-katex";
+import rehypePrism from "rehype-prism";
+import rehypeReact from "rehype-react";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import styled, { css } from "styled-components";
+import { unified } from "unified";
+
+import { createElement } from "preact";
+import { memo } from "preact/compat";
+import { useLayoutEffect, useMemo, useState } from "preact/hooks";
+
+import { MarkdownProps } from "./Markdown";
+import { handlers } from "./hast";
+import { RenderCodeblock } from "./plugins/Codeblock";
+import { RenderAnchor } from "./plugins/anchors";
+import { remarkChannels, RenderChannel } from "./plugins/channels";
+import { isOnlyEmoji, remarkEmoji, RenderEmoji } from "./plugins/emoji";
+import { remarkHtmlToText } from "./plugins/htmlToText";
+import { remarkMention, RenderMention } from "./plugins/mentions";
+import { remarkSpoiler, RenderSpoiler } from "./plugins/spoiler";
+import { remarkTimestamps } from "./plugins/timestamps";
+import "./prism";
+
+/**
+ * Null element
+ */
+const Null: React.FC = () => null;
+
+/**
+ * Custom Markdown components
+ */
+const components = {
+    emoji: RenderEmoji,
+    mention: RenderMention,
+    spoiler: RenderSpoiler,
+    channel: RenderChannel,
+    a: RenderAnchor,
+    p: styled.p`
+        margin: 0;
+
+        > code {
+            padding: 1px 4px;
+            flex-shrink: 0;
+        }
+    `,
+    h1: styled.h1`
+        margin: 0.2em 0;
+    `,
+    h2: styled.h2`
+        margin: 0.2em 0;
+    `,
+    h3: styled.h3`
+        margin: 0.2em 0;
+    `,
+    h4: styled.h4`
+        margin: 0.2em 0;
+    `,
+    h5: styled.h5`
+        margin: 0.2em 0;
+    `,
+    h6: styled.h6`
+        margin: 0.2em 0;
+    `,
+    pre: RenderCodeblock,
+    code: styled.code`
+        color: white;
+        background: var(--block);
+
+        font-size: 90%;
+        font-family: var(--monospace-font), monospace;
+
+        border-radius: 3px;
+        box-decoration-break: clone;
+    `,
+    table: styled.table`
+        border-collapse: collapse;
+
+        th,
+        td {
+            padding: 6px;
+            border: 1px solid var(--tertiary-foreground);
+        }
+    `,
+    ul: styled.ul`
+        list-style-position: inside;
+        padding-left: 10px;
+        margin: 0.2em 0;
+    `,
+    ol: styled.ol`
+        list-style-position: inside;
+        padding-left: 10px;
+        margin: 0.2em 0;
+    `,
+    li: styled.li`
+        ${(props) =>
+            props.class === "task-list-item" &&
+            css`
+                list-style-type: none;
+            `}
+    `,
+    blockquote: styled.blockquote`
+        margin: 2px 0;
+        padding: 2px 0;
+        background: var(--hover);
+        border-radius: var(--border-radius);
+        border-inline-start: 4px solid var(--tertiary-background);
+
+        > * {
+            margin: 0 8px;
+        }
+    `,
+    // Block image elements
+    img: Null,
+    // Catch literally everything else just in case
+    video: Null,
+    figure: Null,
+    picture: Null,
+    source: Null,
+    audio: Null,
+    script: Null,
+    style: Null,
+};
+
+/**
+ * Unified Markdown renderer
+ */
+const render = unified()
+    .use(remarkParse)
+    .use(remarkBreaks)
+    .use(remarkGfm)
+    .use(remarkMath)
+    .use(remarkSpoiler)
+    .use(remarkChannels)
+    .use(remarkTimestamps)
+    .use(remarkEmoji)
+    .use(remarkMention)
+    .use(remarkHtmlToText)
+    .use(remarkRehype, {
+        handlers,
+    })
+    .use(rehypeKatex, {
+        maxSize: 10,
+        maxExpand: 0,
+        trust: false,
+        strict: false,
+        output: "html",
+        throwOnError: false,
+        errorColor: "var(--error)",
+    })
+    .use(rehypePrism)
+    // @ts-expect-error typings do not
+    // match between Preact and React
+    .use(rehypeReact, {
+        createElement,
+        Fragment,
+        components,
+    });
+
+/**
+ * Markdown parent container
+ */
+const Container = styled.div<{ largeEmoji: boolean }>`
+    // Allow scrolling block math
+    .math-display {
+        overflow-x: auto;
+    }
+
+    // Set emoji size
+    --emoji-size: ${(props) => (props.largeEmoji ? "3em" : "1.25em")};
+
+    // Underline link hover
+    a:hover {
+        text-decoration: underline;
+    }
+`;
+
+/**
+ * Regex for matching execessive blockquotes
+ */
+const RE_QUOTE = /(^(?:>\s){5})[>\s]+(.*$)/gm;
+
+/**
+ * Sanitise Markdown input before rendering
+ * @param content Input string
+ * @returns Sanitised string
+ */
+function sanitise(content: string) {
+    return (
+        content
+            // Strip excessive blockquote indentation
+            .replace(RE_QUOTE, (_, m0, m1) => m0 + m1)
+    );
+}
+
+/**
+ * Remark renderer component
+ */
+export default memo(({ content, disallowBigEmoji }: MarkdownProps) => {
+    const sanitisedContent = useMemo(() => sanitise(content), [content]);
+
+    const [Content, setContent] = useState<React.ReactElement>(null!);
+
+    useLayoutEffect(() => {
+        render
+            .process(sanitisedContent)
+            .then((file) => setContent(file.result));
+    }, [sanitisedContent]);
+
+    const largeEmoji = useMemo(
+        () => !disallowBigEmoji && isOnlyEmoji(content!),
+        [content, disallowBigEmoji],
+    );
+
+    return <Container largeEmoji={largeEmoji}>{Content}</Container>;
+});

src/components/markdown/Renderer.tsx

@@ -1,292 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import MarkdownKatex from "@traptitech/markdown-it-katex";
-import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
-import "katex/dist/katex.min.css";
-import MarkdownIt from "markdown-it";
-// @ts-expect-error No typings.
-import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
-import { RE_MENTIONS } from "revolt.js";
-
-import styles from "./Markdown.module.scss";
-import { useCallback, useContext } from "preact/hooks";
-
-import { internalEmit } from "../../lib/eventEmitter";
-import { determineLink } from "../../lib/links";
-
-import { dayjs } from "../../context/Locale";
-import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
-
-import { generateEmoji } from "../common/Emoji";
-
-import { emojiDictionary } from "../../assets/emojis";
-import { MarkdownProps } from "./Markdown";
-import Prism from "./prism";
-
-// TODO: global.d.ts file for defining globals
-declare global {
-    interface Window {
-        copycode: (element: HTMLDivElement) => void;
-    }
-}
-
-// Handler for code block copy.
-if (typeof window !== "undefined") {
-    window.copycode = function (element: HTMLDivElement) {
-        try {
-            const code = element.parentElement?.parentElement?.children[1];
-            if (code) {
-                navigator.clipboard.writeText(code.textContent?.trim() ?? "");
-            }
-        } catch (e) {}
-    };
-}
-
-export const md: MarkdownIt = MarkdownIt({
-    breaks: true,
-    linkify: true,
-    highlight: (str, lang) => {
-        const v = Prism.languages[lang];
-        if (v) {
-            const out = Prism.highlight(str, v, lang);
-            return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
-        }
-
-        return `<pre class="code"><code>${md.utils.escapeHtml(
-            str,
-        )}</code></pre>`;
-    },
-})
-    .disable("image")
-    .use(MarkdownEmoji, { defs: emojiDictionary })
-    .use(MarkdownSpoilers)
-    .use(MarkdownKatex, {
-        throwOnError: false,
-        maxExpand: 0,
-        maxSize: 10,
-        strict: false,
-        errorColor: "var(--error)",
-    });
-
-md.linkify.set({ fuzzyLink: false });
-
-// TODO: global.d.ts file for defining globals
-declare global {
-    interface Window {
-        internalHandleURL: (element: HTMLAnchorElement) => void;
-    }
-}
-
-// Include emojis.
-md.renderer.rules.emoji = function (token, idx) {
-    return generateEmoji(token[idx].content);
-};
-
-// Force line breaks.
-// https://github.com/markdown-it/markdown-it/issues/211#issuecomment-508380611
-const defaultParagraphRenderer =
-    md.renderer.rules.paragraph_open ||
-    ((tokens, idx, options, env, self) =>
-        self.renderToken(tokens, idx, options));
-
-md.renderer.rules.paragraph_open = function (tokens, idx, options, env, self) {
-    let result = "";
-    if (idx > 1) {
-        const inline = tokens[idx - 2];
-        const paragraph = tokens[idx];
-        if (
-            inline.type === "inline" &&
-            inline.map &&
-            inline.map[1] &&
-            paragraph.map &&
-            paragraph.map[0]
-        ) {
-            const diff = paragraph.map[0] - inline.map[1];
-            if (diff > 0) {
-                result = "<br>".repeat(diff);
-            }
-        }
-    }
-
-    return result + defaultParagraphRenderer(tokens, idx, options, env, self);
-};
-
-const RE_TWEMOJI = /:(\w+):/g;
-
-// ! FIXME: Move to library
-const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
-
-const RE_TIME = /<t:([0-9]+):(\w)>/g;
-
-export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
-    const client = useContext(AppContext);
-    const { openLink } = useIntermediate();
-
-    if (typeof content === "undefined") return null;
-    if (!content || content.length === 0) return null;
-
-    // We replace the message with the mention at the time of render.
-    // We don't care if the mention changes.
-    const newContent = content
-        .replace(RE_TIME, (sub: string, ...args: unknown[]) => {
-            if (isNaN(args[0] as number)) return sub;
-            const date = dayjs.unix(args[0] as number);
-            const format = args[1] as string;
-            let final = "";
-            switch (format) {
-                case "t":
-                    final = date.format("hh:mm");
-                    break;
-                case "T":
-                    final = date.format("hh:mm:ss");
-                    break;
-                case "R":
-                    final = date.fromNow();
-                    break;
-                case "D":
-                    final = date.format("DD MMMM YYYY");
-                    break;
-                case "F":
-                    final = date.format("dddd, DD MMMM YYYY hh:mm");
-                    break;
-                default:
-                    final = date.format("DD MMMM YYYY hh:mm");
-                    break;
-            }
-            return `\`${final}\``;
-        })
-        .replace(RE_MENTIONS, (sub: string, ...args: unknown[]) => {
-            const id = args[0] as string,
-                user = client.users.get(id);
-
-            if (user) {
-                return `[@${user.username}](/@${id})`;
-            }
-
-            return sub;
-        })
-        .replace(RE_CHANNELS, (sub: string, ...args: unknown[]) => {
-            const id = args[0] as string,
-                channel = client.channels.get(id);
-
-            if (channel?.channel_type === "TextChannel") {
-                return `[#${channel.name}](/server/${channel.server_id}/channel/${id})`;
-            }
-
-            return sub;
-        });
-
-    const useLargeEmojis = disallowBigEmoji
-        ? false
-        : content.replace(RE_TWEMOJI, "").trim().length === 0;
-
-    const toggle = useCallback((ev: MouseEvent) => {
-        if (ev.currentTarget) {
-            const element = ev.currentTarget as HTMLDivElement;
-            if (element.classList.contains("spoiler")) {
-                element.classList.add("shown");
-            }
-        }
-    }, []);
-
-    const handleLink = useCallback(
-        (ev: MouseEvent) => {
-            if (ev.currentTarget) {
-                const element = ev.currentTarget as HTMLAnchorElement;
-
-                if (ev.shiftKey) {
-                    switch (element.dataset.type) {
-                        case "mention": {
-                            internalEmit(
-                                "MessageBox",
-                                "append",
-                                `<@${element.dataset.mentionId}>`,
-                                "mention",
-                            );
-                            ev.preventDefault();
-                            return;
-                        }
-                        case "channel_mention": {
-                            internalEmit(
-                                "MessageBox",
-                                "append",
-                                `<#${element.dataset.mentionId}>`,
-                                "channel_mention",
-                            );
-                            ev.preventDefault();
-                            return;
-                        }
-                    }
-                }
-
-                if (openLink(element.href)) {
-                    ev.preventDefault();
-                }
-            }
-        },
-        [openLink],
-    );
-
-    return (
-        <span
-            ref={(el) => {
-                if (el) {
-                    el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
-                        (element) => {
-                            element.removeEventListener("click", toggle);
-                            element.addEventListener("click", toggle);
-                        },
-                    );
-
-                    el.querySelectorAll<HTMLAnchorElement>("a").forEach(
-                        (element) => {
-                            element.removeEventListener("click", handleLink);
-                            element.addEventListener("click", handleLink);
-                            element.removeAttribute("data-type");
-                            element.removeAttribute("data-mention-id");
-                            element.removeAttribute("target");
-
-                            const link = determineLink(element.href);
-                            switch (link.type) {
-                                case "profile": {
-                                    element.setAttribute(
-                                        "data-type",
-                                        "mention",
-                                    );
-                                    element.setAttribute(
-                                        "data-mention-id",
-                                        link.id,
-                                    );
-                                    break;
-                                }
-                                case "navigate": {
-                                    if (link.navigation_type === "channel") {
-                                        element.setAttribute(
-                                            "data-type",
-                                            "channel_mention",
-                                        );
-                                        element.setAttribute(
-                                            "data-mention-id",
-                                            link.channel_id,
-                                        );
-                                    }
-                                    break;
-                                }
-                                case "external": {
-                                    element.setAttribute("target", "_blank");
-                                    element.setAttribute("rel", "noreferrer");
-                                    break;
-                                }
-                            }
-                        },
-                    );
-                }
-            }}
-            className={styles.markdown}
-            dangerouslySetInnerHTML={{
-                __html: md.render(newContent),
-            }}
-            data-large-emojis={useLargeEmojis}
-        />
-    );
-}

src/components/markdown/hast.ts

@@ -0,0 +1,7 @@
+import { passThroughComponents } from "./plugins/remarkRegexComponent";
+import { timestampHandler } from "./plugins/timestamps";
+
+export const handlers = {
+    ...passThroughComponents("emoji", "spoiler", "mention", "channel"),
+    timestamp: timestampHandler,
+};

src/components/markdown/plugins/Codeblock.tsx

@@ -0,0 +1,78 @@
+import styled from "styled-components";
+
+import { useCallback, useRef } from "preact/hooks";
+
+import { Tooltip } from "@revoltchat/ui";
+
+import { modalController } from "../../../controllers/modals/ModalController";
+
+/**
+ * Base codeblock styles
+ */
+const Base = styled.pre`
+    padding: 1em;
+    overflow-x: scroll;
+    background: var(--block);
+    border-radius: var(--border-radius);
+`;
+
+/**
+ * Copy codeblock contents button styles
+ */
+const Lang = styled.div`
+    width: fit-content;
+    padding-bottom: 8px;
+
+    a {
+        color: #111;
+        cursor: pointer;
+        padding: 2px 6px;
+        font-weight: 600;
+        user-select: none;
+        display: inline-block;
+        background: var(--accent);
+
+        font-size: 10px;
+        text-transform: uppercase;
+        box-shadow: 0 2px #787676;
+        border-radius: calc(var(--border-radius) / 3);
+
+        &:active {
+            transform: translateY(1px);
+            box-shadow: 0 1px #787676;
+        }
+    }
+`;
+
+/**
+ * Render a codeblock with copy text button
+ */
+export const RenderCodeblock: React.FC<{ class: string }> = ({
+    children,
+    ...props
+}) => {
+    const ref = useRef<HTMLPreElement>(null);
+
+    let text = "text";
+    if (props.class) {
+        text = props.class.split("-")[1];
+    }
+
+    const onCopy = useCallback(() => {
+        const text = ref.current?.querySelector("code")?.innerText;
+        text && modalController.writeText(text);
+    }, [ref]);
+
+    return (
+        <Base ref={ref}>
+            <Lang>
+                <Tooltip content="Copy to Clipboard" placement="top">
+                    {/**
+                    // @ts-expect-error Preact-React */}
+                    <a onClick={onCopy}>{text}</a>
+                </Tooltip>
+            </Lang>
+            {children}
+        </Base>
+    );
+};

src/components/markdown/plugins/anchors.tsx

@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom";
+
+import { determineLink } from "../../../lib/links";
+
+import { modalController } from "../../../controllers/modals/ModalController";
+
+export function RenderAnchor({
+    href,
+    ...props
+}: JSX.HTMLAttributes<HTMLAnchorElement>) {
+    // Pass-through no href or if anchor
+    if (!href || href.startsWith("#")) return <a href={href} {...props} />;
+
+    // Determine type of link
+    const link = determineLink(href);
+    if (link.type === "none") return <a {...props} />;
+
+    // Render direct link if internal
+    if (link.type === "navigate") {
+        return <Link to={link.path} children={props.children} />;
+    }
+
+    return (
+        <a
+            {...props}
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+            onClick={(ev) =>
+                modalController.openLink(href) && ev.preventDefault()
+            }
+        />
+    );
+}

src/components/markdown/plugins/channels.tsx

@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+
+import { clientController } from "../../../controllers/client/ClientController";
+import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
+
+export function RenderChannel({ match }: CustomComponentProps) {
+    const channel = clientController.getAvailableClient().channels.get(match)!;
+
+    return (
+        <Link
+            to={`${
+                channel.server_id ? `/server/${channel.server_id}` : ""
+            }/channel/${match}`}>{`#${channel.name}`}</Link>
+    );
+}
+
+export const remarkChannels = createComponent(
+    "channel",
+    /<#([A-z0-9]{26})>/g,
+    (match) => clientController.getAvailableClient().channels.has(match),
+);

src/components/markdown/plugins/emoji.tsx

@@ -0,0 +1,63 @@
+import styled from "styled-components";
+
+import { useState } from "preact/hooks";
+
+import { emojiDictionary } from "../../../assets/emojis";
+import { clientController } from "../../../controllers/client/ClientController";
+import { parseEmoji } from "../../common/Emoji";
+import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
+
+const Emoji = styled.img`
+    object-fit: contain;
+
+    height: var(--emoji-size);
+    width: var(--emoji-size);
+    margin: 0 0.05em 0 0.1em;
+    vertical-align: -0.2em;
+
+    img:before {
+        content: " ";
+        display: block;
+        position: absolute;
+        height: 50px;
+        width: 50px;
+        background-image: url(ishere.jpg);
+    }
+`;
+
+export function RenderEmoji({ match }: CustomComponentProps) {
+    const [fail, setFail] = useState(false);
+    const url =
+        match in emojiDictionary
+            ? parseEmoji(emojiDictionary[match as keyof typeof emojiDictionary])
+            : `${
+                  clientController.getAvailableClient().configuration?.features
+                      .autumn.url
+              }/emojis/${match}`;
+
+    if (fail) return <span>{`:${match}:`}</span>;
+
+    return (
+        <Emoji
+            alt={`:${match}:`}
+            loading="lazy"
+            className="emoji"
+            draggable={false}
+            src={url}
+            onError={() => setFail(true)}
+        />
+    );
+}
+
+const RE_EMOJI = /:([a-zA-Z0-9_+]+):/g;
+const RE_ULID = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/;
+
+export const remarkEmoji = createComponent(
+    "emoji",
+    RE_EMOJI,
+    (match) => match in emojiDictionary || RE_ULID.test(match),
+);
+
+export function isOnlyEmoji(text: string) {
+    return text.replaceAll(RE_EMOJI, "").trim().length === 0;
+}

src/components/markdown/plugins/htmlToText.ts

@@ -0,0 +1,10 @@
+import { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+
+export const remarkHtmlToText: Plugin = () => {
+    return (tree) => {
+        visit(tree, "html", (node: { type: string; value: string }) => {
+            node.type = "text";
+        });
+    };
+};

src/components/markdown/plugins/mentions.tsx

@@ -0,0 +1,53 @@
+import { RE_MENTIONS } from "revolt.js";
+import styled from "styled-components";
+
+import { clientController } from "../../../controllers/client/ClientController";
+import UserShort from "../../common/user/UserShort";
+import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
+
+const Mention = styled.a`
+    gap: 4px;
+    flex-shrink: 0;
+    padding-left: 2px;
+    padding-right: 6px;
+    align-items: center;
+    display: inline-flex;
+    vertical-align: middle;
+
+    cursor: pointer;
+
+    font-weight: 600;
+    text-decoration: none !important;
+    background: var(--secondary-background);
+    border-radius: calc(var(--border-radius) * 2);
+
+    transition: 0.1s ease filter;
+
+    &:hover {
+        filter: brightness(0.75);
+    }
+
+    &:active {
+        filter: brightness(0.65);
+    }
+
+    svg {
+        width: 1em;
+        height: 1em;
+    }
+`;
+
+export function RenderMention({ match }: CustomComponentProps) {
+    return (
+        <Mention>
+            <UserShort
+                showServerIdentity
+                user={clientController.getAvailableClient().users.get(match)}
+            />
+        </Mention>
+    );
+}
+
+export const remarkMention = createComponent("mention", RE_MENTIONS, (match) =>
+    clientController.getAvailableClient().users.has(match),
+);

src/components/markdown/plugins/remarkRegexComponent.ts

@@ -0,0 +1,108 @@
+import type { Handler } from "mdast-util-to-hast";
+import type { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+
+/**
+ * Props given to custom components
+ */
+export interface CustomComponentProps {
+    type: string;
+    match: string;
+    arg1: string;
+}
+
+/**
+ * Create a new custom component matched by a given RegExp
+ * @param type hast node type
+ * @param regex Regex to match (must have one capture group)
+ * @returns Unified Plugin
+ */
+export function createComponent(
+    type: string,
+    regex: RegExp,
+    validator?: (match: string) => boolean,
+): Plugin {
+    /**
+     * Plugin which transforms a given RegExp into a custom component with given name.
+     */
+    return () => {
+        return (tree) => {
+            visit(
+                tree,
+                "text",
+                (
+                    node: { value: string },
+                    index: number,
+                    parent: { children: any[] },
+                ) => {
+                    const result = [];
+                    let start = 0;
+
+                    regex.lastIndex = 0;
+
+                    let match = regex.exec(node.value);
+
+                    while (match) {
+                        if (!validator || validator(match[1])) {
+                            const position = match.index;
+
+                            if (start !== position) {
+                                result.push({
+                                    type: "text",
+                                    value: node.value.slice(start, position),
+                                });
+                            }
+
+                            result.push({
+                                type,
+                                match: match[1],
+                                arg1: match[2],
+                            });
+                            start = position + match[0].length;
+                        }
+
+                        match = regex.exec(node.value);
+                    }
+
+                    if (
+                        result.length > 0 &&
+                        parent &&
+                        typeof index === "number"
+                    ) {
+                        if (start < node.value.length) {
+                            result.push({
+                                type: "text",
+                                value: node.value.slice(start),
+                            });
+                        }
+
+                        parent.children.splice(index, 1, ...result);
+                        return index + result.length;
+                    }
+                },
+            );
+        };
+    };
+}
+
+/**
+ * Pass-through a component as-is from remark to rehype
+ * @param name Tag name
+ * @returns Handler
+ */
+export const passThroughRehype: (name: string) => Handler =
+    (name: string) => (h, node) =>
+        h(node, name, node);
+
+/**
+ * Pass-through multiple components at once
+ * @param keys Tags
+ * @returns Handlers
+ */
+export const passThroughComponents = (...keys: string[]) => {
+    const obj: Record<string, Handler> = {};
+    for (const key of keys) {
+        obj[key] = passThroughRehype(key);
+    }
+    return obj;
+};

src/components/markdown/plugins/spoiler.tsx

@@ -0,0 +1,45 @@
+import styled, { css } from "styled-components";
+
+import { useState } from "preact/hooks";
+
+import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
+
+const Spoiler = styled.span<{ shown: boolean }>`
+    padding: 0 2px;
+    cursor: pointer;
+    user-select: none;
+    color: transparent;
+    background: #151515;
+    border-radius: var(--border-radius);
+
+    > * {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    ${(props) =>
+        props.shown &&
+        css`
+            cursor: auto;
+            user-select: all;
+            color: var(--foreground);
+            background: var(--secondary-background);
+
+            > * {
+                opacity: 1;
+                pointer-events: unset;
+            }
+        `}
+`;
+
+export function RenderSpoiler({ match }: CustomComponentProps) {
+    const [shown, setShown] = useState(false);
+
+    return (
+        <Spoiler shown={shown} onClick={() => setShown(true)}>
+            {match}
+        </Spoiler>
+    );
+}
+
+export const remarkSpoiler = createComponent("spoiler", /!!([^!]+)!!/g);

src/components/markdown/plugins/timestamps.ts

@@ -0,0 +1,39 @@
+import type { Handler } from "mdast-util-to-hast";
+
+import { dayjs } from "../../../context/Locale";
+
+import { createComponent } from "./remarkRegexComponent";
+
+export const timestampHandler: Handler = (h, { match, arg1 }) => {
+    if (isNaN(match)) return { type: "text", value: match };
+    const date = dayjs.unix(match);
+
+    let value = "";
+    switch (arg1) {
+        case "t":
+            value = date.format("hh:mm");
+            break;
+        case "T":
+            value = date.format("hh:mm:ss");
+            break;
+        case "R":
+            value = date.fromNow();
+            break;
+        case "D":
+            value = date.format("DD MMMM YYYY");
+            break;
+        case "F":
+            value = date.format("dddd, DD MMMM YYYY hh:mm");
+            break;
+        default:
+            value = date.format("DD MMMM YYYY hh:mm");
+            break;
+    }
+
+    return h(null, "code", {}, [{ type: "text", value }]);
+};
+
+export const remarkTimestamps = createComponent(
+    "timestamp",
+    /<t:([0-9]+)(?::(\w))?>/g,
+);

src/components/markdown/prism.ts

@@ -34,7 +34,6 @@ import "prismjs/components/prism-r";
 import "prismjs/components/prism-sql";
 import "prismjs/components/prism-graphql";
 import "prismjs/components/prism-shell-session";
-import "prismjs/components/prism-java";
 import "prismjs/components/prism-powershell";
 import "prismjs/components/prism-swift";
 import "prismjs/components/prism-yaml";
@@ -87,7 +86,6 @@ import "prismjs/components/prism-moonscript";
 import "prismjs/components/prism-qml";
 import "prismjs/components/prism-vim";
 import "prismjs/components/prism-nim";
-import "prismjs/components/prism-swift";
 import "prismjs/components/prism-haml";
 import "prismjs/components/prism-ada";
 import "prismjs/components/prism-arduino";

src/components/native/Titlebar.tsx

@@ -98,7 +98,7 @@ const TitlebarBase = styled.div<Props>`
 export function Titlebar(props: Props) {
     return (
         <TitlebarBase {...props}>
-            <div class="title">
+            <div className="title">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 193.733 37.438">
@@ -114,7 +114,7 @@ export function Titlebar(props: Props) {
                     <Wrench size="12.5" />
                 )}
             </div>
-            {/*<div class="actions quick">
+            {/*<div className="actions quick">
                 <Tooltip
                     content="Mute"
                     placement="bottom">
@@ -130,9 +130,9 @@ export function Titlebar(props: Props) {
                     </div>
                 </Tooltip>
             </div>*/}
-            <div class="drag" />
+            <div className="drag" />
             <UpdateIndicator style="titlebar" />
-            <div class="actions">
+            <div className="actions">
                 <div onClick={window.native.min}>
                     <svg
                         aria-hidden="false"
@@ -164,7 +164,7 @@ export function Titlebar(props: Props) {
                         />
                     </svg>
                 </div>
-                <div onClick={window.native.close} class="error">
+                <div onClick={window.native.close} className="error">
                     <svg
                         aria-hidden="false"
                         width="12"

src/components/navigation/BottomNavigation.tsx

@@ -3,14 +3,14 @@ import { observer } from "mobx-react-lite";
 import { useHistory, useLocation } from "react-router";
 import styled, { css } from "styled-components/macro";
 
+import { Centred, IconButton } from "@revoltchat/ui";
+
 import ConditionalLink from "../../lib/ConditionalLink";
 
 import { useApplicationState } from "../../mobx/State";
 
-import { useClient } from "../../context/revoltjs/RevoltClient";
+import { useClient } from "../../controllers/client/ClientController";
-
 import UserIcon from "../common/user/UserIcon";
-import IconButton from "../ui/IconButton";
 
 const Base = styled.div`
     background: var(--secondary-background);
@@ -24,8 +24,19 @@ const Navbar = styled.div`
     height: var(--bottom-navigation-height);
 `;
 
+/**
+ * I've decided that this whole component
+ * needs to be re-written 👍👍👍👍👍👍
+ */
+
 const Button = styled.a<{ active: boolean }>`
     flex: 1;
+    color: var(--foreground);
+
+    // ok
+    * {
+        color: var(--foreground) !important;
+    }
 
     > a,
     > div,
@@ -63,7 +74,7 @@ export default observer(() => {
         <Base>
             <Navbar>
                 <Button active={homeActive}>
-                    <IconButton
+                    <Centred
                         onClick={() => {
                             if (settingsActive) {
                                 if (history.length > 0) {
@@ -80,14 +91,14 @@ export default observer(() => {
                             }
                         }}>
                         <Message size={24} />
-                    </IconButton>
+                    </Centred>
                 </Button>
                 <Button active={friendsActive}>
-                    <ConditionalLink active={friendsActive} to="/friends">
                     <IconButton>
+                        <ConditionalLink active={friendsActive} to="/friends">
                             <Group size={25} />
-                        </IconButton>
                         </ConditionalLink>
+                    </IconButton>
                 </Button>
                 {/*<Button active={searchActive}>
                     <ConditionalLink active={searchActive} to="/search">
@@ -104,20 +115,20 @@ export default observer(() => {
                     </ConditionalLink>
                 </Button>*/}
                 <Button active={discoverActive}>
+                    <IconButton>
                         <ConditionalLink
                             active={discoverActive}
                             to="/discover/servers">
-                        <IconButton>
                             <Compass size={24} />
-                        </IconButton>
                         </ConditionalLink>
+                    </IconButton>
                 </Button>
                 <Button active={settingsActive}>
-                    <ConditionalLink active={settingsActive} to="/settings">
                     <IconButton>
+                        <ConditionalLink active={settingsActive} to="/settings">
                             <UserIcon target={user} size={26} status={true} />
-                        </IconButton>
                         </ConditionalLink>
+                    </IconButton>
                 </Button>
             </Navbar>
         </Base>

src/components/navigation/items/ButtonItem.tsx

@@ -5,23 +5,20 @@ import { User, Channel } from "revolt.js";
 
 import styles from "./Item.module.scss";
 import classNames from "classnames";
-import { Ref } from "preact";
 import { useTriggerEvents } from "preact-context-menu";
 import { Localizer, Text } from "preact-i18n";
 
+import { IconButton } from "@revoltchat/ui";
+
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { stopPropagation } from "../../../lib/stopPropagation";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { modalController } from "../../../controllers/modals/ModalController";
-
 import ChannelIcon from "../../common/ChannelIcon";
 import Tooltip from "../../common/Tooltip";
 import UserIcon from "../../common/user/UserIcon";
 import { Username } from "../../common/user/UserShort";
 import UserStatus from "../../common/user/UserStatus";
-import IconButton from "../../ui/IconButton";
-
-import { Children } from "../../../types/Preact";
 
 type CommonProps = Omit<
     JSX.HTMLAttributes<HTMLDivElement>,
@@ -52,7 +49,6 @@ export const UserButton = observer((props: UserProps) => {
         channel,
         ...divProps
     } = props;
-    const { openScreen } = useIntermediate();
 
     return (
         <div
@@ -113,8 +109,7 @@ export const UserButton = observer((props: UserProps) => {
                         className={styles.icon}
                         onClick={(e) =>
                             stopPropagation(e) &&
-                            openScreen({
+                            modalController.push({
-                                id: "special_prompt",
                                 type: "close_dm",
                                 target: channel,
                             })
@@ -151,7 +146,6 @@ export const ChannelButton = observer((props: ChannelProps) => {
         return <UserButton {...{ active, alert, channel, user }} />;
     }
 
-    const { openScreen } = useIntermediate();
     const alerting = alert && !muted && !active;
 
     return (
@@ -166,11 +160,9 @@ export const ChannelButton = observer((props: ChannelProps) => {
                 channel: channel._id,
                 unread: !!alert,
             })}>
-            <ChannelIcon
+            <div className={styles.avatar}>
-                className={styles.avatar}
+                <ChannelIcon target={channel} size={compact ? 24 : 32} />
-                target={channel}
+            </div>
-                size={compact ? 24 : 32}
-            />
             <div className={styles.name}>
                 <div>{channel.name}</div>
                 {channel.channel_type === "Group" && (
@@ -199,8 +191,7 @@ export const ChannelButton = observer((props: ChannelProps) => {
                     <IconButton
                         className={styles.icon}
                         onClick={() =>
-                            openScreen({
+                            modalController.push({
-                                id: "special_prompt",
                                 type: "leave_group",
                                 target: channel,
                             })

src/components/navigation/items/ConnectionStatus.tsx

@@ -1,45 +1,47 @@
+import { observer } from "mobx-react-lite";
+
 import { Text } from "preact-i18n";
-import { useContext } from "preact/hooks";
 
-import {
+import { Banner, Button, Column } from "@revoltchat/ui";
-    ClientStatus,
-    StatusContext,
-    useClient,
-} from "../../../context/revoltjs/RevoltClient";
 
-import Banner from "../../ui/Banner";
+import { useSession } from "../../../controllers/client/ClientController";
 
-export default function ConnectionStatus() {
+function ConnectionStatus() {
-    const status = useContext(StatusContext);
+    const session = useSession()!;
-    const client = useClient();
 
-    if (status === ClientStatus.OFFLINE) {
+    if (session.state === "Offline") {
         return (
             <Banner>
                 <Text id="app.special.status.offline" />
             </Banner>
         );
-    } else if (status === ClientStatus.DISCONNECTED) {
+    } else if (session.state === "Disconnected") {
         return (
             <Banner>
-                <Text id="app.special.status.disconnected" /> <br />
+                <Column centred>
-                <a onClick={() => client.websocket.connect()}>
+                    <Text id="app.special.status.disconnected" />
-                    <Text id="app.special.status.reconnect" />
+                    <Button
-                </a>
+                        compact
+                        palette="secondary"
+                        onClick={() =>
+                            session.emit({
+                                action: "RETRY",
+                            })
+                        }>
+                        <Text id="app.status.reconnect" />
+                    </Button>
+                </Column>
             </Banner>
         );
-    } else if (status === ClientStatus.CONNECTING) {
+    } else if (session.state === "Connecting") {
-        return (
-            <Banner>
-                <Text id="app.special.status.connecting" />
-            </Banner>
-        );
-    } else if (status === ClientStatus.RECONNECTING) {
         return (
             <Banner>
                 <Text id="app.special.status.reconnecting" />
             </Banner>
         );
     }
+
     return null;
 }
+
+export default observer(ConnectionStatus);

src/components/navigation/left/HomeSidebar.tsx

@@ -1,3 +1,4 @@
+import { Plus } from "@styled-icons/boxicons-regular";
 import {
     Home,
     UserDetail,
@@ -11,18 +12,18 @@ import styled, { css } from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
 
+import { Category, IconButton } from "@revoltchat/ui";
+
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../../mobx/State";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
-
-import Category from "../../ui/Category";
 import placeholderSVG from "../items/placeholder.svg";
 
+import { useClient } from "../../../controllers/client/ClientController";
+import { modalController } from "../../../controllers/modals/ModalController";
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 import ButtonItem, { ChannelButton } from "../items/ButtonItem";
 import ConnectionStatus from "../items/ConnectionStatus";
@@ -44,10 +45,9 @@ const Navbar = styled.div`
 
 export default observer(() => {
     const { pathname } = useLocation();
-    const client = useContext(AppContext);
+    const client = useClient();
     const state = useApplicationState();
     const { channel: channel_id } = useParams<{ channel: string }>();
-    const { openScreen } = useIntermediate();
 
     const channels = [...client.channels.values()].filter(
         (x) =>
@@ -125,15 +125,17 @@ export default observer(() => {
                         </ButtonItem>
                     </Link>
                 )}
-                <Category
+                <Category>
-                    text={<Text id="app.main.categories.conversations" />}
+                    <Text id="app.main.categories.conversations" />
-                    action={() =>
+                    <IconButton
-                        openScreen({
+                        onClick={() =>
-                            id: "special_input",
+                            modalController.push({
                                 type: "create_group",
                             })
-                    }
+                        }>
-                />
+                        <Plus size={16} />
+                    </IconButton>
+                </Category>
                 {channels.length === 0 && (
                     <img src={placeholderSVG} loading="eager" />
                 )}

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,448 +1,40 @@
-import { Plus } from "@styled-icons/boxicons-regular";
-import { Cog, Compass } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { Link, useHistory, useLocation, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
-import styled, { css } from "styled-components/macro";
 
-import { useTriggerEvents } from "preact-context-menu";
+import { useCallback } from "preact/hooks";
 
-import ConditionalLink from "../../../lib/ConditionalLink";
+import { ServerList } from "@revoltchat/ui";
-import PaintCounter from "../../../lib/PaintCounter";
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../../mobx/State";
-import { SIDEBAR_CHANNELS } from "../../../mobx/stores/Layout";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../controllers/client/ClientController";
-import { useClient } from "../../../context/revoltjs/RevoltClient";
+import { modalController } from "../../../controllers/modals/ModalController";
-
-import ChannelIcon from "../../common/ChannelIcon";
-import ServerIcon from "../../common/ServerIcon";
-import Tooltip from "../../common/Tooltip";
-import UserHover from "../../common/user/UserHover";
-import UserIcon from "../../common/user/UserIcon";
-import IconButton from "../../ui/IconButton";
-import LineDivider from "../../ui/LineDivider";
-
-import { Children } from "../../../types/Preact";
-
-function Icon({
-    children,
-    unread,
-    count,
-    size,
-}: {
-    children: Children;
-    unread?: "mention" | "unread";
-    count: number | 0;
-    size: number;
-}) {
-    return (
-        <svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
-            <use href="#serverIndicator" />
-            <foreignObject
-                x="0"
-                y="0"
-                width="32"
-                height="32"
-                mask={unread ? "url(#server)" : undefined}>
-                {children}
-            </foreignObject>
-            {unread === "unread" && (
-                <circle cx="27" cy="5" r="5" fill={"white"} />
-            )}
-            {unread === "mention" && (
-                <>
-                    <circle cx="27" cy="5" r="5" fill={"var(--error)"} />
-                    <text
-                        x="27"
-                        y="5"
-                        r="5"
-                        fill={"white"}
-                        fontSize={"7.5"}
-                        fontWeight={600}
-                        text-anchor="middle"
-                        alignmentBaseline={"middle"}
-                        dominant-baseline={"middle"}>
-                        {count < 10 ? count : "9+"}
-                    </text>
-                </>
-            )}
-        </svg>
-    );
-}
-
-const ServersBase = styled.div`
-    width: 58px;
-    height: 100%;
-    padding-inline-start: 2px;
-
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-
-    ${isTouchscreenDevice &&
-    css`
-        padding-bottom: 50px;
-    `}
-`;
-
-const ServerList = styled.div`
-    flex-grow: 1;
-    display: flex;
-    overflow-y: scroll;
-    padding-bottom: 20px;
-    flex-direction: column;
-
-    scrollbar-width: none;
-
-    > :first-child > svg {
-        margin: 6px 0 6px 4px;
-    }
-
-    &::-webkit-scrollbar {
-        width: 0px;
-    }
-`;
-
-const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
-    height: 54px;
-    display: flex;
-    align-items: center;
-
-    //transition: 0.2s ease height;
-
-    :focus {
-        outline: 3px solid blue;
-    }
-
-    > div {
-        height: 42px;
-        padding-inline-start: 6px;
-
-        display: grid;
-        place-items: center;
-
-        border-start-start-radius: 50%;
-        border-end-start-radius: 50%;
-
-        &:active {
-            transform: translateY(1px);
-        }
-
-        ${(props) =>
-            props.active &&
-            css`
-                &:active {
-                    transform: none;
-                }
-            `}
-    }
-
-    > span {
-        width: 0;
-        display: relative;
-
-        ${(props) =>
-            !props.active &&
-            css`
-                display: none;
-            `}
-
-        svg {
-            margin-top: 5px;
-            pointer-events: none;
-        }
-    }
-
-    ${(props) =>
-        (!props.active || props.home) &&
-        css`
-            cursor: pointer;
-        `}
-`;
-
-const ServerCircle = styled.div`
-    width: 54px;
-    height: 54px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-
-    .circle {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(--primary-background);
-        border-radius: 50%;
-        height: 42px;
-        width: 42px;
-        transition: background-color 0.1s ease-in;
-        cursor: pointer;
-
-        > div svg {
-            color: var(--accent);
-        }
-
-        &:active {
-            transform: translateY(1px);
-        }
-    }
-`;
-
-const SettingsButton = styled.div`
-    width: 50px;
-    height: 56px;
-    display: grid;
-    place-items: center;
-`;
-
-function Swoosh() {
-    const sidebarOpen = useApplicationState().layout.getSectionState(
-        SIDEBAR_CHANNELS,
-        true,
-    );
-    const fill = sidebarOpen
-        ? "var(--sidebar-active)"
-        : "var(--primary-background)";
-
-    return (
-        <span>
-            <svg
-                width="56"
-                height="106"
-                viewBox="0 0 56 106"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
-                    fill={fill}
-                />
-                <path
-                    d="M27.0002 80C4.50023 80 56.0002 53 56.0002 53V106C56.0002 106 49.5002 80 27.0002 80Z"
-                    fill={fill}
-                />
-                <path
-                    d="M27.0003 26C4.50025 26 56 53 56 53L56.0003 0C56.0003 0 49.5003 26 27.0003 26Z"
-                    fill={fill}
-                />
-                <rect x="51" y="50" width="5" height="7" fill={fill} />
-            </svg>
-        </span>
-    );
-}
 
+/**
+ * Server list sidebar shim component
+ */
 export default observer(() => {
     const client = useClient();
     const state = useApplicationState();
-
     const { server: server_id } = useParams<{ server?: string }>();
-    const server = server_id ? client.servers.get(server_id) : undefined;
-    const servers = [...client.servers.values()];
-    const channels = [...client.channels.values()];
 
-    const history = useHistory();
+    const createServer = useCallback(
-    const path = useLocation().pathname;
+        () =>
-    const { openScreen } = useIntermediate();
+            modalController.push({
-
-    let alertCount = [...client.users.values()].filter(
-        (x) => x.relationship === "Incoming",
-    ).length;
-
-    const homeActive =
-        typeof server === "undefined" &&
-        !path.startsWith("/invite") &&
-        !path.startsWith("/discover");
-
-    return (
-        <ServersBase>
-            <ServerList>
-                <ConditionalLink
-                    active={homeActive}
-                    to={state.layout.getLastHomePath()}>
-                    <ServerEntry home active={homeActive}>
-                        <Swoosh />
-                        <div
-                            {...useTriggerEvents("Status")}
-                            onClick={() =>
-                                homeActive && history.push("/settings")
-                            }>
-                            <UserHover user={client.user ?? undefined}>
-                                <Icon
-                                    size={42}
-                                    unread={
-                                        alertCount > 0 ? "mention" : undefined
-                                    }
-                                    count={alertCount}>
-                                    <UserIcon
-                                        target={client.user ?? undefined}
-                                        size={32}
-                                        status
-                                        hover
-                                    />
-                                </Icon>
-                            </UserHover>
-                        </div>
-                    </ServerEntry>
-                </ConditionalLink>
-                {channels
-                    .filter(
-                        (x) =>
-                            ((x.channel_type === "DirectMessage" && x.active) ||
-                                x.channel_type === "Group") &&
-                            x.unread,
-                    )
-                    .map((x) => {
-                        const unreadCount = x.mentions.length;
-                        return (
-                            <Link to={`/channel/${x._id}`}>
-                                <ServerEntry
-                                    home
-                                    active={false}
-                                    {...useTriggerEvents("Menu", {
-                                        channel: x._id,
-                                        unread: true,
-                                    })}>
-                                    <div>
-                                        <Icon
-                                            size={42}
-                                            unread={
-                                                unreadCount > 0
-                                                    ? "mention"
-                                                    : "unread"
-                                            }
-                                            count={unreadCount}>
-                                            {x.channel_type ===
-                                            "DirectMessage" ? (
-                                                <UserIcon
-                                                    target={x.recipient}
-                                                    size={32}
-                                                    hover
-                                                />
-                                            ) : (
-                                                <ChannelIcon
-                                                    target={x}
-                                                    size={32}
-                                                    hover
-                                                />
-                                            )}
-                                        </Icon>
-                                    </div>
-                                </ServerEntry>
-                            </Link>
-                        );
-                    })}
-                <LineDivider />
-                {servers.map((server) => {
-                    const active = server._id === server_id;
-
-                    const isUnread = server.isUnread(state.notifications);
-                    const mentionCount = server.getMentions(
-                        state.notifications,
-                    ).length;
-
-                    return (
-                        <ConditionalLink
-                            key={server._id}
-                            active={active}
-                            to={state.layout.getServerPath(server._id)}>
-                            <ServerEntry
-                                active={active}
-                                {...useTriggerEvents("Menu", {
-                                    server: server._id,
-                                    unread: isUnread,
-                                })}>
-                                <Swoosh />
-                                <Tooltip
-                                    content={server.name}
-                                    placement="right">
-                                    <Icon
-                                        size={42}
-                                        unread={
-                                            mentionCount > 0
-                                                ? "mention"
-                                                : isUnread
-                                                ? "unread"
-                                                : undefined
-                                        }
-                                        count={mentionCount}>
-                                        <ServerIcon size={32} target={server} />
-                                    </Icon>
-                                </Tooltip>
-                            </ServerEntry>
-                        </ConditionalLink>
-                    );
-                })}
-                {/*<LineDivider />*/}
-                <ServerCircle>
-                    <Tooltip content="Add a Server" placement="right">
-                        <div className="circle">
-                            <IconButton
-                                onClick={() =>
-                                    openScreen({
-                                        id: "special_input",
                 type: "create_server",
-                                    })
+            }),
-                                }>
+        [],
-                                <Plus size={32} />
+    );
-                            </IconButton>
-                        </div>
-                    </Tooltip>
-                </ServerCircle>
-                {!isTouchscreenDevice && (
-                    <ServerCircle>
-                        <Tooltip
-                            content={
-                                <div
-                                    style={{
-                                        display: "flex",
-                                        alignItems: "center",
-                                        gap: "6px",
-                                    }}>
-                                    <div>Discover Revolt</div>
-                                    <div
-                                        style={{
-                                            padding: "1px 5px",
-                                            fontSize: "9px",
-                                            background: "var(--status-busy)",
-                                            borderRadius: "60px",
-                                        }}>
-                                        NEW
-                                    </div>
-                                </div>
-                            }
-                            placement="right">
-                            <div className="circle">
-                                <IconButton>
-                                    <Link to="/discover">
-                                        <a>
-                                            <Compass size={32} />
-                                        </a>
-                                    </Link>
-                                </IconButton>
-                            </div>
-                        </Tooltip>
-                    </ServerCircle>
-                )}
-            </ServerList>
 
-            {!isTouchscreenDevice && (
+    return (
-                <Tooltip content={"Settings"} placement="right">
+        <ServerList
-                    <ServerCircle>
+            client={client}
-                        <Link to="/settings">
+            active={server_id}
-                            <div className="circle">
+            createServer={createServer}
-                                <IconButton>
+            permit={state.notifications}
-                                    <Cog
+            home={state.layout.getLastHomePath}
-                                        size={24}
+            servers={state.ordering.orderedServers}
-                                        fill="var(--secondary-foreground) !important"
+            reorder={state.ordering.reorderServer}
         />
-                                </IconButton>
-                            </div>
-                        </Link>
-                    </ServerCircle>
-                </Tooltip>
-            )}
-            <PaintCounter small />
-        </ServersBase>
     );
 });

src/components/navigation/left/ServerSidebar.tsx

@@ -1,12 +1,12 @@
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
-import { Server } from "revolt.js";
 import styled, { css } from "styled-components/macro";
 
-import { Ref } from "preact";
 import { useTriggerEvents } from "preact-context-menu";
 import { useEffect } from "preact/hooks";
 
+import { Category } from "@revoltchat/ui";
+
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { internalEmit } from "../../../lib/eventEmitter";
@@ -14,12 +14,9 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../../mobx/State";
 
-import { useClient } from "../../../context/revoltjs/RevoltClient";
+import { useClient } from "../../../controllers/client/ClientController";
-
 import CollapsibleSection from "../../common/CollapsibleSection";
 import ServerHeader from "../../common/ServerHeader";
-import Category from "../../ui/Category";
-
 import { ChannelButton } from "../items/ButtonItem";
 import ConnectionStatus from "../items/ConnectionStatus";
 
@@ -126,7 +123,7 @@ export default observer(() => {
                 <CollapsibleSection
                     id={`category_${category.id}`}
                     defaultValue
-                    summary={<Category text={category.title} />}>
+                    summary={<Category>{category.title}</Category>}>
                     {channels}
                 </CollapsibleSection>,
             );

src/components/navigation/right/MemberList.tsx

@@ -8,11 +8,7 @@ import { memo } from "preact/compat";
 
 import { internalEmit } from "../../../lib/eventEmitter";
 
-import {
+import { modalController } from "../../../controllers/modals/ModalController";
-    Screen,
-    useIntermediate,
-} from "../../../context/intermediate/Intermediate";
-
 import { UserButton } from "../items/ButtonItem";
 
 export type MemberListGroup = {
@@ -55,15 +51,7 @@ const NoOomfie = styled.div`
 `;
 
 const ItemContent = memo(
-    ({
+    ({ item, context }: { item: User; context: Channel }) => (
-        item,
-        context,
-        openScreen,
-    }: {
-        item: User;
-        context: Channel;
-        openScreen: (screen: Screen) => void;
-    }) => (
         <UserButton
             key={item._id}
             user={item}
@@ -77,13 +65,12 @@ const ItemContent = memo(
                         `<@${item._id}>`,
                         "mention",
                     );
-                } else
+                } else {
-                    [
+                    modalController.push({
-                        openScreen({
+                        type: "user_profile",
-                            id: "profile",
                         user_id: item._id,
-                        }),
+                    });
-                    ];
+                }
             }}
         />
     ),
@@ -96,8 +83,6 @@ export default function MemberList({
     entries: MemberListGroup[];
     context: Channel;
 }) {
-    const { openScreen } = useIntermediate();
-
     return (
         <GroupedVirtuoso
             groupCounts={entries.map((x) => x.users.length)}
@@ -114,7 +99,7 @@ export default function MemberList({
                         )}
                         {entry.type !== "no_offline" && (
                             <>
-                                {" - "}
+                                {" – "}
                                 {entry.users.length}
                             </>
                         )}
@@ -137,7 +122,8 @@ export default function MemberList({
                                 server, see issue{" "}
                                 <a
                                     href="https://github.com/revoltchat/delta/issues/128"
-                                    target="_blank">
+                                    target="_blank"
+                                    rel="noreferrer">
                                     #128
                                 </a>{" "}
                                 for when this will be resolved.
@@ -158,11 +144,7 @@ export default function MemberList({
 
                 return (
                     <div>
-                        <ItemContent
+                        <ItemContent item={item} context={context} />
-                            item={item}
-                            context={context}
-                            openScreen={openScreen}
-                        />
                     </div>
                 );
             }}

src/components/navigation/right/MemberSidebar.tsx

@@ -4,14 +4,12 @@ import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
 import { Channel, Server, User, API } from "revolt.js";
 
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useLayoutEffect, useState } from "preact/hooks";
 
 import {
-    ClientStatus,
+    useSession,
-    StatusContext,
     useClient,
-} from "../../../context/revoltjs/RevoltClient";
+} from "../../../controllers/client/ClientController";
-
 import { GenericSidebarBase } from "../SidebarBase";
 import MemberList, { MemberListGroup } from "./MemberList";
 
@@ -182,7 +180,7 @@ export const GroupMemberSidebar = observer(
 );
 
 // ! FIXME: this is temporary code until we get lazy guilds like subscriptions
-const FETCHED: Set<String> = new Set();
+const FETCHED: Set<string> = new Set();
 
 export function resetMemberSidebarFetched() {
     FETCHED.clear();
@@ -205,18 +203,18 @@ function shouldSkipOffline(id: string) {
 
 export const ServerMemberSidebar = observer(
     ({ channel }: { channel: Channel }) => {
-        const client = useClient();
+        const session = useSession()!;
-        const status = useContext(StatusContext);
+        const client = session.client!;
 
         useEffect(() => {
             const server_id = channel.server_id!;
-            if (status === ClientStatus.ONLINE && !FETCHED.has(server_id)) {
+            if (session.state === "Online" && !FETCHED.has(server_id)) {
                 FETCHED.add(server_id);
                 channel
                     .server!.syncMembers(shouldSkipOffline(server_id))
                     .catch(() => FETCHED.delete(server_id));
             }
-        }, [status, channel]);
+        }, [session.state, channel]);
 
         const entries = useEntries(
             channel,

src/components/navigation/right/Search.tsx

@@ -5,14 +5,10 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { useClient } from "../../../context/revoltjs/RevoltClient";
+import { Button, Category, Error, InputBox, Preloader } from "@revoltchat/ui";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import Message from "../../common/messaging/Message";
-import Button from "../../ui/Button";
-import InputBox from "../../ui/InputBox";
-import Overline from "../../ui/Overline";
-import Preloader from "../../ui/Preloader";
-
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 
 type SearchState =
@@ -102,23 +98,25 @@ export function SearchSidebar({ close }: Props) {
         <GenericSidebarBase data-scroll-offset="with-padding">
             <GenericSidebarList>
                 <SearchBase>
-                    <Overline type="accent" block hover>
+                    <Category>
-                        <a onClick={close}>« back to members</a>
+                        <Error
-                    </Overline>
+                            error={<a onClick={close}>« back to members</a>}
-                    <Overline type="subtle" block>
+                        />
+                    </Category>
+                    <Category>
                         <Text id="app.main.channel.search.title" />
-                    </Overline>
+                    </Category>
                     <InputBox
                         value={query}
                         onKeyDown={(e) => e.key === "Enter" && search()}
                         onChange={(e) => setQuery(e.currentTarget.value)}
                     />
-                    <div class="sort">
+                    <div className="sort">
                         {["Latest", "Oldest", "Relevance"].map((key) => (
                             <Button
                                 key={key}
                                 compact
-                                accent={sort === key}
+                                palette={sort === key ? "accent" : "primary"}
                                 onClick={() => setSort(key as Sort)}>
                                 <Text
                                     id={`app.main.channel.search.sort.${key.toLowerCase()}`}
@@ -128,7 +126,7 @@ export function SearchSidebar({ close }: Props) {
                     </div>
                     {state.type === "loading" && <Preloader type="ring" />}
                     {state.type === "results" && (
-                        <div class="list">
+                        <div className="list">
                             {state.results.map((message) => {
                                 let href = "";
                                 if (channel?.channel_type === "TextChannel") {
@@ -139,7 +137,7 @@ export function SearchSidebar({ close }: Props) {
 
                                 return (
                                     <Link to={href} key={message._id}>
-                                        <div class="message">
+                                        <div className="message">
                                             <Message
                                                 message={message}
                                                 head

src/components/settings/AppearanceShims.tsx

@@ -1,261 +0,0 @@
-import { Brush } from "@styled-icons/boxicons-solid";
-import { observer } from "mobx-react-lite";
-import { Link } from "react-router-dom";
-// @ts-expect-error shade-blend-color does not have typings.
-import pSBC from "shade-blend-color";
-
-import { Text } from "preact-i18n";
-
-import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
-
-import { useApplicationState } from "../../mobx/State";
-
-import {
-    Fonts,
-    FONTS,
-    FONT_KEYS,
-    MonospaceFonts,
-    MONOSPACE_FONTS,
-    MONOSPACE_FONT_KEYS,
-} from "../../context/Theme";
-
-import Checkbox from "../ui/Checkbox";
-import ColourSwatches from "../ui/ColourSwatches";
-import ComboBox from "../ui/ComboBox";
-import Radio from "../ui/Radio";
-import CategoryButton from "../ui/fluent/CategoryButton";
-
-import { EmojiSelector } from "./appearance/EmojiSelector";
-import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
-
-/**
- * Component providing a way to switch the base theme being used.
- */
-export const ThemeBaseSelectorShim = observer(() => {
-    const theme = useApplicationState().settings.theme;
-    return (
-        <ThemeBaseSelector
-            value={theme.isModified() ? undefined : theme.getBase()}
-            setValue={(base) => {
-                theme.setBase(base);
-                theme.reset();
-            }}
-        />
-    );
-});
-
-/**
- * Component providing a link to the theme shop.
- * Only appears if experiment is enabled.
- * TODO: stabilise
- */
-export const ThemeShopShim = () => {
-    return (
-        <Link to="/discover/themes" replace>
-            <CategoryButton
-                icon={<Brush size={24} />}
-                action="chevron"
-                description={
-                    <Text id="app.settings.pages.appearance.discover.description" />
-                }
-                hover>
-                <Text id="app.settings.pages.appearance.discover.title" />
-            </CategoryButton>
-        </Link>
-    );
-};
-
-/**
- * Component providing a way to change current accent colour.
- */
-export const ThemeAccentShim = observer(() => {
-    const theme = useApplicationState().settings.theme;
-    return (
-        <>
-            <h3>
-                <Text id="app.settings.pages.appearance.accent_selector" />
-            </h3>
-            <ColourSwatches
-                value={theme.getVariable("accent")}
-                onChange={(colour) => {
-                    theme.setVariable("accent", colour as string);
-                    theme.setVariable("scrollbar-thumb", pSBC(-0.2, colour));
-                }}
-            />
-        </>
-    );
-});
-
-/**
- * Component providing a way to edit custom CSS.
- */
-export const ThemeCustomCSSShim = observer(() => {
-    const theme = useApplicationState().settings.theme;
-    return (
-        <>
-            <h3>
-                <Text id="app.settings.pages.appearance.custom_css" />
-            </h3>
-            <TextAreaAutoSize
-                maxRows={20}
-                minHeight={480}
-                code
-                value={theme.getCSS() ?? ""}
-                onChange={(ev) => theme.setCSS(ev.currentTarget.value)}
-            />
-        </>
-    );
-});
-
-/**
- * Component providing a way to switch between compact and normal message view.
- */
-export const DisplayCompactShim = () => {
-    // TODO: WIP feature
-    return (
-        <>
-            <h3>
-                <Text id="app.settings.pages.appearance.message_display" />
-            </h3>
-            <div /* className={styles.display} */>
-                <Radio
-                    description={
-                        <Text id="app.settings.pages.appearance.display.default_description" />
-                    }
-                    checked>
-                    <Text id="app.settings.pages.appearance.display.default" />
-                </Radio>
-                <Radio
-                    description={
-                        <Text id="app.settings.pages.appearance.display.compact_description" />
-                    }
-                    disabled>
-                    <Text id="app.settings.pages.appearance.display.compact" />
-                </Radio>
-            </div>
-        </>
-    );
-};
-
-/**
- * Component providing a way to change primary text font.
- */
-export const DisplayFontShim = observer(() => {
-    const theme = useApplicationState().settings.theme;
-    return (
-        <>
-            <h3>
-                <Text id="app.settings.pages.appearance.font" />
-            </h3>
-            <ComboBox
-                value={theme.getFont()}
-                onChange={(e) => theme.setFont(e.currentTarget.value as Fonts)}>
-                {FONT_KEYS.map((key) => (
-                    <option value={key} key={key}>
-                        {FONTS[key as keyof typeof FONTS].name}
-                    </option>
-                ))}
-            </ComboBox>
-        </>
-    );
-});
-
-/**
- * Component providing a way to change secondary, monospace text font.
- */
-export const DisplayMonospaceFontShim = observer(() => {
-    const theme = useApplicationState().settings.theme;
-    return (
-        <>
-            <h3>
-                <Text id="app.settings.pages.appearance.mono_font" />
-            </h3>
-            <ComboBox
-                value={theme.getMonospaceFont()}
-                onChange={(e) =>
-                    theme.setMonospaceFont(
-                        e.currentTarget.value as MonospaceFonts,
-                    )
-                }>
-                {MONOSPACE_FONT_KEYS.map((key) => (
-                    <option value={key} key={key}>
-                        {
-                            MONOSPACE_FONTS[key as keyof typeof MONOSPACE_FONTS]
-                                .name
-                        }
-                    </option>
-                ))}
-            </ComboBox>
-        </>
-    );
-});
-
-/**
- * Component providing a way to toggle font ligatures.
- */
-export const DisplayLigaturesShim = observer(() => {
-    const settings = useApplicationState().settings;
-    if (settings.theme.getFont() !== "Inter") return null;
-
-    return (
-        <>
-            <Checkbox
-                checked={settings.get("appearance:ligatures") ?? false}
-                onChange={(v) => settings.set("appearance:ligatures", v)}
-                description={
-                    <Text id="app.settings.pages.appearance.ligatures_desc" />
-                }>
-                <Text id="app.settings.pages.appearance.ligatures" />
-            </Checkbox>
-        </>
-    );
-});
-
-/**
- * Component providing a way to toggle seasonal themes.
- */
-export const DisplaySeasonalShim = observer(() => {
-    const settings = useApplicationState().settings;
-
-    return (
-        <Checkbox
-            checked={settings.get("appearance:seasonal") ?? true}
-            onChange={(v) => settings.set("appearance:seasonal", v)}
-            description={
-                <Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
-            }>
-            <Text id="app.settings.pages.appearance.theme_options.seasonal" />
-        </Checkbox>
-    );
-});
-
-/**
- * Component providing a way to toggle transparency effects.
- */
-export const DisplayTransparencyShim = observer(() => {
-    const settings = useApplicationState().settings;
-
-    return (
-        <Checkbox
-            checked={settings.get("appearance:transparency") ?? true}
-            onChange={(v) => settings.set("appearance:transparency", v)}
-            description={
-                <Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
-            }>
-            <Text id="app.settings.pages.appearance.theme_options.transparency" />
-        </Checkbox>
-    );
-});
-
-/**
- * Component providing a way to change emoji pack.
- */
-export const DisplayEmojiShim = observer(() => {
-    const settings = useApplicationState().settings;
-    return (
-        <EmojiSelector
-            value={settings.get("appearance:emoji")}
-            setValue={(v) => settings.set("appearance:emoji", v)}
-        />
-    );
-});

src/components/settings/account/AccountManagement.tsx

@@ -0,0 +1,60 @@
+import { Block } from "@styled-icons/boxicons-regular";
+import { Trash } from "@styled-icons/boxicons-solid";
+
+import { Text } from "preact-i18n";
+
+import { CategoryButton } from "@revoltchat/ui";
+
+import {
+    clientController,
+    useClient,
+} from "../../../controllers/client/ClientController";
+import { modalController } from "../../../controllers/modals/ModalController";
+
+export default function AccountManagement() {
+    const client = useClient();
+
+    const callback = (route: "disable" | "delete") => () =>
+        modalController.mfaFlow(client).then(
+            (ticket) =>
+                ticket &&
+                client.api
+                    .post(`/auth/account/${route}`, undefined, {
+                        headers: {
+                            "X-MFA-Ticket": ticket.token,
+                        },
+                    })
+                    .then(clientController.logoutCurrent),
+        );
+
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.account.manage.title" />
+            </h3>
+
+            <h5>
+                <Text id="app.settings.pages.account.manage.description" />
+            </h5>
+            <CategoryButton
+                icon={<Block size={24} color="var(--error)" />}
+                description={
+                    "Disable your account. You won't be able to access it unless you contact support."
+                }
+                action="chevron"
+                onClick={callback("disable")}>
+                <Text id="app.settings.pages.account.manage.disable" />
+            </CategoryButton>
+
+            <CategoryButton
+                icon={<Trash size={24} color="var(--error)" />}
+                description={
+                    "Your account will be queued for deletion, a confirmation email will be sent."
+                }
+                action="chevron"
+                onClick={callback("delete")}>
+                <Text id="app.settings.pages.account.manage.delete" />
+            </CategoryButton>
+        </>
+    );
+}

src/components/settings/account/EditAccount.tsx

@@ -0,0 +1,72 @@
+import { At } from "@styled-icons/boxicons-regular";
+import { Envelope, Key, Pencil } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+
+import { Text } from "preact-i18n";
+import { useEffect, useState } from "preact/hooks";
+
+import {
+    AccountDetail,
+    CategoryButton,
+    Column,
+    HiddenValue,
+} from "@revoltchat/ui";
+
+import { useSession } from "../../../controllers/client/ClientController";
+import { modalController } from "../../../controllers/modals/ModalController";
+
+export default observer(() => {
+    const session = useSession()!;
+    const client = session.client!;
+
+    const [email, setEmail] = useState("...");
+
+    useEffect(() => {
+        if (email === "..." && session.state === "Online") {
+            client.api
+                .get("/auth/account/")
+                .then((account) => setEmail(account.email));
+        }
+    }, [client, email, session.state]);
+
+    return (
+        <>
+            <Column group>
+                <AccountDetail user={client.user!} />
+            </Column>
+
+            {(
+                [
+                    ["username", client.user!.username, At],
+                    ["email", email, Envelope],
+                    ["password", "•••••••••", Key],
+                ] as const
+            ).map(([field, value, Icon]) => (
+                <CategoryButton
+                    key={field}
+                    icon={<Icon size={24} />}
+                    description={
+                        field === "email" ? (
+                            <HiddenValue
+                                value={value}
+                                placeholder={"•••••••••••@••••••.•••"}
+                            />
+                        ) : (
+                            value
+                        )
+                    }
+                    account
+                    action={<Pencil size={20} />}
+                    onClick={() =>
+                        modalController.push({
+                            type: "modify_account",
+                            client,
+                            field,
+                        })
+                    }>
+                    <Text id={`login.${field}`} />
+                </CategoryButton>
+            ))}
+        </>
+    );
+});

src/components/settings/account/MultiFactorAuthentication.tsx

@@ -0,0 +1,218 @@
+import { ListOl } from "@styled-icons/boxicons-regular";
+import { Lock } from "@styled-icons/boxicons-solid";
+import { API } from "revolt.js";
+
+import { Text } from "preact-i18n";
+import { useCallback, useEffect, useState } from "preact/hooks";
+
+import { Category, CategoryButton, Error, Tip } from "@revoltchat/ui";
+
+import { useSession } from "../../../controllers/client/ClientController";
+import { takeError } from "../../../controllers/client/jsx/error";
+import { modalController } from "../../../controllers/modals/ModalController";
+
+/**
+ * Temporary helper function for Axios config
+ * @param token Token
+ * @returns Headers
+ */
+export function toConfig(token: string) {
+    return {
+        headers: {
+            "X-MFA-Ticket": token,
+        },
+    };
+}
+
+/**
+ * Component for configuring MFA on an account.
+ */
+export default function MultiFactorAuthentication() {
+    // Pull in prerequisites
+    const session = useSession()!;
+    const client = session.client!;
+
+    // Keep track of MFA state
+    const [mfa, setMFA] = useState<API.MultiFactorStatus>();
+    const [error, setError] = useState<string>();
+
+    // Fetch the current MFA status on account
+    useEffect(() => {
+        if (!mfa && session.state === "Online") {
+            client!.api
+                .get("/auth/mfa/")
+                .then(setMFA)
+                .catch((err) => setError(takeError(err)));
+        }
+    }, [mfa, client, session.state]);
+
+    // Action called when recovery code button is pressed
+    const recoveryAction = useCallback(async () => {
+        // Perform MFA flow first
+        const ticket = await modalController.mfaFlow(client);
+
+        // Check whether action was cancelled
+        if (typeof ticket === "undefined") {
+            return;
+        }
+
+        // Decide whether to generate or fetch.
+        let codes;
+        if (mfa!.recovery_active) {
+            // Fetch existing recovery codes
+            codes = await client.api.post(
+                "/auth/mfa/recovery",
+                undefined,
+                toConfig(ticket.token),
+            );
+        } else {
+            // Generate new recovery codes
+            codes = await client.api.patch(
+                "/auth/mfa/recovery",
+                undefined,
+                toConfig(ticket.token),
+            );
+
+            setMFA({
+                ...mfa!,
+                recovery_active: true,
+            });
+        }
+
+        // Display the codes to the user
+        modalController.push({
+            type: "mfa_recovery",
+            client,
+            codes,
+        });
+    }, [mfa]);
+
+    // Action called when TOTP button is pressed
+    const totpAction = useCallback(async () => {
+        // Perform MFA flow first
+        const ticket = await modalController.mfaFlow(client);
+
+        // Check whether action was cancelled
+        if (typeof ticket === "undefined") {
+            return;
+        }
+
+        // Decide whether to disable or enable.
+        if (mfa!.totp_mfa) {
+            // Disable TOTP authentication
+            await client.api.delete("/auth/mfa/totp", toConfig(ticket.token));
+
+            setMFA({
+                ...mfa!,
+                totp_mfa: false,
+            });
+        } else {
+            // Generate a TOTP secret
+            const { secret } = await client.api.post(
+                "/auth/mfa/totp",
+                undefined,
+                toConfig(ticket.token),
+            );
+
+            // Open secret modal
+            let success;
+            while (!success) {
+                try {
+                    // Make the user generator a token
+                    const totp_code = await modalController.mfaEnableTOTP(
+                        secret,
+                        client.user!.username,
+                    );
+
+                    if (totp_code) {
+                        // Check whether it is valid
+                        await client.api.put(
+                            "/auth/mfa/totp",
+                            {
+                                totp_code,
+                            },
+                            toConfig(ticket.token),
+                        );
+
+                        // Mark as successful and activated
+                        success = true;
+
+                        setMFA({
+                            ...mfa!,
+                            totp_mfa: true,
+                        });
+                    } else {
+                        break;
+                    }
+                } catch (err) {}
+            }
+        }
+    }, [mfa]);
+
+    const mfaActive = !!mfa?.totp_mfa;
+
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.account.2fa.title" />
+            </h3>
+            <h5>
+                <Text id="app.settings.pages.account.2fa.description" />
+            </h5>
+
+            {error && (
+                <Category compact>
+                    <Error error={error} />
+                </Category>
+            )}
+
+            <CategoryButton
+                icon={<ListOl size={24} />}
+                description={
+                    <Text
+                        id={`app.settings.pages.account.2fa.${
+                            mfa?.recovery_active
+                                ? "view_recovery"
+                                : "generate_recovery"
+                        }_long`}
+                    />
+                }
+                disabled={!mfa}
+                onClick={recoveryAction}>
+                <Text
+                    id={`app.settings.pages.account.2fa.${
+                        mfa?.recovery_active
+                            ? "view_recovery"
+                            : "generate_recovery"
+                    }`}
+                />
+            </CategoryButton>
+            <CategoryButton
+                icon={
+                    <Lock
+                        size={24}
+                        color={!mfa?.totp_mfa ? "var(--error)" : undefined}
+                    />
+                }
+                description={"Set up time-based one-time password."}
+                disabled={!mfa || (!mfa.recovery_active && !mfa.totp_mfa)}
+                onClick={totpAction}>
+                <Text
+                    id={`app.settings.pages.account.2fa.${
+                        mfa?.totp_mfa ? "remove" : "add"
+                    }_auth`}
+                />
+            </CategoryButton>
+
+            {mfa && (
+                <Tip palette={mfaActive ? "primary" : "error"}>
+                    <Text
+                        id={`app.settings.pages.account.2fa.two_factor_${
+                            mfaActive ? "on" : "off"
+                        }`}
+                    />
+                </Tip>
+            )}
+        </>
+    );
+}

src/components/settings/appearance/AdvancedOptions.tsx

@@ -0,0 +1,63 @@
+import { observer } from "mobx-react-lite";
+
+import { Text } from "preact-i18n";
+
+import { ObservedInputElement } from "@revoltchat/ui";
+
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
+
+import { useApplicationState } from "../../../mobx/State";
+
+import {
+    MonospaceFonts,
+    MONOSPACE_FONTS,
+    MONOSPACE_FONT_KEYS,
+} from "../../../context/Theme";
+
+/**
+ * ! LEGACY
+ * Component providing a way to edit custom CSS.
+ */
+export const ShimThemeCustomCSS = observer(() => {
+    const theme = useApplicationState().settings.theme;
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.appearance.custom_css" />
+            </h3>
+            <TextAreaAutoSize
+                maxRows={20}
+                minHeight={480}
+                code
+                value={theme.getCSS() ?? ""}
+                onChange={(ev) => theme.setCSS(ev.currentTarget.value)}
+            />
+        </>
+    );
+});
+
+export default function AdvancedOptions() {
+    const settings = useApplicationState().settings;
+    return (
+        <>
+            {/** Combo box of available monospaced fonts */}
+            <h3>
+                <Text id="app.settings.pages.appearance.mono_font" />
+            </h3>
+            <ObservedInputElement
+                type="combo"
+                value={() => settings.theme.getMonospaceFont()}
+                onChange={(value) =>
+                    settings.theme.setMonospaceFont(value as MonospaceFonts)
+                }
+                options={MONOSPACE_FONT_KEYS.map((value) => ({
+                    value,
+                    name: MONOSPACE_FONTS[value as keyof typeof MONOSPACE_FONTS]
+                        .name,
+                }))}
+            />
+            {/** Custom CSS */}
+            <ShimThemeCustomCSS />
+        </>
+    );
+}

src/components/settings/appearance/AppearanceOptions.tsx

@@ -0,0 +1,63 @@
+import { Text } from "preact-i18n";
+
+import { Column, ObservedInputElement } from "@revoltchat/ui";
+
+import { useApplicationState } from "../../../mobx/State";
+
+export default function AppearanceOptions() {
+    const settings = useApplicationState().settings;
+
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.appearance.appearance_options.title" />
+            </h3>
+            {/* Option to toggle "send message" button on desktop. */}
+            <ObservedInputElement
+                type="checkbox"
+                value={() =>
+                    settings.get("appearance:show_send_button") ?? false
+                }
+                onChange={(v) => settings.set("appearance:show_send_button", v)}
+                title={
+                    <Text id="app.settings.pages.appearance.appearance_options.show_send" />
+                }
+                description={
+                    <Text id="app.settings.pages.appearance.appearance_options.show_send_desc" />
+                }
+            />
+            <hr />
+            <h3>
+                <Text id="app.settings.pages.appearance.theme_options.title" />
+            </h3>
+            <Column>
+                {/* Option to toggle transparency effects in-app. */}
+                <ObservedInputElement
+                    type="checkbox"
+                    value={() =>
+                        settings.get("appearance:transparency") ?? true
+                    }
+                    onChange={(v) => settings.set("appearance:transparency", v)}
+                    title={
+                        <Text id="app.settings.pages.appearance.theme_options.transparency" />
+                    }
+                    description={
+                        <Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
+                    }
+                />
+                {/* Option to toggle seasonal effects. */}
+                <ObservedInputElement
+                    type="checkbox"
+                    value={() => settings.get("appearance:seasonal") ?? true}
+                    onChange={(v) => settings.set("appearance:seasonal", v)}
+                    title={
+                        <Text id="app.settings.pages.appearance.theme_options.seasonal" />
+                    }
+                    description={
+                        <Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
+                    }
+                />
+            </Column>
+        </>
+    );
+}

src/components/settings/appearance/ChatOptions.tsx

@@ -0,0 +1,70 @@
+import { observer } from "mobx-react-lite";
+
+import { Text } from "preact-i18n";
+
+import { Column, ObservedInputElement } from "@revoltchat/ui";
+
+import { useApplicationState } from "../../../mobx/State";
+
+import { FONTS, Fonts, FONT_KEYS } from "../../../context/Theme";
+
+import { EmojiSelector } from "./legacy/EmojiSelector";
+
+/**
+ * ! LEGACY
+ * Component providing a way to change emoji pack.
+ */
+export const ShimDisplayEmoji = observer(() => {
+    const settings = useApplicationState().settings;
+    return (
+        <EmojiSelector
+            value={settings.get("appearance:emoji")}
+            setValue={(v) => settings.set("appearance:emoji", v)}
+        />
+    );
+});
+
+export default observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <>
+            <Column>
+                {/* Combo box of available fonts. */}
+                <h3>
+                    <Text id="app.settings.pages.appearance.font" />
+                </h3>
+                <ObservedInputElement
+                    type="combo"
+                    value={() => settings.theme.getFont()}
+                    onChange={(value) => settings.theme.setFont(value as Fonts)}
+                    options={FONT_KEYS.map((value) => ({
+                        value,
+                        name: FONTS[value as keyof typeof FONTS].name,
+                    }))}
+                />
+                {/* Option to toggle liagures for supported fonts. */}
+                {settings.theme.getFont() === "Inter" && (
+                    <ObservedInputElement
+                        type="checkbox"
+                        value={() =>
+                            settings.get("appearance:ligatures") ?? true
+                        }
+                        onChange={(v) =>
+                            settings.set("appearance:ligatures", v)
+                        }
+                        title={
+                            <Text id="app.settings.pages.appearance.ligatures" />
+                        }
+                        description={
+                            <Text id="app.settings.pages.appearance.ligatures_desc" />
+                        }
+                    />
+                )}
+            </Column>
+            <hr />
+            {/* Emoji pack selector */}
+            <ShimDisplayEmoji />
+        </>
+    );
+});

src/components/settings/appearance/ThemeOverrides.tsx

@@ -1,170 +1,11 @@
-import { Pencil } from "@styled-icons/boxicons-regular";
+import Overrides from "./legacy/ThemeOverrides";
-import { observer } from "mobx-react-lite";
+import ThemeTools from "./legacy/ThemeTools";
-import styled from "styled-components/macro";
-
-import { useDebounceCallback } from "../../../lib/debounce";
-
-import { useApplicationState } from "../../../mobx/State";
-
-import { Variables } from "../../../context/Theme";
-
-import InputBox from "../../ui/InputBox";
-
-const Container = styled.div`
-    row-gap: 8px;
-    display: grid;
-    column-gap: 16px;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    margin-bottom: 20px;
-
-    .entry {
-        padding: 12px;
-        margin-top: 8px;
-        border: 1px solid black;
-        border-radius: var(--border-radius);
-
-        span {
-            flex: 1;
-            display: block;
-            font-weight: 600;
-            font-size: 0.875rem;
-            margin-bottom: 8px;
-            text-transform: capitalize;
-
-            background: inherit;
-            background-clip: text;
-            -webkit-background-clip: text;
-        }
-
-        .override {
-            gap: 8px;
-            display: flex;
-
-            .picker {
-                width: 38px;
-                height: 38px;
-                display: grid;
-                cursor: pointer;
-                place-items: center;
-                border-radius: var(--border-radius);
-                background: var(--primary-background);
-            }
-
-            input[type="text"] {
-                width: 0;
-                min-width: 0;
-                flex-grow: 1;
-            }
-        }
-
-        .input {
-            width: 0;
-            height: 0;
-            position: relative;
-
-            input {
-                opacity: 0;
-                border: none;
-                display: block;
-                cursor: pointer;
-                position: relative;
-
-                top: 48px;
-            }
-        }
-    }
-`;
-
-export default observer(() => {
-    const theme = useApplicationState().settings.theme;
-    const setVariable = useDebounceCallback(
-        (data) => {
-            const { key, value } = data as { key: Variables; value: string };
-            theme.setVariable(key, value);
-        },
-        [theme],
-        100,
-    );
 
+export default function ThemeOverrides() {
     return (
-        <Container>
+        <>
-            {(
+            <ThemeTools />
-                [
+            <Overrides />
-                    "accent",
+        </>
-                    "background",
-                    "foreground",
-                    "primary-background",
-                    "primary-header",
-                    "secondary-background",
-                    "secondary-foreground",
-                    "secondary-header",
-                    "tertiary-background",
-                    "tertiary-foreground",
-                    "block",
-                    "message-box",
-                    "mention",
-                    "scrollbar-thumb",
-                    "scrollbar-track",
-                    "status-online",
-                    "status-away",
-                    "status-busy",
-                    "status-streaming",
-                    "status-invisible",
-                    "success",
-                    "warning",
-                    "error",
-                    "hover",
-                ] as const
-            ).map((key) => (
-                <div
-                    class="entry"
-                    key={key}
-                    style={{ backgroundColor: theme.getVariable(key) }}>
-                    <div class="input">
-                        <input
-                            type="color"
-                            value={theme.getVariable(key)}
-                            onChange={(el) =>
-                                setVariable({
-                                    key,
-                                    value: el.currentTarget.value,
-                                })
-                            }
-                        />
-                    </div>
-                    <span
-                        style={{
-                            color: theme.getContrastingVariable(
-                                key,
-                                theme.getVariable("primary-background"),
-                            ),
-                        }}>
-                        {key}
-                    </span>
-                    <div class="override">
-                        <div
-                            class="picker"
-                            onClick={(e) =>
-                                e.currentTarget.parentElement?.parentElement
-                                    ?.querySelector("input")
-                                    ?.click()
-                            }>
-                            <Pencil size={24} />
-                        </div>
-                        <InputBox
-                            type="text"
-                            class="text"
-                            value={theme.getVariable(key)}
-                            onChange={(el) =>
-                                setVariable({
-                                    key,
-                                    value: el.currentTarget.value,
-                                })
-                            }
-                        />
-                    </div>
-                </div>
-            ))}
-        </Container>
     );
-});
+}

src/components/settings/appearance/ThemeSelection.tsx

@@ -0,0 +1,64 @@
+import { Brush } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
+import { Link } from "react-router-dom";
+// @ts-expect-error shade-blend-color does not have typings.
+import pSBC from "shade-blend-color";
+
+import { Text } from "preact-i18n";
+
+import { CategoryButton, ObservedInputElement } from "@revoltchat/ui";
+
+import { useApplicationState } from "../../../mobx/State";
+
+import { ThemeBaseSelector } from "./legacy/ThemeBaseSelector";
+
+/**
+ * ! LEGACY
+ * Component providing a way to switch the base theme being used.
+ */
+export const ShimThemeBaseSelector = observer(() => {
+    const theme = useApplicationState().settings.theme;
+    return (
+        <ThemeBaseSelector
+            value={theme.isModified() ? undefined : theme.getBase()}
+            setValue={(base) => {
+                theme.setBase(base);
+                theme.reset();
+            }}
+        />
+    );
+});
+
+export default function ThemeSelection() {
+    const theme = useApplicationState().settings.theme;
+
+    return (
+        <>
+            {/** Allow users to change base theme */}
+            <ShimThemeBaseSelector />
+            {/** Provide a link to the theme shop */}
+            <Link to="/discover/themes" replace>
+                <CategoryButton
+                    icon={<Brush size={24} />}
+                    action="chevron"
+                    description={
+                        <Text id="app.settings.pages.appearance.discover.description" />
+                    }>
+                    <Text id="app.settings.pages.appearance.discover.title" />
+                </CategoryButton>
+            </Link>
+            <hr />
+            <h3>
+                <Text id="app.settings.pages.appearance.accent_selector" />
+            </h3>
+            <ObservedInputElement
+                type="colour"
+                value={theme.getVariable("accent")}
+                onChange={(colour) => {
+                    theme.setVariable("accent", colour as string);
+                    theme.setVariable("scrollbar-thumb", pSBC(-0.2, colour));
+                }}
+            />
+        </>
+    );
+}

src/components/settings/appearance/legacy/EmojiSelector.tsx

@@ -2,11 +2,12 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import { EmojiPack } from "../../common/Emoji";
+import mutantSVG from "./assets/mutant_emoji.svg";
-import mutantSVG from "./mutant_emoji.svg";
+import notoSVG from "./assets/noto_emoji.svg";
-import notoSVG from "./noto_emoji.svg";
+import openmojiSVG from "./assets/openmoji_emoji.svg";
-import openmojiSVG from "./openmoji_emoji.svg";
+import twemojiSVG from "./assets/twemoji_emoji.svg";
-import twemojiSVG from "./twemoji_emoji.svg";
+
+import { EmojiPack } from "../../../common/Emoji";
 
 const Container = styled.div`
     gap: 12px;
@@ -87,10 +88,10 @@ export function EmojiSelector({ value, setValue }: Props) {
                 <Text id="app.settings.pages.appearance.emoji_pack" />
             </h3>
             <Container>
-                <div class="row">
+                <div className="row">
                     <div>
                         <div
-                            class="button"
+                            className="button"
                             onClick={() => setValue("mutant")}
                             data-active={!value || value === "mutant"}>
                             <img
@@ -112,7 +113,7 @@ export function EmojiSelector({ value, setValue }: Props) {
                     </div>
                     <div>
                         <div
-                            class="button"
+                            className="button"
                             onClick={() => setValue("twemoji")}
                             data-active={value === "twemoji"}>
                             <img
@@ -125,10 +126,10 @@ export function EmojiSelector({ value, setValue }: Props) {
                         <h4>Twemoji</h4>
                     </div>
                 </div>
-                <div class="row">
+                <div className="row">
                     <div>
                         <div
-                            class="button"
+                            className="button"
                             onClick={() => setValue("openmoji")}
                             data-active={value === "openmoji"}>
                             <img
@@ -142,7 +143,7 @@ export function EmojiSelector({ value, setValue }: Props) {
                     </div>
                     <div>
                         <div
-                            class="button"
+                            className="button"
                             onClick={() => setValue("noto")}
                             data-active={value === "noto"}>
                             <img

src/components/settings/appearance/legacy/README.md

@@ -0,0 +1 @@
+These components need to be ported to @revoltchat/ui.

src/components/settings/appearance/legacy/ThemeBaseSelector.tsx

@@ -2,8 +2,8 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import darkSVG from "./dark.svg";
+import darkSVG from "./assets/dark.svg";
-import lightSVG from "./light.svg";
+import lightSVG from "./assets/light.svg";
 
 const List = styled.div`
     gap: 8px;

src/components/settings/appearance/legacy/ThemeOverrides.tsx

@@ -0,0 +1,170 @@
+import { Pencil } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import styled from "styled-components/macro";
+
+import { InputBox } from "@revoltchat/ui";
+
+import { useDebounceCallback } from "../../../../lib/debounce";
+
+import { useApplicationState } from "../../../../mobx/State";
+
+import { Variables } from "../../../../context/Theme";
+
+const Container = styled.div`
+    row-gap: 8px;
+    display: grid;
+    column-gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    margin-bottom: 20px;
+
+    .entry {
+        padding: 12px;
+        margin-top: 8px;
+        border: 1px solid black;
+        border-radius: var(--border-radius);
+
+        span {
+            flex: 1;
+            display: block;
+            font-weight: 600;
+            font-size: 0.875rem;
+            margin-bottom: 8px;
+            text-transform: capitalize;
+
+            background: inherit;
+            background-clip: text;
+            -webkit-background-clip: text;
+        }
+
+        .override {
+            gap: 8px;
+            display: flex;
+
+            .picker {
+                width: 38px;
+                height: 38px;
+                display: grid;
+                cursor: pointer;
+                place-items: center;
+                border-radius: var(--border-radius);
+                background: var(--primary-background);
+            }
+
+            input[type="text"] {
+                width: 0;
+                min-width: 0;
+                flex-grow: 1;
+            }
+        }
+
+        .input {
+            width: 0;
+            height: 0;
+            position: relative;
+
+            input {
+                opacity: 0;
+                border: none;
+                display: block;
+                cursor: pointer;
+                position: relative;
+
+                top: 48px;
+            }
+        }
+    }
+`;
+
+export default observer(() => {
+    const theme = useApplicationState().settings.theme;
+    const setVariable = useDebounceCallback(
+        (data) => {
+            const { key, value } = data as { key: Variables; value: string };
+            theme.setVariable(key, value);
+        },
+        [theme],
+        100,
+    );
+
+    return (
+        <Container>
+            {(
+                [
+                    "accent",
+                    "background",
+                    "foreground",
+                    "primary-background",
+                    "primary-header",
+                    "secondary-background",
+                    "secondary-foreground",
+                    "secondary-header",
+                    "tertiary-background",
+                    "tertiary-foreground",
+                    "block",
+                    "message-box",
+                    "mention",
+                    "scrollbar-thumb",
+                    "scrollbar-track",
+                    "status-online",
+                    "status-away",
+                    "status-busy",
+                    "status-streaming",
+                    "status-invisible",
+                    "success",
+                    "warning",
+                    "error",
+                    "hover",
+                ] as const
+            ).map((key) => (
+                <div
+                    className="entry"
+                    key={key}
+                    style={{ backgroundColor: theme.getVariable(key) }}>
+                    <div className="input">
+                        <input
+                            type="color"
+                            value={theme.getVariable(key)}
+                            onChange={(el) =>
+                                setVariable({
+                                    key,
+                                    value: el.currentTarget.value,
+                                })
+                            }
+                        />
+                    </div>
+                    <span
+                        style={{
+                            color: theme.getContrastingVariable(
+                                key,
+                                theme.getVariable("primary-background"),
+                            ),
+                        }}>
+                        {key}
+                    </span>
+                    <div className="override">
+                        <div
+                            className="picker"
+                            onClick={(e) =>
+                                e.currentTarget.parentElement?.parentElement
+                                    ?.querySelector("input")
+                                    ?.click()
+                            }>
+                            <Pencil size={24} />
+                        </div>
+                        <InputBox
+                            type="text"
+                            className="text"
+                            value={theme.getVariable(key)}
+                            onChange={(el) =>
+                                setVariable({
+                                    key,
+                                    value: el.currentTarget.value,
+                                })
+                            }
+                        />
+                    </div>
+                </div>
+            ))}
+        </Container>
+    );
+});

src/components/settings/appearance/legacy/ThemeTools.tsx

@@ -3,12 +3,12 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import { useApplicationState } from "../../../mobx/State";
+import { Button } from "@revoltchat/ui";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useApplicationState } from "../../../../mobx/State";
 
-import Tooltip from "../../common/Tooltip";
+import { modalController } from "../../../../controllers/modals/ModalController";
-import Button from "../../ui/Button";
+import Tooltip from "../../../common/Tooltip";
 
 const Actions = styled.div`
     gap: 8px;
@@ -37,7 +37,6 @@ const Actions = styled.div`
 `;
 
 export default function ThemeTools() {
-    const { writeClipboard, openScreen } = useIntermediate();
     const theme = useApplicationState().settings.theme;
 
     return (
@@ -46,13 +45,18 @@ export default function ThemeTools() {
                 content={
                     <Text id="app.settings.pages.appearance.reset_overrides" />
                 }>
-                <Button contrast iconbutton onClick={theme.reset}>
+                <Button
+                    palette="secondary"
+                    compact="icon"
+                    onClick={theme.reset}>
                     <Reset size={22} />
                 </Button>
             </Tooltip>
             <div
-                class="code"
+                className="code"
-                onClick={() => writeClipboard(JSON.stringify(theme))}>
+                onClick={() =>
+                    modalController.writeText(JSON.stringify(theme))
+                }>
                 <Tooltip content={<Text id="app.special.copy" />}>
                     {" "}
                     {JSON.stringify(theme)}
@@ -61,23 +65,15 @@ export default function ThemeTools() {
             <Tooltip
                 content={<Text id="app.settings.pages.appearance.import" />}>
                 <Button
-                    contrast
+                    palette="secondary"
-                    iconbutton
+                    compact="icon"
                     onClick={async () => {
                         try {
                             const text = await navigator.clipboard.readText();
                             theme.hydrate(JSON.parse(text));
                         } catch (err) {
-                            openScreen({
+                            modalController.push({
-                                id: "_input",
+                                type: "import_theme",
-                                question: (
-                                    <Text id="app.settings.pages.appearance.import_theme" />
-                                ),
-                                field: (
-                                    <Text id="app.settings.pages.appearance.theme_data" />
-                                ),
-                                callback: async (text) =>
-                                    theme.hydrate(JSON.parse(text)),
                             });
                         }
                     }}>

src/components/settings/customisation/EmojiUploader.tsx

@@ -0,0 +1,61 @@
+import { Server } from "revolt.js";
+
+import { useState } from "preact/hooks";
+
+import { Form } from "@revoltchat/ui";
+
+import { FileUploader } from "../../../controllers/client/jsx/legacy/FileUploads";
+
+interface Props {
+    server: Server;
+}
+
+export function EmojiUploader({ server }: Props) {
+    const [fileId, setFileId] = useState<string>();
+
+    return (
+        <>
+            <h3>Upload Emoji</h3>
+            <Form
+                schema={{
+                    name: "text",
+                    file: "custom",
+                }}
+                data={{
+                    name: {
+                        field: "Name",
+                        palette: "secondary",
+                    },
+                    file: {
+                        element: (
+                            <FileUploader
+                                style="icon"
+                                width={100}
+                                height={100}
+                                fileType="emojis"
+                                behaviour="upload"
+                                previewAfterUpload
+                                maxFileSize={500000}
+                                remove={async () => void setFileId("")}
+                                onUpload={async (id) => void setFileId(id)}
+                            />
+                        ),
+                    },
+                }}
+                submitBtn={{
+                    children: "Save",
+                    palette: "secondary",
+                    disabled: !fileId,
+                }}
+                onSubmit={async ({ name }) => {
+                    await server.client.api.put(`/custom/emoji/${fileId}`, {
+                        name,
+                        parent: { type: "Server", id: server._id },
+                    });
+
+                    setFileId("");
+                }}
+            />
+        </>
+    );
+}

src/components/settings/roles/PermissionSelect.tsx

@@ -7,8 +7,7 @@ import styled, { css } from "styled-components";
 import { Text } from "preact-i18n";
 import { useMemo } from "preact/hooks";
 
-import Checkbox from "../../ui/Checkbox";
+import { Checkbox, OverrideSwitch } from "@revoltchat/ui";
-import { OverrideSwitch } from "@revoltchat/ui";
 
 interface PermissionSelectProps {
     id: keyof typeof Permission;
@@ -69,13 +68,13 @@ export function PermissionSelect({
             }
 
             return "Neutral";
-        } else {
+        } 
             if (Long.fromNumber(value).and(permission).eq(permission)) {
                 return "Allow";
             }
 
             return "Neutral";
-        }
+        
     }, [value]);
 
     function onSwitch(state: State) {
@@ -118,12 +117,12 @@ export function PermissionSelect({
 
     return (
         <PermissionEntry disabled={disabled}>
-            <span class="title">
+            <span className="title">
                 <span>
                     <Text id={`permissions.${id}.t`}>{id}</Text>
                     {disabled && <Lock className="lock" size={14} />}
                 </span>
-                <span class="description">
+                <span className="description">
                     <Text id={`permissions.${id}.d`} />
                 </span>
             </span>
@@ -136,7 +135,7 @@ export function PermissionSelect({
             ) : (
                 <Checkbox
                     disabled={disabled}
-                    checked={state === "Allow"}
+                    value={state === "Allow"}
                     onChange={() =>
                         onChange(
                             Long.fromNumber(value, false)

src/components/ui/Banner.tsx

@@ -1,10 +0,0 @@
-import styled from "styled-components/macro";
-
-export default styled.div`
-    padding: 8px;
-    font-size: 14px;
-    text-align: center;
-
-    color: var(--accent);
-    background: var(--primary-background);
-`;

src/components/ui/Button.tsx

@@ -1,148 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-interface Props {
-    readonly compact?: boolean;
-    readonly accent?: boolean;
-    readonly contrast?: boolean;
-    readonly plain?: boolean;
-    readonly error?: boolean;
-    readonly gold?: boolean;
-    readonly iconbutton?: boolean;
-}
-
-export type ButtonProps = Props &
-    Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
-
-export default styled.button<Props>`
-    //z-index: 1;
-    display: flex;
-    height: 38px;
-    min-width: 96px;
-    align-items: center;
-    justify-content: center;
-    padding: 2px 16px;
-    font-size: 0.8125rem;
-    font-family: inherit;
-    font-weight: 500;
-    flex-shrink: 0;
-
-    transition: 0.2s ease opacity;
-    transition: 0.2s ease background-color;
-
-    background: var(--primary-background);
-    color: var(--foreground);
-
-    border-radius: var(--border-radius);
-    cursor: pointer;
-    border: none;
-
-    &:hover {
-        background: var(--secondary-header);
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        background: var(--primary-background);
-    }
-
-    &:active {
-        background: var(--secondary-background);
-    }
-
-    ${(props) =>
-        props.compact &&
-        css`
-            height: 32px !important;
-            padding: 2px 12px !important;
-            font-size: 13px;
-        `}
-
-    ${(props) =>
-        props.iconbutton &&
-        css`
-            height: 38px !important;
-            width: 38px !important;
-            min-width: unset !important;
-        `}
-
-    ${(props) =>
-        props.accent &&
-        css`
-            background: var(--accent) !important;
-        `}
-
-    ${(props) =>
-        props.plain &&
-        css`
-            background: transparent !important;
-
-            &:hover {
-                text-decoration: underline;
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                opacity: 0.5;
-            }
-
-            &:active {
-                background: var(--secondary-background);
-            }
-        `}
-
-    ${(props) =>
-        props.contrast &&
-        css`
-            padding: 4px 8px;
-            background: var(--secondary-header);
-
-            &:hover {
-                background: var(--primary-header);
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                background: var(--secondary-header);
-            }
-
-            &:active {
-                background: var(--secondary-background);
-            }
-        `}
-
-    ${(props) =>
-        props.error &&
-        css`
-            color: white;
-            font-weight: 600;
-            background: var(--error);
-
-            &:hover {
-                filter: brightness(1.2);
-                background: var(--error);
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                background: var(--error);
-            }
-        `}
-    
-    ${(props) =>
-        props.gold &&
-        css`
-            color: black;
-            font-weight: 600;
-            background: goldenrod;
-
-            &:hover {
-                filter: brightness(1.2);
-                background: goldenrod;
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-                background: goldenrod;
-            }
-        `}
-`;

src/components/ui/Category.tsx

@@ -1,55 +0,0 @@
-import { Plus } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components/macro";
-
-import { Children } from "../../types/Preact";
-
-const CategoryBase = styled.div<Pick<Props, "variant">>`
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-
-    margin-top: 4px;
-    padding: 6px 0 6px 8px;
-    margin-bottom: 4px;
-    white-space: nowrap;
-
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    justify-content: space-between;
-
-    svg {
-        cursor: pointer;
-    }
-
-    &:first-child {
-        margin-top: 0;
-        padding-top: 0;
-    }
-
-    ${(props) =>
-        props.variant === "uniform" &&
-        css`
-            padding-top: 6px;
-        `}
-`;
-
-type Props = Omit<
-    JSX.HTMLAttributes<HTMLDivElement>,
-    "children" | "as" | "action"
-> & {
-    text: Children;
-    action?: () => void;
-    variant?: "default" | "uniform";
-};
-
-export default function Category(props: Props) {
-    const { text, action, ...otherProps } = props;
-
-    return (
-        <CategoryBase {...otherProps}>
-            {text}
-            {action && <Plus size={16} onClick={action} />}
-        </CategoryBase>
-    );
-}

src/components/ui/Checkbox.tsx

@@ -1,123 +0,0 @@
-import { Check } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components/macro";
-
-import { Children } from "../../types/Preact";
-
-export const CheckboxBase = styled.label`
-    gap: 4px;
-    z-index: 1;
-    display: flex;
-    margin-top: 20px;
-    align-items: center;
-    border-radius: var(--border-radius);
-
-    cursor: pointer;
-    font-size: 18px;
-    user-select: none;
-
-    transition: 0.2s ease all;
-
-    input {
-        display: none;
-    }
-
-    &:hover {
-        .check {
-            background: var(--background);
-        }
-    }
-
-    &[disabled] {
-        opacity: 0.5;
-        cursor: not-allowed;
-
-        &:hover {
-            background: unset;
-        }
-    }
-`;
-
-const CheckboxContent = styled.span`
-    display: flex;
-    flex-grow: 1;
-    font-size: 14px;
-    gap: 2px;
-    font-weight: 600;
-    flex-direction: column;
-`;
-
-const CheckboxDescription = styled.span`
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--secondary-foreground);
-`;
-
-export const Checkmark = styled.div<{ checked: boolean; contrast?: boolean }>`
-    margin: 4px;
-    width: 24px;
-    height: 24px;
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    transition: 0.2s ease all;
-    border-radius: var(--border-radius);
-    background: var(--secondary-background);
-
-    svg {
-        color: var(--secondary-background);
-    }
-
-    ${(props) =>
-        props.contrast &&
-        css`
-            background: var(--primary-background);
-
-            svg {
-                color: var(--primary-background);
-            }
-        `}
-
-    ${(props) =>
-        props.checked &&
-        css`
-            background: var(--accent) !important;
-        `}
-`;
-
-export interface CheckboxProps {
-    checked: boolean;
-    disabled?: boolean;
-    contrast?: boolean;
-    className?: string;
-    children?: Children;
-    description?: Children;
-    onChange: (state: boolean) => void;
-}
-
-export default function Checkbox(props: CheckboxProps) {
-    return (
-        <CheckboxBase disabled={props.disabled} className={props.className}>
-            <CheckboxContent>
-                <span>{props.children}</span>
-                {props.description && (
-                    <CheckboxDescription>
-                        {props.description}
-                    </CheckboxDescription>
-                )}
-            </CheckboxContent>
-            <input
-                type="checkbox"
-                checked={props.checked}
-                onChange={() =>
-                    !props.disabled && props.onChange(!props.checked)
-                }
-            />
-            <Checkmark
-                checked={props.checked}
-                contrast={props.contrast}
-                className="check">
-                <Check size={20} />
-            </Checkmark>
-        </CheckboxBase>
-    );
-}

src/components/ui/ColourSwatches.tsx

@@ -1,162 +0,0 @@
-import { Check } from "@styled-icons/boxicons-regular";
-import { Palette } from "@styled-icons/boxicons-solid";
-import styled, { css } from "styled-components/macro";
-
-import { RefObject } from "preact";
-import { useRef } from "preact/hooks";
-
-import { useDebounceCallback } from "../../lib/debounce";
-
-interface Props {
-    value: string;
-    onChange: (value: string) => void;
-}
-
-const presets = [
-    [
-        "#7B68EE",
-        "#3498DB",
-        "#1ABC9C",
-        "#F1C40F",
-        "#FF7F50",
-        "#FD6671",
-        "#E91E63",
-        "#D468EE",
-    ],
-    [
-        "#594CAD",
-        "#206694",
-        "#11806A",
-        "#C27C0E",
-        "#CD5B45",
-        "#FF424F",
-        "#AD1457",
-        "#954AA8",
-    ],
-];
-
-const SwatchesBase = styled.div`
-    /*gap: 8px;*/
-    display: flex;
-
-    input {
-        width: 0;
-        height: 0;
-        top: 72px;
-        opacity: 0;
-        padding: 0;
-        border: 0;
-        position: relative;
-        pointer-events: none;
-    }
-
-    .overlay {
-        position: relative;
-        width: 0;
-
-        div {
-            width: 8px;
-            height: 68px;
-            background: linear-gradient(
-                to right,
-                var(--primary-background),
-                transparent
-            );
-        }
-    }
-`;
-
-const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
-    flex-shrink: 0;
-    cursor: pointer;
-    border-radius: var(--border-radius);
-    background-color: ${(props) => props.colour};
-
-    display: grid;
-    place-items: center;
-
-    &:hover {
-        border: 3px solid var(--foreground);
-        transition: border ease-in-out 0.07s;
-    }
-
-    svg {
-        color: white;
-    }
-
-    ${(props) =>
-        props.type === "small"
-            ? css`
-                  width: 30px;
-                  height: 30px;
-
-                  svg {
-                      /*stroke-width: 2;*/
-                  }
-              `
-            : css`
-                  width: 68px;
-                  height: 68px;
-              `}
-`;
-
-const Rows = styled.div`
-    gap: 8px;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    padding-bottom: 4px;
-
-    > div {
-        gap: 8px;
-        display: flex;
-        flex-direction: row;
-        padding-inline-start: 8px;
-    }
-`;
-
-export default function ColourSwatches({ value, onChange }: Props) {
-    const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
-    const setValue = useDebounceCallback(
-        (value) => onChange(value as string),
-        [onChange],
-        100,
-    );
-
-    return (
-        <SwatchesBase>
-            <input
-                type="color"
-                value={value}
-                ref={ref}
-                onChange={(ev) => setValue(ev.currentTarget.value)}
-            />
-            <Swatch
-                colour={value}
-                type="large"
-                onClick={() => ref.current?.click()}>
-                <Palette size={32} />
-            </Swatch>
-
-            <div class="overlay">
-                <div />
-            </div>
-
-            <Rows>
-                {presets.map((row, i) => (
-                    <div key={i}>
-                        {row.map((swatch, i) => (
-                            <Swatch
-                                colour={swatch}
-                                type="small"
-                                key={i}
-                                onClick={() => onChange(swatch)}>
-                                {swatch === value && <Check size={22} />}
-                            </Swatch>
-                        ))}
-                    </div>
-                ))}
-            </Rows>
-        </SwatchesBase>
-    );
-}

src/components/ui/ComboBox.tsx

@@ -1,26 +0,0 @@
-import styled from "styled-components/macro";
-
-export default styled.select`
-    width: 100%;
-    padding: 10px;
-    cursor: pointer;
-    border-radius: var(--border-radius);
-    font-weight: 500;
-    font-family: inherit;
-    font-size: var(--text-size);
-    color: var(--secondary-foreground);
-    background: var(--secondary-background);
-
-    border: none;
-    outline: 2px solid transparent;
-    transition: box-shadow 0.2s ease-in-out;
-    transition: outline-color 0.2s ease-in-out;
-
-    &:focus {
-        box-shadow: 0 0 0 1.5pt var(--accent);
-    }
-
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-`;

src/components/ui/DateDivider.tsx

@@ -1,53 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-import { dayjs } from "../../context/Locale";
-
-const Base = styled.div<{ unread?: boolean }>`
-    height: 0;
-    display: flex;
-    user-select: none;
-    align-items: center;
-    margin: 17px 12px 5px;
-    border-top: thin solid var(--tertiary-foreground);
-
-    time {
-        margin-top: -2px;
-        font-size: 0.6875rem;
-        line-height: 0.6875rem;
-        padding-inline-start: 5px;
-        padding-inline-end: 5px;
-        color: var(--tertiary-foreground);
-        background: var(--primary-background);
-    }
-
-    ${(props) =>
-        props.unread &&
-        css`
-            border-top: thin solid var(--accent);
-        `}
-`;
-
-const Unread = styled.div`
-    background: var(--accent);
-    color: var(--accent-contrast);
-    font-size: 7px;
-    padding: 2px 6px;
-    font-size: 10px;
-    border-radius: 60px;
-    font-weight: 600;
-    margin-top: -1px;
-`;
-
-interface Props {
-    date?: Date;
-    unread?: boolean;
-}
-
-export default function DateDivider({ unread, date }: Props) {
-    return (
-        <Base unread={unread}>
-            {unread && <Unread>NEW</Unread>}
-            {date && <time>{dayjs(date).format("LL")}</time>}
-        </Base>
-    );
-}

src/components/ui/Details.tsx

@@ -1,82 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
-
-export default styled.details<{ sticky?: boolean; large?: boolean }>`
-    summary {
-        ${(props) =>
-            props.sticky &&
-            css`
-                top: 48px;
-                z-index: 10;
-                position: sticky;
-                ${() =>
-                    isTouchscreenDevice &&
-                    css`
-                        top: 56px;
-                    `}
-            `}
-
-        ${(props) =>
-            props.large &&
-            css`
-                /*padding: 5px 0;*/
-                background: var(--primary-background);
-                color: var(--secondary-foreground);
-
-                .padding {
-                    /*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
-                    display: flex;
-                    align-items: center;
-                    padding: 5px 0;
-                    margin: 0.8em 0px 0.4em;
-                    cursor: pointer;
-                }
-            `}
-
-        outline: none;
-        cursor: pointer;
-        list-style: none;
-        user-select: none;
-        align-items: center;
-        transition: 0.2s opacity;
-
-        font-size: 12px;
-        font-weight: 600;
-        text-transform: uppercase;
-
-        &::marker,
-        &::-webkit-details-marker {
-            display: none;
-        }
-
-        .title {
-            flex-grow: 1;
-            margin-top: 1px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-
-        .padding {
-            display: flex;
-            align-items: center;
-
-            > svg {
-                flex-shrink: 0;
-                margin-inline-end: 4px;
-                transition: 0.2s ease transform;
-            }
-        }
-    }
-
-    &:not([open]) {
-        summary {
-            opacity: 0.7;
-        }
-
-        summary svg {
-            transform: rotateZ(-90deg);
-        }
-    }
-`;

src/components/ui/Header.tsx

@@ -7,93 +7,22 @@ import { observer } from "mobx-react-lite";
 import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components/macro";
 
+import { Header } from "@revoltchat/ui";
+
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../mobx/State";
 import { SIDEBAR_CHANNELS } from "../../mobx/stores/Layout";
 
-import { Children } from "../../types/Preact";
-
 interface Props {
     topBorder?: boolean;
     bottomBorder?: boolean;
 
-    background?: boolean;
+    withBackground?: boolean;
-    transparent?: boolean;
+    withTransparency?: boolean;
     placement: "primary" | "secondary";
 }
 
-const Header = styled.div<Props>`
-    gap: 10px;
-    flex: 0 auto;
-    display: flex;
-    flex-shrink: 0;
-    padding: 0 16px;
-    font-weight: 600;
-    user-select: none;
-    align-items: center;
-
-    height: var(--header-height);
-
-    background-size: cover !important;
-    background-position: center !important;
-
-    svg {
-        flex-shrink: 0;
-    }
-
-    .menu {
-        margin-inline-end: 8px;
-        color: var(--secondary-foreground);
-    }
-
-    ${(props) =>
-        props.transparent
-            ? css`
-                  background-color: rgba(
-                      var(--primary-header-rgb),
-                      max(var(--min-opacity), 0.75)
-                  );
-                  backdrop-filter: blur(20px);
-                  z-index: 20;
-                  position: absolute;
-                  width: 100%;
-              `
-            : css`
-                  background-color: var(--primary-header);
-              `}
-
-    ${(props) =>
-        props.background &&
-        css`
-            height: 120px !important;
-            align-items: flex-end;
-
-            text-shadow: 0px 0px 1px black;
-        `}
-
-    ${(props) =>
-        props.placement === "secondary" &&
-        css`
-            background-color: var(--secondary-header);
-            padding: 14px;
-        `}
-
-    ${(props) =>
-        props.topBorder &&
-        css`
-            border-start-start-radius: 8px;
-        `}
-
-    ${(props) =>
-        props.bottomBorder &&
-        css`
-            border-end-start-radius: 8px;
-        `}
-`;
-
-export default Header;
-
 const IconContainer = styled.div`
     display: flex;
     align-items: center;
@@ -128,7 +57,7 @@ export const PageHeader = observer(
         return (
             <Header
                 {...props}
-                placement="primary"
+                palette="primary"
                 topBorder={!visible}
                 bottomBorder={!pathname.includes("/server")}>
                 {!noBurger && <HamburgerAction />}