Add Redux and reducers.

Load i18n files and add dayjs.

src/context/Locale.tsx

@@ -1,10 +1,162 @@
 import { IntlProvider } from "preact-i18n";
+import { connectState } from "../redux/connector";
 import definition from "../../external/lang/en.json";
+import { useEffect, useState } from "preact/hooks";
+
+import dayjs from "dayjs";
+import calendar from "dayjs/plugin/calendar";
+import update from "dayjs/plugin/updateLocale";
+import format from "dayjs/plugin/localizedFormat";
+dayjs.extend(calendar);
+dayjs.extend(format);
+dayjs.extend(update);
+
+export enum Language {
+    ENGLISH = "en",
+
+    ARABIC = "ar",
+    AZERBAIJANI = "az",
+    CZECH = "cs",
+    GERMAN = "de",
+    SPANISH = "es",
+    FINNISH = "fi",
+    FRENCH = "fr",
+    HINDI = "hi",
+    CROATIAN = "hr",
+    HUNGARIAN = "hu",
+    INDONESIAN = "id",
+    LITHUANIAN = "lt",
+    MACEDONIAN = "mk",
+    DUTCH = "nl",
+    POLISH = "pl",
+    PORTUGUESE_BRAZIL = "pt_BR",
+    ROMANIAN = "ro",
+    RUSSIAN = "ru",
+    SERBIAN = "sr",
+    SWEDISH = "sv",
+    TURKISH = "tr",
+    UKRANIAN = "uk",
+    CHINESE_SIMPLIFIED = "zh_Hans",
+
+    OWO = "owo",
+    PIRATE = "pr",
+    BOTTOM = "bottom",
+    PIGLATIN = "piglatin",
+    HARDCORE = "hardcore"
+}
+
+export interface LanguageEntry {
+    display: string;
+    emoji: string;
+    i18n: string;
+    dayjs?: string;
+    rtl?: boolean;
+}
+
+export const Languages: { [key in Language]: LanguageEntry } = {
+    en: {
+        display: "English (Traditional)",
+        emoji: "🇬🇧",
+        i18n: "en",
+        dayjs: "en-gb"
+    },
+
+    ar: { display: "عربي", emoji: "🇸🇦", i18n: "ar", rtl: true },
+    az: { display: "Azərbaycan dili", emoji: "🇦🇿", i18n: "az" },
+    cs: { display: "Čeština", emoji: "🇨🇿", i18n: "cs" },
+    de: { display: "Deutsch", emoji: "🇩🇪", i18n: "de" },
+    es: { display: "Español", emoji: "🇪🇸", i18n: "es" },
+    fi: { display: "suomi", emoji: "🇫🇮", i18n: "fi" },
+    fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
+    hi: { display: "हिन्दी", emoji: "🇮🇳", i18n: "hi" },
+    hr: { display: "Hrvatski", emoji: "🇭🇷", i18n: "hr" },
+    hu: { display: "magyar", emoji: "🇭🇺", i18n: "hu" },
+    id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" },
+    lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" },
+    mk: { display: "Македонски", emoji: "🇲🇰", i18n: "mk" },
+    nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" },
+    pl: { display: "Polski", emoji: "🇵🇱", i18n: "pl" },
+    pt_BR: {
+        display: "Português (do Brasil)",
+        emoji: "🇧🇷",
+        i18n: "pt_BR",
+        dayjs: "pt-br"
+    },
+    ro: { display: "Română", emoji: "🇷🇴", i18n: "ro" },
+    ru: { display: "Русский", emoji: "🇷🇺", i18n: "ru" },
+    sr: { display: "Српски", emoji: "🇷🇸", i18n: "sr" },
+    sv: { display: "Svenska", emoji: "🇸🇪", i18n: "sv" },
+    tr: { display: "Türkçe", emoji: "🇹🇷", i18n: "tr" },
+    uk: { display: "Українська", emoji: "🇺🇦", i18n: "uk" },
+    zh_Hans: {
+        display: "中文 (简体)",
+        emoji: "🇨🇳",
+        i18n: "zh_Hans",
+        dayjs: "zh"
+    },
+
+    owo: { display: "OwO", emoji: "🐱", i18n: "owo", dayjs: "en-gb" },
+    pr: { display: "Pirate", emoji: "🏴‍☠️", i18n: "pr", dayjs: "en-gb" },
+    bottom: { display: "Bottom", emoji: "🥺", i18n: "bottom", dayjs: "en-gb" },
+    piglatin: { display: "Pig Latin", emoji: "🐖", i18n: "piglatin", dayjs: "en-gb" },
+    hardcore: {
+        display: "Hardcore Mode",
+        emoji: "🔥",
+        i18n: "hardcore",
+        dayjs: "en-gb"
+    }
+};
 
 interface Props {
     children: JSX.Element | JSX.Element[];
+    locale: Language;
 }
 
