From b6fd1f080404aaf86949633775ebb123f78a6f94 Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Sun, 13 Dec 2020 21:51:55 -0500
Subject: [PATCH] Add category name and color to popup

---
 public/popup.css |  7 +++++++
 src/popup.ts     | 18 ++++++++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index 619cf7e8..c6cab0e5 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -34,6 +34,13 @@
   cursor: pointer;
 }
 
+.dot {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
 .sponsorTimesThanksForVotingText {
   font-size: large;
 }
diff --git a/src/popup.ts b/src/popup.ts
index aad471fd..563a871d 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -340,9 +340,6 @@ async function runThePopup(messageListener?: MessageListener) {
                         PageElements.unwhitelistChannel.style.display = "unset";
                         PageElements.whitelistToggle.checked = true;
                         document.querySelectorAll('label > svg')[0].classList.add("rotated");
-
-                        //PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
-                        //PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
                     }
                 });
             }
@@ -412,9 +409,13 @@ async function runThePopup(messageListener?: MessageListener) {
             //add them as buttons to the issue reporting container
             let container = document.getElementById("issueReporterTimeButtons");
             for (let i = 0; i < segmentTimes.length; i++) {
+                let UUID = segmentTimes[i].UUID;
+
                 let sponsorTimeButton = document.createElement("button");
                 sponsorTimeButton.className = "segmentTimeButton popupElement";
 
+                let prefix = chrome.i18n.getMessage("category_" + segmentTimes[i].category) + ": ";
+
                 let extraInfo = "";
                 if (segmentTimes[i].hidden === SponsorHideType.Downvoted) {
                     //this one is downvoted
@@ -424,13 +425,17 @@ async function runThePopup(messageListener?: MessageListener) {
                     extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
                 }
 
-                sponsorTimeButton.innerText = getFormattedTime(segmentTimes[i].segment[0]) + " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segmentTimes[i].segment[1]) + extraInfo;
+                sponsorTimeButton.innerText = prefix + getFormattedTime(segmentTimes[i].segment[0]) + " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segmentTimes[i].segment[1]) + extraInfo;
+
+                let categoryColorCircle = document.createElement("span");
+                categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID;
+                categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category].color;
+                categoryColorCircle.classList.add("dot");
+                categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle");
 
                 let votingButtons = document.createElement("div");
                 votingButtons.classList.add("votingButtons");
 
-                let UUID = segmentTimes[i].UUID;
-
                 //thumbs up and down buttons
                 let voteButtonsContainer = document.createElement("div");
                 voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
@@ -469,6 +474,7 @@ async function runThePopup(messageListener?: MessageListener) {
                 thanksForVotingText.classList.add("sponsorTimesThanksForVotingText");
                 voteStatusContainer.appendChild(thanksForVotingText);
 
+                votingButtons.append(categoryColorCircle);
                 votingButtons.append(sponsorTimeButton);
                 votingButtons.append(voteButtonsContainer);
                 votingButtons.append(voteStatusContainer);