reddit-tweaks-ffe/content/tweaks/badges.js

(function () {
  "use strict";

  let contentObserver = null;
  let darkModeObserver = null;
  let currentSettings = null;

  function isDarkMode(settings) {
    if (settings.darkMode === "light") return false;
    if (settings.darkMode === "dark") return true;
    return document.body.classList.contains("res-nightmode");
  }

  function getColorPrefix(settings) {
    return isDarkMode(settings) ? "dark" : "light";
  }

  function applyColorsToContainer(container, settings, subredditName) {
    const prefix = getColorPrefix(settings);

    if (isDarkMode(settings)) {
      container.classList.add("rt-dark");
    } else {
      container.classList.remove("rt-dark");
    }

    const overrides = subredditName && settings.subredditColors[subredditName];

    container.style.setProperty("--rt-sub-bg", overrides?.bg || settings[prefix + ".subredditBgColor"]);
    container.style.setProperty("--rt-sub-border", overrides?.border || settings[prefix + ".subredditBorderColor"]);
    container.style.setProperty("--rt-sub-text", overrides?.text || settings[prefix + ".subredditTextColor"]);
    container.style.setProperty("--rt-com-bg", settings[prefix + ".commentsBgColor"]);
    container.style.setProperty("--rt-com-border", settings[prefix + ".commentsBorderColor"]);
    container.style.setProperty("--rt-com-text", settings[prefix + ".commentsTextColor"]);
  }

  function normalizeCommentText(text) {
    const trimmed = text.trim();
    if (trimmed === "comment") return "0 comments";
    return trimmed;
  }

  function processPost(post, settings) {
    if (post.hasAttribute("data-rt-processed")) return;

    const entry = post.querySelector(".entry");
    if (!entry) return;

    const container = document.createElement("div");
    container.className = "reddit-tweaks-badges";

    let subredditName = null;

    const subLink = post.querySelector(".tagline .subreddit");
    if (subLink) {
      const badge = document.createElement("a");
      badge.className = "rt-badge rt-badge--subreddit";
      badge.href = subLink.href;
      badge.textContent = subLink.textContent.trim();
      subredditName = subLink.textContent.trim().replace(/^r\//, "");
      container.appendChild(badge);
    }

    const commentsLink = post.querySelector(".flat-list .comments");
    if (commentsLink) {
      const badge = document.createElement("a");
      badge.className = "rt-badge rt-badge--comments";
      badge.href = commentsLink.href;
      badge.textContent = normalizeCommentText(commentsLink.textContent);
      container.appendChild(badge);
    }

    if (container.children.length === 0) return;

    applyColorsToContainer(container, settings, subredditName);
    entry.insertBefore(container, entry.firstChild);
    post.setAttribute("data-rt-processed", "true");
  }

  function processPosts(settings) {
    const posts = document.querySelectorAll("div.thing.link:not([data-rt-processed])");
    posts.forEach(function (post) {
      processPost(post, settings);
    });
  }

  function getObserverTarget() {
    return (
      document.getElementById("siteTable") ||
      document.querySelector('.content[role="main"]') ||
      document.body
    );
  }

  function startContentObserver(settings) {
    if (contentObserver) contentObserver.disconnect();

    const target = getObserverTarget();
    contentObserver = new MutationObserver(function (mutations) {
      let hasNewPosts = false;
      for (const mutation of mutations) {
        for (const node of mutation.addedNodes) {
          if (node.nodeType === Node.ELEMENT_NODE) {
            if (node.matches && node.matches("div.thing.link")) {
              hasNewPosts = true;
            } else if (node.querySelector && node.querySelector("div.thing.link")) {
              hasNewPosts = true;
            }
          }
        }
      }
      if (hasNewPosts) processPosts(currentSettings);
    });

    contentObserver.observe(target, { childList: true, subtree: true });
  }

  function startDarkModeObserver() {
    if (darkModeObserver) darkModeObserver.disconnect();

    darkModeObserver = new MutationObserver(function () {
      if (currentSettings && currentSettings.darkMode === "auto") {
        updateColors(currentSettings);
      }
    });

    darkModeObserver.observe(document.body, {
      attributes: true,
      attributeFilter: ["class"],
    });
  }

  function updateColors(settings) {
    currentSettings = settings;
    const containers = document.querySelectorAll(".reddit-tweaks-badges");
    containers.forEach(function (container) {
      const subBadge = container.querySelector(".rt-badge--subreddit");
      const subredditName = subBadge
        ? subBadge.textContent.trim().replace(/^r\//, "")
        : null;
      applyColorsToContainer(container, settings, subredditName);
    });
  }

  function apply(settings) {
    currentSettings = settings;
    processPosts(settings);
    startContentObserver(settings);
    startDarkModeObserver();
  }

  window.RedditTweaks = window.RedditTweaks || {};
  window.RedditTweaks.badgeTweak = {
    apply: apply,
    updateColors: updateColors,
  };
})();