Fix i18n for server settings.

Start work on roles.
Add temporary age gate.

src/components/navigation/BottomNavigation.tsx

@@ -5,6 +5,8 @@ import { useSelf } from "../../context/revoltjs/hooks";
 import { useHistory, useLocation } from "react-router";
 import ConditionalLink from "../../lib/ConditionalLink";
 import { Message, Group } from "@styled-icons/boxicons-solid";
+import { LastOpened } from "../../redux/reducers/last_opened";
+import { connectState } from "../../redux/connector";
 
 const NavigationBase = styled.div`
     z-index: 100;
@@ -26,15 +28,23 @@ const Button = styled.a<{ active: boolean }>`
     ` }
 `;
 
-export default function BottomNavigation() {
+interface Props {
+    lastOpened: LastOpened
+}
+
+export function BottomNavigation({ lastOpened }: Props) {
     const user = useSelf();
     const history = useHistory();
     const path = useLocation().pathname;
 
+    const channel_id = lastOpened['home'];
+
     const friendsActive = path.startsWith("/friends");
     const settingsActive = path.startsWith("/settings");
     const homeActive = !(friendsActive || settingsActive);
 
+    // console.info(channel_id);
+
     return (
         <NavigationBase>
             <Button active={homeActive}>
@@ -70,3 +80,9 @@ export default function BottomNavigation() {
         </NavigationBase>
     );
 }
+
+export default connectState(BottomNavigation, state => {
+    return {
+        lastOpened: state.lastOpened
+    }
+});

src/pages/channels/Channel.tsx

 import styled from "styled-components";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import ChannelHeader from "./ChannelHeader";
 import { useParams } from "react-router-dom";
 import { MessageArea } from "./messaging/MessageArea";
+import Checkbox from "../../components/ui/Checkbox";
+import Button from "../../components/ui/Button";
 // import { useRenderState } from "../../lib/renderer/Singleton";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import MessageBox from "../../components/common/messaging/MessageBox";
@@ -44,6 +46,20 @@ export function Channel({ id }: { id: string }) {
 function TextChannel({ channel }: { channel: Channel }) {
     const [ showMembers, setMembers ] = useState(true);
 
+    if ((channel.channel_type === 'TextChannel' || channel.channel_type === 'Group') && channel.name.includes('nsfw')) {
+        const [ consent, setConsent ] = useState(false);
+        const [ ageGate, setAgeGate ] = useState(false);
+        if (!ageGate) {
+            return (
+                <div style={{ maxWidth: '480px' }}>
+                    <h3>this channel is marked as nsfw</h3>
+                    <Checkbox checked={consent} onChange={v => setConsent(v)}>I am at least 18 years old</Checkbox>
+                    <Button onClick={() => consent && setAgeGate(true)}>view content</Button>
+                </div>
+            )
+        }
+    }
+
     let id = channel._id;
     return <>
         <ChannelHeader channel={channel} toggleSidebar={() => setMembers(!showMembers)} />

src/pages/settings/GenericSettings.tsx

@@ -13,11 +13,12 @@ import ButtonItem from "../../components/navigation/items/ButtonItem";
 
 interface Props {
     pages: {
-        category?: Children,
-        divider?: boolean,
-        id: string,
+        category?: Children
+        divider?: boolean
+        id: string
         icon: Children
         title: Children
+        hideTitle?: boolean
     }[]
     custom?: Children
     children: Children
@@ -96,7 +97,7 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
             )}
             {(!isTouchscreenDevice || typeof page === "string") && (
                 <div className={styles.content}>
-                    {!isTouchscreenDevice && (
+                    {!isTouchscreenDevice && !(pages.find(x => x.id === page && x.hideTitle)) && (
                         <h1>
                             <Text
                                 id={`app.settings.${category}.${page ?? defaultPage}.title`}

src/pages/settings/ServerSettings.tsx

@@ -34,27 +34,28 @@ export default function ServerSettings() {
                     category: <Category variant="uniform" text={server.name} />, //TOFIX: Just add the server.name as a string, otherwise it makes a duplicate category
                     id: 'overview',
                     icon: <ListUl size={20} />,
-                    title: <Text id="app.settings.channel_pages.overview.title" />
+                    title: <Text id="app.settings.server_pages.overview.title" />
                 },
                 {
                     id: 'members',
                     icon: <Group size={20} />,
-                    title: "Members"
+                    title: <Text id="app.settings.server_pages.members.title" />
                 },
                 {
                     id: 'invites',
                     icon: <Share size={20} />,
-                    title: "Invites"
+                    title: <Text id="app.settings.server_pages.invites.title" />
                 },
                 {
                     id: 'bans',
                     icon: <XSquare size={20} />,
-                    title: "Bans"
+                    title: <Text id="app.settings.server_pages.bans.title" />
                 },
                 {
                     id: 'roles',
                     icon: <ListCheck size={20} />,
-                    title: "Roles"
+                    title: <Text id="app.settings.server_pages.roles.title" />,
+                    hideTitle: true
                 }
             ]}
             children={[

src/pages/settings/server/Panes.module.scss

@@ -78,16 +78,21 @@
 }
 
 .roles {
-    .overview {
-        height: 85vh; //TOFIX change later
-        display: flex;
-        
-        .list {
-            overflow-y: scroll;
-        }
+    gap: 12px;
+    height: 100%;
+    display: flex;
 
-        .permissions {
-            overflow-y: scroll;
-        }
+    .list {
+        width: 160px;
+        overflow-y: scroll;
+    }
+
+    .permissions {
+        flex-grow: 1;
+        overflow-y: scroll;
+    }
+
+    h2 {
+        margin: 8px 0;
     }
 }
\ No newline at end of file

src/pages/settings/server/Roles.tsx

-import Tip from "../../../components/ui/Tip";
+import { Text } from "preact-i18n";
 import styles from './Panes.module.scss';
 import Button from "../../../components/ui/Button";
 import { Servers } from "revolt.js/dist/api/objects";
@@ -7,7 +7,7 @@ import Checkbox from "../../../components/ui/Checkbox";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions";
-import { Styleshare } from "@styled-icons/simple-icons";
+import Tip from "../../../components/ui/Tip";
 
 interface Props {
     server: Servers.Server;
@@ -46,61 +46,57 @@ export function Roles({ server }: Props) {
     return (
         <div className={styles.roles}>
             <Tip warning>This section is under construction.</Tip>
-            <div className={styles.overview}>
-                <div className={styles.list}>
-                    <h2>select role</h2>
-                    { selected }
-                    { keys
-                        .map(id => {
-                            let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
+            <div className={styles.list}>
+                <h1><Text id="app.settings.server_pages.roles.title" /></h1>
+                { 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={() => {
-                        setSelected('default');
-                        client.servers.deleteRole(server._id, selected);
-                    }}>delete role</Button><br/>
-                    <InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} />
-                    <Button contrast onClick={() => {
-                        client.servers.createRole(server._id, name);
-                    }}>create</Button>
-                </div>
-                <div className={styles.permissions}>
-                    <h2>serverm permmissions</h2>
-                    { Object.keys(ServerPermission)
-                        .map(perm => {
-                            let value = ServerPermission[perm as keyof typeof ServerPermission];
+                        return (
+                            <Checkbox checked={selected === id} onChange={selected => selected && setSelected(id)}>
+                                { role.name }
+                            </Checkbox>
+                        )
+                    })
+                }
+                <Button disabled={selected === 'default'} error onClick={() => {
+                    setSelected('default');
+                    client.servers.deleteRole(server._id, selected);
+                }}>delete role</Button><br/>
+                <InputBox placeholder="role name" value={name} onChange={e => setName(e.currentTarget.value)} />
+                <Button contrast onClick={() => {
+                    client.servers.createRole(server._id, name);
+                }}>create</Button>
+            </div>
+            <div className={styles.permissions}>
+                <h2>{ selectedRole.name }</h2>
+                { Object.keys(ServerPermission)
+                    .map(perm => {
+                        let value = ServerPermission[perm as keyof typeof ServerPermission];
 
-                            return (
-                                <Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}>
-                                    { perm }
-                                </Checkbox>
-                            )
-                        })
-                    }
-                    <h2>channel permmissions</h2>
-                    { Object.keys(ChannelPermission)
-                        .map(perm => {
-                            let value = ChannelPermission[perm as keyof typeof ChannelPermission];
+                        return (
+                            <Checkbox checked={(p[0] & value) > 0} onChange={c => setPerm([ c ? (p[0] | value) : (p[0] ^ value), p[1] ])}>
+                                { perm }
+                            </Checkbox>
+                        )
+                    })
+                }
+                <h2>channel permmissions</h2>
+                { Object.keys(ChannelPermission)
+                    .map(perm => {
+                        let value = ChannelPermission[perm as keyof typeof ChannelPermission];
 
-                            return (
-                                <Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}>
-                                    { perm }
-                                </Checkbox>
-                            )
-                        })
-                    }
-                    <Button contrast onClick={() => {
-                        client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] });
-                    }}>click here to save permissions for role</Button>
-                </div>
+                        return (
+                            <Checkbox checked={((p[1] >>> 0) & value) > 0} onChange={c => setPerm([ p[0], c ? (p[1] | value) : (p[1] ^ value) ])}>
+                                { perm }
+                            </Checkbox>
+                        )
+                    })
+                }
+                <Button contrast onClick={() => {
+                    client.servers.setPermissions(server._id, selected, { server: p[0], channel: p[1] });
+                }}>click here to save permissions for role</Button>
             </div>
-            
         </div>
     );
 }