[chore] Workflow cleanup.

* [feat] Add reaction menu item for mobile clients.

* [fix] Reconnection to the websocket with exponential backoff.

* [chore] Dev flake.

* [hack] Push to my personal gcr.

.envrc

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

.github/workflows/docker.yml

@@ -3,36 +3,38 @@ name: Docker
 on:
     push:
         branches:
-            - "master"
+            - "handmade"
         tags:
             - "*"
-        paths-ignore:
+        # TODO: Bring back once gitea is updated past 1.21
-            - ".github/**"
+        # paths-ignore:
-            - "!.github/workflows/docker.yml"
+        #     - ".github/**"
-            - "!.github/workflows/preview_*.yml"
+        #     - "!.github/workflows/docker.yml"
-            - ".vscode/**"
+        #     - ".vscode/**"
-            - ".gitignore"
+        #     - ".gitignore"
-            - ".gitlab-ci.yml"
+        #     - ".gitlab-ci.yml"
-            - "LICENSE"
+        #     - "LICENSE"
-            - "README"
+        #     - "README"
     pull_request:
         branches:
-            - "master"
+            - "handmade"
-        paths-ignore:
+        # TODO: Bring back once gitea is updated past 1.21
-            - ".github/**"
+        # paths-ignore:
-            - "!.github/workflows/docker.yml"
+        #     - ".github/**"
-            - "!.github/workflows/preview_*.yml"
+        #     - "!.github/workflows/docker.yml"
-            - ".vscode/**"
+        #     - "!.github/workflows/preview_*.yml"
-            - ".gitignore"
+        #     - ".vscode/**"
-            - ".gitlab-ci.yml"
+        #     - ".gitignore"
-            - "LICENSE"
+        #     - ".gitlab-ci.yml"
-            - "README"
+        #     - "LICENSE"
+        #     - "README"
     workflow_dispatch:
 
 jobs:
     publish:
         runs-on: ubuntu-latest
-        if: github.event_name != 'pull_request'
+        # NOTE: Running on pull requests for now, but without pushing.
+        # if: github.event_name != 'pull_request'
         steps:
             - name: Checkout
               uses: actions/checkout@v4
@@ -44,27 +46,23 @@ jobs:
               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@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@v6
               with:
                   context: .
                   push: ${{ github.event_name != 'pull_request' }}
-                  platforms: linux/amd64
+                  platforms: linux/amd64,linux/arm64
                   tags: ${{ steps.meta.outputs.tags }}
+                  annotations: ${{ steps.meta.outputs.annotations }}
                   labels: ${{ steps.meta.outputs.labels }}

.github/workflows/triage_issue.yml

