init

frontend/src/stores/emoji.ts

@@ -1,5 +1,6 @@
 import {defineStore} from "pinia";
 import {useApi} from "@/composables/useApi.ts";
+import {onGatewayEvent} from "@/plugins/events.ts";
 
 export interface Emoji {
   id: string;
@@ -65,3 +66,22 @@ export const useEmojiStore = defineStore("emoji", {
     },
   },
 });
+
+onGatewayEvent("Emoji", (payload) => {
+  const store = useEmojiStore();
+  const emoji = payload.content as Emoji;
+  if (!emoji?.id) return;
+
+  // The store is scoped to the currently displayed server. Global emojis are
+  // always relevant; server emojis are relevant only for the active server.
+  if (emoji.server_id !== null && emoji.server_id !== store.activeServerId) return;
+
+  if (payload.action === "add" || payload.action === "update") {
+    store.emojis = [
+      ...store.emojis.filter(item => item.id !== emoji.id),
+      emoji,
+    ];
+  } else if (payload.action === "remove") {
+    store.emojis = store.emojis.filter(item => item.id !== emoji.id);
+  }
+});

frontend/src/stores/server.ts

@@ -2,6 +2,7 @@ import {defineStore} from "pinia";
 import {useApi} from "@/composables/useApi.ts";
 import {useChannelStore} from "@/stores/channel.ts";
 import {useCategoryStore} from "@/stores/category.ts";
+import {onGatewayEvent} from "@/plugins/events.ts";
 
 export interface Server {
   id: string
@@ -153,3 +154,17 @@ export const useServerStore = defineStore("server", {
     }
   }
 });
+
+onGatewayEvent("Channel", (payload) => {
+  const channel = payload.content as { server_id?: string | null };
+  if (channel?.server_id) {
+    void useServerStore().fetchServerTree(channel.server_id);
+  }
+});
+
+onGatewayEvent("Category", (payload) => {
+  const category = payload.content as { server_id?: string | null };
+  if (category?.server_id) {
+    void useServerStore().fetchServerTree(category.server_id);
+  }
+});