fix(settings): small bug fixes

.babelrc

@@ -1 +0,0 @@
-{ "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] }

.dockerignore

@@ -5,6 +5,3 @@ dist_injected
 node_modules
 .env
 .env.local
-
-Dockerfile
-.dockerignore

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+ko_fi: insertish
+custom: https://insrt.uk/donate

.github/ISSUE_TEMPLATE/bug.yml

@@ -1,66 +0,0 @@
-name: Bug report
-description: File a bug report
-title: "bug: "
-labels: ["bug"]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report!
-  - type: textarea
-    id: what-happened
-    attributes:
-      label: What happened?
-      description: What did you expect to happen?
-    validations:
-      required: true
-  - type: dropdown
-    id: branch
-    attributes:
-      label: Branch
-      description: What branch of Revolt are you using?
-      options:
-        - Production (app.revolt.chat)
-        - Nightly (nightly.revolt.chat)
-    validations:
-      required: true
-  - type: textarea
-    id: commit-hash
-    attributes:
-      label: Commit hash
-      description: What is your commit hash? You can find this at the bottom of Settings, next to the branch name.
-    validations:
-      required: true
-  - type: dropdown
-    id: browsers
-    attributes:
-      label: What browsers are you seeing the problem on?
-      multiple: true
-      options:
-        - Firefox
-        - Chrome
-        - Safari
-        - Microsoft Edge
-        - Other (please specify in the "What happened" form)
-  - type: textarea
-    id: logs
-    attributes:
-      label: Relevant log output
-      description: Please copy and paste any relevant log output. (To get this, press `CTRL`- or `CMD`-`SHIFT`-`I` and navigate to the "Console" tab.)
-      render: shell
-  - type: checkboxes
-    id: desktop
-    attributes:
-      label: Desktop
-      description: Is this bug specific to [the desktop client](https://github.com/revoltchat/desktop)? (If not, leave this unchecked.)
-      options:
-        - label: Yes, this bug is specific to Revolt Desktop and is *not* an issue with Revolt Desktop itself.
-          required: false
-  - type: checkboxes
-    id: pwa
-    attributes:
-      label: PWA
-      description: Is this bug specific to the PWA (i.e. "installing" the web app on iOS or Android)? (If not, leave this unchecked.)
-      options:
-        - label: Yes, this bug is specific to the PWA.
-          required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +0,0 @@
-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/ISSUE_TEMPLATE/feature.yml

@@ -1,24 +0,0 @@
-name: Feature request
-description: Make a feature request
-title: "feature request: "
-labels: ["enhancement"]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Before you start, a lot of bigger features may be better suited as [API issues](https://github.com/revoltchat/delta/issues/new) or [centralised discussions](https://github.com/revoltchat/revolt/discussions/new).
-  - type: textarea
-    id: your-idea
-    attributes:
-      label: What do you want to see?
-      description: Describe your idea in as much detail as possible - if applicable, screenshots/mockups are really useful.
-    validations:
-      required: true
-  - type: checkboxes
-    id: pwa
-    attributes:
-      label: PWA
-      description: Is this feature request specific to the PWA (i.e. "installing" the web app on iOS or Android)? (If not, leave this unchecked.)
-      options:
-        - label: Yes, this feature request is specific to the PWA.
-          required: false

.github/SECURITY.md

@@ -0,0 +1,24 @@
+# Security
+
+## Reporting a Vulnerability
+
+If you would like to report a security vulnerability,
+please email **[security@revolt.chat](mailto:security@revolt.chat)**,
+this will open a new ticket in ticket system, you should receive a response
+within the next couple of days, potentially within a few minutes if someone
+is currently active.
+
+To help us best triage the issue, please provide:
+
+- The type of issue at hand
+- The name of the relevant project affected
+- Reproduction steps
+- Reference to any relevant source file(s) that you may suspect are causing the issue
+- Any extra information about your configuration.
+- Description of potential ways this can be exploited, if you can list any
+
+For revoltchat/revite in particular:
+
+- Please include the commit hash of the client, it is visible in settings under the log out button.
+
+Thank you for helping Revolt.

.github/actions/build/action.yml

@@ -19,7 +19,7 @@ runs:
         - name: Setup Node
           uses: actions/setup-node@v2
           with:
-              node-version: 16
+              node-version: 15
               cache: "yarn"
 
         - name: Install Dependencies and Build

.github/pull_request_template.md

@@ -1,7 +0,0 @@
-## Please make sure to check the following tasks before opening and submitting a PR
-
-* [ ] I understand and have followed the [contribution guide](https://github.com/revoltchat/revolt/discussions/282)
-* [ ] I have tested my changes locally and they are working as intended
-* [ ] These changes do not have any notable side effects on other Revolt projects
-* [ ] (optional) I have opened a pull request on [the translation repository](https://github.com/revoltchat/translations)
-* [ ] I have included screenshots to demonstrate my changes

.github/workflows/docker.yml

@@ -5,7 +5,7 @@ on:
         branches:
             - "master"
         tags:
-            - "*"
+            - "v*"
         paths-ignore:
             - ".github/**"
             - "!.github/workflows/docker.yml"
@@ -100,7 +100,7 @@ jobs:
               with:
                   context: .
                   push: true
-                  platforms: linux/amd64
+                  platforms: linux/amd64,linux/arm64,linux/arm/v7
                   tags: ${{ steps.meta.outputs.tags }}
                   labels: ${{ steps.meta.outputs.labels }}
                   cache-from: type=local,src=/tmp/.buildx-cache/linux/amd64

.github/workflows/mirroring.yml

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

.github/workflows/triage_pr.yml

@@ -1,72 +1,72 @@
 name: Add PR to Board
 
 on:
-  pull_request_target:
+    pull_request_target:
-    types: [opened, synchronize, ready_for_review, review_requested]
+        types: [opened, synchronize, ready_for_review, review_requested]
 
 jobs:
-  track_pr:
+    track_pr:
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
-    steps:
+        steps:
-      - name: Get project data
+            - name: Get project data
-        env:
+              env:
-          GITHUB_TOKEN: ${{ secrets.PAT }}
+                  GITHUB_TOKEN: ${{ secrets.PAT }}
-        run: |
+              run: |
-          gh api graphql -f query='
+                  gh api graphql -f query='
-            query {
+                    query {
-              organization(login: "revoltchat"){
+                      organization(login: "revoltchat"){
-                projectNext(number: 3) {
+                        projectNext(number: 3) {
-                  id
+                          id
-                  fields(first:20) {
+                          fields(first:20) {
-                    nodes {
+                            nodes {
-                      id
+                              id
-                      name
+                              name
-                      settings
+                              settings
-                    }
+                            }
-                  }
+                          }
-                }
+                        }
-              }
+                      }
-            }' > project_data.json
+                    }' > project_data.json
 
-          echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
+                  echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
+                  echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
-          echo 'INCOMING_OPTION_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Incoming PRs") |.id' project_data.json) >> $GITHUB_ENV
+                  echo 'INCOMING_OPTION_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Incoming PRs") |.id' project_data.json) >> $GITHUB_ENV
 
-      - name: Add PR to project
+            - name: Add PR to project
-        env:
+              env:
-          GITHUB_TOKEN: ${{ secrets.PAT }}
+                  GITHUB_TOKEN: ${{ secrets.PAT }}
-          PR_ID: ${{ github.event.pull_request.node_id }}
+                  PR_ID: ${{ github.event.pull_request.node_id }}
-        run: |
+              run: |
-          item_id="$( gh api graphql -f query='
+                  item_id="$( gh api graphql -f query='
-            mutation($project:ID!, $pr:ID!) {
+                    mutation($project:ID!, $pr:ID!) {
-              addProjectNextItem(input: {projectId: $project, contentId: $pr}) {
+                      addProjectNextItem(input: {projectId: $project, contentId: $pr}) {
-                projectNextItem {
+                        projectNextItem {
-                  id
+                          id
-                }
+                        }
-              }
+                      }
-            }' -f project=$PROJECT_ID -f pr=$PR_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
+                    }' -f project=$PROJECT_ID -f pr=$PR_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
-          
-          echo 'ITEM_ID='$item_id >> $GITHUB_ENV
 
-      - name: Set fields
+                  echo 'ITEM_ID='$item_id >> $GITHUB_ENV
-        env:
+
-          GITHUB_TOKEN: ${{ secrets.PAT }}
+            - name: Set fields
-        run: |
+              env:
-          gh api graphql -f query='
+                  GITHUB_TOKEN: ${{ secrets.PAT }}
-            mutation (
+              run: |
-              $project: ID!
+                  gh api graphql -f query='
-              $item: ID!
+                    mutation (
-              $status_field: ID!
+                      $project: ID!
-              $status_value: String!
+                      $item: ID!
-            ) {
+                      $status_field: ID!
-              set_status: updateProjectNextItemField(input: {
+                      $status_value: String!
-                projectId: $project
+                    ) {
-                itemId: $item
+                      set_status: updateProjectNextItemField(input: {
-                fieldId: $status_field
+                        projectId: $project
-                value: $status_value
+                        itemId: $item
-              }) {
+                        fieldId: $status_field
-                projectNextItem {
+                        value: $status_value
-                  id
+                      }) {
-                  }
+                        projectNextItem {
-              }
+                          id
-            }' -f project=$PROJECT_ID -f item=$ITEM_ID -f status_field=$STATUS_FIELD_ID -f status_value=${{ env.INCOMING_OPTION_ID }} --silent
+                          }
+                      }
+                    }' -f project=$PROJECT_ID -f item=$ITEM_ID -f status_field=$STATUS_FIELD_ID -f status_value=${{ env.INCOMING_OPTION_ID }} --silent

.gitignore

@@ -7,11 +7,6 @@ dist-ssr
 *.log
 /.idea
 
-.yarn/cache
-.yarn/install-state.gz
-
 public/assets
 public/assets_*
 !public/assets_default
-
-.vscode/chrome_data

.gitlab-ci.yml

@@ -0,0 +1,40 @@
+image: node:14-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

.gitmodules

@@ -1,9 +1,3 @@
 [submodule "external/lang"]
 	path = external/lang
 	url = https://github.com/revoltchat/translations
-[submodule "external/components"]
-	path = external/components
-	url = https://github.com/revoltchat/components
-[submodule "external/revolt.js"]
-	path = external/revolt.js
-	url = https://github.com/revoltchat/revolt.js

.prettierrc.js

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

.vscode/launch.json

@@ -1,17 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "pwa-chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://local.revolt.chat:3000",
-            "webRoot": "${workspaceFolder}",
-            "runtimeExecutable": "/usr/bin/chromium",
-            "userDataDir": "${workspaceFolder}/.vscode/chrome_data"
-        }
-    ]
-}

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    "compile-hero.disable-compile-files-on-did-save-code": true
 }

.yarnrc.yml

@@ -1,11 +0,0 @@
-nodeLinker: node-modules
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-
-yarnPath: .yarn/releases/yarn-3.2.0.cjs

Dockerfile

@@ -1,15 +1,18 @@
 FROM node:16-buster AS builder
 
 WORKDIR /usr/src/app
+COPY package*.json ./
+
+RUN yarn --no-cache
+
 COPY . .
 COPY .env.build .env
-
+RUN yarn add --dev @babel/plugin-proposal-decorators
-RUN yarn install --frozen-lockfile
 RUN yarn typecheck
-RUN yarn build:highmem
+RUN yarn build
-RUN yarn workspaces focus --production --all
+RUN npm prune --production
 
-FROM node:16-alpine
+FROM node:16-buster
 WORKDIR /usr/src/app
 COPY --from=builder /usr/src/app .
 

README.md

@@ -4,14 +4,6 @@
 
 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,27 +35,22 @@ Get revite up and running locally.
 git clone --recursive https://github.com/revoltchat/revite
 cd revite
 yarn