@@ -1,54 +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"){
-                projectV2(number: 3) {
-                  id
-                  fields(first:20) {
-                    nodes {
-                      ... on ProjectV2SingleSelectField {
-                        id
-                        name
-                        options {
-                          id
-                          name
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }' > project_data.json
-
-          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 'TODO_OPTION_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name== "Status") | .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!) {
-              addProjectV2ItemById(input: {projectId: $project, contentId: $issue}) {
-                item {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f issue=$ISSUE_ID --jq '.data.addProjectV2ItemById.item.id')"
-
-          echo 'ITEM_ID='$item_id >> $GITHUB_ENV

.github/workflows/triage_pr.yml

@@ -1,79 +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"){
-                projectV2(number: 5) {
-                  id
-                  fields(first:20) {
-                    nodes {
-                      ... on ProjectV2SingleSelectField {
-                        id
-                        name
-                        options {
-                          id
-                          name
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }' > project_data.json
-
-          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=="🆕 Untriaged") |.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!) {
-              addProjectV2ItemById(input: {projectId: $project, contentId: $pr}) {
-                item {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f pr=$PR_ID --jq '.data.addProjectV2ItemById.item.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: updateProjectV2ItemFieldValue(input: {
-                projectId: $project
-                itemId: $item
-                fieldId: $status_field
-                value: {
-                  singleSelectOptionId: $status_value
-                }
-              }) {
-                projectV2Item {
-                  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,4 +1,5 @@
-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 . .
@@ -10,9 +11,11 @@ RUN yarn build:deps
 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" ]

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==

external/lang

@@ -1 +1 @@
-Subproject commit bb4bfcfd5a22dfc84a1a9f797a43af6804d96b93
+Subproject commit 788261ef41e083ec917ee9bee37bc5b0e4f8d153

external/revolt.js

@@ -1 +1 @@
-Subproject commit cd9e84a337c72709b82bb4eca794ec7474a0ee7e
+Subproject commit a45710f80cd7b4424a2114d2a32cbb83a4d95761

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
+          ];
+        };
+      }
+    );
+}

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
+            {geoBlock.isAgeRestrictedGeo ? (
-                title={<Text id="app.main.channel.nsfw.confirm" />}
+                <div style={{ maxWidth: "420px", textAlign: "center" }}>
-                value={layout.getSectionState(SECTION_NSFW, false)}
+                    {geoBlock.countryCode === "GB"
-                onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}
+                        ? "This channel is not available in your region while we review options on legal compliance."
-            />
+                        : "This content is not available in your region."}
-            <div className="actions">
+                </div>
-                <Button palette="secondary" onClick={() => history.goBack()}>
+            ) : (
-                    <Text id="app.special.modals.actions.back" />
+                <>
-                </Button>
+                    <Checkbox
-                <Button
+                        title={<Text id="app.main.channel.nsfw.confirm" />}
-                    palette="secondary"
+                        value={layout.getSectionState(SECTION_NSFW, false)}
-                    onClick={() =>
+                        onChange={() =>
-                        layout.getSectionState(SECTION_NSFW) && setAgeGate(true)
+                            layout.toggleSectionState(SECTION_NSFW, false)
-                    }>
+                        }
-                    <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
+                    />
-                </Button>
+                    <div className="actions">
-            </div>
+                        <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/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 open_url = url;
-    const download_url = url;
+    const download_url = `${url}/${filename}`;
 
     const filesize = determineFileSize(size);
 

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 != null ? (
-                        {invite.member_count === 1 ? "member" : "members"}
+                            <>
+                                {invite.member_count.toLocaleString()}{" "}
+                                {invite.member_count === 1
+                                    ? "member"
+                                    : "members"}
+                            </>
+                        ) : (
+                            "N/A"
+                        )}
                     </EmbedInviteMemberCount>
                 </EmbedInviteDetails>
                 {processing ? (

src/components/markdown/plugins/emoji.tsx

@@ -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 } =
+    const { server: server_id, channel: channel_id } = useParams<{
-        useParams<{ server: string; channel?: string }>();
+        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(
+            if (category.title === "Default") {
-                <CollapsibleSection
+                elements.push(...channels);
-                    id={`category_${category.id}`}
+            } else {
-                    defaultValue
+                elements.push(
-                    summary={<Category>{category.title}</Category>}>
+                    <CollapsibleSection
-                    {channels}
+                        id={`category_${category.id}`}
-                </CollapsibleSection>,
+                        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/controllers/client/Session.tsx

@@ -28,6 +28,7 @@ type Transition =
               | "SUCCESS"
               | "DISCONNECT"
               | "RETRY"
+              | "RETRY_FAILED"
               | "LOGOUT"
               | "ONLINE"
               | "OFFLINE";
@@ -40,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
@@ -89,9 +91,11 @@ export default class Session {
      * Called when the client signals it has disconnected
      */
     private onDropped() {
-        this.emit({
+        if (this.state === "Connecting") {
-            action: "DISCONNECT",
+            this.emit({ action: "RETRY_FAILED" });
-        });
+        } else {
+            this.emit({ action: "DISCONNECT" });
+        }
     }
 
     /**
@@ -211,6 +215,7 @@ export default class Session {
             // Ready successfully received
             case "SUCCESS": {
                 this.assert("Connecting");
+                this.retryAttempts = 0;
                 this.state = "Online";
                 break;
             }
@@ -239,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/modals/ModalController.tsx

@@ -32,6 +32,7 @@ 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 Error from "./components/Error";
 import ImageViewer from "./components/ImageViewer";
 import KickMember from "./components/KickMember";
@@ -275,6 +276,7 @@ export const modalController = new ModalControllerExtended({
     create_bot: CreateBot,
     custom_status: CustomStatus,
     delete_message: DeleteMessage,
+    react_message: ReactMessage,
     error: Error,
     image_viewer: ImageViewer,
     kick_member: KickMember,

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

@@ -153,6 +153,10 @@ export type Modal = {
           type: "delete_message";
           target: Message;
       }
+    | {
+          type: "react_message",
+          target: Message;
+      }
     | {
           type: "kick_member";
           member: Member;

src/lib/ContextMenus.tsx

@@ -65,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 }
@@ -402,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":
@@ -508,6 +516,8 @@ export default function ContextMenus() {
                                         "Open in Admin Panel"
                                     ) : locale === "admin_system" ? (
                                         "Open User in Admin Panel"
+                                    ) : locale === "react_message" ? (
+                                        "React"
                                     ) : (
                                         <Text
                                             id={`app.context_menu.${
@@ -833,6 +843,16 @@ export default function ContextMenus() {
                             });
                         }
 
+                        if (message.channel?.havePermission("React")) {
+                            generateAction(
+                                {
+                                    action: "react_message",
+                                    target: message,
+                                },
+                                "react_message",
+                            );
+                        }
+
                         if (message.author_id !== userId) {
                             generateAction(
                                 {

src/mobx/stores/Settings.ts

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

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/settings/server/Roles.tsx

@@ -1,4 +1,8 @@
-import { HelpCircle } from "@styled-icons/boxicons-solid";
+import {
+    HelpCircle,
+    ChevronUp,
+    ChevronDown,
+} from "@styled-icons/boxicons-solid";
 import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
 import { Server } from "revolt.js";
@@ -16,17 +20,208 @@ import {
     ColourSwatches,
     InputBox,
     Category,
+    Row,
 } from "@revoltchat/ui";
 
 import Tooltip from "../../../components/common/Tooltip";
 import { PermissionList } from "../../../components/settings/roles/PermissionList";
 import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection";
+import { useSession } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 
 interface Props {
     server: Server;
 }
 
+const RoleReorderContainer = styled.div`
+    margin: 16px 0;
+`;
+
+const RoleItem = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    margin: 12px 0;
+    background: var(--secondary-background);
+    border-radius: var(--border-radius);
+`;
+
+const RoleInfo = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+`;
+
+const RoleName = styled.div`
+    font-weight: 600;
+    color: var(--foreground);
+`;
+
+const RoleRank = styled.div`
+    font-size: 12px;
+    color: var(--secondary-foreground);
+`;
+
+const RoleControls = styled.div`
+    display: flex;
+    gap: 4px;
+`;
+
+const MoveButton = styled(Button)`
+    padding: 4px 8px;
+    min-width: auto;
+`;
+
+/**
+ * Hook to memo-ize role information with proper ordering
+ * @param server Target server
+ * @returns Role array with default at bottom
+ */
+export function useRolesForReorder(server: Server) {
+    return useMemo(() => {
+        const roles = [...server.orderedRoles] as RoleOrDefault[];
+
+        roles.push({
+            id: "default",
+            name: "Default",
+            permissions: server.default_permissions,
+        });
+
+        return roles;
+    }, [server.roles, server.default_permissions]);
+}
+
+/**
+ * Role reordering component
+ */
+const RoleReorderPanel = observer(
+    ({ server, onExit }: Props & { onExit: () => void }) => {
+        const initialRoles = useRolesForReorder(server);
+        const [roles, setRoles] = useState(initialRoles);
+        const [isReordering, setIsReordering] = useState(false);
+
+        // Update local state when server roles change
+        useMemo(() => {
+            setRoles(useRolesForReorder(server));
+        }, [server.roles, server.default_permissions]);
+
+        const moveRoleUp = (index: number) => {
+            if (index === 0 || roles[index].id === "default") return;
+
+            const newRoles = [...roles];
+            [newRoles[index - 1], newRoles[index]] = [
+                newRoles[index],
+                newRoles[index - 1],
+            ];
+            setRoles(newRoles);
+        };
+
+        const moveRoleDown = (index: number) => {
+            // Can't move down if it's the last non-default role or if it's default
+            if (index >= roles.length - 2 || roles[index].id === "default")
+                return;
+
+            const newRoles = [...roles];
+            [newRoles[index], newRoles[index + 1]] = [
+                newRoles[index + 1],
+                newRoles[index],
+            ];
+            setRoles(newRoles);
+        };
+
+        const saveReorder = async () => {
+            setIsReordering(true);
+            try {
+                const nonDefaultRoles = roles.filter(
+                    (role) => role.id !== "default",
+                );
+                const roleIds = nonDefaultRoles.map((role) => role.id);
+
+                const session = useSession()!;
+                const client = session.client!;
+
+                // Make direct API request since it's not in r.js as of writing
+                await client.api.patch(`/servers/${server._id}/roles/ranks`, {
+                    ranks: roleIds,
+                });
+
+                console.log("Roles reordered successfully");
+            } catch (error) {
+                console.error("Failed to reorder roles:", error);
+                setRoles(initialRoles);
+            } finally {
+                setIsReordering(false);
+            }
+        };
+
+        const hasChanges = !isEqual(
+            roles.filter((r) => r.id !== "default").map((r) => r.id),
+            initialRoles.filter((r) => r.id !== "default").map((r) => r.id),
+        );
+
+        return (
+            <div>
+                <SpaceBetween>
+                    <H1>
+                        <Text id="app.settings.permissions.role_ranking" />
+                    </H1>
+                    <Row>
+                        <Button
+                            palette="secondary"
+                            onClick={onExit}
+                            style={{ marginBottom: "16px" }}>
+                            <Text id="app.special.modals.actions.back" />
+                        </Button>
+                        <Button
+                            palette="secondary"
+                            disabled={!hasChanges || isReordering}
+                            onClick={saveReorder}>
+                            <Text id="app.special.modals.actions.save" />
+                        </Button>
+                    </Row>
+                </SpaceBetween>
+
+                <RoleReorderContainer>
+                    {roles.map((role, index) => (
+                        <RoleItem key={role.id}>
+                            <RoleInfo>
+                                <RoleName>{role.name}</RoleName>
+                                <RoleRank>
+                                    {role.id === "default" ? (
+                                        <Text id="app.settings.permissions.default_desc" />
+                                    ) : (
+                                        <>
+                                            <Text id="app.settings.permissions.role_ranking" />{" "}
+                                            {index}
+                                        </>
+                                    )}
+                                </RoleRank>
+                            </RoleInfo>
+
+                            {role.id !== "default" && (
+                                <RoleControls>
+                                    <MoveButton
+                                        palette="secondary"
+                                        disabled={index === 0}
+                                        onClick={() => moveRoleUp(index)}>
+                                        <ChevronUp size={16} />
+                                    </MoveButton>
+                                    <MoveButton
+                                        palette="secondary"
+                                        disabled={index >= roles.length - 2}
+                                        onClick={() => moveRoleDown(index)}>
+                                        <ChevronDown size={16} />
+                                    </MoveButton>
+                                </RoleControls>
+                            )}
+                        </RoleItem>
+                    ))}
+                </RoleReorderContainer>
+            </div>
+        );
+    },
+);
+
 /**
  * Hook to memo-ize role information.
  * @param server Target server
@@ -50,9 +245,11 @@ export function useRoles(server: Server) {
 }
 
 /**
- * Roles settings menu
+ * Updated Roles settings menu with reordering panel
  */
 export const Roles = observer(({ server }: Props) => {
+    const [showReorderPanel, setShowReorderPanel] = useState(false);
+
     // Consolidate all permissions that we can change right now.
     const currentRoles = useRoles(server);
 
@@ -74,213 +271,219 @@ export const Roles = observer(({ server }: Props) => {
         margin: 16px 0;
     `;
 
+    const ReorderButton = styled(Button)`
+        margin-inline: auto 8px;
+    `;
+
+    if (showReorderPanel) {
+        return (
+            <div>
+                <RoleReorderPanel
+                    server={server}
+                    onExit={() => setShowReorderPanel(false)}
+                />
+            </div>
+        );
+    }
+
     return (
-        <PermissionsLayout
+        <div>
-            server={server}
+            <PermissionsLayout
-            rank={server.member?.ranking ?? Infinity}
+                server={server}
-            onCreateRole={(callback) =>
+                rank={server.member?.ranking ?? Infinity}
-                modalController.push({
+                onCreateRole={(callback) =>
-                    type: "create_role",
+                    modalController.push({
-                    server,
+                        type: "create_role",
-                    callback,
+                        server,
-                })
+                        callback,
-            }
+                    })
-            editor={({ selected }) => {
+                }
-                const currentRole = currentRoles.find(
+                editor={({ selected }) => {
-                    (x) => x.id === selected,
+                    const currentRole = currentRoles.find(
-                )!;
+                        (x) => x.id === selected,
+                    )!;
 
-                if (!currentRole) return null;
+                    if (!currentRole) return null;
 
-                // Keep track of whatever role we're editing right now.
+                    const [value, setValue] = useState<Partial<RoleOrDefault>>(
-                const [value, setValue] = useState<Partial<RoleOrDefault>>({});
+                        {},
+                    );
 
-                const currentRoleValue = { ...currentRole, ...value };
+                    const currentRoleValue = { ...currentRole, ...value };
 
-                // Calculate permissions we have access to on this server.
+                    function save() {
-                const current = server.permission;
+                        const { permissions: permsCurrent, ...current } =
+                            currentRole;
+                        const { permissions: permsValue, ...value } =
+                            currentRoleValue;
 
-                // Upload new role information to server.
+                        if (!isEqual(permsCurrent, permsValue)) {
-                function save() {
+                            server.setPermissions(
-                    const { permissions: permsCurrent, ...current } =
+                                selected,
-                        currentRole;
+                                typeof permsValue === "number"
-                    const { permissions: permsValue, ...value } =
+                                    ? permsValue
-                        currentRoleValue;
+                                    : {
+                                          allow: permsValue.a,
+                                          deny: permsValue.d,
+                                      },
+                            );
+                        }
 
-                    if (!isEqual(permsCurrent, permsValue)) {
+                        if (!isEqual(current, value)) {
-                        server.setPermissions(
+                            server.editRole(selected, value);
-                            selected,
+                        }
-                            typeof permsValue === "number"
-                                ? permsValue
-                                : {
-                                      allow: permsValue.a,
-                                      deny: permsValue.d,
-                                  },
-                        );
                     }
 
-                    if (!isEqual(current, value)) {
+                    function deleteRole() {
-                        server.editRole(selected, value);
+                        server.deleteRole(selected);
                     }
-                }
 
-                // Delete the role from this server.
+                    return (
-                function deleteRole() {
+                        <div>
-                    server.deleteRole(selected);
+                            <SpaceBetween>
-                }
+                                <H1>
-
+                                    <Text
-                return (
+                                        id="app.settings.actions.edit"
-                    <div>
+                                        fields={{ name: currentRole.name }}
-                        <SpaceBetween>
+                                    />
-                            <H1>
+                                </H1>
-                                <Text
+                                <ReorderButton
-                                    id="app.settings.actions.edit"
+                                    palette="secondary"
-                                    fields={{ name: currentRole.name }}
+                                    onClick={() => setShowReorderPanel(true)}>
-                                />
+                                    <Text id="app.settings.permissions.role_ranking" />
-                            </H1>
+                                </ReorderButton>
-                            <Button
+                                <Button
-                                palette="secondary"
+                                    palette="secondary"
-                                disabled={isEqual(
+                                    disabled={isEqual(
-                                    currentRole,
+                                        currentRole,
-                                    currentRoleValue,
+                                        currentRoleValue,
-                                )}
+                                    )}
-                                onClick={save}>
+                                    onClick={save}>
-                                <Text id="app.special.modals.actions.save" />
+                                    <Text id="app.special.modals.actions.save" />
-                            </Button>
+                                </Button>
-                        </SpaceBetween>
+                            </SpaceBetween>
-                        <hr />
+                            <hr />
-                        {selected !== "default" && (
+                            {selected !== "default" && (
-                            <>
+                                <>
-                                <section>
+                                    <section>
-                                    <Category>
+                                        <Category>
-                                        <Text id="app.settings.permissions.role_name" />
+                                            <Text id="app.settings.permissions.role_name" />
-                                    </Category>
+                                        </Category>
-                                    <p>
+                                        <p>
-                                        <InputBox
+                                            <InputBox
-                                            value={currentRoleValue.name}
+                                                value={currentRoleValue.name}
-                                            onChange={(e) =>
+                                                onChange={(e) =>
-                                                setValue({
+                                                    setValue({
-                                                    ...value,
+                                                        ...value,
-                                                    name: e.currentTarget.value,
+                                                        name: e.currentTarget
-                                                })
+                                                            .value,
-                                            }
+                                                    })
-                                            palette="secondary"
+                                                }
-                                        />
+                                                palette="secondary"
-                                    </p>
+                                            />
-                                </section>
+                                        </p>
-                                <section>
+                                    </section>
-                                    <Category>{"Role ID"}</Category>
+                                    <section>
-                                    <RoleId>
+                                        <Category>{"Role ID"}</Category>
-                                        <Tooltip
+                                        <RoleId>
-                                            content={
+                                            <Tooltip
-                                                "This is a unique identifier for this role."
+                                                content={
-                                            }>
+                                                    "This is a unique identifier for this role."
-                                            <HelpCircle size={16} />
-                                        </Tooltip>
-                                        <Tooltip
-                                            content={
-                                                <Text id="app.special.copy" />
-                                            }>
-                                            <a
-                                                onClick={() =>
-                                                    modalController.writeText(
-                                                        currentRole.id,
-                                                    )
                                                 }>
-                                                {currentRole.id}
+                                                <HelpCircle size={16} />
-                                            </a>
+                                            </Tooltip>
-                                        </Tooltip>
+                                            <Tooltip
-                                    </RoleId>
+                                                content={
-                                </section>
+                                                    <Text id="app.special.copy" />
-                                <section>
+                                                }>
-                                    <Category>
+                                                <a
-                                        <Text id="app.settings.permissions.role_colour" />
+                                                    onClick={() =>
-                                    </Category>
+                                                        modalController.writeText(
-                                    <p>
+                                                            currentRole.id,
-                                        <ColourSwatches
+                                                        )
-                                            value={
+                                                    }>
-                                                currentRoleValue.colour ??
+                                                    {currentRole.id}
-                                                "gray"
+                                                </a>
-                                            }
+                                            </Tooltip>
-                                            onChange={(colour) =>
+                                        </RoleId>
-                                                setValue({ ...value, colour })
+                                    </section>
-                                            }
+                                    <section>
-                                        />
+                                        <Category>
-                                    </p>
+                                            <Text id="app.settings.permissions.role_colour" />
-                                </section>
+                                        </Category>
-                                <section>
+                                        <p>
-                                    <Category>
+                                            <ColourSwatches
-                                        <Text id="app.settings.permissions.role_options" />
+                                                value={
-                                    </Category>
+                                                    currentRoleValue.colour ??
-                                    <p>
+                                                    "gray"
-                                        <Checkbox
+                                                }
-                                            value={
+                                                onChange={(colour) =>
-                                                currentRoleValue.hoist ?? false
+                                                    setValue({
-                                            }
+                                                        ...value,
-                                            onChange={(hoist) =>
+                                                        colour,
-                                                setValue({ ...value, hoist })
+                                                    })
-                                            }
+                                                }
-                                            title={
+                                            />
-                                                <Text id="app.settings.permissions.hoist_role" />
+                                        </p>
-                                            }
+                                    </section>
-                                            description={
+                                    <section>
-                                                <Text id="app.settings.permissions.hoist_desc" />
+                                        <Category>
-                                            }
+                                            <Text id="app.settings.permissions.role_options" />
-                                        />
+                                        </Category>
-                                    </p>
+                                        <p>
-                                </section>
+                                            <Checkbox
-                                <section>
+                                                value={
-                                    <Category>
+                                                    currentRoleValue.hoist ??
-                                        <Text id="app.settings.permissions.role_ranking" />
+                                                    false
-                                    </Category>
+                                                }
-                                    <p>
+                                                onChange={(hoist) =>
-                                        <InputBox
+                                                    setValue({
-                                            type="number"
+                                                        ...value,
-                                            value={currentRoleValue.rank ?? 0}
+                                                        hoist,
-                                            onChange={(e) =>
+                                                    })
-                                                setValue({
+                                                }
-                                                    ...value,
+                                                title={
-                                                    rank: parseInt(
+                                                    <Text id="app.settings.permissions.hoist_role" />
-                                                        e.currentTarget.value,
+                                                }
-                                                    ),
+                                                description={
-                                                })
+                                                    <Text id="app.settings.permissions.hoist_desc" />
-                                            }
+                                                }
-                                            palette="secondary"
+                                            />
-                                        />
+                                        </p>
-                                    </p>
+                                    </section>
-                                </section>
+                                </>
-                            </>
+                            )}
-                        )}
+                            <h1>
-                        <h1>
+                                <Text id="app.settings.permissions.edit_title" />
-                            <Text id="app.settings.permissions.edit_title" />
+                            </h1>
-                        </h1>
+                            <PermissionList
-                        <PermissionList
+                                value={currentRoleValue.permissions}
-                            value={currentRoleValue.permissions}
+                                onChange={(permissions) =>
-                            onChange={(permissions) =>
+                                    setValue({
-                                setValue({
+                                        ...value,
-                                    ...value,
+                                        permissions,
-                                    permissions,
+                                    } as RoleOrDefault)
-                                } as RoleOrDefault)
+                                }
-                            }
+                                target={server}
-                            target={server}
+                            />
-                        />
+                            {selected !== "default" && (
-                        {selected !== "default" && (
+                                <>
-                            <>
+                                    <hr />
-                                <hr />
+                                    <h1>
-                                <h1>
+                                        <Text id="app.settings.categories.danger_zone" />
-                                    <Text id="app.settings.categories.danger_zone" />
+                                    </h1>
-                                </h1>
+                                    <DeleteRoleButton
-                                <DeleteRoleButton
+                                        palette="error"
-                                    palette="error"
+                                        compact
-                                    compact
+                                        onClick={deleteRole}>
-                                    onClick={deleteRole}>
+                                        <Text id="app.settings.permissions.delete_role" />
-                                    <Text id="app.settings.permissions.delete_role" />
+                                    </DeleteRoleButton>
-                                </DeleteRoleButton>
+                                </>
-                            </>
+                            )}
-                        )}
+                        </div>
-                    </div>
+                    );
-                );
+                }}
-            }}
+            />
-        />
+        </div>
     );
 });