merge: branch 'quark/permissions'

src/components/navigation/items/ButtonItem.tsx

@@ -1,9 +1,7 @@
 import { X } from "@styled-icons/boxicons-regular";
 import { Crown } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { Presence } from "revolt-api/types/Users";
-import { Channel } from "revolt.js/dist/maps/Channels";
-import { User } from "revolt.js/dist/maps/Users";
+import { User, Channel } from "revolt.js";
 
 import styles from "./Item.module.scss";
 import classNames from "classnames";
@@ -65,7 +63,7 @@ export const UserButton = observer((props: UserProps) => {
             data-alert={typeof alert === "string"}
             data-online={
                 typeof channel !== "undefined" ||
-                (user.online && user.status?.presence !== Presence.Invisible)
+                (user.online && user.status?.presence !== "Invisible")
             }
             {...useTriggerEvents("Menu", {
                 user: user._id,

src/components/navigation/items/ConnectionStatus.tsx

@@ -4,12 +4,14 @@ import { useContext } from "preact/hooks";
 import {
     ClientStatus,
     StatusContext,
+    useClient,
 } from "../../../context/revoltjs/RevoltClient";
 
 import Banner from "../../ui/Banner";
 
 export default function ConnectionStatus() {
     const status = useContext(StatusContext);
+    const client = useClient();
 
     if (status === ClientStatus.OFFLINE) {
         return (
@@ -20,7 +22,10 @@ export default function ConnectionStatus() {
     } else if (status === ClientStatus.DISCONNECTED) {
         return (
             <Banner>
-                <Text id="app.special.status.disconnected" />
+                <Text id="app.special.status.disconnected" /> <br />
+                <a onClick={() => client.websocket.connect()}>
+                    <Text id="app.special.status.reconnect" />
+                </a>
             </Banner>
         );
     } else if (status === ClientStatus.CONNECTING) {