-yarn build:deps
 yarn dev
 ```
 
-You can now access the client at http://local.revolt.chat:3000.
-
 ## CLI Commands
 
-| Command                                 | Description                                  |
+| Command             | Description                                  |
-| --------------------------------------- | -------------------------------------------- |
+| ------------------- | -------------------------------------------- |
-| `yarn pull`                             | Setup assets required for Revite.            |
+| `yarn pull`         | Setup assets required for Revite.            |
-| `yarn dev`                              | Start the Revolt client in development mode. |
+| `yarn dev`          | Start the Revolt client in development mode. |
-| `yarn build`                            | Build the Revolt client.                     |
+| `yarn build`        | Build the Revolt client.                     |
-| `yarn build:deps`                       | Build external dependencies.                 |
+| `yarn preview`      | Start a local server with the built client.  |
-| `yarn preview`                          | Start a local server with the built client.  |
+| `yarn lint`         | Run ESLint on the client.                    |
-| `yarn lint`                             | Run ESLint on the client.                    |
+| `yarn fmt`          | Run Prettier on the client.                  |
-| `yarn fmt`                              | Run Prettier on the client.                  |
+| `yarn typecheck`    | Run TypeScript type checking on the client.  |
-| `yarn typecheck`                        | Run TypeScript type checking on the client.  |
+| `yarn start`        | Start a local sirv server with built client. |
-| `yarn start`                            | Start a local sirv server with built client. |
+| `yarn start:inject` | Inject a given API URL and start server.     |
-| `yarn start:inject`                     | Inject a given API URL and start server.     |
-| `yarn lint \| egrep "no-literals" -B 1` | Scan for untranslated strings.               |
 
 ## License
 

VERSION

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

disabled-js.svg

@@ -1,6 +0,0 @@
-<svg width="225" height="161" viewBox="0 0 225 161" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M69.6951 15.0002L20.9951 63.7002L69.6951 112.4L81.7601 100.325L45.1301 63.6952L81.7601 27.0652L69.6951 15.0002ZM132.955 112.39L181.655 63.6902L132.955 14.9902L120.89 27.0652L157.52 63.6952L120.89 100.325L132.955 112.39Z" fill="white"/>
-<path d="M197 73H137C133.686 73 131 75.6863 131 79V139C131 142.314 133.686 145 137 145H197C200.314 145 203 142.314 203 139V79C203 75.6863 200.314 73 197 73Z" fill="#242424"/>
-<path d="M191 79H143C139.686 79 137 81.6863 137 85V133C137 136.314 139.686 139 143 139H191C194.314 139 197 136.314 197 133V85C197 81.6863 194.314 79 191 79Z" fill="#D14F4F"/>
-<path d="M181.5 95.5L153.5 123.5M153.5 95.5L181.5 123.5L153.5 95.5Z" stroke="white" stroke-width="5" stroke-linecap="round"/>
-</svg>

index.html

@@ -1,13 +1,10 @@
 <!DOCTYPE html>
-<html lang="en" background="#191919">
+<html lang="en">
     <head>
         <meta charset="UTF-8" />
-
-        <!--App Title-->
         <title>Revolt</title>
         <meta name="apple-mobile-web-app-title" content="Revolt" />
 
-        <!--App Scaling-->
         <meta
             name="viewport"
             content="width=device-width, initial-scale=1.0, user-scalable=no"
@@ -72,72 +69,14 @@
             media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
             rel="apple-touch-startup-image"
         />
-
-        <!--CSS for noscript screen-->
-        <style>
-            noscript {
-                background: #242424;
-                color: white;
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100vw;
-                min-height: 100vh;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                user-select: none;
-            }
-            noscript > div {
-                padding: 12px;
-                display: flex;
-                font-family: "Open Sans", sans-serif;
-                flex-direction: column;
-                justify-content: center;
-                text-align: center;
-            }
-            noscript > div > h1 {
-                margin: 8px 0;
-                text-transform: uppercase;
-                font-size: 20px;
-                font-weight: 700;
-            }
-            noscript > div > p {
-                margin: 4px 0;
-                font-size: 14px;
-            }
-            noscript > div > a {
-                align-self: center;
-                margin-top: 20px;
-                padding: 8px 10px;
-                font-size: 14px;
-                width: 80px;
-                font-weight: 600;
-                background: #ed5151;
-                border-radius: 4px;
-                text-decoration: none;
-                color: white;
-                transition: background-color 0.2s;
-            }
-            noscript > div > a:hover {
-                background-color: #cf4848;
-            }
-            noscript > div > a:active {
-                background-color: #b64141;
-            }
-        </style>
     </head>
-    <body>
+    <body onContextMenu="return false" ontouchstart="">
         <div id="app"></div>
         <script type="module" src="/src/main.tsx"></script>
-        <noscript>
-            <div>
-                <img src="disabled-js.svg" />
-                <h1>Well, this is really awkward...</h1>
-                <p>Seems like your JavaScript is disabled.</p>
-                <p>You'll need to enable JavaScript to run this app.</p>
-                <a href="https://app.revolt.chat" target="_blank">Reload</a>
-            </div>
-        </noscript>
     </body>
+    <style>
+        html {
+            background-color: #191919;
+        }
+    </style>
 </html>

package.json

@@ -1,13 +1,11 @@
 {
-    "version": "1.0.1",
+    "version": "0.0.0",
     "scripts": {
         "dev": "node scripts/setup_assets.js --check && vite",
         "pull": "node scripts/setup_assets.js",
-        "build:deps": "cd external && cd components && yarn && yarn build:esm && cd .. && cd revolt.js && yarn && yarn build",
+        "build": "rimraf build && node scripts/setup_assets.js --check && vite build",
-        "build": "yarn && rimraf build && node scripts/setup_assets.js --check && yarn build:deps && vite build",
-        "build:highmem": "NODE_OPTIONS='--max-old-space-size=4096' yarn build",
         "preview": "vite preview",
-        "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
+        "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
         "fmt": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
         "typecheck": "tsc --noEmit",
         "start": "sirv dist --cors --single --host",
@@ -39,32 +37,27 @@
                 {
                     "varsIgnorePattern": "^_"
                 }
-            ],
+            ]
-            "react/jsx-no-literals": "warn"
         }
     },
     "dependencies": {
         "fs-extra": "^10.0.0",
         "klaw": "^3.0.0",
+        "react-beautiful-dnd": "^13.1.0",
         "sirv-cli": "^1.0.14",
-        "vite": "^3.0.5"
+        "vite": "^2.6.14"
     },
     "devDependencies": {
-        "@babel/plugin-proposal-decorators": "^7.17.9",
-        "@floating-ui/react-dom": "^1.0.0",
-        "@floating-ui/react-dom-interactions": "^0.9.1",
         "@fontsource/atkinson-hyperlegible": "^4.4.5",
-        "@fontsource/bitter": "^4.5.7",
+        "@fontsource/bree-serif": "^4.4.5",
         "@fontsource/comic-neue": "^4.4.5",
         "@fontsource/fira-code": "^4.4.5",
         "@fontsource/inter": "^4.4.5",
         "@fontsource/jetbrains-mono": "^4.4.5",
         "@fontsource/lato": "^4.4.5",
-        "@fontsource/lexend": "^4.5.2",
         "@fontsource/montserrat": "^4.4.5",
         "@fontsource/noto-sans": "^4.4.5",
-        "@fontsource/open-sans": "^4.5.2",
+        "@fontsource/open-sans": "^4.4.5",
-        "@fontsource/opendyslexic": "^4.5.2",
         "@fontsource/poppins": "^4.4.5",
         "@fontsource/raleway": "^4.4.5",
         "@fontsource/roboto": "^4.4.5",
@@ -73,103 +66,80 @@
         "@fontsource/space-mono": "^4.4.5",
         "@fontsource/ubuntu": "^4.4.5",
         "@fontsource/ubuntu-mono": "^4.4.5",
-        "@hcaptcha/react-hcaptcha": "^1.4.4",
+        "@hcaptcha/react-hcaptcha": "^0.3.6",
-        "@insertish/vite-plugin-babel-macros": "^1.0.5",
         "@preact/preset-vite": "^2.0.0",
-        "@revoltchat/ui": "^1.0.77",
         "@rollup/plugin-replace": "^2.4.2",
-        "@styled-icons/boxicons-logos": "^10.38.0",
+        "@styled-icons/boxicons-logos": "^10.34.0",
-        "@styled-icons/boxicons-regular": "^10.38.0",
+        "@styled-icons/boxicons-regular": "^10.34.0",
-        "@styled-icons/boxicons-solid": "^10.38.0",
+        "@styled-icons/boxicons-solid": "^10.37.0",
-        "@styled-icons/simple-icons": "^10.45.0",
+        "@styled-icons/simple-icons": "^10.33.0",
-        "@tippyjs/react": "4.2.6",
+        "@tippyjs/react": "^4.2.5",
         "@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/node": "^15.14.9",
+        "@types/markdown-it": "^12.0.2",
+        "@types/node": "^15.12.4",
         "@types/preact-i18n": "^2.3.0",
-        "@types/prismjs": "^1.26.0",
+        "@types/prismjs": "^1.16.5",
-        "@types/react-beautiful-dnd": "^13",
+        "@types/react-beautiful-dnd": "^13.1.2",
         "@types/react-helmet": "^6.1.1",
         "@types/react-router-dom": "^5.1.7",
         "@types/react-scroll": "^1.8.2",
-        "@types/semver": "^7",
+        "@types/react-virtualized-auto-sizer": "^1.0.1",
         "@types/styled-components": "^5.1.10",
         "@types/twemoji": "^12.1.1",
         "@typescript-eslint/eslint-plugin": "^4.27.0",
         "@typescript-eslint/parser": "^4.27.0",
-        "@vitejs/plugin-legacy": "^1.7.1",
         "classnames": "^2.3.1",
-        "color-rgba": "^2.4.0",
         "dayjs": "^1.10.6",
         "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",
+        "highlight.js": "^11.0.1",
-        "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",
+        "markdown-it-sub": "^1.0.0",
+        "markdown-it-sup": "^1.0.0",
         "mediasoup-client": "npm:@insertish/mediasoup-client@3.6.36-esnext",
-        "mobx": "^6.6.0",
+        "mobx": "^6.3.2",
-        "mobx-react-lite": "3.4.0",
+        "mobx-react-lite": "^3.2.0",
         "preact": "^10.5.14",
-        "preact-context-menu": "0.4.1",
+        "preact-context-menu": "^0.2.1",
         "preact-i18n": "^2.4.0-preactx",
         "prettier": "^2.3.1",
-        "prismjs": "^1.28.0",
+        "prismjs": "^1.23.0",
-        "qrcode.react": "^3.0.2",
+        "react-device-detect": "^1.17.0",
-        "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-redux": "^7.2.4",
         "react-router-dom": "^5.2.0",
         "react-scroll": "^1.8.2",
-        "react-virtuoso": "^2.12.0",
+        "react-virtualized-auto-sizer": "^1.0.5",
-        "rehype-katex": "^6.0.2",
+        "react-virtuoso": "^1.10.4",
-        "rehype-prism": "^2.1.3",
+        "redux": "^4.1.0",
-        "rehype-react": "^7.1.1",
+        "revolt-api": "0.5.3-alpha.10",
-        "remark-breaks": "^3.0.2",
+        "revolt.js": "^5.1.0-alpha.10",
-        "remark-gfm": "^3.0.1",
-        "remark-math": "^5.1.1",
-        "remark-parse": "^10.0.1",
-        "remark-rehype": "^10.1.0",
-        "revolt.js": "6.0.17",
         "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.12.3",
+        "vite-plugin-compression": "^0.3.6",
+        "vite-plugin-pwa": "^0.8.1",
         "workbox-precaching": "^6.1.5"
     },
     "name": "client",
     "main": "index.js",
     "repository": "https://github.com/revoltchat/revite.git",
     "author": "Paul <paulmakles@gmail.com>",
-    "license": "MIT",
+    "license": "MIT"
-    "packageManager": "yarn@3.2.0",
-    "resolutions": {
-        "@revoltchat/ui": "portal:external/components",
-        "revolt.js": "portal:external/revolt.js"
-    }
 }

public/.well-known/assetlinks.json

@@ -1,22 +1,10 @@
-[
+[{
-    {
+    "relation": ["delegate_permission/common.handle_all_urls"],
-        "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
-        "target": {
+        "namespace": "android_app",
-            "namespace": "android_app",
+        "package_name": "chat.revolt.app.twa",
-            "package_name": "chat.revolt.app.twa",
+        "sha256_cert_fingerprints": [
-            "sha256_cert_fingerprints": [
+            "6E:62:C1:BF:5A:2D:11:31:A3:22:91:8D:22:2B:2C:49:D3:70:F3:A1:45:DF:11:6A:97:DC:4C:A9:3B:C3:AA:FB"
-                "6E:62:C1:BF:5A:2D:11:31:A3:22:91:8D:22:2B:2C:49:D3:70:F3:A1:45:DF:11:6A:97:DC:4C:A9:3B:C3:AA:FB"
+        ]
-            ]
-        }
-    },
-    {
-        "relation": ["delegate_permission/common.handle_all_urls"],
-        "target": {
-            "namespace": "android_app",
-            "package_name": "chat.revolt.app.twa",
-            "sha256_cert_fingerprints": [
-                "2B:C7:89:87:BD:62:88:38:7B:C0:D7:5F:D1:10:F4:91:D5:24:A6:B3:25:3A:75:C2:3A:91:07:1B:63:C0:98:67"
-            ]
-        }
     }
-]
+}]

public/assets_default/badges/amog.svg

@@ -1 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="64.00001046823172" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="-0.000008942940667111543 -0.0000033745862566547657 64.00001046823172 64.00000545874563" height="64.00000545874563" style="-webkit-print-color-adjust: exact;"><g id="shape-d9b11490-3403-11ec-bc16-7b519797d558"><rect rx="0" ry="0" x="0" y="0" transform="matrix(1.0000000000000007,-8.726646259971662e-8,-1.5707963280665485e-7,1.0000000000000124,0.000005026548230091521,0.0000027925264056705146)" width="64" height="64" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></svg>

public/assets_default/badges/founder.svg

@@ -1 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="64.00001046823172" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="-0.000008942940667111543 -0.0000033745862566547657 64.00001046823172 64.00000545874563" height="64.00000545874563" style="-webkit-print-color-adjust: exact;"><g id="shape-d9b11490-3403-11ec-bc16-7b519797d558"><rect rx="0" ry="0" x="0" y="0" transform="matrix(1.0000000000000007,-8.726646259971662e-8,-1.5707963280665485e-7,1.0000000000000124,0.000005026548230091521,0.0000027925264056705146)" width="64" height="64" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></svg>

public/assets_default/badges/moderation.svg

@@ -1 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="64.00001046823172" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="-0.000008942940667111543 -0.0000033745862566547657 64.00001046823172 64.00000545874563" height="64.00000545874563" style="-webkit-print-color-adjust: exact;"><g id="shape-d9b11490-3403-11ec-bc16-7b519797d558"><rect rx="0" ry="0" x="0" y="0" transform="matrix(1.0000000000000007,-8.726646259971662e-8,-1.5707963280665485e-7,1.0000000000000124,0.000005026548230091521,0.0000027925264056705146)" width="64" height="64" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></svg>

public/assets_default/badges/paw.svg

@@ -1 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="64.00001046823172" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="-0.000008942940667111543 -0.0000033745862566547657 64.00001046823172 64.00000545874563" height="64.00000545874563" style="-webkit-print-color-adjust: exact;"><g id="shape-d9b11490-3403-11ec-bc16-7b519797d558"><rect rx="0" ry="0" x="0" y="0" transform="matrix(1.0000000000000007,-8.726646259971662e-8,-1.5707963280665485e-7,1.0000000000000124,0.000005026548230091521,0.0000027925264056705146)" width="64" height="64" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></svg>

public/assets_default/badges/raccoon.svg

@@ -1 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="64.00001046823172" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="-0.000008942940667111543 -0.0000033745862566547657 64.00001046823172 64.00000545874563" height="64.00000545874563" style="-webkit-print-color-adjust: exact;"><g id="shape-d9b11490-3403-11ec-bc16-7b519797d558"><rect rx="0" ry="0" x="0" y="0" transform="matrix(1.0000000000000007,-8.726646259971662e-8,-1.5707963280665485e-7,1.0000000000000124,0.000005026548230091521,0.0000027925264056705146)" width="64" height="64" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></svg>

public/assets_default/badges/supporter.svg

@@ -1 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="64.00001046823172" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="-0.000008942940667111543 -0.0000033745862566547657 64.00001046823172 64.00000545874563" height="64.00000545874563" style="-webkit-print-color-adjust: exact;"><g id="shape-d9b11490-3403-11ec-bc16-7b519797d558"><rect rx="0" ry="0" x="0" y="0" transform="matrix(1.0000000000000007,-8.726646259971662e-8,-1.5707963280665485e-7,1.0000000000000124,0.000005026548230091521,0.0000027925264056705146)" width="64" height="64" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></svg>

scripts/locale.js

@@ -1,22 +0,0 @@
-const { readdirSync } = require("fs");
-
-console.log(
-    "var locale_keys = " +
-        JSON.stringify([
-            ...readdirSync("node_modules/dayjs/locale")
-                .filter((x) => x.endsWith(".js"))
-                .map((x) => {
-                    v = x.split(".");
-                    v.pop();
-                    return v.join(".");
-                }),
-            ...readdirSync("external/lang")
-                .filter((x) => x.endsWith(".json"))
-                .map((x) => {
-                    v = x.split(".");
-                    v.pop();
-                    return v.join(".");
-                }),
-        ]) +
-        ";",
-);

scripts/publish.sh

@@ -1,32 +1,7 @@
 #!/bin/bash
-# Build and publish release to production server
+version=$(cat VERSION)
-
-# 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
-
-
-# Exit when any command fails
-set -e
-
-# 1. Build Revite
-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_SAAS;
+let target = process.env.REVOLT_SASS;
-let branch = process.env.REVOLT_SAAS_BRANCH;
+let branch = process.env.REVOLT_SASS_BRANCH;
 let DEFAULT_DIRECTORY = "public/assets_default";
 let OUT_DIRECTORY = "public/assets";
 

src/assets/changelogs.ts

@@ -1,38 +0,0 @@
-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

@@ -151,6 +151,7 @@ export const emojiDictionary = {
     hole: "🕳️",
     bomb: "💣",
     speech_balloon: "💬",
+    eye_speech_bubble: "👁️‍🗨️",
     left_speech_bubble: "🗨️",
     right_anger_bubble: "🗯️",
     thought_balloon: "💭",
@@ -672,7 +673,6 @@ export const emojiDictionary = {
     mandarin: "🍊",
     lemon: "🍋",
     banana: "🍌",
-    nanner: "🍌",
     pineapple: "🍍",
     mango: "🥭",
     apple: "🍎",
@@ -876,7 +876,6 @@ export const emojiDictionary = {
     train: "🚋",
     bus: "🚌",
     oncoming_bus: "🚍",
-    trolley: "🚎",
     trolleybus: "🚎",
     minibus: "🚐",
     ambulance: "🚑",
@@ -1848,109 +1847,4 @@ export const emojiDictionary = {
     england: "🏴󠁧󠁢󠁥󠁮󠁧󠁿",
     scotland: "🏴󠁧󠁢󠁳󠁣󠁴󠁿",
     wales: "🏴󠁧󠁢󠁷󠁬󠁳󠁿",
-    ...{
-        1984: "custom:1984.gif",
-        KekW: "custom:KekW.png",
-        amogus: "custom:amogus.gif",
-        awaa: "custom:awaa.png",
-        boohoo: "custom:boohoo.png",
-        boohoo_goes_hard: "custom:boohoo_goes_hard.png",
-        boohoo_shaken: "custom:boohoo_shaken.png",
-        cat_arrival: "custom:cat_arrival.gif",
-        cat_awson: "custom:cat_awson.png",
-        cat_blob: "custom:cat_blob.png",
-        cat_bonk: "custom:cat_bonk.png",
-        cat_concern: "custom:cat_concern.png",
-        cat_fast: "custom:cat_fast.gif",
-        cat_kitty: "custom:cat_kitty.png",
-        cat_lick: "custom:cat_lick.gif",
-        cat_not_like: "custom:cat_not_like.png",
-        cat_put: "custom:cat_put.gif",
-        cat_pwease: "custom:cat_pwease.png",
-        cat_rage: "custom:cat_rage.png",
-        cat_sad: "custom:cat_sad.png",
-        cat_snuff: "custom:cat_snuff.gif",
-        cat_spin: "custom:cat_spin.gif",
-        cat_squish: "custom:cat_squish.gif",
-        cat_stare: "custom:cat_stare.gif",
-        cat_steal: "custom:cat_steal.gif",
-        cat_sussy: "custom:cat_sussy.gif",
-        clueless: "custom:clueless.png",
-        death: "custom:death.gif",
-        developers: "custom:developers.gif",
-        fastwawa: "custom:fastwawa.gif",
-        ferris: "custom:ferris.png",
-        ferris_bongo: "custom:ferris_bongo.gif",
-        ferris_nom: "custom:ferris_nom.png",
-        ferris_pensive: "custom:ferris_pensive.png",
-        ferris_unsafe: "custom:ferris_unsafe.png",
-        flesh: "custom:flesh.png",
-        flooshed: "custom:flooshed.png",
-        flosh: "custom:flosh.png",
-        flushee: "custom:flushee.png",
-        forgor: "custom:forgor.png",
-        hollow: "custom:hollow.png",
-        john: "custom:john.png",
-        lightspeed: "custom:lightspeed.png",
-        little_guy: "custom:little_guy.png",
-        lmaoooo: "custom:lmaoooo.gif",
-        lol: "custom:lol.png",
-        looking: "custom:looking.gif",
-        marie: "custom:marie.png",
-        marie_furret: "custom:marie_furret.gif",
-        marie_smug: "custom:marie_smug.png",
-        megumin: "custom:megumin.png",
-        michi_above: "custom:michi_above.png",
-        michi_awww: "custom:michi_awww.gif",
-        michi_drag: "custom:michi_drag.gif",
-        michi_flustered: "custom:michi_flustered.png",
-        michi_glare: "custom:michi_glare.png",
-        michi_sus: "custom:michi_sus.png",
-        monkaS: "custom:monkaS.png",
-        monkaStare: "custom:monkaStare.png",
-        monkey_grr: "custom:monkey_grr.png",
-        monkey_pensive: "custom:monkey_pensive.png",
-        monkey_zany: "custom:monkey_zany.png",
-        nazu_sit: "custom:nazu_sit.png",
-        nazu_sus: "custom:nazu_sus.png",
-        ok_and: "custom:ok_and.gif",
-        owo: "custom:owo.png",
-        pat: "custom:pat.png",
-        pointThink: "custom:pointThink.png",
-        rainbowHype: "custom:rainbowHype.gif",
-        rawr: "custom:rawr.png",
-        rember: "custom:rember.png",
-        revolt: "custom:revolt.png",
-        sickly: "custom:sickly.png",
-        stare: "custom:stare.png",
-        tfyoulookingat: "custom:tfyoulookingat.png",
-        thanks: "custom:thanks.png",
-        thonk: "custom:thonk.png",
-        trol: "custom:trol.png",
-        troll_smile: "custom:troll_smile.gif",
-        uber: "custom:uber.png",
-        ubertroll: "custom:ubertroll.png",
-        verycool: "custom:verycool.png",
-        verygood: "custom:verygood.png",
-        wawafast: "custom:wawafast.gif",
-        wawastance: "custom:wawastance.png",
-        yeahokayyy: "custom:yeahokayyy.png",
-        yed: "custom:yed.png",
-        yems: "custom:yems.png",
-        michael: "custom:michael.gif",
-        charle: "custom:charle.gif",
-        sadge: "custom:sadge.webp",
-        sus: "custom:sus.webp",
-        chade: "custom:chade.gif",
-        gigachad: "custom:gigachad.webp",
-        sippy: "custom:sippy.webp",
-        ayame_heart: "custom:ayame_heart.png",
-        catgirl_peek: "custom:catgirl_peek.png",
-        girl_happy: "custom:girl_happy.png",
-        hug_plushie: "custom:hug_plushie.png",
-        huggies: "custom:huggies.png",
-        noted: "custom:noted.gif",
-        waving: "custom:waving.png",
-        mogusvented: "custom:mogusvented.png",
-    },
 };

src/assets/sounds/Audio.ts

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

src/components/README.md

@@ -1,14 +0,0 @@
-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

@@ -1,15 +1,17 @@
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
-import { Channel } from "revolt.js";
+import { Channel } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import { Button, Checkbox } from "@revoltchat/ui";
+import { dispatch, getState } from "../../redux";
 
-import { useApplicationState } from "../../mobx/State";
+import Button from "../ui/Button";
-import { SECTION_NSFW } from "../../mobx/stores/Layout";
+import Checkbox from "../ui/Checkbox";
+
+import { Children } from "../../types/Preact";
 
 const Base = styled.div`
     display: flex;
