From 93dfe2be64e8658839bcfe5356adf35f8cde7075 Mon Sep 17 00:00:00 2001
From: Nicolas James <Eele1Ephe7uZahRie@tutanota.com>
Date: Thu, 13 Feb 2025 18:04:18 +1100
Subject: initial commit

---
 src/web/components/app/App.css               |  19 ++
 src/web/components/app/App.jsx               |  29 +++
 src/web/components/button/Button.css         |  15 ++
 src/web/components/button/Button.jsx         |  10 +
 src/web/components/card/Card.css             |   5 +
 src/web/components/card/Card.jsx             |  10 +
 src/web/components/comments/Comments.css     |  30 +++
 src/web/components/comments/Comments.jsx     |  44 ++++
 src/web/components/darken/Darken.css         |  14 ++
 src/web/components/darken/Darken.jsx         |  13 ++
 src/web/components/forum/Forum.css           |  21 ++
 src/web/components/forum/Forum.jsx           |  14 ++
 src/web/components/input/Input.css           |  31 +++
 src/web/components/input/Input.jsx           |  38 ++++
 src/web/components/loading/Loading.css       |  13 ++
 src/web/components/loading/Loading.jsx       |  13 ++
 src/web/components/login/Login.css           | 118 +++++++++++
 src/web/components/login/Login.jsx           | 218 +++++++++++++++++++
 src/web/components/nav_bar/NavBar.css        | 304 +++++++++++++++++++++++++++
 src/web/components/nav_bar/NavBar.jsx        | 174 +++++++++++++++
 src/web/components/not_found/NotFound.css    |   0
 src/web/components/not_found/NotFound.jsx    |  10 +
 src/web/components/post/Post.css             |  91 ++++++++
 src/web/components/post/Post.jsx             |  63 ++++++
 src/web/components/posts/Posts.css           |  84 ++++++++
 src/web/components/posts/Posts.jsx           | 163 ++++++++++++++
 src/web/components/settings/Settings.css     |   0
 src/web/components/settings/Settings.jsx     |   9 +
 src/web/components/submission/Submission.css | 146 +++++++++++++
 src/web/components/submission/Submission.jsx | 221 +++++++++++++++++++
 30 files changed, 1920 insertions(+)
 create mode 100644 src/web/components/app/App.css
 create mode 100644 src/web/components/app/App.jsx
 create mode 100644 src/web/components/button/Button.css
 create mode 100644 src/web/components/button/Button.jsx
 create mode 100644 src/web/components/card/Card.css
 create mode 100644 src/web/components/card/Card.jsx
 create mode 100644 src/web/components/comments/Comments.css
 create mode 100644 src/web/components/comments/Comments.jsx
 create mode 100644 src/web/components/darken/Darken.css
 create mode 100644 src/web/components/darken/Darken.jsx
 create mode 100644 src/web/components/forum/Forum.css
 create mode 100644 src/web/components/forum/Forum.jsx
 create mode 100644 src/web/components/input/Input.css
 create mode 100644 src/web/components/input/Input.jsx
 create mode 100644 src/web/components/loading/Loading.css
 create mode 100644 src/web/components/loading/Loading.jsx
 create mode 100644 src/web/components/login/Login.css
 create mode 100644 src/web/components/login/Login.jsx
 create mode 100644 src/web/components/nav_bar/NavBar.css
 create mode 100644 src/web/components/nav_bar/NavBar.jsx
 create mode 100644 src/web/components/not_found/NotFound.css
 create mode 100644 src/web/components/not_found/NotFound.jsx
 create mode 100644 src/web/components/post/Post.css
 create mode 100644 src/web/components/post/Post.jsx
 create mode 100644 src/web/components/posts/Posts.css
 create mode 100644 src/web/components/posts/Posts.jsx
 create mode 100644 src/web/components/settings/Settings.css
 create mode 100644 src/web/components/settings/Settings.jsx
 create mode 100644 src/web/components/submission/Submission.css
 create mode 100644 src/web/components/submission/Submission.jsx

(limited to 'src/web/components')

