[chore] Revert PR publising.

Co-authored-by: jmug <u.g.a.mariano@gmail.com>
Reviewed-on: HMC/handmade-revolt#5

.env

@@ -1,2 +1,5 @@
-VITE_API_URL=https://api.revolt.chat
+# VITE_API_URL=https://api.revolt.chat
+# VITE_API_URL=https://app.revolt.chat/api
+# VITE_API_URL=http://local.revolt.chat:8000
+VITE_API_URL=https://app.revolt.chat/api
 VITE_THEMES_URL=https://themes.revolt.chat

.envrc

@@ -0,0 +1 @@
+use flake

.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/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

@@ -1,111 +1,44 @@
 name: Docker
 
 on:
-    push:
-        branches:
-            - "master"
-        tags:
-            - "*"
-        paths-ignore:
-            - ".github/**"
-            - "!.github/workflows/docker.yml"
-            - "!.github/workflows/preview_*.yml"
-            - ".vscode/**"
-            - ".gitignore"
-            - ".gitlab-ci.yml"
-            - "LICENSE"
-            - "README"
-    pull_request:
-        branches:
-            - "master"
-        paths-ignore:
-            - ".github/**"
-            - "!.github/workflows/docker.yml"
-            - "!.github/workflows/preview_*.yml"
-            - ".vscode/**"
-            - ".gitignore"
-            - ".gitlab-ci.yml"
-            - "LICENSE"
-            - "README"
-    workflow_dispatch:
+  push:
+    branches:
+    - "handmade"
+  pull_request:
+    branches:
+    - "handmade"
 
 jobs:
-    test:
-        runs-on: ubuntu-latest
-        strategy:
-            matrix:
-                architecture: [linux/amd64]
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v2
-              with:
-                  submodules: "recursive"
-            - name: Set up QEMU
-              uses: docker/setup-qemu-action@v1
-            - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@v1
-            - name: Cache Docker layers
-              uses: actions/cache@v2
-              with:
-                  path: /tmp/.buildx-cache/${{ matrix.architecture }}
-                  key: ${{ runner.os }}-buildx-${{ matrix.architecture }}-${{ github.sha }}
-            - name: Build
-              uses: docker/build-push-action@v2
-              with:
-                  context: .
-                  platforms: ${{ matrix.architecture }}
-                  cache-from: type=local,src=/tmp/.buildx-cache/${{ matrix.architecture }}
-                  cache-to: type=local,dest=/tmp/.buildx-cache-new/${{ matrix.architecture }},mode=max
-            - name: Move cache
-              run: |
-                  rm -rf /tmp/.buildx-cache/${{ matrix.architecture }}
-                  mv /tmp/.buildx-cache-new/${{ matrix.architecture }} /tmp/.buildx-cache/${{ matrix.architecture }}
-
     publish:
-        needs: [test]
         runs-on: ubuntu-latest
-        if: github.event_name != 'pull_request'
         steps:
             - name: Checkout
-              uses: actions/checkout@v2
+              uses: actions/checkout@v4
               with:
                   submodules: "recursive"
             - name: Set up QEMU
-              uses: docker/setup-qemu-action@v1
+              uses: docker/setup-qemu-action@v3
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@v1
-            - name: Cache amd64 Docker layers
-              uses: actions/cache@v2
-              with:
-                  path: /tmp/.buildx-cache/linux/amd64
-                  key: ${{ runner.os }}-buildx-linux/amd64-${{ github.sha }}
+              uses: docker/setup-buildx-action@v3
             - name: Docker meta
               id: meta
-              uses: docker/metadata-action@v3
+              uses: docker/metadata-action@v5
               with:
-                  images: revoltchat/client, ghcr.io/revoltchat/client
+                  images: handmadecities/handmade-revolt-web-client
+              env:
+                  DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
             - name: Login to DockerHub
               uses: docker/login-action@v1
+              if: github.event_name != 'pull_request'
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
-            - name: Login to Github Container Registry
-              uses: docker/login-action@v1
-              with:
-                  registry: ghcr.io
-                  username: ${{ github.actor }}
-                  password: ${{ secrets.GITHUB_TOKEN }}
             - name: Build and publish
-              uses: docker/build-push-action@v2
+              uses: docker/build-push-action@v6
               with:
                   context: .
-                  push: true
-                  platforms: linux/amd64
+                  push: ${{ github.event_name != 'pull_request' }}
+                  platforms: linux/amd64,linux/arm64
                   tags: ${{ steps.meta.outputs.tags }}
+                  annotations: ${{ steps.meta.outputs.annotations }}
                   labels: ${{ steps.meta.outputs.labels }}
-                  cache-from: type=local,src=/tmp/.buildx-cache/linux/amd64
-                  cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-            - name: Move cache
-              run: |
-                  rm -rf /tmp/.buildx-cache
-                  mv /tmp/.buildx-cache-new /tmp/.buildx-cache

.github/workflows/mirroring.yml

@@ -1,16 +0,0 @@
-name: Mirroring
-
-on:
-    push:
-        branches:
-            - "master"
-
-jobs:
-    to_gitlab:
-        runs-on: ubuntu-18.04
-        steps:
-            - uses: actions/checkout@v1
-            - uses: pixta-dev/repository-mirroring-action@v1
-              with:
-                  target_repo_url: git@gitlab.com:insert/revolt-vite.git
-                  ssh_private_key: ${{ secrets.GITLAB_SSH_PRIVATE_KEY }}

.github/workflows/triage_issue.yml

@@ -1,49 +0,0 @@
-name: Add Issue to Board
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  track_issue:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get project data
-        env:
-          GITHUB_TOKEN: ${{ secrets.PAT }}
-        run: |
-          gh api graphql -f query='
-            query {
-              organization(login: "revoltchat"){
-                projectNext(number: 3) {
-                  id
-                  fields(first:20) {
-                    nodes {
-                      id
-                      name
-                      settings
-                    }
-                  }
-                }
-              }
-            }' > project_data.json
-
-          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 'TODO_OPTION_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Todo") |.id' project_data.json) >> $GITHUB_ENV
-
-      - name: Add issue to project
-        env:
-          GITHUB_TOKEN: ${{ secrets.PAT }}
-          ISSUE_ID: ${{ github.event.issue.node_id }}
-        run: |
-          item_id="$( gh api graphql -f query='
-            mutation($project:ID!, $issue:ID!) {
-              addProjectNextItem(input: {projectId: $project, contentId: $issue}) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f issue=$ISSUE_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
-          
-          echo 'ITEM_ID='$item_id >> $GITHUB_ENV

.github/workflows/triage_pr.yml

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

.gitignore

@@ -15,3 +15,5 @@ public/assets_*
 !public/assets_default
 
 .vscode/chrome_data
+
+.direnv

Dockerfile

@@ -1,17 +1,21 @@
-FROM node:16-buster AS builder
+# syntax=docker.io/docker/dockerfile:1.7-labs
+FROM --platform=$BUILDPLATFORM node:16-buster AS builder
 
 WORKDIR /usr/src/app
 COPY . .
 COPY .env.build .env
 
 RUN yarn install --frozen-lockfile
-RUN yarn typecheck
+RUN yarn build:deps
+# RUN yarn typecheck # lol no
 RUN yarn build:highmem
 RUN yarn workspaces focus --production --all
 
-FROM node:16-alpine
+FROM node:24-alpine
 WORKDIR /usr/src/app
-COPY --from=builder /usr/src/app .
+COPY docker/package.json docker/yarn.lock .
+RUN yarn install --frozen-lockfile
+COPY --from=builder --exclude=package.json --exclude=yarn.lock --exclude=.yarn* --exclude=.git --exclude=external --exclude=node_modules /usr/src/app .
 
 EXPOSE 5000
 CMD [ "yarn", "start:inject" ]

README.md

@@ -1,3 +1,27 @@
+# Handmade Revolt
+Fork of Revolt (now Stoat chat) maintained by the handmade cities community.
+
+## Deploying a new release
+
+Ensure `.env.local` points to `https://app.revolt.chat/api`.
+
+```bash
+cd ~/deployments/revite
+git pull
+git submodule update
+
+# check:
+git status
+
+export REVOLT_SAAS_BRANCH=revite/main
+export REMOTE=root@production
+scripts/publish.sh
+
+# SSH in and restart revite:
+ssh $REMOTE
+tmux a -t 4
+```
+
 # Revite
 
 ## Description

default.nix

@@ -0,0 +1,8 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+pkgs.mkShell rec {
+  buildInputs = [
+    pkgs.nodejs
+    pkgs.nodejs.pkgs.yarn
+  ];
+}

docker/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "inject-and-sirv",
+  "version": "0.0.1",
+  "scripts": {
+    "start:inject": "node scripts/inject.js && sirv dist_injected --port 5000 --cors --single --host"
+  },
+  "private": true,
+  "dependencies": {
+    "fs-extra": "^11.3.0",
+    "klaw": "^4.1.0",
+    "sirv-cli": "^3.0.1"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

docker/yarn.lock

@@ -0,0 +1,116 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@polka/url@^1.0.0-next.24":
+  version "1.0.0-next.29"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
+  integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
+
+console-clear@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
+  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
+
+fs-extra@^11.3.0:
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.3.0.tgz#0daced136bbaf65a555a326719af931adc7a314d"
+  integrity sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+get-port@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
+  integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==
+
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+klaw@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-4.1.0.tgz#5df608067d8cb62bbfb24374f8e5d956323338f3"
+  integrity sha512-1zGZ9MF9H22UnkpVeuaGKOjfA2t6WrfdrJmGjy16ykcjnKQDmHVX+KI477rpbGevz/5FD4MC3xf1oxylBgcaQw==
+
+kleur@^4.1.4:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
+local-access@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/local-access/-/local-access-1.1.0.tgz#e007c76ba2ca83d5877ba1a125fc8dfe23ba4798"
+  integrity sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==
+
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
+mrmime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.1.tgz#bc3e87f7987853a54c9850eeb1f1078cd44adddc"
+  integrity sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==
+
+sade@^1.6.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
+
+semiver@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/semiver/-/semiver-1.1.0.tgz#9c97fb02c21c7ce4fcf1b73e2c7a24324bdddd5f"
+  integrity sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==
+
+sirv-cli@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/sirv-cli/-/sirv-cli-3.0.1.tgz#9a53e4fa85fdc08d54a76fd76a7c866cd4c3988b"
+  integrity sha512-ICXaF2u6IQhLZ0EXF6nqUF4YODfSQSt+mGykt4qqO5rY+oIiwdg7B8w2PVDBJlQulaS2a3J8666CUoDoAuCGvg==
+  dependencies:
+    console-clear "^1.1.0"
+    get-port "^5.1.1"
+    kleur "^4.1.4"
+    local-access "^1.0.1"
+    sade "^1.6.0"
+    semiver "^1.0.0"
+    sirv "^3.0.0"
+    tinydate "^1.0.0"
+
+sirv@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-3.0.1.tgz#32a844794655b727f9e2867b777e0060fbe07bf3"
+  integrity sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==
+  dependencies:
+    "@polka/url" "^1.0.0-next.24"
+    mrmime "^2.0.0"
+    totalist "^3.0.0"
+
+tinydate@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
+  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
+
+totalist@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
+  integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
+
+universalify@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==

flake.lock

@@ -0,0 +1,64 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": [
+          "systems"
+        ]
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1770169770,
+        "narHash": "sha256-awR8qIwJxJJiOmcEGgP2KUqYmHG4v/z8XpL9z8FnT1A=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "aa290c9891fa4ebe88f8889e59633d20cc06a5f2",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs",
+        "systems": "systems"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,28 @@
+{
+  description = "Node+yarn dev shell flake";
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    systems.url = "github:nix-systems/default";
+    flake-utils = {
+      url = "github:numtide/flake-utils";
+      inputs.systems.follows = "systems";
+    };
+  };
+
+  outputs =
+    { nixpkgs, flake-utils, ... }:
+    flake-utils.lib.eachDefaultSystem (
+      system:
+      let
+        pkgs = nixpkgs.legacyPackages.${system};
+      in
+      {
+        devShells.default = pkgs.mkShell {
+          packages = with pkgs; [
+            nodejs_24
+            yarn
+          ];
+        };
+      }
+    );
+}

package.json

@@ -44,8 +44,10 @@
         }
     },
     "dependencies": {
+        "@revoltchat/rehype-katex": "6.0.3-patch.1",
         "fs-extra": "^10.0.0",
         "klaw": "^3.0.0",
+        "lottie-react": "^2.4.0",
         "sirv-cli": "^1.0.14",
         "vite": "^3.0.5"
     },
@@ -136,7 +138,6 @@
         "react-router-dom": "^5.2.0",
         "react-scroll": "^1.8.2",
         "react-virtuoso": "^2.12.0",
-        "rehype-katex": "^6.0.2",
         "rehype-prism": "^2.1.3",
         "rehype-react": "^7.1.1",
         "remark-breaks": "^3.0.2",

scripts/publish.sh

@@ -2,13 +2,16 @@
 # Build and publish release to production server
 
 # Remote Server
-REMOTE=revolt-de-nrb-1
+if [ -z "$REMOTE" ]; then
+    echo "Please set REMOTE!"
+    exit
+fi
 
 # Remote Directory
-REMOTE_DIR=/root/revite
+REMOTE_DIR=/root/deployments/revite
 
 # Post-install script
-POST_INSTALL="pm2 restart revite"
+POST_INSTALL=""
 
 # Assets
 export REVOLT_SAAS=https://github.com/revoltchat/assets
@@ -18,7 +21,7 @@ export REVOLT_SAAS=https://github.com/revoltchat/assets
 set -e
 
 # 1. Build Revite
-yarn build
+yarn build:highmem
 
 # 2. Archive built files
 tar -czvf build.tar.gz dist

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/changelogs.tsx