@@ -47,7 +49,9 @@ type Props = {
 
 export default observer((props: Props) => {
     const history = useHistory();
-    const layout = useApplicationState().layout;
+    const [consent, setConsent] = useState(
+        getState().sectionToggle["nsfw"] ?? false,
+    );
     const [ageGate, setAgeGate] = useState(false);
 
     if (ageGate || !props.gated) {
@@ -77,19 +81,26 @@ export default observer((props: Props) => {
             </span>
 
             <Checkbox
-                title={<Text id="app.main.channel.nsfw.confirm" />}
+                checked={consent}
-                value={layout.getSectionState(SECTION_NSFW, false)}
+                onChange={(v) => {
-                onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}
+                    setConsent(v);
-            />
+                    if (v) {
+                        dispatch({
+                            type: "SECTION_TOGGLE_SET",
+                            id: "nsfw",
+                            state: true,
+                        });
+                    } else {
+                        dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
+                    }
+                }}>
+                <Text id="app.main.channel.nsfw.confirm" />
+            </Checkbox>
             <div className="actions">
-                <Button palette="secondary" onClick={() => history.goBack()}>
+                <Button contrast onClick={() => history.goBack()}>
                     <Text id="app.special.modals.actions.back" />
                 </Button>
-                <Button
+                <Button contrast onClick={() => consent && setAgeGate(true)}>
-                    palette="secondary"
-                    onClick={() =>
-                        layout.getSectionState(SECTION_NSFW) && setAgeGate(true)
-                    }>
                     <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
                 </Button>
             </div>

src/components/common/AutoComplete.tsx

@@ -1,35 +1,32 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { Channel } from "revolt.js/dist/maps/Channels";
-import { Link } from "react-router-dom";
+import { User } from "revolt.js/dist/maps/Users";
-import { Channel, User } from "revolt.js";
+import styled, { css } from "styled-components";
-import { Emoji as CustomEmoji } from "revolt.js/esm/maps/Emojis";
-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 ServerIcon from "./ServerIcon";
-import Tooltip from "./Tooltip";
 import UserIcon from "./user/UserIcon";
 
 export type AutoCompleteState =
     | { type: "none" }
     | ({ selected: number; within: boolean } & (
-          | {
+        | {
-                type: "emoji";
+            type: "emoji";
-                matches: (string | CustomEmoji)[];
+            matches: string[];
-            }
+        }
-          | {
+        | {
-                type: "user";
+            type: "user";
-                matches: User[];
+            matches: User[];
-            }
+        }
-          | {
+        | {
-                type: "channel";
+            type: "channel";
-                matches: Channel[];
+            matches: Channel[];
-            }
+        }
-      ));
+    ));
 
 export type SearchClues = {
     users?: { type: "channel"; id: string } | { type: "all" };
@@ -82,17 +79,17 @@ export function useAutoComplete(
 
             if (current === ":" || current === "@" || current === "#") {
                 const search = content.slice(j + 1, content.length);
-                const minLen = current === ":" ? 2 : 1;
+                const minLen = current === ":" ? 2 : 1
 
                 if (search.length >= minLen) {
                     return [
                         current === "#"
                             ? "channel"
                             : current === ":"
-                            ? "emoji"
+                                ? "emoji"
-                            : "user",
+                                : "user",
                         search.toLowerCase(),
-                        current === ":" ? j + 1 : j,
+                        j + 1,
                     ];
                 }
             }
@@ -109,23 +106,16 @@ export function useAutoComplete(
 
             if (type === "emoji") {
                 // ! TODO: we should convert it to a Binary Search Tree and use that
-                const matches = [
+                const matches = Object.keys(emojiDictionary)
-                    ...Object.keys(emojiDictionary).filter((emoji: string) =>
+                    .filter((emoji: string) => emoji.match(regex))
-                        emoji.match(regex),
+                    .splice(0, 5);
-                    ),
-                    ...Array.from(client.emojis.values()).filter((emoji) =>
-                        emoji.name.match(regex),
-                    ),
-                ].splice(0, 5);
 
                 if (matches.length > 0) {
                     const currentPosition =
                         state.type !== "none" ? state.selected : 0;
 
                     setState({
-                        // @ts-ignore-next-line are you high
                         type: "emoji",
-                        // @ts-ignore-next-line
                         matches,
                         selected: Math.min(currentPosition, matches.length - 1),
                         within: false,
@@ -177,8 +167,8 @@ export function useAutoComplete(
                 const matches = (
                     search.length > 0
                         ? users.filter((user) =>
-                              user.username.toLowerCase().match(regex),
+                            user.username.toLowerCase().match(regex),
-                          )
+                        )
                         : users
                 )
                     .splice(0, 5)
@@ -209,8 +199,8 @@ export function useAutoComplete(
                 const matches = (
                     search.length > 0
                         ? channels.filter((channel) =>
-                              channel.name!.toLowerCase().match(regex),
+                            channel.name!.toLowerCase().match(regex),
-                          )
+                        )
                         : channels
                 )
                     .splice(0, 5)
@@ -245,18 +235,15 @@ export function useAutoComplete(
 
                 const content = el.value.split("");
                 if (state.type === "emoji") {
-                    const selected = state.matches[state.selected];
                     content.splice(
                         index,
                         search.length,
-                        selected instanceof CustomEmoji
+                        state.matches[state.selected],
-                            ? selected._id
-                            : selected,
                         ": ",
                     );
                 } else if (state.type === "user") {
                     content.splice(
-                        index,
+                        index - 1,
                         search.length + 1,
                         "<@",
                         state.matches[state.selected]._id,
@@ -264,7 +251,7 @@ export function useAutoComplete(
                     );
                 } else {
                     content.splice(
-                        index,
+                        index - 1,
                         search.length + 1,
                         "<#",
                         state.matches[state.selected]._id,
@@ -403,17 +390,12 @@ export default function AutoComplete({
     setState,
     onClick,
 }: Pick<AutoCompleteProps, "detached" | "state" | "setState" | "onClick">) {
-    const client = useClient();
     return (
         <Base detached={detached}>
             <div>
                 {state.type === "emoji" &&
                     state.matches.map((match, i) => (
                         <button
-                            style={{
-                                display: "flex",
-                                justifyContent: "space-between",
-                            }}
                             key={match}
                             className={i === state.selected ? "active" : ""}
                             onMouseEnter={() =>
@@ -432,61 +414,15 @@ export default function AutoComplete({
                                 })
                             }
                             onClick={onClick}>
-                            <div
+                            <Emoji
-                                style={{
+                                emoji={
-                                    display: "flex",
+                                    (emojiDictionary as Record<string, string>)[
-                                    flexDirection: "row",
+                                    match
-                                    justifyContent: "center",
+                                    ]
-                                }}>
+                                }
-                                {match instanceof CustomEmoji ? (
+                                size={20}
-                                    <img
+                            />
-                                        loading="lazy"
+                            :{match}:
-                                        src={match.imageURL}
-                                        style={{
-                                            width: `20px`,
-                                            height: `20px`,
-                                        }}
-                                    />
-                                ) : (
-                                    <Emoji
-                                        emoji={
-                                            (
-                                                emojiDictionary as Record<
-                                                    string,
-                                                    string
-                                                >
-                                            )[match]
-                                        }
-                                        size={20}
-                                    />
-                                )}
-                                <span style={{ paddingLeft: "4px" }}>{`:${
-                                    match instanceof CustomEmoji
-                                        ? match.name
-                                        : match
-                                }:`}</span>
-                            </div>
-                            {match instanceof CustomEmoji &&
-                                match.parent.type == "Server" && (
-                                    <>
-                                        <Tooltip
-                                            content={
-                                                client.servers.get(
-                                                    match.parent.id,
-                                                )?.name
-                                            }>
-                                            <Link
-                                                to={`/server/${match.parent.id}`}>
-                                                <ServerIcon
-                                                    target={client.servers.get(
-                                                        match.parent.id,
-                                                    )}
-                                                    size={20}
-                                                />
-                                            </Link>
-                                        </Tooltip>
-                                    </>
-                                )}
                         </button>
                     ))}
                 {state.type === "user" &&

src/components/common/ChannelIcon.tsx

@@ -1,11 +1,13 @@
 import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js";
+import { Channel } from "revolt.js/dist/maps/Channels";
 
-import fallback from "./assets/group.png";
+import { useContext } from "preact/hooks";
+
+import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-import { useClient } from "../../controllers/client/ClientController";
 import { ImageIconBase, IconBaseProps } from "./IconBase";
+import fallback from "./assets/group.png";
 
 interface Props extends IconBaseProps<Channel> {
     isServerChannel?: boolean;
@@ -19,7 +21,7 @@ export default observer(
                 keyof Props | "children" | "as"
             >,
     ) => {
-        const client = useClient();
+        const client = useContext(AppContext);
 
         const {
             size,
@@ -30,7 +32,7 @@ export default observer(
             ...imgProps
         } = props;
         const iconURL = client.generateFileURL(
-            target?.icon ?? attachment ?? undefined,
+            target?.icon ?? attachment,
             { max_side: 256 },
             animate,
         );

src/components/common/CollapsibleSection.tsx

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

src/components/common/Emoji.tsx

@@ -1,11 +1,9 @@
-import { emojiDictionary } from "../../assets/emojis";
+import { EmojiPacks } from "../../redux/reducers/settings";
 
-export type EmojiPack = "mutant" | "twemoji" | "noto" | "openmoji";
+let EMOJI_PACK = "mutant";
-
-let EMOJI_PACK: EmojiPack = "mutant";
 const REVISION = 3;
 
-export function setGlobalEmojiPack(pack: EmojiPack) {
+export function setEmojiPack(pack: EmojiPacks) {
     EMOJI_PACK = pack;
 }
 
@@ -42,13 +40,7 @@ function toCodePoint(rune: string) {
         .join("-");
 }
 
-export function parseEmoji(emoji: string) {
+function parseEmoji(emoji: string) {
-    if (emoji.startsWith("custom:")) {
-        return `https://dl.insrt.uk/projects/revolt/emotes/${emoji.substring(
-            7,
-        )}`;
-    }
-
     const codepoint = toCodePoint(emoji);
     return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
 }

src/components/common/IconBase.tsx

@@ -1,19 +1,14 @@
-import { API } from "revolt.js";
+import { Attachment } from "revolt-api/types/Autumn";
-import { Nullable } from "revolt.js";
+import styled, { css } from "styled-components";
-import styled, { css } from "styled-components/macro";
-
-import { Ref } from "preact";
 
 export interface IconBaseProps<T> {
     target?: T;
     url?: string;
-    attachment?: Nullable<API.File>;
+    attachment?: Attachment;
 
     size: number;
     hover?: boolean;
     animate?: boolean;
-
-    innerRef?: Ref<any>;
 }
 
 interface IconModifiers {
@@ -26,7 +21,7 @@ interface IconModifiers {
 
 export default styled.svg<IconModifiers>`
     flex-shrink: 0;
-    cursor: pointer;
+
     img {
         width: 100%;
         height: 100%;

src/components/common/LocaleSelector.tsx

@@ -1,21 +1,23 @@
-import { ComboBox } from "@revoltchat/ui";
+import { dispatch } from "../../redux";
+import { connectState } from "../../redux/connector";
 
-import { useApplicationState } from "../../mobx/State";
+import { Language, Languages } from "../../context/Locale";
 
-import { Language, Languages } from "../../../external/lang/Languages";
+import ComboBox from "../ui/ComboBox";
 
-/**
+type Props = {
- * Component providing a language selector combobox.
+    locale: string;
- * Note: this is not an observer but this is fine as we are just using a combobox.
+};
- */
-export default function LocaleSelector() {
-    const locale = useApplicationState().locale;
 
+export function LocaleSelector(props: Props) {
     return (
         <ComboBox
-            value={locale.getLanguage()}
+            value={props.locale}
             onChange={(e) =>
-                locale.setLanguage(e.currentTarget.value as Language)
+                dispatch({
+                    type: "SET_LOCALE",
+                    locale: e.currentTarget.value as Language,
+                })
             }>
             {Object.keys(Languages).map((x) => {
                 const l = Languages[x as keyof typeof Languages];
@@ -28,3 +30,9 @@ export default function LocaleSelector() {
         </ComboBox>
     );
 }
+
+export default connectState(LocaleSelector, (state) => {
+    return {
+        locale: state.locale,
+    };
+});

src/components/common/ServerHeader.tsx

@@ -2,144 +2,86 @@ import { Check } from "@styled-icons/boxicons-regular";
 import { Cog } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import { Server } from "revolt.js";
+import { ServerPermission } from "revolt.js/dist/api/permissions";
-import styled, { css } from "styled-components/macro";
+import { Server } from "revolt.js/dist/maps/Servers";
+import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
-import { IconButton } from "@revoltchat/ui";
+import Header from "../ui/Header";
+import IconButton from "../ui/IconButton";
 
-import { modalController } from "../../controllers/modals/ModalController";
 import Tooltip from "./Tooltip";
 
 interface Props {
     server: Server;
-    background?: boolean;
 }
 
-const ServerBanner = styled.div<Omit<Props, "server">>`
+const ServerName = styled.div`
-    flex-shrink: 0;
+    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-
-    background-size: cover;
-    background-repeat: norepeat;
-    background-position: center center;
-
-    ${(props) =>
-        props.background
-            ? css`
-                  height: 120px;
-
-                  .container {
-                      background: linear-gradient(
-                          0deg,
-                          var(--secondary-background),
-                          transparent
-                      );
-                  }
-              `
-            : css`
-                  background-color: var(--secondary-header);
-              `}
-
-    .container {
-        height: var(--header-height);
-
-        display: flex;
-        align-items: center;
-        padding: 0 14px;
-        font-weight: 600;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        gap: 8px;
-
-        .title {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            flex-grow: 1;
-
-            cursor: pointer;
-            color: var(--foreground);
-        }
-    }
 `;
 
 export default observer(({ server }: Props) => {
     const bannerURL = server.generateBannerURL({ width: 480 });
 
     return (
-        <ServerBanner
+        <Header
+            borders
+            placement="secondary"
             background={typeof bannerURL !== "undefined"}
             style={{
-                backgroundImage: bannerURL ? `url('${bannerURL}')` : undefined,
+                background: bannerURL ? `url('${bannerURL}')` : undefined,
             }}>
-            <div className="container">
+            {server.flags && server.flags & 1 ? (
-                {server.flags && server.flags & 1 ? (
+                <Tooltip
-                    <Tooltip
+                    content={<Text id="app.special.server-badges.official" />}
-                        content={
+                    placement={"bottom-start"}>
-                            <Text id="app.special.server-badges.official" />
+                    <svg width="20" height="20">
-                        }
+                        <image
-                        placement={"bottom-start"}>
+                            xlinkHref="/assets/badges/verified.svg"
-                        <svg width="20" height="20">
+                            height="20"
-                            <image
+                            width="20"
-                                xlinkHref="/assets/badges/verified.svg"
+                        />
-                                height="20"
+                        <image
-                                width="20"
+                            xlinkHref="/assets/badges/revolt_r.svg"
-                            />
+                            height="15"
-                            <image
+                            width="15"
-                                xlinkHref="/assets/badges/revolt_r.svg"
+                            x="2"
-                                height="15"
+                            y="3"
-                                width="15"
+                            style={
-                                x="2"
+                                "justify-content: center; align-items: center; filter: brightness(0);"
-                                y="3"
+                            }
-                                style={
+                        />
-                                    "justify-content: center; align-items: center; filter: brightness(0);"
+                    </svg>
-                                }
+                </Tooltip>
-                            />
+            ) : undefined}
-                        </svg>
+            {server.flags && server.flags & 2 ? (
-                    </Tooltip>
+                <Tooltip
-                ) : undefined}
+                    content={<Text id="app.special.server-badges.verified" />}
-                {server.flags && server.flags & 2 ? (
+                    placement={"bottom-start"}>
-                    <Tooltip
+                    <svg width="20" height="20">
-                        content={
+                        <image
-                            <Text id="app.special.server-badges.verified" />
+                            xlinkHref="/assets/badges/verified.svg"
-                        }
+                            height="20"
-                        placement={"bottom-start"}>
+                            width="20"
-                        <svg width="20" height="20">
+                        />
-                            <image
+                        <foreignObject x="2" y="2" width="15" height="15">
-                                xlinkHref="/assets/badges/verified.svg"
+                            <Check size={15} color="black" strokeWidth={8} />
-                                height="20"
+                        </foreignObject>
-                                width="20"
+                    </svg>
-                            />
+                </Tooltip>
-                            <foreignObject x="2" y="2" width="15" height="15">
+            ) : undefined}
-                                <Check
+
-                                    size={15}
+            <ServerName>{server.name}</ServerName>
-                                    color="black"
+            {(server.permission & ServerPermission.ManageServer) > 0 && (
-                                    strokeWidth={8}
+                <div className="actions">
-                                />
-                            </foreignObject>
-                        </svg>
-                    </Tooltip>
-                ) : undefined}
-                <a
-                    className="title"
-                    onClick={() =>
-                        modalController.push({ type: "server_info", server })
-                    }>
-                    {server.name}
-                </a>
-                {server.havePermission("ManageServer") && (
                     <Link to={`/server/${server._id}/settings`}>
                         <IconButton>
-                            <Cog size={20} />
+                            <Cog size={24} />
                         </IconButton>
                     </Link>
-                )}
+                </div>
-            </div>
+            )}
-        </ServerBanner>
+        </Header>
     );
 });

src/components/common/ServerIcon.tsx

@@ -1,10 +1,11 @@
 import { observer } from "mobx-react-lite";
-import { Server } from "revolt.js";
+import { Server } from "revolt.js/dist/maps/Servers";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 
 import { useContext } from "preact/hooks";
 
-import { useClient } from "../../controllers/client/ClientController";
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+
 import { IconBaseProps, ImageIconBase } from "./IconBase";
 
 interface Props extends IconBaseProps<Server> {
@@ -12,13 +13,10 @@ interface Props extends IconBaseProps<Server> {
 }
 
 const ServerText = styled.div`
-    display: flex;
+    display: grid;
-    align-items: center;
-    justify-content: center;
     padding: 0.2em;
-    font-size: 0.75rem;
-    font-weight: 600;
     overflow: hidden;
+    place-items: center;
     color: var(--foreground);
     background: var(--primary-background);
     border-radius: var(--border-radius-half);
@@ -33,12 +31,12 @@ export default observer(
                 keyof Props | "children" | "as"
             >,
     ) => {
-        const client = useClient();
+        const client = useContext(AppContext);
 
         const { target, attachment, size, animate, server_name, ...imgProps } =
             props;
         const iconURL = client.generateFileURL(
-            target?.icon ?? attachment ?? undefined,
+            target?.icon ?? attachment,
             { max_side: 256 },
             animate,
         );
@@ -51,9 +49,7 @@ export default observer(
                     {name
                         .split(" ")
                         .map((x) => x[0])
-                        .filter((x) => typeof x !== "undefined")
+                        .filter((x) => typeof x !== "undefined")}
-                        .join("")
-                        .substring(0, 3)}
                 </ServerText>
             );
         }

src/components/common/Tooltip.tsx

@@ -1,8 +1,10 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
+import { Children } from "../../types/Preact";
+
 type Props = Omit<TippyProps, "children"> & {
     children: Children;
     content: Children;
@@ -12,7 +14,7 @@ export default function Tooltip(props: Props) {
     const { children, content, ...tippyProps } = props;
 
     return (
-        <Tippy content={content} animation="shift-away" {...tippyProps}>
+        <Tippy content={content} {...tippyProps}>
             {/*
             // @ts-expect-error Type mis-match. */}
             <div style={`display: flex;`}>{children}</div>

src/components/common/UpdateIndicator.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
 
-import { useEffect, useState } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
-
-import { IconButton } from "@revoltchat/ui";
 
 import { internalSubscribe } from "../../lib/eventEmitter";
 
-import { useApplicationState } from "../../mobx/State";
+import { ThemeContext } from "../../context/Theme";
 
-import { updateSW } from "../../updateWorker";
+import IconButton from "../ui/IconButton";
+
+import { updateSW } from "../../main";
 import Tooltip from "./Tooltip";
 
 let pendingUpdate = false;
@@ -27,30 +27,27 @@ export default function UpdateIndicator({ style }: Props) {
     });
 
     if (!pending) return null;
-    const theme = useApplicationState().settings.theme;
+    const theme = useContext(ThemeContext);
 
     if (style === "titlebar") {
         return (
-            <div className="actions">
+            <div class="actions">
                 <Tooltip
                     content="A new update is available!"
                     placement="bottom">
                     <div onClick={() => updateSW(true)}>
-                        <CloudDownload
+                        <CloudDownload size={22} color={theme.success} />
-                            size={22}
-                            color={theme.getVariable("success")}
-                        />
                     </div>
                 </Tooltip>
             </div>
         );
     }
 
-    if (window.isNative && window.native.getConfig().frame) return null;
+    if (window.isNative) return null;
 
     return (
         <IconButton onClick={() => updateSW(true)}>
-            <Download size={22} color={theme.getVariable("success")} />
+            <Download size={22} color={theme.success} />
         </IconButton>
     );
 }

src/components/common/messaging/Message.tsx

@@ -1,20 +1,20 @@
 import { observer } from "mobx-react-lite";
-import { Message as MessageObject } from "revolt.js";
+import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
 
-import { useTriggerEvents } from "preact-context-menu";
+import { attachContextMenu } from "preact-context-menu";
 import { memo } from "preact/compat";
-import { useEffect, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
-
-import { Category, Button } from "@revoltchat/ui";
 
 import { internalEmit } from "../../../lib/eventEmitter";
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
-import { QueuedMessage } from "../../../mobx/stores/MessageQueue";
+import { QueuedMessage } from "../../../redux/reducers/queue";
 
-import { I18nError } from "../../../context/Locale";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 
-import { modalController } from "../../../controllers/modals/ModalController";
+import Overline from "../../ui/Overline";
+
+import { Children } from "../../../types/Preact";
 import Markdown from "../../markdown/Markdown";
 import UserIcon from "../user/UserIcon";
 import { Username } from "../user/UserShort";
@@ -25,8 +25,6 @@ import MessageBase, {
 } from "./MessageBase";
 import Attachment from "./attachments/Attachment";
 import { MessageReply } from "./attachments/MessageReply";
-import { Reactions } from "./attachments/Reactions";
-import { MessageOverlayBar } from "./bars/MessageOverlayBar";
 import Embed from "./embed/Embed";
 import InviteList from "./embed/EmbedInvite";
 
@@ -52,26 +50,27 @@ const Message = observer(
         queued,
         hideReply,
     }: Props) => {
-        const client = message.client;
+        const client = useClient();
         const user = message.author;
 
-        const content = message.content;
+        const { openScreen } = useIntermediate();
+
+        const content = message.content as string;
         const head =
             preferHead || (message.reply_ids && message.reply_ids.length > 0);
 
+        // ! TODO: tell fatal to make this type generic
+        // bree: Fatal please...
         const userContext = attachContext
-            ? useTriggerEvents("Menu", {
+            ? (attachContextMenu("Menu", {
                   user: message.author_id,
                   contextualChannel: message.channel_id,
                   // eslint-disable-next-line
-              })
+              }) as any)
             : undefined;
 
         const openProfile = () =>
-            modalController.push({
+            openScreen({ id: "profile", user_id: message.author_id });
-                type: "user_profile",
-                user_id: message.author_id,
-            });
 
         const handleUserClick = (e: MouseEvent) => {
             if (e.shiftKey && user?._id) {
@@ -87,9 +86,7 @@ const Message = observer(
         };
 
         // ! FIXME(?): animate on hover
-        const [mouseHovering, setAnimate] = useState(false);
+        const [animate, setAnimate] = useState(false);
-        const [reactionsOpen, setReactionsOpen] = useState(false);
-        useEffect(() => setAnimate(false), [replacement]);
 
         return (
             <div id={message._id}>
@@ -99,7 +96,7 @@ const Message = observer(
                             key={message_id}
                             index={index}
                             id={message_id}
-                            channel={message.channel}
+                            channel={message.channel!}
                             parent_mentions={message.mention_ids ?? []}
                         />
                     ))}
@@ -117,31 +114,28 @@ const Message = observer(
                     }
                     contrast={contrast}
                     sending={typeof queued !== "undefined"}
-                    mention={
+                    mention={message.mention_ids?.includes(client.user!._id)}
-                        message.mention_ids && client.user
+                    failed={typeof queued?.error !== "undefined"}
-                            ? message.mention_ids.includes(client.user._id)
+                    onContextMenu={
+                        attachContext
+                            ? attachContextMenu("Menu", {
+                                  message,
+                                  contextualChannel: message.channel_id,
+                                  queued,
+                              })
                             : undefined
                     }
-                    failed={typeof queued?.error !== "undefined"}
-                    {...(attachContext
-                        ? useTriggerEvents("Menu", {
-                              message,
-                              contextualChannel: message.channel_id,
-                              queued,
-                          })
-                        : undefined)}
                     onMouseEnter={() => setAnimate(true)}
                     onMouseLeave={() => setAnimate(false)}>
-                    <MessageInfo click={typeof head !== "undefined"}>
+                    <MessageInfo>
                         {head ? (
                             <UserIcon
-                                className="avatar"
                                 url={message.generateMasqAvatarURL()}
                                 target={user}
                                 size={36}
+                                onContextMenu={userContext}
                                 onClick={handleUserClick}
-                                animate={mouseHovering}
+                                animate={animate}
-                                {...(userContext as any)}
                                 showServerIdentity
                             />
                         ) : (
@@ -156,8 +150,8 @@ const Message = observer(
                                     className="author"
                                     showServerIdentity
                                     onClick={handleUserClick}
+                                    onContextMenu={userContext}
                                     masquerade={message.masquerade!}
-                                    {...userContext}
                                 />
                                 <MessageDetail
                                     message={message}
@@ -165,38 +159,21 @@ const Message = observer(
                                 />
                             </span>
                         )}
-                        {replacement ??
+                        {replacement ?? <Markdown content={content} />}
-                            (content && <Markdown content={content} />)}
                         {!queued && <InviteList message={message} />}
                         {queued?.error && (
-                            <Category>
+                            <Overline type="error" error={queued.error} />
-                                <I18nError error={queued.error} />
-                            </Category>
                         )}
                         {message.attachments?.map((attachment, index) => (
                             <Attachment
                                 key={index}
                                 attachment={attachment}
-                                hasContent={
+                                hasContent={index > 0 || content.length > 0}
-                                    index > 0 ||
-                                    (content ? content.length > 0 : false)
-                                }
                             />
                         ))}
                         {message.embeds?.map((embed, index) => (
                             <Embed key={index} embed={embed} />
                         ))}
-                        <Reactions message={message} />
-                        {(mouseHovering || reactionsOpen) &&
-                            !replacement &&
-                            !isTouchscreenDevice && (
-                                <MessageOverlayBar
-                                    reactionsOpen={reactionsOpen}
-                                    setReactionsOpen={setReactionsOpen}
-                                    message={message}
-                                    queued={queued}
-                                />
-                            )}
                     </MessageContent>
                 </MessageBase>
             </div>

src/components/common/messaging/MessageBase.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
-import { Message } from "revolt.js";
+import { Message } from "revolt.js/dist/maps/Messages";
-import styled, { css, keyframes } from "styled-components/macro";
+import styled, { css, keyframes } from "styled-components";
 import { decodeTime } from "ulid";
 
 import { Text } from "preact-i18n";
@@ -134,7 +134,7 @@ export default styled.div<BaseMessageProps>`
     }
 `;
 
-export const MessageInfo = styled.div<{ click: boolean }>`
+export const MessageInfo = styled.div`
     width: 62px;
     display: flex;
     flex-shrink: 0;
@@ -142,14 +142,6 @@ export const MessageInfo = styled.div<{ click: boolean }>`
     flex-direction: row;
     justify-content: center;
 
-    .avatar {
-        user-select: none;
-        cursor: pointer;
-        &:active {
-            transform: translateY(1px);
-        }
-    }
-
     .copyBracket {
         opacity: 0;
         position: absolute;
@@ -160,6 +152,15 @@ export const MessageInfo = styled.div<{ click: boolean }>`
         position: absolute;
     }
 
+    svg {
+        user-select: none;
+        cursor: pointer;
+
+        &:active {
+            transform: translateY(1px);
+        }
+    }
+
     time {
         opacity: 0;
     }
@@ -191,19 +192,9 @@ export const MessageInfo = styled.div<{ click: boolean }>`
         margin-right: 0.5em;
         color: var(--tertiary-foreground);
     }
-
-    /*${(props) =>
-        props.click &&
-        css`
-            cursor: pointer;
-        `}*/
 `;
 
 export const MessageContent = styled.div`
-    // Position relatively so we can put
-    // the overlay in the right place.
-    position: relative;
-
     min-width: 0;
     flex-grow: 1;
     display: flex;

src/components/common/messaging/MessageBox.tsx

@@ -1,15 +1,13 @@
-import { HappyBeaming, Send, ShieldX } from "@styled-icons/boxicons-solid";
+import { Send, ShieldX } from "@styled-icons/boxicons-solid";
 import Axios, { CancelTokenSource } from "axios";
 import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js";
+import { ChannelPermission } from "revolt.js/dist/api/permissions";
-import styled, { css } from "styled-components/macro";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import styled, { css } from "styled-components";
 import { ulid } from "ulid";
 
 import { Text } from "preact-i18n";
-import { memo } from "preact/compat";
+import { useCallback, useContext, useEffect, useState } from "preact/hooks";
-import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
-
-import { IconButton, Picker } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { debounce } from "../../../lib/debounce";
@@ -22,24 +20,21 @@ import {
     SMOOTH_SCROLL_ON_RECEIVE,
 } from "../../../lib/renderer/Singleton";
 
-import { state, useApplicationState } from "../../../mobx/State";
+import { dispatch, getState } from "../../../redux";
-import { Reply } from "../../../mobx/stores/MessageQueue";
+import { Reply } from "../../../redux/reducers/queue";
 
-import { dayjs } from "../../../context/Locale";
+import { SoundContext } from "../../../context/Settings";
-
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { emojiDictionary } from "../../../assets/emojis";
-import {
-    clientController,
-    useClient,
-} from "../../../controllers/client/ClientController";
-import { takeError } from "../../../controllers/client/jsx/error";
 import {
     FileUploader,
     grabFiles,
     uploadFile,
-} from "../../../controllers/client/jsx/legacy/FileUploads";
+} from "../../../context/revoltjs/FileUploads";
-import { modalController } from "../../../controllers/modals/ModalController";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import { RenderEmoji } from "../../markdown/plugins/emoji";
+import { takeError } from "../../../context/revoltjs/util";
+
+import IconButton from "../../ui/IconButton";
+
 import AutoComplete, { useAutoComplete } from "../AutoComplete";
 import { PermissionTooltip } from "../Tooltip";
 import FilePreview from "./bars/FilePreview";
@@ -62,7 +57,6 @@ export type UploadState =
     | { type: "failed"; files: File[]; error: string };
 
 const Base = styled.div`
-    z-index: 1;
     display: flex;
     align-items: flex-start;
     background: var(--message-box);
@@ -85,15 +79,9 @@ const Blocked = styled.div`
     user-select: none;
     font-size: var(--text-size);
     color: var(--tertiary-foreground);
-    flex-grow: 1;
-    cursor: not-allowed;
 
     .text {
-        padding: var(--message-box-padding);
+        padding: 14px 14px 14px 0;
-    }
-
-    > div > div {
-        cursor: default;
     }
 
     svg {
@@ -102,17 +90,13 @@ const Blocked = styled.div`
 `;
 
 const Action = styled.div`
-    > a {
+    display: flex;
+    place-items: center;
+
+    > div {
         height: 48px;
         width: 48px;
-        display: flex;
+        padding: 12px;
-        align-items: center;
-        justify-content: center;
-        /*padding: 14px 0 14px 14px;*/
-    }
-
-    .mobile {
-        width: 62px;
     }
 
     ${() =>
@@ -124,139 +108,28 @@ const Action = styled.div`
         `}
 `;
 
-const FileAction = styled.div`
-    > a {
-        height: 48px;
-        width: 62px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-`;
-
-const FloatingLayer = styled.div`
-    position: relative;
-`;
-
-const ThisCodeWillBeReplacedAnywaysSoIMightAsWellJustDoItThisWay__Padding = styled.div`
-    width: 16px;
-`;
-
 // For sed replacement
 const RE_SED = new RegExp("^s/([^])*/([^])*$");
 
-// Tests for code block delimiters (``` at start of line)
-const RE_CODE_DELIMITER = new RegExp("^```", "gm");
-
-export const HackAlertThisFileWillBeReplaced = observer(
-    ({
-        onSelect,
-        onClose,
-    }: {
-        onSelect: (emoji: string) => void;
-        onClose: () => void;
-    }) => {
-        const renderEmoji = useMemo(
-            () =>
-                memo(({ emoji }: { emoji: string }) => (
-                    <RenderEmoji match={emoji} {...({} as any)} />
-                )),
-            [],
-        );
-
-        const emojis: Record<string, any> = {
-            default: Object.keys(emojiDictionary).map((id) => ({ id })),
-        };
-
-        // ! 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 = [...clientController.getReadyClient()!.emojis.values()]
-                .filter(
-                    (emoji) =>
-                        emoji.parent.type !== "Detached" &&
-                        emoji.parent.id === server._id,
-                )
-                .map(({ _id, name }) => ({ id: _id, name }));
-
-            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={onSelect}
-                onClose={onClose}
-            />
-        );
-    },
-);
-
 // ! FIXME: add to app config and load from app config
-export const CAN_UPLOAD_AT_ONCE = 5;
+export const CAN_UPLOAD_AT_ONCE = 4;
 
 export default observer(({ channel }: Props) => {
-    const state = useApplicationState();
+    const [draft, setDraft] = useState(getState().drafts[channel._id] ?? "");
 
     const [uploadState, setUploadState] = useState<UploadState>({
         type: "none",
     });
     const [typing, setTyping] = useState<boolean | number>(false);
     const [replies, setReplies] = useState<Reply[]>([]);
-    const [picker, setPicker] = useState(false);
+    const playSound = useContext(SoundContext);
-    const client = useClient();
+    const { openScreen } = useIntermediate();
+    const client = useContext(AppContext);
     const translate = useTranslation();
 
-    const closePicker = useCallback(() => setPicker(false), []);
-
     const renderer = getRenderer(channel);
 
-    if (channel.server?.member?.timeout) {
+    if (!(channel.permission & ChannelPermission.SendMessage)) {
-        return (
-            <Base>
-                <Blocked>
-                    <Action>
-                        <PermissionTooltip
-                            permission="SendMessages"
-                            placement="top">
-                            <ShieldX size={22} />
-                        </PermissionTooltip>
-                    </Action>
-                    <div className="text">
-                        <Text
-                            id="app.main.channel.misc.timed_out"
-                            fields={{
-                                // TODO: make this reactive
-                                time: dayjs().to(
-                                    channel.server.member.timeout,
-                                    true,
-                                ),
-                            }}
-                        />
-                    </div>
-                </Blocked>
-            </Base>
-        );
-    }
-
-    if (!channel.havePermission("SendMessage")) {
         return (
             <Base>
                 <Blocked>
@@ -275,18 +148,27 @@ export default observer(({ channel }: Props) => {
         );
     }
 
-    // Push message content to draft.
     const setMessage = useCallback(
-        (content?: string) => state.draft.set(channel._id, content),
+        (content?: string) => {
-        [state.draft, channel._id],
+            setDraft(content ?? "");
+
+            if (content) {
+                dispatch({
+                    type: "SET_DRAFT",
+                    channel: channel._id,
+                    content,
+                });
+            } else {
+                dispatch({
+                    type: "CLEAR_DRAFT",
+                    channel: channel._id,
+                });
+            }
+        },
+        [channel._id],
     );
 
     useEffect(() => {
-        /**
-         *
-         * @param content
-         * @param action
-         */
         function append(content: string, action: "quote" | "mention") {
             const text =
                 action === "quote"
@@ -296,10 +178,10 @@ export default observer(({ channel }: Props) => {
                           .join("\n")}\n\n`
                     : `${content} `;
 
-            if (!state.draft.has(channel._id)) {
+            if (!draft || draft.length === 0) {
                 setMessage(text);
             } else {
-                setMessage(`${state.draft.get(channel._id)}\n${text}`);
+                setMessage(`${draft}\n${text}`);
             }
         }
 
@@ -308,20 +190,16 @@ export default observer(({ channel }: Props) => {
             "append",
             append as (...args: unknown[]) => void,
         );
-    }, [state.draft, channel._id, setMessage]);
+    }, [draft, setMessage]);
 
-    /**
-     * Trigger send message.
-     */
     async function send() {
         if (uploadState.type === "uploading" || uploadState.type === "sending")
             return;
 
-        const content = state.draft.get(channel._id)?.trim() ?? "";
+        const content = draft?.trim() ?? "";
         if (uploadState.type === "attached") return sendFile(content);
         if (content.length === 0) return;
 
-        internalEmit("NewMessages", "hide");
         stopTyping();
         setMessage();
         setReplies([]);
@@ -337,7 +215,7 @@ export default observer(({ channel }: Props) => {
             );
             renderer.messages.reverse();
 
-            if (msg?.content) {
+            if (msg) {
                 // eslint-disable-next-line prefer-const
                 let [_, toReplace, newText, flags] = content.split(/\//);
 
@@ -369,15 +247,20 @@ export default observer(({ channel }: Props) => {
                 }
             }
         } else {
-            state.settings.sounds.playSound("outbound");
+            playSound("outbound");
 
-            state.queue.add(nonce, channel._id, {
+            dispatch({
-                _id: nonce,
+                type: "QUEUE_ADD",
+                nonce,
                 channel: channel._id,
-                author: client.user!._id,
+                message: {
+                    _id: nonce,
+                    channel: channel._id,
+                    author: client.user!._id,
 
-                content,
+                    content,
-                replies,
+                    replies,
+                },
             });
 
             defer(() => renderer.jumpToBottom(SMOOTH_SCROLL_ON_RECEIVE));
@@ -389,20 +272,18 @@ export default observer(({ channel }: Props) => {
                     replies,
                 });
             } catch (error) {
-                state.queue.fail(nonce, takeError(error));
+                dispatch({
+                    type: "QUEUE_FAIL",
+                    error: takeError(error),
+                    nonce,
+                });
             }
         }
     }
 
-    /**
-     *
-     * @param content
-     * @returns
-     */
     async function sendFile(content: string) {
         if (uploadState.type !== "attached") return;
         const attachments: string[] = [];
-        setMessage;
 
         const cancel = Axios.CancelToken.source();
         const files = uploadState.files;
@@ -479,7 +360,7 @@ export default observer(({ channel }: Props) => {
 
         setMessage();
         setReplies([]);
-        state.settings.sounds.playSound("outbound");
+        playSound("outbound");
 
         if (files.length > CAN_UPLOAD_AT_ONCE) {
             setUploadState({
@@ -491,10 +372,6 @@ export default observer(({ channel }: Props) => {
         }
     }
 
-    /**
-     *
-     * @returns
-     */
     function startTyping() {
         if (typeof typing === "number" && +new Date() < typing) return;
 
@@ -508,10 +385,6 @@ export default observer(({ channel }: Props) => {
         }
     }
 
-    /**
-     *
-     * @param force
-     */
     function stopTyping(force?: boolean) {
         if (force || typing) {
             const ws = client.websocket;
@@ -525,21 +398,6 @@ export default observer(({ channel }: Props) => {
         }
     }
 
-    function isInCodeBlock(cursor: number): boolean {
-        const content = state.draft.get(channel._id) || "";
-        const contentBeforeCursor = content.substring(0, cursor);
-
-        let delimiterCount = 0;
-        for (const delimiter of contentBeforeCursor.matchAll(
-            RE_CODE_DELIMITER,
-        )) {
-            delimiterCount++;
-        }
-
-        // Odd number of ``` delimiters before cursor => we are in code block
-        return delimiterCount % 2 === 1;
-    }
-
     // TODO: change to useDebounceCallback
     // eslint-disable-next-line
     const debouncedStopTyping = useCallback(
@@ -576,10 +434,7 @@ export default observer(({ channel }: Props) => {
                                 files: [...uploadState.files, ...files],
                             }),
                         () =>
-                            modalController.push({
+                            openScreen({ id: "error", error: "FileTooLarge" }),
-                                type: "error",
-                                error: "FileTooLarge",
-                            }),
                         true,
                     )
                 }
@@ -602,23 +457,9 @@ export default observer(({ channel }: Props) => {
                 replies={replies}
                 setReplies={setReplies}
             />
-            <FloatingLayer>
-                {picker && (
-                    <HackAlertThisFileWillBeReplaced
-                        onSelect={(emoji) => {
-                            const v = state.draft.get(channel._id);
-                            state.draft.set(
-                                channel._id,
-                                `${v ? `${v} ` : ""}:${emoji}:`,
-                            );
-                        }}
-                        onClose={closePicker}
-                    />
-                )}
-            </FloatingLayer>
             <Base>
-                {channel.havePermission("UploadFiles") ? (
+                {channel.permission & ChannelPermission.UploadFiles ? (
-                    <FileAction>
+                    <Action>
                         <FileUploader
                             size={24}
                             behaviour="multi"
@@ -653,10 +494,8 @@ export default observer(({ channel }: Props) => {
                                 }
                             }}
                         />
-                    </FileAction>
+                    </Action>
-                ) : (
+                ) : undefined}
-                    <ThisCodeWillBeReplacedAnywaysSoIMightAsWellJustDoItThisWay__Padding />
-                )}
                 <TextAreaAutoSize
                     autoFocus
                     hideBorder
@@ -664,7 +503,7 @@ export default observer(({ channel }: Props) => {
                     id="message"
                     maxLength={2000}
                     onKeyUp={onKeyUp}
-                    value={state.draft.get(channel._id) ?? ""}
+                    value={draft ?? ""}
                     padding="var(--message-box-padding)"
                     onKeyDown={(e) => {
                         if (e.ctrlKey && e.key === "Enter") {
@@ -676,7 +515,7 @@ export default observer(({ channel }: Props) => {
 
                         if (
                             e.key === "ArrowUp" &&
-                            !state.draft.has(channel._id)
+                            (!draft || draft.length === 0)
                         ) {
                             e.preventDefault();
                             internalEmit("MessageRenderer", "edit_last");
@@ -687,8 +526,7 @@ export default observer(({ channel }: Props) => {
                             !e.shiftKey &&
                             !e.isComposing &&
                             e.key === "Enter" &&
-                            !isTouchscreenDevice &&
+                            !isTouchscreenDevice
-                            !isInCodeBlock(e.currentTarget.selectionStart)
                         ) {
                             e.preventDefault();
                             return send();
@@ -736,20 +574,12 @@ export default observer(({ channel }: Props) => {
                     onFocus={onFocus}
                     onBlur={onBlur}
                 />
-                {state.experiments.isEnabled("picker") && (
-                    <Action>
-                        <IconButton onClick={() => setPicker(!picker)}>
-                            <HappyBeaming size={24} />
-                        </IconButton>
-                    </Action>
-                )}
                 <Action>
+                    {/*<IconButton onClick={emojiPicker}>
+                        <HappyAlt size={20} />
+                </IconButton>*/}
                     <IconButton
-                        className={
+                        className="mobile"
-                            state.settings.get("appearance:show_send_button")
-                                ? ""
-                                : "mobile"
-                        }
                         onClick={send}
                         onMouseDown={(e) => e.preventDefault()}>
                         <Send size={20} />

src/components/common/messaging/SystemMessage.tsx

@@ -9,26 +9,16 @@ import {
     EditAlt,
     Edit,
     MessageSquareEdit,
-    Key,
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { Message, API } from "revolt.js";
+import { SystemMessage as SystemMessageI } from "revolt-api/types/Channels";
-import styled from "styled-components/macro";
+import { Message } from "revolt.js/dist/maps/Messages";
-import { decodeTime } from "ulid";
+import styled from "styled-components";
 
-import { useTriggerEvents } from "preact-context-menu";
+import { attachContextMenu } from "preact-context-menu";
-import { Text } from "preact-i18n";
-
-import { Row } from "@revoltchat/ui";
 
 import { TextReact } from "../../../lib/i18n";
 
-import { useApplicationState } from "../../../mobx/State";
-
-import { dayjs } from "../../../context/Locale";
-
-import Markdown from "../../markdown/Markdown";
-import Tooltip from "../Tooltip";
 import UserShort from "../user/UserShort";
 import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
 
@@ -39,26 +29,6 @@ const SystemContent = styled.div`
     flex-wrap: wrap;
     align-items: center;
     flex-direction: row;
-    font-size: 14px;
-    color: var(--secondary-foreground);
-
-    span {
-        font-weight: 600;
-        color: var(--foreground);
-    }
-
-    svg {
-        margin-inline-end: 4px;
-    }
-
-    svg,
-    span {
-        cursor: pointer;
-    }
-
-    span:hover {
-        text-decoration: underline;
-    }
 `;
 
 interface Props {
@@ -78,23 +48,20 @@ const iconDictionary = {
     channel_renamed: EditAlt,
     channel_description_changed: Edit,
     channel_icon_changed: MessageSquareEdit,
-    channel_ownership_changed: Key,
     text: InfoCircle,
 };
 
 export const SystemMessage = observer(
     ({ attachContext, message, highlight, hideInfo }: Props) => {
         const data = message.asSystemMessage;
-        if (!data) return null;
-
-        const settings = useApplicationState().settings;
-
         const SystemMessageIcon =
-            iconDictionary[data.type as API.SystemMessage["type"]] ??
+            iconDictionary[data.type as SystemMessageI["type"]] ?? InfoCircle;
-            InfoCircle;
 
-        let children = null;
+        let children;
         switch (data.type) {
+            case "text":
+                children = <span>{data.content}</span>;
+                break;
             case "user_added":
             case "user_remove":
                 children = (
@@ -114,39 +81,16 @@ export const SystemMessage = observer(
             case "user_joined":
             case "user_left":
             case "user_kicked":
-            case "user_banned": {
+            case "user_banned":
-                const createdAt = data.user ? decodeTime(data.user._id) : null;
                 children = (
-                    <Row centred>
+                    <TextReact
-                        <TextReact
+                        id={`app.main.channel.system.${data.type}`}
-                            id={`app.main.channel.system.${data.type}`}
+                        fields={{
-                            fields={{
+                            user: <UserShort user={data.user} />,
-                                user: <UserShort user={data.user} />,
+                        }}
-                            }}
+                    />
-                        />
-                        {data.type == "user_joined" &&
-                            createdAt &&
-                            (settings.get("appearance:show_account_age") ||
-                                Date.now() - createdAt <
-                                    1000 * 60 * 60 * 24 * 7) && (
-                                <Tooltip
-                                    content={
-                                        <Text
-                                            id="app.main.channel.system.registered_at"
-                                            fields={{
-                                                time: dayjs(
-                                                    createdAt,
-                                                ).fromNow(),
-                                            }}
-                                        />
-                                    }>
-                                    <InfoCircle size={16} />
-                                </Tooltip>
-                            )}
-                    </Row>
                 );
                 break;
-            }
             case "channel_renamed":
                 children = (
                     <TextReact
@@ -169,35 +113,21 @@ export const SystemMessage = observer(
                     />
                 );
                 break;
-            case "channel_ownership_changed":
-                children = (
-                    <TextReact
-                        id={`app.main.channel.system.channel_ownership_changed`}
-                        fields={{
-                            from: <UserShort user={data.from} />,
-                            to: <UserShort user={data.to} />,
-                        }}
-                    />
-                );
-                break;
-            case "text":
-                if (message.system?.type === "text") {
-                    children = <Markdown content={message.system?.content} />;
-                }
-                break;
         }
 
         return (
             <MessageBase
                 highlight={highlight}
-                {...(attachContext
+                onContextMenu={
-                    ? useTriggerEvents("Menu", {
+                    attachContext
-                          message,
+                        ? attachContextMenu("Menu", {
-                          contextualChannel: message.channel,
+                              message,
-                      })
+                              contextualChannel: message.channel,
-                    : undefined)}>
+                          })
+                        : undefined
+                }>
                 {!hideInfo && (
-                    <MessageInfo click={false}>
+                    <MessageInfo>
                         <MessageDetail message={message} position="left" />
                         <SystemMessageIcon className="systemIcon" />
                     </MessageInfo>

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

@@ -1,11 +1,12 @@
-import { API } from "revolt.js";
+import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
 
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
-import { useTriggerEvents } from "preact-context-menu";
+import { attachContextMenu } from "preact-context-menu";
-import { useState } from "preact/hooks";
+import { useContext, 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";
@@ -13,14 +14,14 @@ import Spoiler from "./Spoiler";
 import TextFile from "./TextFile";
 
 interface Props {
-    attachment: API.File;
+    attachment: AttachmentI;
-    hasContent?: boolean;
+    hasContent: boolean;
 }
 
 const MAX_ATTACHMENT_WIDTH = 480;
 
 export default function Attachment({ attachment, hasContent }: Props) {
-    const client = useClient();
+    const client = useContext(AppContext);
     const { filename, metadata } = attachment;
     const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
 
@@ -36,7 +37,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                 <SizedGrid
                     width={metadata.width}
                     height={metadata.height}
-                    {...useTriggerEvents("Menu", {
+                    onContextMenu={attachContextMenu("Menu", {
                         attachment,
                     })}
                     className={classNames({

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

@@ -1,33 +1,33 @@
 import {
-    LinkExternal,
-    Headphone,
     Download,
+    LinkExternal,
+    File,
+    Headphone,
+    Video,
 } from "@styled-icons/boxicons-regular";
-import { File, Video } from "@styled-icons/boxicons-solid";
+import { Attachment } from "revolt-api/types/Autumn";
-import { isFirefox } from "react-device-detect";
-import { API } from "revolt.js";
 
 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 { useClient } from "../../../../controllers/client/ClientController";
+import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+
+import IconButton from "../../../ui/IconButton";
 
 interface Props {
-    attachment: API.File;
+    attachment: Attachment;
 }
 
 export default function AttachmentActions({ attachment }: Props) {
-    const client = useClient();
+    const client = useContext(AppContext);
     const { filename, metadata, size } = attachment;
 
-    const url = client.generateFileURL(attachment);
+    const url = client.generateFileURL(attachment)!;
     const open_url = `${url}/${filename}`;
-    const download_url = url?.replace("attachments", "attachments/download");
+    const download_url = url.replace("attachments", "attachments/download");
 
     const filesize = determineFileSize(size);
 
@@ -52,7 +52,7 @@ export default function AttachmentActions({ attachment }: Props) {
                         href={download_url}
                         className={styles.downloadIcon}
                         download
-                        target={isFirefox || window.native ? "_blank" : "_self"}
+                        target="_blank"
                         rel="noreferrer">
                         <IconButton>
                             <Download size={24} />
@@ -70,7 +70,7 @@ export default function AttachmentActions({ attachment }: Props) {
                         href={download_url}
                         className={styles.downloadIcon}
                         download
-                        target={isFirefox || window.native ? "_blank" : "_self"}
+                        target="_blank"
                         rel="noreferrer">
                         <IconButton>
                             <Download size={24} />
@@ -90,7 +90,7 @@ export default function AttachmentActions({ attachment }: Props) {
                         href={download_url}
                         className={styles.downloadIcon}
                         download
-                        target={isFirefox || window.native ? "_blank" : "_self"}
+                        target="_blank"
                         rel="noreferrer">
                         <IconButton>
                             <Download size={24} />
@@ -119,7 +119,7 @@ export default function AttachmentActions({ attachment }: Props) {
                         href={download_url}
                         className={styles.downloadIcon}
                         download
-                        target={isFirefox || window.native ? "_blank" : "_self"}
+                        target="_blank"
                         rel="noreferrer">
                         <IconButton>
                             <Download size={24} />

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

@@ -1,13 +1,12 @@
-import styled from "styled-components/macro";
+import styled from "styled-components";
 
-import { Ref } from "preact";
+import { Children } from "../../../../types/Preact";
 
 const Grid = styled.div<{ width: number; height: number }>`
-    --width: ${(props) => props.width}px;
+    --width: ${props => props.width}px;
-    --height: ${(props) => props.height}px;
+    --height: ${props => props.height}px;
 
     display: grid;
-    overflow: hidden;
     aspect-ratio: ${(props) => props.width} / ${(props) => props.height};
 
     max-width: min(var(--width), var(--attachment-max-width));
@@ -43,7 +42,7 @@ const Grid = styled.div<{ width: number; height: number }>`
         overflow: hidden;
 
         object-fit: contain;
-
+        
         // It's something
         object-position: left;
     }
@@ -72,14 +71,13 @@ type Props = Omit<
     children?: Children;
     width: number;
     height: number;
-    innerRef?: Ref<any>;
 };
 
 export function SizedGrid(props: Props) {
-    const { width, height, children, innerRef, ...divProps } = props;
+    const { width, height, children, ...divProps } = props;
 
     return (
-        <Grid {...divProps} width={width} height={height} ref={innerRef}>
+        <Grid {...divProps} width={width} height={height}>
             {children}
         </Grid>
     );

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

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

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

@@ -2,8 +2,10 @@ import { Reply } from "@styled-icons/boxicons-regular";
 import { File } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
-import { Channel, Message, API } from "revolt.js";
+import { RelationshipStatus } from "revolt-api/types/Users";
-import styled, { css } from "styled-components/macro";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message } from "revolt.js/dist/maps/Messages";
+import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
 import { useLayoutEffect, useState } from "preact/hooks";
@@ -16,7 +18,7 @@ import { SystemMessage } from "../SystemMessage";
 
 interface Props {
     parent_mentions: string[];
-    channel?: Channel;
+    channel: Channel;
     index: number;
     id: string;
 }
@@ -26,25 +28,30 @@ export const ReplyBase = styled.div<{
     fail?: boolean;
     preview?: boolean;
 }>`
-    gap: 8px;
+    gap: 4px;
     min-width: 0;
     display: flex;
     margin-inline-start: 30px;
     margin-inline-end: 12px;
     font-size: 0.8em;
     user-select: none;
-    align-items: end;
+    align-items: center;
     color: var(--secondary-foreground);
 
+    /* nizune's Discord replies,
+        does not scale properly with messages,
+        reverted temporarily
     &::before {
         content: "";
-        flex-shrink: 0;
-        width: 22px;
         height: 10px;
-        border-inline-start: 2px solid var(--message-box);
+        width: 28px;
-        border-top: 2px solid var(--message-box);
+        margin-inline-end: 2px;
         align-self: flex-end;
-    }
+        display: flex;
+        border-top: 2.2px solid var(--tertiary-foreground);
+        border-inline-start: 2.2px solid var(--tertiary-foreground);
+        border-start-start-radius: 6px;
+    }*/
 
     * {
         overflow: hidden;
@@ -53,7 +60,6 @@ export const ReplyBase = styled.div<{
     }
 
     .user {
-        //margin-inline-start: 12px;
         gap: 6px;
         display: flex;
         flex-shrink: 0;
@@ -68,6 +74,13 @@ export const ReplyBase = styled.div<{
                 text-decoration: underline;
             }
         }
+
+        /*&::before {
+            position:relative;
+            width: 50px;
+            height: 2px;
+            background: red;
+        }*/
     }
 
     .content {
@@ -85,10 +98,6 @@ export const ReplyBase = styled.div<{
         transition: transform ease-in-out 0.1s;
         filter: brightness(1);
 
-        > svg {
-            flex-shrink: 0;
-        }
-
         > span > p {
             display: flex;
             align-items: center;
@@ -106,6 +115,10 @@ export const ReplyBase = styled.div<{
         > * {
             pointer-events: none;
         }
+
+        /*> span > p {
+            display: flex;
+        }*/
     }
 
     > svg:first-child {
@@ -124,10 +137,6 @@ export const ReplyBase = styled.div<{
         props.head &&
         css`
             margin-top: 12px;
-
-            &::before {
-                border-start-start-radius: 4px;
-            }
         `}
 
     ${(props) =>
@@ -139,8 +148,6 @@ export const ReplyBase = styled.div<{
 
 export const MessageReply = observer(
     ({ index, channel, id, parent_mentions }: Props) => {
-        if (!channel) return null;
-
         const view = getRenderer(channel);
         if (view.state !== "RENDER") return null;
 
@@ -170,9 +177,8 @@ export const MessageReply = observer(
 
         return (
             <ReplyBase head={index === 0}>
-                {/*<Reply size={16} />*/}
+                <Reply size={16} />
-
+                {message.author?.relationship === RelationshipStatus.Blocked ? (
-                {message.author?.relationship === "Blocked" ? (
                     <Text id="app.main.channel.misc.blocked_user" />
                 ) : (
                     <>
@@ -182,7 +188,7 @@ export const MessageReply = observer(
                             <>
                                 <div className="user">
                                     <UserShort
-                                        size={14}
+                                        size={16}
                                         showServerIdentity
                                         user={message.author}
                                         masquerade={message.masquerade!}
@@ -221,15 +227,12 @@ export const MessageReply = observer(
                                             </em>
                                         </>
                                     )}
-                                    {message.content && (
+                                    <Markdown
-                                        <Markdown
+                                        disallowBigEmoji
-                                            disallowBigEmoji
+                                        content={(
-                                            content={message.content.replace(
+                                            message.content as string
-                                                /\n/g,
+                                        ).replace(/\n/g, " ")}
-                                                " ",
+                                    />
-                                            )}
-                                        />
-                                    )}
                                 </div>
                             </>
                         )}

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

@@ -1,239 +0,0 @@
-import {
-    autoPlacement,
-    offset,
-    shift,
-    useFloating,
-} from "@floating-ui/react-dom-interactions";
-import { Plus } from "@styled-icons/boxicons-regular";
-import { observer } from "mobx-react-lite";
-import { Message } from "revolt.js";
-import styled, { css } from "styled-components";
-
-import { createPortal } from "preact/compat";
-import { useCallback, useRef, useState } from "preact/hooks";
-
-import { IconButton } from "@revoltchat/ui";
-
-import { emojiDictionary } from "../../../../assets/emojis";
-import { useClient } from "../../../../controllers/client/ClientController";
-import { RenderEmoji } from "../../../markdown/plugins/emoji";
-import { HackAlertThisFileWillBeReplaced } from "../MessageBox";
-
-interface Props {
-    message: Message;
-}
-
-/**
- * Reaction list element
- */
-const List = styled.div`
-    gap: 0.4em;
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 0.2em;
-    align-items: center;
-
-    .add {
-        display: none;
-    }
-
-    &:hover .add {
-        display: grid;
-    }
-`;
-
-/**
- * List divider
- */
-const Divider = styled.div`
-    width: 1px;
-    height: 14px;
-    background: var(--tertiary-foreground);
-`;
-
-/**
- * Reaction styling
- */
-const Reaction = styled.div<{ active: boolean }>`
-    padding: 0.4em;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: middle;
-    border: 1px solid transparent;
-    color: var(--secondary-foreground);
-    border-radius: var(--border-radius);
-    background: var(--secondary-background);
-
-    img {
-        width: 1.2em;
-        height: 1.2em;
-        object-fit: contain;
-    }
-
-    &:hover {
-        filter: brightness(0.9);
-    }
-
-    &:active {
-        filter: brightness(0.75);
-    }
-
-    ${(props) =>
-        props.active &&
-        css`
-            border-color: var(--accent);
-        `}
-`;
-
-/**
- * Render reactions on a message
- */
-export const Reactions = observer(({ message }: Props) => {
-    const client = useClient();
-    const [showPicker, setPicker] = useState(false);
-
-    /**
-     * Render individual reaction entries
-     */
-    const Entry = useCallback(
-        observer(({ id, user_ids }: { id: string; user_ids?: Set<string> }) => {
-            const active = user_ids?.has(client.user!._id) || false;
-
-            return (
-                <Reaction
-                    active={active}
-                    onClick={() =>
-                        active ? message.unreact(id) : message.react(id)
-                    }>
-                    <RenderEmoji match={id} /> {user_ids?.size || 0}
-                </Reaction>
-            );
-        }),
-        [],
-    );
-
-    /**
-     * Determine two lists of 'required' and 'optional' reactions
-     */
-    const { required, optional } = (() => {
-        const required = new Set<string>();
-        const optional = new Set<string>();
-
-        if (message.interactions?.reactions) {
-            for (const reaction of message.interactions.reactions) {
-                required.add(reaction);
-            }
-        }
-
-        for (const key of message.reactions.keys()) {
-            if (!required.has(key)) {
-                optional.add(key);
-            }
-        }
-
-        return {
-            required,
-            optional,
-        };
-    })();
-
-    // Don't render list if nothing is going to show anyways
-    if (required.size === 0 && optional.size === 0) return null;
-
-    return (
-        <List>
-            {Array.from(required, (id) => (
-                <Entry key={id} id={id} user_ids={message.reactions.get(id)} />
-            ))}
-            {required.size !== 0 && optional.size !== 0 && <Divider />}
-            {Array.from(optional, (id) => (
-                <Entry key={id} id={id} user_ids={message.reactions.get(id)} />
-            ))}
-            {message.channel?.havePermission("React") && (
-                <ReactionWrapper
-                    message={message}
-                    open={showPicker}
-                    setOpen={setPicker}>
-                    <IconButton className={showPicker ? "" : "add"}>
-                        <Plus size={20} />
-                    </IconButton>
-                </ReactionWrapper>
-            )}
-        </List>
-    );
-});
-
-const Base = styled.div`
-    > div {
-        position: unset;
-    }
-`;
-
-/**
- * ! FIXME: rewrite
- */
-export const ReactionWrapper: React.FC<{
-    message: Message;
-    open: boolean;
-    setOpen: (v: boolean) => void;
-}> = ({ open, setOpen, message, children }) => {
-    const { x, y, reference, floating, strategy } = useFloating({
-        open,
-        middleware: [
-            offset(4),
-            shift({ mainAxis: true, crossAxis: true, padding: 4 }),
-            autoPlacement(),
-        ],
-    });
-
-    const skip = useRef();
-    const toggle = () => {
-        if (skip.current) {
-            skip.current = null;
-            return;
-        }
-
-        setOpen(!open);
-
-        if (!open) {
-            skip.current = true;
-        }
-    };
-
-    return (
-        <>
-            <div
-                ref={reference}
-                onClick={toggle}
-                style={{ width: "fit-content" }}>
-                {children}
-            </div>
-
-            {createPortal(
-                <div id="reaction">
-                    {open && (
-                        <Base
-                            ref={floating}
-                            style={{
-                                position: strategy,
-                                top: y ?? 0,
-                                left: x ?? 0,
-                            }}>
-                            <HackAlertThisFileWillBeReplaced
-                                onSelect={(emoji) =>
-                                    message.react(
-                                        emojiDictionary[
-                                            emoji as keyof typeof emojiDictionary
-                                        ] ?? emoji,
-                                    )
-                                }
-                                onClose={toggle}
-                            />
-                        </Base>
-                    )}
-                </div>,
-                document.body,
-            )}
-        </>
-    );
-};

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

@@ -1,4 +1,4 @@
-import styled from "styled-components/macro";
+import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 

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

@@ -1,33 +1,41 @@
 import axios from "axios";
-import { API } from "revolt.js";
+import { Attachment } from "revolt-api/types/Autumn";
 
 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 { Button, Preloader } from "@revoltchat/ui";
+import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
+import {
+    AppContext,
+    StatusContext,
+} from "../../../../context/revoltjs/RevoltClient";
 
-import { useClient } from "../../../../controllers/client/ClientController";
+import Preloader from "../../../ui/Preloader";
-import RequiresOnline from "../../../../controllers/client/jsx/RequiresOnline";
 
 interface Props {
-    attachment: API.File;
+    attachment: Attachment;
 }
 
 const fileCache: { [key: string]: string } = {};
 
 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(() => {
         if (typeof content !== "undefined") return;
         if (loading) return;
-        if (gated) return;
+
+        if (attachment.size > 100_000) {
+            setContent(
+                "This file is > 100 KB, for your sake I did not load it.\nSee tracking issue here for previews: https://github.com/revoltchat/revite/issues/35",
+            );
+            return;
+        }
 
         setLoading(true);
 
@@ -52,17 +60,13 @@ export default function TextFile({ attachment }: Props) {
                     setLoading(false);
                 });
         }
-    }, [content, loading, gated, attachment._id, attachment.size, url]);
+    }, [content, loading, status, attachment._id, attachment.size, url]);
 
     return (
         <div
             className={styles.textContent}
             data-loading={typeof content === "undefined"}>
-            {gated ? (
+            {content ? (
-                <Button palette="accent" onClick={() => setGated(false)}>
-                    <Text id="app.main.channel.misc.load_file" />
-                </Button>
-            ) : content ? (
                 <pre>
                     <code>{content}</code>
                 </pre>

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
@@ -149,12 +149,12 @@ function FileEntry({
                     <EmptyEntry className="icon">
                         <File size={36} />
                     </EmptyEntry>
-                    <div className="overlay">
+                    <div class="overlay">
                         <XCircle size={36} />
                     </div>
                 </PreviewBox>
-                <span className="fn">{file.name}</span>
+                <span class="fn">{file.name}</span>
-                <span className="size">{determineFileSize(file.size)}</span>
+                <span class="size">{determineFileSize(file.size)}</span>
             </Entry>
         );
 
@@ -169,18 +169,13 @@ function FileEntry({
     return (
         <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
             <PreviewBox onClick={remove}>
-                <img
+                <img class="icon" src={url} alt={file.name} loading="eager" />
-                    className="icon"
+                <div class="overlay">
-                    src={url}
-                    alt={file.name}
-                    loading="eager"
-                />
-                <div className="overlay">
                     <XCircle size={36} />
                 </div>
             </PreviewBox>
-            <span className="fn">{file.name}</span>
+            <span class="fn">{file.name}</span>
-            <span className="size">{determineFileSize(file.size)}</span>
+            <span class="size">{determineFileSize(file.size)}</span>
         </Entry>
     );
 }

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

@@ -1,121 +1,38 @@
 import { DownArrowAlt } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js";
+import { Channel } from "revolt.js/dist/maps/Channels";
-import styled, { css } from "styled-components/macro";
+import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
 
-import { internalEmit } from "../../../../lib/eventEmitter";
 import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 import { getRenderer } from "../../../../lib/renderer/Singleton";
 
-export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
+const Bar = styled.div`
-    z-index: 1;
+    z-index: 10;
     position: relative;
 
-    @keyframes bottomBounce {
-        0% {
-            transform: translateY(33px);
-        }
-        100% {
-            transform: translateY(0px);
-        }
-    }
-
-    @keyframes topBounce {
-        0% {
-            transform: translateY(-33px);
-        }
-        100% {
-            transform: translateY(0px);
-        }
-    }
-
-    ${(props) =>
-        props.position === "top" &&
-        css`
-            top: 0;
-            animation: topBounce 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16)
-                forwards;
-        `}
-
-    ${(props) =>
-        props.position === "bottom" &&
-        css`
-            top: -28px;
-            animation: bottomBounce 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16)
-                forwards;
-
-            ${() =>
-                isTouchscreenDevice &&
-                css`
-                    top: -90px;
-                `}
-        `}
-
     > div {
+        top: -26px;
         height: 28px;
         width: 100%;
         position: absolute;
         display: flex;
         align-items: center;
         cursor: pointer;
-        font-size: 12px;
+        font-size: 13px;
-        font-weight: 600;
         padding: 0 8px;
         user-select: none;
         justify-content: space-between;
+        color: var(--secondary-foreground);
         transition: color ease-in-out 0.08s;
-
+        background: var(--secondary-background);
-        white-space: nowrap;
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        ${(props) =>
-            props.accent
-                ? css`
-                      color: var(--accent-contrast);
-                      background-color: rgba(
-                          var(--accent-rgb),
-                          max(var(--min-opacity), 0.9)
-                      );
-                      backdrop-filter: blur(20px);
-                  `
-                : css`
-                      color: var(--secondary-foreground);
-                      background-color: rgba(
-                          var(--secondary-background-rgb),
-                          max(var(--min-opacity), 0.9)
-                      );
-                      backdrop-filter: blur(20px);
-                  `}
-
-        ${(props) =>
-            props.position === "top"
-                ? css`
-                      top: 48px;
-                      border-radius: 0 0 var(--border-radius)
-                          var(--border-radius);
-                  `
-                : css`
-                      border-radius: var(--border-radius) var(--border-radius) 0
-                          0;
-                  `}
-
-                  ${() =>
-            isTouchscreenDevice &&
-            css`
-                top: 56px;
-            `}
 
         > div {
             display: flex;
             align-items: center;
             gap: 6px;
-
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
         }
 
         &:hover {
@@ -130,15 +47,10 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
             isTouchscreenDevice &&
             css`
                 height: 34px;
+                top: -32px;
                 padding: 0 12px;
             `}
     }
-
-    @media only screen and (max-width: 800px) {
-        .right > span {
-            display: none;
-        }
-    }
 `;
 
 export default observer(({ channel }: { channel: Channel }) => {
@@ -146,20 +58,14 @@ export default observer(({ channel }: { channel: Channel }) => {
     if (renderer.state !== "RENDER" || renderer.atBottom) return null;
 
     return (
-        <Bar position="bottom">
+        <Bar>
-            <div
+            <div onClick={() => renderer.jumpToBottom(true)}>
-                onClick={() => {
-                    renderer.jumpToBottom(true);
-                    internalEmit("NewMessages", "hide");
-                }}>
                 <div>
                     <Text id="app.main.channel.misc.viewing_old" />
                 </div>
-                <div className="right">
+                <div>
-                    <span>
+                    <Text id="app.main.channel.misc.jump_present" />{" "}
-                        <Text id="app.main.channel.misc.jump_present" />
+                    <DownArrowAlt size={20} />
-                    </span>
-                    <DownArrowAlt size={18} />
                 </div>
             </div>
         </Bar>

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

@@ -1,237 +0,0 @@
-import { DotsVerticalRounded, LinkAlt } from "@styled-icons/boxicons-regular";
-import {
-    Pencil,
-    Trash,
-    Share,
-    InfoSquare,
-    Notification,
-    HappyBeaming,
-} from "@styled-icons/boxicons-solid";
-import { observer } from "mobx-react-lite";
-import { Message as MessageObject } from "revolt.js";
-import styled from "styled-components";
-
-import { openContextMenu } from "preact-context-menu";
-import { useEffect, useState } from "preact/hooks";
-
-import { internalEmit } from "../../../../lib/eventEmitter";
-import { shiftKeyPressed } from "../../../../lib/modifiers";
-import { getRenderer } from "../../../../lib/renderer/Singleton";
-
-import { state } from "../../../../mobx/State";
-import { QueuedMessage } from "../../../../mobx/stores/MessageQueue";
-
-import { modalController } from "../../../../controllers/modals/ModalController";
-import Tooltip from "../../../common/Tooltip";
-import { ReactionWrapper } from "../attachments/Reactions";
-
-interface Props {
-    reactionsOpen: boolean;
-    setReactionsOpen: (v: boolean) => void;
-    message: MessageObject;
-    queued?: QueuedMessage;
-}
-
-const OverlayBar = styled.div`
-    display: flex;
-    position: absolute;
-    justify-self: end;
-    align-self: end;
-    align-content: center;
-    justify-content: center;
-    right: 0;
-    top: -18px;
-    z-index: 0;
-    transition: box-shadow 0.1s ease-out;
-    border-radius: 5px;
-    background: var(--primary-header);
-    border: 1px solid var(--background);
-
-    &:hover {
-        box-shadow: rgb(0 0 0 / 20%) 0px 2px 10px;
-    }
-`;
-
-const Entry = styled.div`
-    height: 32px;
-    width: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    cursor: pointer;
-    transition: 0.2s ease background-color;
-    color: var(--secondary-foreground);
-
-    &:hover {
-        background-color: var(--secondary-header);
-        color: var(--foreground);
-    }
-
-    &:focus {
-        border-radius: var(--border-radius);
-        box-shadow: 0 0 0 2.5pt var(--accent);
-    }
-
-    &:active {
-        svg {
-            transform: translateY(1px);
-        }
-    }
-`;
-
-const Divider = styled.div`
-    margin: 6px 4px;
-    width: 0.5px;
-    background: var(--tertiary-background);
-`;
-
-export const MessageOverlayBar = observer(
-    ({ reactionsOpen, setReactionsOpen, message, queued }: Props) => {
-        const client = message.client;
-        const isAuthor = message.author_id === client.user!._id;
-
-        const [copied, setCopied] = useState<"link" | "id">(null!);
-        const [extraActions, setExtra] = useState(shiftKeyPressed);
-
-        useEffect(() => {
-            const handler = (ev: KeyboardEvent) => setExtra(ev.shiftKey);
-
-            document.addEventListener("keyup", handler);
-            document.addEventListener("keydown", handler);
-
-            return () => {
-                document.removeEventListener("keyup", handler);
-                document.removeEventListener("keydown", handler);
-            };
-        });
-
-        return (
-            <OverlayBar>
-                {message.channel?.havePermission("SendMessage") && (
-                    <Tooltip content="Reply">
-                        <Entry
-                            onClick={() =>
-                                internalEmit("ReplyBar", "add", message)
-                            }>
-                            <Share size={18} />
-                        </Entry>
-                    </Tooltip>
-                )}
-
-                {message.channel?.havePermission("React") &&
-                    state.experiments.isEnabled("picker") && (
-                        <ReactionWrapper
-                            open={reactionsOpen}
-                            setOpen={setReactionsOpen}
-                            message={message}>
-                            <Tooltip content="React">
-                                <Entry>
-                                    <HappyBeaming size={18} />
-                                </Entry>
-                            </Tooltip>
-                        </ReactionWrapper>
-                    )}
-
-                {isAuthor && (
-                    <Tooltip content="Edit">
-                        <Entry
-                            onClick={() =>
-                                internalEmit(
-                                    "MessageRenderer",
-                                    "edit_message",
-                                    message._id,
-                                )
-                            }>
-                            <Pencil size={18} />
-                        </Entry>
-                    </Tooltip>
-                )}
-                {isAuthor ||
-                (message.channel &&
-                    message.channel.havePermission("ManageMessages")) ? (
-                    <Tooltip content="Delete">
-                        <Entry
-                            onClick={(e) =>
-                                e.shiftKey
-                                    ? message.delete()
-                                    : modalController.push({
-                                          type: "delete_message",
-                                          target: message,
-                                      })
-                            }>
-                            <Trash size={18} color={"var(--error)"} />
-                        </Entry>
-                    </Tooltip>
-                ) : undefined}
-                <Tooltip content="More">
-                    <Entry
-                        onClick={() =>
-                            openContextMenu("Menu", {
-                                message,
-                                contextualChannel: message.channel_id,
-                                queued,
-                            })
-                        }>
-                        <DotsVerticalRounded size={18} />
-                    </Entry>
-                </Tooltip>
-                {extraActions && (
-                    <>
-                        <Divider />
-                        <Tooltip content="Mark as Unread">
-                            <Entry
-                                onClick={() => {
-                                    // ! FIXME: deduplicate this code with ctx menu
-                                    const messages = getRenderer(
-                                        message.channel!,
-                                    ).messages;
-                                    const index = messages.findIndex(
-                                        (x) => x._id === message._id,
-                                    );
-
-                                    let unread_id = message._id;
-                                    if (index > 0) {
-                                        unread_id = messages[index - 1]._id;
-                                    }
-
-                                    internalEmit(
-                                        "NewMessages",
-                                        "mark",
-                                        unread_id,
-                                    );
-                                    message.channel?.ack(unread_id, true);
-                                }}>
-                                <Notification size={18} />
-                            </Entry>
-                        </Tooltip>
-                        <Tooltip
-                            content={
-                                copied === "link" ? "Copied!" : "Copy Link"
-                            }
-                            hideOnClick={false}>
-                            <Entry
-                                onClick={() => {
-                                    setCopied("link");
-                                    modalController.writeText(message.url);
-                                }}>
-                                <LinkAlt size={18} />
-                            </Entry>
-                        </Tooltip>
-                        <Tooltip
-                            content={copied === "id" ? "Copied!" : "Copy ID"}
-                            hideOnClick={false}>
-                            <Entry
-                                onClick={() => {
-                                    setCopied("id");
-                                    modalController.writeText(message._id);
-                                }}>
-                                <InfoSquare size={18} />
-                            </Entry>
-                        </Tooltip>
-                    </>
-                )}
-            </OverlayBar>
-        );
-    },
-);

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

@@ -1,69 +0,0 @@
-import { UpArrowAlt } from "@styled-icons/boxicons-regular";
-import { observer } from "mobx-react-lite";
-import { useHistory } from "react-router-dom";
-import { Channel } from "revolt.js";
-import { decodeTime } from "ulid";
-
-import { Text } from "preact-i18n";
-import { useEffect, useState } from "preact/hooks";
-
-import { internalSubscribe } from "../../../../lib/eventEmitter";
-import { getRenderer } from "../../../../lib/renderer/Singleton";
-
-import { dayjs } from "../../../../context/Locale";
-
-import { Bar } from "./JumpToBottom";
-
-export default observer(
-    ({ channel, last_id }: { channel: Channel; last_id?: string }) => {
-        const [hidden, setHidden] = useState(false);
-        const hide = () => setHidden(true);
-
-        useEffect(() => setHidden(false), [last_id]);
-        useEffect(() => internalSubscribe("NewMessages", "hide", hide), []);
-        useEffect(() => {
-            const onKeyDown = (e: KeyboardEvent) =>
-                e.key === "Escape" && hide();
-
-            document.addEventListener("keydown", onKeyDown);
-            return () => document.removeEventListener("keydown", onKeyDown);
-        }, []);
-
-        const renderer = getRenderer(channel);
-        const history = useHistory();
-        if (renderer.state !== "RENDER") return null;
-        if (!last_id) return null;
-        if (hidden) return null;
-
-        return (
-            <Bar position="top" accent>
-                <div
-                    onClick={() => {
-                        setHidden(true);
-                        if (channel.channel_type === "TextChannel") {
-                            history.push(
-                                `/server/${channel.server_id}/channel/${channel._id}/${last_id}`,
-                            );
-                        } else {
-                            history.push(`/channel/${channel._id}/${last_id}`);
-                        }
-                    }}>
-                    <div>
-                        <Text
-                            id="app.main.channel.misc.new_messages"
-                            fields={{
-                                time_ago: dayjs(decodeTime(last_id)).fromNow(),
-                            }}
-                        />
-                    </div>
-                    <div className="right">
-                        <span>
-                            <Text id="app.main.channel.misc.jump_beginning" />
-                        </span>
-                        <UpArrowAlt size={20} />
-                    </div>
-                </div>
-            </Bar>
-        );
-    },
-);

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

@@ -1,21 +1,20 @@
-import { At } from "@styled-icons/boxicons-regular";
+import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
 import { File, XCircle } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { Channel, Message } from "revolt.js";
+import { Channel } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components/macro";
+import { Message } from "revolt.js/dist/maps/Messages";
+import styled from "styled-components";
 
 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";
+import { dispatch, getState } from "../../../../redux";
-import { SECTION_MENTION } from "../../../../mobx/stores/Layout";
+import { Reply } from "../../../../redux/reducers/queue";
-import { Reply } from "../../../../mobx/stores/MessageQueue";
+
+import IconButton from "../../../ui/IconButton";
 
-import Tooltip from "../../../common/Tooltip";
 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
 import { SystemMessage } from "../SystemMessage";
@@ -28,22 +27,12 @@ interface Props {
 }
 
 const Base = styled.div`
-    @keyframes bottomBounce {
-        0% {
-            transform: translateY(33px);
-        }
-        100% {
-            transform: translateY(0px);
-        }
-    }
-
     display: flex;
     height: 30px;
-    padding: 0 20px;
+    padding: 0 12px;
     user-select: none;
     align-items: center;
-    background: var(--secondary-background);
+    background: var(--message-box);
-    animation: bottomBounce 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16) forwards;
 
     > div {
         flex-grow: 1;
@@ -59,34 +48,21 @@ const Base = styled.div`
         display: flex;
         font-size: 12px;
         align-items: center;
-        font-weight: 800;
+        font-weight: 600;
         text-transform: uppercase;
         min-width: 6ch;
     }
 
-    .replyto {
+    .username {
-        align-self: center;
+        display: flex;
-        font-weight: 500;
+        align-items: center;
-        flex-shrink: 0;
+        gap: 6px;
+        font-weight: 600;
     }
 
-    .content {
+    .message {
         display: flex;
-        pointer-events: none;
+        max-height: 26px;
-
-        .username {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            font-weight: 600;
-            flex-shrink: 0;
-        }
-
-        .message {
-            display: flex;
-            max-height: 26px;
-            gap: 4px;
-        }
     }
 
     .actions {
@@ -105,7 +81,6 @@ const Base = styled.div`
 const MAX_REPLIES = 5;
 export default observer(({ channel, replies, setReplies }: Props) => {
     const client = channel.client;
-    const layout = useApplicationState().layout;
 
     // Event listener for adding new messages to reply bar.
     useEffect(() => {
@@ -124,7 +99,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                     mention:
                         message.author_id === client.user!._id
                             ? false
-                            : layout.getSectionState(SECTION_MENTION, false),
+                            : getState().sectionToggle.mention ?? false,
                 },
             ]);
         });
@@ -152,53 +127,42 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                 return (
                     <Base key={reply.id}>
                         <ReplyBase preview>
-                            <div className="replyto">
+                            <ReplyIcon size={22} />
-                                <Text id="app.main.channel.reply.replying" />
+                            <div class="username">
+                                <UserShort
+                                    size={16}
+                                    showServerIdentity
+                                    user={message.author}
+                                    masquerade={message.masquerade!}
+                                />
                             </div>
-                            <div className="content">
+                            <div class="message">
-                                <div className="username">
+                                {message.attachments && (
-                                    <UserShort
+                                    <>
-                                        size={16}
+                                        <File size={16} />
-                                        showServerIdentity
+                                        <em>
-                                        user={message.author}
+                                            {message.attachments.length > 1 ? (
-                                        masquerade={message.masquerade!}
+                                                <Text id="app.main.channel.misc.sent_multiple_files" />
+                                            ) : (
+                                                <Text id="app.main.channel.misc.sent_file" />
+                                            )}
+                                        </em>
+                                    </>
+                                )}
+                                {message.author_id ===
+                                "00000000000000000000000000" ? (
+                                    <SystemMessage message={message} hideInfo />
+                                ) : (
+                                    <Markdown
+                                        disallowBigEmoji
+                                        content={(
+                                            message.content as string
+                                        ).replace(/\n/g, " ")}
                                     />
-                                </div>
+                                )}
-                                <div className="message">
-                                    {message.attachments && (
-                                        <>
-                                            <File size={16} />
-                                            <em>
-                                                {message.attachments.length >
-                                                1 ? (
-                                                    <Text id="app.main.channel.misc.sent_multiple_files" />
-                                                ) : (
-                                                    <Text id="app.main.channel.misc.sent_file" />
-                                                )}
-                                            </em>
-                                        </>
-                                    )}
-                                    {message.author_id ===
-                                    "00000000000000000000000000" ? (
-                                        <SystemMessage
-                                            message={message}
-                                            hideInfo
-                                        />
-                                    ) : (
-                                        message.content && (
-                                            <Markdown
-                                                disallowBigEmoji
-                                                content={message.content.replace(
-                                                    /\n/g,
-                                                    " ",
-                                                )}
-                                            />
-                                        )
-                                    )}
-                                </div>
                             </div>
                         </ReplyBase>
-                        <span className="actions">
+                        <span class="actions">
                             {message.author_id !== client.user!._id && (
                                 <IconButton
                                     onClick={() => {
@@ -217,27 +181,22 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                             }),
                                         );
 
-                                        layout.setSectionState(
+                                        dispatch({
-                                            SECTION_MENTION,
+                                            type: "SECTION_TOGGLE_SET",
+                                            id: "mention",
                                             state,
-                                            false,
+                                        });
-                                        );
                                     }}>
-                                    <Tooltip
+                                    <span class="toggle">
-                                        content={
+                                        <At size={15} />
-                                            <Text id="app.main.channel.reply.toggle" />
+                                        <Text
-                                        }>
+                                            id={
-                                        <span className="toggle">
+                                                reply.mention
-                                            <At size={15} />
+                                                    ? "general.on"
-                                            <Text
+                                                    : "general.off"
-                                                id={
+                                            }
-                                                    reply.mention
+                                        />
-                                                        ? "general.on"
+                                    </span>
-                                                        : "general.off"
-                                                }
-                                            />
-                                        </span>
-                                    </Tooltip>
                                 </IconButton>
                             )}
                             <IconButton

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

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js";
+import { RelationshipStatus } from "revolt-api/types/Users";
-import styled from "styled-components/macro";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
@@ -12,10 +13,10 @@ const Base = styled.div`
     position: relative;
 
     > div {
-        height: 26px;
+        height: 24px;
-        top: -26px;
+        margin-top: -24px;
         position: absolute;
-        font-size: 13px;
+
         gap: 8px;
         display: flex;
         padding: 0 10px;
@@ -24,11 +25,7 @@ const Base = styled.div`
         flex-direction: row;
         width: calc(100% - var(--scrollbar-thickness));
         color: var(--secondary-foreground);
-        background-color: rgba(
+        background: var(--secondary-background);
-            var(--secondary-background-rgb),
-            max(var(--min-opacity), 0.75)
-        );
-        backdrop-filter: blur(10px);
     }
 
     .avatars {
@@ -39,12 +36,9 @@ const Base = styled.div`
             height: 16px;
             object-fit: cover;
             border-radius: var(--border-radius-half);
-            background: var(--secondary-background);
-            //background-clip: border-box;
-            border: 2px solid var(--secondary-background);
 
             &:not(:first-child) {
-                margin-left: -6px;
+                margin-left: -4px;
             }
         }
     }
@@ -55,7 +49,6 @@ const Base = styled.div`
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        //font-weight: 600;
     }
 `;
 
@@ -64,7 +57,7 @@ export default observer(({ channel }: Props) => {
         (x) =>
             typeof x !== "undefined" &&
             x._id !== x.client.user!._id &&
-            x.relationship !== "Blocked",
+            x.relationship !== RelationshipStatus.Blocked,
     );
 
     if (users.length > 0) {

src/components/common/messaging/embed/Embed.module.scss

@@ -4,7 +4,6 @@
     iframe {
         border: none;
         border-radius: var(--border-radius);
-        width: 100%;
     }
 
     &.image {
@@ -13,6 +12,7 @@
 
     &.website {
         gap: 6px;
+        display: flex;
         flex-direction: row;
 
         > div:nth-child(1) {

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

@@ -1,18 +1,17 @@
-import { API } from "revolt.js";
+import { Embed as EmbedI } from "revolt-api/types/January";
 
 import styles from "./Embed.module.scss";
 import classNames from "classnames";
 import { useContext } from "preact/hooks";
 
-import { useClient } from "../../../../controllers/client/ClientController";
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
-import { modalController } from "../../../../controllers/modals/ModalController";
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
+
 import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
-import Markdown from "../../../markdown/Markdown";
-import Attachment from "../attachments/Attachment";
 import EmbedMedia from "./EmbedMedia";
 
 interface Props {
-    embed: API.Embed;
+    embed: EmbedI;
 }
 
 const MAX_EMBED_WIDTH = 480;
@@ -23,6 +22,7 @@ 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,
@@ -45,63 +45,39 @@ export default function Embed({ embed }: Props) {
     }
 
     switch (embed.type) {
-        case "Text":
         case "Website": {
             // Determine special embed size.
             let mw, mh;
             const largeMedia =
-                embed.type === "Text"
+                (embed.special && embed.special.type !== "None") ||
-                    ? typeof embed.media !== "undefined"
+                embed.image?.size === "Large";
-                    : (embed.special && embed.special.type !== "None") ||
+            switch (embed.special?.type) {
-                      embed.image?.size === "Large";
+                case "YouTube":
-
+                case "Bandcamp": {
-            if (embed.type === "Text") {
+                    mw = embed.video?.width ?? 1280;
-                mw = MAX_EMBED_WIDTH;
+                    mh = embed.video?.height ?? 720;
-                mh = 1;
+                    break;
-            } else {
+                }
-                switch (embed.special?.type) {
+                case "Twitch": {
-                    case "YouTube":
+                    mw = 1280;
-                    case "Bandcamp": {
+                    mh = 720;
-                        mw = embed.video?.width ?? 1280;
+                    break;
-                        mh = embed.video?.height ?? 720;
+                }
-                        break;
+                default: {
-                    }
+                    if (embed.image?.size === "Preview") {
-                    case "Twitch":
+                        mw = MAX_EMBED_WIDTH;
-                    case "Lightspeed": {
+                        mh = Math.min(
-                        mw = 1280;
+                            embed.image.height ?? 0,
-                        mh = 720;
+                            MAX_PREVIEW_SIZE,
-                        break;
+                        );
-                    }
+                    } else {
-                    default: {
+                        mw = embed.image?.width ?? MAX_EMBED_WIDTH;
-                        if (embed.image?.size === "Preview") {
+                        mh = embed.image?.height ?? 0;
-                            mw = MAX_EMBED_WIDTH;
-                            mh = Math.min(
-                                embed.image.height ?? 0,
-                                MAX_PREVIEW_SIZE,
-                            );
-                        } else {
-                            mw = embed.image?.width ?? MAX_EMBED_WIDTH;
-                            mh = embed.image?.height ?? 0;
-                        }
                     }
                 }
             }
 
             const { width, height } = calculateSize(mw, mh);
-            if (embed.type === "Website" && embed.special?.type === "GIF") {
-                return (
-                    <EmbedMedia
-                        embed={embed}
-                        width={
-                            height *
-                            ((embed.image?.width ?? 0) /
-                                (embed.image?.height ?? 0))
-                        }
-                        height={height}
-                    />
-                );
-            }
-
             return (
                 <div
                     className={classNames(styles.embed, styles.website)}
@@ -111,9 +87,7 @@ export default function Embed({ embed }: Props) {
                         width: width + CONTAINER_PADDING,
                     }}>
                     <div>
-                        {(embed.type === "Text"
+                        {embed.site_name && (
-                            ? embed.title
-                            : embed.site_name) && (
                             <div className={styles.siteinfo}>
                                 {embed.icon_url && (
                                     <img
@@ -128,43 +102,35 @@ export default function Embed({ embed }: Props) {
                                     />
                                 )}
                                 <div className={styles.site}>
-                                    {embed.type === "Text"
+                                    {embed.site_name}{" "}
-                                        ? embed.title
-                                        : embed.site_name}{" "}
                                 </div>
                             </div>
                         )}
 
                         {/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
-                        {embed.type === "Website" && embed.title && (
+                        {embed.title && (
                             <span>
                                 <a
                                     onMouseDown={(ev) =>
                                         (ev.button === 0 || ev.button === 1) &&
-                                        modalController.openLink(embed.url!)
+                                        openLink(embed.url)
                                     }
                                     className={styles.title}>
                                     {embed.title}
                                 </a>
                             </span>
                         )}
-                        {embed.description &&
+                        {embed.description && (
-                            (embed.type === "Text" ? (
+                            <div className={styles.description}>
-                                <Markdown content={embed.description} />
+                                {embed.description}
-                            ) : (
+                            </div>
-                                <div className={styles.description}>
+                        )}
-                                    {embed.description}
-                                </div>
-                            ))}
 
-                        {largeMedia &&
+                        {largeMedia && (
-                            (embed.type === "Text" ? (
+                            <EmbedMedia embed={embed} height={height} />
-                                <Attachment attachment={embed.media!} />
+                        )}
-                            ) : (
-                                <EmbedMedia embed={embed} height={height} />
-                            ))}
                     </div>
-                    {!largeMedia && embed.type === "Website" && (
+                    {!largeMedia && (
                         <div>
                             <EmbedMedia
                                 embed={embed}
@@ -189,24 +155,8 @@ export default function Embed({ embed }: Props) {
                     type="text/html"
                     frameBorder="0"
                     loading="lazy"
-                    onClick={() =>
+                    onClick={() => openScreen({ id: "image_viewer", embed })}
-                        modalController.push({ type: "image_viewer", embed })
+                    onMouseDown={(ev) => ev.button === 1 && openLink(embed.url)}
-                    }
-                    onMouseDown={(ev) =>
-                        ev.button === 1 && modalController.openLink(embed.url)
-                    }
-                />
-            );
-        }
-        case "Video": {
-            return (
-                <video
-                    className={classNames(styles.embed, styles.image)}
-                    style={calculateSize(embed.width, embed.height)}
-                    src={client.proxyFile(embed.url)}
-                    frameBorder="0"
-                    loading="lazy"
-                    controls
                 />
             );
         }

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

@@ -1,23 +1,28 @@
-import { Group } from "@styled-icons/boxicons-solid";
+import { autorun } from "mobx";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
-import { Message, API } from "revolt.js";
+import { RetrievedInvite } from "revolt-api/types/Invites";
-import styled, { css } from "styled-components/macro";
+import { Message } from "revolt.js/dist/maps/Messages";
+import styled, { css } from "styled-components";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, Category, Preloader } from "@revoltchat/ui";
+import { defer } from "../../../../lib/defer";
-
 import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 
-import { I18nError } from "../../../../context/Locale";
+import { dispatch } from "../../../../redux";
+
+import {
+    AppContext,
+    ClientStatus,
+    StatusContext,
+} from "../../../../context/revoltjs/RevoltClient";
+import { takeError } from "../../../../context/revoltjs/util";
 
 import ServerIcon from "../../../../components/common/ServerIcon";
-import {
+import Button from "../../../../components/ui/Button";
-    useClient,
+import Overline from "../../../ui/Overline";
-    useSession,
+import Preloader from "../../../ui/Preloader";
-} from "../../../../controllers/client/ClientController";
-import { takeError } from "../../../../controllers/client/jsx/error";
 
 const EmbedInviteBase = styled.div`
     width: 400px;
@@ -28,7 +33,7 @@ const EmbedInviteBase = styled.div`
     align-items: center;
     padding: 0 12px;
     margin-top: 2px;
-    ${() =>
+    ${() => 
         isTouchscreenDevice &&
         css`
             flex-wrap: wrap;
@@ -39,17 +44,19 @@ const EmbedInviteBase = styled.div`
             > button {
                 width: 100%;
             }
-        `}
+        `
+    }
 `;
 
 const EmbedInviteDetails = styled.div`
     flex-grow: 1;
-    padding-inline-start: 12px;
+    padding-left: 12px;
-    ${() =>
+    ${() => 
         isTouchscreenDevice &&
         css`
             width: calc(100% - 55px);
-        `}
+        `
+    }
 `;
 
 const EmbedInviteName = styled.div`
@@ -60,44 +67,36 @@ const EmbedInviteName = styled.div`
 `;
 
 const EmbedInviteMemberCount = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 2px;
     font-size: 0.8em;
-
-    > svg {
-        color: var(--secondary-foreground);
-    }
 `;
 
 type Props = {
     code: string;
 };
 
-export function EmbedInvite({ code }: Props) {
+export function EmbedInvite(props: Props) {
     const history = useHistory();
-    const session = useSession()!;
+    const client = useContext(AppContext);
-    const client = session.client!;
+    const status = useContext(StatusContext);
+    const code = props.code;
     const [processing, setProcessing] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
     const [joinError, setJoinError] = useState<string | undefined>(undefined);
-    const [invite, setInvite] = useState<
+    const [invite, setInvite] = useState<RetrievedInvite | undefined>(
-        (API.InviteResponse & { type: "Server" }) | undefined
+        undefined,
-    >(undefined);
+    );
 
     useEffect(() => {
         if (
             typeof invite === "undefined" &&
-            (session.state === "Online" || session.state === "Ready")
+            (status === ClientStatus.ONLINE || status === ClientStatus.READY)
         ) {
             client
                 .fetchInvite(code)
-                .then((data) =>
+                .then((data) => setInvite(data))
-                    setInvite(data as API.InviteResponse & { type: "Server" }),
-                )
                 .catch((err) => setError(takeError(err)));
         }
-    }, [client, code, invite, session.state]);
+    }, [client, code, invite, status]);
 
     if (typeof invite === "undefined") {
         return error ? (
@@ -125,9 +124,7 @@ export function EmbedInvite({ code }: Props) {
                 <EmbedInviteDetails>
                     <EmbedInviteName>{invite.server_name}</EmbedInviteName>
                     <EmbedInviteMemberCount>
-                        <Group size={12} />
+                        {invite.member_count.toLocaleString()} {invite.member_count === 1 ? "member" : "members"}
-                        {invite.member_count.toLocaleString()}{" "}
-                        {invite.member_count === 1 ? "member" : "members"}
                     </EmbedInviteMemberCount>
                 </EmbedInviteDetails>
                 {processing ? (
@@ -137,31 +134,49 @@ export function EmbedInvite({ code }: Props) {
                 ) : (
                     <Button
                         onClick={async () => {
-                            setProcessing(true);
-
                             try {
-                                await client.joinInvite(invite);
+                                setProcessing(true);
 
-                                history.push(
+                                if (invite.type === "Server") {
-                                    `/server/${invite.server_id}/channel/${invite.channel_id}`,
+                                    if (client.servers.get(invite.server_id)) {
-                                );
+                                        history.push(
+                                            `/server/${invite.server_id}/channel/${invite.channel_id}`,
+                                        );
+                                    }
+
+                                    const dispose = autorun(() => {
+                                        const server = client.servers.get(
+                                            invite.server_id,
+                                        );
+
+                                        defer(() => {
+                                            if (server) {
+                                                dispatch({
+                                                    type: "UNREADS_MARK_MULTIPLE_READ",
+                                                    channels: server.channel_ids,
+                                                });
+
+                                                history.push(
+                                                    `/server/${server._id}/channel/${invite.channel_id}`,
+                                                );
+                                            }
+                                        });
+
+                                        dispose();
+                                    });
+                                }
+
+                                await client.joinInvite(code);
                             } catch (err) {
                                 setJoinError(takeError(err));
-                            } finally {
                                 setProcessing(false);
                             }
                         }}>
-                        {client.servers.get(invite.server_id)
+                        {client.servers.get(invite.server_id) ? "Joined" : "Join"}
-                            ? "Joined"
-                            : "Join"}
                     </Button>
                 )}
             </EmbedInviteBase>
-            {joinError && (
+            {joinError && <Overline type="error" error={joinError} />}
-                <Category>
-                    <I18nError error={joinError} />
-                </Category>
-            )}
         </>
     );
 }
@@ -192,12 +207,9 @@ export default observer(({ message }: { message: Message }) => {
 
         return (
             <>
-                {entries.map(
+                {entries.map((entry) => (
-                    (entry) =>
+                    <EmbedInvite key={entry} code={entry} />
-                        entry !== "discover" && (
+                ))}
-                            <EmbedInvite key={entry} code={entry} />
-                        ),
-                )}
             </>
         );
     }

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

@@ -1,19 +1,20 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { API } from "revolt.js";
+import { Embed } from "revolt-api/types/January";
 
 import styles from "./Embed.module.scss";
 
-import { useClient } from "../../../../controllers/client/ClientController";
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
-import { modalController } from "../../../../controllers/modals/ModalController";
+import { useClient } from "../../../../context/revoltjs/RevoltClient";
 
 interface Props {
-    embed: API.Embed;
+    embed: Embed;
     width?: number;
     height: number;
 }
 
 export default function EmbedMedia({ embed, width, height }: Props) {
     if (embed.type !== "Website") return null;
+    const { openScreen } = useIntermediate();
     const client = useClient();
 
     switch (embed.special?.type) {
@@ -46,17 +47,6 @@ export default function EmbedMedia({ embed, width, height }: Props) {
                     style={{ height }}
                 />
             );
-        case "Lightspeed":
-            return (
-                <iframe
-                    src={`https://new.lightspeed.tv/embed/${embed.special.id}/stream`}
-                    frameBorder="0"
-                    allowFullScreen
-                    scrolling="no"
-                    loading="lazy"
-                    style={{ height }}
-                />
-            );
         case "Spotify":
             return (
                 <iframe
@@ -93,32 +83,18 @@ export default function EmbedMedia({ embed, width, height }: Props) {
             );
         }
         default: {
-            if (embed.video) {
+            if (embed.image) {
-                const url = embed.video.url;
-                return (
-                    <video
-                        loading="lazy"
-                        className={styles.image}
-                        style={{ width, height }}
-                        src={client.proxyFile(url)}
-                        loop={embed.special?.type === "GIF"}
-                        controls={embed.special?.type !== "GIF"}
-                        autoPlay={embed.special?.type === "GIF"}
-                        muted={embed.special?.type === "GIF" ? true : undefined}
-                    />
-                );
-            } else if (embed.image) {
                 const url = embed.image.url;
                 return (
                     <img
                         className={styles.image}
                         src={client.proxyFile(url)}
                         loading="lazy"
-                        style={{ width: "100%", height: "100%" }}
+                        style={{ width, height }}
                         onClick={() =>
-                            modalController.push({
+                            openScreen({
-                                type: "image_viewer",
+                                id: "image_viewer",
-                                embed: embed.image!,
+                                embed: embed.image,
                             })
                         }
                         onMouseDown={(ev) =>

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

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

src/components/common/user/UserBadges.tsx

@@ -1,24 +1,11 @@
 import { Shield } from "@styled-icons/boxicons-regular";
-import styled from "styled-components/macro";
+import { Badges } from "revolt-api/types/Users";
+import styled from "styled-components";
 
 import { Localizer, Text } from "preact-i18n";
 
 import Tooltip from "../Tooltip";
 
-enum Badges {
-    Developer = 1,
-    Translator = 2,
-    Supporter = 4,
-    ResponsibleDisclosure = 8,
-    Founder = 16,
-    PlatformModeration = 32,
-    ActiveSupporter = 64,
-    Paw = 128,
-    EarlyAdopter = 256,
-    ReservedRelevantJokeBadge1 = 512,
-    ReservedRelevantJokeBadge2 = 1024,
-}
-
 const BadgesBase = styled.div`
     gap: 8px;
     display: flex;
@@ -136,13 +123,6 @@ 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,24 +1,17 @@
-import { User } from "revolt.js";
+import { User } from "revolt.js/dist/maps/Users";
 
-import { Checkbox, Row, Column } from "@revoltchat/ui";
+import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
 
 import UserIcon from "./UserIcon";
 import { Username } from "./UserShort";
 
-type UserProps = { value: boolean; onChange: (v: boolean) => void; user: User };
+type UserProps = Omit<CheckboxProps, "children"> & { user: User };
 
 export default function UserCheckbox({ user, ...props }: UserProps) {
     return (
-        <Checkbox
+        <Checkbox {...props}>
-            {...props}
+            <UserIcon target={user} size={32} />
-            title={
+            <Username user={user} />
-                <Row centred>
+        </Checkbox>
-                    <UserIcon target={user} size={32} />
-                    <Column centred>
-                        <Username user={user} />
-                    </Column>
-                </Row>
-            }
-        />
     );
 }

src/components/common/user/UserHeader.tsx

@@ -1,17 +1,19 @@
 import { Cog } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import { User } from "revolt.js";
+import { User } from "revolt.js/dist/maps/Users";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 
 import { openContextMenu } from "preact-context-menu";
 import { Text, Localizer } from "preact-i18n";
 
-import { Header, IconButton } from "@revoltchat/ui";
-
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
-import { modalController } from "../../../controllers/modals/ModalController";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+
+import Header from "../../ui/Header";
+import IconButton from "../../ui/IconButton";
+
 import Tooltip from "../Tooltip";
 import UserStatus from "./UserStatus";
 
@@ -47,16 +49,16 @@ interface Props {
 }
 
 export default observer(({ user }: Props) => {
+    const { writeClipboard } = useIntermediate();
+
     return (
-        <Header topBorder palette="secondary">
+        <Header borders placement="secondary">
             <HeaderBase>
                 <Localizer>
                     <Tooltip content={<Text id="app.special.copy_username" />}>
                         <span
                             className="username"
-                            onClick={() =>
+                            onClick={() => writeClipboard(user.username)}>
-                                modalController.writeText(user.username)
-                            }>
                             @{user.username}
                         </span>
                     </Tooltip>

src/components/common/user/UserHover.tsx

@@ -1,6 +1,7 @@
-import { User } from "revolt.js";
+import { User } from "revolt.js/dist/maps/Users";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 
+import { Children } from "../../../types/Preact";
 import Tooltip from "../Tooltip";
 import { Username } from "./UserShort";
 import UserStatus from "./UserStatus";
@@ -41,7 +42,10 @@ export default function UserHover({ user, children }: Props) {
             placement="right-end"
             content={
                 <Base>
-                    <Username className="username" user={user} />
+                    <Username
+                        className="username"
+                        user={user}
+                    />
                     <span className="status">
                         <UserStatus user={user} />
                     </span>

src/components/common/user/UserIcon.tsx

@@ -1,36 +1,40 @@
-import { VolumeMute, MicrophoneOff } from "@styled-icons/boxicons-solid";
+import { MicrophoneOff } from "@styled-icons/boxicons-regular";
+import { VolumeMute } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
-import { User, API } from "revolt.js";
+import { Masquerade } from "revolt-api/types/Channels";
-import styled, { css } from "styled-components/macro";
+import { Presence } from "revolt-api/types/Users";
+import { User } from "revolt.js/dist/maps/Users";
+import { Nullable } from "revolt.js/dist/util/null";
+import styled, { css } from "styled-components";
 
-import { useApplicationState } from "../../../mobx/State";
+import { useContext } from "preact/hooks";
+
+import { ThemeContext } from "../../../context/Theme";
+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";
 interface Props extends IconBaseProps<User> {
     status?: boolean;
     voice?: VoiceStatus;
-    masquerade?: API.Masquerade;
+    masquerade?: Masquerade;
     showServerIdentity?: boolean;
 }
 
 export function useStatusColour(user?: User) {
-    const theme = useApplicationState().settings.theme;
+    const theme = useContext(ThemeContext);
 
-    return user?.online && user?.status?.presence !== "Invisible"
+    return user?.online && user?.status?.presence !== Presence.Invisible
-        ? user?.status?.presence === "Idle"
+        ? user?.status?.presence === Presence.Idle
-            ? theme.getVariable("status-away")
+            ? theme["status-away"]
-            : user?.status?.presence === "Focus"
+            : user?.status?.presence === Presence.Busy
-            ? theme.getVariable("status-focus")
+            ? theme["status-busy"]
-            : user?.status?.presence === "Busy"
+            : theme["status-online"]
-            ? theme.getVariable("status-busy")
+        : theme["status-invisible"];
-            : theme.getVariable("status-online")
-        : theme.getVariable("status-invisible");
 }
 
 const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
@@ -42,6 +46,10 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
     align-items: center;
     justify-content: center;
 
+    svg {
+        stroke: white;
+    }
+
     ${(props) =>
         (props.status === "muted" || props.status === "deaf") &&
         css`
@@ -69,13 +77,12 @@ export default observer(
             hover,
             showServerIdentity,
             masquerade,
-            innerRef,
             ...svgProps
         } = props;
 
         let { url } = props;
         if (masquerade?.avatar) {
-            url = client.proxyFile(masquerade.avatar);
+            url = masquerade.avatar;
         } else if (!url) {
             let override;
             if (target && showServerIdentity) {
@@ -94,7 +101,7 @@ export default observer(
 
             url =
                 client.generateFileURL(
-                    override ?? target?.avatar ?? attachment ?? undefined,
+                    override ?? target?.avatar ?? attachment,
                     { max_side: 256 },
                     animate,
                 ) ?? (target ? target.defaultAvatarURL : fallback);
@@ -103,7 +110,6 @@ export default observer(
         return (
             <IconBase
                 {...svgProps}
-                ref={innerRef}
                 width={size}
                 height={size}
                 hover={hover}
@@ -115,7 +121,7 @@ export default observer(
                     y="0"
                     width="32"
                     height="32"
-                    className="icon"
+                    class="icon"
                     mask={mask ?? (status ? "url(#user)" : undefined)}>
                     {<img src={url} draggable={false} loading="lazy" />}
                 </foreignObject>

src/components/common/user/UserShort.tsx

@@ -1,19 +1,17 @@
-import { TimeFive } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
-import { User, API } from "revolt.js";
+import { Masquerade } from "revolt-api/types/Channels";
-import styled, { css } from "styled-components/macro";
+import { User } from "revolt.js/dist/maps/Users";
+import { Nullable } from "revolt.js/dist/util/null";
+import styled from "styled-components";
 
-import { Ref } from "preact";
 import { Text } from "preact-i18n";
 
 import { internalEmit } from "../../../lib/eventEmitter";
 
-import { dayjs } from "../../../context/Locale";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 
-import { useClient } from "../../../controllers/client/ClientController";
-import { modalController } from "../../../controllers/modals/ModalController";
-import Tooltip from "../Tooltip";
 import UserIcon from "./UserIcon";
 
 const BotBadge = styled.div`
@@ -23,52 +21,31 @@ const BotBadge = styled.div`
     padding: 0 4px;
     font-size: 0.6em;
     user-select: none;
-    margin-inline-start: 4px;
+    margin-inline-start: 2px;
     text-transform: uppercase;
-    color: var(--accent-contrast);
+
+    color: var(--foreground);
     background: var(--accent);
     border-radius: calc(var(--border-radius) / 2);
 `;
 
-type UsernameProps = Omit<
+type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
-    JSX.HTMLAttributes<HTMLElement>,
-    "children" | "as"
-> & {
     user?: User;
     prefixAt?: boolean;
-    masquerade?: API.Masquerade;
+    masquerade?: Masquerade;
     showServerIdentity?: boolean | "both";
-
-    innerRef?: Ref<any>;
 };
 
-const Name = styled.span<{ colour?: string | null }>`
-    ${(props) =>
-        props.colour &&
-        (props.colour.includes("gradient")
-            ? css`
-                  background: ${props.colour};
-                  background-clip: text;
-                  -webkit-background-clip: text;
-                  -webkit-text-fill-color: transparent;
-              `
-            : css`
-                  color: ${props.colour};
-              `)}
-`;
-
 export const Username = observer(
     ({
         user,
         prefixAt,
         masquerade,
         showServerIdentity,
-        innerRef,
         ...otherProps
     }: UsernameProps) => {
         let username = user?.username;
-        let color = masquerade?.colour;
+        let color;
-        let timed_out: Date | undefined;
 
         if (user && showServerIdentity) {
             const { server } = useParams<{ server?: string }>();
@@ -88,14 +65,15 @@ export const Username = observer(
                         }
                     }
 
-                    if (member.timeout) {
+                    if (member.roles && member.roles.length > 0) {
-                        timed_out = member.timeout;
+                        const srv = client.servers.get(member._id.server);
-                    }
+                        if (srv?.roles) {
-
+                            for (const role of member.roles) {
-                    if (!color) {
+                                const c = srv.roles[role].colour;
-                        for (const [_, { colour }] of member.orderedRoles) {
+                                if (c) {
-                            if (colour) {
+                                    color = c;
-                                color = colour;
+                                    continue;
+                                }
                             }
                         }
                     }
@@ -103,50 +81,29 @@ export const Username = observer(
             }
         }
 
-        const el = (
-            <>
-                <Name {...otherProps} ref={innerRef} colour={color}>
-                    {prefixAt ? "@" : undefined}
-                    {masquerade?.name ?? username ?? (
-                        <Text id="app.main.channel.unknown_user" />
-                    )}
-                </Name>
-
-                {timed_out && (
-                    <Tooltip
-                        content={
-                            <Text
-                                id="app.main.channel.user_timed_out"
-                                fields={{
-                                    time: dayjs(timed_out).fromNow(true),
-                                }}
-                            />
-                        }>
-                        <TimeFive
-                            size={16}
-                            color="var(--secondary-foreground)"
-                        />
-                    </Tooltip>
-                )}
-            </>
-        );
-
         if (user?.bot) {
             return (
                 <>
-                    {el}
+                    <span {...otherProps} style={{ color }}>
-                    <BotBadge>
+                        {masquerade?.name ?? username ?? (
-                        {masquerade ? (
+                            <Text id="app.main.channel.unknown_user" />
-                            <Text id="app.main.channel.bridge" />
-                        ) : (
-                            <Text id="app.main.channel.bot" />
                         )}
+                    </span>
+                    <BotBadge>
+                        <Text id="app.main.channel.bot" />
                     </BotBadge>
                 </>
             );
         }
 
-        return el;
+        return (
+            <span {...otherProps} style={{ color }}>
+                {prefixAt ? "@" : undefined}
+                {masquerade?.name ?? username ?? (
+                    <Text id="app.main.channel.unknown_user" />
+                )}
+            </span>
+        );
     },
 );
 
@@ -160,12 +117,12 @@ export default function UserShort({
     user?: User;
     size?: number;
     prefixAt?: boolean;
-    masquerade?: API.Masquerade;
+    masquerade?: Masquerade;
     showServerIdentity?: boolean;
 }) {
+    const { openScreen } = useIntermediate();
     const openProfile = () =>
-        user &&
+        user && openScreen({ id: "profile", user_id: user._id });
-        modalController.push({ type: "user_profile", user_id: user._id });
 
     const handleUserClick = (e: MouseEvent) => {
         if (e.shiftKey && user?._id) {

src/components/common/user/UserStatus.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react-lite";
-import { User, API } from "revolt.js";
+import { Presence } from "revolt-api/types/Users";
+import { User } from "revolt.js/dist/maps/Users";
 
 import { Text } from "preact-i18n";
 
@@ -24,19 +25,15 @@ export default observer(({ user, tooltip }: Props) => {
             return <>{user.status.text}</>;
         }
 
-        if (user.status?.presence === "Busy") {
+        if (user.status?.presence === Presence.Busy) {
             return <Text id="app.status.busy" />;
         }
 
-        if (user.status?.presence === "Idle") {
+        if (user.status?.presence === Presence.Idle) {
             return <Text id="app.status.idle" />;
         }
 
-        if (user.status?.presence === "Focus") {
+        if (user.status?.presence === Presence.Invisible) {
-            return <Text id="app.status.focus" />;
-        }
-
-        if (user.status?.presence === "Invisible") {
             return <Text id="app.status.offline" />;
         }
 

src/components/markdown/Markdown.module.scss

@@ -0,0 +1,214 @@
+.markdown {
+    :global(.emoji) {
+        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;
+            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;
+    }
+
+    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,15 +1,13 @@
 import { Suspense, lazy } from "preact/compat";
 
-const Renderer = lazy(() => import("./RemarkRenderer"));
+const Renderer = lazy(() => import("./Renderer"));
 
 export interface MarkdownProps {
-    content: string;
+    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

@@ -1,258 +0,0 @@
-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 recursion of blockquotes and lists
- */
-const RE_RECURSIVE = /(^(?:[>*+-][^\S\r\n]*){5})(?:[>*+-][^\S\r\n]*)+(.*$)/gm;
-
-/**
- * Regex for matching multi-line blockquotes
- */
-const RE_BLOCKQUOTE = /^([^\S\r\n]*>[^\n]+\n?)+/gm;
-
-/**
- * Regex for matching HTML tags
- */
-const RE_HTML_TAGS = /^(<\/?[a-zA-Z0-9]+>)(.*$)/gm;
-
-/**
- * Regex for matching empty lines
- */
-const RE_EMPTY_LINE = /^\s*?$/gm;
-
-/**
- * Regex for matching line starting with plus
- */
-const RE_PLUS = /^\s*\+(?:$|[^+])/gm;
-
-/**
- * Sanitise Markdown input before rendering
- * @param content Input string
- * @returns Sanitised string
- */
-function sanitise(content: string) {
-    return (
-        content
-            // Strip excessive blockquote or list indentation
-            .replace(RE_RECURSIVE, (_, m0, m1) => m0 + m1)
-
-            // Append empty character if string starts with html tag
-            // This is to avoid inconsistencies in rendering Markdown inside/after HTML tags
-            // https://github.com/revoltchat/revite/issues/733
-            .replace(RE_HTML_TAGS, (match) => `\u200E${match}`)
-
-            // Append empty character if line starts with a plus
-            // which would usually open a new list but we want
-            // to avoid that behaviour in our case.
-            .replace(RE_PLUS, (match) => `\u200E${match}`)
-
-            // Replace empty lines with non-breaking space
-            // because remark renderer is collapsing empty
-            // or otherwise whitespace-only lines of text
-            .replace(RE_EMPTY_LINE, "‎")
-
-            // Ensure empty line after blockquotes for correct rendering
-            .replace(RE_BLOCKQUOTE, (match) => `${match}\n`)
-    );
-}
-
-/**
- * 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

@@ -0,0 +1,268 @@
+/* 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";
+// @ts-expect-error No typings.
+import MarkdownSub from "markdown-it-sub";
+// @ts-expect-error No typings.
+import MarkdownSup from "markdown-it-sup";
+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 { 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(MarkdownSup)
+    .use(MarkdownSub)
+    .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;
+
+export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
+    const client = useContext(AppContext);
+    const { openLink } = useIntermediate();
+
+    if (typeof content === "undefined") return null;
+    if (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_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

@@ -1,7 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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`
-    font-family: var(--monospace-font);
-    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

@@ -1,34 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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);
-    }
-`;
-
-const RE_EMOJI = /:([a-zA-Z0-9_+]+):/g;
-const RE_ULID = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/;
-
-export function RenderEmoji({ match }: CustomComponentProps) {
-    const [fail, setFail] = useState(false);
-    const url = RE_ULID.test(match)
-        ? `${
-              clientController.getAvailableClient().configuration?.features
-                  .autumn.url
-          }/emojis/${match}`
-        : parseEmoji(
-              match in emojiDictionary
-                  ? emojiDictionary[match as keyof typeof emojiDictionary]
-                  : match,
-          );
-
-    if (fail) return <span>{`:${match}:`}</span>;
-
-    return (
-        <Emoji
-            alt={`:${match}:`}
-            loading="lazy"
-            className="emoji"
-            draggable={false}
-            src={url}
-            onError={() => setFail(true)}
-        />
-    );
-}
-
-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

@@ -1,10 +0,0 @@
-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";
-        });
-    };
-};