-export default function Locale({ children }: Props) {
-    return <IntlProvider definition={definition}>{children}</IntlProvider>;
+function Locale({ children, locale }: Props) {
+    const [defns, setDefinition] = useState(definition);
+    const lang = Languages[locale];
+
+    useEffect(() => {
+        if (locale === 'en') {
+            setDefinition(definition);
+            dayjs.locale('en');
+            return;
+        }
+
+        if (lang.i18n === "hardcore") {
+            setDefinition({} as any);
+            return;
+        }
+
+        import(
+            `../../external/lang/${lang.i18n}.json`
+        ).then(async lang_file => {
+            let defn = lang_file.default;
+            let target = lang.dayjs ?? lang.i18n;
+            let dayjs_locale = await import(/* @vite-ignore */ `/node_modules/dayjs/esm/locale/${target}.js`);
+
+            if (defn.dayjs) {
+                dayjs.updateLocale(target, { calendar: defn.dayjs });
+            }
+
+            dayjs.locale(dayjs_locale.default);
+            setDefinition(defn);
+        });
+    }, [locale]);
+
+    useEffect(() => {
+        document.body.style.direction = lang.rtl ? "rtl" : "";
+    }, [ lang.rtl ]);
+
+    return <IntlProvider definition={defns}>{children}</IntlProvider>;
 }
+
+export default connectState<Omit<Props, 'locale'>>(
+    Locale,
+    state => {
+        return {
+            locale: state.locale
+        };
+    },
+    true
+);

src/context/Theme.tsx

@@ -1,41 +1,137 @@
+import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
 import { createGlobalStyle } from "styled-components";
+import { Children } from "../types/Preact";
+import { Helmet } from "react-helmet";
 
-// ! TEMP START
-const a = {
-    light: false,
-    accent: "#FD6671",
-    background: "#191919",
-    foreground: "#F6F6F6",
-    block: "#2D2D2D",
-    "message-box": "#363636",
-    mention: "rgba(251, 255, 0, 0.06)",
-    success: "#65E572",
-    warning: "#FAA352",
-    error: "#F06464",
-    hover: "rgba(0, 0, 0, 0.1)",
-    "sidebar-active": "#FD6671",
-    "scrollbar-thumb": "#CA525A",
-    "scrollbar-track": "transparent",
-    "primary-background": "#242424",
-    "primary-header": "#363636",
-    "secondary-background": "#1E1E1E",
-    "secondary-foreground": "#C8C8C8",
-    "secondary-header": "#2D2D2D",
-    "tertiary-background": "#4D4D4D",
-    "tertiary-foreground": "#848484",
-    "status-online": "#3ABF7E",
-    "status-away": "#F39F00",
-    "status-busy": "#F84848",
-    "status-streaming": "#977EFF",
-    "status-invisible": "#A5A5A5",
+export type Variables =
+    | "accent"
+    | "background"
+    | "foreground"
+    | "block"
+    | "message-box"
+    | "mention"
+    | "success"
+    | "warning"
+    | "error"
+    | "hover"
+    | "sidebar-active"
+    | "scrollbar-thumb"
+    | "scrollbar-track"
+    | "primary-background"
+    | "primary-header"
+    | "secondary-background"
+    | "secondary-foreground"
+    | "secondary-header"
+    | "tertiary-background"
+    | "tertiary-foreground"
+    | "status-online"
+    | "status-away"
+    | "status-busy"
+    | "status-streaming"
+    | "status-invisible";
+
+export type Theme = {
+    [variable in Variables]: string;
+} & {
+    light?: boolean;
+    css?: string;
 };
 
-export const GlobalTheme = createGlobalStyle`
+export interface ThemeOptions {
+    preset?: string;
+    custom?: Partial<Theme>;
+}
+
+// Generated from https://gitlab.insrt.uk/revolt/community/themes
+export const PRESETS: { [key: string]: Theme } = {
+    light: {
+        light: true,
+        accent: "#FD6671",
+        background: "#F6F6F6",
+        foreground: "#101010",
+        block: "#414141",
+        "message-box": "#F1F1F1",
+        mention: "rgba(251, 255, 0, 0.40)",
+        success: "#65E572",
+        warning: "#FAA352",
+        error: "#F06464",
+        hover: "rgba(0, 0, 0, 0.2)",
+        "sidebar-active": "#FD6671",
+        "scrollbar-thumb": "#CA525A",
+        "scrollbar-track": "transparent",
+        "primary-background": "#FFFFFF",
+        "primary-header": "#F1F1F1",
+        "secondary-background": "#F1F1F1",
+        "secondary-foreground": "#888888",
+        "secondary-header": "#F1F1F1",
+        "tertiary-background": "#4D4D4D",
+        "tertiary-foreground": "#646464",
+        "status-online": "#3ABF7E",
+        "status-away": "#F39F00",
+        "status-busy": "#F84848",
+        "status-streaming": "#977EFF",
+        "status-invisible": "#A5A5A5",
+    },
+    dark: {
+        light: false,
+        accent: "#FD6671",
+        background: "#191919",
+        foreground: "#F6F6F6",
+        block: "#2D2D2D",
+        "message-box": "#363636",
+        mention: "rgba(251, 255, 0, 0.06)",
+        success: "#65E572",
+        warning: "#FAA352",
+        error: "#F06464",
+        hover: "rgba(0, 0, 0, 0.1)",
+        "sidebar-active": "#FD6671",
+        "scrollbar-thumb": "#CA525A",
+        "scrollbar-track": "transparent",
+        "primary-background": "#242424",
+        "primary-header": "#363636",
+        "secondary-background": "#1E1E1E",
+        "secondary-foreground": "#C8C8C8",
+        "secondary-header": "#2D2D2D",
+        "tertiary-background": "#4D4D4D",
+        "tertiary-foreground": "#848484",
+        "status-online": "#3ABF7E",
+        "status-away": "#F39F00",
+        "status-busy": "#F84848",
+        "status-streaming": "#977EFF",
+        "status-invisible": "#A5A5A5",
+    },
+};
+
+const GlobalTheme = createGlobalStyle<{ theme: Theme }>`
 :root {
-	${Object.keys(a).map((key) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return `--${key}: ${(a as any)[key]};`;
-    })}
+	${(props) =>
+        (Object.keys(props.theme) as Variables[]).map((key) => {
+            return `--${key}: ${props.theme[key]};`;
+        })}
 }
 `;
-// ! TEMP END
+
+interface Props {
+    children: Children;
+}
+
+export default function Theme(props: Props) {
+    const theme = PRESETS.dark;
+
+    return (
+        <>
+            <Helmet>
+                <meta
+                    name="theme-color"
+                    content={
+                        isTouchscreenDevice
+                            ? theme["primary-header"]
+                            : theme["tertiary-background"]
+                    }
+                />
+            </Helmet>
+            <GlobalTheme theme={theme} />
+            {props.children}
+        </>
+    );
+}

src/context/index.tsx

@@ -0,0 +1,15 @@
+import State from "../redux/State";
+import { Children } from "../types/Preact";
+
+import Locale from "./Locale";
+import Theme from "./Theme";
+
+export default function Context({ children }: { children: Children }) {
+    return (
+        <State>
+            <Locale>
+                <Theme>{children}</Theme>
+            </Locale>
+        </State>
+    );
+}

src/context/revoltjs/RevoltClient.tsx

@@ -0,0 +1,19 @@
+import { Client } from 'revolt.js';
+
+export enum ClientStatus {
+    LOADING,
+    READY,
+    OFFLINE,
+    DISCONNECTED,
+    CONNECTING,
+    RECONNECTING,
+    ONLINE
+}
+
+export const RevoltJSClient = new Client({
+    autoReconnect: false,
+    apiURL: process.env.API_SERVER,
+    debug: process.env.NODE_ENV === "development",
+    // Match sw.js#13
+    // db: new Db("state", 3, ["channels", "servers", "users", "members"])
+});

src/context/revoltjs/messages.ts

@@ -0,0 +1,10 @@
+import { Message } from "revolt.js/dist/api/objects";
+
+export type MessageObject = Omit<Message, "edited"> & { edited?: string };
+export function mapMessage(message: Partial<Message>) {
+    const { edited, ...msg } = message;
+    return {
+        ...msg,
+        edited: edited?.$date
+    } as MessageObject;
+}