From 92e270f83ded40c83c961fc1b58474fe05cbe3ea Mon Sep 17 00:00:00 2001
From: Hunain Bin Sajid <hunainbinsajid@gmail.com>
Date: Thu, 7 Mar 2024 17:24:44 +0500
Subject: [PATCH] feat: add action badge to show active status

---
 src/pages/background/index.ts | 28 +++++++++++++++++++++++-----
 src/pages/content/index.tsx   | 19 +++++++++++++++----
 src/pages/dialog/signin.tsx   |  7 ++-----
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts
index 0b90e37d..7122bf72 100644
--- a/src/pages/background/index.ts
+++ b/src/pages/background/index.ts
@@ -20,10 +20,10 @@ console.log("Background script loaded");
 chrome.runtime.onStartup.addListener(function () {
   (async () => {
     const vendorData = await configService.getData();
-    if(vendorData?.icon) {
-      setActionIcon(vendorData?.icon)
+    if (vendorData?.icon) {
+      setActionIcon(vendorData?.icon);
     }
-  })()
+  })();
 
   return true;
 });
@@ -52,6 +52,24 @@ chrome.runtime.onMessage.addListener(function (
           message.subtype
       );
 
+      if (
+        message.type === "action-icon" &&
+        message.subtype === "set-action-icon"
+      ) {
+        chrome.action.setBadgeBackgroundColor({ color: "#008000" }, () => {
+          chrome.action.setBadgeText({ text: "^" });
+          sendResponse({ data: { success: true } });
+        });
+      }
+
+      if (
+        message.type === "action-icon" &&
+        message.subtype === "unset-action-icon"
+      ) {
+        chrome.action.setBadgeText({ text: "" });
+        sendResponse({ data: { success: true } });
+      }
+
       if (
         message.type === "vendor-info" &&
         message.subtype === "get-vendor-data"
@@ -75,7 +93,7 @@ chrome.runtime.onMessage.addListener(function (
             const resp = await (await fetch(vendorUrl)).json();
             if (resp?.agentUrl) {
               await configService.setAgentUrl(resp?.agentUrl);
-              await configService.setHasOnboarded(true)
+              await configService.setHasOnboarded(true);
             }
             await configService.setData(resp);
             if (resp?.icon) {
@@ -102,7 +120,7 @@ chrome.runtime.onMessage.addListener(function (
           });
           return;
         }
-  
+
         const signedHeaders = await signifyService.signHeaders(
           // sigin can either have identifier or credential
           autoSignin?.identifier
diff --git a/src/pages/content/index.tsx b/src/pages/content/index.tsx
index a5b9a784..57530e8d 100644
--- a/src/pages/content/index.tsx
+++ b/src/pages/content/index.tsx
@@ -33,6 +33,10 @@ window.addEventListener(
         case TAB_STATE.SELECT_CREDENTIAL:
         case TAB_STATE.SELECT_ID_CRED:
         case TAB_STATE.SELECT_AUTO_SIGNIN:
+          await chrome.runtime.sendMessage<IMessage<void>>({
+            type: "action-icon",
+            subtype: "set-action-icon",
+          });
           const respVendorData = await chrome.runtime.sendMessage<
             IMessage<void>
           >({
@@ -192,10 +196,7 @@ function insertDialog(
         signins={signins}
         autoSigninObjExists={!!autoSigninObj}
         eventType={eventType}
-        handleRemove={() => {
-          removeDialog();
-          setTabState(TAB_STATE.NONE);
-        }}
+        handleRemove={resetTabState}
       />
     </LocaleProvider>
   );
@@ -204,6 +205,16 @@ function insertDialog(
 function removeDialog() {
   const element = document.getElementById("__root");
   if (element) element.remove();
+
+  chrome.runtime.sendMessage<IMessage<void>>({
+    type: "action-icon",
+    subtype: "unset-action-icon",
+  });
+}
+
+export function resetTabState() {
+  removeDialog();
+  setTabState(TAB_STATE.NONE);
 }
 
 // TODO: proper types for these params
diff --git a/src/pages/dialog/signin.tsx b/src/pages/dialog/signin.tsx
index 4481277f..85c02784 100644
--- a/src/pages/dialog/signin.tsx
+++ b/src/pages/dialog/signin.tsx
@@ -1,7 +1,6 @@
 import { styled } from "styled-components";
 import { Button, Text, Subtext } from "@components/ui";
-import { TAB_STATE } from "@pages/popup/constants";
-import { setTabState } from "@pages/content";
+import { resetTabState } from "@pages/content";
 import { ISignin } from "@config/types";
 
 const StyledSigninItem = styled.div`
@@ -19,9 +18,7 @@ export const SigninItem = ({ signin }: { signin: ISignin }): JSX.Element => {
         signin: signin,
       },
     });
-    const element = document.getElementById("__root");
-    if (element) element.remove();
-    setTabState(TAB_STATE.NONE);
+    resetTabState();
     // Communicate headers to web page
     window.postMessage({ type: "signify-signature", data: headers.data }, "*");
   };