@@ -0,0 +1,86 @@
+import Lottie, { LottieRefCurrentProps } from "lottie-react";
+
+import { JSX } from "preact";
+
+import usernameAnim from "../controllers/modals/components/legacy/usernameUpdateLottie.json";
+
+type Element =
+    | string
+    | {
+          type: "image";
+          src: string;
+          shadow?: boolean;
+      }
+    | { type: "element"; element: JSX.Element };
+
+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!",
+        ],
+    },
+    2: {
+        date: new Date("2023-02-23T20:00:00.000Z"),
+        title: "In-App Reporting Is Here",
+        content: [
+            "You can now report any user, server, or message directly from the app.",
+            {
+                type: "image",
+                src: "https://autumn.revolt.chat/attachments/ZuDVIjGiCl61Pk9XGk5qfc8-idN9EnFAk55DUQp713/the.png",
+                shadow: true,
+            },
+            "If you want to learn more about how we're making Revolt safer for you, check out our new blog post :point_right: [https://revolt.chat/posts/improving-user-safety](https://revolt.chat/posts/improving-user-safety)",
+        ],
+    },
+    3: {
+        date: new Date("2023-06-11T15:00:00.000Z"),
+        title: "Usernames are Changing",
+        content: [
+            {
+                type: "element",
+                element: (
+                    <Lottie
+                        animationData={usernameAnim}
+                        style={{
+                            background: "var(--secondary-background)",
+                            borderRadius: "6px",
+                        }}
+                    />
+                ),
+            },
+            "Revolt has undergone a significant change to its username system, transitioning from unique username handles to a new system of display names and usernames with four-digit number tags called discriminators. The four-digit number tags serve as identifiers to differentiate users with the same username, allowing individuals to select desired usernames that reflect their identity.",
+            {
+                type: "element",
+                element: (
+                    <a href="https://revolt.chat/posts/evolving-usernames">
+                        Read more on our blog!
+                    </a>
+                ),
+            },
+        ],
+    },
+};
+
+export const changelogEntryArray = Object.keys(changelogEntries).map(
+    (index) => changelogEntries[index as unknown as number],
+);
+
+export const latestChangelog = changelogEntryArray.length;

src/assets/emojis.ts

@@ -1848,109 +1848,109 @@ 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",
-    },
+    // ...{
+    //     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/components/common/AgeGate.tsx

@@ -4,9 +4,9 @@ import { Channel } from "revolt.js";
 import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
-import { Button, Checkbox } from "@revoltchat/ui";
+import { Button, Checkbox, Preloader } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../mobx/State";
 import { SECTION_NSFW } from "../../mobx/stores/Layout";
@@ -45,14 +45,36 @@ type Props = {
     channel: Channel;
 };
 