diff --git a/src/web/components/app/App.css b/src/web/components/app/App.css
new file mode 100644
index 0000000..e211974
--- /dev/null
+++ b/src/web/components/app/App.css
@@ -0,0 +1,19 @@
+
+.content {
+    /* sticky footer */
+    flex-grow: 1;
+    flex-shrink: 0;
+
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+
+    padding: 0;
+    background-color: var(--black-10);
+}
+
+@media (min-width: 40em) {
+    .content {
+        padding: 0em 0em 0em var(--menu-width);
+    }
+}
\ No newline at end of file
diff --git a/src/web/components/app/App.jsx b/src/web/components/app/App.jsx
new file mode 100644
index 0000000..ffd2cc7
--- /dev/null
+++ b/src/web/components/app/App.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import {Route, Routes} from "react-router-dom";
+
+import NavBar from "components/nav_bar/NavBar.jsx";
+import Forum from "components/forum/Forum.jsx";
+import NotFound from "components/not_found/NotFound.jsx";
+import Settings from "components/settings/Settings.jsx";
+import {UserContextProvider} from "contexts/UserContext.jsx";
+import {StateContextProvider} from "contexts/StateContext.jsx";
+
+import styles from "./App.css";
+
+export default function App() {
+    return (
+        <UserContextProvider>
+        <StateContextProvider>
+            <NavBar />
+            <main className={styles.content}>
+                <Routes>
+                    <Route path="/*" element={<Forum />} />
+                    <Route path="/settings/*" element={<Settings />} />
+
+                    <Route path="*" element={<NotFound />} />
+                </Routes>
+            </main>
+        </StateContextProvider>
+        </UserContextProvider>
+    );
+}
diff --git a/src/web/components/button/Button.css b/src/web/components/button/Button.css
new file mode 100644
index 0000000..76c5450
--- /dev/null
+++ b/src/web/components/button/Button.css
@@ -0,0 +1,15 @@
+.button {
+    padding: 0.75em 1em;
+
+    color: var(--black-98);
+    background-color: var(--brand-80);
+    border: 2px solid var(--brand-80);
+    border-radius: 2em;
+    font-family: inherit;
+    letter-spacing: inherit;
+    cursor: pointer;
+}
+.button:hover {
+    color: white;
+    background-color: var(--brand-90);
+}
\ No newline at end of file
diff --git a/src/web/components/button/Button.jsx b/src/web/components/button/Button.jsx
new file mode 100644
index 0000000..8d7de02
--- /dev/null
+++ b/src/web/components/button/Button.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import styles from "./Button.css";
+
+export default function Button({className, children, ...others}) {
+    return (
+        <button className={styles.button + (className != null ? " " + className : "")} {...others} >
+            {children}
+        </button>
+    )
+}
\ No newline at end of file
diff --git a/src/web/components/card/Card.css b/src/web/components/card/Card.css
new file mode 100644
index 0000000..79d38ac
--- /dev/null
+++ b/src/web/components/card/Card.css
@@ -0,0 +1,5 @@
+.card {
+    box-shadow: 0 0 0.2em 0.01em var(--black-10);
+    border-radius: 1.0em;
+    background-color: var(--black-10);
+}
\ No newline at end of file
diff --git a/src/web/components/card/Card.jsx b/src/web/components/card/Card.jsx
new file mode 100644
index 0000000..36c4f1d
--- /dev/null
+++ b/src/web/components/card/Card.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import styles from "./Card.css";
+
+export default function Card({children, className, ...others}) {
+    return (
+        <div className={styles.card + (className ? " " + className : "")} {...others}>
+            {children}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/comments/Comments.css b/src/web/components/comments/Comments.css
new file mode 100644
index 0000000..402e4a2
--- /dev/null
+++ b/src/web/components/comments/Comments.css
@@ -0,0 +1,30 @@
+.container {
+    width: 100%;
+    position: relative;
+
+    /*TODO*/
+    display: none;
+
+    justify-content: center;
+    padding: 1em 1em 0em 0em;
+    overflow: auto;
+
+    color: var(--black-98);
+}
+
+.card {
+    padding: 1em;
+}
+
+.originalPost {
+
+}
+.originalPost > h1 {
+    font-size: 1.8em;
+}
+
+@media (min-width: 80em) {
+    .container {
+        display: flex;
+    }
+}
\ No newline at end of file
diff --git a/src/web/components/comments/Comments.jsx b/src/web/components/comments/Comments.jsx
new file mode 100644
index 0000000..66e0f06
--- /dev/null
+++ b/src/web/components/comments/Comments.jsx
@@ -0,0 +1,44 @@
+import React, {Fragment} from "react";
+
+import Card from "components/card/Card.jsx";
+
+import styles from "./Comments.css";
+
+function OtherComments() {
+    return (
+        <Fragment />
+    );
+}
+
+function OriginalComment() {
+    return (
+        <div className={styles.originalPost}>
+            <h1>Galahs in Australia</h1>
+            <p>
+                The galah is very common as a companion parrot or avicultural specimen around the world, although generally 
+                absent from Australian aviaries, although permits are available to take a limited number of galahs from 
+                the wild per year for avicultural purposes. When tame, it can be an affectionate and friendly bird that
+                can learn to talk, as well as mimic other sounds heard in its environment. While it is a noisy bird that may
+                be unsuitable for apartment living, it is comparatively quieter than other cockatoo species. Like most 
+                parrots, the galah requires plenty of exercise and play time out of its cage as well as several hours of daily
+                social interaction with humans or other birds in order to thrive in captivity. It may also be prone to obesity
+                if not provided with a suitable, nutritionally-balanced diet. The World Parrot Trust recommends that captive 
+                galahs should be kept in an aviary with a minimum length of 7 metres.
+                The breeding requirements include the use upright or tilted logs with a hollow some twenty to thirty 
+                centimetres in diameter. Sand and finer grades of wood material are used to construct their nest, the 
+                availability of eucalypt leaves for the nest lining is also suggested for captive breeding.
+            </p>
+        </div>
+    );
+}
+
+export default function Comments() {
+    return (
+        <div className={styles.container}>
+            <Card className={styles.card}>
+                <OriginalComment />
+                <OtherComments />
+            </Card>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/darken/Darken.css b/src/web/components/darken/Darken.css
new file mode 100644
index 0000000..bd3b151
--- /dev/null
+++ b/src/web/components/darken/Darken.css
@@ -0,0 +1,14 @@
+.darken {
+    visibility: hidden;
+
+    position: fixed;
+    inset: 0;
+
+    background-color: rgba(0, 0, 0, 0.0);
+    cursor: pointer;
+    transition: background-color var(--transition-time) ease-in-out;
+}
+.darkenActive {
+    visibility: initial;
+    background-color: rgba(0, 0, 0, 0.5);
+}
\ No newline at end of file
diff --git a/src/web/components/darken/Darken.jsx b/src/web/components/darken/Darken.jsx
new file mode 100644
index 0000000..7f46365
--- /dev/null
+++ b/src/web/components/darken/Darken.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./Darken.css";
+
+export default function Darken({active, className, ...others}) {
+
+    return (
+        <div 
+            className={styles.darken
+                + (active ? " " + styles.darkenActive : "")
+                + (className ? " " + className : "")}
+            {...others} />
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/forum/Forum.css b/src/web/components/forum/Forum.css
new file mode 100644
index 0000000..4ba6dea
--- /dev/null
+++ b/src/web/components/forum/Forum.css
@@ -0,0 +1,21 @@
+.container {
+    width: 100%;
+
+    /*
+    We're using dvh, which is a newish feature that excludes the size of mobile
+    added menus. If we don't use this and instead use 100vh, we have to scroll
+    before we see some elements at the bottom of the page.
+    */
+    height: calc(100vh - var(--nav-bar-height));
+    height: calc(100dvh - var(--nav-bar-height));
+
+    display: flex;
+
+    background-color: var(--black-15);
+}
+
+@media(min-width: 40em) {
+    .container {
+        border-radius: 1em 0 0 0;
+    }
+}
diff --git a/src/web/components/forum/Forum.jsx b/src/web/components/forum/Forum.jsx
new file mode 100644
index 0000000..eed0fe9
--- /dev/null
+++ b/src/web/components/forum/Forum.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+import Posts from "components/posts/Posts.jsx";
+import Comments from "components/comments/Comments.jsx";
+import styles from "./Forum.css";
+
+export default function Forum() {
+    return (
+        <div className={styles.container}>
+            <Posts />
+            <Comments />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/input/Input.css b/src/web/components/input/Input.css
new file mode 100644
index 0000000..a7da62d
--- /dev/null
+++ b/src/web/components/input/Input.css
@@ -0,0 +1,31 @@
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    width: 100%;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.input {
+    padding: 0.2rem 1rem;
+    margin: 0.5rem 0 1rem;
+
+    background-color: transparent;
+    border-radius: 2em;
+    border: 2px solid var(--brand-80);
+    color: var(--black-98);
+    font-size: inherit;
+    font-family: inherit;
+    letter-spacing: inherit;
+    resize: none;
+}
+
+.label {
+    font-size: 1.35em;
+    font-style: italic;
+}
diff --git a/src/web/components/input/Input.jsx b/src/web/components/input/Input.jsx
new file mode 100644
index 0000000..2c7bc6e
--- /dev/null
+++ b/src/web/components/input/Input.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import styles from "./Input.css";
+import animations from "styles/animations.css";
+
+function InputField({className, type, id, value, onChange, inputType}) {
+    // idk how to do this less uglily
+    switch (inputType) {
+        case "textarea":
+            return <textarea className={className} type={type} id={id} value={value} onChange={onChange} />;
+        default:
+            break;
+    }
+    return <input className={className} type={type} id={id} value={value} onChange={onChange} />;
+}
+
+export default function Input({className, type, field, title, setField, validateField, inputType}) {
+    return (
+        <div className={styles.container + (className ? " " + className : "")}>
+            <div className={styles.row}>
+                <label htmlFor={title} className={styles.label}>{title}</label>
+                <h3 className={(field?.animating ? animations.shake : "")}
+                    onAnimationEnd={() => {setField({...field, animating: false});}}>
+                    {field?.erroring ? validateField(field) : null}
+                </h3>
+            </div>
+            <InputField className={styles.input}
+                inputType={inputType}
+                type={type} 
+                id={title}
+                value={field?.target?.value ?? ""}
+                onChange={(event) => {setField({...field, 
+                                                erroring: true,
+                                                target: event.target});}}
+                field={field} />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/loading/Loading.css b/src/web/components/loading/Loading.css
new file mode 100644
index 0000000..3889953
--- /dev/null
+++ b/src/web/components/loading/Loading.css
@@ -0,0 +1,13 @@
+.loading {
+    width: 1em;
+    height: 1em;
+    animation: rotate 1s infinite linear;
+}
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/src/web/components/loading/Loading.jsx b/src/web/components/loading/Loading.jsx
new file mode 100644
index 0000000..df2caf4
--- /dev/null
+++ b/src/web/components/loading/Loading.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import styles from "./Loading.css";
+
+import half_circle from "assets/svg/half_circle.svg";
+
+export default function Loading({className, ...others}) {
+    return (
+        <img src={half_circle}
+            className={styles.loading + (className ? " " + className : "")}
+            {...others} />
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/login/Login.css b/src/web/components/login/Login.css
new file mode 100644
index 0000000..1be8f84
--- /dev/null
+++ b/src/web/components/login/Login.css
@@ -0,0 +1,118 @@
+.screenCenter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--login-z-index);
+
+    position: fixed;
+    inset: 0;
+    visibility: hidden;
+}
+
+.darken {
+    z-index: calc(var(--login-z-index) - 1);
+}
+.login {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 0 1 100%;
+
+    position: relative;
+    padding: 4em 2em 2em;
+    margin: 0em 3em;
+    max-width: 25em;
+
+    color: var(--black-98);
+    visibility: visible;
+    border-radius: 2em;
+
+    translate: 100vw;
+    transition: translate var(--transition-time) ease-in-out;
+}
+.loginActive {
+    translate: initial;
+    visibility: initial;
+}
+
+.formContainer {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.login .formContainer h1 {
+    font-size: 2em;
+    font-weight: bolder;
+    text-align: center;
+    color: white;
+    margin-bottom: 2rem;
+}
+.login .formContainer h2 {
+    font-size: 1.5em;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+}
+.login .formContainer p {
+    text-align: center;
+    line-height: 1.25em;
+}
+
+.promptContainer {
+    min-height: 5em;
+    display: flex;
+    justify-content: space-between;
+}
+
+.login .formContainer button {
+    height: 2.25rem;
+    font-size: 1.25em;
+    margin-bottom: 1.25rem;
+    width: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 2.5rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.loading {
+    font-size: 1.65rem;
+    filter: invert(95%);
+}
+
+.formContainer a {
+    display: block;
+    text-align: center;
+    text-decoration: underline;
+    cursor: pointer;
+    min-height: 3em;
+    color: inherit;
+}
+
+.promptContainer input {
+    margin: 0 0.25em 0 0;
+}
+
+.cardError {
+    display: none;
+    position: absolute;
+    inset: 0 0 auto 0;
+    min-height: 2em;
+    margin: 1em;
+
+    justify-content: center;
+    align-items: center;
+
+    color: white;
+    border-radius: 2em;
+    font-weight: normal;
+    font-style: italic;
+    text-transform: uppercase;
+}
+.cardErrorActive {
+    display: flex;
+}
\ No newline at end of file
diff --git a/src/web/components/login/Login.jsx b/src/web/components/login/Login.jsx
new file mode 100644
index 0000000..7944aa3
--- /dev/null
+++ b/src/web/components/login/Login.jsx
@@ -0,0 +1,218 @@
+import React, {Fragment, useState, useContext} from "react";
+import {Link} from "react-router-dom";
+
+import Card from "components/card/Card.jsx";
+import Button from "components/button/Button.jsx";
+import Darken from "components/darken/Darken.jsx";
+import Loading from "components/loading/Loading.jsx";
+import Input from "components/input/Input.jsx";
+import {UserContext} from "contexts/UserContext.jsx";
+import {maybeAuthFromCookie} from "helpers/Auth.jsx";
+import {getFieldError, correctFieldAnimate} from "helpers/Input.jsx";
+
+import styles from "./Login.css";
+
+const validateEmail = (email) => getFieldError(email?.target?.value, [3, 254]);
+const validatePassword = (password) => getFieldError(password?.target?.value, [8, 64]);
+
+function RequestButton({email, password, apiPath, promise, setPromise, setEmail, 
+                        setPassword, setLoginActive, setError, children}) {
+
+    const userState = useContext(UserContext);
+
+    const onClick = () => {
+        if (promise != null) {
+            return;
+        }
+        setError(null);
+
+        // We don't want to send a worthless request, we should animate the bad values.
+        const emailErrors = validateEmail(email);
+        const passwordErrors = validatePassword(password);
+        if (emailErrors != null || passwordErrors != null) {
+            correctFieldAnimate(email, setEmail, emailErrors);
+            correctFieldAnimate(password, setPassword, passwordErrors);
+            return;
+        }
+
+        const init = {
+            method: "POST",
+            headers: {
+                'Content-Type': "application/json"
+            },
+            body: JSON.stringify({
+                "email": email.target.value,
+                "password": password.target.value
+            }),
+            referrer: "same-origin",
+        };
+        setPromise(fetch(apiPath, init)
+            .then((response) => {
+                if (response.ok) {
+                    if (!maybeAuthFromCookie(userState)) {
+                        throw new Error("rejected authentication token");
+                    }
+
+                    setLoginActive(false);
+                    return;
+                }
+
+                return response.json()
+                    .then((json) => {
+                        if ("error" in json) {
+                            throw new Error(json.error);
+                        }
+                        throw new Error("unexpected data received");
+                    })
+            })
+            .catch((error) => {
+                console.log(error);
+                setError(error.message);
+            })
+            .finally(() => {
+                setPromise(null);
+            })
+        );
+    };
+
+    // I'm not worried about this object becoming unmounted mid promise because
+    // our website design removes this possibility.
+    return (
+        <Button className={(promise != null ? styles.buttonLoading : null)}
+            onClick={onClick}>
+
+            {children}
+        </Button>
+    );
+}
+
+function CardError({active, text}) {
+    return (
+        <div className={styles.cardError + (active ? " " + styles.cardErrorActive : "")}>
+            <p>
+                {text}
+            </p>
+        </div>
+    );
+}
+
+function FormContents(props) {
+    const {setLoginActive,
+           isRegister,
+           setIsRegister,
+           title, 
+           prompt,
+           linkContents,
+           apiPath} = props;
+
+    const [error, setError] = useState(null);
+    // Email and password .value's are null here to represent the state where the user
+    // has not typed in anything yet. This is to only validate after at least some
+    // input has been received.
+    const [email, setEmail] = useState(null);
+    const [password, setPassword] = useState(null);
+    const [promise, setPromise] = useState(null);
+
+    return (
+        <div className={styles.formContainer}>
+            <CardError active={error != null} text={error} />
+
+            <h1>{title}</h1>
+
+            <Input type="text"
+                title="Email" 
+                field={email}
+                setField={setEmail}
+                validateField={validateEmail} />
+
+            <Input type="text"
+                title="Password"
+                field={password}
+                setField={setPassword}
+                validateField={validatePassword} />
+
+            <div className={styles.promptContainer}>
+                {prompt}
+            </div>
+
+            <RequestButton email={email}
+                password={password}
+                promise={promise}
+                setEmail={setEmail}
+                setPassword={setPassword}
+                setLoginActive={setLoginActive}
+                setPromise={setPromise}
+                setError={setError}
+                apiPath={apiPath}>
+
+                {promise == null ? title : <Loading className={styles.loading} />}
+            </RequestButton>
+
+            <a onClick={() => {
+                if (promise != null) { // disallow mid transaction change
+                    return;
+                }
+                setIsRegister(!isRegister);
+                setError(null);
+                setEmail({...email, value: null, animating: false});
+                setPassword({...password, value: null, animating: false});}}>
+
+                {linkContents}
+            </a>
+        </div>
+    );
+};
+
+function RegisterPrompt() {
+    return (
+        <p>
+            By registering, you agree to both our privacy policy and to
+            waive all rights of basic privacy and security.
+        </p>
+    );
+}
+
+function LoginPrompt(props) {
+    const {setLoginActive} = props;
+
+    return (
+        <Fragment>
+            <div>
+                <input type="checkbox" id="save_login" /><label htmlFor="save_login">Save Login</label>
+            </div>
+            <Link to="settings/recover" onClick={() => setLoginActive(false)}>
+                Can't log in?
+            </Link>
+        </Fragment>
+    );
+}
+
+function Prompt(props) {
+    const {setLoginActive} = props; 
+    const [isRegister, setIsRegister] = useState(true);
+    return (
+        <FormContents setLoginActive={setLoginActive}
+            isRegister={isRegister}
+            setIsRegister={setIsRegister}
+            title={isRegister ? "Sign Up" : "Login"}
+            prompt={isRegister ? <RegisterPrompt /> : <LoginPrompt setLoginActive={setLoginActive} />}
+            linkContents={isRegister ? "Already have an account?" : "Don't have an account?"}
+            apiPath={isRegister ? "/api/signup" : "/api/login"} />
+    );
+}
+
+// A popup which asks for login/register info.
+export default function Login(props) {
+    const {active, setActive} = props;
+
+    return (
+        <Fragment>
+            <Darken active={active} onClick={() => setActive(false)} className={styles.darken} />
+            <div className={styles.screenCenter}>
+                <Card className={styles.login + (active ? " " + styles.loginActive : "")}>
+                    <Prompt setLoginActive={setActive} />
+                </Card>
+            </div>
+        </Fragment>
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/nav_bar/NavBar.css b/src/web/components/nav_bar/NavBar.css
new file mode 100644
index 0000000..d9e315e
--- /dev/null
+++ b/src/web/components/nav_bar/NavBar.css
@@ -0,0 +1,304 @@
+:root {
+    --nav-bar-color: var(--black-10);
+    --nav-bar-font-color: var(--black-98);
+    --nav-bar-height: 4rem;
+    --nav-bar-shadow: 0 0.05em 0.16em var(--nav-bar-color);
+}
+
+.navBar {
+    /* sticky footer */
+    flex-shrink: 0;
+
+    min-width: 100%;
+    height: var(--nav-bar-height);
+
+    z-index: var(--nav-bar-z-index);
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    background-color: var(--nav-bar-color);
+    box-shadow: var(--nav-bar-shadow);
+    font-weight: bolder;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    min-height: var(--nav-bar-height);
+}
+.bannerContainer > a {
+    display: inherit;
+    justify-content: inherit;
+    align-items: inherit;
+    min-height: var(--nav-bar-height);
+    text-decoration: none;
+}
+
+.bannerContainer {
+    display: flex;
+    align-items: center;
+    min-height: var(--nav-bar-height);
+}
+.logo {
+    margin-left: 0.5em;
+    height: calc(var(--nav-bar-height) - 0.5em);
+    width: calc(var(--nav-bar-height) - 0.5em);
+}
+
+.bannerContainer h1 {
+    font-size: 1.5em;
+    margin: 0;
+
+    color: var(--nav-bar-font-color);
+    text-decoration: none;
+    text-transform: none;
+    font-weight: bold;
+}
+
+.burgerButton {
+    height: var(--nav-bar-height);
+    width: var(--nav-bar-height);
+    margin-left: 0.5em;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+    background: url(assets/svg/burger.svg) center center no-repeat;
+    background-size: 3em;
+    filter: invert(95%);
+}
+
+:root {
+    --menu-width: calc(100vw * 0.7);
+}
+
+.menu {
+    position: fixed;
+    inset: 0 calc(100vw - var(--menu-width)) 0 0;
+    translate: calc(var(--menu-width) * -1);
+    z-index: var(--menu-z-index);
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: var(--nav-bar-color);
+
+    transition: translate var(--transition-time) ease-in;
+}
+.menuActive {
+    translate: initial;
+}
+
+.darken {
+    z-index: calc(var(--menu-z-index) - 1);
+}
+
+.itemListContainer {
+    display: inherit;
+    flex-direction: inherit;
+    overflow: scroll;
+    height: 100%;
+}
+.itemList {
+    position: static;
+    display: block;
+    margin: 0;
+    overflow: visible;
+    padding: 0 0.5em;
+}
+.itemList + .itemList {
+    border-top: solid hsl(0, 0%, 35%) 1px;
+}
+.itemList > p {
+    margin-bottom: 1em;
+    height: var(--nav-bar-height);
+    padding-top: 1.5em;
+
+    text-align: center;
+    color: var(--nav-bar-font-color);
+    font-style: italic;
+    font-weight: 100;
+}
+
+.titleContainer {
+    display: flex;
+    align-items: end;
+    margin: 1em 0 0.5em 0.5em;
+}
+.titleContainer h3 {
+    color: var(--nav-bar-font-color);
+    font-size: 1.25em;
+    text-transform: uppercase;
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 1.0rem;
+    min-height: var(--nav-bar-height);
+
+    background-color: transparent;
+    border-radius: 1.5rem;
+    text-decoration: none;
+    color: var(--nav-bar-font-color);
+    font-size: 1.75em;
+    text-transform: uppercase;
+}
+.item:hover {
+    background-color: hsl(0, 0%, 25%);
+}
+.itemActive {
+    background-color: var(--brand-80);
+}
+.itemActive:hover {
+    color: white;
+    background-color: var(--brand-90);
+}
+.itemIcon {
+    width: 1em;
+}
+.item h4 {
+    margin-left: 2rem;
+    font-size: 0.675em;
+    text-transform: capitalize;
+    font-weight: 100;
+}
+.itemActive h4 {
+    font-weight: 800;
+}
+
+.menu span {
+    font-size: 0.8em;
+    width: 100%;
+    margin-top: auto;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: var(--nav-bar-font-color);
+}
+
+.loginStatus {
+    font-size: 0.8em;
+
+    padding: 0.75em 1em;
+
+    margin: 0em 1.5em 0em 0.7em;
+    font-weight: 600;
+}
+
+.accountContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1em;
+    width: 12em;
+
+    color: var(--black-98);
+    background-color: hsl(0, 0%, 15%);
+    padding: 0.5em 1em;
+    border-radius: 1em;
+}
+.accountIcon {
+    height: 1.75em;
+    color: hsl(186, 90%, 50%);
+}
+.accountContainer h2 {
+    margin: 0 0.4em 0 0.25em;
+}
+.accountArrow {
+    height: 0.8em;
+    rotate: -90deg;
+}
+.accountInfoItemList {
+    display: none;
+    padding-top: 0.5em;
+
+    position: absolute;
+    right: 1em;
+    top: 3em;
+    width: 12em;
+
+    flex-direction: column;
+    background-color: inherit;
+    border-radius: 1em;
+    border-top-right-radius: 0em;
+    border-top-left-radius: 0em;
+}
+.accountInfoItem {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--black-98);
+    text-decoration: none;
+    padding: 1em 0;
+}
+.accountInfoItem + .accountInfoItem {
+    border-top: 1px hsl(0, 0%, 50%) solid;
+}
+.accountInfoItem h3 {
+    font-weight: 200;
+}
+@media (max-width: 40em) {
+    .accountContainerActive {
+        background-color: hsl(0, 0%, 25%);
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    .accountArrowActive {
+        rotate: 90deg;
+    }
+    .accountInfoItemListActive {
+        display: flex;
+    }
+}
+
+@media (min-width: 40em) {
+    :root {
+        --menu-width: 15em;
+    }
+    .darken {
+        display: none;
+    }
+    .burgerButton {
+        display: none;
+    }
+    .menu {
+        translate: initial;
+        transition: none;
+        
+    }
+    .itemListContainer {
+        font-size: 0.8em;
+        box-shadow: var(--nav-bar-shadow);
+    }
+
+    .accountInfoListActive {
+        display: unset;
+    }
+    .accountContainer:hover {
+        background-color: hsl(0, 0%, 25%);
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    .accountContainer:hover .accountInfoItemList {
+        display: flex;
+    }
+    .accountContainer:hover .accountArrow {
+        rotate: 90deg;
+    }
+    .accountInfoItem:hover h3 {
+        color: white;
+        font-weight: bolder;
+    }
+}
\ No newline at end of file
diff --git a/src/web/components/nav_bar/NavBar.jsx b/src/web/components/nav_bar/NavBar.jsx
new file mode 100644
index 0000000..3c22851
--- /dev/null
+++ b/src/web/components/nav_bar/NavBar.jsx
@@ -0,0 +1,174 @@
+import React, {useState, Fragment, useContext, useEffect} from "react";
+import {Link, useLocation} from "react-router-dom";
+
+import Button from "components/button/Button.jsx";
+import Login from "components/login/Login.jsx";
+import Darken from "components/darken/Darken.jsx";
+import {UserContext} from "contexts/UserContext.jsx";
+import {StateContext} from "contexts/StateContext.jsx";
+import {refreshToken, logout} from "helpers/Auth.jsx";
+import {getSubreactFromLocation, getInfoFromSubreact} from "helpers/Location.jsx";
+
+import styles from "./NavBar.css"
+import logo from "assets/images/logo.png"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faUser, faPlay} from "@fortawesome/free-solid-svg-icons";
+
+function AccountInfoItem({title, onClick, path, className}) {
+    return (
+        <Link className={styles.accountInfoItem + (className ? " " + className : "")}
+            onClick={onClick}
+            to={path}>
+
+            <h3>{title}</h3>
+        </Link>
+    );
+}
+
+function AccountInfo({user, setUser}) {
+    // At this stage the user is logged in and we keep them logged in by periodically 
+    // refreshing our token.
+    useEffect(() => {
+        const interval = setInterval(() => {
+            refreshToken(user, setUser);
+        }, 58 * 60 * 1000); // refresh every 58 minutes, expires every sixty.
+        return () => clearInterval(interval);
+    }, []);
+    const [active, setActive] = useState(false);
+
+    return (
+        <div className={styles.accountContainer + (active ? " " + styles.accountContainerActive : "")} 
+            onClick={() => {setActive(!active);}}>
+            <FontAwesomeIcon icon={faUser} className={styles.accountIcon} />
+            <h2>{user.username ?? "anonymous"}</h2>
+            <FontAwesomeIcon icon={faPlay} className={styles.accountArrow + (active ? " " + styles.accountArrowActive : "")} />
+            <div className={styles.accountInfoItemList + (active ? " " + styles.accountInfoItemListActive : "")}>
+                <AccountInfoItem title="Profile" path="/settings" />
+                <AccountInfoItem title="Settings" path="/settings" />
+                <AccountInfoItem title="Logout" path="/" onClick={() => {logout(setUser);}} />
+            </div>
+        </div>
+    );
+}
+
+function LoginStatus({loginActive, setLoginActive}) {
+    const [user, setUser] = useContext(UserContext);
+
+    // Not logged in, request a login.
+    if (user == null) {
+        return (
+            <Button className={styles.loginStatus}
+                onClick={() => {setLoginActive(!loginActive);}}>
+                
+                <h2>Not Logged In</h2>
+            </Button>
+        );
+    }
+
+    return <AccountInfo user={user} setUser={setUser} />;
+}
+
+function Account() {
+    const [state, setState] = useContext(StateContext);
+    const {loginActive} = state;
+    const setLoginActive = (isActive) => {setState({...state, loginActive: isActive});};
+
+    return (
+        <Fragment>
+            <Login active={loginActive} setActive={setLoginActive} />
+            <LoginStatus loginActive={loginActive} setLoginActive={setLoginActive} />
+        </Fragment>
+    );
+}
+
+function Banner({navBarActive, setNavBarActive, shouldToggleNavBar}) {
+
+    return (
+        <div className={styles.bannerContainer}>
+            <button className={styles.burgerButton}
+                onClick={() => setNavBarActive(!navBarActive)} />
+
+            <Link to="/" 
+                onClick={shouldToggleNavBar ? () => setNavBarActive(!navBarActive) : null}>
+
+                <img className={styles.logo} src={logo} />
+                <h1>GoReact</h1>
+            </Link>
+        </div>
+    );
+}
+
+function Item({path, setNavBarActive}) {
+    const location = useLocation();
+    const subreact = path.replace("/", ""); // "a", "m" etc
+    const {icon, name} = getInfoFromSubreact(subreact);
+
+    return (
+        <Link to={path} 
+            className={styles.item + (getSubreactFromLocation(location) === subreact ? " " + styles.itemActive : "")}
+            onClick={() => setNavBarActive(false)}>
+                <FontAwesomeIcon icon={icon} className={styles.itemIcon} />
+                <h4>{name}</h4>
+        </Link>
+    );
+}
+
+function ItemList({children, title}) {
+
+    return (
+        <div className={styles.itemList}>
+            <div className={styles.titleContainer}>
+                <h3>{title}</h3>
+            </div>
+            {children && React.Children.count(children) > 0 ? children : <p>There's nothing here...</p>}
+        </div>
+    );
+}
+
+function Menu({navBarActive, setNavBarActive}) {
+
+    return (
+        <div className={styles.container}>
+            <nav className={styles.menu + (navBarActive ? " " + styles.menuActive : "")}>
+                <Banner navBarActive={navBarActive} setNavBarActive={setNavBarActive} shouldToggleNavBar />
+                <div className={styles.itemListContainer}>
+                    <ItemList title="Subreacts">
+                        <Item path="/" setNavBarActive={setNavBarActive} />
+                        <Item path="/t" setNavBarActive={setNavBarActive} />
+                        <Item path="/g" setNavBarActive={setNavBarActive} />
+                        <Item path="/k" setNavBarActive={setNavBarActive} />
+                        <Item path="/p" setNavBarActive={setNavBarActive} />
+                        <Item path="/a" setNavBarActive={setNavBarActive} />
+                        <Item path="/pr" setNavBarActive={setNavBarActive} />
+                        <Item path="/m" setNavBarActive={setNavBarActive} />
+                    </ItemList>
+
+                    {/*TODO*/}
+                    <ItemList title="Watched Threads">
+                    </ItemList>
+                    <ItemList title="Your Threads">
+                    </ItemList>
+                    <ItemList title="Recent Threads">
+                    </ItemList>
+
+                    <span>
+                        <p>GoReact 2022-2023</p>
+                    </span>
+                </div>
+            </nav>
+            <Account />
+        </div>
+    );
+}
+
+export default function NavBar() {
+    const [active, setActive] = useState(false);
+    
+    return (
+        <header className={styles.navBar}>
+            <Darken active={active} onClick={() => setActive(false)} className={styles.darken} />
+            <Banner setNavBarActive={setActive} />
+            <Menu navBarActive={active} setNavBarActive={setActive} />
+        </header>
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/not_found/NotFound.css b/src/web/components/not_found/NotFound.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/web/components/not_found/NotFound.jsx b/src/web/components/not_found/NotFound.jsx
new file mode 100644
index 0000000..5546d1e
--- /dev/null
+++ b/src/web/components/not_found/NotFound.jsx
@@ -0,0 +1,10 @@
+import React, {Fragment} from "react";
+import styles from "./NotFound.css";
+
+export default function NotFound() {
+    return (
+        <Fragment>
+            <p>Not found route!</p>
+        </Fragment>
+    );
+}
diff --git a/src/web/components/post/Post.css b/src/web/components/post/Post.css
new file mode 100644
index 0000000..8721640
--- /dev/null
+++ b/src/web/components/post/Post.css
@@ -0,0 +1,91 @@
+
+
+.postCard {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    font-size: 2em;
+    margin-bottom: 0.75rem;
+    padding: 1rem 1rem;
+
+    background-color: var(--black-10);
+    border-radius: 0.5em;
+    color: white;
+    box-shadow: none;
+
+    cursor: pointer;
+}
+.postCard:hover {
+    background-color: hsl(0, 0%, 25%);
+}
+
+.postCard > img {
+    flex-shrink: 0;
+
+    border-radius: 50%;
+    height: 2.5em;
+    width: 2.5em;
+}
+
+.rowContainer {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    justify-content: space-between;
+
+    height: 2.5em;
+    padding-left: 0.5em;
+    min-width: 0;
+
+    color: var(--black-95);
+}
+
+.rowContainer > h4 {
+    font-size: 0.4em;
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.titleContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.titleContainer h3 {
+    font-size: 0.5em;
+    font-weight: bold;
+    color: var(--black-98);
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.titleContainer h4 {
+    font-size: 0.5em;
+    font-style: italic;
+    white-space: nowrap;
+}
+
+.placeholder {
+    text-decoration: line-through hsl(0, 0%, 60%) 1em;
+}
+.placeholder img {
+    background-color: hsl(0, 0%, 50%);
+}
+
+.postIconsContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    font-size: 0.5em;
+    color: var(--brand-50);
+}
+.postIconsContainer > div {
+    margin-left: 0.25em;
+}
diff --git a/src/web/components/post/Post.jsx b/src/web/components/post/Post.jsx
new file mode 100644
index 0000000..3780a38
--- /dev/null
+++ b/src/web/components/post/Post.jsx
@@ -0,0 +1,63 @@
+import React from "react";
+import {useLocation, useNavigate} from "react-router-dom";
+import dayjs from "dayjs";
+import * as relativeTime from "dayjs/plugin/relativeTime";
+
+import Card from "components/card/Card.jsx";
+import styles from "./Post.css";
+import {getInfoFromSubreact} from "helpers/Location.jsx";
+
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+
+dayjs.extend(relativeTime);
+
+function TopRow({title, timeUpdated}) {
+    return (
+        <div className={styles.titleContainer}>
+            <h3>
+                {title}
+            </h3>
+            <h4>
+                {dayjs.unix(timeUpdated).fromNow()}
+            </h4>
+        </div>
+    );
+}
+
+function MiddleRow({contents}) {
+    return (
+        <h4>
+            {contents}
+        </h4>
+    );
+}
+
+function BottomRow({subreact}) {
+    const {icon, name} = getInfoFromSubreact(subreact);
+
+    return (
+        <div className={styles.postIconsContainer}>
+            <FontAwesomeIcon icon={icon} className={styles.subreactIcon} />
+            <div>
+                {name}
+            </div>
+        </div>
+    );
+}
+
+export default function Post({title, contents, timeUpdated, placeholder, subreact, uid}) {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    return (
+        <Card className={styles.postCard + (placeholder ? " " + styles.placeholder : "")}
+            onClick={() => {navigate("/" + subreact + "/" + uid);}}>
+            <img src={placeholder ? null : "/image/" + uid + ".png?thumbnail=1"} />
+            <div className={styles.rowContainer}>
+                <TopRow title={title} timeUpdated={timeUpdated} />
+                <MiddleRow contents={contents} />
+                <BottomRow subreact={subreact} />
+            </div>
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/posts/Posts.css b/src/web/components/posts/Posts.css
new file mode 100644
index 0000000..1bee23a
--- /dev/null
+++ b/src/web/components/posts/Posts.css
@@ -0,0 +1,84 @@
+.container {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+
+    width: 100%;
+}
+.containerPadding {
+    padding: 1rem 1rem 0 1rem;
+    overflow: scroll;
+}
+.postContainer {
+    flex-basis: 100%;
+    transition: opacity var(--transition-time) ease-in-out;
+}
+.postContainerActive {
+    cursor: pointer;
+    opacity: 50%;
+}
+.blockEvents {
+    pointer-events: none;
+}
+
+.container > h1 {
+    font-size: 1.8em;
+
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+
+    color: white;
+    font-weight: bolder;
+    text-align: center;
+}
+.container > h2 {
+    color: var(--black-95);
+    text-align: center;
+}
+.container > h3 {
+    margin-top: 1em;
+    padding: 1.5em 2em;
+
+    color: var(--brand-100);
+    opacity: 0.5;
+    background-color: var(--black-5);
+    border-radius: 1em;
+}
+.container > button {
+    align-self: center;
+
+    margin-top: 1.5em;
+
+    text-transform: uppercase;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.containerFade {
+    animation: containerFade var(--transition-time) linear;
+}
+@keyframes containerFade {
+    0% {
+        opacity: 0%;
+    }
+    100% {
+        opacity: 100%;
+    }
+}
+
+.containerLoading {
+    filter: blur(1px);
+    pointer-events: none;
+    animation: containerLoading 0.6s infinite;
+    mask-image: linear-gradient(to bottom, black 0%, transparent 22em);
+}
+@keyframes containerLoading {
+    0%, 100% {
+        opacity: 100%;
+    }
+    50% {
+        opacity: 80%;
+    }
+}
diff --git a/src/web/components/posts/Posts.jsx b/src/web/components/posts/Posts.jsx
new file mode 100644
index 0000000..3944f67
--- /dev/null
+++ b/src/web/components/posts/Posts.jsx
@@ -0,0 +1,163 @@
+import React, {useState, useEffect, useRef} from "react";
+import {Route, Routes, useLocation, useNavigate} from "react-router-dom";
+
+
+import Button from "components/button/Button.jsx";
+import Submission from "components/submission/Submission.jsx";
+import Post from "components/post/Post.jsx";
+import {getSubreactFromLocation} from "helpers/Location.jsx";
+
+import styles from "./Posts.css";
+
+async function makePostsRequest(location, setPosts, setError, mounted) {
+    const init = {
+        method: "GET",
+        referrer: "same-origin",
+    }
+    const url = "/api/posts?" + new URLSearchParams({
+        page: 0,
+        amount: 25,
+        subreact: getSubreactFromLocation(location),
+    });
+    return fetch(url, init)
+        .then((response) => {
+            return response.json()
+                .catch(() => {
+                    throw new Error("unexpected response from server")
+                })
+        })
+        .then((json) => {
+            if ("error" in json) {
+                throw new Error(json.error);
+            }
+            if (!mounted) {
+                return;
+            }
+            setPosts(json.posts);
+        })
+        .catch((error) => {
+            console.log(error);
+            if (!mounted) {
+                return;
+            }
+            setError(error.message); 
+        });
+}
+
+function PostsError({navigate, error}) {
+    return (
+        <div className={styles.container + " " + styles.containerFade}>
+            <h1>Something's wrong!</h1>
+            <h2>Sorry, but an unexpected issue has forced us to stop early. Here are the technical details:</h2>
+            <h3>Error: {error}</h3>
+            <Button onClick={() => {navigate(0);}}>
+                Try again
+            </Button>
+        </div>
+    );
+}
+
+function PostsLoading() {
+    return (
+        <div className={styles.container + " " + styles.containerLoading}>
+            {[...Array(3)].map((_, i) =>
+                <Post placeholder key={i} />
+            )}
+        </div>
+    );
+}
+
+function PostsEmpty({navigate}) {
+    return (
+        <div className={styles.container + " " + styles.containerFade}>
+            <h1>There's nothing here?!?</h1>
+            <h2>Try changing subreacts.</h2>
+            <Button onClick={() => {navigate("/");}}>
+                Take me home
+            </Button>
+        </div>
+    );
+}
+
+function PostsStates({error, posts, navigate}) {
+    if (error !== null) { // Error message.
+        return (
+            <PostsError navigate={navigate} error={error} />
+        );
+    }
+
+    if (posts == null) {
+        return (
+            <PostsLoading />
+        )
+    }
+
+
+    if (posts.length == 0) {
+        return (
+            <PostsEmpty navigate={navigate} />
+        );
+    }
+
+    return (
+        posts.map(({uid, title, contents, time_updated, thumbnail, subreact}, i) => 
+            <Post key={i}
+                    uid={uid} 
+                    title={title}
+                    contents={contents}
+                    timeUpdated={time_updated}
+                    image={thumbnail}
+                    subreact={subreact} />)
+    );
+}
+
+export default function Posts() {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const locationRef = useRef(location);
+
+    const [posts, setPosts] = useState(null);
+    const [error, setError] = useState(null);
+    const [submissionActive, setSubmissionActive] = useState(false);
+
+
+    // We make a request if we're at the homepage or if we're changing subreacts.
+    const shouldMakeRequest = () => {
+        if (posts === null) {
+            return true;
+        }
+        const [previous, current] = 
+            [locationRef.current, location].map((loc) => getSubreactFromLocation(loc));
+        return previous != current;
+    };
+    // This is a bit ugly, we're caching off our previous location so that we know
+    // if we should update or not. 
+    useEffect(() => {
+        let mounted = true;
+
+        if (shouldMakeRequest()) {
+            setPosts(null);
+            makePostsRequest(location, setPosts, setError, mounted);
+        }
+
+        locationRef.current = location;
+        return () => {
+            setError(null);
+            mounted = false;
+        }
+    }, [location]);
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.containerPadding}>
+                <div className={styles.postContainer + (submissionActive ? " " + styles.postContainerActive : "")}
+                    onClick={(submissionActive ? () => {setSubmissionActive(false);} : null)}>
+                        <div className={(submissionActive ? styles.blockEvents : "")}>
+                            <PostsStates error={error} posts={posts} navigate={navigate}/>
+                        </div>
+                </div>
+            </div>
+            <Submission active={submissionActive} setActive={setSubmissionActive} />
+        </div>
+    );
+}
diff --git a/src/web/components/settings/Settings.css b/src/web/components/settings/Settings.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/web/components/settings/Settings.jsx b/src/web/components/settings/Settings.jsx
new file mode 100644
index 0000000..e2068a1
--- /dev/null
+++ b/src/web/components/settings/Settings.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import styles from "./Settings.css";
+
+export default function Settings() {
+
+    return (
+        <p>settings route!</p>
+    );
+}
\ No newline at end of file
diff --git a/src/web/components/submission/Submission.css b/src/web/components/submission/Submission.css
new file mode 100644
index 0000000..a170132
--- /dev/null
+++ b/src/web/components/submission/Submission.css
@@ -0,0 +1,146 @@
+.container {
+    position: absolute;
+    inset: 0;
+
+    width: 100%;
+    height: 100%;
+    padding: 0em 1em;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+
+    visibility: hidden;
+    overflow: hidden;
+}
+
+.card {
+    --submission-height: 37em;
+
+    position: relative;
+
+    width: 100%;
+    padding: 1em;
+    height: var(--submission-height);
+
+    color: var(--black-98);
+    background-color: var(--black-10);
+    border-radius: 0;
+    border-top: 0.25em solid var(--brand-80);
+    box-shadow: unset;
+
+    visibility: initial;
+    translate: 0 var(--submission-height);
+
+    transition: translate var(--transition-time) ease-in-out;
+}
+.cardActive {
+    translate: 0 0;
+}
+
+.tabContainer {
+    font-size: 5em;
+
+    position: absolute;
+    top: -0.5em;
+    right: 0em;
+
+    width: var(--tab-size);
+    height: 0.5em;
+
+    overflow: hidden;
+}
+.tab {
+    --tab-size: 1em;
+    width: var(--tab-size);
+    height: var(--tab-size);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    padding-bottom: calc(0.5 * var(--tab-size));
+
+    border-radius: 1em;
+    background-color: var(--brand-80);
+    cursor: pointer;
+}
+.tab:hover {
+    color: white;
+}
+.tabIcon {
+    position: absolute;
+
+    width: calc(0.4 * var(--tab-size));
+    height: calc(0.4 * var(--tab-size));
+
+    background-color: transparent;
+    opacity: 100%;
+
+    transition: opacity var(--transition-time) linear;
+}
+.tabIconHidden {
+    opacity: 0%;
+}
+
+.card h1 {
+    font-size: 1.8em;
+    font-weight: bolder;
+    text-align: center;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+.contentsInput textarea {
+    min-height: 15em;
+    border-radius: 1em;
+}
+.fileInput input {
+    border: unset;
+    margin-bottom: 0;
+}
+
+.submissionButton {
+    margin: 0.5rem auto 0;
+    padding: 0.25em 2em;
+    min-height: 2.3em;
+    min-width: 8em;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 1.25em;
+}
+
+.error {
+    margin-top: 0.5em;
+    min-height: 2em;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    visibility: hidden;
+}
+.errorActive{ 
+    visibility: visible;
+}
+.error p {
+    padding: 0.5em 1em;
+
+    color: var(--brand-80);
+    background-color: var(--black-15);
+    border-radius: 1em;
+    font-style: italic;
+    font-weight: 300;
+    text-transform: uppercase;
+}
+
+.loading {
+    filter: invert(100%);
+}
\ No newline at end of file
diff --git a/src/web/components/submission/Submission.jsx b/src/web/components/submission/Submission.jsx
new file mode 100644
index 0000000..9fc080e
--- /dev/null
+++ b/src/web/components/submission/Submission.jsx
@@ -0,0 +1,221 @@
+import React, {useEffect, useState, useContext} from "react";
+import {useLocation} from "react-router-dom";
+import {encode} from "base64-arraybuffer";
+
+import {getSubreactFromLocation} from "helpers/Location.jsx";
+import {UserContext} from "contexts/UserContext.jsx";
+import {StateContext} from "contexts/StateContext.jsx";
+
+import Card from "components/card/Card.jsx";
+import Button from "components/button/Button.jsx";
+import Input from "components/input/Input.jsx";
+import Loading from "components/loading/Loading.jsx";
+
+import styles from "./Submission.css";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faMinus, faPlus} from "@fortawesome/free-solid-svg-icons";
+import {getFieldError, correctFieldAnimate, isSupportedExtension} from "helpers/Input.jsx";
+
+const maxFileSize = 4 * 1000 * 1000; // 4MB max size
+
+const validateTitle = (title) => getFieldError(title?.target?.value, [3, 128]);
+const validateContents = (contents) => getFieldError(contents?.target?.value, [5, 3000]);
+function validateFile(file) {
+    const files = file?.target?.files;
+    if (files == null || files.length == 0) {
+        return "Required";
+    }
+    const f = files.item(0);
+    if (f.size > maxFileSize) { // 4MB
+        return "File too large, exceeded 4MB";
+    }
+    const ext = f.name.split(".")?.pop()?.toLowerCase();
+    if (!isSupportedExtension(ext)) {
+        return "Unsupported image extension";
+    }
+    return null;
+}
+
+function ErrorMessage({message}) {
+    return (
+        <div className={styles.error + (message != null ? " " + styles.errorActive : "")}>
+            <p>
+                {message}
+            </p>
+        </div>
+    );
+}
+
+function RequestButton({promise, setPromise, title, setTitle, contents, setContents,
+                        file, setFile, setError, className, children, setSubmissionActive, subreact}) {
+    const onClick = (event) => {
+        event.preventDefault();
+        if (promise != null) {
+            return;
+        }
+        setError(null);
+
+        const titleErrors = validateTitle(title);
+        const contentsErrors = validateContents(contents);
+        const fileErrors = validateFile(file);
+        if (titleErrors != null || contentsErrors != null || fileErrors != null) {
+            correctFieldAnimate(title, setTitle, titleErrors);
+            correctFieldAnimate(contents, setContents, contentsErrors);
+            correctFieldAnimate(file, setFile, fileErrors);
+            return;
+        }
+        
+        setPromise(file.target.files.item(0).arrayBuffer()
+            .then((buffer) => {
+                const init = {
+                    method: "POST",
+                    headers: {
+                        'Content-Type': "application/json"
+                    },
+                    body: JSON.stringify({
+                        "title": title.target.value,
+                        "contents": contents.target.value,
+                        "subreact": subreact,
+                        "file": encode(buffer),
+                    }),
+                    referrer: "same-origin",
+                };
+                return fetch("/api/post", init);
+            })
+            .then((response) => {
+                if (response.ok) {
+                    setSubmissionActive(false);
+                    setContents(null);
+                    setTitle(null);
+                    setFile(null);
+                    return;
+                }
+
+                return response.json()
+                    .then((json) => {
+                        if ("error" in json) {
+                            throw new Error(json.error);
+                        }
+                        throw new Error("unexpected data received");
+                    });
+            })
+            .catch((error) => {
+                console.log(error);
+                setError(error.message);
+            })
+            .finally(() => {
+                setPromise(null);
+            }));
+    }
+
+    return (
+        <Button className={className} onClick={onClick}>
+            {promise == null ? children : <Loading className={styles.loading} />}
+        </Button>
+    );
+}
+
+function TabIcon({icon, submissionActive, isDefault}) {
+    return (
+        <FontAwesomeIcon icon={icon} 
+            className={styles.tabIcon + 
+                (!isDefault == submissionActive ? " " + styles.tabIconHidden : "")} />
+    );
+}
+
+function Tab({submissionActive, setSubmissionActive, user, setLoginActive}) {
+    const [animate, setAnimate] = useState(false);
+
+    const onClick = () => {
+        if (user === null) {
+            setLoginActive(true);
+            return;
+        }
+        setAnimate(true);
+        setSubmissionActive(!submissionActive);
+    };
+
+    return (
+        <div className={styles.tabContainer}>
+            <div className={styles.tab + (animate ? " " + styles.fade : "")} onClick={onClick}>
+                <TabIcon icon={faMinus} submissionActive={submissionActive} isDefault />
+                <TabIcon icon={faPlus} submissionActive={submissionActive} />
+            </div>
+        </div>
+    );
+}
+
+function SubmissionForm({setSubmissionActive, setError, subreact}) {
+    const [promise, setPromise] = useState(null);
+    const [title, setTitle] = useState(null);
+    const [contents, setContents] = useState(null);
+    const [file, setFile] = useState(null);
+
+    return (
+        <form>
+            <Input type="text" 
+                id="title"
+                title="Title"
+                field={title}
+                setField={setTitle}
+                validateField={validateTitle} />
+
+            <Input className={styles.contentsInput}
+                inputType="textarea"
+                type="text" 
+                title="Contents"
+                field={contents}
+                setField={setContents}
+                validateField={validateContents} />
+
+            <Input className={styles.fileInput}
+                inputType="file"
+                type="file"
+                title="Upload image"
+                field={file}
+                setField={setFile}
+                validateField={validateFile}/>
+
+            <RequestButton className={styles.submissionButton}
+                setError={setError} setSubmissionActive={setSubmissionActive}
+                promise={promise} setPromise={setPromise}
+                title={title} setTitle={setTitle}
+                contents={contents} setContents={setContents}
+                file={file} setFile={setFile} subreact={subreact}>
+
+                Submit
+            </RequestButton>
+        </form>
+    );
+}
+
+export default function Submission({active, setActive}) {
+    const [error, setError] = useState(null);
+
+    const location = useLocation();
+    const subreact = getSubreactFromLocation(location);
+
+    const [user] = useContext(UserContext);
+
+    const [state, setState] = useContext(StateContext);
+    const setLoginActive = (active) => {setState({...state, loginActive: active})};
+
+    // If our subreact is the front page, disable our ability to post. Posting
+    // should be done to the main subreact.
+    useEffect(() => {
+        if (subreact === "") {
+            setActive(false);
+        }
+    }, [location]);
+
+    return (
+        <div className={styles.container}>
+            <Card className={styles.card + (active ? " " + styles.cardActive : "")}>
+                <Tab submissionActive={active} setSubmissionActive={setActive} user={user} setLoginActive={setLoginActive} />
+                <h1>Make a new submission</h1>
+                <ErrorMessage message={error} />
+                <SubmissionForm setSubmissionActive={setActive} setError={setError} subreact={subreact}/>
+            </Card>
+        </div>
+    );
+}
\ No newline at end of file
-- 
cgit v1.2.3