Add warning when chapter name similar to category

public/_locales/en/messages.json

@@ -883,6 +883,9 @@
     "categoryPillTitleText": {
         "message": "This entire video is labeled as this category and is too tightly integrated to be able to separate"
     },
+    "chapterNameTooltipWarning": {
+        "message": "One of your chapter names is similar to a category. You should use categories when possible instead."
+    },
     "experiementOptOut": {
         "message": "Opt-out of all future experiments",
         "description": "This is used in a popup about a new experiment to get a list of unlisted videos to back up since all unlisted videos uploaded before 2017 will be set to private."

src/components/SponsorTimeEditComponent.tsx

@@ -34,6 +34,9 @@ export interface SponsorTimeEditState {
 
 const DEFAULT_CATEGORY = "chooseACategory";
 
+const categoryNames = CompileConfig.categoryList.filter((name) => name !== "chapter")
+    .map((name) => chrome.i18n.getMessage("category_" + name));
+
 class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
 
     idSuffix: string;
@@ -48,6 +51,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     // Used when selecting POI or Full
     timesBeforeChanging: number[] = [];
     fullVideoWarningShown = false;
+    categoryNameWarningShown = false;
 
     // For description auto-complete
     fetchingSuggestions: boolean;
@@ -101,6 +105,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     render(): React.ReactElement {
         this.checkToShowFullVideoWarning();
+        this.checkToShowChapterWarning();
 
         const style: React.CSSProperties = {
             textAlign: "center"
@@ -336,13 +341,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     showScrollToEditToolTip(): void {
         if (!Config.config.scrollToEditTimeUpdate && document.getElementById("sponsorRectangleTooltip" + "sponsorTimesContainer" + this.idSuffix) === null) {
-            this.showToolTip(chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"), () => { Config.config.scrollToEditTimeUpdate = true });
+            this.showToolTip(chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"), "scrollToEdit", () => { Config.config.scrollToEditTimeUpdate = true });
         }
     }
 
-    showToolTip(text: string, buttonFunction?: () => void): boolean {
+    showToolTip(text: string, id: string, buttonFunction?: () => void): boolean {
         const element = document.getElementById("sponsorTimesContainer" + this.idSuffix);
         if (element) {
+            const htmlId = `sponsorRectangleTooltip${id + this.idSuffix}`;
+            if (!document.getElementById(htmlId)) {
                 new RectangleTooltip({
                     text,
                     referenceNode: element.parentElement,
@@ -351,11 +358,12 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     bottomOffset: 0 + "px",
                     leftOffset: -318 + "px",
                     backgroundColor: "rgba(28, 28, 28, 1.0)",
-                htmlId: "sponsorTimesContainer" + this.idSuffix,
+                    htmlId,
                     buttonFunction,
                     fontSize: "14px",
                     maxHeight: "200px"
                 });
+            }
 
             return true;
         } else {
@@ -370,12 +378,25 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
         if (videoPercentage > 0.6 && !this.fullVideoWarningShown 
                 && (sponsorTime.category === "sponsor" || sponsorTime.category === "selfpromo" || sponsorTime.category === "chooseACategory")) {
-            if (this.showToolTip(chrome.i18n.getMessage("fullVideoTooltipWarning"))) {
+            if (this.showToolTip(chrome.i18n.getMessage("fullVideoTooltipWarning"), "fullVideoWarning")) {
                 this.fullVideoWarningShown = true;
             }
         }
     }
 
+    checkToShowChapterWarning(): void {
+        const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
+
+        if (sponsorTime.actionType === ActionType.Chapter && sponsorTime.description
+                && !this.categoryNameWarningShown
+                && categoryNames.some(
+                    (category) => sponsorTime.description.toLowerCase().includes(category.toLowerCase()))) {
+            if (this.showToolTip(chrome.i18n.getMessage("chapterNameTooltipWarning"), "chapterWarning")) {
+                this.categoryNameWarningShown = true;
+            }
+        }
+    }
+
     getCategoryOptions(): React.ReactElement[] {
         const elements = [(
             <option value={DEFAULT_CATEGORY}

src/render/RectangleTooltip.tsx

@@ -33,8 +33,8 @@ export class RectangleTooltip {
         props.fontSize ??= "10px";
 
         this.container = document.createElement('div');
-        props.htmlId ??= props.text;
+        props.htmlId ??= "sponsorRectangleTooltip" + props.text;
-        this.container.id = "sponsorRectangleTooltip" + props.htmlId;
+        this.container.id = props.htmlId;
         this.container.style.display = "relative";
 
         if (props.prependElement) {