fix(branding): update badge color when switching branding

Author: dvcol

src/models/message/message-type.model.ts

@@ -1,5 +1,6 @@
 import type { VersionUpdateDetails } from '@dvcol/web-extension-utils/chrome/models';
 import type { ContextMenuIds } from '~/models/context/context-menu.model';
+import type { BadgeColorDetails, TabIconDetails } from '~/utils/browser/browser-message.utils';
 
 export const MessageType = {
   ContextMenu: 'context-menu',
@@ -30,5 +31,5 @@ export type MessagePayload<T extends MessageTypes = MessageTypes> = T extends ty
       : T extends typeof MessageType.BadgeUpdate
         ? BadgeUpdatePayload
         : T extends typeof MessageType.IconUpdate
-          ? string
+          ? { icon?: TabIconDetails; color?: BadgeColorDetails }
           : never;

src/scripts/background/index.ts

@@ -66,7 +66,9 @@ try {
 try {
   onMessage(MessageType.IconUpdate, async message => {
     if (!message.payload) return;
-    setIcon?.({ path: message.payload });
+    const { icon, color } = message.payload;
+    if (icon !== undefined) setIcon?.(icon);
+    if (color !== undefined) setBadgeBackgroundColor?.(color);
   });
 } catch (error) {
   console.error('Failed to handle badge update message', error);

src/stores/settings/extension.store.ts

@@ -20,6 +20,7 @@ import { Route } from '~/models/router.model';
 import { Logger } from '~/services/logger.service';
 import { TraktService } from '~/services/trakt.service';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
+import { BrandColors } from '~/styles/colors.style';
 import { sendMessage } from '~/utils/browser/browser-message.utils';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounce } from '~/utils/debounce.utils';
@@ -233,11 +234,22 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
 
   const changeBrand = async (value: Brands = brand.value) => {
     if (value === Brand.New) {
-      if (chromeRuntimeId) return sendMessage({ type: MessageType.IconUpdate, payload: NewExtensionIcon });
+      if (chromeRuntimeId) {
+        return sendMessage({
+          type: MessageType.IconUpdate,
+          payload: { icon: { path: NewExtensionIcon }, color: { color: BrandColors.traktDark } },
+        });
+      }
       newIcons.forEach(replaceIcon);
       return replaceMeta(newThemeColor);
     }
-    if (chromeRuntimeId) return sendMessage({ type: MessageType.IconUpdate, payload: OldExtensionIcon });
+
+    if (chromeRuntimeId) {
+      return sendMessage({
+        type: MessageType.IconUpdate,
+        payload: { icon: { path: OldExtensionIcon }, color: { color: BrandColors.traktDark } },
+      });
+    }
     oldIcons.forEach(replaceIcon);
     return replaceMeta(oldThemeColor);
   };

src/utils/browser/browser-message.utils.ts

@@ -32,3 +32,6 @@ export const sendMessage = async <
     else throw error;
   }
 };
+
+export type TabIconDetails = chrome.action.TabIconDetails;
+export type BadgeColorDetails = chrome.action.BadgeColorDetails;