Add AutoComplete for role completion

[skip ci]

.env

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

.github/pull_request_template.md

@@ -1,6 +1,6 @@
 ## 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 understand and have followed the [contribution guide](https://developers.revolt.chat/contrib.html)
 * [ ] 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)

.github/workflows/docker.yml

@@ -30,55 +30,18 @@ on:
     workflow_dispatch:
 
 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
+              uses: docker/setup-buildx-action@v3
-            - name: Cache amd64 Docker layers
-              uses: actions/cache@v2
-              with:
-                  path: /tmp/.buildx-cache/linux/amd64
-                  key: ${{ runner.os }}-buildx-linux/amd64-${{ github.sha }}
             - name: Docker meta
               id: meta
               uses: docker/metadata-action@v3
@@ -86,26 +49,22 @@ jobs:
                   images: revoltchat/client, ghcr.io/revoltchat/client
             - 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
+              uses: docker/login-action@v3
+              if: github.event_name != 'pull_request'
               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
+                  push: ${{ github.event_name != 'pull_request' }}
                   platforms: linux/amd64
                   tags: ${{ steps.meta.outputs.tags }}
                   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_pr.yml

@@ -15,7 +15,7 @@ jobs:
           gh api graphql -f query='
             query {
               organization(login: "revoltchat"){
-                projectV2(number: 3) {
+                projectV2(number: 5) {
                   id
                   fields(first:20) {
                     nodes {
@@ -35,7 +35,7 @@ jobs:
 
           echo 'PROJECT_ID='$(jq '.data.organization.projectV2.id' project_data.json) >> $GITHUB_ENV
           echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
-          echo 'INCOMING_OPTION_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name== "Status") | .options[] | select(.name=="Incoming PRs") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'INCOMING_OPTION_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name== "Status") | .options[] | select(.name=="🆕 Untriaged") |.id' project_data.json) >> $GITHUB_ENV
 
       - name: Add PR to project
         env:

README.md

@@ -1,3 +1,30 @@
+# Deprecation Notice
+
+This project is deprecated, however it still may receive maintenance updates.
+
+PRs for small fixes are more than welcome.
+
+## 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

scripts/publish.sh

@@ -8,10 +8,10 @@ if [ -z "$REMOTE" ]; then
 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

src/assets/emojis.ts

@@ -1848,109 +1848,109 @@ export const emojiDictionary = {
     england: "🏴󠁧󠁢󠁥󠁮󠁧󠁿",
     scotland: "🏴󠁧󠁢󠁳󠁣󠁴󠁿",
     wales: "🏴󠁧󠁢󠁷󠁬󠁳󠁿",
-    ...{
+    // ...{
-        1984: "custom:1984.gif",
+    //     1984: "custom:1984.gif",
-        KekW: "custom:KekW.png",
+    //     KekW: "custom:KekW.png",
-        amogus: "custom:amogus.gif",
+    //     amogus: "custom:amogus.gif",
-        awaa: "custom:awaa.png",
+    //     awaa: "custom:awaa.png",
-        boohoo: "custom:boohoo.png",
+    //     boohoo: "custom:boohoo.png",
-        boohoo_goes_hard: "custom:boohoo_goes_hard.png",
+    //     boohoo_goes_hard: "custom:boohoo_goes_hard.png",
-        boohoo_shaken: "custom:boohoo_shaken.png",
+    //     boohoo_shaken: "custom:boohoo_shaken.png",
-        cat_arrival: "custom:cat_arrival.gif",
+    //     cat_arrival: "custom:cat_arrival.gif",
-        cat_awson: "custom:cat_awson.png",
+    //     cat_awson: "custom:cat_awson.png",
-        cat_blob: "custom:cat_blob.png",
+    //     cat_blob: "custom:cat_blob.png",
-        cat_bonk: "custom:cat_bonk.png",
+    //     cat_bonk: "custom:cat_bonk.png",
-        cat_concern: "custom:cat_concern.png",
+    //     cat_concern: "custom:cat_concern.png",
-        cat_fast: "custom:cat_fast.gif",
+    //     cat_fast: "custom:cat_fast.gif",
-        cat_kitty: "custom:cat_kitty.png",
+    //     cat_kitty: "custom:cat_kitty.png",
-        cat_lick: "custom:cat_lick.gif",
+    //     cat_lick: "custom:cat_lick.gif",
-        cat_not_like: "custom:cat_not_like.png",
+    //     cat_not_like: "custom:cat_not_like.png",
-        cat_put: "custom:cat_put.gif",
+    //     cat_put: "custom:cat_put.gif",
-        cat_pwease: "custom:cat_pwease.png",
+    //     cat_pwease: "custom:cat_pwease.png",
-        cat_rage: "custom:cat_rage.png",
+    //     cat_rage: "custom:cat_rage.png",
-        cat_sad: "custom:cat_sad.png",
+    //     cat_sad: "custom:cat_sad.png",
-        cat_snuff: "custom:cat_snuff.gif",
+    //     cat_snuff: "custom:cat_snuff.gif",
-        cat_spin: "custom:cat_spin.gif",
+    //     cat_spin: "custom:cat_spin.gif",
-        cat_squish: "custom:cat_squish.gif",
+    //     cat_squish: "custom:cat_squish.gif",
-        cat_stare: "custom:cat_stare.gif",
+    //     cat_stare: "custom:cat_stare.gif",
-        cat_steal: "custom:cat_steal.gif",
+    //     cat_steal: "custom:cat_steal.gif",
-        cat_sussy: "custom:cat_sussy.gif",
+    //     cat_sussy: "custom:cat_sussy.gif",
-        clueless: "custom:clueless.png",
+    //     clueless: "custom:clueless.png",
-        death: "custom:death.gif",
+    //     death: "custom:death.gif",
-        developers: "custom:developers.gif",
+    //     developers: "custom:developers.gif",
-        fastwawa: "custom:fastwawa.gif",
+    //     fastwawa: "custom:fastwawa.gif",
-        ferris: "custom:ferris.png",
+    //     ferris: "custom:ferris.png",
-        ferris_bongo: "custom:ferris_bongo.gif",
+    //     ferris_bongo: "custom:ferris_bongo.gif",
-        ferris_nom: "custom:ferris_nom.png",
+    //     ferris_nom: "custom:ferris_nom.png",
-        ferris_pensive: "custom:ferris_pensive.png",
+    //     ferris_pensive: "custom:ferris_pensive.png",
-        ferris_unsafe: "custom:ferris_unsafe.png",
+    //     ferris_unsafe: "custom:ferris_unsafe.png",
-        flesh: "custom:flesh.png",
+    //     flesh: "custom:flesh.png",
-        flooshed: "custom:flooshed.png",
+    //     flooshed: "custom:flooshed.png",
-        flosh: "custom:flosh.png",
+    //     flosh: "custom:flosh.png",
-        flushee: "custom:flushee.png",
+    //     flushee: "custom:flushee.png",
-        forgor: "custom:forgor.png",
+    //     forgor: "custom:forgor.png",
-        hollow: "custom:hollow.png",
+    //     hollow: "custom:hollow.png",
-        john: "custom:john.png",
+    //     john: "custom:john.png",
-        lightspeed: "custom:lightspeed.png",
+    //     lightspeed: "custom:lightspeed.png",
-        little_guy: "custom:little_guy.png",
+    //     little_guy: "custom:little_guy.png",
-        lmaoooo: "custom:lmaoooo.gif",
+    //     lmaoooo: "custom:lmaoooo.gif",
-        lol: "custom:lol.png",
+    //     lol: "custom:lol.png",
-        looking: "custom:looking.gif",
+    //     looking: "custom:looking.gif",
-        marie: "custom:marie.png",
+    //     marie: "custom:marie.png",
-        marie_furret: "custom:marie_furret.gif",
+    //     marie_furret: "custom:marie_furret.gif",
-        marie_smug: "custom:marie_smug.png",
+    //     marie_smug: "custom:marie_smug.png",
-        megumin: "custom:megumin.png",
+    //     megumin: "custom:megumin.png",
-        michi_above: "custom:michi_above.png",
+    //     michi_above: "custom:michi_above.png",
-        michi_awww: "custom:michi_awww.gif",
+    //     michi_awww: "custom:michi_awww.gif",
-        michi_drag: "custom:michi_drag.gif",
+    //     michi_drag: "custom:michi_drag.gif",
-        michi_flustered: "custom:michi_flustered.png",
+    //     michi_flustered: "custom:michi_flustered.png",
-        michi_glare: "custom:michi_glare.png",
+    //     michi_glare: "custom:michi_glare.png",
-        michi_sus: "custom:michi_sus.png",
+    //     michi_sus: "custom:michi_sus.png",
-        monkaS: "custom:monkaS.png",
+    //     monkaS: "custom:monkaS.png",
-        monkaStare: "custom:monkaStare.png",
+    //     monkaStare: "custom:monkaStare.png",
-        monkey_grr: "custom:monkey_grr.png",
+    //     monkey_grr: "custom:monkey_grr.png",
-        monkey_pensive: "custom:monkey_pensive.png",
+    //     monkey_pensive: "custom:monkey_pensive.png",
-        monkey_zany: "custom:monkey_zany.png",
+    //     monkey_zany: "custom:monkey_zany.png",
-        nazu_sit: "custom:nazu_sit.png",
+    //     nazu_sit: "custom:nazu_sit.png",
-        nazu_sus: "custom:nazu_sus.png",
+    //     nazu_sus: "custom:nazu_sus.png",
-        ok_and: "custom:ok_and.gif",
+    //     ok_and: "custom:ok_and.gif",
-        owo: "custom:owo.png",
+    //     owo: "custom:owo.png",
-        pat: "custom:pat.png",
+    //     pat: "custom:pat.png",
-        pointThink: "custom:pointThink.png",
+    //     pointThink: "custom:pointThink.png",
-        rainbowHype: "custom:rainbowHype.gif",
+    //     rainbowHype: "custom:rainbowHype.gif",
-        rawr: "custom:rawr.png",
+    //     rawr: "custom:rawr.png",
-        rember: "custom:rember.png",
+    //     rember: "custom:rember.png",
-        revolt: "custom:revolt.png",
+    //     revolt: "custom:revolt.png",
-        sickly: "custom:sickly.png",
+    //     sickly: "custom:sickly.png",
-        stare: "custom:stare.png",
+    //     stare: "custom:stare.png",
-        tfyoulookingat: "custom:tfyoulookingat.png",
+    //     tfyoulookingat: "custom:tfyoulookingat.png",
-        thanks: "custom:thanks.png",
+    //     thanks: "custom:thanks.png",
-        thonk: "custom:thonk.png",
+    //     thonk: "custom:thonk.png",
-        trol: "custom:trol.png",
+    //     trol: "custom:trol.png",
-        troll_smile: "custom:troll_smile.gif",
+    //     troll_smile: "custom:troll_smile.gif",
-        uber: "custom:uber.png",
+    //     uber: "custom:uber.png",
-        ubertroll: "custom:ubertroll.png",
+    //     ubertroll: "custom:ubertroll.png",
-        verycool: "custom:verycool.png",
+    //     verycool: "custom:verycool.png",
-        verygood: "custom:verygood.png",
+    //     verygood: "custom:verygood.png",
-        wawafast: "custom:wawafast.gif",
+    //     wawafast: "custom:wawafast.gif",
-        wawastance: "custom:wawastance.png",
+    //     wawastance: "custom:wawastance.png",
-        yeahokayyy: "custom:yeahokayyy.png",
+    //     yeahokayyy: "custom:yeahokayyy.png",
-        yed: "custom:yed.png",
+    //     yed: "custom:yed.png",
-        yems: "custom:yems.png",
+    //     yems: "custom:yems.png",
-        michael: "custom:michael.gif",
+    //     michael: "custom:michael.gif",
-        charle: "custom:charle.gif",
+    //     charle: "custom:charle.gif",
-        sadge: "custom:sadge.webp",
+    //     sadge: "custom:sadge.webp",
-        sus: "custom:sus.webp",
+    //     sus: "custom:sus.webp",
-        chade: "custom:chade.gif",
+    //     chade: "custom:chade.gif",
-        gigachad: "custom:gigachad.webp",
+    //     gigachad: "custom:gigachad.webp",
-        sippy: "custom:sippy.webp",
+    //     sippy: "custom:sippy.webp",
-        ayame_heart: "custom:ayame_heart.png",
+    //     ayame_heart: "custom:ayame_heart.png",
-        catgirl_peek: "custom:catgirl_peek.png",
+    //     catgirl_peek: "custom:catgirl_peek.png",
-        girl_happy: "custom:girl_happy.png",
+    //     girl_happy: "custom:girl_happy.png",
-        hug_plushie: "custom:hug_plushie.png",
+    //     hug_plushie: "custom:hug_plushie.png",
-        huggies: "custom:huggies.png",
+    //     huggies: "custom:huggies.png",
-        noted: "custom:noted.gif",
+    //     noted: "custom:noted.gif",
-        waving: "custom:waving.png",
+    //     waving: "custom:waving.png",
-        mogusvented: "custom:mogusvented.png",
+    //     mogusvented: "custom:mogusvented.png",
-    },
+    // },
 };

src/components/common/AutoComplete.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { Link } from "react-router-dom";
-import { Channel, User } from "revolt.js";
+import { Channel, User, Role } from "revolt.js";
 import { Emoji as CustomEmoji } from "revolt.js/esm/maps/Emojis";
 import styled, { css } from "styled-components/macro";
 
@@ -29,11 +29,16 @@ export type AutoCompleteState =
                 type: "channel";
                 matches: Channel[];
             }
+          | {
+                type: "role";
+                matches: Role[];
+            }
       ));
 
 export type SearchClues = {
     users?: { type: "channel"; id: string } | { type: "all" };
     channels?: { server: string };
+    roles?: { server: string };
 };
 
 export type AutoCompleteProps = {
@@ -59,7 +64,7 @@ export function useAutoComplete(
 
     function findSearchString(
         el: HTMLTextAreaElement,
-    ): ["emoji" | "user" | "channel", string, number] | undefined {
+    ): ["emoji" | "user" | "channel" | "role", string, number] | undefined {
         if (el.selectionStart === el.selectionEnd) {
             const cursor = el.selectionStart;
             const content = el.value.slice(0, cursor);
@@ -71,6 +76,8 @@ export function useAutoComplete(
                 return ["user", "", j];
             } else if (content[j] === "#") {
                 return ["channel", "", j];
+            } else if (content[j] === "%") {
+                return ["role", "", j];
             }
 
             while (j >= 0 && valid.test(content[j])) {
@@ -80,7 +87,12 @@ export function useAutoComplete(
             if (j === -1) return;
             const current = content[j];
 
-            if (current === ":" || current === "@" || current === "#") {
+            if (
+                current === ":" ||
+                current === "@" ||
+                current === "#" ||
+                current === "%"
+            ) {
                 const search = content.slice(j + 1, content.length);
                 const minLen = current === ":" ? 2 : 1;
 
@@ -90,6 +102,8 @@ export function useAutoComplete(
                             ? "channel"
                             : current === ":"
                             ? "emoji"
+                            : current === "%"
+                            ? "role"
                             : "user",
                         search.toLowerCase(),
                         current === ":" ? j + 1 : j,
@@ -230,6 +244,42 @@ export function useAutoComplete(
                     return;
                 }
             }
+
+            if (type === "role" && searchClues?.roles) {
+                const server = client.servers.get(searchClues.roles.server);
+
+                let roles: (Role & { id: string })[] = [];
+                if (server?.roles) {
+                    roles = Object.entries(server.roles).map(([id, role]) => ({
+                        ...role,
+                        id,
+                    }));
+                }
+
+                const matches = (
+                    search.length > 0
+                        ? roles.filter((role) =>
+                              role.name.toLowerCase().match(regex),
+                          )
+                        : roles
+                )
+                    .splice(0, 5)
+                    .filter((x) => typeof x !== "undefined");
+
+                if (matches.length > 0) {
+                    const currentPosition =
+                        state.type !== "none" ? state.selected : 0;
+
+                    setState({
+                        type: "role",
+                        matches,
+                        selected: Math.min(currentPosition, matches.length - 1),
+                        within: false,
+                    });
+
+                    return;
+                }
+            }
         }
 
         if (state.type !== "none") {
@@ -262,6 +312,14 @@ export function useAutoComplete(
                         state.matches[state.selected]._id,
                         "> ",
                     );
+                } else if (state.type === "role") {
+                    content.splice(
+                        index,
+                        search.length + 1,
+                        "<%",
+                        state.matches[state.selected].id,
+                        "> ",
+                    );
                 } else {
                     content.splice(
                         index,
@@ -492,7 +550,7 @@ export default function AutoComplete({
                 {state.type === "user" &&
                     state.matches.map((match, i) => (
                         <button
-                            key={match}
+                            key={match._id}
                             className={i === state.selected ? "active" : ""}
                             onMouseEnter={() =>
                                 (i !== state.selected || !state.within) &&
@@ -517,7 +575,7 @@ export default function AutoComplete({
                 {state.type === "channel" &&
                     state.matches.map((match, i) => (
                         <button
-                            key={match}
+                            key={match._id}
                             className={i === state.selected ? "active" : ""}
                             onMouseEnter={() =>
                                 (i !== state.selected || !state.within) &&
@@ -539,6 +597,40 @@ export default function AutoComplete({
                             {match.name}
                         </button>
                     ))}
+                {state.type === "role" &&
+                    state.matches.map((match, i) => (
+                        <button
+                            key={match._id}
+                            className={i === state.selected ? "active" : ""}
+                            onMouseEnter={() =>
+                                (i !== state.selected || !state.within) &&
+                                setState({
+                                    ...state,
+                                    selected: i,
+                                    within: true,
+                                })
+                            }
+                            onMouseLeave={() =>
+                                state.within &&
+                                setState({
+                                    ...state,
+                                    within: false,
+                                })
+                            }
+                            onClick={onClick}>
+                            <div
+                                style={{
+                                    width: "16px",
+                                    height: "16px",
+                                    borderRadius: "50%",
+                                    backgroundColor: match.colour || "#7c7c7c",
+                                    marginRight: "8px",
+                                    flexShrink: 0,
+                                }}
+                            />
+                            {match.name}
+                        </button>
+                    ))}
             </div>
         </Base>
     );

src/components/common/Emoji.tsx

@@ -43,11 +43,11 @@ function toCodePoint(rune: string) {
 }
 
 export function parseEmoji(emoji: string) {
-    if (emoji.startsWith("custom:")) {
+    // if (emoji.startsWith("custom:")) {
-        return `https://dl.insrt.uk/projects/revolt/emotes/${emoji.substring(
+    //     return `https://dl.insrt.uk/projects/revolt/emotes/${emoji.substring(
-            7,
+    //         7,
-        )}`;
+    //     )}`;
-    }
+    // }
 
     const codepoint = toCodePoint(emoji);
     return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;

src/components/common/messaging/MessageBox.tsx

@@ -305,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}`);
             }
         }
 
@@ -324,7 +324,7 @@ export default observer(({ channel }: Props) => {
             return;
 
         const content = state.draft.get(channel._id)?.content?.trim() ?? "";
-        if (uploadState.type === "attached") return sendFile(content);
+        if (uploadState.type !== "none") return sendFile(content);
         if (content.length === 0) return;
 
         internalEmit("NewMessages", "hide");
@@ -406,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;
 
@@ -565,6 +567,7 @@ export default observer(({ channel }: Props) => {
             channel.channel_type === "TextChannel"
                 ? { server: channel.server_id! }
                 : undefined,
+        roles: { server: channel.server_id! },
     });
 
     return (

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

@@ -27,7 +27,7 @@ export default function AttachmentActions({ attachment }: Props) {
 
     const url = client.generateFileURL(attachment);
     const open_url = `${url}/${filename}`;
-    const download_url = url?.replace("attachments", "attachments/download");
+    const download_url = url;
 
     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/user/UserBadges.tsx

@@ -119,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/markdown/RemarkRenderer.tsx

@@ -185,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
@@ -247,9 +248,13 @@ export default memo(({ content, disallowBigEmoji }: MarkdownProps) => {
     const [Content, setContent] = useState<React.ReactElement>(null!);
 
     useLayoutEffect(() => {
-        render
+        try {
-            .process(sanitisedContent)
+            render
-            .then((file) => setContent(file.result));
+                .process(sanitisedContent)
+                .then((file) => setContent(file.result));
+        } catch (err) {
+            setContent("Message failed to render." as never);
+        }
     }, [sanitisedContent]);
 
     const largeEmoji = useMemo(

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/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();

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

@@ -297,4 +297,5 @@ export const modalController = new ModalControllerExtended({
     report_success: ReportSuccess,
     modify_displayname: ModifyDisplayname,
     changelog_usernames: ChangelogUsernames,
+    reset_bot_token: Confirmation
 });

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/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,30 +70,7 @@ export default function ServerInfo({
                     </IconButton>
                 </Row>
             }
-            actions={[
+            actions={actions}>
-                {
-                    onClick: () => {
-                        modalController.push({
-                            type: "server_identity",
-                            member: server.member!,
-                        });
-                        return true;
-                    },
-                    children: "Edit Identity",
-                    palette: "primary",
-                },
-                {
-                    onClick: () => {
-                        modalController.push({
-                            type: "report",
-                            target: server,
-                        });
-                        return true;
-                    },
-                    children: <Text id="app.special.modals.actions.report" />,
-                    palette: "error",
-                },
-            ]}>
             <Markdown content={server.description!} />
         </Modal>
     );

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";
@@ -246,6 +247,24 @@ 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

src/controllers/modals/types.ts

@@ -190,6 +190,11 @@ export type Modal = {
           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 {
+import { Channel, Message, Server, User, API, Permission, UserPermission, Member } from "revolt.js";
-    Channel,
-    Message,
-    Server,
-    User,
-    API,
-    Permission,
-    UserPermission,
-    Member,
-} from "revolt.js";
 
-import {
+
-    ContextMenuWithData,
+
-    MenuItem,
+import { ContextMenuWithData, MenuItem, openContextMenu } from "preact-context-menu";
-    openContextMenu,
-} from "preact-context-menu";
 import { Text } from "preact-i18n";
 
+
+
 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;
@@ -53,6 +51,7 @@ interface ContextMenuData {
 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 }
@@ -140,6 +139,12 @@ export default function ContextMenus() {
                         "_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}`;
@@ -283,11 +288,7 @@ export default function ContextMenus() {
                         window.open(
                             // ! FIXME: do this from revolt.js
                             client
-                                .generateFileURL(data.attachment)
+                                .generateFileURL(data.attachment),
-                                ?.replace(
-                                    "attachments",
-                                    "attachments/download",
-                                ),
                             isFirefox || window.native ? "_blank" : "_self",
                         );
                     }
@@ -505,6 +506,8 @@ export default function ContextMenus() {
                                 <span style={{ color }}>
                                     {locale === "admin" ? (
                                         "Open in Admin Panel"
+                                    ) : locale === "admin_system" ? (
+                                        "Open User in Admin Panel"
                                     ) : (
                                         <Text
                                             id={`app.context_menu.${
@@ -1131,6 +1134,22 @@ export default function ContextMenus() {
                                     },
                                     "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(

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/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,7 +51,7 @@ 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: string[] = [];
 
@@ -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/login/forms/Form.tsx

@@ -202,11 +202,9 @@ export const Form = observer(({ page, callback }: Props) => {
                     />
                 )}
                 {error && (
-                    <Category>
+                    <p style={{ fontSize: "0.8em", color: "var(--error)" }}>
-                        <I18nError error={error}>
+                        <Text id={`error.${error}`} children={error} />
-                            <Text id={`login.error.${page}`} />
+                    </p>
-                        </I18nError>
-                    </Category>
                 )}
                 <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/settings/Settings.tsx

@@ -281,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>

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

@@ -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/server/Categories.tsx

@@ -369,7 +369,9 @@ function ListElement({
                     <KanbanList last={false} key={category.id}>
                         <div className="inner">
                             <Row>
-                                <KanbanListHeader {...provided.dragHandleProps}>
+                                <KanbanListHeader 
+                                    {...provided.dragHandleProps}
+                                    onClick={startEditing}>
                                     {editing !== undefined ? (
                                         <input
                                             value={editing}
@@ -384,7 +386,7 @@ function ListElement({
                                             id={category.id}
                                         />
                                     ) : (
-                                        <span onClick={startEditing}>
+                                        <span>
                                             {category.title}
                                         </span>
                                     )}

src/pages/settings/server/Members.tsx

@@ -103,10 +103,43 @@ export const Members = ({ server }: Props) => {
     const [query, setQuery] = useState("");
 
     useEffect(() => {
-        server
+        function fetch() {
-            .fetchMembers()
+            server
-            .then((data) => data.members)
+                .fetchMembers()
-            .then(setData);
+                .then((data) => data.members)
+                .then(setData);
+        }
+
+        fetch();
+
+        // Members may be invalidated if we stop receiving events
+        // This is not very accurate, this should be tracked within
+        // revolt.js so we know the true validity.
+        let valid = true,
+            invalidationTimer: number;
+
+        function waitToInvalidate() {
+            invalidationTimer = setTimeout(() => {
+                valid = false;
+            }, 15 * 60e3) as never; // 15 minutes
+        }
+
+        function cancelInvalidation() {
+            if (!valid) {
+                fetch();
+                valid = true;
+            }
+
+            clearTimeout(invalidationTimer);
+        }
+
+        addEventListener("blur", waitToInvalidate);
+        addEventListener("focus", cancelInvalidation);
+
+        return () => {
+            removeEventListener("blur", waitToInvalidate);
+            removeEventListener("focus", cancelInvalidation);
+        };
     }, [server, setData]);
 
     const members = useMemo(

tsconfig.json

@@ -14,6 +14,7 @@
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "preserve",
+        "jsxImportSource": "preact",
         "jsxFactory": "h",
         "jsxFragmentFactory": "Fragment",
         "types": ["vite-plugin-pwa/client"],