feat(permission): implement new server / channel permission menus

src/components/common/ServerHeader.tsx

@@ -2,14 +2,12 @@ import { Check } from "@styled-icons/boxicons-regular";
 import { Cog } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import { ServerPermission } from "revolt.js/dist/api/permissions";
+import { Permission } from "revolt.js/dist/api/permissions";
 import { Server } from "revolt.js/dist/maps/Servers";
 import styled, { css } from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
-
 import IconButton from "../ui/IconButton";
 
 import Tooltip from "./Tooltip";
@@ -125,7 +123,7 @@ export default observer(({ server }: Props) => {
                     </Tooltip>
                 ) : undefined}
                 <div className="title">{server.name}</div>
-                {(server.permission & ServerPermission.ManageServer) > 0 && (
+                {server.havePermission("ManageServer") && (
                     <Link to={`/server/${server._id}/settings`}>
                         <IconButton>
                             <Cog size={20} />

src/components/common/messaging/MessageBox.tsx

@@ -1,7 +1,7 @@
 import { Send, ShieldX, HappyBeaming, Box } from "@styled-icons/boxicons-solid";
 import Axios, { CancelTokenSource } from "axios";
 import { observer } from "mobx-react-lite";
-import { ChannelPermission } from "revolt.js/dist/api/permissions";
+import { Permission } from "revolt.js/dist/api/permissions";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import styled, { css } from "styled-components/macro";
 import { ulid } from "ulid";
@@ -125,6 +125,7 @@ const FileAction = styled.div`
         display: flex;
         align-items: center;
         justify-content: center;
+    }
 `;
 
 // For sed replacement
@@ -147,7 +148,7 @@ export default observer(({ channel }: Props) => {
 
     const renderer = getRenderer(channel);
 
-    if (!(channel.permission & ChannelPermission.SendMessage)) {
+    if (!(channel.permission & Permission.SendMessage)) {
         return (
             <Base>
                 <Blocked>
@@ -475,7 +476,7 @@ export default observer(({ channel }: Props) => {
                 setReplies={setReplies}
             />
             <Base>
-                {channel.permission & ChannelPermission.UploadFiles ? (
+                {channel.permission & Permission.UploadFiles ? (
                     <FileAction>
                         <FileUploader
                             size={24}

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

@@ -7,7 +7,7 @@ import {
     Notification,
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { ChannelPermission } from "revolt.js";
+import { Permission } from "revolt.js";
 import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
 import styled from "styled-components";
 
@@ -131,8 +131,7 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
             )}
             {isAuthor ||
             (message.channel &&
-                message.channel.permission &
-                    ChannelPermission.ManageMessages) ? (
+                message.channel.permission & Permission.ManageMessages) ? (
                 <Tooltip content="Delete">
                     <Entry
                         onClick={(e) =>