Added basic category selector to the UI

public/_locales/en/messages.json

@@ -484,7 +484,19 @@
         "message": "to",
         "description": "Used between sponsor times. Example: 1:20 to 1:30"
     },
-    "bracketNow": {
+    "category_sponsor": {
-        "message": "(Now)"
+        "message": "Sponsor"
+    },
+    "category_intro": {
+        "message": "Intro"
+    },
+    "category_outro": {
+        "message": "Outro"
+    },
+    "category_interaction": {
+        "message": "Interaction (Redundant Like, Subscribe, Follow, etc.)"
+    },
+    "category_merchandise": {
+        "message": "Merchandise and self-promotion"
     }
 }

public/content.css

@@ -358,3 +358,14 @@ input::-webkit-inner-spin-button {
 	cursor: pointer;
 	text-decoration: underline;
 }
+
+.sponsorTimeCategories {
+	margin-top: 5px;
+	margin-bottom: 5px;
+
+	background-color: rgba(28, 28, 28, 0.9);
+    border-color: rgb(130,0,0,0.9);
+    color: white;
+    border-width: 3px;
+    padding: 3px;
+}

src/components/SponsorTimeEditComponent.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
-import Config from "../config"
+import Config from "../config";
+import * as CompileConfig from "../../config.json";
 
 import Utils from "../utils";
 import { ContentContainer } from "../types";
@@ -143,6 +144,17 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 
                 {timeDisplay}
 
+                {/* Category */}
+
+                <select id={"sponsorTimeCategories" + this.idSuffix}
+                    className="sponsorTimeCategories">
+                    {this.getCategoryOptions()}
+                </select>
+
+                <br/>
+
+                {/* Editing Tools */}
+
                 <span id={"sponsorTimeDeleteButton" + this.idSuffix}
                     className="sponsorTimeEditButton"
                     onClick={this.deleteTime.bind(this)}>
@@ -168,6 +180,20 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         );
     }
 
+    getCategoryOptions() {
+        let elements = [];
+
+        for (const category of CompileConfig.categoryList) {
+            elements.push(
+                <option value={category}>
+                    {chrome.i18n.getMessage("category_" + category)}
+                </option>
+            );
+        }
+
+        return elements;
+    }
+
     setTimeToNow(index: number) {
         let sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];