feat: implement useClient from client controller

src/mobx/State.ts

@@ -140,6 +140,9 @@ export default class State {
         if (client) {
             this.client = client;
             this.plugins.onClient(client);
+
+            // Register message listener for clearing queue.
+            this.client.addListener("message", this.queue.onMessage);
         }
 
         // Register all the listeners required for saving and syncing state.
@@ -225,6 +228,11 @@ export default class State {
         });
 
         return () => {
+            // Remove any listeners attached to client.
+            if (client) {
+                client.removeListener("message", this.queue.onMessage);
+            }
+
             // Stop exposing the client.
             this.client = undefined;
 

src/mobx/stores/MessageQueue.ts

@@ -5,6 +5,7 @@ import {
     makeAutoObservable,
     observable,
 } from "mobx";
+import { Message } from "revolt.js";
 
 import Store from "../interfaces/Store";
 
@@ -47,6 +48,8 @@ export default class MessageQueue implements Store {
     constructor() {
         this.messages = observable.array([]);
         makeAutoObservable(this);
+
+        this.onMessage = this.onMessage.bind(this);
     }
 
     get id() {
@@ -105,4 +108,16 @@ export default class MessageQueue implements Store {
     @computed get(channel: string) {
         return this.messages.filter((x) => x.channel === channel);
     }
+
+    /**
+     * Handle an incoming Message
+     * @param message Message
+     */
+    @action onMessage(message: Message) {
+        if (!message.nonce) return;
+        if (!this.get(message.channel_id).find((x) => x.id === message.nonce))
+            return;
+
+        this.remove(message.nonce);
+    }
 }

src/mobx/stores/Settings.ts

@@ -4,8 +4,7 @@ import { mapToRecord } from "../../lib/conversion";
 
 import { Fonts, MonospaceFonts, Overrides } from "../../context/Theme";
 
-import { EmojiPack } from "../../components/common/Emoji";
-import { MIGRATIONS } from "../State";
+import { EmojiPack, setGlobalEmojiPack } from "../../components/common/Emoji";
 import Persistent from "../interfaces/Persistent";
 import Store from "../interfaces/Store";
 import Syncable from "../interfaces/Syncable";
@@ -79,6 +78,11 @@ export default class Settings
      * @param value Value
      */
     @action set<T extends keyof ISettings>(key: T, value: ISettings[T]) {
+        // Emoji needs to be immediately applied.
+        if (key === 'appearance:emoji') {
+            setGlobalEmojiPack(value as EmojiPack);
+        }
+
         this.data.set(key, value);
     }