+let geoBlock:
+    | undefined
+    | {
+          countryCode: string;
+          isAgeRestrictedGeo: true;
+      };
+
 export default observer((props: Props) => {
     const history = useHistory();
     const layout = useApplicationState().layout;
+    const [geoLoaded, setGeoLoaded] = useState(typeof geoBlock !== "undefined");
     const [ageGate, setAgeGate] = useState(false);
 
-    if (ageGate || !props.gated) {
+    useEffect(() => {
+        if (!geoLoaded) {
+            fetch("https://geo.revolt.chat")
+                .then((res) => res.json())
+                .then((data) => {
+                    geoBlock = data;
+                    setGeoLoaded(true);
+                });
+        }
+    }, []);
+
+    if (!geoBlock) return <Preloader type="spinner" />;
+
+    if ((ageGate && !geoBlock.isAgeRestrictedGeo) || !props.gated) {
         return <>{props.children}</>;
     }
+
     if (
         !(
             props.channel.channel_type === "Group" ||
@@ -76,23 +98,40 @@ export default observer((props: Props) => {
                 </a>
             </span>
 
-            <Checkbox
-                title={<Text id="app.main.channel.nsfw.confirm" />}
-                value={layout.getSectionState(SECTION_NSFW, false)}
-                onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}
-            />
-            <div className="actions">
-                <Button palette="secondary" onClick={() => history.goBack()}>
-                    <Text id="app.special.modals.actions.back" />
-                </Button>
-                <Button
-                    palette="secondary"
-                    onClick={() =>
-                        layout.getSectionState(SECTION_NSFW) && setAgeGate(true)
-                    }>
-                    <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
-                </Button>
-            </div>
+            {geoBlock.isAgeRestrictedGeo ? (
+                <div style={{ maxWidth: "420px", textAlign: "center" }}>
+                    {geoBlock.countryCode === "GB"
+                        ? "This channel is not available in your region while we review options on legal compliance."
+                        : "This content is not available in your region."}
+                </div>
+            ) : (
+                <>
+                    <Checkbox
+                        title={<Text id="app.main.channel.nsfw.confirm" />}
+                        value={layout.getSectionState(SECTION_NSFW, false)}
+                        onChange={() =>
+                            layout.toggleSectionState(SECTION_NSFW, false)
+                        }
+                    />
+                    <div className="actions">
+                        <Button
+                            palette="secondary"
+                            onClick={() => history.goBack()}>
+                            <Text id="app.special.modals.actions.back" />
+                        </Button>
+                        <Button
+                            palette="secondary"
+                            onClick={() =>
+                                layout.getSectionState(SECTION_NSFW) &&
+                                setAgeGate(true)
+                            }>
+                            <Text
+                                id={`app.main.channel.nsfw.${props.type}.confirm`}
+                            />
+                        </Button>
+                    </div>
+                </>
+            )}
         </Base>
     );
 });

src/components/common/AutoComplete.tsx

@@ -1,4 +1,7 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { Link } from "react-router-dom";
 import { Channel, User } from "revolt.js";
+import { Emoji as CustomEmoji } from "revolt.js/esm/maps/Emojis";
 import styled, { css } from "styled-components/macro";
 
 import { StateUpdater, useState } from "preact/hooks";
@@ -7,6 +10,8 @@ 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 =
@@ -14,7 +19,7 @@ export type AutoCompleteState =
     | ({ selected: number; within: boolean } & (
           | {
                 type: "emoji";
-                matches: string[];
+                matches: (string | CustomEmoji)[];
             }
           | {
                 type: "user";
@@ -59,7 +64,7 @@ export function useAutoComplete(
             const cursor = el.selectionStart;
             const content = el.value.slice(0, cursor);
 
-            const valid = /\w/;
+            const valid = /[\w\-]/;
 
             let j = content.length - 1;
             if (content[j] === "@") {
@@ -104,16 +109,23 @@ export function useAutoComplete(
 
             if (type === "emoji") {
                 // ! TODO: we should convert it to a Binary Search Tree and use that
-                const matches = Object.keys(emojiDictionary)
-                    .filter((emoji: string) => emoji.match(regex))
-                    .splice(0, 5);
+                const matches = [
+                    ...Object.keys(emojiDictionary).filter((emoji: string) =>
+                        emoji.match(regex),
+                    ),
+                    ...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,
@@ -233,10 +245,13 @@ export function useAutoComplete(
 
                 const content = el.value.split("");
                 if (state.type === "emoji") {
+                    const selected = state.matches[state.selected];
                     content.splice(
                         index,
                         search.length,
-                        state.matches[state.selected],
+                        selected instanceof CustomEmoji
+                            ? selected._id
+                            : selected,
                         ": ",
                     );
                 } else if (state.type === "user") {
@@ -388,12 +403,17 @@ 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={() =>
@@ -412,15 +432,61 @@ export default function AutoComplete({
                                 })
                             }
                             onClick={onClick}>
-                            <Emoji
-                                emoji={
-                                    (emojiDictionary as Record<string, string>)[
-                                        match
-                                    ]
-                                }
-                                size={20}
-                            />
-                            :{match}:
+                            <div
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    justifyContent: "center",
+                                }}>
+                                {match instanceof CustomEmoji ? (
+                                    <img
+                                        loading="lazy"
+                                        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/Emoji.tsx

@@ -43,11 +43,11 @@ function toCodePoint(rune: string) {
 }
 
 export function parseEmoji(emoji: string) {
-    if (emoji.startsWith("custom:")) {
-        return `https://dl.insrt.uk/projects/revolt/emotes/${emoji.substring(
-            7,
-        )}`;
-    }
+    // 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/messaging/Message.tsx

@@ -5,7 +5,7 @@ import { useTriggerEvents } from "preact-context-menu";
 import { memo } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
-import { Category, Button } from "@revoltchat/ui";
+import { Category } from "@revoltchat/ui";
 
 import { internalEmit } from "../../../lib/eventEmitter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
@@ -33,7 +33,7 @@ import InviteList from "./embed/EmbedInvite";
 interface Props {
     attachContext?: boolean;
     queued?: QueuedMessage;
-    message: MessageObject;
+    message: MessageObject & { webhook: { name: string; avatar?: string } };
     highlight?: boolean;
     contrast?: boolean;
     content?: Children;
@@ -63,6 +63,7 @@ const Message = observer(
             ? useTriggerEvents("Menu", {
                   user: message.author_id,
                   contextualChannel: message.channel_id,
+                  contextualMessage: message._id,
                   // eslint-disable-next-line
               })
             : undefined;
@@ -137,6 +138,11 @@ const Message = observer(
                             <UserIcon
                                 className="avatar"
                                 url={message.generateMasqAvatarURL()}
+                                override={
+                                    message.webhook?.avatar
+                                        ? `https://autumn.revolt.chat/avatars/${message.webhook.avatar}`
+                                        : undefined
+                                }
                                 target={user}
                                 size={36}
                                 onClick={handleUserClick}
@@ -157,6 +163,7 @@ const Message = observer(
                                     showServerIdentity
                                     onClick={handleUserClick}
                                     masquerade={message.masquerade!}
+                                    override={message.webhook?.name}
                                     {...userContext}
                                 />
                                 <MessageDetail

src/components/common/messaging/MessageBox.tsx

@@ -23,6 +23,7 @@ import {
 } from "../../../lib/renderer/Singleton";
 
 import { state, useApplicationState } from "../../../mobx/State";
+import { DraftObject } from "../../../mobx/stores/Draft";
 import { Reply } from "../../../mobx/stores/MessageQueue";
 
 import { dayjs } from "../../../context/Locale";
@@ -277,7 +278,12 @@ export default observer(({ channel }: Props) => {
 
     // Push message content to draft.
     const setMessage = useCallback(
-        (content?: string) => state.draft.set(channel._id, content),
+        (content?: string) => {
+            const dobj: DraftObject = {
+                content,
+            };
+            state.draft.set(channel._id, dobj);
+        },
         [state.draft, channel._id],
     );
 
@@ -299,7 +305,7 @@ export default observer(({ channel }: Props) => {
             if (!state.draft.has(channel._id)) {
                 setMessage(text);
             } else {
-                setMessage(`${state.draft.get(channel._id)}\n${text}`);
+                setMessage(`${state.draft.get(channel._id)?.content}\n${text}`);
             }
         }
 
@@ -317,8 +323,8 @@ export default observer(({ channel }: Props) => {
         if (uploadState.type === "uploading" || uploadState.type === "sending")
             return;
 
-        const content = state.draft.get(channel._id)?.trim() ?? "";
-        if (uploadState.type === "attached") return sendFile(content);
+        const content = state.draft.get(channel._id)?.content?.trim() ?? "";
+        if (uploadState.type !== "none") return sendFile(content);
         if (content.length === 0) return;
 
         internalEmit("NewMessages", "hide");
@@ -400,7 +406,9 @@ export default observer(({ channel }: Props) => {
      * @returns
      */
     async function sendFile(content: string) {
-        if (uploadState.type !== "attached") return;
+        if (uploadState.type !== "attached" && uploadState.type !== "failed")
+            return;
+
         const attachments: string[] = [];
         setMessage;
 
@@ -526,7 +534,7 @@ export default observer(({ channel }: Props) => {
     }
 
     function isInCodeBlock(cursor: number): boolean {
-        const content = state.draft.get(channel._id) || "";
+        const content = state.draft.get(channel._id)?.content || "";
         const contentBeforeCursor = content.substring(0, cursor);
 
         let delimiterCount = 0;
@@ -607,10 +615,12 @@ export default observer(({ channel }: Props) => {
                     <HackAlertThisFileWillBeReplaced
                         onSelect={(emoji) => {
                             const v = state.draft.get(channel._id);
-                            state.draft.set(
-                                channel._id,
-                                `${v ? `${v} ` : ""}:${emoji}:`,
-                            );
+                            const cnt: DraftObject = {
+                                content:
+                                    (v?.content ? `${v.content} ` : "") +
+                                    `:${emoji}:`,
+                            };
+                            state.draft.set(channel._id, cnt);
                         }}
                         onClose={closePicker}
                     />
@@ -664,7 +674,7 @@ export default observer(({ channel }: Props) => {
                     id="message"
                     maxLength={2000}
                     onKeyUp={onKeyUp}
-                    value={state.draft.get(channel._id) ?? ""}
+                    value={state.draft.get(channel._id)?.content ?? ""}
                     padding="var(--message-box-padding)"
                     onKeyDown={(e) => {
                         if (e.ctrlKey && e.key === "Enter") {
@@ -736,13 +746,11 @@ 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={() => setPicker(!picker)}>
+                        <HappyBeaming size={24} />
+                    </IconButton>
+                </Action>
                 <Action>
                     <IconButton
                         className={

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

@@ -26,8 +26,8 @@ export default function AttachmentActions({ attachment }: Props) {
     const { filename, metadata, size } = attachment;
 
     const url = client.generateFileURL(attachment);
-    const open_url = `${url}/${filename}`;
-    const download_url = url?.replace("attachments", "attachments/download");
+    const open_url = url;
+    const download_url = `${url}/${filename}`;
 
     const filesize = determineFileSize(size);
 
@@ -49,10 +49,11 @@ export default function AttachmentActions({ attachment }: Props) {
                         </IconButton>
                     </a>
                     <a
+                        target="_blank"
                         href={download_url}
                         className={styles.downloadIcon}
                         download
-                        target={isFirefox || window.native ? "_blank" : "_self"}
+                        // target={isFirefox || window.native ? "_blank" : "_self"}
                         rel="noreferrer">
                         <IconButton>
                             <Download size={24} />

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

@@ -16,6 +16,11 @@ import { IconButton } from "@revoltchat/ui";
 
 import { emojiDictionary } from "../../../../assets/emojis";
 import { useClient } from "../../../../controllers/client/ClientController";
+import { modalController } from "../../../../controllers/modals/ModalController";
+import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
+import Tooltip from "../../Tooltip";
+import UserIcon from "../../user/UserIcon";
+import { Username } from "../../user/UserShort";
 import { RenderEmoji } from "../../../markdown/plugins/emoji";
 import { HackAlertThisFileWillBeReplaced } from "../MessageBox";
 
@@ -85,6 +90,38 @@ const Reaction = styled.div<{ active: boolean }>`
         `}
 `;
 
+/**
+ * Tooltip content for reaction users
+ */
+const TooltipUserList = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 4px 0;
+    max-width: 200px;
+`;
+
+const TooltipUserRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.9em;
+    padding: 4px 6px;
+    margin: -4px -6px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+
+    &:hover {
+        background: var(--secondary-background);
+    }
+`;
+
+const TooltipMoreText = styled.div`
+    font-size: 0.85em;
+    color: var(--secondary-foreground);
+    padding-top: 2px;
+`;
+
 /**
  * Render reactions on a message
  */
@@ -98,16 +135,97 @@ export const Reactions = observer(({ message }: Props) => {
     const Entry = useCallback(
         observer(({ id, user_ids }: { id: string; user_ids?: Set<string> }) => {
             const active = user_ids?.has(client.user!._id) || false;
+            const userIds = user_ids ? Array.from(user_ids) : [];
+            const longPressTimer = useRef<number | null>(null);
+            const didLongPress = useRef(false);
 
-            return (
+            const handleClick = () => {
+                if (didLongPress.current) {
+                    didLongPress.current = false;
+                    return;
+                }
+                active ? message.unreact(id) : message.react(id);
+            };
+
+            const openModal = () => {
+                modalController.push({
+                    type: "reaction_users",
+                    emoji: id,
+                    userIds,
+                });
+            };
+
+            const handleTouchStart = (e: TouchEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
+                didLongPress.current = false;
+                longPressTimer.current = window.setTimeout(() => {
+                    didLongPress.current = true;
+                    openModal();
+                }, 500);
+            };
+
+            const handleTouchEnd = (e: TouchEvent) => {
+                e.stopPropagation();
+                if (longPressTimer.current) {
+                    clearTimeout(longPressTimer.current);
+                    longPressTimer.current = null;
+                    // Short tap - trigger manually since preventDefault blocks click
+                    if (!didLongPress.current) {
+                        active ? message.unreact(id) : message.react(id);
+                    }
+                }
+                didLongPress.current = false;
+            };
+
+            const openUserProfile = (userId: string) => {
+                modalController.push({ type: "user_profile", user_id: userId });
+            };
+
+            // Build tooltip content showing up to 10 users
+            const tooltipContent = (
+                <TooltipUserList>
+                    {userIds.slice(0, 10).map((userId) => {
+                        const user = client.users.get(userId);
+                        return (
+                            <TooltipUserRow
+                                key={userId}
+                                onClick={() => openUserProfile(userId)}>
+                                <UserIcon target={user} size={18} />
+                                <Username user={user} />
+                            </TooltipUserRow>
+                        );
+                    })}
+                    {userIds.length > 10 && (
+                        <TooltipMoreText>
+                            and {userIds.length - 10} more...
+                        </TooltipMoreText>
+                    )}
+                </TooltipUserList>
+            );
+
+            const reactionElement = (
                 <Reaction
                     active={active}
-                    onClick={() =>
-                        active ? message.unreact(id) : message.react(id)
-                    }>
+                    onClick={handleClick}
+                    onTouchStart={isTouchscreenDevice ? handleTouchStart : undefined}
+                    onTouchEnd={isTouchscreenDevice ? handleTouchEnd : undefined}
+                    onTouchCancel={isTouchscreenDevice ? handleTouchEnd : undefined}>
                     <RenderEmoji match={id} /> {user_ids?.size || 0}
                 </Reaction>
             );
+
+            // Desktop: show tooltip on hover
+            // Mobile: long-press opens modal, handled by touch events
+            if (!isTouchscreenDevice && userIds.length > 0) {
+                return (
+                    <Tooltip content={tooltipContent} delay={300} interactive>
+                        {reactionElement}
+                    </Tooltip>
+                );
+            }
+
+            return reactionElement;
         }),
         [],
     );

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

@@ -119,19 +119,18 @@ export const MessageOverlayBar = observer(
                     </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>
-                    )}
+                {message.channel?.havePermission("React") && (
+                    <ReactionWrapper
+                        open={reactionsOpen}
+                        setOpen={setReactionsOpen}
+                        message={message}>
+                        <Tooltip content="React">
+                            <Entry>
+                                <HappyBeaming size={18} />
+                            </Entry>
+                        </Tooltip>
+                    </ReactionWrapper>
+                )}
 
                 {isAuthor && (
                     <Tooltip content="Edit">

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

@@ -17,6 +17,7 @@ import { Bar } from "./JumpToBottom";
 export default observer(
     ({ channel, last_id }: { channel: Channel; last_id?: string }) => {
         const [hidden, setHidden] = useState(false);
+        const [timeAgo, setTimeAgo] = useState("");
         const hide = () => setHidden(true);
 
         useEffect(() => setHidden(false), [last_id]);
@@ -29,6 +30,14 @@ export default observer(
             return () => document.removeEventListener("keydown", onKeyDown);
         }, []);
 
+        useEffect(() => {
+            if (last_id) {
+                try {
+                    setTimeAgo(dayjs(decodeTime(last_id)).fromNow());
+                } catch (err) {}
+            }
+        }, [last_id]);
+
         const renderer = getRenderer(channel);
         const history = useHistory();
         if (renderer.state !== "RENDER") return null;
@@ -52,7 +61,7 @@ export default observer(
                         <Text
                             id="app.main.channel.misc.new_messages"
                             fields={{
-                                time_ago: dayjs(decodeTime(last_id)).fromNow(),
+                                time_ago: timeAgo,
                             }}
                         />
                     </div>

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

@@ -76,7 +76,9 @@ export default observer(({ channel }: Props) => {
         if (users.length >= 5) {
             text = <Text id="app.main.channel.typing.several" />;
         } else if (users.length > 1) {
-            const userlist = [...users].map((x) => x!.username);
+            const userlist = [...users].map(
+                (x) => x!.display_name ?? x!.username,
+            );
             const user = userlist.pop();
 
             text = (
@@ -92,7 +94,9 @@ export default observer(({ channel }: Props) => {
             text = (
                 <Text
                     id="app.main.channel.typing.single"
-                    fields={{ user: users[0]!.username }}
+                    fields={{
+                        user: users[0]!.display_name ?? users[0]!.username,
+                    }}
                 />
             );
         }

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

@@ -67,7 +67,8 @@ export default function Embed({ embed }: Props) {
                         break;
                     }
                     case "Twitch":
-                    case "Lightspeed": {
+                    case "Lightspeed":
+                    case "Streamable": {
                         mw = 1280;
                         mh = 720;
                         break;
@@ -141,7 +142,11 @@ export default function Embed({ embed }: Props) {
                                 <a
                                     onMouseDown={(ev) =>
                                         (ev.button === 0 || ev.button === 1) &&
-                                        modalController.openLink(embed.url!)
+                                        modalController.openLink(
+                                            embed.url!,
+                                            undefined,
+                                            true,
+                                        )
                                     }
                                     className={styles.title}>
                                     {embed.title}
@@ -193,7 +198,8 @@ export default function Embed({ embed }: Props) {
                         modalController.push({ type: "image_viewer", embed })
                     }
                     onMouseDown={(ev) =>
-                        ev.button === 1 && modalController.openLink(embed.url)
+                        ev.button === 1 &&
+                        modalController.openLink(embed.url, undefined, true)
                     }
                 />
             );

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

@@ -126,8 +126,16 @@ export function EmbedInvite({ code }: Props) {
                     <EmbedInviteName>{invite.server_name}</EmbedInviteName>
                     <EmbedInviteMemberCount>
                         <Group size={12} />
-                        {invite.member_count.toLocaleString()}{" "}
-                        {invite.member_count === 1 ? "member" : "members"}
+                        {invite.member_count != null ? (
+                            <>
+                                {invite.member_count.toLocaleString()}{" "}
+                                {invite.member_count === 1
+                                    ? "member"
+                                    : "members"}
+                            </>
+                        ) : (
+                            "N/A"
+                        )}
                     </EmbedInviteMemberCount>
                 </EmbedInviteDetails>
                 {processing ? (

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

@@ -92,6 +92,16 @@ export default function EmbedMedia({ embed, width, height }: Props) {
                 />
             );
         }
+        case "Streamable": {
+            return (
+                <iframe
+                    src={`https://streamable.com/e/${embed.special.id}?loop=0`}
+                    seamless
+                    loading="lazy"
+                    style={{ height }}
+                />
+            );
+        }
         default: {
             if (embed.video) {
                 const url = embed.video.url;

src/components/common/user/UserBadges.tsx

@@ -22,12 +22,11 @@ enum Badges {
 const BadgesBase = styled.div`
     gap: 8px;
     display: flex;
-    margin-top: 4px;
     flex-direction: row;
 
     img {
-        width: 32px;
-        height: 32px;
+        width: 24px;
+        height: 24px;
     }
 `;
 
@@ -103,7 +102,7 @@ export default function UserBadges({ badges, uid }: Props) {
                         content={
                             <Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
                         }>
-                        <Shield size={32} color="gray" />
+                        <Shield size={24} color="gray" />
                     </Tooltip>
                 ) : (
                     <></>
@@ -120,7 +119,7 @@ export default function UserBadges({ badges, uid }: Props) {
                             }}
                             onClick={() => {
                                 window.open(
-                                    "https://insrt.uk/donate",
+                                    "https://wiki.revolt.chat/notes/project/financial-support/",
                                     "_blank",
                                 );
                             }}

src/components/common/user/UserHeader.tsx

@@ -29,9 +29,14 @@ const HeaderBase = styled.div`
         text-overflow: ellipsis;
     }
 
+    .new-name {
+        font-size: 16px;
+        font-weight: 600;
+    }
+
     .username {
         cursor: pointer;
-        font-size: 16px;
+        font-size: 13px;
         font-weight: 600;
     }
 
@@ -50,6 +55,9 @@ export default observer(({ user }: Props) => {
     return (
         <Header topBorder palette="secondary">
             <HeaderBase>
+                <div className="new-name">
+                    {user.display_name ?? user.username}
+                </div>
                 <Localizer>
                     <Tooltip content={<Text id="app.special.copy_username" />}>
                         <span
@@ -57,7 +65,9 @@ export default observer(({ user }: Props) => {
                             onClick={() =>
                                 modalController.writeText(user.username)
                             }>
-                            @{user.username}
+                            {user.username}
+                            {"#"}
+                            {user.discriminator}
                         </span>
                     </Tooltip>
                 </Localizer>

src/components/common/user/UserIcon.tsx

@@ -14,6 +14,7 @@ import IconBase, { IconBaseProps } from "../IconBase";
 type VoiceStatus = "muted" | "deaf";
 interface Props extends IconBaseProps<User> {
     status?: boolean;
+    override?: string;
     voice?: VoiceStatus;
     masquerade?: API.Masquerade;
     showServerIdentity?: boolean;
@@ -70,12 +71,15 @@ export default observer(
             showServerIdentity,
             masquerade,
             innerRef,
+            override,
             ...svgProps
         } = props;
 
         let { url } = props;
         if (masquerade?.avatar) {
             url = client.proxyFile(masquerade.avatar);
+        } else if (override) {
+            url = override;
         } else if (!url) {
             let override;
             if (target && showServerIdentity) {

src/components/common/user/UserShort.tsx

@@ -39,6 +39,7 @@ type UsernameProps = Omit<
     masquerade?: API.Masquerade;
     showServerIdentity?: boolean | "both";
 
+    override?: string;
     innerRef?: Ref<any>;
 };
 
@@ -64,13 +65,18 @@ export const Username = observer(
         masquerade,
         showServerIdentity,
         innerRef,
+        override,
         ...otherProps
     }: UsernameProps) => {
-        let username = user?.username;
+        let username =
+            (user as unknown as { display_name: string })?.display_name ??
+            user?.username;
         let color = masquerade?.colour;
         let timed_out: Date | undefined;
 
-        if (user && showServerIdentity) {
+        if (override) {
+            username = override;
+        } else if (user && showServerIdentity) {
             const { server } = useParams<{ server?: string }>();
             if (server) {
                 const client = useClient();
@@ -146,6 +152,17 @@ export const Username = observer(
             );
         }
 
+        if (override) {
+            return (
+                <>
+                    {el}
+                    <BotBadge>
+                        <Text id="app.main.channel.bot" />
+                    </BotBadge>
+                </>
+            );
+        }
+
         return el;
     },
 );

src/components/markdown/RemarkRenderer.tsx

@@ -1,5 +1,4 @@
 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";
@@ -14,6 +13,9 @@ import { createElement } from "preact";
 import { memo } from "preact/compat";
 import { useLayoutEffect, useMemo, useState } from "preact/hooks";
 
+// @ts-expect-error no typings
+import rehypeKatex from "@revoltchat/rehype-katex";
+
 import { MarkdownProps } from "./Markdown";
 import { handlers } from "./hast";
 import { RenderCodeblock } from "./plugins/Codeblock";
@@ -146,6 +148,7 @@ const render = unified()
     .use(rehypeKatex, {
         maxSize: 10,
         maxExpand: 0,
+        maxLength: 512,
         trust: false,
         strict: false,
         output: "html",
@@ -182,7 +185,8 @@ const Container = styled.div<{ largeEmoji: boolean }>`
 /**
  * Regex for matching execessive recursion of blockquotes and lists
  */
-const RE_RECURSIVE = /(^(?:[>*+-][^\S\r\n]*){5})(?:[>*+-][^\S\r\n]*)+(.*$)/gm;
+const RE_RECURSIVE =
+    /(^(?:(?:[>*+-]|\d+\.)[^\S\r\n]*){5})(?:(?:[>*+-]|\d+\.)[^\S\r\n]*)+(.*$)/gm;
 
 /**
  * Regex for matching multi-line blockquotes
@@ -244,9 +248,13 @@ export default memo(({ content, disallowBigEmoji }: MarkdownProps) => {
     const [Content, setContent] = useState<React.ReactElement>(null!);
 
     useLayoutEffect(() => {
-        render
-            .process(sanitisedContent)
-            .then((file) => setContent(file.result));
+        try {
+            render
+                .process(sanitisedContent)
+                .then((file) => setContent(file.result));
+        } catch (err) {
+            setContent("Message failed to render." as never);
+        }
     }, [sanitisedContent]);
 
     const largeEmoji = useMemo(

src/components/markdown/plugins/anchors.tsx

@@ -27,7 +27,11 @@ export function RenderAnchor({
             target="_blank"
             rel="noreferrer"
             onClick={(ev) =>
-                modalController.openLink(href) && ev.preventDefault()
+                modalController.openLink(
+                    href,
+                    undefined,
+                    ev.currentTarget.innerText !== href,
+                ) && ev.preventDefault()
             }
         />
     );

src/components/markdown/plugins/emoji.tsx

@@ -25,7 +25,7 @@ const Emoji = styled.img`
     }
 `;
 
-const RE_EMOJI = /:([a-zA-Z0-9_+]+):/g;
+const RE_EMOJI = /:([a-zA-Z0-9\-_]+):/g;
 const RE_ULID = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/;
 
 export function RenderEmoji({ match }: CustomComponentProps) {
@@ -34,7 +34,7 @@ export function RenderEmoji({ match }: CustomComponentProps) {
         ? `${
               clientController.getAvailableClient().configuration?.features
                   .autumn.url
-          }/emojis/${match}`
+          }/emojis/${match}/original`
         : parseEmoji(
               match in emojiDictionary
                   ? emojiDictionary[match as keyof typeof emojiDictionary]

src/components/navigation/left/ServerSidebar.tsx

@@ -50,8 +50,10 @@ const ServerList = styled.div`
 export default observer(() => {
     const client = useClient();
     const state = useApplicationState();
-    const { server: server_id, channel: channel_id } =
-        useParams<{ server: string; channel?: string }>();
+    const { server: server_id, channel: channel_id } = useParams<{
+        server: string;
+        channel?: string;
+    }>();
 
     const server = client.servers.get(server_id);
     if (!server) return <Redirect to="/" />;
@@ -119,14 +121,18 @@ export default observer(() => {
                 channels.push(addChannel(id));
             }
 
-            elements.push(
-                <CollapsibleSection
-                    id={`category_${category.id}`}
-                    defaultValue
-                    summary={<Category>{category.title}</Category>}>
-                    {channels}
-                </CollapsibleSection>,
-            );
+            if (category.title === "Default") {
+                elements.push(...channels);
+            } else {
+                elements.push(
+                    <CollapsibleSection
+                        id={`category_${category.id}`}
+                        defaultValue
+                        summary={<Category>{category.title}</Category>}>
+                        {channels}
+                    </CollapsibleSection>,
+                );
+            }
         }
     }
 

src/components/navigation/right/MemberSidebar.tsx

@@ -76,17 +76,25 @@ function useEntries(
 
         keys.forEach((key) => {
             let u;
+            let member;
+
             if (isServer) {
                 const { server, user } = JSON.parse(key);
                 if (server !== channel.server_id) return;
+
                 u = client.users.get(user);
+                member = client.members.get(key);
+
+                if (!member?.hasPermission(channel, "ViewChannel")) {
+                    return;
+                }
             } else {
                 u = client.users.get(key);
+                member = client.members.get(key);
             }
 
             if (!u) return;
 
-            const member = client.members.get(key);
             const sort = member?.nickname ?? u.username;
             const entry = [u, sort] as [User, string];
 

src/components/settings/account/AccountManagement.tsx

@@ -39,7 +39,7 @@ export default function AccountManagement() {
             <CategoryButton
                 icon={<Block size={24} color="var(--error)" />}
                 description={
-                    "Disable your account. You won't be able to access it unless you contact support."
+                    <Text id="app.settings.pages.account.manage.disable_description" />
                 }
                 action="chevron"
                 onClick={callback("disable")}>
@@ -49,7 +49,7 @@ export default function AccountManagement() {
             <CategoryButton
                 icon={<Trash size={24} color="var(--error)" />}
                 description={
-                    "Your account will be queued for deletion, a confirmation email will be sent."
+                    <Text id="app.settings.pages.account.manage.delete_description" />
                 }
                 action="chevron"
                 onClick={callback("delete")}>

src/components/settings/account/EditAccount.tsx

@@ -37,7 +37,13 @@ export default observer(() => {
 
             {(
                 [
-                    ["username", client.user!.username, At],
+                    [
+                        "username",
+                        client.user!.username +
+                            "#" +
+                            client.user!.discriminator,
+                        At,
+                    ],
                     ["email", email, Envelope],
                     ["password", "•••••••••", Key],
                 ] as const

src/controllers/client/ClientController.tsx

@@ -159,7 +159,7 @@ class ClientController {
             })
             .catch((err) => {
                 const error = takeError(err);
-                if (error === "Forbidden" || error === "Unauthorized") {
+                if (error === "Unauthorized") {
                     this.sessions.delete(user_id);
                     this.current = null;
                     this.pickNextSession();
@@ -252,7 +252,7 @@ class ClientController {
         // Start client lifecycle
         this.addSession(
             {
-                session,
+                session: session as never,
             },
             "new",
         );

src/controllers/client/Session.tsx

@@ -3,6 +3,7 @@ import { API, Client } from "revolt.js";
 
 import { state } from "../../mobx/State";
 
+import { resetMemberSidebarFetched } from "../../components/navigation/right/MemberSidebar";
 import { modalController } from "../modals/ModalController";
 
 /**
@@ -27,6 +28,7 @@ type Transition =
               | "SUCCESS"
               | "DISCONNECT"
               | "RETRY"
+              | "RETRY_FAILED"
               | "LOGOUT"
               | "ONLINE"
               | "OFFLINE";
@@ -39,6 +41,7 @@ export default class Session {
     state: State = window.navigator.onLine ? "Ready" : "Offline";
     user_id: string | null = null;
     client: Client | null = null;
+    retryAttempts: number = 0;
 
     /**
      * Create a new Session
@@ -88,15 +91,18 @@ export default class Session {
      * Called when the client signals it has disconnected
      */
     private onDropped() {
-        this.emit({
-            action: "DISCONNECT",
-        });
+        if (this.state === "Connecting") {
+            this.emit({ action: "RETRY_FAILED" });
+        } else {
+            this.emit({ action: "DISCONNECT" });
+        }
     }
 
     /**
      * Called when the client signals it has received the Ready packet
      */
     private onReady() {
+        resetMemberSidebarFetched();
         this.emit({
             action: "SUCCESS",
         });
@@ -209,6 +215,7 @@ export default class Session {
             // Ready successfully received
             case "SUCCESS": {
                 this.assert("Connecting");
+                this.retryAttempts = 0;
                 this.state = "Online";
                 break;
             }
@@ -237,6 +244,18 @@ export default class Session {
                 this.state = "Connecting";
                 break;
             }
+            // Reconnect attempt failed, schedule another with backoff
+            case "RETRY_FAILED": {
+                this.assert("Connecting");
+                this.retryAttempts++;
+                const delay = Math.min(500 * Math.pow(2, this.retryAttempts), 16000);
+                setTimeout(() => {
+                    if (this.state === "Connecting") {
+                        this.client!.websocket.connect();
+                    }
+                }, delay);
+                break;
+            }
             // User instructed logout
             case "LOGOUT": {
                 this.assert("Connecting", "Online", "Disconnected");

src/controllers/client/jsx/error.tsx

@@ -10,8 +10,9 @@ export function takeError(error: any): string {
             case 429:
                 return "TooManyRequests";
             case 401:
+                return "Unauthorized"
             case 403:
-                return "Unauthorized";
+                return "Forbidden";
             default:
                 return "UnknownError";
         }

src/controllers/client/jsx/legacy/FileUploads.tsx

@@ -12,7 +12,7 @@ import { IconButton, Preloader } from "@revoltchat/ui";
 import { determineFileSize } from "../../../../lib/fileSize";
 
 import { modalController } from "../../../modals/ModalController";
-import { useClient } from "../../ClientController";
+import { clientController, useClient } from "../../ClientController";
 import { takeError } from "../error";
 
 type BehaviourType =
@@ -67,9 +67,16 @@ export async function uploadFile(
     const formData = new FormData();
     formData.append("file", file);
 
+    const client = clientController.getActiveSession()?.client;
+    const sesToken =
+        typeof client?.session === "string"
+            ? client.session
+            : client?.session?.token;
+
     const res = await Axios.post(`${autumnURL}/${tag}`, formData, {
         headers: {
             "Content-Type": "multipart/form-data",
+            "X-Session-Token": sesToken,
         },
         ...config,
     });

src/controllers/modals/ModalController.tsx

@@ -18,6 +18,7 @@ import { history } from "../../context/history";
 import AddFriend from "./components/AddFriend";
 import BanMember from "./components/BanMember";
 import Changelog from "./components/Changelog";
+import ChangelogUsernames from "./components/ChangelogUsernames";
 import ChannelInfo from "./components/ChannelInfo";
 import Clipboard from "./components/Clipboard";
 import ConfirmLeave from "./components/ConfirmLeave";
@@ -31,6 +32,8 @@ import CreateRole from "./components/CreateRole";
 import CreateServer from "./components/CreateServer";
 import CustomStatus from "./components/CustomStatus";
 import DeleteMessage from "./components/DeleteMessage";
+import ReactMessage from "./components/ReactMessage";
+import ReactionUsers from "./components/ReactionUsers";
 import Error from "./components/Error";
 import ImageViewer from "./components/ImageViewer";
 import KickMember from "./components/KickMember";
@@ -39,8 +42,11 @@ import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
 import MFARecovery from "./components/MFARecovery";
 import ModifyAccount from "./components/ModifyAccount";
+import ModifyDisplayname from "./components/ModifyDisplayname";
 import OutOfDate from "./components/OutOfDate";
 import PendingFriendRequests from "./components/PendingFriendRequests";
+import ReportContent from "./components/Report";
+import ReportSuccess from "./components/ReportSuccess";
 import ServerIdentity from "./components/ServerIdentity";
 import ServerInfo from "./components/ServerInfo";
 import ShowToken from "./components/ShowToken";
@@ -204,12 +210,25 @@ class ModalControllerExtended extends ModalController<Modal> {
      * Safely open external or internal link
      * @param href Raw URL
      * @param trusted Whether we trust this link
+     * @param mismatch Whether to always open link warning
      * @returns Whether to cancel default event
      */
-    openLink(href?: string, trusted?: boolean) {
+    openLink(href?: string, trusted?: boolean, mismatch?: boolean) {
         const link = determineLink(href);
         const settings = getApplicationState().settings;
 
+        if (mismatch) {
+            if (href) {
+                modalController.push({
+                    type: "link_warning",
+                    link: href,
+                    callback: () => this.openLink(href, true) as true,
+                });
+            }
+
+            return true;
+        }
+
         switch (link.type) {
             case "navigate": {
                 history.push(link.path);
@@ -258,6 +277,8 @@ export const modalController = new ModalControllerExtended({
     create_bot: CreateBot,
     custom_status: CustomStatus,
     delete_message: DeleteMessage,
+    react_message: ReactMessage,
+    reaction_users: ReactionUsers,
     error: Error,
     image_viewer: ImageViewer,
     kick_member: KickMember,
@@ -276,4 +297,9 @@ export const modalController = new ModalControllerExtended({
     sign_out_sessions: SignOutSessions,
     user_picker: UserPicker,
     user_profile: UserProfile,
+    report: ReportContent,
+    report_success: ReportSuccess,
+    modify_displayname: ModifyDisplayname,
+    changelog_usernames: ChangelogUsernames,
+    reset_bot_token: Confirmation
 });

src/controllers/modals/ModalRenderer.tsx

@@ -9,16 +9,17 @@ export default observer(() => {
     const history = useHistory();
 
     useEffect(() => {
-        function keyUp(event: KeyboardEvent) {
+        function keyDown(event: KeyboardEvent) {
             if (event.key === "Escape") {
                 modalController.pop("close");
             } else if (event.key === "Enter") {
+                if (event.target instanceof HTMLSelectElement) return;
                 modalController.pop("confirm");
             }
         }
 
-        document.addEventListener("keyup", keyUp);
-        return () => document.removeEventListener("keyup", keyUp);
+        document.addEventListener("keydown", keyDown);
+        return () => document.removeEventListener("keydown", keyDown);
     }, []);
 
     return (

src/controllers/modals/components/AddFriend.tsx

@@ -23,6 +23,7 @@ export default function AddFriend({ ...props }: ModalProps<"add_friend">) {
             data={{
                 username: {
                     field: "Username",
+                    placeholder: "username#1234",
                 },
             }}
             callback={({ username }) =>

src/controllers/modals/components/Changelog.tsx

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
 import { useMemo, useState } from "preact/hooks";
@@ -14,10 +14,17 @@ import {
     changelogEntryArray,
     ChangelogPost,
 } from "../../../assets/changelogs";
+import Markdown from "../../../components/markdown/Markdown";
 import { ModalProps } from "../types";
 
-const Image = styled.img`
+const Image = styled.img<{ shadow?: boolean }>`
     border-radius: var(--border-radius);
+
+    ${(props) =>
+        props.shadow &&
+        css`
+            filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
+        `}
 `;
 
 function RenderLog({ post }: { post: ChangelogPost }) {
@@ -25,9 +32,11 @@ function RenderLog({ post }: { post: ChangelogPost }) {
         <Column>
             {post.content.map((entry) =>
                 typeof entry === "string" ? (
-                    <span>{entry}</span>
+                    <Markdown content={entry} />
+                ) : entry.type === "element" ? (
+                    entry.element
                 ) : (
-                    <Image src={entry.src} />
+                    <Image src={entry.src} shadow={entry.shadow} />
                 ),
             )}
         </Column>

src/controllers/modals/components/ChangelogUsernames.tsx

@@ -0,0 +1,146 @@
+import Lottie, { LottieRefCurrentProps } from "lottie-react";
+
+import { useEffect, useRef } from "preact/hooks";
+
+import { Button, Column, InputBox, Modal, Row } from "@revoltchat/ui";
+
+import { useClient } from "../../client/ClientController";
+import { modalController } from "../ModalController";
+import { ModalProps } from "../types";
+import usernameAnim from "./legacy/usernameUpdateLottie.json";
+
+/**
+ * Changelog: Username update
+ */
+export default function ChangelogUsernames({
+    onClose,
+    signal,
+}: ModalProps<"changelog_usernames">) {
+    const client = useClient();
+
+    const lottieRef = useRef<LottieRefCurrentProps>();
+
+    useEffect(() => {
+        if (lottieRef.current) {
+            const timer = setTimeout(() => lottieRef.current!.play(), 2500);
+            return () => clearTimeout(timer);
+        }
+    }, [lottieRef]);
+
+    return (
+        <Modal onClose={onClose} signal={signal} transparent>
+            {
+                (
+                    <Column gap="0">
+                        <div
+                            style={{
+                                background: "black",
+                                borderStartStartRadius: "12px",
+                                borderStartEndRadius: "12px",
+                                display: "grid",
+                                placeItems: "center",
+                                padding: "1.5em",
+                            }}>
+                            <Lottie
+                                lottieRef={lottieRef as never}
+                                animationData={usernameAnim}
+                                autoplay={false}
+                                loop={false}
+                                style={{ width: "240px" }}
+                            />
+                        </div>
+                        <div
+                            style={{
+                                padding: "1em",
+                                background: "var(--secondary-header)",
+                                textAlign: "center",
+                            }}>
+                            <Column
+                                gap="6px"
+                                style={{
+                                    alignItems: "center",
+                                }}>
+                                <span
+                                    style={{
+                                        fontSize: "1.5em",
+                                        fontWeight: 700,
+                                        marginBottom: "12px",
+                                    }}>
+                                    Usernames are Changing
+                                </span>
+                                <span
+                                    style={{
+                                        color: "var(--secondary-foreground)",
+                                        fontSize: "0.9em",
+                                        fontWeight: 500,
+                                    }}>
+                                    We've changed how usernames work on Revolt.
+                                    Now you can set a display name in addition
+                                    to a username with a number tag for easier
+                                    sharing.
+                                </span>
+                                <span
+                                    style={{
+                                        color: "var(--secondary-foreground)",
+                                        fontSize: "0.9em",
+                                        fontWeight: 500,
+                                    }}>
+                                    Here's how your new username looks:
+                                </span>
+                                <InputBox
+                                    value={
+                                        client.user!.display_name ??
+                                        client.user!.username
+                                    }
+                                    style={{
+                                        maxWidth: "180px",
+                                    }}
+                                    disabled
+                                />
+                                <InputBox
+                                    value={
+                                        client.user.username +
+                                        "#" +
+                                        client.user.discriminator
+                                    }
+                                    style={{
+                                        maxWidth: "180px",
+                                    }}
+                                    disabled
+                                />
+                                <a
+                                    href="https://revolt.chat/posts/evolving-usernames"
+                                    target="_blank">
+                                    Read more about this change
+                                </a>
+                            </Column>
+                        </div>
+                        <Row
+                            style={{
+                                padding: "1em",
+                                borderEndStartRadius: "12px",
+                                borderEndEndRadius: "12px",
+                                background: "var(--secondary-background)",
+                                textAlign: "center",
+                                justifyContent: "end",
+                            }}>
+                            <Button palette="plain" onClick={onClose}>
+                                Skip for now
+                            </Button>
+                            <Button
+                                palette="accent"
+                                onClick={() => {
+                                    modalController.openLink(
+                                        "/settings/profile",
+                                    );
+                                    onClose();
+                                }}>
+                                Edit Profile
+                            </Button>
+                        </Row>
+                    </Column>
+                ) as any
+            }
+        </Modal>
+    );
+}

src/controllers/modals/components/Confirmation.tsx

@@ -20,6 +20,7 @@ export default function Confirmation(
         | "delete_bot"
         | "block_user"
         | "unfriend_user"
+        | "reset_bot_token"
     >,
 ) {
     const history = useHistory();
@@ -31,6 +32,7 @@ export default function Confirmation(
         delete_bot: ["confirm_delete", "delete"],
         unfriend_user: ["unfriend_user", "remove"],
         block_user: ["block_user", "block"],
+        reset_bot_token: ["reset_bot_token", "reset"],
     };
 
     const event = EVENTS[props.type];
@@ -88,6 +90,12 @@ export default function Confirmation(
                             .bots.delete(props.target);
                         props.cb?.();
                         break;
+                    case "reset_bot_token":
+                        clientController
+                            .getAvailableClient()
+                            .bots
+                            .edit(props.target.id, { remove: ["Token"] })
+                            .then(props.callback)
                 }
             }}
             submit={{

src/controllers/modals/components/ModifyAccount.tsx

@@ -3,7 +3,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import { Category, Error, Modal } from "@revoltchat/ui";
+import { Category, Error, InputBox, Modal, Tip } from "@revoltchat/ui";
 
 import { noopTrue } from "../../../lib/js";
 
@@ -120,14 +120,34 @@ export default function ModifyAccount({
                     />
                 )}
                 {field === "username" && (
-                    <FormField
-                        type="username"
-                        name="new_username"
-                        register={register}
-                        showOverline
-                        error={errors.new_username?.message}
-                        disabled={processing}
-                    />
+                    <div
+                        style={{
+                            display: "flex",
+                            alignItems: "end",
+                            gap: "8px",
+                        }}>
+                        <div style={{ flexGrow: 1 }}>
+                            <FormField
+                                type="username"
+                                name="new_username"
+                                register={register}
+                                showOverline
+                                error={errors.new_username?.message}
+                                disabled={processing}
+                            />
+                        </div>
+                        <div
+                            style={{
+                                flexShrink: 0,
+                                width: "80px",
+                                textAlign: "center",
+                            }}>
+                            <InputBox
+                                disabled
+                                value={"#" + client.user.discriminator}
+                            />
+                        </div>
+                    </div>
                 )}
                 <FormField
                     type="current_password"
@@ -141,11 +161,24 @@ export default function ModifyAccount({
                     <Category compact>
                         <Error
                             error={
-                                <Text id="app.special.modals.account.failed" />
+                                <>
+                                    <Text id="app.special.modals.account.failed" />{" "}
+                                    <Text id={`error.${error}`}>{error}</Text>
+                                </>
                             }
                         />
                     </Category>
                 )}
+
+                {field === "username" && (
+                    <div style={{ marginTop: "8px" }}>
+                        <Tip palette="warning">
+                            Changing your username may change your number tag.
+                            You can freely change the case of your username.
+                            Your number tag may change at most once a day.
+                        </Tip>
+                    </div>
+                )}
             </form>
         </Modal>
     );

src/controllers/modals/components/ModifyDisplayname.tsx

@@ -0,0 +1,47 @@
+import { Text } from "preact-i18n";
+
+import { ModalForm } from "@revoltchat/ui";
+
+import { useClient } from "../../client/ClientController";
+import { ModalProps } from "../types";
+
+/**
+ * Modify display name modal
+ */
+export default function ModifyDisplayname({
+    ...props
+}: ModalProps<"modify_displayname">) {
+    const client = useClient();
+
+    return (
+        <ModalForm
+            {...props}
+            title="Update display name"
+            schema={{
+                display_name: "text",
+            }}
+            defaults={{
+                display_name: (
+                    client.user as unknown as { display_name: string }
+                )?.display_name as string,
+            }}
+            data={{
+                display_name: {
+                    field: "Display Name",
+                },
+            }}
+            callback={({ display_name }) =>
+                display_name && display_name !== client.user!.username
+                    ? client.users.edit({
+                          display_name,
+                      } as never)
+                    : client.users.edit({
+                          remove: ["DisplayName"],
+                      } as never)
+            }
+            submit={{
+                children: <Text id="app.special.modals.actions.save" />,
+            }}
+        />
+    );
+}

src/controllers/modals/components/ReactMessage.tsx

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+
+import { Modal } from "@revoltchat/ui";
+import { ModalProps } from "../types"
+
+import { Message } from "revolt.js";
+import { emojiDictionary } from "../../../assets/emojis"
+import { HackAlertThisFileWillBeReplaced } from "../../../components/common/messaging/MessageBox"
+
+const PickerContainer = styled.div`
+    max-height: 420px;
+    max-width: 370px;
+    overflow: hidden;
+
+    > div {
+        position: unset;
+    }
+`
+
+export default function ReactMessage({
+    target: message,
+    onClose,
+    ...props
+}: ModalProps<"react_message">) {
+    return (
+        <Modal
+            {...props}
+            padding={false}
+            maxWidth="370px"
+        >
+            <PickerContainer>
+                <HackAlertThisFileWillBeReplaced
+                    onSelect={(emoji) =>{
+                        message.react(
+                            emojiDictionary[
+                                emoji as keyof typeof emojiDictionary
+                            ] ?? emoji,
+                        );
+                        onClose();
+                    }}
+                    onClose={onClose}
+                />
+            </PickerContainer>
+        </Modal>
+    )
+}

src/controllers/modals/components/ReactionUsers.tsx

@@ -0,0 +1,92 @@
+import styled from "styled-components";
+
+import { Modal } from "@revoltchat/ui";
+
+import UserIcon from "../../../components/common/user/UserIcon";
+import { Username } from "../../../components/common/user/UserShort";
+import { RenderEmoji } from "../../../components/markdown/plugins/emoji";
+import { useClient } from "../../client/ClientController";
+import { modalController } from "../ModalController";
+import { ModalProps } from "../types";
+
+const List = styled.div`
+    max-width: 100%;
+    max-height: 360px;
+    overflow-y: auto;
+`;
+
+const UserRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+
+    &:hover {
+        background: var(--secondary-background);
+    }
+`;
+
+const Header = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1.1em;
+
+    img {
+        width: 1.5em;
+        height: 1.5em;
+        object-fit: contain;
+    }
+`;
+
+export default function ReactionUsers({
+    emoji,
+    userIds,
+    onClose,
+    ...props
+}: ModalProps<"reaction_users">) {
+    const client = useClient();
+
+    const openProfile = (userId: string) => {
+        onClose();
+        modalController.push({ type: "user_profile", user_id: userId });
+    };
+
+    // Modal must be nonDismissable, it conflicts with the message context menu otherwise.
+    return (
+        <Modal
+            {...props}
+            nonDismissable
+            title={
+                <Header>
+                    <RenderEmoji match={emoji} />
+                    <span>{userIds.length}</span>
+                </Header>
+            }
+            actions={[
+                {
+                    onClick: () => {
+                        onClose();
+                        return true;
+                    },
+                    children: "Close",
+                },
+            ]}>
+            <List>
+                {userIds.map((userId) => {
+                    const user = client.users.get(userId);
+                    return (
+                        <UserRow
+                            key={userId}
+                            onClick={() => openProfile(userId)}>
+                            <UserIcon target={user} size={32} />
+                            <Username user={user} />
+                        </UserRow>
+                    );
+                })}
+            </List>
+        </Modal>
+    );
+}

src/controllers/modals/components/Report.tsx

@@ -0,0 +1,148 @@
+import { API, Message as MessageInterface, User } from "revolt.js";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+import { ModalForm, Row } from "@revoltchat/ui";
+
+import Message from "../../../components/common/messaging/Message";
+import UserShort from "../../../components/common/user/UserShort";
+import { useClient } from "../../client/ClientController";
+import { modalController } from "../ModalController";
+import { ModalProps } from "../types";
+
+const CONTENT_REASONS: API.ContentReportReason[] = [
+    "NoneSpecified",
+    "Illegal",
+    "PromotesHarm",
+    "SpamAbuse",
+    "Malware",
+    "Harassment",
+];
+
+const USER_REASONS: API.UserReportReason[] = [
+    "NoneSpecified",
+    "SpamAbuse",
+    "InappropriateProfile",
+    "Impersonation",
+    "BanEvasion",
+    "Underage",
+];
+
+/**
+ * Add padding to the message container
+ */
+const MessageContainer = styled.div`
+    margin-block-end: 16px;
+`;
+
+/**
+ * Report creation modal
+ */
+export default function ReportContent({
+    target,
+    messageId,
+    ...props
+}: ModalProps<"report">) {
+    const client = useClient();
+
+    return (
+        <ModalForm
+            {...props}
+            title={
+                target instanceof MessageInterface ? (
+                    <Text id="app.special.modals.report.message" />
+                ) : (
+                    <Text
+                        id="app.special.modals.report.by_name"
+                        fields={{
+                            name:
+                                target instanceof User
+                                    ? target.username
+                                    : target.name,
+                        }}
+                    />
+                )
+            }
+            schema={{
+                selected: "custom",
+                reason: "combo",
+                additional_context: "text",
+            }}
+            data={{
+                selected: {
+                    element:
+                        target instanceof MessageInterface ? (
+                            <MessageContainer>
+                                <Message message={target} head attachContext />
+                            </MessageContainer>
+                        ) : target instanceof User ? (
+                            <Row centred>
+                                <UserShort user={target} size={32} />
+                            </Row>
+                        ) : (
+                            <></>
+                        ),
+                },
+                reason: {
+                    field: (
+                        <Text id="app.special.modals.report.reason" />
+                    ) as React.ReactChild,
+                    options: (target instanceof User
+                        ? USER_REASONS
+                        : CONTENT_REASONS
+                    ).map((value) => ({
+                        name: (
+                            <Text
+                                id={
+                                    value === "NoneSpecified"
+                                        ? "app.special.modals.report.no_reason"
+                                        : `app.special.modals.report.${
+                                              target instanceof User
+                                                  ? "user"
+                                                  : "content"
+                                          }_reason.${value}`
+                                }
+                            />
+                        ),
+                        value,
+                    })),
+                },
+                additional_context: {
+                    field: (
+                        <Text id="app.special.modals.report.additional_context" />
+                    ) as React.ReactChild,
+                },
+            }}
+            callback={async ({ reason, additional_context }) => {
+                await client.api.post("/safety/report", {
+                    content: {
+                        id: target._id,
+                        type:
+                            target instanceof MessageInterface
+                                ? "Message"
+                                : target instanceof User
+                                ? "User"
+                                : "Server",
+                        report_reason: reason as any,
+                        message_id: messageId,
+                    },
+                    additional_context,
+                });
+
+                modalController.push({
+                    type: "report_success",
+                    user:
+                        target instanceof MessageInterface
+                            ? target.author
+                            : target instanceof User
+                            ? target
+                            : undefined,
+                });
+            }}
+            submit={{
+                children: <Text id="app.special.modals.actions.report" />,
+            }}
+        />
+    );
+}

src/controllers/modals/components/ReportSuccess.tsx

@@ -0,0 +1,65 @@
+import { Text } from "preact-i18n";
+
+import { Modal } from "@revoltchat/ui";
+
+import { noopTrue } from "../../../lib/js";
+
+import { ModalProps } from "../types";
+
+/**
+ * Report success modal
+ */
+export default function ReportSuccess({
+    user,
+    ...props
+}: ModalProps<"report_success">) {
+    return (
+        <Modal
+            {...props}
+            title={<Text id="app.special.modals.report.reported" />}
+            description={
+                <>
+                    <Text id="app.special.modals.report.thank_you" />
+                    {user && (
+                        <>
+                            <br />
+                            <br />
+                            <Text id="app.special.modals.report.block_user" />
+                        </>
+                    )}
+                </>
+            }
+            actions={
+                user
+                    ? [
+                          {
+                              palette: "plain",
+                              onClick: async () => {
+                                  user.blockUser();
+                                  return true;
+                              },
+                              children: (
+                                  <Text id="app.special.modals.actions.block" />
+                              ),
+                          },
+                          {
+                              palette: "plain-secondary",
+                              onClick: noopTrue,
+                              children: (
+                                  <Text id="app.special.modals.actions.dont_block" />
+                              ),
+                          },
+                      ]
+                    : [
+                          {
+                              palette: "plain",
+                              onClick: noopTrue,
+                              children: (
+                                  <Text id="app.special.modals.actions.done" />
+                              ),
+                          },
+                      ]
+            }
+        />
+    );
+}

src/controllers/modals/components/ServerInfo.tsx

@@ -5,6 +5,7 @@ import { Text } from "preact-i18n";
 import { Column, H1, IconButton, Modal, Row } from "@revoltchat/ui";
 
 import Markdown from "../../../components/markdown/Markdown";
+import { useClient } from "../../client/ClientController";
 import { report } from "../../safety";
 import { modalController } from "../ModalController";
 import { ModalProps } from "../types";
@@ -13,6 +14,49 @@ export default function ServerInfo({
     server,
     ...props
 }: ModalProps<"server_info">) {
+    const client = useClient();
+    const isOwner = server.owner === client.user?._id;
+
+    const actions = [
+        {
+            onClick: () => {
+                modalController.push({
+                    type: "server_identity",
+                    member: server.member!,
+                });
+                return true;
+            },
+            children: "Edit Identity",
+            palette: "primary",
+        },
+    ];
+
+    if (!isOwner) {
+        actions.push({
+            onClick: () => {
+                modalController.push({
+                    type: "leave_server",
+                    target: server,
+                });
+                return true;
+            },
+            children: "Leave Server",
+            palette: "error",
+        });
+    }
+
+    actions.push({
+        onClick: () => {
+            modalController.push({
+                type: "report",
+                target: server,
+            });
+            return true;
+        },
+        children: <Text id="app.special.modals.actions.report" />,
+        palette: "error",
+    });
+
     return (
         <Modal
             {...props}
@@ -26,22 +70,7 @@ export default function ServerInfo({
                     </IconButton>
                 </Row>
             }
-            actions={[
-                {
-                    onClick: () =>
-                        modalController.push({
-                            type: "server_identity",
-                            member: server.member!,
-                        }),
-                    children: "Edit Identity",
-                    palette: "primary",
-                },
-                {
-                    onClick: () => report(server),
-                    children: <Text id="app.special.modals.actions.report" />,
-                    palette: "error",
-                },
-            ]}>
+            actions={actions}>
             <Markdown content={server.description!} />
         </Modal>
     );

src/controllers/modals/components/legacy/Onboarding.tsx

@@ -71,6 +71,10 @@ export function OnboardingModal({
                                         error={error}
                                     />
                                 </div>
+                                <p>
+                                    You will be automatically assigned a number
+                                    tag which you can find from settings.
+                                </p>
                                 <Button palette="accent">
                                     {"Looks good!"}
                                 </Button>

src/controllers/modals/components/legacy/UserProfile.module.scss

@@ -46,13 +46,28 @@
             text-overflow: ellipsis;
         }
 
-        .username {
+        .usernameDetail {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 4px;
+        }
+
+        .displayname {
             font-size: 22px;
             font-weight: 600;
         }
 
+        .username {
+            display: block;
+            font-size: 13px;
+            font-weight: 600;
+            width: fit-content;
+            color: var(--secondary-foreground);
+        }
+
         .status {
             font-size: 13px;
+            color: var(--secondary-foreground);
 
             > div {
                 display: inline !important;

src/controllers/modals/components/legacy/UserProfile.tsx

@@ -6,6 +6,7 @@ import {
     UserX,
     Group,
     InfoCircle,
+    Flag,
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link, useHistory } from "react-router-dom";
@@ -163,16 +164,33 @@ export const UserProfile = observer(
                             }
                         />
                         <div className={styles.details}>
-                            <Localizer>
+                            <div className={styles.usernameDetail}>
                                 <span
-                                    className={styles.username}
+                                    className={styles.displayname}
                                     onClick={() =>
                                         modalController.writeText(user.username)
                                     }>
-                                    {"@"}
-                                    {user.username}
+                                    {user.display_name ?? user.username}
                                 </span>
-                            </Localizer>
+                                <span
+                                    className={styles.username}
+                                    onClick={() =>
+                                        modalController.writeText(
+                                            user.username +
+                                                "#" +
+                                                user.discriminator,
+                                        )
+                                    }>
+                                    <Localizer>
+                                        <Tooltip
+                                            content={
+                                                <Text id="app.special.copy_username" />
+                                            }>
+                                            {user.username}#{user.discriminator}
+                                        </Tooltip>
+                                    </Localizer>
+                                </span>
+                            </div>
                             {user.status?.text && (
                                 <span className={styles.status}>
                                     <UserStatus user={user} tooltip />
@@ -229,7 +247,40 @@ export const UserProfile = observer(
                                 <UserX size={28} />
                             </IconButton>
                         )}
+                        {!user.bot && flags != 2 && flags != 4 && (
+                            <Localizer>
+                                <Tooltip
+                                    content={
+                                        <Text id="app.context_menu.report_user" />
+                                    }>
+                                    <IconButton
+                                        onClick={() =>
+                                            modalController.push({
+                                                type: "report",
+                                                target: user,
+                                            })
+                                        }>
+                                        <Flag size={28} />
+                                    </IconButton>
+                                </Tooltip>
+                            </Localizer>
+                        )}
                     </div>
+                    {badges > 0 && (
+                        <div
+                            style={{
+                                marginInline: "1em",
+                                padding: "0.5em",
+                                background: "var(--primary-background)",
+                                borderRadius: "8px",
+                                width: "fit-content",
+                                backgroundColor:
+                                    "rgba(var(--primary-header-rgb), max(var(--min-opacity), 0.65))",
+                                backdropFilter: "blur(20px)",
+                            }}>
+                            <UserBadges badges={badges} uid={user._id} />
+                        </div>
+                    )}
                     <div className={styles.tabs}>
                         <div
                             data-active={tab === "profile"}
@@ -261,10 +312,7 @@ export const UserProfile = observer(
                 </div>
                 <div className={styles.content}>
                     {tab === "profile" &&
-                        (profile?.content ||
-                        badges > 0 ||
-                        flags > 0 ||
-                        user.bot ? (
+                        (profile?.content || flags > 0 || user.bot ? (
                             <div>
                                 {flags & 1 ? (
                                     /** ! FIXME: i18n this area */
@@ -314,17 +362,6 @@ export const UserProfile = observer(
                                         </div>
                                     </>
                                 ) : undefined}
-                                {badges > 0 && (
-                                    <div className={styles.category}>
-                                        <Text id="app.special.popovers.user_profile.sub.badges" />
-                                    </div>
-                                )}
-                                {badges > 0 && (
-                                    <UserBadges
-                                        badges={badges}
-                                        uid={user._id}
-                                    />
-                                )}
                                 {profile?.content && (
                                     <>
                                         <div className={styles.category}>

src/controllers/modals/types.ts

@@ -9,6 +9,7 @@ export type Modal = {
               | "create_group"
               | "create_server"
               | "custom_status"
+              | "modify_displayname"
               | "add_friend";
       }
     | ({
@@ -40,6 +41,7 @@ export type Modal = {
           type: "changelog";
           initial?: number;
       }
+    | { type: "changelog_usernames" }
     | {
           type: "sign_out_sessions";
           client: Client;
@@ -151,6 +153,15 @@ export type Modal = {
           type: "delete_message";
           target: Message;
       }
+    | {
+          type: "react_message",
+          target: Message;
+      }
+    | {
+          type: "reaction_users";
+          emoji: string;
+          userIds: string[];
+      }
     | {
           type: "kick_member";
           member: Member;
@@ -179,6 +190,20 @@ export type Modal = {
     | {
           type: "import_theme";
       }
+    | {
+          type: "report";
+          target: Server | User | Message;
+          messageId?: string;
+      }
+    | {
+          type: "report_success";
+          user?: User;
+      }
+    | {
+          type: "reset_bot_token";
+          target: { name: string, id: string },
+          callback: () => Promise<void>;
+    }
 );
 
 export type ModalProps<T extends Modal["type"]> = Modal & { type: T } & {

src/lib/ContextMenus.tsx

@@ -2,32 +2,29 @@ import { ChevronRight, Trash } from "@styled-icons/boxicons-regular";
 import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
 import { isFirefox } from "react-device-detect";
 import { useHistory } from "react-router-dom";
-import {
-    Channel,
-    Message,
-    Server,
-    User,
-    API,
-    Permission,
-    UserPermission,
-    Member,
-} from "revolt.js";
+import { Channel, Message, Server, User, API, Permission, UserPermission, Member } from "revolt.js";
 
-import {
-    ContextMenuWithData,
-    MenuItem,
-    openContextMenu,
-} from "preact-context-menu";
+
+
+import { ContextMenuWithData, MenuItem, openContextMenu } from "preact-context-menu";
 import { Text } from "preact-i18n";
 
-import { IconButton, LineDivider } from "@revoltchat/ui";
+
+
+import { Column, IconButton, LineDivider } from "@revoltchat/ui";
+
+
 
 import { useApplicationState } from "../mobx/State";
 import { QueuedMessage } from "../mobx/stores/MessageQueue";
 import { NotificationState } from "../mobx/stores/NotificationOptions";
 
+
+
 import CMNotifications from "./contextmenu/CMNotifications";
 
+
+
 import Tooltip from "../components/common/Tooltip";
 import UserStatus from "../components/common/user/UserStatus";
 import { useSession } from "../controllers/client/ClientController";
@@ -36,6 +33,7 @@ import { modalController } from "../controllers/modals/ModalController";
 import { internalEmit } from "./eventEmitter";
 import { getRenderer } from "./renderer/Singleton";
 
+
 interface ContextMenuData {
     user?: string;
     server?: string;
@@ -47,10 +45,13 @@ interface ContextMenuData {
     unread?: boolean;
     queued?: QueuedMessage;
     contextualChannel?: string;
+    contextualMessage?: string;
 }
 
 type Action =
     | { action: "copy_id"; id: string }
+    | { action: "admin"; id: string; type: "channel" | "message" | "user" }
+    | { action: "admin_system"; id: string }
     | { action: "copy_message_link"; message: Message }
     | { action: "copy_selection" }
     | { action: "copy_text"; content: string }
@@ -64,6 +65,7 @@ type Action =
     | { action: "quote_message"; content: string }
     | { action: "edit_message"; id: string }
     | { action: "delete_message"; target: Message }
+    | { action: "react_message"; target: Message }
     | { action: "open_file"; attachment: API.File }
     | { action: "save_file"; attachment: API.File }
     | { action: "copy_file_link"; attachment: API.File }
@@ -111,7 +113,8 @@ type Action =
           action: "set_notification_state";
           key: string;
           state?: NotificationState;
-      };
+      }
+    | { action: "report"; target: User | Server | Message; messageId?: string };
 
 // ! FIXME: I dare someone to re-write this
 // Tip: This should just be split into separate context menus per logical area.
@@ -131,6 +134,18 @@ export default function ContextMenus() {
                 case "copy_id":
                     modalController.writeText(data.id);
                     break;
+                case "admin":
+                    window.open(
+                        `https://admin.revolt.chat/panel/inspect/${data.type}/${data.id}`,
+                        "_blank",
+                    );
+                    break;
+                case "admin_system":
+                    window.open(
+                        `https://admin.revolt.chat/panel/inspect/user/${data.id}`,
+                        "_blank",
+                    );
+                    break;
                 case "copy_message_link":
                     {
                         let pathname = `/channel/${data.message.channel_id}/${data.message._id}`;
@@ -274,11 +289,7 @@ export default function ContextMenus() {
                         window.open(
                             // ! FIXME: do this from revolt.js
                             client
-                                .generateFileURL(data.attachment)
-                                ?.replace(
-                                    "attachments",
-                                    "attachments/download",
-                                ),
+                                .generateFileURL(data.attachment),
                             isFirefox || window.native ? "_blank" : "_self",
                         );
                     }
@@ -392,6 +403,13 @@ export default function ContextMenus() {
                     });
                     break;
 
+                case "react_message":
+                    modalController.push({
+                        type: "react_message",
+                        target: data.target,
+                    });
+                    break;
+
                 case "leave_group":
                 case "close_dm":
                 case "delete_channel":
@@ -449,6 +467,13 @@ export default function ContextMenus() {
                 case "open_server_settings":
                     history.push(`/server/${data.id}/settings`);
                     break;
+                case "report":
+                    modalController.push({
+                        type: "report",
+                        target: data.target,
+                        messageId: data.messageId,
+                    });
+                    break;
             }
         })().catch((err) => {
             modalController.push({
@@ -471,6 +496,7 @@ export default function ContextMenus() {
                     queued,
                     unread,
                     contextualChannel: cxid,
+                    contextualMessage,
                 }: ContextMenuData) => {
                     const elements: Children[] = [];
                     let lastDivider = false;
@@ -486,11 +512,19 @@ export default function ContextMenus() {
                         elements.push(
                             <MenuItem data={action} disabled={disabled}>
                                 <span style={{ color }}>
-                                    <Text
-                                        id={`app.context_menu.${
-                                            locale ?? action.action
-                                        }`}
-                                    />
+                                    {locale === "admin" ? (
+                                        "Open in Admin Panel"
+                                    ) : locale === "admin_system" ? (
+                                        "Open User in Admin Panel"
+                                    ) : locale === "react_message" ? (
+                                        "React"
+                                    ) : (
+                                        <Text
+                                            id={`app.context_menu.${
+                                                locale ?? action.action
+                                            }`}
+                                        />
+                                    )}
                                 </span>
                                 {tip && <div className="tip">{tip}</div>}
                             </MenuItem>,
@@ -669,6 +703,20 @@ export default function ContextMenus() {
                                 } as unknown as Action);
                             }
                         }
+
+                        if (user._id !== userId) {
+                            generateAction(
+                                {
+                                    action: "report",
+                                    target: user,
+                                    messageId: contextualMessage,
+                                },
+                                "report_user",
+                                undefined,
+                                undefined,
+                                "var(--error)",
+                            );
+                        }
                     }
 
                     if (contextualChannel) {
@@ -795,14 +843,43 @@ export default function ContextMenus() {
                             });
                         }
 
+                        if (message.channel?.havePermission("React")) {
+                            generateAction(
+                                {
+                                    action: "react_message",
+                                    target: message,
+                                },
+                                "react_message",
+                            );
+                        }
+
+                        if (message.author_id !== userId) {
+                            generateAction(
+                                {
+                                    action: "report",
+                                    target: message,
+                                },
+                                "report_message",
+                                undefined,
+                                undefined,
+                                "var(--error)",
+                            );
+                        }
+
                         if (
                             message.author_id === userId ||
                             channelPermissions & Permission.ManageMessages
                         ) {
-                            generateAction({
-                                action: "delete_message",
-                                target: message,
-                            });
+                            generateAction(
+                                {
+                                    action: "delete_message",
+                                    target: message,
+                                },
+                                undefined,
+                                undefined,
+                                undefined,
+                                "var(--error)",
+                            );
                         }
 
                         if (
@@ -1035,6 +1112,17 @@ export default function ContextMenus() {
                                     "var(--error)",
                                 );
                             } else {
+                                generateAction(
+                                    {
+                                        action: "report",
+                                        target: server,
+                                    },
+                                    "report_server",
+                                    undefined,
+                                    undefined,
+                                    "var(--error)",
+                                );
+
                                 generateAction(
                                     { action: "leave_server", target: server },
                                     "leave_server",
@@ -1053,6 +1141,37 @@ export default function ContextMenus() {
                         }
 
                         if (!hideIDButton) {
+                            if (state.experiments.isEnabled("admin_beta")) {
+                                generateAction(
+                                    {
+                                        action: "admin",
+                                        id,
+                                        type: cid
+                                            ? "channel"
+                                            : message
+                                            ? "message"
+                                            : "user",
+                                    },
+                                    "admin",
+                                );
+
+                                switch (message?.system?.type) {
+                                    case "user_added":
+                                    case "user_remove":
+                                    case "user_joined":
+                                    case "user_left":
+                                    case "user_kicked":
+                                    case "user_banned":
+                                        generateAction(
+                                            {
+                                                action: "admin_system",
+                                                id: message.system.id,
+                                            },
+                                            "admin_system",
+                                        );
+                                }
+                            }
+
                             generateAction(
                                 { action: "copy_id", id },
                                 cid
@@ -1088,7 +1207,21 @@ export default function ContextMenus() {
                                             content={
                                                 <Text id="app.special.copy_username" />
                                             }>
-                                            @{user.username}
+                                            <Column gap="0">
+                                                <span>
+                                                    {user.display_name ??
+                                                        user.username}
+                                                </span>
+                                                <span
+                                                    style={{
+                                                        fontSize: "0.8em",
+                                                    }}>
+                                                    {user.username}
+                                                    {"#"}
+                                                    {user.discriminator ??
+                                                        "0000"}
+                                                </span>
+                                            </Column>
                                         </Tooltip>
                                     </div>
                                     <div

src/lib/links.ts

@@ -17,6 +17,7 @@ const ALLOWED_ORIGINS = [
     "app.revolt.chat",
     "nightly.revolt.chat",
     "local.revolt.chat",
+    "rolt.chat",
 ];
 
 /**

src/mobx/stores/Changelog.ts

@@ -1,6 +1,6 @@
 import { action, makeAutoObservable, runInAction } from "mobx";
 
-import { latestChangelog } from "../../assets/changelogs";
+import { changelogEntries, latestChangelog } from "../../assets/changelogs";
 import { modalController } from "../../controllers/modals/ModalController";
 import Persistent from "../interfaces/Persistent";
 import Store from "../interfaces/Store";
@@ -58,10 +58,21 @@ export default class Changelog implements Store, Persistent<Data>, Syncable {
      */
     checkForUpdates() {
         if (this.viewed < latestChangelog) {
-            modalController.push({
-                type: "changelog",
-                initial: latestChangelog,
-            });
+            const expires = new Date(+changelogEntries[latestChangelog].date);
+            expires.setDate(expires.getDate() + 7);
+
+            if (+new Date() < +expires) {
+                if (latestChangelog === 3) {
+                    modalController.push({
+                        type: "changelog_usernames",
+                    });
+                } else {
+                    modalController.push({
+                        type: "changelog",
+                        initial: latestChangelog,
+                    });
+                }
+            }
 
             runInAction(() => {
                 this.viewed = latestChangelog;

src/mobx/stores/Draft.ts

@@ -5,7 +5,7 @@ import { mapToRecord } from "../../lib/conversion";
 import Persistent from "../interfaces/Persistent";
 import Store from "../interfaces/Store";
 
-interface DraftObject {
+export interface DraftObject {
     content?: string;
     masquerade?: {
         avatar: string;
@@ -59,10 +59,12 @@ export default class Draft implements Store, Persistent<Data> {
      * @param channel Channel ID
      */
     @computed has(channel: string) {
-        return (
-            this.drafts.has(channel) &&
-            this.drafts.get(channel)!.content!.length > 0
-        );
+        if (!this.drafts.has(channel)) return false;
+        // fetch the draft object
+        const potentialDraft = this.drafts.get(channel)?.content;
+        // if it doesn't have any content return false
+        if (!potentialDraft) return false;
+        return potentialDraft.length > 0;
     }
 
     /**

src/mobx/stores/Experiments.ts

@@ -10,7 +10,7 @@ import Store from "../interfaces/Store";
 /**
  * Union type of available experiments.
  */
-export type Experiment = "dummy" | "offline_users" | "plugins" | "picker";
+export type Experiment = "dummy" | "offline_users" | "plugins" | "admin_beta";
 
 /**
  * Currently active experiments.
@@ -19,7 +19,7 @@ export const AVAILABLE_EXPERIMENTS: Experiment[] = [
     "dummy",
     "offline_users",
     "plugins",
-    "picker",
+    "admin_beta",
 ];
 
 /**
@@ -42,10 +42,10 @@ export const EXPERIMENTS: {
         description:
             "This will enable the experimental plugin API. Only touch this if you know what you're doing.",
     },
-    picker: {
-        title: "Custom Emoji",
+    admin_beta: {
+        title: "Admin Panel Shortcuts",
         description:
-            "This will enable a work-in-progress emoji picker, custom emoji settings and a reaction picker.",
+            "Adds context menu entries to quickly jump to Revolt Admin Panel. This is intended for use by the team.",
     },
 };
 

src/mobx/stores/Settings.ts

@@ -66,11 +66,16 @@ export default class Settings
     }
 
     @action hydrate(data: ISettings) {
-        Object.keys(data).forEach(
-            (key) =>
-                typeof (data as any)[key] !== "undefined" &&
-                this.data.set(key, (data as any)[key]),
-        );
+        Object.keys(data).forEach((key) => {
+            const val = (data as any)[key];
+            if (typeof val !== "undefined") {
+                if (key === "appearance:emoji") {
+                    setGlobalEmojiPack(val);
+                }
+
+                this.data.set(key, val);
+            }
+        });
     }
 
     /**

src/pages/RevoltApp.tsx

@@ -28,7 +28,7 @@ const AppContainer = styled.div`
     background-position: center center !important;
 `;
 
-const StatusBar = styled.div`
+export const StatusBar = styled.div`
     height: 40px;
     width: 100%;
     display: flex;

src/pages/channels/Channel.tsx

@@ -1,5 +1,6 @@
 import { Hash } from "@styled-icons/boxicons-regular";
 import { Ghost } from "@styled-icons/boxicons-solid";
+import dayjs from "dayjs";
 import { reaction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router-dom";
@@ -163,6 +164,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
 
         const checkUnread = () =>
             channel.unread &&
+            document.hasFocus() &&
             channel.client.unreads!.markRead(
                 channel._id,
                 channel.last_message_id!,
@@ -176,6 +178,46 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
         );
     }, [channel]);
 
+    useEffect(() => {
+        let lastSubscribed: number | undefined;
+        function subscribe() {
+            if (document.hasFocus()) {
+                if (
+                    !lastSubscribed ||
+                    dayjs().subtract(10, "minutes").isAfter(lastSubscribed)
+                ) {
+                    lastSubscribed = +new Date();
+                    channel.server?.subscribe();
+                }
+            }
+        }
+
+        // Trigger logic every minute
+        const subTimer = setInterval(subscribe, 60e3);
+        subscribe();
+
+        function onFocus() {
+            // Mark channel as read if it's unread
+            if (channel.unread) {
+                channel.client.unreads!.markRead(
+                    channel._id,
+                    channel.last_message_id!,
+                    true,
+                );
+            }
+
+            // Subscribe to channel if expired
+            subscribe();
+        }
+
+        addEventListener("focus", onFocus);
+
+        return () => {
+            removeEventListener("focus", onFocus);
+            clearInterval(subTimer);
+        };
+    }, [channel]);
+
     return (
         <AgeGate
             type="channel"

src/pages/channels/voice/VoiceHeader.tsx

@@ -29,6 +29,7 @@ const VoiceBase = styled.div`
     margin-top: 48px;
     padding: 20px;
     background: var(--secondary-background);
+    flex-grow: 1;
 
     .status {
         flex: 1 0;
@@ -54,8 +55,6 @@ const VoiceBase = styled.div`
     display: flex;
     flex-direction: column;
 
-    overflow-y: scroll;
-
     .participants {
         margin: 40px 20px;
         justify-content: center;

src/pages/friends/Friend.tsx

@@ -136,7 +136,7 @@ export const Friend = observer(({ user }: Props) => {
             })}>
             <UserIcon target={user} size={36} status />
             <div className={styles.name}>
-                <span>{user.username}</span>
+                <span>{user.display_name ?? user.username}</span>
                 {subtext && <span className={styles.subtext}>{subtext}</span>}
             </div>
             <div className={styles.actions}>{actions}</div>

src/pages/home/Home.module.scss

@@ -34,7 +34,7 @@
 
             a {
                 width: 100%;
-
+                height: 6em;
                 div {
                     margin: 0;
                 }
@@ -54,3 +54,4 @@
 [data-light="true"] .home svg {
     filter: invert(100%);
 }
+

src/pages/home/Home.tsx

@@ -51,9 +51,9 @@ export default observer(() => {
         state.settings.set("appearance:seasonal", !seasonalTheme);
 
     const isDecember = !isTouchscreenDevice && new Date().getMonth() === 11;
-    const isOctober = !isTouchscreenDevice && new Date().getMonth() === 9
+    const isOctober = !isTouchscreenDevice && new Date().getMonth() === 9;
     const snowflakes = useMemo(() => {
-        const flakes = [];
+        const flakes: string[] = [];
 
         if (isDecember) {
             for (let i = 0; i < 15; i++) {
@@ -175,7 +175,7 @@ export default observer(() => {
                                 </CategoryButton>
                             </Link>
                             <a
-                                href="https://insrt.uk/donate"
+                                href="https://wiki.revolt.chat/notes/project/financial-support/"
                                 target="_blank"
                                 rel="noreferrer">
                                 <CategoryButton

src/pages/invite/InviteBot.tsx

@@ -10,6 +10,22 @@ import UserIcon from "../../components/common/user/UserIcon";
 import Markdown from "../../components/markdown/Markdown";
 import { useClient } from "../../controllers/client/ClientController";
 
+const Page = styled.div`
+    padding: 6em;
+    min-height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: border-box;
+
+    @media (max-width: 768px) {
+        padding: 2em;
+    }
+
+    @media (max-width: 480px) {
+        padding: 1em;
+    }
+`;
+
 const BotInfo = styled.div`
     gap: 12px;
     display: flex;
@@ -42,7 +58,7 @@ export default function InviteBot() {
     const [group, setGroup] = useState("none");
 
     return (
-        <div style={{ padding: "6em" }}>
+        <Page>
             <Tip palette="warning">This section is under construction.</Tip>
             {typeof data === "undefined" && <Preloader type="spinner" />}
             {data && (
@@ -106,6 +122,7 @@ export default function InviteBot() {
                     </Option>
                 </>
             )}
-        </div>
+        </Page>
     );
 }
+    

src/pages/login/Login.tsx

@@ -1,17 +1,19 @@
 import { Twitter, Github, Mastodon } from "@styled-icons/boxicons-logos";
 import { observer } from "mobx-react-lite";
 import { Helmet } from "react-helmet";
-import { Route, Switch } from "react-router-dom";
+import { Link, Route, Switch } from "react-router-dom";
 
 import styles from "./Login.module.scss";
 import { Text } from "preact-i18n";
 
 import { useApplicationState } from "../../mobx/State";
 
-import LocaleSelector from "../../components/common/LocaleSelector";
 import wideSVG from "/assets/wide.svg";
 
+import LocaleSelector from "../../components/common/LocaleSelector";
 import { Titlebar } from "../../components/native/Titlebar";
+import { useSystemAlert } from "../../updateWorker";
+import { StatusBar } from "../RevoltApp";
 import { FormCreate } from "./forms/FormCreate";
 import { FormLogin } from "./forms/FormLogin";
 import { FormReset, FormSendReset } from "./forms/FormReset";
@@ -21,11 +23,31 @@ export default observer(() => {
     const state = useApplicationState();
     const theme = state.settings.theme;
 
+    const alert = useSystemAlert();
+
     return (
         <>
             {window.isNative && !window.native.getConfig().frame && (
                 <Titlebar overlay />
             )}
+            {alert && (
+                <StatusBar>
+                    <div className="title">{alert.text}</div>
+                    <div className="actions">
+                        {alert.actions?.map((action) =>
+                            action.type === "internal" ? null : action.type ===
+                              "external" ? (
+                                <a
+                                    href={action.href}
+                                    target="_blank"
+                                    rel="noreferrer">
+                                    <div className="button">{action.text}</div>{" "}
+                                </a>
+                            ) : null,
+                        )}
+                    </div>
+                </StatusBar>
+            )}
             <div className={styles.login}>
                 <Helmet>
                     <meta
@@ -77,17 +99,20 @@ export default observer(() => {
                             <div className={styles.socials}>
                                 <a
                                     href="https://github.com/revoltchat"
-                                    target="_blank" rel="noreferrer">
+                                    target="_blank"
+                                    rel="noreferrer">
                                     <Github size={24} />
                                 </a>
                                 <a
                                     href="https://twitter.com/revoltchat"
-                                    target="_blank" rel="noreferrer">
+                                    target="_blank"
+                                    rel="noreferrer">
                                     <Twitter size={24} />
                                 </a>
                                 <a
                                     href="https://mastodon.social/@revoltchat"
-                                    target="_blank" rel="noreferrer">
+                                    target="_blank"
+                                    rel="noreferrer">
                                     <Mastodon size={24} />
                                 </a>
                             </div>
@@ -116,7 +141,8 @@ export default observer(() => {
                         <a
                             className={styles.attribution}
                             href="https://unsplash.com/@fakurian"
-                            target="_blank" rel="noreferrer">
+                            target="_blank"
+                            rel="noreferrer">
                             <Text id="general.image_by" /> &lrm;@fakurian &rlm;·
                             unsplash.com
                         </a>

src/pages/login/forms/Form.tsx

@@ -202,11 +202,9 @@ export const Form = observer(({ page, callback }: Props) => {
                     />
                 )}
                 {error && (
-                    <Category>
-                        <I18nError error={error}>
-                            <Text id={`login.error.${page}`} />
-                        </I18nError>
-                    </Category>
+                    <p style={{ fontSize: "0.8em", color: "var(--error)" }}>
+                        <Text id={`error.${error}`} children={error} />
+                    </p>
                 )}
                 <Button>
                     <Text
@@ -259,7 +257,7 @@ export const Form = observer(({ page, callback }: Props) => {
                                 <span>
                                     <Text id="login.unofficial_instance" />{" "}
                                     <a
-                                        href="https://developers.revolt.chat/faq/instances#what-is-a-third-party-instance"
+                                        href="https://developers.revolt.chat/faq.html"
                                         style={{ color: "var(--accent)" }}
                                         target="_blank"
                                         rel="noreferrer">

src/pages/login/forms/MailProvider.tsx

@@ -1,7 +1,7 @@
 import styles from "../Login.module.scss";
 import { Text } from "preact-i18n";
 
-import { Button } from "@revoltchat/ui";
+import { Button, Tip } from "@revoltchat/ui";
 
 interface Props {
     email?: string;
@@ -115,6 +115,15 @@ export function MailProvider({ email }: Props) {
                     />
                 </Button>
             </a>
+            {provider[0] === "iCloud Mail" && (
+                <Tip palette="error">
+                    <span>
+                        iCloud users may not receive any emails due to a block
+                        by Proofpoint. Please use a different email provider if
+                        you do not receive anything.
+                    </span>
+                </Tip>
+            )}
         </div>
     );
 }

src/pages/settings/ServerSettings.tsx

@@ -79,7 +79,6 @@ export default observer(() => {
                     id: "emojis",
                     icon: <HappyBeaming size={20} />,
                     title: <Text id="app.settings.server_pages.emojis.title" />,
-                    hidden: !state.experiments.isEnabled("picker"),
                 },
                 {
                     category: (

src/pages/settings/Settings.tsx

@@ -80,10 +80,15 @@ const AccountHeader = styled.div`
             font-size: 12px;
             gap: 2px;
 
-            > span {
+            .new {
                 font-size: 20px;
                 font-weight: 600;
             }
+
+            .full {
+                font-size: 14px;
+                font-weight: 600;
+            }
         }
     }
 
@@ -276,7 +281,7 @@ export default observer(() => {
                         </ButtonItem>
                     </a>
                     <a
-                        href="https://insrt.uk/donate"
+                        href="https://wiki.revolt.chat/notes/project/financial-support/"
                         target="_blank"
                         rel="noreferrer">
                         <ButtonItem className={styles.donate} compact>
@@ -336,7 +341,15 @@ export default observer(() => {
                             onClick={() => openContextMenu("Status")}
                         />
                         <div className="details">
-                            <Username user={client.user!} prefixAt />
+                            <span className="new">
+                                {client.user.display_name ??
+                                    client.user.username}
+                            </span>
+                            <span className="full">
+                                {client.user.username}
+                                {"#"}
+                                {client.user.discriminator}
+                            </span>
                             <UserStatus user={client.user!} />
                         </div>
                     </div>

src/pages/settings/panes/Audio.tsx

@@ -94,6 +94,33 @@ export function Audio() {
     return (
         <>
             <div className={styles.audio}>
+                <Tip palette="warning">
+                    <span>
+                        We are currently{" "}
+                        <a
+                            style={{ color: "inherit", fontWeight: "600" }}
+                            href="https://github.com/revoltchat/frontend/issues/14"
+                            target="_blank"
+                            rel="noreferrer">
+                            rebuilding the client
+                        </a>{" "}
+                        and{" "}
+                        <a
+                            style={{ color: "inherit", fontWeight: "600" }}
+                            href="https://trello.com/c/Ay6KdiOV/1-voice-overhaul-and-video-calling"
+                            target="_blank"
+                            rel="noreferrer">
+                            the voice server
+                        </a>{" "}
+                        from scratch.
+                        <br />
+                        <br />
+                        The old voice should work in most cases, but it may
+                        inexplicably not connect in some scenarios and / or
+                        exhibit weird behaviour.
+                    </span>
+                </Tip>
+
                 {!permission && (
                     <Tip palette="error">
                         <Text id="app.settings.pages.audio.tip_grant_permission" />

src/pages/settings/panes/Feedback.tsx

@@ -5,60 +5,76 @@ import { Link } from "react-router-dom";
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 
-import { CategoryButton } from "@revoltchat/ui";
+import { CategoryButton, Column, Tip } from "@revoltchat/ui";
 
 export function Feedback() {
     return (
-        <div className={styles.feedback}>
-            <a
-                href="https://github.com/revoltchat/revolt/discussions"
-                target="_blank"
-                rel="noreferrer">
-                <CategoryButton
-                    action="external"
-                    icon={<Github size={24} />}
-                    description={
-                        <Text id="app.settings.pages.feedback.suggest_desc" />
-                    }>
-                    <Text id="app.settings.pages.feedback.suggest" />
-                </CategoryButton>
-            </a>
-            <a
-                href="https://github.com/revoltchat/revite/issues/new/choose"
-                target="_blank"
-                rel="noreferrer">
-                <CategoryButton
-                    action="external"
-                    icon={<ListOl size={24} />}
-                    description={
-                        <Text id="app.settings.pages.feedback.issue_desc" />
-                    }>
-                    <Text id="app.settings.pages.feedback.issue" />
-                </CategoryButton>
-            </a>
-            <a
-                href="https://github.com/orgs/revoltchat/projects/3"
-                target="_blank"
-                rel="noreferrer">
-                <CategoryButton
-                    action="external"
-                    icon={<BugAlt size={24} />}
-                    description={
-                        <Text id="app.settings.pages.feedback.bug_desc" />
-                    }>
-                    <Text id="app.settings.pages.feedback.bug" />
-                </CategoryButton>
-            </a>
-            <Link to="/invite/Testers">
-                <a>
+        <Column>
+            <Tip palette="warning">
+                <span>
+                    We are currently rebuilding the client from scratch. You can{" "}
+                    <a
+                        style={{ color: "inherit", fontWeight: "600" }}
+                        href="https://github.com/revoltchat/frontend/issues/14"
+                        target="_blank"
+                        rel="noreferrer">
+                        view our progress here
+                    </a>
+                    ; in the meantime, we are only accepting and fixing critical
+                    bugs with the current client.
+                </span>
+            </Tip>
+            <div className={styles.feedback}>
+                <a
+                    href="https://github.com/revoltchat/revolt/discussions"
+                    target="_blank"
+                    rel="noreferrer">
                     <CategoryButton
-                        action="chevron"
-                        icon={<Group size={24} />}
-                        description="You can report issues and discuss improvements with us directly here.">
-                        {"Join the Revolt Lounge"}
+                        action="external"
+                        icon={<Github size={24} />}
+                        description={
+                            <Text id="app.settings.pages.feedback.suggest_desc" />
+                        }>
+                        <Text id="app.settings.pages.feedback.suggest" />
                     </CategoryButton>
                 </a>
-            </Link>
-        </div>
+                <a
+                    href="https://github.com/revoltchat/revite/issues/new/choose"
+                    target="_blank"
+                    rel="noreferrer">
+                    <CategoryButton
+                        action="external"
+                        icon={<ListOl size={24} />}
+                        description={
+                            <Text id="app.settings.pages.feedback.issue_desc" />
+                        }>
+                        <Text id="app.settings.pages.feedback.issue" />
+                    </CategoryButton>
+                </a>
+                <a
+                    href="https://github.com/orgs/revoltchat/projects/3"
+                    target="_blank"
+                    rel="noreferrer">
+                    <CategoryButton
+                        action="external"
+                        icon={<BugAlt size={24} />}
+                        description={
+                            <Text id="app.settings.pages.feedback.bug_desc" />
+                        }>
+                        <Text id="app.settings.pages.feedback.bug" />
+                    </CategoryButton>
+                </a>
+                <Link to="/invite/Testers">
+                    <a>
+                        <CategoryButton
+                            action="chevron"
+                            icon={<Group size={24} />}
+                            description="You can report issues and discuss improvements with us directly here.">
+                            {"Join the Revolt Lounge"}
+                        </CategoryButton>
+                    </a>
+                </Link>
+            </div>
+        </Column>
     );
 }

src/pages/settings/panes/MyBots.tsx

@@ -35,6 +35,7 @@ import { modalController } from "../../../controllers/modals/ModalController";
 
 interface Data {
     _id: string;
+    token: string;
     username: string;
     public: boolean;
     interactions_url?: string;
@@ -74,6 +75,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
     const [user, setUser] = useState<User>(client.users.get(bot._id)!);
     const [data, setData] = useState<Data>({
         _id: bot._id,
+        token: bot.token,
         username: user.username,
         public: bot.public,
         interactions_url: bot.interactions_url as any,
@@ -94,7 +96,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
     const refreshProfile = useCallback(() => {
         client.api
             .get(`/users/${bot._id as ""}/profile`, undefined, {
-                headers: { "x-bot-token": bot.token },
+                headers: { "x-bot-token": data.token },
             })
             .then((profile) => setProfile(profile ?? {}));
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -149,7 +151,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
             "/users/@me",
             avatar ? { avatar } : { remove: ["Avatar"] },
             {
-                headers: { "x-bot-token": bot.token },
+                headers: { "x-bot-token": data.token },
             },
         );
 
@@ -168,7 +170,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                 ? { profile: { background } }
                 : { remove: ["ProfileBackground"] },
             {
-                headers: { "x-bot-token": bot.token },
+                headers: { "x-bot-token": data.token },
             },
         );
 
@@ -184,7 +186,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
             "/users/@me",
             content ? { profile: { content } } : { remove: ["ProfileContent"] },
             {
-                headers: { "x-bot-token": bot.token },
+                headers: { "x-bot-token": data.token },
             },
         );
 
@@ -312,6 +314,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                         if (editMode) {
                             setData({
                                 _id: bot._id,
+                                token: data.token,
                                 username: user!.username,
                                 public: bot.public,
                                 interactions_url: bot.interactions_url as any,
@@ -334,7 +337,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                 <CategoryButton
                     account
                     icon={<Key size={24} />}
-                    onClick={() => modalController.writeText(bot.token)}
+                    onClick={() => modalController.writeText(data.token)}
                     description={
                         <>
                             {"••••• "}
@@ -344,7 +347,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                                         ev,
                                         modalController.push({
                                             type: "show_token",
-                                            token: bot.token,
+                                            token: data.token,
                                             name: user!.username,
                                         }),
                                     )
@@ -490,6 +493,25 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                             }>
                             <Text id="app.settings.pages.bots.add" />
                         </Button>
+                        <Button
+                        palette="error"
+                            onClick={ async () => {
+                                    modalController.push({
+                                        type: "reset_bot_token",
+                                        target: { name: user.username, id: bot._id },
+                                        callback: async () => {
+                                            const updatedBot = await client.bots.fetch(bot._id);
+                                            setData({
+                                                ...data,
+                                                token: updatedBot.bot.token
+                                            })
+                                        }
+                                    })
+
+                            }
+                            }>
+                                <Text id="app.settings.pages.bots.reset_token" />
+                        </Button>
                     </>
                 )}
             </div>

src/pages/settings/panes/Native.tsx

@@ -66,7 +66,7 @@ export function Native() {
                 title="Enable Discord status"
                 description="Rep Revolt on your Discord status."
             />
-            <Checkbox
+            {/* <Checkbox
                 value={config.build === "nightly"}
                 onChange={(nightly) => {
                     const build = nightly ? "nightly" : "stable";
@@ -79,7 +79,7 @@ export function Native() {
                 }}
                 title="Revolt Nightly"
                 description="Use the beta branch of Revolt."
-            />
+            /> */}
 
             <h3>Titlebar</h3>
             <Checkbox
@@ -144,7 +144,7 @@ export function Native() {
                 </Button>
             </p>
             <h3 style={{ marginTop: "4em" }}>Local Development Mode</h3>
-            {config.build === "dev" ? (
+            {/*config.build === "dev" ? (
                 <>
                     <h5>Development mode is currently on.</h5>
                     <Button
@@ -197,7 +197,7 @@ export function Native() {
                         </Button>
                     </p>
                 </>
-            )}
+            )*/}
             <hr />
             <CategoryButton
                 icon={<img src={RLogo} draggable={false} />}

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

@@ -694,3 +694,23 @@
 section {
     margin-bottom: 20px;
 }
+
+.titleNew {
+    display: flex;
+    margin: 15px 0;
+    gap: 8px;
+    align-items: center;
+
+    font-size: 0.8125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--secondary-foreground);
+
+    .new {
+        font-size: 10px;
+        background: var(--accent);
+        padding: 3px 5px;
+        border-radius: 20px;
+        color: white;
+    }
+}

src/pages/settings/panes/Profile.tsx

@@ -1,4 +1,5 @@
 import { Markdown } from "@styled-icons/boxicons-logos";
+import { UserCircle } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { API } from "revolt.js";
@@ -7,7 +8,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, LineDivider, Tip } from "@revoltchat/ui";
+import { Button, LineDivider, Tip, CategoryButton } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { useTranslation } from "../../../lib/i18n";
@@ -17,6 +18,7 @@ import AutoComplete, {
 } from "../../../components/common/AutoComplete";
 import { useSession } from "../../../controllers/client/ClientController";
 import { FileUploader } from "../../../controllers/client/jsx/legacy/FileUploads";
+import { modalController } from "../../../controllers/modals/ModalController";
 import { UserProfile } from "../../../controllers/modals/components/legacy/UserProfile";
 
 export const Profile = observer(() => {
@@ -77,6 +79,19 @@ export const Profile = observer(() => {
                     {...({} as any)}
                 />
             </div>
+            <div className={styles.titleNew}>
+                Display Name
+                <div className={styles.new}>NEW</div>
+            </div>
+            <CategoryButton
+                onClick={() =>
+                    modalController.push({ type: "modify_displayname" })
+                }
+                icon={<UserCircle size={24} />}
+                action="chevron"
+                description={"Change your display name to whatever you like"}>
+                Display Name
+            </CategoryButton>
             {/*<h3>Badges</h3>
             <div className={styles.badgePicker}>
                 <div className={styles.overlay} />