Display ratings when duplicate reports have different ratings

src/content/components/philomena/dupe/DupeDiff.ts

@@ -8,13 +8,16 @@ const twitterIcon = ['x-twitter', brandsSubtype];
 
 export default class DupeDiff extends BaseComponent {
   #sourcesLine: HTMLElement | null = null;
+  #ratingsLine: HTMLElement | null = null;
 
   protected init() {
     const {
       "6": sourcesLine,
+      "7": ratingsLine,
     } = this.container.querySelectorAll<HTMLElement>('table tr > td')
 
     this.#sourcesLine = sourcesLine;
+    this.#ratingsLine = ratingsLine;
   }
 
   renderSources(leftSources: string[], rightSources: string[]): void {
@@ -39,6 +42,26 @@ export default class DupeDiff extends BaseComponent {
     this.#sourcesLine.append(sourceIconsContainer);
   }
 
+  renderRatings(leftRating: string | null, rightRating: string | null) {
+    if (!this.#ratingsLine) {
+      return;
+    }
+
+    for (const childElement of this.#ratingsLine.children) {
+      childElement.remove();
+    }
+
+    if (leftRating === rightRating) {
+      return;
+    }
+
+    const ratingDifference = document.createElement('span');
+    ratingDifference.classList.add('ratings-difference');
+    ratingDifference.textContent = `(${leftRating || '(none)'} vs ${rightRating || '(none)'})`;
+
+    this.#ratingsLine.append(ratingDifference);
+  }
+
   #renderSourceIcons(sourcesList: string[]): HTMLElement {
     const iconsContainer = document.createElement('span');
     iconsContainer.classList.add('source-icons__list');

src/content/components/philomena/dupe/DupeReportRow.ts

@@ -1,6 +1,7 @@
 import { BaseComponent } from "$content/components/base/BaseComponent";
 import DupeDiff from "$content/components/philomena/dupe/DupeDiff";
 import DupeImage from "$content/components/philomena/dupe/DupeImage";
+import { ratingTags } from "$config/tags";
 
 export default class DupeReportRow extends BaseComponent {
   #leftImage: DupeImage;
@@ -23,6 +24,7 @@ export default class DupeReportRow extends BaseComponent {
 
   protected init() {
     this.#extractAndRenderSourcesIcons();
+    this.#extractAndDisplayRatings();
   }
 
   #extractAndRenderSourcesIcons() {
@@ -31,4 +33,15 @@ export default class DupeReportRow extends BaseComponent {
       this.#rightImage.imageContainer.extractSources(),
     );
   }
+
+  #extractAndDisplayRatings() {
+    this.#difference.renderRatings(
+      DupeReportRow.#extractRating(this.#leftImage),
+      DupeReportRow.#extractRating(this.#rightImage),
+    );
+  }
+
+  static #extractRating(image: DupeImage): string | null {
+    return image.imageContainer.extractActualTags().find(tagName => ratingTags.includes(tagName)) || null;
+  }
 }