feat: new permissions menus

closes #322

.gitignore

@@ -7,6 +7,9 @@ dist-ssr
 *.log
 /.idea
 
+.yarn/cache
+.yarn/install-state.gz
+
 public/assets
 public/assets_*
 !public/assets_default

.yarnrc.yml

@@ -0,0 +1,9 @@
+nodeLinker: node-modules
+
+plugins:
+    - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+      spec: "@yarnpkg/plugin-interactive-tools"
+    - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+      spec: "@yarnpkg/plugin-typescript"
+
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

package.json

@@ -61,7 +61,6 @@
     "dependencies": {
         "@fontsource/bitter": "^4.5.0",
         "@insertish/vite-plugin-babel-macros": "^1.0.5",
-        "color-rgba": "^2.3.0",
         "fs-extra": "^10.0.0",
         "klaw": "^3.0.0",
         "react-beautiful-dnd": "^13.1.0",
@@ -90,16 +89,16 @@
         "@fontsource/ubuntu-mono": "^4.4.5",
         "@hcaptcha/react-hcaptcha": "^0.3.6",
         "@preact/preset-vite": "^2.0.0",
+        "@revoltchat/ui": "1.0.27",
         "@rollup/plugin-replace": "^2.4.2",
-        "@styled-icons/boxicons-logos": "^10.34.0",
-        "@styled-icons/boxicons-regular": "^10.34.0",
-        "@styled-icons/boxicons-solid": "^10.37.0",
+        "@styled-icons/boxicons-logos": "^10.38.0",
+        "@styled-icons/boxicons-regular": "^10.38.0",
+        "@styled-icons/boxicons-solid": "^10.38.0",
         "@styled-icons/simple-icons": "^10.33.0",
         "@tippyjs/react": "^4.2.5",
         "@traptitech/markdown-it-katex": "^3.4.3",
         "@traptitech/markdown-it-spoiler": "^1.1.6",
         "@trivago/prettier-plugin-sort-imports": "^2.0.2",
-        "@types/color-rgba": "^2.1.0",
         "@types/lodash.defaultsdeep": "^4.6.6",
         "@types/lodash.isequal": "^4.5.5",
         "@types/markdown-it": "^12.0.2",
@@ -116,6 +115,7 @@
         "@typescript-eslint/eslint-plugin": "^4.27.0",
         "@typescript-eslint/parser": "^4.27.0",
         "classnames": "^2.3.1",
+        "color-rgba": "^2.4.0",
         "dayjs": "^1.10.6",
         "detect-browser": "^5.2.0",
         "eslint": "^7.28.0",
@@ -133,7 +133,7 @@
         "markdown-it-sup": "^1.0.0",
         "mediasoup-client": "npm:@insertish/[email protected]",
         "mobx": "^6.3.2",
-        "mobx-react-lite": "^3.2.0",
+        "mobx-react-lite": "^3.3.0",
         "preact": "^10.5.14",
         "preact-context-menu": "^0.2.1",
         "preact-i18n": "^2.4.0-preactx",
@@ -147,7 +147,7 @@
         "react-scroll": "^1.8.2",
         "react-virtualized-auto-sizer": "^1.0.5",
         "react-virtuoso": "^1.10.4",
-        "revolt.js": "6.0.0-rc.13",
+        "revolt.js": "6.0.0-rc.15",
         "rimraf": "^3.0.2",
         "sass": "^1.35.1",
         "shade-blend-color": "^1.0.0",
@@ -163,5 +163,6 @@
     "main": "index.js",
     "repository": "https://github.com/revoltchat/revite.git",
     "author": "Paul <[email protected]>",
-    "license": "MIT"
+    "license": "MIT",
+    "packageManager": "[email protected]"
 }

src/components/common/IconBase.tsx

@@ -1,5 +1,5 @@
 import { API } from "revolt.js";
