feat: commit accent color to views

Author: valeriansaliou

src/assemblies/inbox/InboxMessaging.vue

@@ -294,6 +294,9 @@ export default {
           this.onStoreSettingsMessagesAny
         ],
 
+        // [$account]
+        "team:accent": [Store.$account, this.onStoreAccountTeamAccent],
+
         // [$inbox]
         "messages:reload": [Store.$inbox, this.onStoreMessagesReload],
         "message:restored": [Store.$inbox, this.onStoreMessageRestored],
@@ -629,6 +632,13 @@ export default {
       }
     },
 
+    setupAccent(runtime: MessagingRuntime): void {
+      // Apply style accent color (or none)
+      runtime.MessagingContext.setStyleAccent(
+        this.account.team.accent.background || null
+      );
+    },
+
     setupBehavior(runtime: MessagingRuntime): void {
       let options = this.settings.messages;
 
@@ -1255,6 +1265,7 @@ export default {
         this.setupDocument(frameRuntime);
         this.setupContext(frameRuntime);
         this.setupTheme(frameRuntime);
+        this.setupAccent(frameRuntime);
         this.setupBehavior(frameRuntime);
         this.setupEvents(frameRuntime);
         this.setupStore(frameRuntime);
@@ -1604,6 +1615,15 @@ export default {
       }
     },
 
+    onStoreAccountTeamAccent(): void {
+      const frameRuntime = this.frame();
+
+      if (frameRuntime !== null) {
+        // Re-setup accent
+        this.setupAccent(frameRuntime);
+      }
+    },
+
     onStoreMessagesReload(event: EventMessagesGeneric): void {
       if (this.room?.id === event.roomId) {
         // Synchronize messages eagerly?

src/store/tables/account.ts

@@ -10,6 +10,7 @@
 
 // NPM
 import { defineStore } from "pinia";
+import mitt from "mitt";
 import { Availability, JID } from "@prose-im/prose-sdk-js";
 
 // PROJECT: STORES
@@ -66,6 +67,12 @@ const LOCAL_STATES = {
 
 const INFORMATION_AVAILABILITY_DEFAULT = Availability.Available;
 
+/**************************************************************************
+ * INSTANCES
+ * ************************************************************************* */
+
+const EventBus = mitt();
+
 /**************************************************************************
  * TABLE
  * ************************************************************************* */
@@ -150,6 +157,11 @@ const $account = defineStore("account", {
   },
 
   actions: {
+    events(): ReturnType<typeof mitt> {
+      // Return event bus
+      return EventBus;
+    },
+
     async login(
       rawJID: string,
       password: string,
@@ -337,9 +349,20 @@ const $account = defineStore("account", {
     },
 
     setTeamAccent(accent: AccountTeamAccent): void {
-      this.$patch(() => {
-        this.team.accent = accent;
-      });
+      // Any change in accent colors?
+      if (
+        accent.background !== this.team.accent.background ||
+        accent.text !== this.team.accent.text
+      ) {
+        // Update value
+        this.$patch(() => {
+          this.team.accent.background = accent.background;
+          this.team.accent.text = accent.text;
+        });
+
+        // Broadcast value change
+        EventBus.emit("team:accent", accent);
+      }
     }
   }
 });