View roles in server settings.

src/pages/settings/ServerSettings.tsx

@@ -3,7 +3,7 @@ import Category from "../../components/ui/Category";
 import { GenericSettings } from "./GenericSettings";
 import { useServer } from "../../context/revoltjs/hooks";
 import { Route, useHistory, useParams } from "react-router-dom";
-import { ListUl, Share, Group } from "@styled-icons/boxicons-regular";
+import { ListUl, Share, Group, ListCheck } from "@styled-icons/boxicons-regular";
 import { XSquare } from "@styled-icons/boxicons-solid";
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
 
@@ -11,6 +11,7 @@ import { Overview } from "./server/Overview";
 import { Members } from "./server/Members";
 import { Invites } from "./server/Invites";
 import { Bans } from "./server/Bans";
+import { Roles } from "./server/Roles";
 
 export default function ServerSettings() {
     const { server: sid } = useParams<{ server: string; }>();
@@ -49,12 +50,18 @@ export default function ServerSettings() {
                     id: 'bans',
                     icon: <XSquare size={20} />,
                     title: "Bans"
+                },
+                {
+                    id: 'roles',
+                    icon: <ListCheck size={20} />,
+                    title: "Roles"
                 }
             ]}
             children={[
                 <Route path="/server/:server/settings/members"><RequiresOnline><Members server={server} /></RequiresOnline></Route>,
                 <Route path="/server/:server/settings/invites"><RequiresOnline><Invites server={server} /></RequiresOnline></Route>,
                 <Route path="/server/:server/settings/bans"><RequiresOnline><Bans server={server} /></RequiresOnline></Route>,
+                <Route path="/server/:server/settings/roles"><RequiresOnline><Roles server={server} /></RequiresOnline></Route>,
                 <Route path="/"><Overview server={server} /></Route>
             ]}
             category="server_pages"

src/pages/settings/server/Roles.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "preact/hooks";
+import Button from "../../../components/ui/Button";
+import { Servers } from "revolt.js/dist/api/objects";
+import Checkbox from "../../../components/ui/Checkbox";
+import { ServerPermission } from "revolt.js/dist/api/permissions";
+
+interface Props {
+    server: Servers.Server;
+}
+
+export function Roles({ server }: Props) {
+    const [ selected, setSelected ] = useState('default');
+
+    const roles = server.roles ?? {};
+    const keys = [ 'default', ...Object.keys(roles) ];
+
+    const defaultRole = { name: 'Default', permissions: server.default_permissions };
+    const selectedRole: Servers.Role = selected === 'default' ? defaultRole : roles[selected];
+
+    if (!selectedRole) {
+        useEffect(() => setSelected('default'), [ ]);
+        return null;
+    }
+    
+    return (
+        <div>
+            <h2>select role</h2>
+            { keys
+                .map(id => {
+                    let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
+
+                    return (
+                        <Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
+                            { role.name }
+                        </Checkbox>
+                    )
+                })
+            }
+            <Button disabled={selected === 'default'} error onClick={() => {}}>delete role</Button>
+            <h2>permmissions</h2>
+            { Object.keys(ServerPermission)
+                .map(perm => {
+                    let value = ServerPermission[perm as keyof typeof ServerPermission];
+
+                    return (
+                        <Checkbox checked={(selectedRole.permissions[0] & value) > 0} onChange={() => {}}>
+                            { perm }
+                        </Checkbox>
+                    )
+                })
+            }
+        </div>
+    );
+}