-import { Nullable } from "revolt.js/dist/util/null";
+import { Nullable } from "revolt.js/esm/util/null";
 import styled, { css } from "styled-components/macro";
 
 export interface IconBaseProps<T> {

src/components/settings/roles/PermissionList.tsx

@@ -16,7 +16,16 @@ export function PermissionList({ value, onChange, filter }: Props) {
             {(Object.keys(Permission) as (keyof typeof Permission)[])
                 .filter(
                     (key) =>
-                        key !== "GrantAllSafe" &&
+                        ![
+                            "GrantAllSafe",
+                            "TimeoutMembers",
+                            "ReadMessageHistory",
+                            "Speak",
+                            "Video",
+                            "MuteMembers",
+                            "DeafenMembers",
+                            "MoveMembers",
+                        ].includes(key) &&
                         (!filter || filter.includes(key)),
                 )
                 .map((x) => (

src/components/settings/roles/PermissionSelect.tsx

@@ -7,8 +7,7 @@ import { Text } from "preact-i18n";
 import { useMemo } from "preact/hooks";
 
 import Checkbox from "../../ui/Checkbox";
-
-import { OverrideSwitch } from "./OverrideSwitch";
+import { OverrideSwitch } from "@revoltchat/ui";
 
 interface PermissionSelectProps {
     id: keyof typeof Permission;
@@ -20,6 +19,7 @@ interface PermissionSelectProps {
 type State = "Allow" | "Neutral" | "Deny";
 
 const PermissionEntry = styled.label`
+    gap: 8px;
     width: 100%;
     margin: 8px 0;
     display: flex;
@@ -100,9 +100,9 @@ export function PermissionSelect({
     return (
         <PermissionEntry>
             <span class="title">
-                <Text id={`permissions.server.${id}.t`}>{id}</Text>
+                <Text id={`permissions.${id}.t`}>{id}</Text>
                 <span class="description">
-                    <Text id={`permissions.server.${id}.d`} />
+                    <Text id={`permissions.${id}.d`} />
                 </span>
             </span>
             {typeof value === "object" ? (

src/components/settings/roles/RoleSelection.ts

@@ -0,0 +1,12 @@
+import { API } from "revolt.js";
+
+export type RoleOrDefault = (
+    | API.Role
+    | {
+          name: string;
+          permissions: number;
+          colour?: string;
+          hoist?: boolean;
+          rank?: number;
+      }
+) & { id: string };

src/context/revoltjs/SyncManager.tsx

@@ -1,7 +1,7 @@
 /**
  * This file monitors changes to settings and syncs them to the server.
  */
-import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+import { ClientboundNotification } from "revolt.js/esm/websocket/notifications";
 
 import { useEffect } from "preact/hooks";
 

src/lib/ContextMenus.tsx

@@ -13,7 +13,7 @@ import {
 import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
 import { useHistory } from "react-router-dom";
 import { Channel, Message, Server, User, API } from "revolt.js";
-import { Permission, UserPermission } from "revolt.js/dist/api/permissions";
+import { Permission, UserPermission } from "revolt.js/esm/api/permissions";
 
 import {
     ContextMenuWithData,

src/lib/contextmenu/CMNotifications.tsx

@@ -9,8 +9,8 @@ import {
     LeftArrowAlt,
 } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js/dist/maps/Channels";
-import { Server } from "revolt.js/dist/maps/Servers";
+import { Channel } from "revolt.js/esm/maps/Channels";
+import { Server } from "revolt.js/esm/maps/Servers";
 
 import { ContextMenuWithData, MenuItem } from "preact-context-menu";
 import { Text } from "preact-i18n";

src/lib/renderer/Singleton.ts

@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { action, makeAutoObservable } from "mobx";
-import { Channel } from "revolt.js/dist/maps/Channels";
-import { Message } from "revolt.js/dist/maps/Messages";
-import { Nullable } from "revolt.js/dist/util/null";
+import { Channel } from "revolt.js/esm/maps/Channels";
+import { Message } from "revolt.js/esm/maps/Messages";
+import { Nullable } from "revolt.js/esm/util/null";
 
 import { SimpleRenderer } from "./simple/SimpleRenderer";
 import { RendererRoutines, ScrollState } from "./types";

src/lib/renderer/types.ts

@@ -1,4 +1,4 @@
-import { Message } from "revolt.js/dist/maps/Messages";
+import { Message } from "revolt.js/esm/maps/Messages";
 
 import { ChannelRenderer } from "./Singleton";
 

src/lib/vortex/VoiceState.ts

@@ -1,6 +1,6 @@
 import { action, makeAutoObservable, runInAction } from "mobx";
-import { Channel } from "revolt.js/dist/maps/Channels";
-import { Nullable, toNullable } from "revolt.js/dist/util/null";
+import { Channel } from "revolt.js/esm/maps/Channels";
+import { Nullable, toNullable } from "revolt.js/esm/util/null";
 
 import type { ProduceType, VoiceUser } from "./Types";
 import type VoiceClient from "./VoiceClient";

src/mobx/stores/Auth.ts

@@ -1,6 +1,6 @@
 import { action, computed, makeAutoObservable, ObservableMap } from "mobx";
 import { API } from "revolt.js";
-import { Nullable } from "revolt.js/dist/util/null";
+import { Nullable } from "revolt.js/esm/util/null";
 
 import { mapToRecord } from "../../lib/conversion";
 

src/mobx/stores/NotificationOptions.ts

@@ -1,7 +1,7 @@
 import { action, computed, makeAutoObservable, ObservableMap } from "mobx";
-import { Channel } from "revolt.js/dist/maps/Channels";
-import { Message } from "revolt.js/dist/maps/Messages";
-import { Server } from "revolt.js/dist/maps/Servers";
+import { Channel } from "revolt.js/esm/maps/Channels";
+import { Message } from "revolt.js/esm/maps/Messages";
+import { Server } from "revolt.js/esm/maps/Servers";
 
 import { mapToRecord } from "../../lib/conversion";
 

src/mobx/stores/ServerConfig.ts

@@ -1,7 +1,7 @@
 import { action, computed, makeAutoObservable } from "mobx";
 import { API } from "revolt.js";
 import { Client } from "revolt.js";
-import { Nullable } from "revolt.js/dist/util/null";
+import { Nullable } from "revolt.js/esm/util/null";
 
 import { isDebug } from "../../revision";
 import Persistent from "../interfaces/Persistent";

src/pages/channels/Channel.tsx

@@ -3,7 +3,7 @@ import { Ghost } from "@styled-icons/boxicons-solid";
 import { reaction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router-dom";
-import { Channel as ChannelI } from "revolt.js/dist/maps/Channels";
+import { Channel as ChannelI } from "revolt.js/esm/maps/Channels";
 import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";

src/pages/channels/ChannelHeader.tsx

@@ -6,8 +6,8 @@ import {
 } from "@styled-icons/boxicons-regular";
 import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js/dist/maps/Channels";
-import { User } from "revolt.js/dist/maps/Users";
+import { Channel } from "revolt.js/esm/maps/Channels";
+import { User } from "revolt.js/esm/maps/Users";
 import styled, { css } from "styled-components/macro";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";