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

@@ -1,8 +1,10 @@
 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,
+        category?: Children
-        divider?: boolean,
+        divider?: boolean
-        id: string,
+        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 {
+    gap: 12px;
-        height: 85vh; //TOFIX change later
+    height: 100%;
     display: flex;
 
     .list {
+        width: 160px;
         overflow-y: scroll;
     }
 
     .permissions {
+        flex-grow: 1;
         overflow-y: scroll;
     }
+
+    h2 {
+        margin: 8px 0;
     }
 }

src/pages/settings/server/Roles.tsx

@@ -1,4 +1,4 @@
-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,10 +46,8 @@ 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>
+                <h1><Text id="app.settings.server_pages.roles.title" /></h1>
-                    { selected }
                 { keys
                     .map(id => {
                         let role: Servers.Role = id === 'default' ? defaultRole : roles[id];
@@ -71,7 +69,7 @@ export function Roles({ server }: Props) {
                 }}>create</Button>
             </div>
             <div className={styles.permissions}>
-                    <h2>serverm permmissions</h2>
+                <h2>{ selectedRole.name }</h2>
                 { Object.keys(ServerPermission)
                     .map(perm => {
                         let value = ServerPermission[perm as keyof typeof ServerPermission];
@@ -100,7 +98,5 @@ export function Roles({ server }: Props) {
                 }}>click here to save permissions for role</Button>
             </div>
         </div>
-            
-        </div>
     );
 }