Add bottom navigation and locale selector.

src/pages/RevoltApp.tsx

@@ -1,6 +1,6 @@
-import { Docked, OverlappingPanels } from "react-overlapping-panels";
+import { Docked, OverlappingPanels, ShowIf } from "react-overlapping-panels";
 import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, useLocation } from "react-router-dom";
 import styled from "styled-components";
 
 import ContextMenus from "../lib/ContextMenus";
@@ -11,6 +11,7 @@ import Notifications from "../context/revoltjs/Notifications";
 
 import LeftSidebar from "../components/navigation/LeftSidebar";
 import RightSidebar from "../components/navigation/RightSidebar";
+import BottomNavigation from "../components/navigation/BottomNavigation";
 
 import Home from './home/Home';
 import Friends from "./friends/Friends";
@@ -29,12 +30,20 @@ const Routes = styled.div`
 `;
 
 export default function App() {
+    const path = useLocation().pathname;
+    const fixedBottomNav = (path === '/' || path === '/settings' || path.startsWith("/friends"));
+
     return (
         <OverlappingPanels
             width="100vw"
             height="100vh"
             leftPanel={{ width: 292, component: <LeftSidebar /> }}
             rightPanel={{ width: 240, component: <RightSidebar /> }}
+            bottomNav={{
+                component: <BottomNavigation />,
+                showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left,
+                height: 50
+            }}
             docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
             <Routes>
                 <Switch>

src/pages/login/Login.tsx

@@ -7,6 +7,7 @@ import { LIBRARY_VERSION } from "revolt.js";
 import { Route, Switch } from "react-router-dom";
 import { ThemeContext } from "../../context/Theme";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
+import LocaleSelector from "../../components/common/LocaleSelector";
 
 import background from "./background.jpg";
 
@@ -33,7 +34,7 @@ export default function Login() {
                         &middot; App: <code>{APP_VERSION}</code>
                     </span>
                     <span>
-                        {/*<LocaleSelector />*/}
+                        <LocaleSelector />
                     </span>
                 </div>
                 <div className={styles.modal}>

src/pages/login/forms/Form.tsx

@@ -6,8 +6,8 @@ import { useForm } from "react-hook-form";
 import { MailProvider } from "./MailProvider";
 import { useContext, useState } from "preact/hooks";
 import { CheckCircle, Mail } from "@styled-icons/feather";
-import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
 import { takeError } from "../../../context/revoltjs/util";
+import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import FormField from "../FormField";
@@ -15,6 +15,8 @@ import Button from "../../../components/ui/Button";
 import Overline from "../../../components/ui/Overline";
 import Preloader from "../../../components/ui/Preloader";
 
+import wideSVG from '../../../assets/wide.svg';
+
 interface Props {
     page: "create" | "login" | "send_reset" | "reset" | "resend";
     callback: (fields: {
@@ -140,6 +142,7 @@ export function Form({ page, callback }: Props) {
 
     return (
         <div className={styles.form}>
+            <img src={wideSVG} />
             <form onSubmit={handleSubmit(onSubmit) as any}>
                 {page !== "reset" && (
                     <FormField