diff --git a/src/components/common/LocaleSelector.tsx b/src/components/common/LocaleSelector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9e68cd72d37d33b6fb5dfd19c9fc82341bf27c07
--- /dev/null
+++ b/src/components/common/LocaleSelector.tsx
@@ -0,0 +1,42 @@
+import ComboBox from "../ui/ComboBox";
+import { connectState } from "../../redux/connector";
+import { WithDispatcher } from "../../redux/reducers";
+import { LanguageEntry, Languages } from "../../context/Locale";
+
+type Props = WithDispatcher & {
+ locale: string;
+};
+
+export function LocaleSelector(props: Props) {
+ return (
+ <ComboBox
+ value={props.locale}
+ onChange={e =>
+ props.dispatcher &&
+ props.dispatcher({
+ type: "SET_LOCALE",
+ locale: e.currentTarget.value as any
+ })
+ }
+ >
+ {Object.keys(Languages).map(x => {
+ const l = (Languages as any)[x] as LanguageEntry;
+ return (
+ <option value={x}>
+ {l.emoji} {l.display}
+ </option>
+ );
+ })}
+ </ComboBox>
+ );
+}
+
+export default connectState(
+ LocaleSelector,
+ state => {
+ return {
+ locale: state.locale
+ };
+ },
+ true
+);
diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6a9ffd40f688502eb0b0ff7562a8708b1a29bba9
--- /dev/null
+++ b/src/components/navigation/BottomNavigation.tsx
@@ -0,0 +1,72 @@
+import styled, { css } from "styled-components";
+import { Link } from "react-router-dom";
+import IconButton from "../ui/IconButton";
+import UserIcon from "../common/user/UserIcon";
+import { useSelf } from "../../context/revoltjs/hooks";
+import { useHistory, useLocation } from "react-router";
+import { MessageCircle, Users } from "@styled-icons/feather";
+
+const NavigationBase = styled.div`
+ z-index: 10;
+ height: 50px;
+ display: flex;
+ background: var(--secondary-background);
+`;
+
+const Button = styled.a<{ active: boolean }>`
+ flex: 1;
+
+ > a, > div, > a > div {
+ width: 100%;
+ height: 100%;
+ }
+
+ ${ props => props.active && css`
+ background: var(--hover);
+ ` }
+`;
+
+export default function BottomNavigation() {
+ const user = useSelf();
+ const history = useHistory();
+ const path = useLocation().pathname;
+
+ const friendsActive = path.startsWith("/friends");
+ const settingsActive = path.startsWith("/settings");
+ const homeActive = !(friendsActive || settingsActive);
+
+ return (
+ <NavigationBase>
+ <Button active={homeActive}>
+ <IconButton
+ onClick={() => {
+ if (!homeActive) {
+ if (settingsActive) {
+ if (history.length > 0) {
+ history.goBack();
+ } else {
+ history.push('/');
+ }
+ }
+ }
+ }}>
+ <MessageCircle size={26} />
+ </IconButton>
+ </Button>
+ <Button active={friendsActive}>
+ <Link to="/friends">
+ <IconButton>
+ <Users size={26} />
+ </IconButton>
+ </Link>
+ </Button>
+ <Button active={settingsActive}>
+ <Link to="/settings">
+ <IconButton>
+ <UserIcon target={user} size={26} status={true} />
+ </IconButton>
+ </Link>
+ </Button>
+ </NavigationBase>
+ );
+}
diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx
index cfd4ee29d4e236007f725b580b86754077939d25..cefe6b7d8b66ff808834d45f182e9e6540095454 100644
--- a/src/components/navigation/SidebarBase.tsx
+++ b/src/components/navigation/SidebarBase.tsx
@@ -1,4 +1,5 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
export default styled.div`
height: 100%;
@@ -6,4 +7,8 @@ export default styled.div`
user-select: none;
flex-direction: row;
align-items: stretch;
+
+ ${ isTouchscreenDevice && css`
+ padding-bottom: 50px;
+ ` }
`;
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index 5b89edd2de8ba621fa8f21d6031d57ccbea86c15..f20c20317ea1fb5b0fefd4901f0cb735a1cdb2ae 100644
--- a/src/pages/RevoltApp.tsx
+++ b/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>
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index 332359320090b6fc7706db3f78ce5758436fbf67..e24f333e74367cecc0afec309789e704fea59ff9 100644
--- a/src/pages/login/Login.tsx
+++ b/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() {
· App: <code>{APP_VERSION}</code>
</span>
<span>
- {/*<LocaleSelector />*/}
+ <LocaleSelector />
</span>
</div>
<div className={styles.modal}>
diff --git a/src/pages/login/forms/Form.tsx b/src/pages/login/forms/Form.tsx
index 3239e3951da5562fd1b7e0d38ce9b5525eeb7719..c3709b58a739bf176e82e144979bf95b325419ac 100644
--- a/src/pages/login/forms/Form.tsx
+++ b/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