Add permissions / roles settings.

src/pages/settings/channel/Overview.tsx

@@ -12,7 +12,7 @@ interface Props {
     channel: Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel;
 }
 
-export function Overview({ channel }: Props) {
+export default function Overview({ channel }: Props) {
     const client = useContext(AppContext);
 
     const [name, setName] = useState(channel.name);
@@ -81,9 +81,11 @@ export function Overview({ channel }: Props) {
                     if (!changed) setChanged(true)
                 }}
             />
-            <Button onClick={save} contrast disabled={!changed}>
-                <Text id="app.special.modals.actions.save" />
-            </Button>
+            <p>
+                <Button onClick={save} contrast disabled={!changed}>
+                    <Text id="app.special.modals.actions.save" />
+                </Button>
+            </p>
         </div>
     );
 }

src/pages/settings/channel/Permissions.tsx

@@ -0,0 +1,91 @@
+import Tip from "../../../components/ui/Tip";
+import Button from "../../../components/ui/Button";
+import { Channels } from "revolt.js/dist/api/objects";
+import Checkbox from "../../../components/ui/Checkbox";
+import { useServer } from "../../../context/revoltjs/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
+import { ChannelPermission } from "revolt.js/dist/api/permissions";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
+// ! FIXME: export from revolt.js
+const DEFAULT_PERMISSION_DM = ChannelPermission.View
+    + ChannelPermission.SendMessage
+    + ChannelPermission.ManageChannel
+    + ChannelPermission.VoiceCall
+    + ChannelPermission.InviteOthers
+    + ChannelPermission.EmbedLinks
+    + ChannelPermission.UploadFiles;
+
+interface Props {
+    channel: Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel;
+}
+
+// ! FIXME: bad code :)
+export default function Permissions({ channel }: Props) {
+    const [ selected, setSelected ] = useState('default');
+    const client = useContext(AppContext);
+
+    type R = { name: string, permissions: number };
+    let roles: { [key: string]: R } = {};
+    if (channel.channel_type !== 'Group') {
+        const server = useServer(channel.server);
+        const a = server?.roles ?? {};
+        for (let b of Object.keys(a)) {
+            roles[b] = {
+                name: a[b].name,
+                permissions: a[b].permissions[1]
+            };
+        }
+    }
+
+    const keys = [ 'default', ...Object.keys(roles) ];
+
+    const defaultRole = { name: 'Default', permissions: (channel.channel_type === 'Group' ? channel.permissions : channel.default_permissions) ?? DEFAULT_PERMISSION_DM };
+    const selectedRole = selected === 'default' ? defaultRole : roles[selected];
+
+    if (!selectedRole) {
+        useEffect(() => setSelected('default'), [ ]);
+        return null;
+    }
+
+    const [ p, setPerm ] = useState(selectedRole.permissions >>> 0);
+
+    useEffect(() => {
+        setPerm(selectedRole.permissions >>> 0);
+    }, [ selected, selectedRole.permissions ]);
+    
+    return (
+        <div>
+            <Tip warning>This section is under construction.</Tip>
+            <h2>select role</h2>
+            { selected }
+            { keys
+                .map(id => {
+                    let role: R = id === 'default' ? defaultRole : roles[id];
+
+                    return (
+                        <Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
+                            { role.name }
+                        </Checkbox>
+                    )
+                })
+            }
+            <h2>channel per??issions</h2>
+            { Object.keys(ChannelPermission)
+                .map(perm => {
+                    let value = ChannelPermission[perm as keyof typeof ChannelPermission];
+                    if (value & DEFAULT_PERMISSION_DM) {
+                        return (
+                            <Checkbox checked={(p & value) > 0} onChange={c => setPerm(c ? (p | value) : (p ^ value))}>
+                                { perm }
+                            </Checkbox>
+                        )
+                    }
+                })
+            }
+            <Button contrast onClick={() => {
+                client.channels.setPermissions(channel._id, selected, p);
+            }}>click here to save permissions for role</Button>
+        </div>
+    );
+}