feat: show that permissions / roles are not editable

closes #594

src/components/settings/roles/PermissionList.tsx

@@ -1,4 +1,4 @@
-import { API } from "revolt.js";
+import { API, Channel, Member, Server } from "revolt.js";
 import { Permission } from "revolt.js";
 
 import { PermissionSelect } from "./PermissionSelect";
@@ -7,10 +7,11 @@ interface Props {
     value: API.OverrideField | number;
     onChange: (v: API.OverrideField | number) => void;
 
+    target?: Channel | Server;
     filter?: (keyof typeof Permission)[];
 }
 
-export function PermissionList({ value, onChange, filter }: Props) {
+export function PermissionList({ value, onChange, filter, target }: Props) {
     return (
         <>
             {(Object.keys(Permission) as (keyof typeof Permission)[])
@@ -35,6 +36,7 @@ export function PermissionList({ value, onChange, filter }: Props) {
                         permission={Permission[x]}
                         value={value}
                         onChange={onChange}
+                        target={target}
                     />
                 ))}
         </>

src/components/settings/roles/PermissionSelect.tsx

@@ -1,7 +1,8 @@
+import { Lock } from "@styled-icons/boxicons-solid";
 import Long from "long";
-import { API } from "revolt.js";
+import { API, Channel, Member, Server } from "revolt.js";
 import { Permission } from "revolt.js";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
 import { useMemo } from "preact/hooks";
@@ -11,6 +12,7 @@ import { OverrideSwitch } from "@revoltchat/ui";
 
 interface PermissionSelectProps {
     id: keyof typeof Permission;
+    target?: Channel | Server;
     permission: number;
     value: API.OverrideField | number;
     onChange: (value: API.OverrideField | number) => void;
@@ -18,7 +20,7 @@ interface PermissionSelectProps {
 
 type State = "Allow" | "Neutral" | "Deny";
 
-const PermissionEntry = styled.label`
+const PermissionEntry = styled.label<{ disabled?: boolean }>`
     gap: 8px;
     width: 100%;
     margin: 8px 0;
@@ -33,10 +35,20 @@ const PermissionEntry = styled.label`
         flex-direction: column;
     }
 
+    .lock {
+        margin-inline-start: 4px;
+    }
+
     .description {
         font-size: 0.8em;
         color: var(--secondary-foreground);
     }
+
+    ${(props) =>
+        props.disabled &&
+        css`
+            color: var(--tertiary-foreground);
+        `}
 `;
 
 export function PermissionSelect({
@@ -44,6 +56,7 @@ export function PermissionSelect({
     permission,
     value,
     onChange,
+    target,
 }: PermissionSelectProps) {
     const state: State = useMemo(() => {
         if (typeof value === "object") {
@@ -97,18 +110,32 @@ export function PermissionSelect({
         });
     }
 
+    const member =
+        target &&
+        (target instanceof Server ? target.member : target.server?.member);
+
+    const disabled = member && !member.hasPermission(target!, id);
+
     return (
-        <PermissionEntry>
+        <PermissionEntry disabled={disabled}>
             <span class="title">
-                <Text id={`permissions.${id}.t`}>{id}</Text>
+                <span>
+                    <Text id={`permissions.${id}.t`}>{id}</Text>
+                    {disabled && <Lock className="lock" size={14} />}
+                </span>
                 <span class="description">
                     <Text id={`permissions.${id}.d`} />
                 </span>
             </span>
             {typeof value === "object" ? (
-                <OverrideSwitch state={state} onChange={onSwitch} />
+                <OverrideSwitch
+                    disabled={disabled}
+                    state={state}
+                    onChange={onSwitch}
+                />
             ) : (
                 <Checkbox
+                    disabled={disabled}
                     checked={state === "Allow"}
                     onChange={() =>
                         onChange(

src/pages/settings/channel/Permissions.tsx

@@ -46,6 +46,7 @@ export default observer(({ channel }: Props) => {
     return (
         <PermissionsLayout
             channel={channel}
+            rank={channel.server?.member?.ranking ?? Infinity}
             editor={({ selected }) => {
                 const currentRole = currentRoles.find(
                     (x) => x.id === selected,
@@ -110,6 +111,7 @@ export default observer(({ channel }: Props) => {
                                 "UploadFiles",
                                 "Masquerade",
                             ]}
+                            target={channel}
                         />
                     </div>
                 );

src/pages/settings/server/Roles.tsx

@@ -55,6 +55,7 @@ export const Roles = observer(({ server }: Props) => {
     return (
         <PermissionsLayout
             server={server}
+            rank={server.member?.ranking ?? Infinity}
             onCreateRole={(callback) =>
                 openScreen({
                     id: "special_input",
@@ -214,6 +215,7 @@ export const Roles = observer(({ server }: Props) => {
                                     permissions,
                                 } as RoleOrDefault)
                             }
+                            target={server}
                         />
                         {selected !== "default" && (
                             <>