src/styles/index.scss

-@import "@fontsource/open-sans/300.css";
-@import "@fontsource/open-sans/400.css";
-@import "@fontsource/open-sans/600.css";
-@import "@fontsource/open-sans/700.css";
+@import "variables";
+@import "context-menu";
+@import "elements";
+@import "page";
 
-@import "@fontsource/open-sans/300-italic.css";
-@import "@fontsource/open-sans/400-italic.css";
-@import "@fontsource/open-sans/600-italic.css";
-@import "@fontsource/open-sans/700-italic.css";
+@import "react-overlapping-panels/dist";
+@import "tippy.js/dist/tippy.css";
 
-@import "./temp-theme.scss";
-
-* {
-	text-rendering: optimizeLegibility !important;
-    -webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-
-    
-    scrollbar-width: thin;
-    box-sizing: border-box;
-}
-
-html {
-    contain: content;
-    background: var(--background);
-    background-size: cover !important;
-    background-repeat: no-repeat !important;
-}
-
-html,
-body {
-    font-family: "Open Sans", sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    caret-color: var(--accent);
-    color: var(--foreground);
-
-    -webkit-tap-highlight-color: transparent;
-    -webkit-overflow-scrolling: touch;
-    -webkit-text-size-adjust: 100%;
-    overscroll-behavior: contain;
-
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
-
-::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-}
-
-::selection {
-    background: var(--accent);
-    color: var(--foreground);
-}
-
-::-moz-selection {
-    background: var(--accent);
-    color: var(--foreground);
-}
-
-::-webkit-selection {
-    background: var(--accent);
-    color: var(--foreground);
+.tippy-box {
+    background: var(--secondary-background);
 }
 
-a,
-a:link,
-a:visited,
-a:hover {
-    text-decoration: none;
-    color: var(--accent);
+.tippy-content {
+    padding: 8px;
+    font-size: 12px;
 }
 
-hr {
-    border: 0;
-    height: 1px;
-    flex-grow: 1;
+.tippy-arrow {
+    color: var(--secondary-background);
 }

src/sw.ts

+/// <reference lib="webworker" />
+import { precacheAndRoute } from "workbox-precaching";
+
+declare let self: ServiceWorkerGlobalScope;
+
+self.addEventListener("message", (event) => {
+    if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
+});
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+self.addEventListener("push", (event) => {
+    async function process() {
+        if (event.data === null) return;
+        // Need to write notification generator on server.
+    }
+
+    event.waitUntil(process());
+});
+
+// ? Open the app on notification click.
+// https://stackoverflow.com/a/39457287
+self.addEventListener("notificationclick", (event) => {
+    const url = event.notification.data;
+    event.notification.close();
+    event.waitUntil(
+        self.clients
+            .matchAll({ includeUncontrolled: true, type: "window" })
+            .then((windowClients) => {
+                // Check if there is already a window/tab open with the target URL
+                for (let i = 0; i < windowClients.length; i++) {
+                    const client = windowClients[i];
+                    // If so, just focus it.
+                    if (client.url === url && "focus" in client) {
+                        return client.focus();
+                    }
+                }
+
+                // If not, then open the target URL in a new window/tab.
+                if (self.clients.openWindow) {
+                    return self.clients.openWindow(url);
+                }
+            }),
+    );
+});

src/types/Preact.ts

+import { VNode } from "preact";
+
+export type Child = VNode | string | number | boolean | undefined | null;
+export type Children = Child | Child[] | Children[];

src/version.ts

+export const APP_VERSION = "__APP_VERSION__";

tsconfig.json

 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment"
-  },
-  "include": ["src"]
+    "compilerOptions": {
+        "target": "ESNext",
+        "lib": ["DOM", "DOM.Iterable", "ESNext", "WebWorker"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "preserve",
+        "jsxFactory": "h",
+        "jsxFragmentFactory": "Fragment",
+        "types": ["vite-plugin-pwa/client"],
+        "experimentalDecorators": true
+    },
+    "include": ["src", "ui/ui.tsx"]
 }

ui/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Revolt UI</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/ui/ui.tsx"></script>
+  </body>
+</html>

ui/ui.tsx

+import styled from "styled-components";
+
+import "../src/styles/index.scss";
+import { render } from "preact";
+import { useState } from "preact/hooks";
+
+import Theme from "../src/context/Theme";
+
+import Banner from "../src/components/ui/Banner";
+import Button from "../src/components/ui/Button";
+import Checkbox from "../src/components/ui/Checkbox";
+import ColourSwatches from "../src/components/ui/ColourSwatches";
+import ComboBox from "../src/components/ui/ComboBox";
+import InputBox from "../src/components/ui/InputBox";
+import Overline from "../src/components/ui/Overline";
+import Radio from "../src/components/ui/Radio";
+import Tip from "../src/components/ui/Tip";
+
+export const UIDemo = styled.div`
+    gap: 12px;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+`;
+
+export function UI() {
+    let [checked, setChecked] = useState(false);
+    let [colour, setColour] = useState("#FD6671");
+    let [selected, setSelected] = useState<"a" | "b" | "c">("a");
+
+    return (
+        <>
+            <Button>Button (normal)</Button>
+            <Button contrast>Button (contrast)</Button>
+            <Button error>Button (error)</Button>
+            <Button contrast error>
+                Button (contrast + error)
+            </Button>
+            <Banner>I am a banner!</Banner>
+            <Checkbox
+                checked={checked}
+                onChange={setChecked}
+                description="ok gamer">
+                Do you want thing??
+            </Checkbox>
+            <ComboBox>
+                <option>Select an option.</option>
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+            </ComboBox>
+            <InputBox placeholder="Normal input box..." />
+            <InputBox placeholder="Contrast input box..." contrast />
+            <InputBox value="Input box with value" />
+            <InputBox value="Contrast with value" contrast />
+            <ColourSwatches value={colour} onChange={(v) => setColour(v)} />
+            <Tip hideSeparator>I am a tip! I provide valuable information.</Tip>
+            <Radio checked={selected === "a"} onSelect={() => setSelected("a")}>
+                First option
+            </Radio>
+            <Radio checked={selected === "b"} onSelect={() => setSelected("b")}>
+                Second option
+            </Radio>
+            <Radio checked={selected === "c"} onSelect={() => setSelected("c")}>
+                Last option
+            </Radio>
+            <Overline>Normal overline</Overline>
+            <Overline type="subtle">Subtle overline</Overline>
+            <Overline type="error">Error overline</Overline>
+            <Overline error="with error">Normal overline</Overline>
+            <Overline type="subtle" error="with error">
+                Subtle overline
+            </Overline>
+        </>
+    );
+}
+
+render(
+    <>
+        <Theme>
+            <UIDemo>
+                <UI />
+            </UIDemo>
+        </Theme>
+    </>,
+    document.getElementById("app")!,
+);

vercel.json

+{
+    "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
+}  
\ No newline at end of file

vite.config.ts

-import { defineConfig } from 'vite'
-import preact from '@preact/preset-vite'
+import replace from "@rollup/plugin-replace";
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+
+import preact from "@preact/preset-vite";
+
+function getGitRevision() {
+    try {
+        const rev = readFileSync(".git/HEAD").toString().trim();
+        if (rev.indexOf(":") === -1) {
+            return rev;
+        } else {
+            return readFileSync(".git/" + rev.substring(5))
+                .toString()
+                .trim();
+        }
+    } catch (err) {
+        console.error("Failed to get Git revision.");
+        return "?";
+    }
+}
+
+function getGitBranch() {
+    try {
+        const rev = readFileSync(".git/HEAD").toString().trim();
+        if (rev.indexOf(":") === -1) {
+            return "DETACHED";
+        } else {
+            return rev.split("/").pop();
+        }
+    } catch (err) {
+        console.error("Failed to get Git branch.");
+        return "?";
+    }
+}
+
+function getVersion() {
+    return readFileSync("VERSION").toString();
+}
+
+const branch = getGitBranch();
+const isNightly = false; //branch !== 'production';
+const iconPrefix = isNightly ? "nightly-" : "";
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact()]
-})
+    plugins: [
+        preact(),
+        VitePWA({
+            srcDir: "src",
+            filename: "sw.ts",
+            strategies: "injectManifest",
+            manifest: {
+                name: isNightly ? "Revolt Nightly" : "Revolt",
+                short_name: "Revolt",
+                description: isNightly
+                    ? "Early preview builds of Revolt."
+                    : "User-first, privacy-focused chat platform.",
+                categories: ["messaging"],
+                start_url: "/",
+                orientation: "portrait",
+                display: "standalone",
+                background_color: "#101823",
+                theme_color: "#101823",
+                icons: [
+                    {
+                        src: `/assets/icons/${iconPrefix}android-chrome-192x192.png`,
+                        type: "image/png",
+                        sizes: "192x192",
+                    },
+                    {
+                        src: `/assets/icons/${iconPrefix}android-chrome-512x512.png`,
+                        type: "image/png",
+                        sizes: "512x512",
+                    },
+                    {
+                        src: `/assets/icons/monochrome.svg`,
+                        type: "image/svg+xml",
+                        sizes: "48x48 72x72 96x96 128x128 256x256",
+                        purpose: "monochrome",
+                    },
+                    {
+                        src: `/assets/icons/masking-512x512.png`,
+                        type: "image/png",
+                        sizes: "512x512",
+                        purpose: "maskable",
+                    },
+                ],
+            },
+        }),
+        replace({
+            __GIT_REVISION__: getGitRevision(),
+            __GIT_BRANCH__: getGitBranch(),
+            __APP_VERSION__: getVersion(),
+            preventAssignment: true,
+        }),
+    ],
+    build: {
+        sourcemap: true,
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname, "index.html"),
+                ui: resolve(__dirname, "ui/index.html"),
+            },
+        },
+    },
+});