feat: new permissions menus

closes #322

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/OverrideSwitch.tsx

@@ -1,79 +0,0 @@
-import { Check, Square, X } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components";
-
-type State = "Allow" | "Neutral" | "Deny";
-
-const SwitchContainer = styled.div.attrs({
-    role: "radiogroup",
-    "aria-orientiation": "horizontal",
-})`
-    flex-shrink: 0;
-
-    display: flex;
-    margin: 4px 16px;
-    overflow: hidden;
-    border-radius: var(--border-radius);
-    background: var(--secondary-background);
-    border: 2px solid var(--tertiary-background);
-`;
-
-const Switch = styled.div.attrs({
-    role: "radio",
-})<{ state: State; selected: boolean }>`
-    padding: 4px;
-    cursor: pointer;
-    transition: 0.2s ease all;
-
-    color: ${(props) =>
-        props.state === "Allow"
-            ? "var(--success)"
-            : props.state === "Deny"
-            ? "var(--error)"
-            : "var(--tertiary-foreground)"};
-
-    ${(props) =>
-        props.selected &&
-        css`
-            color: white;
-
-            background: ${props.state === "Allow"
-                ? "var(--success)"
-                : props.state === "Deny"
-                ? "var(--error)"
-                : "var(--primary-background)"};
-        `}
-
-    &:hover {
-        filter: brightness(0.8);
-    }
-`;
-
-interface Props {
-    state: State;
-    onChange: (state: State) => void;
-}
-
-export function OverrideSwitch({ state, onChange }: Props) {
-    return (
-        <SwitchContainer>
-            <Switch
-                onClick={() => onChange("Deny")}
-                state="Deny"
-                selected={state === "Deny"}>
-                <X size={24} />
-            </Switch>
-            <Switch
-                onClick={() => onChange("Neutral")}
-                state="Neutral"
-                selected={state === "Neutral"}>
-                <Square size={24} />
-            </Switch>
-            <Switch
-                onClick={() => onChange("Allow")}
-                state="Allow"
-                selected={state === "Allow"}>
-                <Check size={24} />
-            </Switch>
-        </SwitchContainer>
-    );
-}

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/components/settings/roles/RoleSelection.tsx

@@ -1,35 +0,0 @@
-import { API } from "revolt.js";
-
-import Checkbox from "../../ui/Checkbox";
-
-export type RoleOrDefault = (
-    | API.Role
-    | {
-          name: string;
-          permissions: number;
-          colour?: string;
-          hoist?: boolean;
-          rank?: number;
-      }
-) & { id: string };
-
-interface Props {
-    selected: string;
-    onSelect: (id: string) => void;
-
-    roles: RoleOrDefault[];
-}
-
-export function RoleSelection({ selected, onSelect, roles }: Props) {
-    return (
-        <>
-            {roles.map((x) => (
-                <Checkbox
-                    checked={x.id === selected}
-                    onChange={() => onSelect(x.id)}>
-                    {x.name}
-                </Checkbox>
-            ))}
-        </>
-    );
-}

src/components/settings/roles/UnsavedChanges.tsx

@@ -1,22 +0,0 @@
-import Tip from "../../../components/ui/Tip";
-import Button from "../../ui/Button";
-
-interface Props {
-    save: () => void;
-}
-
-export function UnsavedChanges({ save }: Props) {
-    return (
-        <Tip hideSeparator>
-            <span
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                }}>
-                You have unsaved changes!
-                <Button onClick={save}>Save</Button>
-            </span>
-        </Tip>
-    );
-}