Merge branch 'frost' of https://github.com/Aevann1/rDrama into frost

2022-09-25 03:47:11 +02:00 · 2022-09-25 03:47:11 +02:00 · a04b4473d4
parent ee20324eff 0dec3171d5
commit a04b4473d4
106 changed files with 3587 additions and 503 deletions
--- a/.gitignore
+++ b/.gitignore
@ -13,3 +13,12 @@ flask_session/
 site_settings.json
 /files/test.py
 tags
+
+# Chat environment
+chat/node_modules
+chat/build
+chat/.env
+
+# Chat artefacts
+files/assets/css/chat_done.css
+files/assets/js/chat_done.js
--- a/12
+++ b/12
@ -27,6 +27,18 @@ RUN mkdir /asset_submissions/hats
 RUN mkdir /asset_submissions/marseys/original
 RUN mkdir /asset_submissions/hats/original

+ENV NODE_VERSION=16.13.0
+RUN apt install -y curl
+RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+ENV NVM_DIR=/root/.nvm
+RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
+RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
+RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
+ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
+RUN node --version
+RUN npm --version
+RUN npm i -g yarn
+
 EXPOSE 80/tcp

 CMD [ "/usr/bin/supervisord", "-c", "/etc/supervisord.conf" ]
--- a/chat/.env.template
+++ b/chat/.env.template
@ -0,0 +1,6 @@
+FEATURES_ACTIVITY=false
+DEBUG=false
+NODE_ENV="production"
+EMOJI_INPUT_TOKEN=":"
+QUICK_EMOJIS_MAX_COUNT = 20
+APPROXIMATE_CHARACTER_WIDTH = 8
--- a/chat/build.js
+++ b/chat/build.js
@ -0,0 +1,22 @@
+require('dotenv').config()
+const package = require("./package.json");
+const path = require("path");
+const { build } = require("esbuild");
+
+const options = {
+  entryPoints: ["./src/index.tsx"],
+  outfile: path.resolve(__dirname, "../files/assets/js/chat_done.js"),
+  bundle: true,
+  minify: process.env.NODE_ENV === "production",
+  define: {
+    "process.env.VERSION": `"${package.version}"`,
+    "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
+    "process.env.DEBUG": process.env.DEBUG,
+    "process.env.FEATURES_ACTIVITY": process.env.FEATURES_ACTIVITY,
+    "process.env.EMOJI_INPUT_TOKEN": `"${process.env.EMOJI_INPUT_TOKEN}"`,
+    "process.env.QUICK_EMOJIS_MAX_COUNT": process.env.QUICK_EMOJIS_MAX_COUNT,
+    "process.env.APPROXIMATE_CHARACTER_WIDTH": process.env.APPROXIMATE_CHARACTER_WIDTH,
+  },
+};
+
+build(options).catch(() => process.exit(1));
--- a/chat/global.d.ts
+++ b/chat/global.d.ts
@ -0,0 +1,22 @@
+declare var process: {
+  env: Record<string, any>;
+};
+
+declare interface IChatMessage {
+  id: string;
+  username: string;
+  avatar: string;
+  hat: string;
+  namecolor: string;
+  text: string;
+  text_censored: string;
+  text_html: string;
+  time: number;
+  quotes: null | string;
+}
+
+declare interface EmojiModSelection {
+  large: boolean;
+  mirror: boolean;
+  pat: boolean;
+}
--- a/chat/package.json
+++ b/chat/package.json
@ -0,0 +1,38 @@
+{
+  "name": "chat",
+  "version": "0.0.15",
+  "main": "./src/index.tsx",
+  "license": "MIT",
+  "dependencies": {
+    "@types/humanize-duration": "^3.27.1",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/lozad": "^1.16.1",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
+    "classnames": "^2.3.2",
+    "dotenv": "^16.0.2",
+    "esbuild": "^0.15.7",
+    "humanize-duration": "^3.27.3",
+    "lodash.debounce": "^4.0.8",
+    "lozad": "^1.16.0",
+    "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
+    "react-virtualized-auto-sizer": "^1.0.7",
+    "react-window": "^1.8.7",
+    "run-when-changed": "^2.1.0",
+    "socket.io-client": "^4.5.2",
+    "typescript": "^4.8.3",
+    "weak-key": "^1.0.2"
+  },
+  "scripts": {
+    "chat": "yarn check && yarn build && yarn css:move",
+    "chat:watch": "run-when-changed --watch \"**/*.*\" --exec \"yarn chat\"",
+    "check": "tsc",
+    "build": "node ./build",
+    "css:move": "mv ../files/assets/js/chat_done.css ../files/assets/css/chat_done.css"
+  }
+}
--- a/chat/src/App.css
+++ b/chat/src/App.css
@ -0,0 +1,121 @@
+html,
+body {
+  overscroll-behavior-y: none;
+}
+
+html {
+  height: -webkit-fill-available;
+}
+
+body {
+  min-height: 100vh;
+  /* mobile viewport bug fix */
+  min-height: -webkit-fill-available;
+}
+
+.App {
+  position: fixed;
+  width: 100vw;
+  display: flex;
+  overflow: hidden;
+}
+
+.App-wrapper {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  max-width: 1000px;
+}
+
+.App-heading {
+  flex-basis: 3rem;
+  display: flex;
+  align-items: center;
+}
+
+.App-heading small {
+  opacity: 0.2;
+}
+
+.App-side {
+  height: 100%;
+  flex: 1;
+  background: var(--gray-500);
+  position: relative;
+}
+
+.App-content {
+  position: relative;
+  flex: 3;
+  height: 60vh;
+  max-height: 1000px;
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.App-content::-webkit-scrollbar {
+  display: none;
+}
+
+.App-drawer {
+  z-index: 2;
+  display: flex;
+  background: var(--background);
+  height: 100%;
+}
+
+
+.App-center {
+  display: flex;
+  align-items: flex-start;
+}
+
+.App-bottom-wrapper {
+  display: flex;
+  align-items: flex-start;
+}
+
+.App-bottom {
+  flex: 3;
+}
+
+.App-bottom-dummy {
+  flex: 1;
+}
+
+.App-bottom-extra {
+  padding: .25rem;
+}
+
+/* On mobile, hide the sidebar and make the input full-width. */
+@media screen and (max-width: 1100px) {
+  .App-side {
+    display: none;
+  }
+
+  .App-bottom-dummy {
+    display: none;
+  }
+
+  .App-bottom-wrapper {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+}
+
+lite-youtube {
+  min-width: min(80vw, 500px);
+}
+
+.btn-secondary {
+  border: none !important;
+}
+
+p {
+  margin: 0;
+}
--- a/chat/src/App.tsx
+++ b/chat/src/App.tsx
@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from "react";
+import { DndProvider, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import {
+  ChatHeading,
+  ChatMessageList,
+  QuotedMessage,
+  UserInput,
+  UserList,
+  UsersTyping,
+} from "./features";
+import { ChatProvider, DrawerProvider, useChat, useDrawer } from "./hooks";
+import "./App.css";
+
+const SCROLL_CANCEL_THRESHOLD = 500;
+
+export function App() {
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <DrawerProvider>
+        <ChatProvider>
+          <AppInner />
+        </ChatProvider>
+      </DrawerProvider>
+    </DndProvider>
+  );
+}
+
+function AppInner() {
+  const [_, dropRef] = useDrop({
+    accept: "drawer",
+  });
+  const { open, config } = useDrawer();
+  const contentWrapper = useRef<HTMLDivElement>(null);
+  const initiallyScrolledDown = useRef(false);
+  const { messages, quote } = useChat();
+
+  useEffect(() => {
+    if (messages.length > 0) {
+      if (initiallyScrolledDown.current) {
+        /* We only want to scroll back down on a new message
+         if the user is not scrolled up looking at previous messages. */
+        const scrollableDistance =
+          contentWrapper.current.scrollHeight -
+          contentWrapper.current.clientHeight;
+        const scrolledDistance = contentWrapper.current.scrollTop;
+        const hasScrolledEnough =
+          scrollableDistance - scrolledDistance >= SCROLL_CANCEL_THRESHOLD;
+
+        if (hasScrolledEnough) {
+          return;
+        }
+      } else {
+        // Always scroll to the bottom on first load.
+        initiallyScrolledDown.current = true;
+      }
+
+      contentWrapper.current.scrollTop = contentWrapper.current.scrollHeight;
+    }
+  }, [messages]);
+
+  return (
+    <div className="App" ref={dropRef}>
+      <div className="App-wrapper">
+        <div className="App-heading">
+          <small>v{process.env.VERSION}</small>
+          <ChatHeading />
+        </div>
+        <div className="App-center">
+          <div className="App-content" ref={contentWrapper}>
+            {open ? (
+              <div className="App-drawer">{config.content}</div>
+            ) : (
+              <ChatMessageList />
+            )}
+          </div>
+          <div className="App-side">
+            <UserList />
+          </div>
+        </div>
+        <div className="App-bottom-wrapper">
+          <div className="App-bottom">
+            {quote && (
+              <div className="App-bottom-extra">
+                {quote && <QuotedMessage />}
+              </div>
+            )}
+            <UserInput />
+            <UsersTyping />
+          </div>
+          <div className="App-bottom-dummy" />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/chat/src/drawers/BaseDrawer.css
+++ b/chat/src/drawers/BaseDrawer.css
@ -0,0 +1,5 @@
+.BaseDrawer {
+  flex: 1;
+  padding-right: 2rem;
+  overflow: hidden;
+}
--- a/chat/src/drawers/BaseDrawer.tsx
+++ b/chat/src/drawers/BaseDrawer.tsx
@ -0,0 +1,10 @@
+import React, { PropsWithChildren, useEffect } from "react";
+import "./BaseDrawer.css";
+
+interface Props extends PropsWithChildren {
+  onClose?(): void;
+}
+
+export function BaseDrawer({ onClose, children }: Props) {
+  return <div className="BaseDrawer">{children}</div>;
+}
--- a/chat/src/drawers/index.ts
+++ b/chat/src/drawers/index.ts
@ -0,0 +1 @@
+export * from "./BaseDrawer"
--- a/chat/src/features/chat/ActivityList.css
+++ b/chat/src/features/chat/ActivityList.css
@ -0,0 +1,35 @@
+.ActivityList {
+  margin-left: 2rem;
+}
+
+.ActivityList h4 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ActivityList h4 hr {
+  flex: 1;
+  margin-right: 1rem;
+}
+
+.ActivityList-activity {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.ActivityList-activity-icon {
+  margin-right: 1rem;
+}
+
+.ActivityList-activity {
+  transition: background 0.4s ease-in-out;
+  padding: 0 1rem;
+}
+
+.ActivityList-activity:hover {
+  cursor: pointer;
+  background: #ffffff05;
+}
--- a/chat/src/features/chat/ActivityList.tsx
+++ b/chat/src/features/chat/ActivityList.tsx
@ -0,0 +1,69 @@
+import React from "react";
+import cx from 'classnames'
+import { useDrawer } from "../../hooks";
+import "./ActivityList.css";
+
+const ACTIVITIES = [
+  {
+    game: "Poker",
+    description: "Know when to hold 'em.",
+    icon: "fas fa-cards",
+  },
+  {
+    game: "Roulette",
+    description: "Table go brrrr.",
+    icon: "fas fa-circle",
+  },
+  {
+    game: "Slots",
+    description: "Is today your lucky day?",
+    icon: "fas fa-dollar-sign",
+  },
+  {
+    game: "Blackjack",
+    description: "Twenty one ways to change your life.",
+    icon: "fas fa-cards",
+  },
+  {
+    game: "Racing",
+    description: "Look at 'em go.",
+    icon: "fas fa-cards",
+  },
+  {
+    game: "Crossing",
+    description: "A simple life.",
+    icon: "fas fa-cards",
+  },
+  {
+    game: "Lottershe",
+    description: "Can't win if you don't play.",
+    icon: "fas fa-ticket",
+  },
+];
+
+export function ActivityList() {
+  const { toggle } = useDrawer();
+
+  return (
+    <div className="ActivityList">
+      <h4>
+        <hr />
+        <span>Activities</span>
+      </h4>
+      <section>
+        {ACTIVITIES.map(({ game, description, icon }) => (
+          <div key={game} role="button" onClick={toggle}>
+            <div className="ActivityList-activity">
+              <div className="ActivityList-activity">
+                <i className={cx("ActivityList-activity-icon", icon)} />
+                <h5>{game}<br /><small>{description}</small></h5>
+              </div>
+
+              <small><i className="far fa-user fa-sm" /> 0</small>
+            </div>
+          </div>
+        ))}
+      </section>
+    </div>
+  );
+}
--- a/chat/src/features/chat/ChatHeading.css
+++ b/chat/src/features/chat/ChatHeading.css
@ -0,0 +1,10 @@
+.ChatHeading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ChatHeading i {
+  margin-right: 0.5rem;
+}
--- a/chat/src/features/chat/ChatHeading.tsx
+++ b/chat/src/features/chat/ChatHeading.tsx
@ -0,0 +1,31 @@
+import React, { useCallback } from "react";
+import { useChat, useDrawer } from "../../hooks";
+import { UserList } from "./UserList";
+import "./ChatHeading.css";
+
+export function ChatHeading() {
+  const { reveal } = useDrawer();
+  const { online } = useChat();
+  const handleOpenUserListDrawer = useCallback(
+    () =>
+      reveal({
+        title: "Users in chat",
+        content: <UserList fluid={true} />,
+      }),
+    []
+  );
+
+  return (
+    <div className="ChatHeading">
+      <div />
+      <div>
+        <i
+          role="button"
+          className="far fa-user"
+          onClick={handleOpenUserListDrawer}
+        />
+        <em>{online.length} users online</em>
+      </div>
+    </div>
+  );
+}
--- a/chat/src/features/chat/ChatMessage.css
+++ b/chat/src/features/chat/ChatMessage.css
@ -0,0 +1,55 @@
+@keyframes fading-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.ChatMessage {
+  padding-right: 3rem;
+  position: relative;
+  animation: fading-in 0.3s ease-in-out forwards;
+}
+
+.ChatMessage-top {
+  display: flex;
+  align-items: center;
+}
+
+.ChatMessage-timestamp {
+  margin-left: 0.5rem;
+}
+
+.ChatMessage-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 30px;
+}
+
+.ChatMessage-content {
+  margin-right: 0.5rem;
+  word-break: break-all;
+  display: inline-block;
+}
+
+.ChatMessage-button {
+  background: transparent !important;
+}
+
+.ChatMessage-button__confirmed i {
+  color: red !important;
+}
+
+.ChatMessage-delete {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+}
+
+/* List */
+.ChatMessageList {
+  flex: 1;
+}
--- a/chat/src/features/chat/ChatMessage.tsx
+++ b/chat/src/features/chat/ChatMessage.tsx
@ -0,0 +1,149 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import cx from "classnames";
+import key from "weak-key";
+import humanizeDuration from "humanize-duration";
+import { Username } from "./Username";
+import { useChat, useRootContext } from "../../hooks";
+import { QuotedMessageLink } from "./QuotedMessageLink";
+import "./ChatMessage.css";
+
+interface ChatMessageProps {
+  message: IChatMessage;
+  timestampUpdates: number;
+  showUser?: boolean;
+}
+
+const TIMESTAMP_UPDATE_INTERVAL = 20000;
+
+export function ChatMessage({
+  message,
+  showUser = true,
+  timestampUpdates,
+}: ChatMessageProps) {
+  const {
+    id,
+    avatar,
+    namecolor,
+    username,
+    hat,
+    text,
+    text_html,
+    text_censored,
+    time,
+    quotes,
+  } = message;
+  const {
+    username: loggedInUsername,
+    admin,
+    censored,
+    themeColor,
+  } = useRootContext();
+  const { messageLookup, deleteMessage, quoteMessage } = useChat();
+  const quotedMessage = messageLookup[quotes];
+  const content = censored ? text_censored : text_html;
+  const hasMention = content.includes(loggedInUsername);
+  const mentionStyle = hasMention
+    ? { backgroundColor: `#${themeColor}55` }
+    : {};
+  const [confirmedDelete, setConfirmedDelete] = useState(false);
+  const handleDeleteMessage = useCallback(() => {
+    if (confirmedDelete) {
+      deleteMessage(text);
+    } else {
+      setConfirmedDelete(true);
+    }
+  }, [text, confirmedDelete]);
+  const timestamp = useMemo(
+    () => formatTimeAgo(time),
+    [time, timestampUpdates]
+  );
+
+  return (
+    <div className="ChatMessage" style={mentionStyle} id={id}>
+      {showUser && (
+        <div className="ChatMessage-top">
+          <Username
+            avatar={avatar}
+            name={username}
+            color={namecolor}
+            hat={hat}
+          />
+          <div className="ChatMessage-timestamp">{timestamp}</div>
+        </div>
+      )}
+      {quotes && quotedMessage && <QuotedMessageLink message={quotedMessage} />}
+      <div className="ChatMessage-bottom">
+        <div>
+          <span
+            className="ChatMessage-content"
+            title={content}
+            dangerouslySetInnerHTML={{
+              __html: content,
+            }}
+          />
+          <button
+            className="ChatMessage-button quote btn"
+            onClick={() => quoteMessage(message)}
+          >
+            <i className="fas fa-reply"></i>
+          </button>
+        </div>
+        {admin && (
+          <button
+            className={cx("ChatMessage-button ChatMessage-delete btn", {
+              "ChatMessage-button__confirmed": confirmedDelete,
+            })}
+            onClick={handleDeleteMessage}
+          >
+            <i className="fas fa-trash-alt"></i>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ChatMessageList() {
+  const { messages } = useChat();
+  const [timestampUpdates, setTimestampUpdates] = useState(0);
+
+  useEffect(() => {
+    const updatingTimestamps = setInterval(
+      () => setTimestampUpdates((prev) => prev + 1),
+      TIMESTAMP_UPDATE_INTERVAL
+    );
+
+    return () => {
+      clearInterval(updatingTimestamps);
+    };
+  }, []);
+
+  return (
+    <div className="ChatMessageList">
+      {messages.map((message, index) => (
+        <ChatMessage
+          key={key(message)}
+          message={message}
+          timestampUpdates={timestampUpdates}
+          showUser={message.username !== messages[index - 1]?.username}
+        />
+      ))}
+    </div>
+  );
+}
+
+function formatTimeAgo(time: number) {
+  const now = new Date().getTime();
+  const humanized = `${humanizeDuration(time * 1000 - now, {
+    round: true,
+    units: ["h", "m", "s"],
+    largest: 2,
+  })} ago`;
+
+  return humanized === "0 seconds ago" ? "just now" : humanized;
+}
--- a/chat/src/features/chat/QuotedMessage.css
+++ b/chat/src/features/chat/QuotedMessage.css
@ -0,0 +1,15 @@
+.QuotedMessage {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.QuotedMessage-content {
+  margin-left: 1rem;
+  flex: 1;
+  max-width: 420px;
+  max-height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 1rem;
+}
--- a/chat/src/features/chat/QuotedMessage.tsx
+++ b/chat/src/features/chat/QuotedMessage.tsx
@ -0,0 +1,24 @@
+import React from "react";
+import { useChat, useRootContext } from "../../hooks";
+import { Username } from "./Username";
+import "./QuotedMessage.css";
+import { QuotedMessageLink } from "./QuotedMessageLink";
+
+export function QuotedMessage() {
+  const { quote, quoteMessage } = useChat();
+  const { censored } = useRootContext();
+
+  return (
+    <div className="QuotedMessage">
+      <QuotedMessageLink message={quote} />
+      
+      <button
+        type="button"
+        className="btn btn-secondary"
+        onClick={() => quoteMessage(null)}
+      >
+        Cancel
+      </button>
+    </div>
+  );
+}
--- a/chat/src/features/chat/QuotedMessageLink.tsx
+++ b/chat/src/features/chat/QuotedMessageLink.tsx
@ -0,0 +1,43 @@
+import React, { useCallback } from "react";
+import { useRootContext } from "../../hooks";
+
+const SCROLL_TO_QUOTED_OVERFLOW = 250;
+const QUOTED_MESSAGE_CONTEXTUAL_HIGHLIGHTING_DURATION = 2500;
+const QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH = 30;
+
+export function QuotedMessageLink({ message }: { message: IChatMessage }) {
+  const { themeColor } = useRootContext();
+  const handleLinkClick = useCallback(() => {
+    const element = document.getElementById(message.id);
+
+    if (element) {
+      element.scrollIntoView();
+      element.style.background = `#${themeColor}33`;
+
+      setTimeout(() => {
+        element.style.background = "unset";
+      }, QUOTED_MESSAGE_CONTEXTUAL_HIGHLIGHTING_DURATION);
+
+      const [appContent] = Array.from(
+        document.getElementsByClassName("App-content")
+      );
+
+      if (appContent) {
+        appContent.scrollTop -= SCROLL_TO_QUOTED_OVERFLOW;
+      }
+    }
+  }, []);
+
+  return (
+    <a href="#" onClick={handleLinkClick}>
+      Replying to @{message.username}:{" "}
+      <em>
+        "{message.text.slice(0, QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH)}
+        {message.text.length >= QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH
+          ? "..."
+          : ""}
+        "
+      </em>
+    </a>
+  );
+}
--- a/chat/src/features/chat/UserInput.css
+++ b/chat/src/features/chat/UserInput.css
@ -0,0 +1,11 @@
+.UserInput {
+  position: relative;
+}
+
+.UserInput-emoji {
+  cursor: pointer;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  font-size: 20px;
+}
--- a/chat/src/features/chat/UserInput.tsx
+++ b/chat/src/features/chat/UserInput.tsx
@ -0,0 +1,178 @@
+import React, {
+  ChangeEvent,
+  KeyboardEvent,
+  FormEvent,
+  useCallback,
+  useRef,
+  useMemo,
+  useState,
+} from "react";
+import { useChat, useDrawer, useEmojis } from "../../hooks";
+import { EmojiDrawer, QuickEmojis } from "../emoji";
+import "./UserInput.css";
+
+export function UserInput() {
+  const { messages, draft, sendMessage, updateDraft } = useChat();
+  const { reveal, hide, open } = useDrawer();
+  const builtChatInput = useRef<HTMLTextAreaElement>(null);
+  const { visible, addQuery } = useEmojis();
+  const form = useRef<HTMLFormElement>(null);
+  const [typingOffset, setTypingOffset] = useState(0);
+  const quickEmojis = useMemo(
+    () => visible.slice(0, process.env.QUICK_EMOJIS_MAX_COUNT),
+    [visible]
+  );
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      const input = event.target.value;
+      const [openEmojiToken, closeEmojiToken] = locateEmojiTokens(input);
+      const emojiSegment = input.slice(openEmojiToken + 1, closeEmojiToken + 1);
+
+      updateDraft(input);
+      addQuery(
+        openEmojiToken === -1 || emojiSegment.includes(" ") ? "" : emojiSegment
+      );
+      setTypingOffset(
+        emojiSegment.length * process.env.APPROXIMATE_CHARACTER_WIDTH
+      );
+    },
+    []
+  );
+  const handleSendMessage = useCallback(
+    (event?: FormEvent<HTMLFormElement>) => {
+      event?.preventDefault();
+      sendMessage();
+    },
+    [sendMessage]
+  );
+  const handleKeyUp = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === "Enter") {
+        handleSendMessage();
+      }
+    },
+    [handleSendMessage]
+  );
+  const handleOpenEmojiDrawer = useCallback(
+    () =>
+      reveal({
+        title: "Select an emoji",
+        content: (
+          <EmojiDrawer
+            onSelectEmoji={handleSelectEmoji}
+            onClose={() => builtChatInput.current?.focus()}
+          />
+        ),
+      }),
+    []
+  );
+  const handleCloseEmojiDrawer = useCallback(() => {
+    builtChatInput.current?.focus();
+    hide();
+  }, [hide]);
+  const handleSelectEmoji = useCallback((emoji: string) => {
+    updateDraft((prev) => `${prev} :${emoji}: `);
+  }, []);
+  const handleInsertQuickEmoji = useCallback(
+    (emoji: string) => {
+      const [openEmojiToken, closeEmojiToken] = locateEmojiTokens(draft);
+      const toReplace = draft.slice(openEmojiToken, closeEmojiToken + 1);
+
+      updateDraft((prev) => prev.replace(toReplace, `:${emoji}: `));
+      addQuery("");
+
+      builtChatInput.current?.focus();
+    },
+    [draft]
+  );
+
+  return (
+    <form ref={form} className="UserInput" onSubmit={handleSendMessage}>
+      {quickEmojis.length > 0 && (
+        <div
+          style={{
+            position: "absolute",
+            top: -254,
+            height: 250,
+            left: typingOffset,
+            display: "flex",
+            flexDirection: "column-reverse",
+          }}
+        >
+          <QuickEmojis
+            emojis={quickEmojis}
+            onSelectEmoji={handleInsertQuickEmoji}
+          />
+        </div>
+      )}
+      <textarea
+        ref={builtChatInput}
+        id="builtChatInput"
+        className="form-control"
+        style={{
+          minHeight: 50,
+          height: 50,
+          maxHeight: 50,
+        }}
+        minLength={1}
+        maxLength={1000}
+        rows={1}
+        onChange={handleChange}
+        onKeyUp={handleKeyUp}
+        placeholder="Message"
+        autoComplete="off"
+        value={draft}
+      />
+      {open ? (
+        <span
+          role="button"
+          onClick={handleCloseEmojiDrawer}
+          className="UserInput-emoji"
+          style={{ top: 6 }}
+        >
+          X
+        </span>
+      ) : (
+        <i
+          role="button"
+          onClick={handleOpenEmojiDrawer}
+          className="UserInput-emoji fas fa-smile-beam"
+        />
+      )}
+    </form>
+  );
+}
+
+function locateEmojiTokens(text: string) {
+  let openEmojiInputToken = -1;
+  let endEmojiInputToken = -1;
+
+  if (text.length <= 1) {
+    return [openEmojiInputToken, endEmojiInputToken];
+  }
+
+  for (let i = 0; i < text.length; i++) {
+    const character = text[i];
+
+    if (character === process.env.EMOJI_INPUT_TOKEN) {
+      if (openEmojiInputToken === -1) {
+        openEmojiInputToken = i;
+      } else {
+        openEmojiInputToken = -1;
+      }
+    }
+  }
+
+  if (openEmojiInputToken !== -1) {
+    endEmojiInputToken = openEmojiInputToken;
+
+    while (
+      endEmojiInputToken < text.length - 1 &&
+      text[endEmojiInputToken] !== " "
+    ) {
+      endEmojiInputToken++;
+    }
+  }
+
+  return [openEmojiInputToken, endEmojiInputToken];
+}
--- a/chat/src/features/chat/UserList.css
+++ b/chat/src/features/chat/UserList.css
@ -0,0 +1,24 @@
+.UserList {
+  padding: 1rem;
+  flex: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.UserList-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.UserList-heading h5 {
+  margin-right: 2rem;
+}
+
+.UserList ul::-webkit-scrollbar {
+  display: none;
+}
--- a/chat/src/features/chat/UserList.tsx
+++ b/chat/src/features/chat/UserList.tsx
@ -0,0 +1,30 @@
+import React from "react";
+import cx from "classnames";
+import { useChat } from "../../hooks";
+import "./UserList.css";
+
+interface Props {
+  fluid?: boolean;
+}
+
+export function UserList({ fluid = false }: Props) {
+  const { online } = useChat();
+
+  return (
+    <div className="UserList">
+      <div className="UserList-heading">
+        <h5>Users Online</h5>
+        <div className="Chat-online">
+          <i className="far fa-user fa-sm" /> {online.length}
+        </div>
+      </div>
+      <ul className={cx({ fluid })}>
+        {online.map((user) => (
+          <li key={user}>
+            <a href={`/@${user}`}>@{user}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
--- a/chat/src/features/chat/Username.css
+++ b/chat/src/features/chat/Username.css
@ -0,0 +1,9 @@
+.Username {
+  display: inline-flex;
+  align-items: center;
+}
+
+.Username > a {
+  font-weight: bold;
+  margin-left: 8px;
+}
--- a/chat/src/features/chat/Username.tsx
+++ b/chat/src/features/chat/Username.tsx
@ -0,0 +1,35 @@
+import React from "react";
+import "./Username.css";
+
+interface UsernameProps {
+  avatar: string;
+  color: string;
+  name: string;
+  hat?: string;
+}
+
+export function Username({ avatar, color, name, hat = "" }: UsernameProps) {
+  return (
+    <div className="Username">
+      <div className="profile-pic-20-wrapper">
+        <img alt={name} src={avatar} className="pp20" />
+        {hat && (
+          <img
+            className="avatar-hat profile-pic-20-hat hat"
+            loading="lazy"
+            src={hat}
+          />
+        )}
+      </div>
+      <a
+        className="userlink"
+        style={{ color: `#${color}` }}
+        target="_blank"
+        href={`/@${name}`}
+        rel="noopener noreferrer"
+      >
+        {name}
+      </a>
+    </div>
+  );
+}
--- a/chat/src/features/chat/UsersTyping.css
+++ b/chat/src/features/chat/UsersTyping.css
@ -0,0 +1,4 @@
+.UsersTyping {
+  height: 18px;
+  display: inline-block;
+}
--- a/chat/src/features/chat/UsersTyping.tsx
+++ b/chat/src/features/chat/UsersTyping.tsx
@ -0,0 +1,32 @@
+import React from "react";
+import { useChat } from "../../hooks";
+import "./UsersTyping.css";
+
+export function UsersTyping() {
+  const { typing } = useChat();
+  const [first, second, third, ...rest] = typing;
+
+  return (
+    <div className="UsersTyping">
+      {(() => {
+        if (rest.length > 0) {
+          return `${first}, ${second}, ${third} and ${rest.length} more are typing...`;
+        }
+
+        if (first && second && third) {
+          return `${first}, ${second} and ${third} are typing...`;
+        }
+
+        if (first && second) {
+          return `${first} and ${second} are typing...`;
+        }
+
+        if (first) {
+          return `${first} is typing...`;
+        }
+
+        return null;
+      })()}
+    </div>
+  );
+}
--- a/chat/src/features/chat/index.ts
+++ b/chat/src/features/chat/index.ts
@ -0,0 +1,8 @@
+export * from "./ChatHeading";
+export * from "./ChatMessage";
+export * from "./UserInput";
+export * from "./UserList";
+export * from "./Username";
+export * from "./UsersTyping";
+export * from "./QuotedMessage";
+export * from "./QuotedMessageLink";
--- a/chat/src/features/emoji/EmojiDrawer.css
+++ b/chat/src/features/emoji/EmojiDrawer.css
@ -0,0 +1,6 @@
+.EmojiDrawer-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  
+}
--- a/chat/src/features/emoji/EmojiDrawer.tsx
+++ b/chat/src/features/emoji/EmojiDrawer.tsx
@ -0,0 +1,222 @@
+import React, {
+  useRef,
+  useMemo,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { FixedSizeGrid, FixedSizeGrid as Grid } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { useDrawer, useEmojis } from "../../hooks";
+import { BaseDrawer } from "../../drawers";
+import { EmojiGenres } from "./EmojiGenres";
+import { EmojiMods } from "./EmojiMods";
+import "./EmojiDrawer.css";
+
+interface Props {
+  onSelectEmoji(emoji: string): void;
+  onClose?(): void;
+}
+
+enum EmojiDrawerTabs {
+  Favorites = "Favorites",
+}
+
+export function EmojiDrawer({ onSelectEmoji, onClose }: Props) {
+  const {
+    visible,
+    genres,
+    collections,
+    favorites,
+    mostRecentQuery,
+    addQuery,
+    updateVisible,
+    updateFavorites,
+  } = useEmojis();
+  const { hide } = useDrawer();
+  const [modSelection, setModSelection] = useState<EmojiModSelection>({
+    large: false,
+    mirror: false,
+    pat: false,
+  });
+  const [activeGenre, setActiveGenre] = useState<string>(
+    EmojiDrawerTabs.Favorites
+  );
+  const emojiGrid = useMemo(() => {
+    const grid = [];
+    let temp = [];
+
+    for (let i = 0; i < visible.length; i++) {
+      temp.push(visible[i]);
+
+      if (i % 7 === 0) {
+        grid.push([...temp]);
+        temp = [];
+      }
+    }
+
+    return grid;
+  }, [visible]);
+
+  // Refs
+  const gridRef = useRef<FixedSizeGrid<any>>();
+  const input = useRef<HTMLInputElement>(null);
+
+  // Callbacks
+  const handleEmojiGenreChange =
+    /*useCallback(*/
+    (genre: string) => {
+      setActiveGenre(genre);
+
+      if (genre === EmojiDrawerTabs.Favorites) {
+        updateVisible(favorites);
+      } else {
+        updateVisible(collections[genre] ?? []);
+      }
+    };
+  /*[favorites, collections]
+  );*/
+  const handleScrollToTop = useCallback(() => {
+    gridRef.current?.scrollToItem({
+      rowIndex: 0,
+    });
+  }, []);
+  const handleSelectEmoji = useCallback(
+    (emoji: string) => {
+      if (modSelection.large) {
+        emoji = `#${emoji}`;
+      }
+
+      if (modSelection.mirror) {
+        emoji = `!${emoji}`;
+      }
+
+      if (modSelection.pat) {
+        emoji = `${emoji}pat`;
+      }
+
+      onSelectEmoji(emoji);
+      updateFavorites((prev) => Array.from(new Set(prev.concat(emoji))));
+    },
+    [modSelection]
+  );
+  const handleClose = useCallback(() => {
+    hide();
+    onClose();
+  }, [onClose]);
+
+  // Effects
+  // When the user types more, scroll back up.
+  useEffect(() => {
+    handleScrollToTop();
+  }, [visible]);
+
+  // Enter and Esc finish the interaction.
+  useEffect(() => {
+    const handleKeyup = (event: KeyboardEvent) => {
+      if (["Escape", "Enter"].includes(event.key)) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keyup", handleKeyup);
+
+    return () => {
+      document.removeEventListener("keyup", handleKeyup);
+    };
+  }, [handleClose]);
+
+  // Cell
+  const Cell = useCallback(
+    ({ columnIndex, rowIndex, style }) => {
+      const emoji = emojiGrid[rowIndex]?.[columnIndex];
+
+      return emoji ? (
+        <img
+          role="button"
+          onClick={() => handleSelectEmoji(emoji)}
+          style={{
+            ...style,
+            cursor: "pointer",
+            margin: "1rem",
+          }}
+          loading="lazy"
+          width={60}
+          src={`/e/${emoji}.webp`}
+          alt={emoji}
+        />
+      ) : null;
+    },
+    [emojiGrid, handleSelectEmoji]
+  );
+
+  return (
+    <BaseDrawer onClose={handleClose}>
+      <div className="EmojiDrawer-input">
+        <input
+          ref={input}
+          className="form-control"
+          type="text"
+          onChange={(e) => addQuery(e.target.value)}
+          autoFocus={true}
+          placeholder="Search for emojis..."
+          style={{
+            margin: "1rem",
+            flex: 1,
+          }}
+        />
+      </div>
+      <div className="EmojiDrawer-options">
+        <EmojiMods
+          selection={modSelection}
+          onChangeSelection={setModSelection}
+        />
+        <EmojiGenres
+          genres={genres}
+          activeGenre={activeGenre}
+          onGenreChange={handleEmojiGenreChange}
+        />
+      </div>
+      {/* Results */}
+      {visible.length > 0 && (
+        <AutoSizer>
+          {({ width, height }) => (
+            <Grid
+              ref={gridRef}
+              columnCount={8}
+              columnWidth={64}
+              rowCount={visible.length}
+              rowHeight={64}
+              width={width}
+              height={height}
+            >
+              {Cell}
+            </Grid>
+          )}
+        </AutoSizer>
+      )}
+      {/* Searched, nothing found */}
+      {visible.length === 0 && mostRecentQuery !== "" && (
+        <div>Nothing found.</div>
+      )}
+      {/* Favorites */}
+      {visible.length === 0 &&
+        mostRecentQuery === "" &&
+        favorites.map((favorite) => (
+          <img
+            key={favorite}
+            role="button"
+            onClick={() => handleSelectEmoji(favorite)}
+            style={{
+              cursor: "pointer",
+              margin: "1rem",
+            }}
+            loading="lazy"
+            width={60}
+            src={`/e/${favorite}.webp`}
+            alt={favorite}
+          />
+        ))}
+    </BaseDrawer>
+  );
+}
--- a/chat/src/features/emoji/EmojiGenres.css
+++ b/chat/src/features/emoji/EmojiGenres.css
--- a/chat/src/features/emoji/EmojiGenres.tsx
+++ b/chat/src/features/emoji/EmojiGenres.tsx
@ -0,0 +1,25 @@
+import React, { ChangeEvent, useCallback } from "react";
+import "./EmojiGenres.css";
+
+interface Props {
+  genres: string[];
+  activeGenre: string;
+  onGenreChange(genre: string): void;
+}
+
+export function EmojiGenres({ genres, activeGenre, onGenreChange }: Props) {
+  const handleSelect = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
+    onGenreChange(event.target.value);
+  }, [onGenreChange]);
+
+  return (
+    <select onChange={handleSelect} value={activeGenre}>
+      <option value="Favorites">⭐ Favorites ⭐</option>
+      {genres.map((genre) => (
+        <option key={genre} value={genre}>
+          {genre}
+        </option>
+      ))}
+    </select>
+  );
+}
--- a/chat/src/features/emoji/EmojiMods.tsx
+++ b/chat/src/features/emoji/EmojiMods.tsx
@ -0,0 +1,55 @@
+import React, { useCallback, useRef } from "react";
+
+interface Props {
+  selection: EmojiModSelection;
+  onChangeSelection(selection: EmojiModSelection): void;
+}
+
+export function EmojiMods({ selection, onChangeSelection }: Props) {
+  const largeOption = useRef<HTMLInputElement>(null);
+  const mirrorOption = useRef<HTMLInputElement>(null);
+  const patOption = useRef<HTMLInputElement>(null);
+  const handleChangeSelection = useCallback(() => {
+    onChangeSelection({
+      large: largeOption.current.checked,
+      mirror: mirrorOption.current.checked,
+      pat: patOption.current.checked,
+    });
+  }, []);
+
+  return (
+    <div className="EmojiMods">
+      <input
+        type="checkbox"
+        id="largeOption"
+        ref={largeOption}
+        onChange={handleChangeSelection}
+        checked={selection.large}
+        style={{ marginLeft: "1rem", marginRight: "0.5rem" }}
+      ></input>
+      <label htmlFor="largeOption" style={{ marginRight: "1rem" }}>
+        Large
+      </label>
+      <input
+        type="checkbox"
+        id="mirrorOption"
+        ref={mirrorOption}
+        onChange={handleChangeSelection}
+        checked={selection.mirror}
+        style={{ marginRight: "0.5rem" }}
+      ></input>
+      <label htmlFor="mirrorOption" style={{ marginRight: "1rem" }}>
+        Mirror
+      </label>
+      <input
+        type="checkbox"
+        id="patOption"
+        ref={patOption}
+        onChange={handleChangeSelection}
+        checked={selection.pat}
+        style={{ marginRight: "0.5rem" }}
+      ></input>
+      <label htmlFor="patOption">Pat</label>
+    </div>
+  );
+}
--- a/chat/src/features/emoji/QuickEmojis.tsx
+++ b/chat/src/features/emoji/QuickEmojis.tsx
@ -0,0 +1,49 @@
+import React from "react";
+
+interface Props {
+  emojis: string[];
+  onSelectEmoji(emoji: string): void;
+}
+
+export function QuickEmojis({ emojis, onSelectEmoji }: Props) {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--gray-700)",
+        maxHeight: 250,
+        overflowY: "auto",
+        overflowX: "hidden",
+        borderRadius: "4px",
+        border: "1px solid rgba(255, 255, 255, 0.3)",
+        boxShadow: "0px 2px 5px rgb(0 0 0 / 20%)",
+        zIndex: 999,
+      }}
+    >
+      {emojis.map((emoji) => (
+        <div
+          key={emoji}
+          role="button"
+          onClick={() => onSelectEmoji(emoji)}
+          style={{
+            borderBottom: "1px solid #606060",
+            padding: "4px",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <img
+            src={`/e/${emoji}.webp`}
+            style={{
+              objectFit: "contain",
+              width: 30,
+              height: 30,
+            }}
+          />
+          <span>{emoji}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/chat/src/features/emoji/index.ts
+++ b/chat/src/features/emoji/index.ts
@ -0,0 +1,4 @@
+export * from "./EmojiDrawer";
+export * from "./EmojiGenres";
+export * from "./EmojiMods";
+export * from "./QuickEmojis";
--- a/chat/src/features/index.ts
+++ b/chat/src/features/index.ts
@ -0,0 +1,2 @@
+export * from "./chat";
+export * from "./emoji";
--- a/chat/src/hooks/index.ts
+++ b/chat/src/hooks/index.ts
@ -0,0 +1,5 @@
+export * from "./useChat";
+export * from "./useDrawer";
+export * from "./useEmojis";
+export * from "./useRootContext";
+export * from "./useWindowFocus";
--- a/chat/src/hooks/useChat.tsx
+++ b/chat/src/hooks/useChat.tsx
@ -0,0 +1,200 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { io, Socket } from "socket.io-client";
+import lozad from "lozad";
+import debounce from "lodash.debounce";
+import { useRootContext } from "./useRootContext";
+import { useWindowFocus } from "./useWindowFocus";
+
+enum ChatHandlers {
+  CONNECT = "connect",
+  CATCHUP = "catchup",
+  ONLINE = "online",
+  TYPING = "typing",
+  DELETE = "delete",
+  SPEAK = "speak",
+}
+
+interface ChatProviderContext {
+  online: string[];
+  typing: string[];
+  messages: IChatMessage[];
+  draft: string;
+  quote: null | IChatMessage;
+  messageLookup: Record<string, IChatMessage>;
+  updateDraft: React.Dispatch<React.SetStateAction<string>>;
+  sendMessage(): void;
+  quoteMessage(message: null | IChatMessage): void;
+  deleteMessage(withText: string): void;
+}
+
+const ChatContext = createContext<ChatProviderContext>({
+  online: [],
+  typing: [],
+  messages: [],
+  draft: "",
+  quote: null,
+  messageLookup: {},
+  updateDraft() {},
+  sendMessage() {},
+  quoteMessage() {},
+  deleteMessage() {},
+});
+
+const MINIMUM_TYPING_UPDATE_INTERVAL = 250;
+
+export function ChatProvider({ children }: PropsWithChildren) {
+  const { username, siteName } = useRootContext();
+  const socket = useRef<null | Socket>(null);
+  const [online, setOnline] = useState<string[]>([]);
+  const [typing, setTyping] = useState<string[]>([]);
+  const [messages, setMessages] = useState<IChatMessage[]>([]);
+  const [draft, setDraft] = useState("");
+  const lastDraft = useRef("");
+  const [quote, setQuote] = useState<null | IChatMessage>(null);
+  const focused = useWindowFocus();
+  const [notifications, setNotifications] = useState<number>(0);
+  const [messageLookup, setMessageLookup] = useState({});
+  const addMessage = useCallback((message: IChatMessage) => {
+    setMessages((prev) => prev.concat(message));
+
+    if (message.username !== username && !document.hasFocus()) {
+      setNotifications((prev) => prev + 1);
+    }
+  }, []);
+  const sendMessage = useCallback(() => {
+    socket.current?.emit(ChatHandlers.SPEAK, {
+      message: draft,
+      quotes: quote?.id ?? null,
+    });
+
+    setQuote(null);
+    setDraft("");
+  }, [draft, quote]);
+  const requestDeleteMessage = useCallback((withText: string) => {
+    socket.current?.emit(ChatHandlers.DELETE, withText);
+  }, []);
+  const deleteMessage = useCallback((withText: string) => {
+    setMessages((prev) =>
+      prev.filter((prevMessage) => prevMessage.text !== withText)
+    );
+
+    if (quote?.text === withText) {
+      setQuote(null);
+    }
+  }, []);
+  const quoteMessage = useCallback((message: IChatMessage) => {
+    setQuote(message);
+
+    try {
+      document.getElementById("builtChatInput").focus();
+    } catch (error) {}
+  }, []);
+  const context = useMemo<ChatProviderContext>(
+    () => ({
+      online,
+      typing,
+      messages,
+      draft,
+      quote,
+      messageLookup,
+      quoteMessage,
+      sendMessage,
+      deleteMessage: requestDeleteMessage,
+      updateDraft: setDraft,
+    }),
+    [
+      online,
+      typing,
+      messages,
+      draft,
+      quote,
+      messageLookup,
+      sendMessage,
+      deleteMessage,
+      quoteMessage,
+    ]
+  );
+
+  useEffect(() => {
+    if (!socket.current) {
+      socket.current = io();
+
+      socket.current
+        .on(ChatHandlers.CATCHUP, setMessages)
+        .on(ChatHandlers.ONLINE, setOnline)
+        .on(ChatHandlers.TYPING, setTyping)
+        .on(ChatHandlers.SPEAK, addMessage)
+        .on(ChatHandlers.DELETE, deleteMessage);
+    }
+  });
+
+  const debouncedTypingUpdater = useMemo(
+    () =>
+      debounce(
+        () => socket.current?.emit(ChatHandlers.TYPING, lastDraft.current),
+        MINIMUM_TYPING_UPDATE_INTERVAL
+      ),
+    []
+  );
+
+  useEffect(() => {
+    lastDraft.current = draft;
+    debouncedTypingUpdater();
+  }, [draft]);
+
+  useEffect(() => {
+    if (focused || document.hasFocus()) {
+      setNotifications(0);
+    }
+  }, [focused]);
+
+  useEffect(() => {
+    setMessageLookup(
+      messages.reduce((prev, next) => {
+        prev[next.id] = next;
+        return prev;
+      }, {} as Record<string, IChatMessage>)
+    );
+  }, [messages]);
+
+  // Display e.g. [+2] Chat when notifications occur when you're away.
+  useEffect(() => {
+    const title = document.getElementsByTagName("title")[0];
+    const favicon = document.getElementById("favicon") as HTMLLinkElement;
+    const escape = (window as any).escapeHTML;
+    const alertedWhileAway = notifications > 0 && !focused;
+    const pathIcon = alertedWhileAway ? "alert" : "icon";
+
+    favicon.href = escape(`/assets/images/${siteName}/${pathIcon}.webp?v=3`);
+    title.innerHTML = alertedWhileAway ? `[+${notifications}] Chat` : "Chat";
+  }, [notifications, focused]);
+
+  // Setup Lozad
+  useEffect(() => {
+    const { observe, observer } = lozad();
+
+    observe();
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <ChatContext.Provider value={context}>{children}</ChatContext.Provider>
+  );
+}
+
+export function useChat() {
+  const value = useContext(ChatContext);
+  return value;
+}
--- a/chat/src/hooks/useDrawer.tsx
+++ b/chat/src/hooks/useDrawer.tsx
@ -0,0 +1,197 @@
+import React, {
+  ReactNode,
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useDrag } from "react-dnd";
+
+interface DrawerConfig {
+  title?: string;
+  content: ReactNode;
+  actions?: Array<{ title: string; onClick(): void }>;
+}
+
+interface DrawerContextType {
+  config: DrawerConfig;
+  open: boolean;
+  coordinates: [number, number];
+  reveal(config: DrawerConfig): void;
+  hide(): void;
+  show(): void;
+  toggle(): void;
+  updateCoordinates(to: [number, number]): void;
+}
+
+const DRAWER_COORDINATES_STORAGE_KEY = "Drawer/Coordinates";
+
+const DEFAULT_DRAWER_CONFIG = {
+  title: "",
+  content: null,
+  actions: [],
+};
+
+const DrawerContext = createContext<DrawerContextType>({
+  config: DEFAULT_DRAWER_CONFIG,
+  open: false,
+  coordinates: [0, 0] as [number, number],
+  reveal() {},
+  hide() {},
+  show() {},
+  toggle() {},
+  updateCoordinates() {},
+});
+
+export function useDrawer() {
+  const values = useContext(DrawerContext);
+  return values;
+}
+
+export function DrawerProvider({ children }: PropsWithChildren) {
+  const [open, setOpen] = useState(false);
+  const [config, setConfig] = useState<DrawerConfig>(DEFAULT_DRAWER_CONFIG);
+  const [coordinates, setCoordinates] = useState([0, 0] as [number, number]);
+  const reveal = useCallback((config: DrawerConfig) => {
+    setConfig(config);
+    show();
+  }, []);
+  const hide = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const show = useCallback(() => {
+    setOpen(true);
+  }, []);
+  const toggle = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  const context = useMemo(
+    () => ({
+      config,
+      open,
+      coordinates,
+      reveal,
+      hide,
+      show,
+      toggle,
+      updateCoordinates: setCoordinates,
+    }),
+    [config, open, coordinates, reveal, hide, show, toggle]
+  );
+
+  // Load coordinates.
+  useEffect(() => {
+    const persisted = window.localStorage.getItem(
+      DRAWER_COORDINATES_STORAGE_KEY
+    );
+
+    if (persisted) {
+      setCoordinates(JSON.parse(persisted));
+    }
+  }, []);
+
+  // Persist coordinates.
+  useEffect(() => {
+    window.localStorage.setItem(
+      DRAWER_COORDINATES_STORAGE_KEY,
+      JSON.stringify(coordinates)
+    );
+  }, [coordinates]);
+
+  return (
+    <DrawerContext.Provider value={context}>{children}</DrawerContext.Provider>
+  );
+}
+
+export function Drawer() {
+  const {
+    config: { title = "", content, actions = [] },
+    open,
+    coordinates,
+    updateCoordinates,
+    hide,
+  } = useDrawer();
+  const [x, y] = coordinates;
+  const [{ isDragging }, dragRef] = useDrag({
+    type: "drawer",
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  const lastMousePosition = useRef([0, 0]);
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) =>
+      (lastMousePosition.current = [event.clientX, event.clientY]);
+
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      const chatWrapper = document.getElementById("chatWrapper");
+      const chatWrapperBox = chatWrapper.getBoundingClientRect();
+
+      updateCoordinates([chatWrapperBox.left, chatWrapperBox.top]);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (isDragging) {
+      const onRelease = (event: DragEvent) => {
+        const drawer = document.getElementById("drawer");
+        const drawerBox = drawer.getBoundingClientRect();
+        const [mouseX, mouseY] = lastMousePosition.current;
+        const xDiff = mouseX - drawerBox.left;
+        const yDiff = mouseY - drawerBox.top;
+
+        updateCoordinates([event.clientX - xDiff, event.clientY - yDiff]);
+      };
+
+      document.addEventListener("drop", onRelease);
+
+      return () => {
+        document.removeEventListener("drop", onRelease);
+      };
+    }
+  }, [isDragging]);
+
+  return (
+    <div
+      id="drawer"
+      className="App-drawer"
+      ref={dragRef}
+      style={{
+        top: y,
+        left: x,
+      }}
+    >
+      <button
+        type="button"
+        className="App-drawer--close btn btn-default"
+        onClick={hide}
+      >
+        X
+      </button>
+      <div className="App-drawer--content">{content}</div>
+      {actions.map((action) => (
+        <button
+          key={action.title}
+          type="button"
+          onClick={action.onClick}
+          className="btn btn-secondary"
+        >
+          {action.title}
+        </button>
+      ))}
+    </div>
+  );
+}
--- a/chat/src/hooks/useEmojis.ts
+++ b/chat/src/hooks/useEmojis.ts
@ -0,0 +1,230 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import debounce from "lodash.debounce";
+
+const FAVORITES_STORAGE_KEY = "Emojis/Favorites";
+const MINIMUM_SEARCH_INTERVAL = 350;
+
+interface MarseyListEmoji {
+  author: string;
+  class: string;
+  count: number;
+  name: string;
+  tags: string[];
+}
+
+export function useEmojis() {
+  const emojiDictionary = useRef(new EmojiDictionary());
+  const [error, setError] = useState("");
+  const [emojis, setEmojis] = useState<MarseyListEmoji[]>([]);
+  const [genres, setGenres] = useState<string[]>([]);
+  const [collections, setCollections] = useState<Record<string, string[]>>({});
+  const [favorites, setFavorites] = useState<string[]>([]);
+  const [queries, setQueries] = useState<string[]>([]);
+  const [mostRecentQuery, setMostRecentQuery] = useState("");
+  const [visible, setVisible] = useState<string[]>([]);
+  const addQuery = useCallback(
+    (query: string) => setQueries((prev) => prev.concat(query)),
+    []
+  );
+  const debouncedQueryAdder = useMemo(
+    () => debounce(addQuery, MINIMUM_SEARCH_INTERVAL),
+    []
+  );
+
+  // Retrieve the list.
+  useEffect(() => {
+    fetch("/marsey_list.json")
+      .then((res) => res.json())
+      .then(setEmojis)
+      .catch(setError);
+  }, []);
+
+  // Load favorites.
+  useEffect(() => {
+    const persisted = window.localStorage.getItem(FAVORITES_STORAGE_KEY);
+
+    if (persisted) {
+      setFavorites(JSON.parse(persisted));
+    }
+  }, []);
+
+  // Persist favorites.
+  useEffect(() => {
+    window.localStorage.setItem(
+      FAVORITES_STORAGE_KEY,
+      JSON.stringify(Array.from(new Set(favorites)))
+    );
+  }, [favorites]);
+
+  // When emojis are received, update the dictionary.
+  useEffect(() => {
+    const dictionary = emojiDictionary.current;
+    const genreCollections: Record<string, string[]> = {};
+
+    for (const emoji of emojis) {
+      dictionary.updateTag(emoji.name, emoji.name);
+
+      if (typeof emoji.author !== "undefined" && emoji.author !== null) {
+        dictionary.updateTag(emoji.author.toLowerCase(), emoji.name);
+      }
+
+      if (emoji.tags instanceof Array) {
+        for (const tag of emoji.tags) {
+          dictionary.updateTag(tag, emoji.name);
+        }
+      }
+
+      dictionary.classes.add(emoji.class);
+
+      if (!genreCollections[emoji.class]) {
+        genreCollections[emoji.class] = [];
+      }
+
+      genreCollections[emoji.class].push(emoji.name);
+    }
+
+    setGenres(Array.from(dictionary.classes.values()) as string[]);
+    setCollections(genreCollections);
+  }, [emojis]);
+
+  // Process queries as they come in.
+  useEffect(() => {
+    if (queries.length > 0) {
+      const lastQuery = queries[queries.length - 1].toLowerCase();
+
+      setQueries([]);
+      setMostRecentQuery(lastQuery);
+
+      if (lastQuery.length === 0) {
+        return setVisible([]);
+      }
+
+      const results = emojiDictionary.current.completeSearch(lastQuery);
+      const nextVisible = Array.from(results.values()) as string[];
+
+      setVisible(nextVisible);
+    }
+  }, [queries]);
+
+  // Clean up any debounced calls before exit.
+  useEffect(() => {
+    return () => {
+      debouncedQueryAdder.cancel();
+    };
+  }, []);
+
+  return {
+    error,
+    ready: emojis.length > 0,
+    visible,
+    genres,
+    collections,
+    favorites,
+    mostRecentQuery,
+    addQuery,
+    updateVisible: setVisible,
+    updateFavorites: setFavorites
+  };
+}
+
+class EmojiDictionaryNode {
+  tag = "";
+  names = [];
+
+  constructor(tag: string, name: string) {
+    this.tag = tag;
+    this.names = [name];
+  }
+}
+
+class EmojiDictionary {
+  dictionary = [];
+  classes = new Set();
+
+  updateTag(tag: string, name: string) {
+    let low = 0;
+    let high = this.dictionary.length;
+
+    while (low < high) {
+      let mid = (low + high) >>> 1;
+
+      if (this.dictionary[mid].tag.length < tag.length) {
+        low = mid + 1;
+      } else {
+        high = mid;
+      }
+    }
+
+    let target = low;
+
+    if (
+      typeof this.dictionary[target] !== "undefined" &&
+      this.dictionary[target].tag === tag
+    ) {
+      this.dictionary[target].names.push(name);
+    } else {
+      this.dictionary.splice(target, 0, new EmojiDictionaryNode(tag, name));
+    }
+  }
+
+  searchFor(query: string) {
+    query = query.toLowerCase();
+    const result = new Set();
+
+    if (this.dictionary.length === 0) {
+      return result;
+    }
+
+    let low = 0;
+    let high = this.dictionary.length;
+
+    while (low < high) {
+      let mid = (low + high) >>> 1;
+
+      if (this.dictionary[mid].tag.length < query.length) {
+        low = mid + 1;
+      } else {
+        high = mid;
+      }
+    }
+
+    let target = low;
+
+    for (
+      let i = target;
+      i >= 0 && this.dictionary[i].tag.startsWith(query);
+      i--
+    ) {
+      for (const name of this.dictionary[i].names) {
+        result.add(name);
+      }
+    }
+
+    for (
+      let i = target + 1;
+      i < this.dictionary.length && this.dictionary[i].tag.startsWith(query);
+      i++
+    ) {
+      for (const name of this.dictionary[i].names) {
+        result.add(name);
+      }
+    }
+
+    return result;
+  }
+
+  completeSearch(query: string) {
+    query = query.toLowerCase();
+    const result = new Set();
+
+    for (const { tag, names } of this.dictionary) {
+      if (tag.includes(query)) {
+        for (const name of names) {
+          result.add(name);
+        }
+      }
+    }
+
+    return result;
+  }
+}
--- a/chat/src/hooks/useRootContext.ts
+++ b/chat/src/hooks/useRootContext.ts
@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+export function useRootContext() {
+  const [{ admin, id, username, censored, themeColor, siteName }, setContext] =
+    useState({
+      id: "",
+      username: "",
+      admin: false,
+      censored: true,
+      themeColor: "#ff66ac",
+      siteName: "",
+    });
+
+  useEffect(() => {
+    const root = document.getElementById("root");
+
+    setContext({
+      id: root.dataset.id,
+      username: root.dataset.username,
+      admin: root.dataset.admin === "True",
+      censored: root.dataset.censored === "True",
+      themeColor: root.dataset.themecolor,
+      siteName: root.dataset.sitename,
+    });
+  }, []);
+
+  return { id, admin, username, censored, themeColor, siteName };
+}
--- a/chat/src/hooks/useWindowFocus.ts
+++ b/chat/src/hooks/useWindowFocus.ts
@ -0,0 +1,19 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useWindowFocus() {
+  const [focused, setFocused] = useState(true);
+  const onFocus = useCallback(() => setFocused(true), []);
+  const onBlur = useCallback(() => setFocused(false), []);
+
+  useEffect(() => {
+    window.addEventListener("focus", onFocus);
+    window.addEventListener("blur", onBlur);
+
+    return () => {
+      window.removeEventListener("focus", onFocus);
+      window.removeEventListener("blur", onBlur);
+    };
+  });
+
+  return focused;
+}
--- a/chat/src/index.tsx
+++ b/chat/src/index.tsx
@ -0,0 +1,7 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+const root = createRoot(document.getElementById("root"))
+
+root.render(<App />);
--- a/chat/tsconfig.json
+++ b/chat/tsconfig.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react",
+    "lib": ["es2015", "dom", "ESNext"],
+    "noEmit": true
+  }
+}
--- a/chat/yarn-error.log
+++ b/chat/yarn-error.log
@ -0,0 +1,522 @@
+Arguments: 
+  /usr/local/Cellar/node/18.2.0/bin/node /usr/local/bin/yarn add react-dnd react-dnd-htm5-backend
+
+PATH: 
+  /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/MacGPG2/bin:/usr/local/share/dotnet:~/.dotnet/tools:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands
+
+Yarn version: 
+  1.22.10
+
+Node version: 
+  18.2.0
+
+Platform: 
+  darwin x64
+
+Trace: 
+  Error: https://registry.yarnpkg.com/react-dnd-htm5-backend: Not found
+      at params.callback [as _callback] (/usr/local/lib/node_modules/yarn/lib/cli.js:66988:18)
+      at self.callback (/usr/local/lib/node_modules/yarn/lib/cli.js:140662:22)
+      at Request.emit (node:events:527:28)
+      at Request.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141634:10)
+      at Request.emit (node:events:527:28)
+      at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141556:12)
+      at Object.onceWrapper (node:events:641:28)
+      at IncomingMessage.emit (node:events:539:35)
+      at endReadableNT (node:internal/streams/readable:1344:12)
+      at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
+
+npm manifest: 
+  {
+    "name": "chat",
+    "version": "1.0.0",
+    "main": "index.js",
+    "license": "MIT",
+    "dependencies": {
+      "@types/lozad": "^1.16.1",
+      "@types/react": "^18.0.20",
+      "@types/react-dom": "^18.0.6",
+      "@types/react-window": "^1.8.5",
+      "esbuild": "^0.15.7",
+      "lozad": "^1.16.0",
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "react-window": "^1.8.7",
+      "run-when-changed": "^2.1.0",
+      "socket.io-client": "^4.5.2",
+      "typescript": "^4.8.3",
+      "weak-key": "^1.0.2"
+    },
+    "scripts": {
+      "chat": "yarn check && yarn build && yarn css:move",
+      "chat:watch": "run-when-changed --watch \"**/*.*\" --exec \"yarn chat\"",
+      "check": "tsc",
+      "build": "esbuild ./src --outfile=../files/assets/js/chat_built.js --bundle",
+      "css:move": "mv ../files/assets/js/chat_built.css ../files/assets/css/chat_built.css"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+  # yarn lockfile v1
+  
+  
+  "@babel/runtime@^7.0.0":
+    version "7.19.0"
+    resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+    integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+    dependencies:
+      regenerator-runtime "^0.13.4"
+  
+  "@esbuild/linux-loong64@0.15.7":
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.7.tgz#1ec4af4a16c554cbd402cc557ccdd874e3f7be53"
+    integrity sha512-IKznSJOsVUuyt7cDzzSZyqBEcZe+7WlBqTVXiF1OXP/4Nm387ToaXZ0fyLwI1iBlI/bzpxVq411QE2/Bt2XWWw==
+  
+  "@socket.io/component-emitter@~3.1.0":
+    version "3.1.0"
+    resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+    integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+  
+  "@types/lozad@^1.16.1":
+    version "1.16.1"
+    resolved "https://registry.yarnpkg.com/@types/lozad/-/lozad-1.16.1.tgz#fc06f73bfd787a456b0e12a9d83a954b56431400"
+    integrity sha512-wmGW368y1zu9ark/7fMNHdZ/c3wGV7fxoEqtK+V3Dsv2QGQQp34D9elDowuW12zZwxjO9NkNUorqg+D9j1VRGQ==
+  
+  "@types/prop-types@*":
+    version "15.7.5"
+    resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+    integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+  
+  "@types/react-dom@^18.0.6":
+    version "18.0.6"
+    resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+    integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
+    dependencies:
+      "@types/react" "*"
+  
+  "@types/react-window@^1.8.5":
+    version "1.8.5"
+    resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
+    integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
+    dependencies:
+      "@types/react" "*"
+  
+  "@types/react@*", "@types/react@^18.0.20":
+    version "18.0.20"
+    resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.20.tgz#e4c36be3a55eb5b456ecf501bd4a00fd4fd0c9ab"
+    integrity sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==
+    dependencies:
+      "@types/prop-types" "*"
+      "@types/scheduler" "*"
+      csstype "^3.0.2"
+  
+  "@types/scheduler@*":
+    version "0.16.2"
+    resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+    integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+  
+  ansi-bold@^0.1.1:
+    version "0.1.1"
+    resolved "https://registry.yarnpkg.com/ansi-bold/-/ansi-bold-0.1.1.tgz#3e63950af5acc2ae2e670e6f67deb115d1a5f505"
+    integrity sha512-wWKwcViX1E28U6FohtWOP4sHFyArELHJ2p7+3BzbibqJiuISeskq6t7JnrLisUngMF5zMhgmXVw8Equjzz9OlA==
+    dependencies:
+      ansi-wrap "0.1.0"
+  
+  ansi-wrap@0.1.0:
+    version "0.1.0"
+    resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+    integrity sha512-ZyznvL8k/FZeQHr2T6LzcJ/+vBApDnMNZvfVFy3At0knswWd6rJ3/0Hhmpu8oqa6C92npmozs890sX9Dl6q+Qw==
+  
+  balanced-match@^1.0.0:
+    version "1.0.2"
+    resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+    integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+  
+  brace-expansion@^1.1.7:
+    version "1.1.11"
+    resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+    integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+    dependencies:
+      balanced-match "^1.0.0"
+      concat-map "0.0.1"
+  
+  commander@^2.15.1:
+    version "2.20.3"
+    resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+    integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+  
+  concat-map@0.0.1:
+    version "0.0.1"
+    resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+    integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+  
+  core-js@^2.4.0:
+    version "2.6.12"
+    resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+    integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+  
+  csstype@^3.0.2:
+    version "3.1.1"
+    resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+    integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+  
+  debug@~4.3.1, debug@~4.3.2:
+    version "4.3.4"
+    resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+    integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+    dependencies:
+      ms "2.1.2"
+  
+  engine.io-client@~6.2.1:
+    version "6.2.2"
+    resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.2.tgz#c6c5243167f5943dcd9c4abee1bfc634aa2cbdd0"
+    integrity sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==
+    dependencies:
+      "@socket.io/component-emitter" "~3.1.0"
+      debug "~4.3.1"
+      engine.io-parser "~5.0.3"
+      ws "~8.2.3"
+      xmlhttprequest-ssl "~2.0.0"
+  
+  engine.io-parser@~5.0.3:
+    version "5.0.4"
+    resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
+    integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
+  
+  es6-promise@^3.0.2:
+    version "3.3.1"
+    resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
+    integrity sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==
+  
+  esbuild-android-64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.7.tgz#a521604d8c4c6befc7affedc897df8ccde189bea"
+    integrity sha512-p7rCvdsldhxQr3YHxptf1Jcd86dlhvc3EQmQJaZzzuAxefO9PvcI0GLOa5nCWem1AJ8iMRu9w0r5TG8pHmbi9w==
+  
+  esbuild-android-arm64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.7.tgz#307b81f1088bf1e81dfe5f3d1d63a2d2a2e3e68e"
+    integrity sha512-L775l9ynJT7rVqRM5vo+9w5g2ysbOCfsdLV4CWanTZ1k/9Jb3IYlQ06VCI1edhcosTYJRECQFJa3eAvkx72eyQ==
+  
+  esbuild-darwin-64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.7.tgz#270117b0c4ec6bcbc5cf3a297a7d11954f007e11"
+    integrity sha512-KGPt3r1c9ww009t2xLB6Vk0YyNOXh7hbjZ3EecHoVDxgtbUlYstMPDaReimKe6eOEfyY4hBEEeTvKwPsiH5WZg==
+  
+  esbuild-darwin-arm64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.7.tgz#97851eacd11dacb7719713602e3319e16202fc77"
+    integrity sha512-kBIHvtVqbSGajN88lYMnR3aIleH3ABZLLFLxwL2stiuIGAjGlQW741NxVTpUHQXUmPzxi6POqc9npkXa8AcSZQ==
+  
+  esbuild-freebsd-64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.7.tgz#1de15ffaf5ae916aa925800aa6d02579960dd8c4"
+    integrity sha512-hESZB91qDLV5MEwNxzMxPfbjAhOmtfsr9Wnuci7pY6TtEh4UDuevmGmkUIjX/b+e/k4tcNBMf7SRQ2mdNuK/HQ==
+  
+  esbuild-freebsd-arm64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.7.tgz#0f160dbf5c9a31a1d8dd87acbbcb1a04b7031594"
+    integrity sha512-dLFR0ChH5t+b3J8w0fVKGvtwSLWCv7GYT2Y2jFGulF1L5HftQLzVGN+6pi1SivuiVSmTh28FwUhi9PwQicXI6Q==
+  
+  esbuild-linux-32@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.7.tgz#422eb853370a5e40bdce8b39525380de11ccadec"
+    integrity sha512-v3gT/LsONGUZcjbt2swrMjwxo32NJzk+7sAgtxhGx1+ZmOFaTRXBAi1PPfgpeo/J//Un2jIKm/I+qqeo4caJvg==
+  
+  esbuild-linux-64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.7.tgz#f89c468453bb3194b14f19dc32e0b99612e81d2b"
+    integrity sha512-LxXEfLAKwOVmm1yecpMmWERBshl+Kv5YJ/1KnyAr6HRHFW8cxOEsEfisD3sVl/RvHyW//lhYUVSuy9jGEfIRAQ==
+  
+  esbuild-linux-arm64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.7.tgz#68a79d6eb5e032efb9168a0f340ccfd33d6350a1"
+    integrity sha512-P3cfhudpzWDkglutWgXcT2S7Ft7o2e3YDMrP1n0z2dlbUZghUkKCyaWw0zhp4KxEEzt/E7lmrtRu/pGWnwb9vw==
+  
+  esbuild-linux-arm@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.7.tgz#2b7c784d0b3339878013dfa82bf5eaf82c7ce7d3"
+    integrity sha512-JKgAHtMR5f75wJTeuNQbyznZZa+pjiUHV7sRZp42UNdyXC6TiUYMW/8z8yIBAr2Fpad8hM1royZKQisqPABPvQ==
+  
+  esbuild-linux-mips64le@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.7.tgz#bb8330a50b14aa84673816cb63cc6c8b9beb62cc"
+    integrity sha512-T7XKuxl0VpeFLCJXub6U+iybiqh0kM/bWOTb4qcPyDDwNVhLUiPcGdG2/0S7F93czUZOKP57YiLV8YQewgLHKw==
+  
+  esbuild-linux-ppc64le@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.7.tgz#52544e7fa992811eb996674090d0bc41f067a14b"
+    integrity sha512-6mGuC19WpFN7NYbecMIJjeQgvDb5aMuvyk0PDYBJrqAEMkTwg3Z98kEKuCm6THHRnrgsdr7bp4SruSAxEM4eJw==
+  
+  esbuild-linux-riscv64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.7.tgz#a43ae60697992b957e454cbb622f7ee5297e8159"
+    integrity sha512-uUJsezbswAYo/X7OU/P+PuL/EI9WzxsEQXDekfwpQ23uGiooxqoLFAPmXPcRAt941vjlY9jtITEEikWMBr+F/g==
+  
+  esbuild-linux-s390x@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.7.tgz#8c76a125dd10a84c166294d77416caaf5e1c7b64"
+    integrity sha512-+tO+xOyTNMc34rXlSxK7aCwJgvQyffqEM5MMdNDEeMU3ss0S6wKvbBOQfgd5jRPblfwJ6b+bKiz0g5nABpY0QQ==
+  
+  esbuild-netbsd-64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.7.tgz#19b2e75449d7d9c32b5d8a222bac2f1e0c3b08fd"
+    integrity sha512-yVc4Wz+Pu3cP5hzm5kIygNPrjar/v5WCSoRmIjCPWfBVJkZNb5brEGKUlf+0Y759D48BCWa0WHrWXaNy0DULTQ==
+  
+  esbuild-openbsd-64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.7.tgz#1357b2bf72fd037d9150e751420a1fe4c8618ad7"
+    integrity sha512-GsimbwC4FSR4lN3wf8XmTQ+r8/0YSQo21rWDL0XFFhLHKlzEA4SsT1Tl8bPYu00IU6UWSJ+b3fG/8SB69rcuEQ==
+  
+  esbuild-sunos-64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.7.tgz#87ab2c604592a9c3c763e72969da0d72bcde91d2"
+    integrity sha512-8CDI1aL/ts0mDGbWzjEOGKXnU7p3rDzggHSBtVryQzkSOsjCHRVe0iFYUuhczlxU1R3LN/E7HgUO4NXzGGP/Ag==
+  
+  esbuild-windows-32@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.7.tgz#c81e688c0457665a8d463a669e5bf60870323e99"
+    integrity sha512-cOnKXUEPS8EGCzRSFa1x6NQjGhGsFlVgjhqGEbLTPsA7x4RRYiy2RKoArNUU4iR2vHmzqS5Gr84MEumO/wxYKA==
+  
+  esbuild-windows-64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.7.tgz#2421d1ae34b0561a9d6767346b381961266c4eff"
+    integrity sha512-7MI08Ec2sTIDv+zH6StNBKO+2hGUYIT42GmFyW6MBBWWtJhTcQLinKS6ldIN1d52MXIbiJ6nXyCJ+LpL4jBm3Q==
+  
+  esbuild-windows-arm64@0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.7.tgz#7d5e9e060a7b454cb2f57f84a3f3c23c8f30b7d2"
+    integrity sha512-R06nmqBlWjKHddhRJYlqDd3Fabx9LFdKcjoOy08YLimwmsswlFBJV4rXzZCxz/b7ZJXvrZgj8DDv1ewE9+StMw==
+  
+  esbuild@^0.15.7:
+    version "0.15.7"
+    resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.7.tgz#8a1f1aff58671a3199dd24df95314122fc1ddee8"
+    integrity sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==
+    optionalDependencies:
+      "@esbuild/linux-loong64" "0.15.7"
+      esbuild-android-64 "0.15.7"
+      esbuild-android-arm64 "0.15.7"
+      esbuild-darwin-64 "0.15.7"
+      esbuild-darwin-arm64 "0.15.7"
+      esbuild-freebsd-64 "0.15.7"
+      esbuild-freebsd-arm64 "0.15.7"
+      esbuild-linux-32 "0.15.7"
+      esbuild-linux-64 "0.15.7"
+      esbuild-linux-arm "0.15.7"
+      esbuild-linux-arm64 "0.15.7"
+      esbuild-linux-mips64le "0.15.7"
+      esbuild-linux-ppc64le "0.15.7"
+      esbuild-linux-riscv64 "0.15.7"
+      esbuild-linux-s390x "0.15.7"
+      esbuild-netbsd-64 "0.15.7"
+      esbuild-openbsd-64 "0.15.7"
+      esbuild-sunos-64 "0.15.7"
+      esbuild-windows-32 "0.15.7"
+      esbuild-windows-64 "0.15.7"
+      esbuild-windows-arm64 "0.15.7"
+  
+  fs-find-root@^2.0.0:
+    version "2.0.0"
+    resolved "https://registry.yarnpkg.com/fs-find-root/-/fs-find-root-2.0.0.tgz#71c23b384db6bcb1e8ec637cade707fda39c593b"
+    integrity sha512-LmgsxDwnxd+sfm3EZ66P8nSlUMm69hKz/LdXKChK2a+5xXnrAB7MPn2uo0VCyrgj8lZNqyj6EIdD516ILZAEBg==
+    dependencies:
+      es6-promise "^3.0.2"
+  
+  fs.realpath@^1.0.0:
+    version "1.0.0"
+    resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+    integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+  
+  gaze@^1.1.2:
+    version "1.1.3"
+    resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.3.tgz#c441733e13b927ac8c0ff0b4c3b033f28812924a"
+    integrity sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==
+    dependencies:
+      globule "^1.0.0"
+  
+  glob@~7.1.1:
+    version "7.1.7"
+    resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+    integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+    dependencies:
+      fs.realpath "^1.0.0"
+      inflight "^1.0.4"
+      inherits "2"
+      minimatch "^3.0.4"
+      once "^1.3.0"
+      path-is-absolute "^1.0.0"
+  
+  globule@^1.0.0:
+    version "1.3.4"
+    resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.4.tgz#7c11c43056055a75a6e68294453c17f2796170fb"
+    integrity sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==
+    dependencies:
+      glob "~7.1.1"
+      lodash "^4.17.21"
+      minimatch "~3.0.2"
+  
+  inflight@^1.0.4:
+    version "1.0.6"
+    resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+    integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+    dependencies:
+      once "^1.3.0"
+      wrappy "1"
+  
+  inherits@2:
+    version "2.0.4"
+    resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+    integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+  
+  "js-tokens@^3.0.0 || ^4.0.0":
+    version "4.0.0"
+    resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+    integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+  
+  lodash@^4.17.21:
+    version "4.17.21"
+    resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+    integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+  
+  loose-envify@^1.1.0:
+    version "1.4.0"
+    resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+    integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+    dependencies:
+      js-tokens "^3.0.0 || ^4.0.0"
+  
+  lozad@^1.16.0:
+    version "1.16.0"
+    resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4"
+    integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==
+  
+  "memoize-one@>=3.1.1 <6":
+    version "5.2.1"
+    resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+    integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+  
+  minimatch@^3.0.4:
+    version "3.1.2"
+    resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+    integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+    dependencies:
+      brace-expansion "^1.1.7"
+  
+  minimatch@~3.0.2:
+    version "3.0.8"
+    resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
+    integrity sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==
+    dependencies:
+      brace-expansion "^1.1.7"
+  
+  ms@2.1.2:
+    version "2.1.2"
+    resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+    integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+  
+  once@^1.3.0:
+    version "1.4.0"
+    resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+    integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+    dependencies:
+      wrappy "1"
+  
+  path-is-absolute@^1.0.0:
+    version "1.0.1"
+    resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+    integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+  
+  react-dom@^18.2.0:
+    version "18.2.0"
+    resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+    integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+    dependencies:
+      loose-envify "^1.1.0"
+      scheduler "^0.23.0"
+  
+  react-window@^1.8.7:
+    version "1.8.7"
+    resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4"
+    integrity sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==
+    dependencies:
+      "@babel/runtime" "^7.0.0"
+      memoize-one ">=3.1.1 <6"
+  
+  react@^18.2.0:
+    version "18.2.0"
+    resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+    integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+    dependencies:
+      loose-envify "^1.1.0"
+  
+  regenerator-runtime@^0.13.4:
+    version "0.13.9"
+    resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+    integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+  
+  run-when-changed@^2.1.0:
+    version "2.1.0"
+    resolved "https://registry.yarnpkg.com/run-when-changed/-/run-when-changed-2.1.0.tgz#2e76d6ff6014d38786a3a11b98e9291c7e934953"
+    integrity sha512-ge/wuPQAvQz0uDEOO8W2c3g4mqXDa1XXtnJmjP9+6Nqfb+XdUYkQX/KvKmSvJ4xG5weD3RGm0u2Q3UsGzAo5gw==
+    dependencies:
+      ansi-bold "^0.1.1"
+      commander "^2.15.1"
+      fs-find-root "^2.0.0"
+      gaze "^1.1.2"
+      minimatch "^3.0.4"
+  
+  scheduler@^0.23.0:
+    version "0.23.0"
+    resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+    integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+    dependencies:
+      loose-envify "^1.1.0"
+  
+  socket.io-client@^4.5.2:
+    version "4.5.2"
+    resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.2.tgz#9481518c560388c980c88b01e3cf62f367f04c96"
+    integrity sha512-naqYfFu7CLDiQ1B7AlLhRXKX3gdeaIMfgigwavDzgJoIUYulc1qHH5+2XflTsXTPY7BlPH5rppJyUjhjrKQKLg==
+    dependencies:
+      "@socket.io/component-emitter" "~3.1.0"
+      debug "~4.3.2"
+      engine.io-client "~6.2.1"
+      socket.io-parser "~4.2.0"
+  
+  socket.io-parser@~4.2.0:
+    version "4.2.1"
+    resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
+    integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
+    dependencies:
+      "@socket.io/component-emitter" "~3.1.0"
+      debug "~4.3.1"
+  
+  typescript@^4.8.3:
+    version "4.8.3"
+    resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.3.tgz#d59344522c4bc464a65a730ac695007fdb66dd88"
+    integrity sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==
+  
+  weak-key@^1.0.2:
+    version "1.0.2"
+    resolved "https://registry.yarnpkg.com/weak-key/-/weak-key-1.0.2.tgz#dd5f66648ffb7e83810ea0553a948c60b2b50588"
+    integrity sha512-x9y9moPEcom985nUdHxM+YWbMcP3Ru+fmYqVNHSb6djJGg7H6Ru2ohuzaVIXx1JNyp8E7GO7GsBnehRntaBlsg==
+    dependencies:
+      core-js "^2.4.0"
+  
+  wrappy@1:
+    version "1.0.2"
+    resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+    integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+  
+  ws@~8.2.3:
+    version "8.2.3"
+    resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
+    integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+  
+  xmlhttprequest-ssl@~2.0.0:
+    version "2.0.0"
+    resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+    integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
--- a/chat/yarn.lock
+++ b/chat/yarn.lock
@ -0,0 +1,575 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.9.2":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@esbuild/linux-loong64@0.15.7":
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.7.tgz#1ec4af4a16c554cbd402cc557ccdd874e3f7be53"
+  integrity sha512-IKznSJOsVUuyt7cDzzSZyqBEcZe+7WlBqTVXiF1OXP/4Nm387ToaXZ0fyLwI1iBlI/bzpxVq411QE2/Bt2XWWw==
+
+"@react-dnd/asap@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
+  integrity sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==
+
+"@react-dnd/invariant@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-4.0.2.tgz#b92edffca10a26466643349fac7cdfb8799769df"
+  integrity sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==
+
+"@react-dnd/shallowequal@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz#d1b4befa423f692fa4abf1c79209702e7d8ae4b4"
+  integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==
+
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
+"@types/humanize-duration@^3.27.1":
+  version "3.27.1"
+  resolved "https://registry.yarnpkg.com/@types/humanize-duration/-/humanize-duration-3.27.1.tgz#f14740d1f585a0a8e3f46359b62fda8b0eaa31e7"
+  integrity sha512-K3e+NZlpCKd6Bd/EIdqjFJRFHbrq5TzPPLwREk5Iv/YoIjQrs6ljdAUCo+Lb2xFlGNOjGSE0dqsVD19cZL137w==
+
+"@types/lodash.debounce@^4.0.7":
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
+  integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.185"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.185.tgz#c9843f5a40703a8f5edfd53358a58ae729816908"
+  integrity sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==
+
+"@types/lozad@^1.16.1":
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/@types/lozad/-/lozad-1.16.1.tgz#fc06f73bfd787a456b0e12a9d83a954b56431400"
+  integrity sha512-wmGW368y1zu9ark/7fMNHdZ/c3wGV7fxoEqtK+V3Dsv2QGQQp34D9elDowuW12zZwxjO9NkNUorqg+D9j1VRGQ==
+
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/react-dom@^18.0.6":
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-virtualized-auto-sizer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
+  integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-window@^1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
+  integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^18.0.20":
+  version "18.0.20"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.20.tgz#e4c36be3a55eb5b456ecf501bd4a00fd4fd0c9ab"
+  integrity sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+ansi-bold@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-bold/-/ansi-bold-0.1.1.tgz#3e63950af5acc2ae2e670e6f67deb115d1a5f505"
+  integrity sha512-wWKwcViX1E28U6FohtWOP4sHFyArELHJ2p7+3BzbibqJiuISeskq6t7JnrLisUngMF5zMhgmXVw8Equjzz9OlA==
+  dependencies:
+    ansi-wrap "0.1.0"
+
+ansi-wrap@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+  integrity sha512-ZyznvL8k/FZeQHr2T6LzcJ/+vBApDnMNZvfVFy3At0knswWd6rJ3/0Hhmpu8oqa6C92npmozs890sX9Dl6q+Qw==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
+commander@^2.15.1:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
+csstype@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
+debug@~4.3.1, debug@~4.3.2:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+dnd-core@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-16.0.1.tgz#a1c213ed08961f6bd1959a28bb76f1a868360d19"
+  integrity sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==
+  dependencies:
+    "@react-dnd/asap" "^5.0.1"
+    "@react-dnd/invariant" "^4.0.1"
+    redux "^4.2.0"
+
+dotenv@^16.0.2:
+  version "16.0.2"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.2.tgz#0b0f8652c016a3858ef795024508cddc4bffc5bf"
+  integrity sha512-JvpYKUmzQhYoIFgK2MOnF3bciIZoItIIoryihy0rIA+H4Jy0FmgyKYAHCTN98P5ybGSJcIFbh6QKeJdtZd1qhA==
+
+engine.io-client@~6.2.1:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.2.tgz#c6c5243167f5943dcd9c4abee1bfc634aa2cbdd0"
+  integrity sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.0.3"
+    ws "~8.2.3"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.0.3:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
+  integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
+
+es6-promise@^3.0.2:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
+  integrity sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==
+
+esbuild-android-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.7.tgz#a521604d8c4c6befc7affedc897df8ccde189bea"
+  integrity sha512-p7rCvdsldhxQr3YHxptf1Jcd86dlhvc3EQmQJaZzzuAxefO9PvcI0GLOa5nCWem1AJ8iMRu9w0r5TG8pHmbi9w==
+
+esbuild-android-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.7.tgz#307b81f1088bf1e81dfe5f3d1d63a2d2a2e3e68e"
+  integrity sha512-L775l9ynJT7rVqRM5vo+9w5g2ysbOCfsdLV4CWanTZ1k/9Jb3IYlQ06VCI1edhcosTYJRECQFJa3eAvkx72eyQ==
+
+esbuild-darwin-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.7.tgz#270117b0c4ec6bcbc5cf3a297a7d11954f007e11"
+  integrity sha512-KGPt3r1c9ww009t2xLB6Vk0YyNOXh7hbjZ3EecHoVDxgtbUlYstMPDaReimKe6eOEfyY4hBEEeTvKwPsiH5WZg==
+
+esbuild-darwin-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.7.tgz#97851eacd11dacb7719713602e3319e16202fc77"
+  integrity sha512-kBIHvtVqbSGajN88lYMnR3aIleH3ABZLLFLxwL2stiuIGAjGlQW741NxVTpUHQXUmPzxi6POqc9npkXa8AcSZQ==
+
+esbuild-freebsd-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.7.tgz#1de15ffaf5ae916aa925800aa6d02579960dd8c4"
+  integrity sha512-hESZB91qDLV5MEwNxzMxPfbjAhOmtfsr9Wnuci7pY6TtEh4UDuevmGmkUIjX/b+e/k4tcNBMf7SRQ2mdNuK/HQ==
+
+esbuild-freebsd-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.7.tgz#0f160dbf5c9a31a1d8dd87acbbcb1a04b7031594"
+  integrity sha512-dLFR0ChH5t+b3J8w0fVKGvtwSLWCv7GYT2Y2jFGulF1L5HftQLzVGN+6pi1SivuiVSmTh28FwUhi9PwQicXI6Q==
+
+esbuild-linux-32@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.7.tgz#422eb853370a5e40bdce8b39525380de11ccadec"
+  integrity sha512-v3gT/LsONGUZcjbt2swrMjwxo32NJzk+7sAgtxhGx1+ZmOFaTRXBAi1PPfgpeo/J//Un2jIKm/I+qqeo4caJvg==
+
+esbuild-linux-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.7.tgz#f89c468453bb3194b14f19dc32e0b99612e81d2b"
+  integrity sha512-LxXEfLAKwOVmm1yecpMmWERBshl+Kv5YJ/1KnyAr6HRHFW8cxOEsEfisD3sVl/RvHyW//lhYUVSuy9jGEfIRAQ==
+
+esbuild-linux-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.7.tgz#68a79d6eb5e032efb9168a0f340ccfd33d6350a1"
+  integrity sha512-P3cfhudpzWDkglutWgXcT2S7Ft7o2e3YDMrP1n0z2dlbUZghUkKCyaWw0zhp4KxEEzt/E7lmrtRu/pGWnwb9vw==
+
+esbuild-linux-arm@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.7.tgz#2b7c784d0b3339878013dfa82bf5eaf82c7ce7d3"
+  integrity sha512-JKgAHtMR5f75wJTeuNQbyznZZa+pjiUHV7sRZp42UNdyXC6TiUYMW/8z8yIBAr2Fpad8hM1royZKQisqPABPvQ==
+
+esbuild-linux-mips64le@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.7.tgz#bb8330a50b14aa84673816cb63cc6c8b9beb62cc"
+  integrity sha512-T7XKuxl0VpeFLCJXub6U+iybiqh0kM/bWOTb4qcPyDDwNVhLUiPcGdG2/0S7F93czUZOKP57YiLV8YQewgLHKw==
+
+esbuild-linux-ppc64le@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.7.tgz#52544e7fa992811eb996674090d0bc41f067a14b"
+  integrity sha512-6mGuC19WpFN7NYbecMIJjeQgvDb5aMuvyk0PDYBJrqAEMkTwg3Z98kEKuCm6THHRnrgsdr7bp4SruSAxEM4eJw==
+
+esbuild-linux-riscv64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.7.tgz#a43ae60697992b957e454cbb622f7ee5297e8159"
+  integrity sha512-uUJsezbswAYo/X7OU/P+PuL/EI9WzxsEQXDekfwpQ23uGiooxqoLFAPmXPcRAt941vjlY9jtITEEikWMBr+F/g==
+
+esbuild-linux-s390x@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.7.tgz#8c76a125dd10a84c166294d77416caaf5e1c7b64"
+  integrity sha512-+tO+xOyTNMc34rXlSxK7aCwJgvQyffqEM5MMdNDEeMU3ss0S6wKvbBOQfgd5jRPblfwJ6b+bKiz0g5nABpY0QQ==
+
+esbuild-netbsd-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.7.tgz#19b2e75449d7d9c32b5d8a222bac2f1e0c3b08fd"
+  integrity sha512-yVc4Wz+Pu3cP5hzm5kIygNPrjar/v5WCSoRmIjCPWfBVJkZNb5brEGKUlf+0Y759D48BCWa0WHrWXaNy0DULTQ==
+
+esbuild-openbsd-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.7.tgz#1357b2bf72fd037d9150e751420a1fe4c8618ad7"
+  integrity sha512-GsimbwC4FSR4lN3wf8XmTQ+r8/0YSQo21rWDL0XFFhLHKlzEA4SsT1Tl8bPYu00IU6UWSJ+b3fG/8SB69rcuEQ==
+
+esbuild-sunos-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.7.tgz#87ab2c604592a9c3c763e72969da0d72bcde91d2"
+  integrity sha512-8CDI1aL/ts0mDGbWzjEOGKXnU7p3rDzggHSBtVryQzkSOsjCHRVe0iFYUuhczlxU1R3LN/E7HgUO4NXzGGP/Ag==
+
+esbuild-windows-32@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.7.tgz#c81e688c0457665a8d463a669e5bf60870323e99"
+  integrity sha512-cOnKXUEPS8EGCzRSFa1x6NQjGhGsFlVgjhqGEbLTPsA7x4RRYiy2RKoArNUU4iR2vHmzqS5Gr84MEumO/wxYKA==
+
+esbuild-windows-64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.7.tgz#2421d1ae34b0561a9d6767346b381961266c4eff"
+  integrity sha512-7MI08Ec2sTIDv+zH6StNBKO+2hGUYIT42GmFyW6MBBWWtJhTcQLinKS6ldIN1d52MXIbiJ6nXyCJ+LpL4jBm3Q==
+
+esbuild-windows-arm64@0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.7.tgz#7d5e9e060a7b454cb2f57f84a3f3c23c8f30b7d2"
+  integrity sha512-R06nmqBlWjKHddhRJYlqDd3Fabx9LFdKcjoOy08YLimwmsswlFBJV4rXzZCxz/b7ZJXvrZgj8DDv1ewE9+StMw==
+
+esbuild@^0.15.7:
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.7.tgz#8a1f1aff58671a3199dd24df95314122fc1ddee8"
+  integrity sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==
+  optionalDependencies:
+    "@esbuild/linux-loong64" "0.15.7"
+    esbuild-android-64 "0.15.7"
+    esbuild-android-arm64 "0.15.7"
+    esbuild-darwin-64 "0.15.7"
+    esbuild-darwin-arm64 "0.15.7"
+    esbuild-freebsd-64 "0.15.7"
+    esbuild-freebsd-arm64 "0.15.7"
+    esbuild-linux-32 "0.15.7"
+    esbuild-linux-64 "0.15.7"
+    esbuild-linux-arm "0.15.7"
+    esbuild-linux-arm64 "0.15.7"
+    esbuild-linux-mips64le "0.15.7"
+    esbuild-linux-ppc64le "0.15.7"
+    esbuild-linux-riscv64 "0.15.7"
+    esbuild-linux-s390x "0.15.7"
+    esbuild-netbsd-64 "0.15.7"
+    esbuild-openbsd-64 "0.15.7"
+    esbuild-sunos-64 "0.15.7"
+    esbuild-windows-32 "0.15.7"
+    esbuild-windows-64 "0.15.7"
+    esbuild-windows-arm64 "0.15.7"
+
+fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fs-find-root@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fs-find-root/-/fs-find-root-2.0.0.tgz#71c23b384db6bcb1e8ec637cade707fda39c593b"
+  integrity sha512-LmgsxDwnxd+sfm3EZ66P8nSlUMm69hKz/LdXKChK2a+5xXnrAB7MPn2uo0VCyrgj8lZNqyj6EIdD516ILZAEBg==
+  dependencies:
+    es6-promise "^3.0.2"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+gaze@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.3.tgz#c441733e13b927ac8c0ff0b4c3b033f28812924a"
+  integrity sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==
+  dependencies:
+    globule "^1.0.0"
+
+glob@~7.1.1:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globule@^1.0.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.4.tgz#7c11c43056055a75a6e68294453c17f2796170fb"
+  integrity sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==
+  dependencies:
+    glob "~7.1.1"
+    lodash "^4.17.21"
+    minimatch "~3.0.2"
+
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
+humanize-duration@^3.27.3:
+  version "3.27.3"
+  resolved "https://registry.yarnpkg.com/humanize-duration/-/humanize-duration-3.27.3.tgz#db654e72ebf5ccfe232c7f56bc58aa3a6fe4df88"
+  integrity sha512-iimHkHPfIAQ8zCDQLgn08pRqSVioyWvnGfaQ8gond2wf7Jq2jJ+24ykmnRyiz3fIldcn4oUuQXpjqKLhSVR7lw==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lozad@^1.16.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4"
+  integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==
+
+"memoize-one@>=3.1.1 <6":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
+minimatch@^3.0.4:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@~3.0.2:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
+  integrity sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+react-dnd-html5-backend@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz#87faef15845d512a23b3c08d29ecfd34871688b6"
+  integrity sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==
+  dependencies:
+    dnd-core "^16.0.1"
+
+react-dnd@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-16.0.1.tgz#2442a3ec67892c60d40a1559eef45498ba26fa37"
+  integrity sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==
+  dependencies:
+    "@react-dnd/invariant" "^4.0.1"
+    "@react-dnd/shallowequal" "^4.0.1"
+    dnd-core "^16.0.1"
+    fast-deep-equal "^3.1.3"
+    hoist-non-react-statics "^3.3.2"
+
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-is@^16.7.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-virtualized-auto-sizer@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz#bfb8414698ad1597912473de3e2e5f82180c1195"
+  integrity sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA==
+
+react-window@^1.8.7:
+  version "1.8.7"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4"
+  integrity sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+redux@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+run-when-changed@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/run-when-changed/-/run-when-changed-2.1.0.tgz#2e76d6ff6014d38786a3a11b98e9291c7e934953"
+  integrity sha512-ge/wuPQAvQz0uDEOO8W2c3g4mqXDa1XXtnJmjP9+6Nqfb+XdUYkQX/KvKmSvJ4xG5weD3RGm0u2Q3UsGzAo5gw==
+  dependencies:
+    ansi-bold "^0.1.1"
+    commander "^2.15.1"
+    fs-find-root "^2.0.0"
+    gaze "^1.1.2"
+    minimatch "^3.0.4"
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
+socket.io-client@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.2.tgz#9481518c560388c980c88b01e3cf62f367f04c96"
+  integrity sha512-naqYfFu7CLDiQ1B7AlLhRXKX3gdeaIMfgigwavDzgJoIUYulc1qHH5+2XflTsXTPY7BlPH5rppJyUjhjrKQKLg==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.2.1"
+    socket.io-parser "~4.2.0"
+
+socket.io-parser@~4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
+  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
+typescript@^4.8.3:
+  version "4.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.3.tgz#d59344522c4bc464a65a730ac695007fdb66dd88"
+  integrity sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==
+
+weak-key@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/weak-key/-/weak-key-1.0.2.tgz#dd5f66648ffb7e83810ea0553a948c60b2b50588"
+  integrity sha512-x9y9moPEcom985nUdHxM+YWbMcP3Ru+fmYqVNHSb6djJGg7H6Ru2ohuzaVIXx1JNyp8E7GO7GsBnehRntaBlsg==
+  dependencies:
+    core-js "^2.4.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+ws@~8.2.3:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
+  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
--- a/4
+++ b/4
@ -31,4 +31,6 @@ MAIL_PASSWORD=blahblahblah
 DESCRIPTION=rdrama.net caters to drama in all forms such as: Real life, videos, photos, gossip, rumors, news sites, Reddit, and Beyond™. There isn't drama we won't touch, and we want it all!
 CF_KEY=blahblahblah
 CF_ZONE=blahblahblah
-DEBIAN_FRONTEND=noninteractive
+DEBIAN_FRONTEND=noninteractive
+NODE_VERSION=16.13.0
+NVM_DIR=/root/.nvm
--- a/files/main.py
+++ b/files/main.py
@ -131,7 +131,7 @@ def teardown_request(error):

 if app.config["SERVER_NAME"] == 'localhost':
 	from files.routes import *
-	# from files.routes.chat import *
+	from files.routes.chat import *
 elif "load_chat" in argv:
 	from files.routes.chat import *
 else:
--- a/files/assets/images/rDrama/sidebar/804.webp
+++ b/files/assets/images/rDrama/sidebar/804.webp
--- a/files/assets/js/emoji_modal.js
+++ b/files/assets/js/emoji_modal.js
@ -189,6 +189,7 @@ const emojisSearchDictionary = {
 const emojiRequest = new XMLHttpRequest();
 emojiRequest.open("GET", '/marsey_list.json');
 emojiRequest.onload = async (e) => {
+	console.log("HERE")
 	let emojis = JSON.parse(emojiRequest.response);
 	if(! (emojis instanceof Array ))
 		throw new TypeError("[EMOJI DIALOG] rDrama's server should have sent a JSON-coded Array!");
--- a/files/helpers/assetcache.py
+++ b/files/helpers/assetcache.py
@ -0,0 +1,32 @@
+import os
+import zlib
+from collections import defaultdict
+
+ASSET_DIR = 'files/assets'
+ASSET_SUBDIRS = ['/css', '/js']
+ASSET_URL = '/assets/'
+ASSET_CACHE = defaultdict(lambda: None)
+
+def assetcache_build(asset_dir, subdirs):
+	for subdir in subdirs:
+		for root, dirs, files in os.walk(asset_dir + subdir):
+			for fname in files:
+				fpath = root + '/' + fname
+				relpath = fpath[len(asset_dir) + 1:].replace('\\', '/')
+				with open(fpath, 'rb') as f:
+					fhash = zlib.crc32(f.read())
+					ASSET_CACHE[relpath] = '%x' % fhash
+
+def assetcache_hash(asset_path):
+	return ASSET_CACHE[asset_path]
+
+def assetcache_path(asset_path):
+	cachehash = assetcache_hash(asset_path)
+
+	url = ASSET_URL + asset_path
+	if cachehash:
+		url += '?v=' + cachehash
+
+	return url
+
+assetcache_build(ASSET_DIR, ASSET_SUBDIRS)
--- a/files/helpers/jinja2.py
+++ b/files/helpers/jinja2.py
@ -3,6 +3,7 @@ from .get import *
 from os import listdir, environ
 from .const import * 
 import time
+from files.helpers.assetcache import assetcache_path

@app.template_filter("post_embed")
 def post_embed(id, v):
@ -16,6 +17,17 @@ def post_embed(id, v):
 	return ''


+@app.template_filter("asset")
+def template_asset(asset_path):
+	return assetcache_path(asset_path)
+
+
+@app.template_filter("asset_siteimg")
+def template_asset_siteimg(asset_path):
+	# TODO: Add hashing for these using files.helpers.assetcache
+	return f'/i/{SITE_NAME}/{asset_path}?v=3010'
+
+
@app.template_filter("timestamp")
 def timestamp(timestamp):

--- a/files/helpers/sanitize.py
+++ b/files/helpers/sanitize.py
@ -95,7 +95,7 @@ def build_url_re(protocols):
 	return re.compile(
 		r"""\(*# Match any opening parentheses.
 		\b(?<![@.])(?:(?:{0}):/{{0,3}}(?:(?:\w+:)?\w+@)?)?# http://
-		([\w-]+\.)+(?:\w{{2,20}})(?:\:[0-9]+)?(?!\.\w)\b# xx.yy.tld(:##)?
+		([\w-]+\.)+(?:[A-Za-z]{{2,20}})(?:\:[0-9]+)?(?!\.\w)\b# xx.yy.tld(:##)?
 		(?:[/?][^#\s\{{\}}\|\\\^\[\]`<>"]*)?
 			# /path/zz (excluding "unsafe" chars from RFC 1738,
 			# except for ~, which happens in practice)
--- a/files/routes/awards.py
+++ b/files/routes/awards.py
@ -176,11 +176,13 @@ def award_thing(v, thing_type, id):
 		return {"error": "User is already permanently marsified!"}, 403

 	if v.id != author.id:
+		safe_username = "👻" if thing.ghost else f"@{author.username}"
+		
 		if author.deflector and v.deflector:
 			msg = f"@{v.username} has tried to give your [{thing_type}]({thing.shortlink}) the {AWARDS[kind]['title']} Award but it was deflected on them, they also had a deflector up, so it bounced back and forth until it vaporized!"
 			send_repeatable_notification(author.id, msg)

-			msg = f"@{author.username} is under the effect of a deflector award; your {AWARDS[kind]['title']} Award has been deflected back to you but your deflector protected you, the award bounced back and forth until it vaporized!"
+			msg = f"{safe_username} is under the effect of a deflector award; your {AWARDS[kind]['title']} Award has been deflected back to you but your deflector protected you, the award bounced back and forth until it vaporized!"
 			send_repeatable_notification(v.id, msg)

 			g.db.delete(award)
@ -193,7 +195,7 @@ def award_thing(v, thing_type, id):
 		if author.deflector and v.id != AEVANN_ID and (AWARDS[kind]['price'] > 500 or kind == 'marsify' or kind.istitle()) and kind not in ('pin','unpin','benefactor'):
 			msg = f"@{v.username} has tried to give your [{thing_type}]({thing.shortlink}) the {AWARDS[kind]['title']} Award but it was deflected and applied to them :marseytroll:"
 			send_repeatable_notification(author.id, msg)
-			msg = f"@{author.username} is under the effect of a deflector award; your {AWARDS[kind]['title']} Award has been deflected back to you :marseytroll:"
+			msg = f"{safe_username} is under the effect of a deflector award; your {AWARDS[kind]['title']} Award has been deflected back to you :marseytroll:"
 			send_repeatable_notification(v.id, msg)
 			author = v
 		elif kind != 'spider':
--- a/files/routes/chat.py
+++ b/files/routes/chat.py
@ -1,4 +1,6 @@
 import time
+import uuid
+from files.helpers.jinja2 import timestamp
 from files.helpers.wrappers import *
 from files.helpers.sanitize import sanitize
 from files.helpers.const import *
@ -38,12 +40,6 @@ def chat(v):
 	return render_template("chat.html", v=v, messages=messages)


-@app.get('/chat.js')
-def chatjs():
-	resp = make_response(send_from_directory('assets', 'js/chat.js'))
-	return resp
-
-
@socketio.on('speak')
@limiter.limit("3/second;10/minute")
@limiter.limit("3/second;10/minute", key_func=lambda:f'{SITE}-{session.get("lo_user")}')
@ -58,13 +54,15 @@ def speak(data, v):

 	global messages, total

-	if SITE == 'rdrama.net': text = data[:200].strip()
-	else: text = data[:1000].strip()
+	if SITE == 'rdrama.net': text = data['message'][:200].strip()
+	else: text = data['message'][:1000].strip()

 	if not text: return '', 403
 	text_html = sanitize(text, count_marseys=True)
-
+	quotes = data['quotes']
 	data={
+		"id": str(uuid.uuid4()),
+		"quotes": quotes,
 		"avatar": v.profile_url,
 		"hat": v.hat_active,
 		"username": v.username,
@ -72,7 +70,7 @@ def speak(data, v):
 		"text": text,
 		"text_html": text_html,
 		"text_censored": censor_slurs(text_html, 'chat'),
-		"time": int(time.time())
+		"time": int(time.time()),
 	}
 	
 	if v.shadowbanned:
@ -107,6 +105,8 @@ def connect(v):
 		emit("online", online, broadcast=True)
 		cache.set(ONLINE_STR, len(online), timeout=0)

+	emit('online', online)
+	emit('catchup', messages)
 	emit('typing', typing)
 	return '', 204

@ -150,4 +150,4 @@ def close_running_threads():
 	cache.set(f'{SITE}_chat', messages)
 	cache.set(f'{SITE}_total', total)
 	cache.set(f'{SITE}_muted', muted)
-atexit.register(close_running_threads)
+atexit.register(close_running_threads)
--- a/files/routes/subs.py
+++ b/files/routes/subs.py
@ -5,6 +5,7 @@ from files.helpers.get import *
 from files.helpers.regex import *
 from files.classes import *
 from .front import frontlist
+from sqlalchemy import nullslast
 import tldextract

@app.post("/exile/post/<pid>")
@ -197,7 +198,9 @@ def sub_exilees(v, sub):
 	sub = g.db.query(Sub).filter_by(name=sub.strip().lower()).one_or_none()
 	if not sub: abort(404)

-	users = g.db.query(User, Exile).join(Exile, Exile.user_id==User.id).filter_by(sub=sub.name).all()
+	users = g.db.query(User, Exile).join(Exile, Exile.user_id==User.id) \
+				.filter_by(sub=sub.name) \
+				.order_by(nullslast(Exile.created_utc.desc()), User.username).all()

 	return render_template("sub/exilees.html", v=v, sub=sub, users=users)

@ -208,20 +211,23 @@ def sub_blockers(v, sub):
 	sub = g.db.query(Sub).filter_by(name=sub.strip().lower()).one_or_none()
 	if not sub: abort(404)

-	users = g.db.query(User).join(SubBlock).filter_by(sub=sub.name).all()
+	users = g.db.query(User).join(SubBlock) \
+				.filter_by(sub=sub.name) \
+				.order_by(nullslast(SubBlock.created_utc.desc()), User.username).all()

 	return render_template("sub/blockers.html", 
 		v=v, sub=sub, users=users, verb="blocking")

+
@app.get("/h/<sub>/followers")
@auth_required
 def sub_followers(v, sub):
 	sub = g.db.query(Sub).filter_by(name=sub.strip().lower()).one_or_none()
 	if not sub: abort(404)

-	users = g.db.query(User) \
-			.join(SubSubscription) \
-			.filter_by(sub=sub.name).all()
+	users = g.db.query(User).join(SubSubscription) \
+			.filter_by(sub=sub.name) \
+			.order_by(nullslast(SubSubscription.created_utc.desc()), User.username).all()

 	return render_template("sub/blockers.html", 
 		v=v, sub=sub, users=users, verb="following")
--- a/files/templates/admins.html
+++ b/files/templates/admins.html
@ -29,6 +29,6 @@
 	</table>
 </div>

-<script defer src="{{asset('js/sort_table.js')}}"></script>
+<script defer src="{{'js/sort_table.js' | asset}}"></script>

 {% endblock %}
--- a/files/templates/authforms.html
+++ b/files/templates/authforms.html
@ -1,4 +1,3 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">
@ -12,15 +11,15 @@

 		<meta name="author" content="">

-		<link rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
+		<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">

 		<title>{% block pagetitle %}{{SITE_NAME}}{% endblock %}</title>


 		{% if v %}
 			<style>:root{--primary:#{{v.themecolor}}}</style>
-			<link rel="stylesheet" href="{{asset('css/main.css')}}">
-			<link rel="stylesheet" href="{{asset('css/' + v.theme + '.css')}}">
+			<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+			<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
 			{% if v.agendaposter %}
 				<style>
 					html {
@ -45,8 +44,8 @@
 			{% endif %}
 		{% else %}
 			<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-			<link rel="stylesheet" href="{{asset('css/main.css')}}">
-			<link rel="stylesheet" href="/assets/css/{{DEFAULT_THEME}}.css?v=4000">
+			<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+			<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
 		{% endif %}

 </head>
@ -107,7 +106,7 @@

 										<div class="splash-overlay"></div>

-										<img alt="cover" loading="lazy" class="splash-img" src="{{asset_siteimg('cover.webp')}}"></img>
+										<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
 								</div>

 						</div>
--- a/files/templates/award_modal.html
+++ b/files/templates/award_modal.html
@ -55,4 +55,4 @@
 	</div>	
 </div>

-<script defer src="{{asset('js/award_modal.js')}}"></script>
+<script defer src="{{'js/award_modal.js' | asset}}"></script>
--- a/files/templates/badges.html
+++ b/files/templates/badges.html
@ -39,6 +39,6 @@
 	</table>
 </div>

-<script defer src="{{asset('js/sort_table.js')}}"></script>
+<script defer src="{{'js/sort_table.js' | asset}}"></script>

 {% endblock %}
--- a/files/templates/ban_modal.html
+++ b/files/templates/ban_modal.html
@ -35,4 +35,4 @@
 	</div>
 </div>

-<script defer src="/assets/js/ban_modal.js?v=4000"></script>
+<script defer src="{{'js/ban_modal.js' | asset}}"></script>
--- a/files/templates/blockers.html
+++ b/files/templates/blockers.html
@ -25,6 +25,6 @@
 </tbody>
 </table>

-<script defer src="/assets/js/blockers.js?v=4000"></script>
+<script defer src="{{'js/blockers.js' | asset}}"></script>

-{% endblock %}
+{% endblock %}
--- a/files/templates/chat.html
+++ b/files/templates/chat.html
@ -1,260 +1,41 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<script defer src="{{asset('js/bootstrap.js')}}"></script>
-
+	<script defer src="{{'js/bootstrap.js' | asset}}"></script>
 	<meta name="description" content="{{DESCRIPTION}}">
 	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
-
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
 	<meta name="author" content="">

-	<link id="favicon" rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
-
+	<link id="favicon" rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">
 	<title>Chat</title>

 	<style>:root{--primary:#{{v.themecolor}}}</style>
-	<link rel="stylesheet" href="{{asset('css/main.css')}}">
-	<link rel="stylesheet" href="{{asset('css/' + v.theme + '.css')}}">
+	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+	<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
 	{% if v.css %}
 		<style>
 			{{v.css | safe}}
 		</style>
 	{% endif %}
-
-	<style>
-		#chat-window {
-			max-height: calc(100vh - 220px);
-			overflow-y: auto;
-			background-color: transparent !important;
-		}
-
-		#online {
-			max-height: calc(100vh - 200px);
-			overflow-y: auto;
-			background-color: var(--background) !important;
-		}
-
-		#chat-window .chat-profile {
-			min-width: 42px;
-			width: 42px;
-			height: 42px;
-		}
-
-		#chat-window::-webkit-scrollbar {
-			display: none;
-		}
-
-		#chat-window {
-			-ms-overflow-style: none;
-			scrollbar-width: none;
-		}
-
-		.chat-mention {
-			background-color: #{{v.themecolor}}55;
-			border-radius: 3px;
-		}
-
-		p, h1, h2, h3, h4, h5 {
-			display: inherit;
-		}
-
-		blockquote + :not(blockquote) {
-			display: inline-block;
-			margin-top: 0.5rem;
-		}
-
-		blockquote {
-			margin-top: 0.5rem;
-		}
-
-		.diff {
-			margin-top: 1rem;
-		}
-
-		@media (max-width: 768px) {
-			#shrink * {
-				font-size: 10px !important;
-			}
-			.fa-reply:before {
-				font-size: 9px;
-			}
-			.diff {
-				margin-top: 0.5rem;
-			}
-			#chat-window {
-				max-height: 62vh;
-			}
-		}
-
-		p {
-			margin: 0;
-		}
-
-		.chat-line .btn {
-			background-color: transparent !important;
-		}
-
-		.chat-line-content {
-			width: 100%;
-		}
-
-		.cdiv {
-			overflow: hidden;
-			margin-left: 27px;
-		}
-
-		.quote {
-			display: inline-block;
-			padding: 0 0.5rem !important;
-			margin-bottom: 0.25rem !important;
-			border-color: transparent !important;
-		}
-
-		.del {
-			float: right;
-		}
-
-		lite-youtube {
-			min-width: min(80vw,500px);
-		}
-	</style>
+	<link rel="stylesheet" href="{{'css/chat_done.css' | asset}}">
 </head>

 <body>
 	{% include "header.html" %}
-	
-	<div class="container pb-4">
-		<div class="row justify-content-around" id="main-content-row">
-			<div class="col h-100 {% block customPadding %}{% if request.path.startswith('/@') %}user-gutters{% else %}custom-gutters{% endif %}{% endblock %}" id="main-content-col">	
-
-			<div class="border-right pb-1 pt-2 px-3">
-				<span id="online2" data-bs-html="true" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Users in chat right now" class="text-muted">
-					<i class="far fa-user fa-sm mr-1"></i>
-					<span class="board-chat-count">0</span>
-				</span>
-			</div>
-
-			<div id="chat-line-template" class="d-none">
-				<div class="chat-line">
-					<div class="d-flex align-items-center">
-						<div class="pl-md-3 text-muted chat-line-content">
-							<div>
-								<div class="avatar profile-pic-20-wrapper">
-									<img class="avatar-pic pp20 mr-1">
-									<img class="avatar-hat profile-pic-20-hat hat" loading="lazy">
-								</div>
-								<a href="" class="font-weight-bold text-black userlink" target="_blank"></a>
-								<span class="text-black time ml-2 d-none">just now</span>
-								<div class="cdiv">
-									<span class="chat-message text-black text-break"></span>
-									<span class="text d-none"></span>
-									<button class="quote btn" onclick="quote(this)"><i class="fas fa-reply" aria-hidden="true"></i></button>
-									{% if v.admin_level > 1 %}
-										<button class="quote btn del" onclick="this.nextElementSibling.classList.remove('d-none');this.classList.add('d-none')">
-											<i class="fas fa-trash-alt" aria-hidden="true"></i>
-										</button>
-										<button class="quote btn d-none del delmsg" onclick="del(this)">
-											<i class="fas fa-trash-alt text-danger" aria-hidden="true"></i>
-										</button>
-									{% endif %}
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div id="shrink">
-				<div id="chat-window" class="container pl-0 py-0">
-					{% for m in messages %}
-						{% set text_html = m['text_censored'] if v.slurreplacer else m['text_html'] %}
-						{% set link = '<a href="/id/' + v.id|string + '">' %}
-						{% set same = loop.index > 1 and m['username'] == messages[loop.index-2]['username'] %}
-						<div class="chat-line {% if link in text_html %}chat-mention{% endif %} {% if not same %}diff{% endif %}">
-							<div class="d-flex align-items-center">
-								<div class="pl-md-3 text-muted chat-line-content">
-									<div>
-										{% if not same %}
-											<div class="profile-pic-20-wrapper">
-												<img src="{{m['avatar']}}" class="pp20 mr-1">
-												{% if m.get('hat') -%}
-													<img class="profile-pic-20-hat hat" loading="lazy" src="{{m['hat']}}?h=7">
-												{%- endif %}
-											</div>
-										{% endif %}
-
-										<a class="{% if same %}d-none{% endif %} font-weight-bold text-black userlink" style="color:#{{m['namecolor']}}" target="_blank" href="/@{{m['username']}}">{{m['username']}}</a>
-
-										{% if not same %}
-											<span class="text-black time ml-2">{{m['time'] | timestamp}}</span>
-										{% endif %}
-
-										<div class="cdiv">
-											<span class="chat-message text-black text-break">{{text_html | safe}}</span>
-											<span class="text d-none">{{m['text']}}</span>
-											<button class="quote btn" onclick="quote(this)"><i class="fas fa-reply" aria-hidden="true"></i></button>
-											{% if v.admin_level > 1 %}
-												<button class="quote btn del" onclick="this.nextElementSibling.classList.remove('d-none');this.classList.add('d-none')">
-													<i class="fas fa-trash-alt" aria-hidden="true"></i>
-												</button>
-												<button class="quote btn d-none del delmsg" onclick="del(this)">
-													<i class="fas fa-trash-alt text-danger" aria-hidden="true"></i>
-												</button>
-											{% endif %}
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					{% endfor %}
-				</div>
-
-				<div id='message' class="d-none position-relative form-group d-flex mt-3">
-					<div class="position-absolute text-muted text-small ml-1" style="bottom: -1.5rem; line-height: 1;">
-						<span id="typing-indicator"></span>
-						<span id="loading-indicator" class="d-none"></span>
-					</div>
-					<i class="btn btn-secondary mr-2 fas fa-smile-beam" style="padding-top:0.65rem" onclick="loadEmojis('input-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-placement="bottom" title="Add Emoji"></i>
-					<textarea onclick="scroll_chat()" id="input-text" minlength="1" maxlength="{% if SITE == 'rdrama.net' %}200{% else %}1000{% endif %}" style="font-size:16px!important" class="form-control" placeholder="Message" autocomplete="off" autofocus rows="1"></textarea>
-					<button id="chatsend" onclick="send()" class="btn btn-primary ml-3" type="submit" onclick="disable(this)">Send</button>
-				</div>
-			</div>
-		</div>
-
-		<div class="col text-left d-none d-lg-block pt-3" style="max-width:300px">
-			<h4>Users in chat right now</h4>
-			<div id="online" class="mt-3"></div>
-
+	<div
+		id="root"
+		data-id="{{v.id}}"
+		data-username="{{v.username}}"
+		data-admin="{{v.admin_level > 1}}"
+		data-censored="{{v.slurreplacer}}"
+		data-sitename="{{SITE_NAME}}"
+		data-themecolor="{{v.themecolor}}">
 	</div>
-
-</div>
-
-<input id="vid" type="hidden" value="{{v.id}}">
-<input id="vusername" type="hidden" value="{{v.username}}">
-<input id="site_name" type="hidden" value="{{SITE_NAME}}">
-<input id="slurreplacer" type="hidden" value="{{v.slurreplacer}}">
-
-{% include "emoji_modal.html" %}
-{% include "expanded_image_modal.html" %}
-
-<script defer src="{{asset('js/lozad.js')}}"></script>
-<script defer src="/assets/js/lite-youtube.js?v=4000"></script>
-<script defer src="/chat.js?h=7"></script>
-
-{% if v.admin_level > 1 %}
-	<script>
-		document.addEventListener('click', function (e) {
-			if (!e.target.classList.contains('del') && !e.target.classList.contains('fa-trash-alt')) {
-				for (const btn of document.querySelectorAll('.delmsg:not(.d-none)')) {
-					btn.classList.add('d-none');
-					btn.previousElementSibling.classList.remove('d-none');
-				}
-			}
-		});
-	</script>
-{% endif %}
+	<script>window.global = window</script>
+	<script defer src="{{'js/lite-youtube.js' | asset}}"></script>
+	<script defer src="{{'js/chat_done.js' | asset}}"></script>
 </body>
+
--- a/files/templates/comments.html
+++ b/files/templates/comments.html
@ -1,4 +1,3 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 {% if not request.headers.get("xhr") %}
 	{% if comment_info %}
@ -812,20 +811,20 @@
 	{% endif %}

 	{% if v %}
-		<script defer src="{{asset('js/marked.js')}}"></script>
-		<script defer src="{{asset('js/comments_v.js')}}"></script>
+		<script defer src="{{'js/marked.js' | asset}}"></script>
+		<script defer src="{{'js/comments_v.js' | asset}}"></script>
 	{% endif %}

-	<script defer src="{{asset('js/clipboard.js')}}"></script>
+	<script defer src="{{'js/clipboard.js' | asset}}"></script>

 	{% if v and v.admin_level >= 2 %}
-		<script defer src="{{asset('js/comments_admin.js')}}"></script>
+		<script defer src="{{'js/comments_admin.js' | asset}}"></script>
 	{% endif %}

 	{% include "expanded_image_modal.html" %}

-	<script defer src="{{asset('js/comments+submission_listing.js')}}"></script>
-	<script defer src="{{asset('js/comments.js')}}"></script>
+	<script defer src="{{'js/comments+submission_listing.js' | asset}}"></script>
+	<script defer src="{{'js/comments.js' | asset}}"></script>

 	<script>
 		{% if p and (not v or v.highlightcomments) %}
--- a/files/templates/default.html
+++ b/files/templates/default.html
@ -1,9 +1,8 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<script defer src="{{asset('js/bootstrap.js')}}"></script>
+	<script defer src="{{'js/bootstrap.js' | asset}}"></script>

 	<meta name="description" content="{{DESCRIPTION}}">

@ -15,9 +14,9 @@

 	{% if v %}
 		<style>:root{--primary:#{{v.themecolor}}}</style>
-		<link rel="stylesheet" href="{{asset('css/main.css')}}">
-		<link rel="stylesheet" href="{{asset('css/' + v.theme + '.css')}}">
-		<link rel="stylesheet" href="/assets/css/awards.css?v=4000">
+		<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+		<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
+		<link rel="stylesheet" href="{{'css/awards.css' | asset}}">
 		{% if v.agendaposter %}
 			<style>
 				html {
@ -42,13 +41,13 @@
 		{% endif %}
 	{% else %}
 		<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-		<link rel="stylesheet" href="{{asset('css/main.css')}}">
-		<link rel="stylesheet" href="/assets/css/{{DEFAULT_THEME}}.css?v=4000">
-		<link rel="stylesheet" href="/assets/css/awards.css?v=4000">
+		<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+		<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
+		<link rel="stylesheet" href="{{'css/awards.css' | asset}}">
 	{% endif %}

 	{% if request.path.endswith('/catalog') %}
-		<link rel="stylesheet" href="{{asset('css/catalog.css')}}">
+		<link rel="stylesheet" href="{{'css/catalog.css' | asset}}">
 	{% endif %}

 	{% if sub and sub.css and not request.path.endswith('settings') and not request.values.get('nocss') %}
@ -78,16 +77,16 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

-	<meta name="thumbnail" content="{{asset_siteimg('site_preview.webp')}}">
+	<meta name="thumbnail" content="{{'site_preview.webp' | asset_siteimg}}">

-	<link rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
+	<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">
 	{% block title %}
 	<title>{{SITE_NAME}}</title>

 	<meta property="og:type" content="article">
 	<meta property="og:title" content="{{SITE_NAME}}">
 	<meta property="og:site_name" content="{{SITE}}">
-	<meta property="og:image" content="{{asset_siteimg('site_preview.webp')}}">
+	<meta property="og:image" content="{{'site_preview.webp' | asset_siteimg}}">
 	<meta property="og:url" content="{{request.full_path}}">
 	<meta property="og:description" name="description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
 	<meta property="og:author" name="author" content="{{SITE_FULL}}">
@ -97,7 +96,7 @@
 	<meta name="twitter:title" content="{{SITE_NAME}}">
 	<meta name="twitter:creator" content="{{SITE_FULL}}">
 	<meta name="twitter:description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
-	<meta name="twitter:image" content="{{asset_siteimg('site_preview.webp')}}">
+	<meta name="twitter:image" content="{{'site_preview.webp' | asset_siteimg}}">
 	<meta name="twitter:url" content="{{request.full_path}}">
 	{% endblock %}

@ -106,10 +105,10 @@
 	<meta name="format-detection" content="telephone=no">
 	<meta name="viewport" content="width=device-width,initial-scale=1">

-	<link rel="apple-touch-icon" sizes="180x180" href="{{asset_siteimg('icon.webp')}}">
+	<link rel="apple-touch-icon" sizes="180x180" href="{{'icon.webp' | asset_siteimg}}">
 		<link rel="manifest" href="/assets/manifest_{{SITE_NAME}}.json?v=6">
-		<link rel="mask-icon" href="{{asset_siteimg('icon.webp')}}">
-		<link rel="shortcut icon" href="{{asset_siteimg('icon.webp')}}">
+		<link rel="mask-icon" href="{{'icon.webp' | asset_siteimg}}">
+		<link rel="shortcut icon" href="{{'icon.webp' | asset_siteimg}}">
 		<meta name="apple-mobile-web-app-title" content="{{SITE_NAME}}">
 		<meta name="application-name" content="{{SITE_NAME}}">
 		<meta name="msapplication-TileColor" content="#{% if v %}{{v.themecolor}}{% else %}{{DEFAULT_COLOR}}{% endif %}">
@ -121,127 +120,127 @@
 		<link
 		rel="apple-touch-startup-image"
 		sizes="320x480"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="640x960"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-icon"
 		sizes="640x1136"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-icon"
 		sizes="750x1334"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="768x1004"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="768x1024"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="828x1792"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1024x748"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1024x768"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1125x2436"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1242x2208"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1242x2688"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1334x750"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1536x2008"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1536x2048"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1668x2224"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1792x828"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2048x1496"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2048x1536"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2048x2732"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2208x1242"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2224x1668"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2436x1125"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2668x1242"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2737x2048"
-		href="{{asset_siteimg('icon.webp')}}"
+		href="{{'icon.webp' | asset_siteimg}}"
 		>

 		{% block fixedMobileBarJS %}
@ -277,20 +276,20 @@
 				{% else %}
 					{% set path = "assets/images/" + SITE_NAME + "/banners" %}
 					{% set image = "/" + path + "/" + listdir('files/' + path)|random() + '?v=25' %}
-					<img alt="site banner" src="{% if v %}{{image}}{% else %}{{asset_siteimg('cached.webp')}}{% endif %}" width="100%">
+					<img alt="site banner" src="{% if v %}{{image}}{% else %}{{'cached.webp' | asset_siteimg}}{% endif %}" width="100%">
 				{% endif %}
 			</a>
 		{% else %}
 			{% if SITE_NAME == 'WPD' %}
 				{% if v %}
-					{% set banner = asset_siteimg('banner.webp') %}
+					{% set banner = 'banner.webp' | asset_siteimg %}
 				{% else %}
-					{% set banner = asset_siteimg('cached.webp') %}
+					{% set banner = 'cached.webp' | asset_siteimg %}
 				{% endif %}
 			{% elif SITE_NAME == 'PCM' %}
-				{% set banner = asset_siteimg('banners/great-value-v2.webp') %}
+				{% set banner = 'banners/great-value-v2.webp' | asset_siteimg %}
 			{% else %}
-				{% set banner = asset_siteimg('banner.webp') %}
+				{% set banner = 'banner.webp' | asset_siteimg %}
 			{% endif %}

 			<a href="{{banner}}">
@ -377,17 +376,17 @@
 	</div>
 </div>

-<script defer src="{{asset('js/lozad.js')}}"></script>
+<script defer src="{{'js/lozad.js' | asset}}"></script>

 {% if v %}
-	<script defer src="{{asset('js/formatting.js')}}"></script>
+	<script defer src="{{'js/formatting.js' | asset}}"></script>
 {% endif %}

-<script defer src="/assets/js/lite-youtube.js?v=4000"></script>
+<script defer src="{{'js/lite-youtube.js' | asset}}"></script>

 {% if v and v.spider %}
-	<script defer src="/assets/js/critters.js?v=4000"></script>
-	<script defer src="/assets/js/spider.js?v=4000"></script>
+	<script defer src="{{'js/critters.js' | asset}}"></script>
+	<script defer src="{{'js/spider.js' | asset}}"></script>
 {% endif %}
 </body>

--- a/files/templates/delete_post_modal.html
+++ b/files/templates/delete_post_modal.html
@ -27,4 +27,4 @@
 	</div>
 </div>

-<script defer src="/assets/js/delete_post_modal.js?v=4000"></script>
+<script defer src="{{'js/delete_post_modal.js' | asset}}"></script>
--- a/files/templates/emoji_modal.html
+++ b/files/templates/emoji_modal.html
@ -92,4 +92,4 @@
 	</div>
 </div>

-<script defer src="{{asset('js/emoji_modal.js')}}"></script>
+<script defer src="{{'js/emoji_modal.js' | asset}}"></script>
--- a/files/templates/followers.html
+++ b/files/templates/followers.html
@ -31,6 +31,6 @@
 </tbody>
 </table>

-<script defer src="/assets/js/followers.js?v=4000"></script>
+<script defer src="{{'js/followers.js' | asset}}"></script>

-{% endblock %}
+{% endblock %}
--- a/files/templates/following.html
+++ b/files/templates/following.html
@ -29,6 +29,6 @@
 </tbody>
 </table>

-<script defer src="/assets/js/following.js?v=4000"></script>
+<script defer src="{{'js/following.js' | asset}}"></script>

 {% endblock %}
--- a/files/templates/gif_modal.html
+++ b/files/templates/gif_modal.html
@ -26,4 +26,4 @@
 	</div>
 </div>

-<script defer src="/assets/js/gif_modal.js?v=4000"></script>
+<script defer src="{{'js/gif_modal.js' | asset}}"></script>
--- a/files/templates/hats.html
+++ b/files/templates/hats.html
@ -155,5 +155,5 @@


 	</pre>
-	<script defer src="{{asset('js/sort_table.js')}}"></script>
+	<script defer src="{{'js/sort_table.js' | asset}}"></script>
 {% endblock %}
--- a/files/templates/header.html
+++ b/files/templates/header.html
@ -59,7 +59,7 @@
 		<div class="navbar navbar-expand-md navbar-light" id="navbar">
 			<div class="container-fluid" style="padding:0;">
 			<a href="/" class="navbar-brand mr-auto {% if not has_logo and not sub %}flex-grow-1{% endif %}">
-				<img id="header--icon" alt="header icon" {% if sub %}src="{{sub.marsey_url}}"{% else %}src="{{asset_siteimg('headericon.webp')}}"{% endif %}>
+				<img id="header--icon" alt="header icon" {% if sub %}src="{{sub.marsey_url}}"{% else %}src="{{'headericon.webp' | asset_siteimg}}"{% endif %}>
 			</a>
 			
 			{% if sub %}
@ -79,7 +79,7 @@
 				</style>
 				<div id="logo-container" class="flex-grow-1 logo-container">
 				<a href="/">
-					<img class="ml-1" id="logo" alt="logo" src="{{asset_siteimg('logo.webp')}}" width=70>
+					<img class="ml-1" id="logo" alt="logo" src="{{'logo.webp' | asset_siteimg}}" width=70>
 				</a>
 				</div>
 			{% endif %}
@ -223,7 +223,7 @@
 							</div>
 							<div class="text-left pl-2">
 								<div style="color: #{{v.name_color}}" class="text-small font-weight-bold"><span id="header--username" {% if v.patron %}class="patron" style="background-color:#{{v.name_color}}"{% endif %}>{{v.username}}</span></div>
-								<div class="header--currency"><img alt="coins" class="mr-1 ml-1" data-bs-toggle="tooltip" data-bs-placement="bottom" src="{{asset_siteimg('coins.webp')}}" title="coins" aria-label="coins"><span id="user-coins-amount">{{v.coins}}</span>{% if not FEATURES['PROCOINS'] %} Coin{{ help.plural(v.coins) }}{% endif %}</div>
+								<div class="header--currency"><img alt="coins" class="mr-1 ml-1" data-bs-toggle="tooltip" data-bs-placement="bottom" src="{{'coins.webp' | asset_siteimg}}" title="coins" aria-label="coins"><span id="user-coins-amount">{{v.coins}}</span>{% if not FEATURES['PROCOINS'] %} Coin{{ help.plural(v.coins) }}{% endif %}</div>
 								{% if FEATURES['PROCOINS'] %}
 									<div class="header--currency"><img alt="marseybux" class="mr-1 ml-1" data-bs-toggle="tooltip" data-bs-placement="bottom" src="/i/marseybux.webp?v=2000" title="Marseybux" aria-label="Marseybux"><span id="user-bux-amount">{{v.procoins}}</span></div>
 								{% endif %}
--- a/files/templates/home.html
+++ b/files/templates/home.html
@ -184,7 +184,7 @@
 {% if PUSHER_ID != 'blahblahblah' and v %}
 	<div class="d-none" id="strid">{{SITE}}{{v.id}}</div>
 	<div class="d-none" id="pusherid">{{PUSHER_ID}}</div>
-	<script defer src="/assets/js/pusher.js?v=4001"></script>
+	<script defer src="{{'js/pusher.js' | asset}}"></script>
 	<script>
 		if (typeof Android != 'undefined') {
 			Android.Subscribe('{{SITE}}{{v.id}}');
@ -250,7 +250,7 @@
 				script.onload = resolve;
 				script.onerror = reject;
 				script.async = true;
-				script.src = "/assets/js/fp.js?v=4000";
+				script.src = "{{'js/fp.js' | asset}}";
 				document.head.appendChild(script);
 			})
 				.then(() => FingerprintJS.load({token: '{{FP}}'}));
--- a/files/templates/log.html
+++ b/files/templates/log.html
@ -6,8 +6,8 @@
 {% block content %}
 {% if v %}
 	<style>:root{--primary:#{{v.themecolor}}}</style>
-	<link rel="stylesheet" href="{{asset('css/main.css')}}">
-	<link rel="stylesheet" href="{{asset('css/' + v.theme + '.css')}}">
+	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+	<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
 	{% if v.agendaposter %}
 		<style>
 			html {
@ -32,8 +32,8 @@
 	{% endif %}
 {% else %}
 	<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-	<link rel="stylesheet" href="{{asset('css/main.css')}}">
-	<link rel="stylesheet" href="/assets/css/{{DEFAULT_THEME}}.css?v=4000">
+	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+	<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
 {% endif %}

 <div class="row justify-content-around">
@ -160,6 +160,6 @@
 	</div>
 </div>

-<script defer src="{{asset('js/clipboard.js')}}"></script>
+<script defer src="{{'js/clipboard.js' | asset}}"></script>

 {% endblock %}
--- a/files/templates/login.html
+++ b/files/templates/login.html
@ -1,12 +1,11 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">

 <head>
-	<script defer src="{{asset('js/bootstrap.js')}}"></script>
+	<script defer src="{{'js/bootstrap.js' | asset}}"></script>

-	<link rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
+	<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">

 	<meta name="description" content="{{DESCRIPTION}}">
 	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
@ -21,8 +20,8 @@
 	{% endblock %}
 	
 	<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-	<link rel="stylesheet" href="{{asset('css/main.css')}}">
-	<link rel="stylesheet" href="/assets/css/{{DEFAULT_THEME}}.css?v=4000">
+	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+	<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">

 </head>

@ -92,7 +91,7 @@
 		<div class="col-12 col-md-6 d-none d-md-block">
 			<div class="splash-wrapper">
 				<div class="splash-overlay"></div>
-				<img alt="cover" loading="lazy" class="splash-img" src="{{asset_siteimg('cover.webp')}}"></img>
+				<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
 			</div>
 		</div>
 	</div>
--- a/files/templates/login_2fa.html
+++ b/files/templates/login_2fa.html
@ -1,10 +1,9 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">

 <head>
-	<link rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
+	<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">

 	<meta name="description" content="{{DESCRIPTION}}">
 		<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
@ -17,8 +16,8 @@
 		<title>2-Step Login - {{SITE_NAME}}</title>

 		<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-		<link rel="stylesheet" href="{{asset('css/main.css')}}">
-		<link rel="stylesheet" href="/assets/css/{{DEFAULT_THEME}}.css?v=4000">
+		<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+		<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">

 </head>

@ -87,7 +86,7 @@

 						<div class="splash-overlay"></div>

-						<img alt="cover" loading="lazy" class="splash-img" src="{{asset_siteimg('cover.webp')}}"></img>
+						<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
 				</div>

 		</div>
--- a/files/templates/lottery.html
+++ b/files/templates/lottery.html
@ -62,7 +62,7 @@
 				data-bs-toggle="tooltip"
 				data-bs-placement="bottom"
 				height="13"
-				src="{{asset_siteimg('coins.webp')}}"
+				src="{{'coins.webp' | asset_siteimg}}"
 				aria-label="coins"
 				title="coins"
 				style="display: none; position: relative; top: -2px"
@ -122,7 +122,7 @@
 			data-bs-toggle="tooltip"
 			data-bs-placement="bottom"
 			height="13"
-			src="{{asset_siteimg('coins.webp')}}"
+			src="{{'coins.webp' | asset_siteimg}}"
 			aria-label="coins"
 			title="coins"
 		/>
@ -186,7 +186,7 @@
 	</div>
 	</div>

-	<script defer src="{{asset('js/lottery.js')}}"></script>
+	<script defer src="{{'js/lottery.js' | asset}}"></script>
 </div>

 {% endblock %}
--- a/files/templates/mobile_navigation_bar.html
+++ b/files/templates/mobile_navigation_bar.html
@ -80,4 +80,4 @@
 		</div>
 </div>

-<script defer src="/assets/js/mobile_navigation_bar.js?v=4000"></script>
+<script defer src="{{'js/mobile_navigation_bar.js' | asset}}"></script>
--- a/files/templates/notifications.html
+++ b/files/templates/notifications.html
@ -111,7 +111,7 @@
 			</div>
 		</div>
 		
-		<script defer src="{{asset('js/clipboard.js')}}"></script>
+		<script defer src="{{'js/clipboard.js' | asset}}"></script>
 	{% else %}
 		{% with comments=notifications %}
 			{% include "comments.html" %}
--- a/files/templates/poll_votes.html
+++ b/files/templates/poll_votes.html
@ -40,7 +40,7 @@
 	</table>
 </div>

-<script defer src="{{asset('js/sort_table.js')}}"></script>
+<script defer src="{{'js/sort_table.js' | asset}}"></script>

 {% endif %}

--- a/files/templates/report_post_modal.html
+++ b/files/templates/report_post_modal.html
@ -21,4 +21,4 @@
 	</div>
 </div>

-<script defer src="/assets/js/report_post_modal.js?v=4002"></script>
+<script defer src="{{'js/report_post_modal.js' | asset}}"></script>
--- a/files/templates/search.html
+++ b/files/templates/search.html
@ -83,7 +83,7 @@
 							</div>
 						</div>
 						<br>
-						<script defer src="{{asset('js/search.js')}}"></script>
+						<script defer src="{{'js/search.js' | asset}}"></script>
 					{% endif %}
 					<div class="text-muted text-small mb-1">Showing {% block listinglength %}{{listing | length}}{% endblock %} of {{total}} result{{'s' if total != 1 else ''}} for</div>
 					<h1 class="h4 mb-0">{{query}}</h1>
--- a/files/templates/settings.html
+++ b/files/templates/settings.html
@ -1,9 +1,8 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<script defer src="{{asset('js/bootstrap.js')}}"></script>
+	<script defer src="{{'js/bootstrap.js' | asset}}"></script>

 	<meta name="description" content="{{DESCRIPTION}}">
 	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
@ -13,13 +12,13 @@

 	<meta name="author" content="">

-	<link rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
+	<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">

 	<title>{% block pagetitle %}Settings - {{SITE_NAME}}{% endblock %}</title>
 		<meta property="og:type" content="article">
 		<meta property="og:title" content="{{SITE_NAME}}">
 		<meta property="og:site_name" content="{{SITE}}">
-		<meta property="og:image" content="{{asset_siteimg('site_preview.webp')}}">
+		<meta property="og:image" content="{{'site_preview.webp' | asset_siteimg}}">
 		<meta property="og:url" content="{{SITE_FULL}}">
 		<meta property="og:description" name="description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
 		<meta property="og:author" name="author" content="{{SITE_FULL}}">
@ -29,13 +28,13 @@
 		<meta name="twitter:title" content="{{SITE_NAME}}">
 		<meta name="twitter:creator" content="{{SITE_FULL}}">
 		<meta name="twitter:description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
-		<meta name="twitter:image" content="{{asset_siteimg('site_preview.webp')}}">
+		<meta name="twitter:image" content="{{'site_preview.webp' | asset_siteimg}}">
 		<meta name="twitter:url" content="{{SITE_FULL}}">


 	<style>:root{--primary:#{{v.themecolor}}}</style>
-	<link rel="stylesheet" href="{{asset('css/main.css')}}">
-	<link rel="stylesheet" href="{{asset('css/' + v.theme + '.css')}}">
+	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+	<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
 	{% if v.agendaposter %}
 		<style>
 			html {
@ -260,7 +259,7 @@

 {% block onload %}{% endblock %}

-<script defer src="{{asset('js/clipboard.js')}}"></script>
+<script defer src="{{'js/clipboard.js' | asset}}"></script>

 </body>

--- a/files/templates/settings2.html
+++ b/files/templates/settings2.html
@ -1,10 +1,9 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">

 <head>
-	<script defer src="{{asset('js/bootstrap.js')}}"></script>
+	<script defer src="{{'js/bootstrap.js' | asset}}"></script>

 	<meta name="description" content="{{DESCRIPTION}}">
 	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
@ -13,13 +12,13 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 	<meta name="author" content="">
-	<meta name="thumbnail" content="{{asset_siteimg('site_preview.webp')}}">
-	<link rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
+	<meta name="thumbnail" content="{{'site_preview.webp' | asset_siteimg}}">
+	<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">

 	<meta property="og:type" content="article">
 	<meta property="og:title" content="{{SITE_NAME}}">
 	<meta property="og:site_name" content="{{SITE}}">
-	<meta property="og:image" content="{{asset_siteimg('site_preview.webp')}}">
+	<meta property="og:image" content="{{'site_preview.webp' | asset_siteimg}}">
 	<meta property="og:url" content="{{request.full_path}}">
 	<meta property="og:description" name="description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
 	<meta property="og:author" name="author" content="{{SITE_FULL}}">
@ -29,7 +28,7 @@
 	<meta name="twitter:title" content="{{SITE_NAME}}">
 	<meta name="twitter:creator" content="{{SITE_FULL}}">
 	<meta name="twitter:description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
-	<meta name="twitter:image" content="{{asset_siteimg('site_preview.webp')}}">
+	<meta name="twitter:image" content="{{'site_preview.webp' | asset_siteimg}}">
 	<meta name="twitter:url" content="{{request.full_path}}">


@ -39,12 +38,12 @@
 	
 	{% if v %}
 		<style>:root{--primary:#{{v.themecolor}}}</style>
-		<link rel="stylesheet" href="{{asset('css/main.css')}}">
-		<link rel="stylesheet" href="{{asset('css/' + v.theme + '.css')}}">
+		<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+		<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
 	{% else %}
 		<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-		<link rel="stylesheet" href="{{asset('css/main.css')}}">
-		<link rel="stylesheet" href="/assets/css/{{DEFAULT_THEME}}.css?v=4000">
+		<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+		<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
 	{% endif %}
 </head>

--- a/files/templates/settings_blocks.html
+++ b/files/templates/settings_blocks.html
@ -111,6 +111,6 @@
 	</div>
 </div>

-<script defer src="/assets/js/settings_blocks.js?v=4000"></script>
+<script defer src="{{'js/settings_blocks.js' | asset}}"></script>

-{% endblock %}
+{% endblock %}
--- a/files/templates/settings_profile.html
+++ b/files/templates/settings_profile.html
@ -786,6 +786,6 @@
 	</script>
 {% endif %}

-<script defer src="/assets/js/settings_profile.js?v=4000"></script>
+<script defer src="{{'js/settings_profile.js' | asset}}"></script>

-{% endblock %}
+{% endblock %}
--- a/files/templates/settings_security.html
+++ b/files/templates/settings_security.html
@ -4,7 +4,7 @@

 {% block content %}

-<script defer src="/assets/js/settings_security.js?v=4000"></script>
+<script defer src="{{'js/settings_security.js' | asset}}"></script>

 <div class="row">

--- a/files/templates/shop.html
+++ b/files/templates/shop.html
@ -123,5 +123,5 @@


 	</pre>
-	<script defer src="{{asset('js/sort_table.js')}}"></script>
+	<script defer src="{{'js/sort_table.js' | asset}}"></script>
 {% endblock %}
--- a/files/templates/sign_up.html
+++ b/files/templates/sign_up.html
@ -1,11 +1,10 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<script defer src="{{asset('js/bootstrap.js')}}"></script>
+	<script defer src="{{'js/bootstrap.js' | asset}}"></script>

-	<link rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
+	<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">

 	<meta name="description" content="{{DESCRIPTION}}">
 		<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
@ -17,7 +16,7 @@
 		<meta property="og:type" content="article">
 		<meta property="og:title" content="{{SITE_NAME}}">
 		<meta property="og:site_name" content="{{SITE}}">
-		<meta property="og:image" content="{{asset_siteimg('site_preview.webp')}}">
+		<meta property="og:image" content="{{'site_preview.webp' | asset_siteimg}}">
 		<meta property="og:url" content="{{SITE_FULL}}">
 		<meta property="og:description" name="description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
 		<meta property="og:author" name="author" content="{{SITE_FULL}}">
@ -27,14 +26,14 @@
 		<meta name="twitter:title" content="{{SITE_NAME}}">
 		<meta name="twitter:creator" content="{{SITE_FULL}}">
 		<meta name="twitter:description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
-		<meta name="twitter:image" content="{{asset_siteimg('site_preview.webp')}}">
+		<meta name="twitter:image" content="{{'site_preview.webp' | asset_siteimg}}">
 		<meta name="twitter:url" content="{{SITE_FULL}}">

 		<title>{% if ref_user %}{{ref_user.username}} invites you to {{SITE_NAME}}{% else %}Sign up - {{SITE_NAME}}{% endif %}</title>

 		<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-		<link rel="stylesheet" href="{{asset('css/main.css')}}">
-		<link rel="stylesheet" href="/assets/css/{{DEFAULT_THEME}}.css?v=4000">
+		<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+		<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">

 </head>

@ -132,7 +131,7 @@

 								<div class="splash-overlay"></div>

-								<img alt="cover" loading="lazy" class="splash-img" src="{{asset_siteimg('cover.webp')}}"></img>
+								<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
 						</div>

 				</div>
@ -140,10 +139,10 @@
 		</div>
 </div>

-<script defer src="/assets/js/signup.js?v=4000"></script>
+<script defer src="{{'js/signup.js' | asset}}"></script>

 {% if hcaptcha %}
-	<script defer src="/assets/js/hcaptcha.js?v=4000"></script>
+	<script defer src="{{'js/hcaptcha.js' | asset}}"></script>
 {% endif %}

 </body>
--- a/files/templates/sign_up_failed_ref.html
+++ b/files/templates/sign_up_failed_ref.html
@ -1,12 +1,11 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">

 <head>
-	<script defer src="{{asset('js/bootstrap.js')}}"></script>
+	<script defer src="{{'js/bootstrap.js' | asset}}"></script>

-	<link rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
+	<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">

 	<meta name="description" content="{{DESCRIPTION}}">
 		<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
@ -18,7 +17,7 @@
 		<meta property="og:type" content="article">
 		<meta property="og:title" content="{{SITE_NAME}}">
 		<meta property="og:site_name" content="{{SITE}}">
-		<meta property="og:image" content="{{asset_siteimg('site_preview.webp')}}">
+		<meta property="og:image" content="{{'site_preview.webp' | asset_siteimg}}">
 		<meta property="og:url" content="{{SITE_FULL}}">
 		<meta property="og:description" name="description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
 		<meta property="og:author" name="author" content="{{SITE_FULL}}">
@ -28,14 +27,14 @@
 		<meta name="twitter:title" content="{{SITE_NAME}}">
 		<meta name="twitter:creator" content="{{SITE_FULL}}">
 		<meta name="twitter:description" content="{{SITE_NAME}} - {{DESCRIPTION}}">
-		<meta name="twitter:image" content="{{asset_siteimg('site_preview.webp')}}">
+		<meta name="twitter:image" content="{{'site_preview.webp' | asset_siteimg}}">
 		<meta name="twitter:url" content="{{SITE_FULL}}">

 		<title>{% if ref_user %}{{ref_user.username}} invites you to {{SITE_NAME}}{% else %}{{SITE_NAME}}{% endif %}</title>

 		<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-		<link rel="stylesheet" href="{{asset('css/main.css')}}">
-		<link rel="stylesheet" href="/assets/css/{{DEFAULT_THEME}}.css?v=4000">
+		<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+		<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">

 </head>

@ -75,7 +74,7 @@

 										<div class="splash-overlay"></div>

-										<img alt="cover" loading="lazy" class="splash-img" src="{{asset_siteimg('cover.webp')}}"></img>
+										<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
 								</div>

 						</div>
--- a/files/templates/sub/exilees.html
+++ b/files/templates/sub/exilees.html
@ -12,6 +12,7 @@
 		<th>#</th>
 		<th>Name</th>
 		<th>Exiled by</th>
+		<th>On</th>
 		<th></th>
 	</tr>
 </thead>
@ -24,6 +25,7 @@
 				{% include "user_in_table.html" %}
 			{% endwith %}
 		</td>
+		<td {% if exile.created_utc %}data-time="{{exile.created_utc}}"{% endif %}></td>
 		<td>
 			{% if v.mods(sub.name) %}
 				<form action="/h/{{sub}}/unexile/{{user.id}}" method="post">
--- a/files/templates/sub/subs.html
+++ b/files/templates/sub/subs.html
@ -30,6 +30,6 @@
 	</table>
 </div>

-<script defer src="{{asset('js/sort_table.js')}}"></script>
+<script defer src="{{'js/sort_table.js' | asset}}"></script>

 {% endblock %}
--- a/files/templates/submission.html
+++ b/files/templates/submission.html
@ -511,13 +511,13 @@
 <meta name="twitter:site" content="{{SITE_FULL}}">

 {% if not v_forbid_deleted -%}
-	<meta property="og:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{SITE_FULL}}{{asset_siteimg('site_preview.webp')}}{% endif %}">
+	<meta property="og:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{SITE_FULL}}{{'site_preview.webp' | asset_siteimg}}{% endif %}">
 	{% if p.is_video %}
 		<meta property="og:video" content="{{p.realurl(v)}}">
 	{% elif p.is_audio %}
 		<meta property="og:audio" content="{{p.realurl(v)}}">
 	{% endif %}
-	<meta name="twitter:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{SITE_FULL}}{{asset_siteimg('site_preview.webp')}}{% endif %}">
+	<meta name="twitter:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{SITE_FULL}}{{'site_preview.webp' | asset_siteimg}}{% endif %}">
 {% endif %}


@ -739,9 +739,9 @@
 							{% if p.domain == "twitter.com" %}
 								{{p.embed_url | safe}}
 								{% if v and v.theme.split("_")[0] in ["light", "coffee", "4chan"] %}
-									<script defer src="/assets/js/twitterlight.js?v=4000"></script>
+									<script defer src="{{'js/twitterlight.js' | asset}}"></script>
 								{% else %}
-									<script defer src="/assets/js/twitter.js?v=4000"></script>
+									<script defer src="{{'js/twitter.js' | asset}}"></script>
 								{% endif %}
 							{% elif p.domain in ['youtu.be','youtube.com'] and p.embed_url and p.embed_url.startswith('<lite-youtube') %}
 								{{p.embed_url | safe}}
@ -1093,28 +1093,28 @@
 {% endif %}

 {% if v and (v.id == p.author_id or v.admin_level > 1 and v.admin_level > 2) %}
-	<script defer src="/assets/js/togglePostEdit.js?v=4000"></script>
+	<script defer src="{{'js/togglePostEdit.js' | asset}}"></script>
 {% endif %}

 {% if not v or v.highlightcomments %}
-	<script defer src="/assets/js/new_comments_count.js?v=4000"></script>
+	<script defer src="{{'js/new_comments_count.js' | asset}}"></script>
 {% endif %}

-<script defer src="{{asset('js/clipboard.js')}}"></script>
+<script defer src="{{'js/clipboard.js' | asset}}"></script>

 {% if not p.replies %}
 	{% include "comments.html" %}
 {% endif %}

 {% if p.award_count("shit", v) %}
-	<script defer src="/assets/js/critters.js?v=4000"></script>
-	<script defer src="/assets/js/bugs.js?v=4000"></script>
+	<script defer src="{{'js/critters.js' | asset}}"></script>
+	<script defer src="{{'js/bugs.js' | asset}}"></script>
 {% endif %}


 {% if p.award_count("fireflies", v) %}
-	<script defer src="/assets/js/critters.js?v=4000"></script>
-	<script defer src="/assets/js/fireflies.js?v=4001"></script>
+	<script defer src="{{'js/critters.js' | asset}}"></script>
+	<script defer src="{{'js/fireflies.js' | asset}}"></script>
 {% endif %}


@ -1184,7 +1184,7 @@
 {% endif %}

 {% if p.award_count("firework", v) %}
-	<script defer src="/assets/js/fireworks.js?v=4000"></script>
+	<script defer src="{{'js/fireworks.js' | asset}}"></script>
 	<div class="firework">
 		<img src="">
 	</div>
@ -1209,7 +1209,7 @@
 {% endif %}

 {% if p.award_count("ricardo", v) %}
-	<script defer src="/assets/js/ricardo.js?v=4000"></script>
+	<script defer src="{{'js/ricardo.js' | asset}}"></script>
 	<div id="ricardo1" class="ricardo ricardoleft">
 		<img src="/i/ricardo1.webp">
 	</div>
--- a/files/templates/submission_listing.html
+++ b/files/templates/submission_listing.html
@ -1,4 +1,3 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}

 {% if v %}
@ -12,7 +11,7 @@
 {% endif %}

 {% if not v or v.highlightcomments %}
-	<script defer src="/assets/js/new_comments_count.js?v=4000"></script>
+	<script defer src="{{'js/new_comments_count.js' | asset}}"></script>
 {% endif %}

 {% include "popover.html" %}
@ -425,6 +424,6 @@
 {% endif %}
 {% include "expanded_image_modal.html" %}

-<script defer src="{{asset('js/clipboard.js')}}"></script>
-<script defer src="{{asset('js/comments+submission_listing.js')}}"></script>
-<script defer src="{{asset('js/submission_listing.js')}}"></script>
+<script defer src="{{'js/clipboard.js' | asset}}"></script>
+<script defer src="{{'js/comments+submission_listing.js' | asset}}"></script>
+<script defer src="{{'js/submission_listing.js' | asset}}"></script>
--- a/files/templates/submit.html
+++ b/files/templates/submit.html
@ -1,9 +1,8 @@
-{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<script defer src="{{asset('js/bootstrap.js')}}"></script>
+	<script defer src="{{'js/bootstrap.js' | asset}}"></script>

 	<meta name="description" content="{{DESCRIPTION}}">
 	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
@ -12,7 +11,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 	<meta name="author" content="">
-	<link rel="icon" type="image/webp" href="{{asset_siteimg('icon.webp')}}">
+	<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">

 	{% if SITE == 'pcmemes.net' %}
 		{% set cc='Splash Mountain' %}
@ -27,8 +26,8 @@
 	{% block stylesheets %}
 		{% if v %}
 			<style>:root{--primary:#{{v.themecolor}}}</style>
-			<link rel="stylesheet" href="{{asset('css/main.css')}}">
-			<link rel="stylesheet" href="{{asset('css/' + v.theme + '.css')}}">
+			<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+			<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
 			{% if v.agendaposter %}
 				<style>
 					html {
@ -42,8 +41,8 @@
 			{% endif %}
 		{% else %}
 			<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-			<link rel="stylesheet" href="{{asset('css/main.css')}}">
-			<link rel="stylesheet" href="/assets/css/{{DEFAULT_THEME}}.css?v=4000">
+			<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+			<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
 		{% endif %}

 		{% if v.earlylife %}
@ -228,9 +227,9 @@
 			</script>
 		{% endif %}

-		<script defer src="{{asset('js/marked.js')}}"></script>
-		<script defer src="{{asset('js/formatting.js')}}"></script>
-		<script defer src="{{asset('js/submit.js')}}"></script>
+		<script defer src="{{'js/marked.js' | asset}}"></script>
+		<script defer src="{{'js/formatting.js' | asset}}"></script>
+		<script defer src="{{'js/submit.js' | asset}}"></script>
 		{% include "emoji_modal.html" %}
 		{% include "gif_modal.html" %}

--- a/files/templates/transfers.html
+++ b/files/templates/transfers.html
@ -44,5 +44,5 @@
 	</div>
 </div>

-<script defer src="{{asset('js/clipboard.js')}}"></script>
+<script defer src="{{'js/clipboard.js' | asset}}"></script>
 {% endblock %}
--- a/files/templates/userpage.html
+++ b/files/templates/userpage.html
@ -130,7 +130,7 @@

 				<div class="font-weight-bolder">
 					<span id="profile-coins-amount">{{u.coins}}</span>
-					<img alt="coins" class="ml-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="coins" height="20" src="{{asset_siteimg('coins.webp')}}">&nbsp;&nbsp;
+					<img alt="coins" class="ml-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="coins" height="20" src="{{'coins.webp' | asset_siteimg}}">&nbsp;&nbsp;

 					{% if FEATURES['PROCOINS'] %}
 						<span id="profile-bux-amount">{{u.procoins}}</span>
@ -465,7 +465,7 @@

 				<div class="font-weight-normal">
 					<span id="profile-coins-amount-mobile" class="font-weight-bold">{{u.coins}}</span>
-					<img alt="coins" class="ml-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="coins" height="15" src="{{asset_siteimg('coins.webp')}}">&nbsp;&nbsp;
+					<img alt="coins" class="ml-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="coins" height="15" src="{{'coins.webp' | asset_siteimg}}">&nbsp;&nbsp;

 					{% if FEATURES['PROCOINS'] %}
 						<span id="profile-bux-amount-mobile" class="font-weight-bold">{{u.procoins}}</span>
@ -821,11 +821,11 @@

 {% if v %}
 <div id='tax' class="d-none">{% if v.patron or u.patron or v.alts_patron or u.alts_patron %}0{% else %}0.03{% endif %}</div>
-<script defer src="{{asset('js/userpage_v.js')}}"></script>
+<script defer src="{{'js/userpage_v.js' | asset}}"></script>
 <div id="username" class="d-none">{{u.username}}</div>
 {% endif %}

-<script defer src="{{asset('js/userpage.js')}}"></script>
+<script defer src="{{'js/userpage.js' | asset}}"></script>

 {% endblock %}

@ -852,7 +852,7 @@
 {% endif %}

 {% if not request.path.endswith('/comments') %}
-	<script defer src="{{asset('js/marked.js')}}"></script>
+	<script defer src="{{'js/marked.js' | asset}}"></script>
 {% endif %}

 {% if v and v.id != u.id and '/comments' not in request.path %}
--- a/files/templates/userpage_comments.html
+++ b/files/templates/userpage_comments.html
@ -118,8 +118,8 @@
 {% if v %}
 <div id='tax' class="d-none">{% if v.patron or u.patron %}0{% else %}0.03{% endif %}</div>
 <div id="username" class="d-none">{{u.username}}</div>
-<script defer src="{{asset('js/userpage_v.js')}}"></script>
+<script defer src="{{'js/userpage_v.js' | asset}}"></script>
 {% endif %}

-<script defer src="{{asset('js/userpage.js')}}"></script>
+<script defer src="{{'js/userpage.js' | asset}}"></script>
 {% endblock %}
--- a/files/templates/userpage_private.html
+++ b/files/templates/userpage_private.html
@ -34,9 +34,9 @@
 	<div id='tax' class="d-none">{% if v.patron or u.patron %}0{% else %}0.03{% endif %}</div>
 	<div id="username" class="d-none">{{u.username}}</div>
 	{%- include "emoji_modal.html" -%}
-	<script defer src="{{asset('js/userpage_v.js')}}"></script>
+	<script defer src="{{'js/userpage_v.js' | asset}}"></script>
 {% endif %}

-<script defer src="{{asset('js/userpage.js')}}"></script>
+<script defer src="{{'js/userpage.js' | asset}}"></script>

 {% endblock %}
--- a/Show More
+++ b/Show More