From 3bafdfa0b6fc8a2f91120b1ba477b23054c4323c Mon Sep 17 00:00:00 2001
From: Ezzudin Alkotob <ezz@fb.com>
Date: Fri, 29 Aug 2025 15:38:09 -0700
Subject: [PATCH] link to violations

---
 _locales/en/messages.json |  3 +++
 src/css/popup.css         |  6 +++---
 src/html/popup.html       |  4 +++-
 src/js/popup/popup.ts     | 25 +++++++++++++++++++++----
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 7a61c24..64f2f0b 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -115,5 +115,8 @@
 	},
 	"i18nViolations": {
 		"message": "All Violations"
+	},
+	"i18nCurrentViolations": {
+		"message": "View Violations"
 	}
 }
diff --git a/src/css/popup.css b/src/css/popup.css
index 867503e..f9fb7b7 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -58,11 +58,11 @@ state-element {
   box-sizing: border-box;
   border-radius: 4px;
   cursor: pointer;
-  height: 36px;
+  min-height: 36px;
   font-family: SF Pro Text;
   font-style: normal;
   font-weight: 500;
-  font-size: 15px;
+  font-size: 13px;
   line-height: 20px;
   text-align: center;
   letter-spacing: -0.23px;
@@ -73,7 +73,7 @@ state-element {
   color: #ffffff;
 }
 
-.secondary_button {
+.secondary_button, .tertiary_button {
   background: #ffffff;
   color: #1c2b33;
 }
diff --git a/src/html/popup.html b/src/html/popup.html
index dcf9ff1..8304d0a 100644
--- a/src/html/popup.html
+++ b/src/html/popup.html
@@ -39,7 +39,9 @@
       secondary-button-id="i18nAnomalyLearnMoreButton"
       secondary-button-action="learn_more"
       primary-button-id="i18nDownloadPrompt"
-      primary-button-action="download"></state-element>
+      primary-button-action="download"
+      tertiary-button-id="i18nCurrentViolations"
+      tertiary-button-action="violations_list"></state-element>
     <state-element
       inner-id="download"
       header-message="i18nDownloadPrompt"
diff --git a/src/js/popup/popup.ts b/src/js/popup/popup.ts
index 4fdbccf..bc7a9fc 100644
--- a/src/js/popup/popup.ts
+++ b/src/js/popup/popup.ts
@@ -190,6 +190,8 @@ class StateElement extends HTMLElement {
     'primary-button-action',
     'secondary-button-id',
     'secondary-button-action',
+    'tertiary-button-id',
+    'tertiary-button-action',
     'header-message',
   ];
 
@@ -199,26 +201,35 @@ class StateElement extends HTMLElement {
     const headerMessage = this.getAttribute('header-message');
     const statusHeader = this.getAttribute('status-header');
     const statusMessage = this.getAttribute('status-message');
-    const secondaryButtonId = this.getAttribute('secondary-button-id');
     const primaryButtonId = this.getAttribute('primary-button-id');
+    const secondaryButtonId = this.getAttribute('secondary-button-id');
+    const tertiaryButtonId = this.getAttribute('tertiary-button-id');
     const primaryButtonAction = this.getAttribute('primary-button-action');
     const secondaryButtonAction = this.getAttribute('secondary-button-action');
+    const tertiaryButtonAction = this.getAttribute('tertiary-button-action');
+    const primaryButton = primaryButtonId
+      ? `<button
+          id="${primaryButtonId}"
+          class="button primary_button"
+          type="button"></button>`
+      : '';
     const secondaryButton = secondaryButtonId
       ? `<button
           id="${secondaryButtonId}"
           class="button secondary_button"
           type="button"></button>`
       : '';
-    const primaryButton = primaryButtonId
+    const tertiaryButton = tertiaryButtonId
       ? `<button
-          id="${primaryButtonId}"
-          class="button primary_button"
+          id="${tertiaryButtonId}"
+          class="button tertiary_button"
           type="button"></button>`
       : '';
     const actionBar =
       primaryButton || secondaryButton
         ? `<div class="action_bar">
               ${secondaryButton}
+              ${tertiaryButton}
               ${primaryButton}
             </div>`
         : '';
@@ -256,6 +267,10 @@ class StateElement extends HTMLElement {
       const button = document.getElementById(secondaryButtonId);
       handleButtonAction(button!, secondaryButtonAction, innerId);
     }
+    if (tertiaryButtonAction != null && tertiaryButtonId != null) {
+      const button = document.getElementById(tertiaryButtonId);
+      handleButtonAction(button!, tertiaryButtonAction, innerId);
+    }
   }
 }
 
@@ -277,6 +292,8 @@ const handleButtonAction = (
       });
     } else if (action === 'download') {
       sendMessageToActiveTab('downloadSource');
+    } else if (action === 'violations_list') {
+      updateDisplay('violation_list');
     }
   });
 };