fix: properly align emoji name in autocompletion

.env

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

.github/workflows/triage_issue.yml

@@ -15,27 +15,22 @@ jobs:
           gh api graphql -f query='
             query {
               organization(login: "revoltchat"){
-                projectV2(number: 3) {
+                projectNext(number: 3) {
                   id
                   fields(first:20) {
                     nodes {
-                      ... on ProjectV2SingleSelectField {
+                      id
-                        id
+                      name
-                        name
+                      settings
-                        options {
-                          id
-                          name
-                        }
-                      }
                     }
                   }
                 }
               }
             }' > project_data.json
 
-          echo 'PROJECT_ID='$(jq '.data.organization.projectV2.id' project_data.json) >> $GITHUB_ENV
+          echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
-          echo 'TODO_OPTION_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name== "Status") | .options[] | select(.name=="Todo") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'TODO_OPTION_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Todo") |.id' project_data.json) >> $GITHUB_ENV
 
       - name: Add issue to project
         env:
@@ -44,11 +39,11 @@ jobs:
         run: |
           item_id="$( gh api graphql -f query='
             mutation($project:ID!, $issue:ID!) {
-              addProjectV2ItemById(input: {projectId: $project, contentId: $issue}) {
+              addProjectNextItem(input: {projectId: $project, contentId: $issue}) {
-                item {
+                projectNextItem {
                   id
                 }
               }
-            }' -f project=$PROJECT_ID -f issue=$ISSUE_ID --jq '.data.addProjectV2ItemById.item.id')"
+            }' -f project=$PROJECT_ID -f issue=$ISSUE_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
-
+          
           echo 'ITEM_ID='$item_id >> $GITHUB_ENV

.github/workflows/triage_pr.yml

@@ -15,27 +15,22 @@ jobs:
           gh api graphql -f query='
             query {
               organization(login: "revoltchat"){
-                projectV2(number: 3) {
+                projectNext(number: 3) {
                   id
                   fields(first:20) {
                     nodes {
-                      ... on ProjectV2SingleSelectField {
+                      id
-                        id
+                      name
-                        name
+                      settings
-                        options {
-                          id
-                          name
-                        }
-                      }
                     }
                   }
                 }
               }
             }' > project_data.json
 
-          echo 'PROJECT_ID='$(jq '.data.organization.projectV2.id' project_data.json) >> $GITHUB_ENV
+          echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
+          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
-          echo 'INCOMING_OPTION_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name== "Status") | .options[] | select(.name=="Incoming PRs") |.id' project_data.json) >> $GITHUB_ENV
+          echo 'INCOMING_OPTION_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") |.settings | fromjson.options[] | select(.name=="Incoming PRs") |.id' project_data.json) >> $GITHUB_ENV
 
       - name: Add PR to project
         env:
@@ -44,13 +39,13 @@ jobs:
         run: |
           item_id="$( gh api graphql -f query='
             mutation($project:ID!, $pr:ID!) {
-              addProjectV2ItemById(input: {projectId: $project, contentId: $pr}) {
+              addProjectNextItem(input: {projectId: $project, contentId: $pr}) {
-                item {
+                projectNextItem {
                   id
                 }
               }
-            }' -f project=$PROJECT_ID -f pr=$PR_ID --jq '.data.addProjectV2ItemById.item.id')"
+            }' -f project=$PROJECT_ID -f pr=$PR_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
-
+          
           echo 'ITEM_ID='$item_id >> $GITHUB_ENV
 
       - name: Set fields
@@ -64,16 +59,14 @@ jobs:
               $status_field: ID!
               $status_value: String!
             ) {
-              set_status: updateProjectV2ItemFieldValue(input: {
+              set_status: updateProjectNextItemField(input: {
                 projectId: $project
                 itemId: $item
                 fieldId: $status_field
-                value: {
+                value: $status_value
-                  singleSelectOptionId: $status_value
-                }
               }) {
-                projectV2Item {
+                projectNextItem {
                   id
-                }
+                  }
               }
             }' -f project=$PROJECT_ID -f item=$ITEM_ID -f status_field=$STATUS_FIELD_ID -f status_value=${{ env.INCOMING_OPTION_ID }} --silent

Dockerfile

@@ -5,8 +5,7 @@ COPY . .
 COPY .env.build .env
 
 RUN yarn install --frozen-lockfile
-RUN yarn build:deps
+RUN yarn typecheck
-# RUN yarn typecheck # lol no
 RUN yarn build:highmem
 RUN yarn workspaces focus --production --all
 

package.json

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

scripts/publish.sh

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

src/assets/changelogs.ts

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

src/assets/changelogs.tsx

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

src/assets/emojis.ts

@@ -1941,6 +1941,8 @@ export const emojiDictionary = {
         charle: "custom:charle.gif",
         sadge: "custom:sadge.webp",
         sus: "custom:sus.webp",
+        chade: "custom:chade.gif",
+        gigachad: "custom:gigachad.webp",
         sippy: "custom:sippy.webp",
         ayame_heart: "custom:ayame_heart.png",
         catgirl_peek: "custom:catgirl_peek.png",

src/components/common/AutoComplete.tsx

@@ -64,7 +64,7 @@ export function useAutoComplete(
             const cursor = el.selectionStart;
             const content = el.value.slice(0, cursor);
 
-            const valid = /[\w\-]/;
+            const valid = /\w/;
 
             let j = content.length - 1;
             if (content[j] === "@") {

src/components/common/messaging/Message.tsx

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

src/components/common/messaging/MessageBox.tsx

@@ -23,7 +23,6 @@ import {
 } from "../../../lib/renderer/Singleton";
 
 import { state, useApplicationState } from "../../../mobx/State";
-import { DraftObject } from "../../../mobx/stores/Draft";
 import { Reply } from "../../../mobx/stores/MessageQueue";
 
 import { dayjs } from "../../../context/Locale";
@@ -278,12 +277,7 @@ export default observer(({ channel }: Props) => {
 
     // Push message content to draft.
     const setMessage = useCallback(
-        (content?: string) => {
+        (content?: string) => state.draft.set(channel._id, content),
-            const dobj: DraftObject = {
-                content,
-            };
-            state.draft.set(channel._id, dobj);
-        },
         [state.draft, channel._id],
     );
 
@@ -323,7 +317,7 @@ export default observer(({ channel }: Props) => {
         if (uploadState.type === "uploading" || uploadState.type === "sending")
             return;
 
-        const content = state.draft.get(channel._id)?.content?.trim() ?? "";
+        const content = state.draft.get(channel._id)?.trim() ?? "";
         if (uploadState.type === "attached") return sendFile(content);
         if (content.length === 0) return;
 
@@ -532,7 +526,7 @@ export default observer(({ channel }: Props) => {
     }
 
     function isInCodeBlock(cursor: number): boolean {
-        const content = state.draft.get(channel._id)?.content || "";
+        const content = state.draft.get(channel._id) || "";
         const contentBeforeCursor = content.substring(0, cursor);
 
         let delimiterCount = 0;
@@ -613,12 +607,10 @@ export default observer(({ channel }: Props) => {
                     <HackAlertThisFileWillBeReplaced
                         onSelect={(emoji) => {
                             const v = state.draft.get(channel._id);
-                            const cnt: DraftObject = {
+                            state.draft.set(
-                                content:
+                                channel._id,
-                                    (v?.content ? `${v.content} ` : "") +
+                                `${v ? `${v} ` : ""}:${emoji}:`,
-                                    `:${emoji}:`,
+                            );
-                            };
-                            state.draft.set(channel._id, cnt);
                         }}
                         onClose={closePicker}
                     />
@@ -672,7 +664,7 @@ export default observer(({ channel }: Props) => {
                     id="message"
                     maxLength={2000}
                     onKeyUp={onKeyUp}
-                    value={state.draft.get(channel._id)?.content ?? ""}
+                    value={state.draft.get(channel._id) ?? ""}
                     padding="var(--message-box-padding)"
                     onKeyDown={(e) => {
                         if (e.ctrlKey && e.key === "Enter") {
@@ -744,11 +736,13 @@ export default observer(({ channel }: Props) => {
                     onFocus={onFocus}
                     onBlur={onBlur}
                 />
-                <Action>
+                {state.experiments.isEnabled("picker") && (
-                    <IconButton onClick={() => setPicker(!picker)}>
+                    <Action>
-                        <HappyBeaming size={24} />
+                        <IconButton onClick={() => setPicker(!picker)}>
-                    </IconButton>
+                            <HappyBeaming size={24} />
-                </Action>
+                        </IconButton>
+                    </Action>
+                )}
                 <Action>
                     <IconButton
                         className={

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

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

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

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

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

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

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

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

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

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

src/components/common/user/UserBadges.tsx

@@ -22,11 +22,12 @@ enum Badges {
 const BadgesBase = styled.div`
     gap: 8px;
     display: flex;
+    margin-top: 4px;
     flex-direction: row;
 
     img {
-        width: 24px;
+        width: 32px;
-        height: 24px;
+        height: 32px;
     }
 `;
 
@@ -102,7 +103,7 @@ export default function UserBadges({ badges, uid }: Props) {
                         content={
                             <Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
                         }>
-                        <Shield size={24} color="gray" />
+                        <Shield size={32} color="gray" />
                     </Tooltip>
                 ) : (
                     <></>

src/components/common/user/UserHeader.tsx

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

src/components/common/user/UserIcon.tsx

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

src/components/common/user/UserShort.tsx

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

src/components/markdown/RemarkRenderer.tsx

@@ -1,4 +1,5 @@
 import "katex/dist/katex.min.css";
+import rehypeKatex from "rehype-katex";
 import rehypePrism from "rehype-prism";
 import rehypeReact from "rehype-react";
 import remarkBreaks from "remark-breaks";
@@ -13,9 +14,6 @@ import { createElement } from "preact";
 import { memo } from "preact/compat";
 import { useLayoutEffect, useMemo, useState } from "preact/hooks";
 
-// @ts-expect-error no typings
-import rehypeKatex from "@revoltchat/rehype-katex";
-
 import { MarkdownProps } from "./Markdown";
 import { handlers } from "./hast";
 import { RenderCodeblock } from "./plugins/Codeblock";
@@ -148,7 +146,6 @@ const render = unified()
     .use(rehypeKatex, {
         maxSize: 10,
         maxExpand: 0,
-        maxLength: 512,
         trust: false,
         strict: false,
         output: "html",

src/components/markdown/plugins/anchors.tsx

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

src/components/markdown/plugins/emoji.tsx

@@ -25,7 +25,7 @@ const Emoji = styled.img`
     }
 `;
 
-const RE_EMOJI = /:([a-zA-Z0-9\-_]+):/g;
+const RE_EMOJI = /:([a-zA-Z0-9_+]+):/g;
 const RE_ULID = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/;
 
 export function RenderEmoji({ match }: CustomComponentProps) {

src/components/settings/account/EditAccount.tsx

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

src/controllers/client/ClientController.tsx

@@ -252,7 +252,7 @@ class ClientController {
         // Start client lifecycle
         this.addSession(
             {
-                session: session as never,
+                session,
             },
             "new",
         );

src/controllers/client/Session.tsx

@@ -3,7 +3,6 @@ import { API, Client } from "revolt.js";
 
 import { state } from "../../mobx/State";
 
-import { resetMemberSidebarFetched } from "../../components/navigation/right/MemberSidebar";
 import { modalController } from "../modals/ModalController";
 
 /**
@@ -98,7 +97,6 @@ export default class Session {
      * Called when the client signals it has received the Ready packet
      */
     private onReady() {
-        resetMemberSidebarFetched();
         this.emit({
             action: "SUCCESS",
         });

src/controllers/modals/ModalController.tsx

@@ -18,7 +18,6 @@ import { history } from "../../context/history";
 import AddFriend from "./components/AddFriend";
 import BanMember from "./components/BanMember";
 import Changelog from "./components/Changelog";
-import ChangelogUsernames from "./components/ChangelogUsernames";
 import ChannelInfo from "./components/ChannelInfo";
 import Clipboard from "./components/Clipboard";
 import ConfirmLeave from "./components/ConfirmLeave";
@@ -40,11 +39,8 @@ import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
 import MFARecovery from "./components/MFARecovery";
 import ModifyAccount from "./components/ModifyAccount";
-import ModifyDisplayname from "./components/ModifyDisplayname";
 import OutOfDate from "./components/OutOfDate";
 import PendingFriendRequests from "./components/PendingFriendRequests";
-import ReportContent from "./components/Report";
-import ReportSuccess from "./components/ReportSuccess";
 import ServerIdentity from "./components/ServerIdentity";
 import ServerInfo from "./components/ServerInfo";
 import ShowToken from "./components/ShowToken";
@@ -208,25 +204,12 @@ class ModalControllerExtended extends ModalController<Modal> {
      * Safely open external or internal link
      * @param href Raw URL
      * @param trusted Whether we trust this link
-     * @param mismatch Whether to always open link warning
      * @returns Whether to cancel default event
      */
-    openLink(href?: string, trusted?: boolean, mismatch?: boolean) {
+    openLink(href?: string, trusted?: boolean) {
         const link = determineLink(href);
         const settings = getApplicationState().settings;
 
-        if (mismatch) {
-            if (href) {
-                modalController.push({
-                    type: "link_warning",
-                    link: href,
-                    callback: () => this.openLink(href, true) as true,
-                });
-            }
-
-            return true;
-        }
-
         switch (link.type) {
             case "navigate": {
                 history.push(link.path);
@@ -293,8 +276,4 @@ export const modalController = new ModalControllerExtended({
     sign_out_sessions: SignOutSessions,
     user_picker: UserPicker,
     user_profile: UserProfile,
-    report: ReportContent,
-    report_success: ReportSuccess,
-    modify_displayname: ModifyDisplayname,
-    changelog_usernames: ChangelogUsernames,
 });

src/controllers/modals/ModalRenderer.tsx

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

src/controllers/modals/components/AddFriend.tsx

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

src/controllers/modals/components/Changelog.tsx

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

src/controllers/modals/components/ChangelogUsernames.tsx

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

src/controllers/modals/components/ModifyAccount.tsx

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

src/controllers/modals/components/ModifyDisplayname.tsx

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

src/controllers/modals/components/Report.tsx

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

src/controllers/modals/components/ReportSuccess.tsx

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

src/controllers/modals/components/ServerInfo.tsx

@@ -28,24 +28,16 @@ export default function ServerInfo({
             }
             actions={[
                 {
-                    onClick: () => {
+                    onClick: () =>
                         modalController.push({
                             type: "server_identity",
                             member: server.member!,
-                        });
+                        }),
-                        return true;
-                    },
                     children: "Edit Identity",
                     palette: "primary",
                 },
                 {
-                    onClick: () => {
+                    onClick: () => report(server),
-                        modalController.push({
-                            type: "report",
-                            target: server,
-                        });
-                        return true;
-                    },
                     children: <Text id="app.special.modals.actions.report" />,
                     palette: "error",
                 },

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

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

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

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

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

@@ -163,33 +163,16 @@ export const UserProfile = observer(
                             }
                         />
                         <div className={styles.details}>
-                            <div className={styles.usernameDetail}>
+                            <Localizer>
-                                <span
-                                    className={styles.displayname}
-                                    onClick={() =>
-                                        modalController.writeText(user.username)
-                                    }>
-                                    {user.display_name ?? user.username}
-                                </span>
                                 <span
                                     className={styles.username}
                                     onClick={() =>
-                                        modalController.writeText(
+                                        modalController.writeText(user.username)
-                                            user.username +
-                                                "#" +
-                                                user.discriminator,
-                                        )
                                     }>
-                                    <Localizer>
+                                    {"@"}
-                                        <Tooltip
+                                    {user.username}
-                                            content={
-                                                <Text id="app.special.copy_username" />
-                                            }>
-                                            {user.username}#{user.discriminator}
-                                        </Tooltip>
-                                    </Localizer>
                                 </span>
-                            </div>
+                            </Localizer>
                             {user.status?.text && (
                                 <span className={styles.status}>
                                     <UserStatus user={user} tooltip />
@@ -247,21 +230,6 @@ export const UserProfile = observer(
                             </IconButton>
                         )}
                     </div>
-                    {badges > 0 && (
-                        <div
-                            style={{
-                                marginInline: "1em",
-                                padding: "0.5em",
-                                background: "var(--primary-background)",
-                                borderRadius: "8px",
-                                width: "fit-content",
-                                backgroundColor:
-                                    "rgba(var(--primary-header-rgb), max(var(--min-opacity), 0.65))",
-                                backdropFilter: "blur(20px)",
-                            }}>
-                            <UserBadges badges={badges} uid={user._id} />
-                        </div>
-                    )}
                     <div className={styles.tabs}>
                         <div
                             data-active={tab === "profile"}
@@ -293,7 +261,10 @@ export const UserProfile = observer(
                 </div>
                 <div className={styles.content}>
                     {tab === "profile" &&
-                        (profile?.content || flags > 0 || user.bot ? (
+                        (profile?.content ||
+                        badges > 0 ||
+                        flags > 0 ||
+                        user.bot ? (
                             <div>
                                 {flags & 1 ? (
                                     /** ! FIXME: i18n this area */
@@ -343,6 +314,17 @@ export const UserProfile = observer(
                                         </div>
                                     </>
                                 ) : undefined}
+                                {badges > 0 && (
+                                    <div className={styles.category}>
+                                        <Text id="app.special.popovers.user_profile.sub.badges" />
+                                    </div>
+                                )}
+                                {badges > 0 && (
+                                    <UserBadges
+                                        badges={badges}
+                                        uid={user._id}
+                                    />
+                                )}
                                 {profile?.content && (
                                     <>
                                         <div className={styles.category}>

src/controllers/modals/types.ts

@@ -9,7 +9,6 @@ export type Modal = {
               | "create_group"
               | "create_server"
               | "custom_status"
-              | "modify_displayname"
               | "add_friend";
       }
     | ({
@@ -41,7 +40,6 @@ export type Modal = {
           type: "changelog";
           initial?: number;
       }
-    | { type: "changelog_usernames" }
     | {
           type: "sign_out_sessions";
           client: Client;
@@ -181,15 +179,6 @@ export type Modal = {
     | {
           type: "import_theme";
       }
-    | {
-          type: "report";
-          target: Server | User | Message;
-          messageId?: string;
-      }
-    | {
-          type: "report_success";
-          user?: User;
-      }
 );
 
 export type ModalProps<T extends Modal["type"]> = Modal & { type: T } & {

src/lib/ContextMenus.tsx

@@ -20,7 +20,7 @@ import {
 } from "preact-context-menu";
 import { Text } from "preact-i18n";
 
-import { Column, IconButton, LineDivider } from "@revoltchat/ui";
+import { IconButton, LineDivider } from "@revoltchat/ui";
 
 import { useApplicationState } from "../mobx/State";
 import { QueuedMessage } from "../mobx/stores/MessageQueue";
@@ -47,12 +47,10 @@ interface ContextMenuData {
     unread?: boolean;
     queued?: QueuedMessage;
     contextualChannel?: string;
-    contextualMessage?: string;
 }
 
 type Action =
     | { action: "copy_id"; id: string }
-    | { action: "admin"; id: string; type: "channel" | "message" | "user" }
     | { action: "copy_message_link"; message: Message }
     | { action: "copy_selection" }
     | { action: "copy_text"; content: string }
@@ -113,8 +111,7 @@ type Action =
           action: "set_notification_state";
           key: string;
           state?: NotificationState;
-      }
+      };
-    | { action: "report"; target: User | Server | Message; messageId?: string };
 
 // ! FIXME: I dare someone to re-write this
 // Tip: This should just be split into separate context menus per logical area.
@@ -134,12 +131,6 @@ export default function ContextMenus() {
                 case "copy_id":
                     modalController.writeText(data.id);
                     break;
-                case "admin":
-                    window.open(
-                        `https://admin.revolt.chat/panel/inspect/${data.type}/${data.id}`,
-                        "_blank",
-                    );
-                    break;
                 case "copy_message_link":
                     {
                         let pathname = `/channel/${data.message.channel_id}/${data.message._id}`;
@@ -458,13 +449,6 @@ export default function ContextMenus() {
                 case "open_server_settings":
                     history.push(`/server/${data.id}/settings`);
                     break;
-                case "report":
-                    modalController.push({
-                        type: "report",
-                        target: data.target,
-                        messageId: data.messageId,
-                    });
-                    break;
             }
         })().catch((err) => {
             modalController.push({
@@ -487,7 +471,6 @@ export default function ContextMenus() {
                     queued,
                     unread,
                     contextualChannel: cxid,
-                    contextualMessage,
                 }: ContextMenuData) => {
                     const elements: Children[] = [];
                     let lastDivider = false;
@@ -503,15 +486,11 @@ export default function ContextMenus() {
                         elements.push(
                             <MenuItem data={action} disabled={disabled}>
                                 <span style={{ color }}>
-                                    {locale === "admin" ? (
+                                    <Text
-                                        "Open in Admin Panel"
+                                        id={`app.context_menu.${
-                                    ) : (
+                                            locale ?? action.action
-                                        <Text
+                                        }`}
-                                            id={`app.context_menu.${
+                                    />
-                                                locale ?? action.action
-                                            }`}
-                                        />
-                                    )}
                                 </span>
                                 {tip && <div className="tip">{tip}</div>}
                             </MenuItem>,
@@ -690,20 +669,6 @@ export default function ContextMenus() {
                                 } as unknown as Action);
                             }
                         }
-
-                        if (user._id !== userId) {
-                            generateAction(
-                                {
-                                    action: "report",
-                                    target: user,
-                                    messageId: contextualMessage,
-                                },
-                                "report_user",
-                                undefined,
-                                undefined,
-                                "var(--error)",
-                            );
-                        }
                     }
 
                     if (contextualChannel) {
@@ -830,33 +795,14 @@ export default function ContextMenus() {
                             });
                         }
 
-                        if (message.author_id !== userId) {
-                            generateAction(
-                                {
-                                    action: "report",
-                                    target: message,
-                                },
-                                "report_message",
-                                undefined,
-                                undefined,
-                                "var(--error)",
-                            );
-                        }
-
                         if (
                             message.author_id === userId ||
                             channelPermissions & Permission.ManageMessages
                         ) {
-                            generateAction(
+                            generateAction({
-                                {
+                                action: "delete_message",
-                                    action: "delete_message",
+                                target: message,
-                                    target: message,
+                            });
-                                },
-                                undefined,
-                                undefined,
-                                undefined,
-                                "var(--error)",
-                            );
                         }
 
                         if (
@@ -1089,17 +1035,6 @@ export default function ContextMenus() {
                                     "var(--error)",
                                 );
                             } else {
-                                generateAction(
-                                    {
-                                        action: "report",
-                                        target: server,
-                                    },
-                                    "report_server",
-                                    undefined,
-                                    undefined,
-                                    "var(--error)",
-                                );
-
                                 generateAction(
                                     { action: "leave_server", target: server },
                                     "leave_server",
@@ -1118,21 +1053,6 @@ export default function ContextMenus() {
                         }
 
                         if (!hideIDButton) {
-                            if (state.experiments.isEnabled("admin_beta")) {
-                                generateAction(
-                                    {
-                                        action: "admin",
-                                        id,
-                                        type: cid
-                                            ? "channel"
-                                            : message
-                                            ? "message"
-                                            : "user",
-                                    },
-                                    "admin",
-                                );
-                            }
-
                             generateAction(
                                 { action: "copy_id", id },
                                 cid
@@ -1168,21 +1088,7 @@ export default function ContextMenus() {
                                             content={
                                                 <Text id="app.special.copy_username" />
                                             }>
-                                            <Column gap="0">
+                                            @{user.username}
-                                                <span>
-                                                    {user.display_name ??
-                                                        user.username}
-                                                </span>
-                                                <span
-                                                    style={{
-                                                        fontSize: "0.8em",
-                                                    }}>
-                                                    {user.username}
-                                                    {"#"}
-                                                    {user.discriminator ??
-                                                        "0000"}
-                                                </span>
-                                            </Column>
                                         </Tooltip>
                                     </div>
                                     <div

src/lib/links.ts

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

src/mobx/stores/Changelog.ts

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

src/mobx/stores/Draft.ts

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

src/mobx/stores/Experiments.ts

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

src/pages/RevoltApp.tsx

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

src/pages/channels/voice/VoiceHeader.tsx

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

src/pages/friends/Friend.tsx

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

src/pages/home/Home.tsx

@@ -53,7 +53,7 @@ export default observer(() => {
     const isDecember = !isTouchscreenDevice && new Date().getMonth() === 11;
     const isOctober = !isTouchscreenDevice && new Date().getMonth() === 9
     const snowflakes = useMemo(() => {
-        const flakes: string[] = [];
+        const flakes = [];
 
         if (isDecember) {
             for (let i = 0; i < 15; i++) {

src/pages/login/Login.tsx

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

src/pages/login/forms/MailProvider.tsx

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

src/pages/settings/ServerSettings.tsx

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

src/pages/settings/Settings.tsx

@@ -80,15 +80,10 @@ const AccountHeader = styled.div`
             font-size: 12px;
             gap: 2px;
 
-            .new {
+            > span {
                 font-size: 20px;
                 font-weight: 600;
             }
-
-            .full {
-                font-size: 14px;
-                font-weight: 600;
-            }
         }
     }
 
@@ -341,15 +336,7 @@ export default observer(() => {
                             onClick={() => openContextMenu("Status")}
                         />
                         <div className="details">
-                            <span className="new">
+                            <Username user={client.user!} prefixAt />
-                                {client.user.display_name ??
-                                    client.user.username}
-                            </span>
-                            <span className="full">
-                                {client.user.username}
-                                {"#"}
-                                {client.user.discriminator}
-                            </span>
                             <UserStatus user={client.user!} />
                         </div>
                     </div>

src/pages/settings/panes/Audio.tsx

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

src/pages/settings/panes/Feedback.tsx

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

src/pages/settings/panes/Native.tsx

@@ -66,7 +66,7 @@ export function Native() {
                 title="Enable Discord status"
                 description="Rep Revolt on your Discord status."
             />
-            {/* <Checkbox
+            <Checkbox
                 value={config.build === "nightly"}
                 onChange={(nightly) => {
                     const build = nightly ? "nightly" : "stable";
@@ -79,7 +79,7 @@ export function Native() {
                 }}
                 title="Revolt Nightly"
                 description="Use the beta branch of Revolt."
-            /> */}
+            />
 
             <h3>Titlebar</h3>
             <Checkbox

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

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

src/pages/settings/panes/Profile.tsx

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

src/pages/settings/panes/Sessions.tsx

@@ -38,9 +38,7 @@ dayjs.extend(relativeTime);
 export function Sessions() {
     const client = useClient();
     const deviceId =
-        typeof client.session === "object"
+        typeof client.session === "object" ? client.session._id : undefined;
-            ? (client.session as unknown as { _id: string })._id
-            : undefined;
 
     const [sessions, setSessions] = useState<API.SessionInfo[] | undefined>(
         undefined,

src/pages/settings/server/Categories.tsx

@@ -340,13 +340,11 @@ function ListElement({
 
     const save = useCallback(() => {
         setEditing(undefined);
-        if (editing !== "") {
+        setTitle!(editing!);
-            setTitle!(editing!);
-        }
     }, [editing, setTitle]);
 
     useEffect(() => {
-        if (editing === undefined) return;
+        if (!editing) return;
 
         function onClick(ev: MouseEvent) {
             if ((ev.target as HTMLElement)?.id !== category.id) {
@@ -370,7 +368,7 @@ function ListElement({
                         <div className="inner">
                             <Row>
                                 <KanbanListHeader {...provided.dragHandleProps}>
-                                    {editing !== undefined ? (
+                                    {editing ? (
                                         <input
                                             value={editing}
                                             onChange={(e) =>

src/pages/settings/server/Emojis.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
-import { Button, Column, Row, Stacked, Tip } from "@revoltchat/ui";
+import { Button, Column, Row, Stacked } from "@revoltchat/ui";
 
 import UserShort from "../../../components/common/user/UserShort";
 import { EmojiUploader } from "../../../components/settings/customisation/EmojiUploader";
@@ -33,22 +33,6 @@ export const Emojis = observer(({ server }: Props) => {
 
     return (
         <Column>
-            <Tip palette="warning">
-                <span>
-                    This UI was never finished and will be polished in the{" "}
-                    <a
-                        style={{ color: "inherit", fontWeight: "600" }}
-                        href="https://github.com/revoltchat/frontend/issues/14"
-                        target="_blank"
-                        rel="noreferrer">
-                        new client
-                    </a>
-                    .<br />
-                    <br />
-                    Also please note that emoji names must be lowercase
-                    alphanumeric!
-                </span>
-            </Tip>
             {server.havePermission("ManageCustomisation") && (
                 <EmojiUploader server={server} />
             )}

src/pages/settings/server/Roles.tsx

@@ -70,10 +70,6 @@ export const Roles = observer(({ server }: Props) => {
         }
     `;
 
-    const DeleteRoleButton = styled(Button)`
-        margin: 16px 0;
-    `;
-
     return (
         <PermissionsLayout
             server={server}
@@ -270,12 +266,12 @@ export const Roles = observer(({ server }: Props) => {
                                 <h1>
                                     <Text id="app.settings.categories.danger_zone" />
                                 </h1>
-                                <DeleteRoleButton
+                                <Button
                                     palette="error"
                                     compact
                                     onClick={deleteRole}>
                                     <Text id="app.settings.permissions.delete_role" />
-                                </DeleteRoleButton>
+                                </Button>
                             </>
                         )}
                     </div>

src/updateWorker.ts

@@ -78,7 +78,7 @@ export function useSystemAlert() {
  */
 async function checkVersion() {
     const { version, poll_rate, alert } = (await fetch(
-        "https://health.revolt.chat/api/health",
+        "https://api.revolt.chat/release",
     ).then((res) => res.json())) as {
         version: string;
         poll_rate?: number;
@@ -111,10 +111,7 @@ async function checkVersion() {
     }
 }
 
-if (
+if (import.meta.env.VITE_API_URL === "https://api.revolt.chat") {
-    import.meta.env.VITE_API_URL === "https://api.revolt.chat" ||
-    import.meta.env.VITE_API_URL === "https://app.revolt.chat/api"
-) {
     // Check for critical updates hourly
     schedule();
     checkVersion();

yarn.lock

@@ -2299,20 +2299,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@revoltchat/rehype-katex@npm:6.0.3-patch.1":
-  version: 6.0.3-patch.1
-  resolution: "@revoltchat/rehype-katex@npm:6.0.3-patch.1"
-  dependencies:
-    "@types/hast": ^2.0.0
-    "@types/katex": ^0.14.0
-    hast-util-from-html-isomorphic: ^1.0.0
-    hast-util-to-text: ^3.1.0
-    katex: ^0.16.7
-    unist-util-visit: ^4.0.0
-  checksum: 1b7e57ddafa300e96396a5f5d64dad947c201b514562b1d581ac1a683252bc074fcb620fb271c136dd8b84c069dad23cd98ef0b01585be426bb2ce3f5dde004f
-  languageName: node
-  linkType: hard
-
 "@revoltchat/ui@portal:external/components::locator=client%40workspace%3A.":
   version: 0.0.0-use.local
   resolution: "@revoltchat/ui@portal:external/components::locator=client%40workspace%3A."
@@ -2641,13 +2627,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/katex@npm:^0.14.0":
-  version: 0.14.0
-  resolution: "@types/katex@npm:0.14.0"
-  checksum: 330e0d0337ba48c87f5b793965fbad673653789bf6e50dfe8d726a7b0cbefd37195055e31503aae629814aa79447e4f23a4b87ad1ac565c0d9a9d9978836f39b
-  languageName: node
-  linkType: hard
-
 "@types/lodash.defaultsdeep@npm:^4.6.6":
   version: 4.6.6
   resolution: "@types/lodash.defaultsdeep@npm:4.6.6"
@@ -3709,7 +3688,6 @@ __metadata:
     "@hcaptcha/react-hcaptcha": ^1.4.4
     "@insertish/vite-plugin-babel-macros": ^1.0.5
     "@preact/preset-vite": ^2.0.0
-    "@revoltchat/rehype-katex": 6.0.3-patch.1
     "@revoltchat/ui": ^1.0.77
     "@rollup/plugin-replace": ^2.4.2
     "@styled-icons/boxicons-logos": ^10.38.0
@@ -3754,7 +3732,6 @@ __metadata:
     lodash.defaultsdeep: ^4.6.1
     lodash.isequal: ^4.5.0
     long: ^5.2.0
-    lottie-react: ^2.4.0
     mdast-util-to-hast: ^12.1.2
     mediasoup-client: "npm:@insertish/mediasoup-client@3.6.36-esnext"
     mobx: ^6.6.0
@@ -3773,6 +3750,7 @@ __metadata:
     react-router-dom: ^5.2.0
     react-scroll: ^1.8.2
     react-virtuoso: ^2.12.0
+    rehype-katex: ^6.0.2
     rehype-prism: ^2.1.3
     rehype-react: ^7.1.1
     remark-breaks: ^3.0.2
@@ -3897,7 +3875,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^8.0.0, commander@npm:^8.3.0":
+"commander@npm:^8.0.0":
   version: 8.3.0
   resolution: "commander@npm:8.3.0"
   checksum: 0f82321821fc27b83bd409510bb9deeebcfa799ff0bf5d102128b500b7af22872c0c92cb6a0ebc5a4cf19c6b550fba9cedfa7329d18c6442a625f851377bacf0
@@ -4254,13 +4232,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^4.4.0":
-  version: 4.5.0
-  resolution: "entities@npm:4.5.0"
-  checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7
-  languageName: node
-  linkType: hard
-
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -5353,41 +5324,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-from-dom@npm:^4.0.0":
-  version: 4.2.0
-  resolution: "hast-util-from-dom@npm:4.2.0"
-  dependencies:
-    hastscript: ^7.0.0
-    web-namespaces: ^2.0.0
-  checksum: 0eac72cfb2bad20cf70ad978332be8c746dba27576fea3c3b123d7d1a52a8e10a88a25622b60f45255994163845e3f784fcd7c013b1301f2df4b81e3d0b1b973
-  languageName: node
-  linkType: hard
-
-"hast-util-from-html-isomorphic@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "hast-util-from-html-isomorphic@npm:1.0.0"
-  dependencies:
-    "@types/hast": ^2.0.0
-    hast-util-from-dom: ^4.0.0
-    hast-util-from-html: ^1.0.0
-    unist-util-remove-position: ^4.0.0
-  checksum: a72786d6757a1a38d76cf74ba86fecfaf0690d465dcae477bfa7199ec03d364ba964f658331406ee7e62e912186df6d4ff38fc3ad050e0e3d8bc33a653df060d
-  languageName: node
-  linkType: hard
-
-"hast-util-from-html@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "hast-util-from-html@npm:1.0.2"
-  dependencies:
-    "@types/hast": ^2.0.0
-    hast-util-from-parse5: ^7.0.0
-    parse5: ^7.0.0
-    vfile: ^5.0.0
-    vfile-message: ^3.0.0
-  checksum: 81cbda7dfa4c02fcb4e4359a48e25ebee7bef133dc607c2c036c53df27efacdfa22313a86398391ef22b31decda98c7110f1b441c5a48f419514be6b5d4b5603
-  languageName: node
-  linkType: hard
-
 "hast-util-from-parse5@npm:^7.0.0":
   version: 7.1.0
   resolution: "hast-util-from-parse5@npm:7.1.0"
@@ -5405,12 +5341,12 @@ __metadata:
   linkType: hard
 
 "hast-util-is-element@npm:^2.0.0":
-  version: 2.1.3
+  version: 2.1.2
-  resolution: "hast-util-is-element@npm:2.1.3"
+  resolution: "hast-util-is-element@npm:2.1.2"
   dependencies:
     "@types/hast": ^2.0.0
     "@types/unist": ^2.0.0
-  checksum: 9d988f6839a50566a895a3dd19222e6ab1591243f6a3c36bba835b7e9339a2845f1ff1c583425afd602de1a57a76c5bae8a6dc0ab1d6e5d1e252b422cdeadbb7
+  checksum: c5fe9f7cde3775d4cbe19a9a55631a80b7a4ea0131fc2e3d097ebe228a35f09b9219f64b788b7a9cf819e6dcb6d1fc7830fd2f10ad536649e436e8c83da41e00
   languageName: node
   linkType: hard
 
@@ -5424,14 +5360,13 @@ __metadata:
   linkType: hard
 
 "hast-util-to-text@npm:^3.1.0":
-  version: 3.1.2
+  version: 3.1.1
-  resolution: "hast-util-to-text@npm:3.1.2"
+  resolution: "hast-util-to-text@npm:3.1.1"
   dependencies:
     "@types/hast": ^2.0.0
-    "@types/unist": ^2.0.0
     hast-util-is-element: ^2.0.0
     unist-util-find-after: ^4.0.0
-  checksum: d17cf3344c1d584ddd811cbb78d25b6c9819e62c8edb9643b53be38083fd978a6fa9a5bf6e6cd7b5ea48d30d9edc2859acae40b8bb89e166bebcda6017d4703d
+  checksum: 2312a818c8ec7b02307b04175357e5a7a9918f48624d05366668ba60918734ca62b0ee21006a2a448e0e5a198654cd1fa4ba8c813702b465cb487e2320db523a
   languageName: node
   linkType: hard
 
@@ -6069,14 +6004,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"katex@npm:^0.16.7":
+"katex@npm:^0.15.0":
-  version: 0.16.7
+  version: 0.15.6
-  resolution: "katex@npm:0.16.7"
+  resolution: "katex@npm:0.15.6"
   dependencies:
-    commander: ^8.3.0
+    commander: ^8.0.0
   bin:
     katex: cli.js
-  checksum: 6c3f61e28820ecba074a149d17be6d731d8a950cdd7826851e16f2b0f3627c4119acd8c6e4fb86950063c4e99a6e478720ea6cca3dc82e59bbca81001ee00b70
+  checksum: 2da808bbd1d3be27715006cd86767dd3fcce3e317fb3bbd64d407328d2d90de17b5d83062b2cfd0e0d0de32e340efbac214862bc96892a5d1492462e553728d4
   languageName: node
   linkType: hard
 
@@ -6270,25 +6205,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lottie-react@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "lottie-react@npm:2.4.0"
-  dependencies:
-    lottie-web: ^5.10.2
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: e9ea4a89be90a29bde4a83956f76a80d1f8031882f18ea38ef5271d2aafd8e68348ae6297f185ed85b149ca4896fe33aee7faf9780b88a1b289b8e146f477448
-  languageName: node
-  linkType: hard
-
-"lottie-web@npm:^5.10.2":
-  version: 5.12.0
-  resolution: "lottie-web@npm:5.12.0"
-  checksum: 77c35be880e484d1a766f21f789ede7c7be59e957579580a18c2dfec08c4812c03e1d652e453166c31fd80556446d6b857fb490d901e34154105532519bc5ef5
-  languageName: node
-  linkType: hard
-
 "lru-cache@npm:^6.0.0":
   version: 6.0.0
   resolution: "lru-cache@npm:6.0.0"
@@ -7352,15 +7268,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:^7.0.0":
-  version: 7.1.2
-  resolution: "parse5@npm:7.1.2"
-  dependencies:
-    entities: ^4.4.0
-  checksum: 59465dd05eb4c5ec87b76173d1c596e152a10e290b7abcda1aecf0f33be49646ea74840c69af975d7887543ea45564801736356c568d6b5e71792fd0f4055713
-  languageName: node
-  linkType: hard
-
 "path-exists@npm:^4.0.0":
   version: 4.0.0
   resolution: "path-exists@npm:4.0.0"
@@ -7887,7 +7794,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rehype-parse@npm:^7 || ^ 8":
+"rehype-katex@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "rehype-katex@npm:6.0.2"
+  dependencies:
+    "@types/hast": ^2.0.0
+    "@types/katex": ^0.11.0
+    hast-util-to-text: ^3.1.0
+    katex: ^0.15.0
+    rehype-parse: ^8.0.0
+    unified: ^10.0.0
+    unist-util-remove-position: ^4.0.0
+    unist-util-visit: ^4.0.0
+  checksum: ac8b3486441697b8e22cb7ebf6ec58e06d190240f45b128fe60422b9eb887599f38406581e6e3356af967eb1d45d631b0c09387f060190641f402f56c78fa771
+  languageName: node
+  linkType: hard
+
+"rehype-parse@npm:^7 || ^ 8, rehype-parse@npm:^8.0.0":
   version: 8.0.4
   resolution: "rehype-parse@npm:8.0.4"
   dependencies:
@@ -8093,14 +8016,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"revolt-api@npm:0.6.0":
+"revolt-api@npm:0.5.5-4":
-  version: 0.6.0
+  version: 0.5.5-4
-  resolution: "revolt-api@npm:0.6.0"
+  resolution: "revolt-api@npm:0.5.5-4"
   dependencies:
     "@insertish/oapi": 0.1.18
     axios: ^0.26.1
     lodash.defaultsdeep: ^4.6.1
-  checksum: 94865aa1aee5b05682ffe4e40a0fe431809f879437399943fc429d078160a5fe24686011b43639d6fae88e9a7a43fbe4bb9beb9bbe1bb3070965636f0ec051fd
+  checksum: dfb374d58f1b8b5a6de2e7fa05e386b3df3ffb85a450a6894f23c6b9760af8bff0d198d8352063c33084f0dbc6ff84a234300efb0c62c7b27f709887402787f1
   languageName: node
   linkType: hard
 
@@ -8117,7 +8040,7 @@ __metadata:
     lodash.isequal: ^4.5.0
     long: ^5.2.0
     mobx: ^6.3.2
-    revolt-api: 0.6.0
+    revolt-api: 0.5.5-4
     ulid: ^2.3.0
     ws: ^8.2.2
   languageName: node
@@ -9197,12 +9120,12 @@ __metadata:
   linkType: hard
 
 "unist-util-find-after@npm:^4.0.0":
-  version: 4.0.1
+  version: 4.0.0
-  resolution: "unist-util-find-after@npm:4.0.1"
+  resolution: "unist-util-find-after@npm:4.0.0"
   dependencies:
     "@types/unist": ^2.0.0
     unist-util-is: ^5.0.0
-  checksum: bed7e7a1a87539bea0b33ddc9ce8e2f3fdd4a7c87e143a848ed5bbb4cf9c563ade7ecf80b3ee5a38f9ad9e6af29cdb8cdde9001eea92542cbb14784f5add7019
+  checksum: 8381ef0bad18a0b1fa1c7ee47f94a2578ab6bf572eb126a1f179526b9dca47584fc070976f2d83bbe381161fa33b9164a894d0279a30ec83e65433356d43df57
   languageName: node
   linkType: hard
 
@@ -9237,12 +9160,12 @@ __metadata:
   linkType: hard
 
 "unist-util-remove-position@npm:^4.0.0":
-  version: 4.0.2
+  version: 4.0.1
-  resolution: "unist-util-remove-position@npm:4.0.2"
+  resolution: "unist-util-remove-position@npm:4.0.1"
   dependencies:
     "@types/unist": ^2.0.0
     unist-util-visit: ^4.0.0
-  checksum: 989831da913d09a82a99ed9b47b78471b6409bde95942cde47e09da54b7736516f17e3c7e026af468684c1efcec5fb52df363381b2f9dc7fd96ce791c5a2fa4a
+  checksum: 7d2808662ac65f2b2f615822b78060419f738fb3b074b10cec77c596ea966b8f5c47553d2d322822a5975c49d2b21cdd64c198ae9fb02a9d54d1afa6342cdd6a
   languageName: node
   linkType: hard