reddit-tweaks-ffe/popup/popup.js

(function () {
  "use strict";

  const COLOR_KEYS = [
    "light.subredditBorderColor",
    "light.subredditTextColor",
    "light.commentsBgColor",
    "light.commentsBorderColor",
    "light.commentsTextColor",
    "dark.subredditBorderColor",
    "dark.subredditTextColor",
    "dark.commentsBgColor",
    "dark.commentsBorderColor",
    "dark.commentsTextColor",
  ];

  const BG_KEYS = [
    "light.subredditBgColor",
    "dark.subredditBgColor",
  ];

  function colorToHex(val) {
    if (!val || val === "transparent") return "#ffffff";
    return val;
  }

  function populateControls(settings) {
    document.getElementById("enabled").checked = settings.enabled;
    document.getElementById("darkMode").value = settings.darkMode;

    COLOR_KEYS.forEach(function (key) {
      const el = document.getElementById(key);
      if (el) el.value = colorToHex(settings[key]);
    });

    BG_KEYS.forEach(function (key) {
      const el = document.getElementById(key);
      if (el) {
        el.value = settings[key] === "transparent" ? "" : settings[key];
        el.placeholder = "transparent";
      }
    });

    renderSubredditOverrides(settings.subredditColors || {});
  }

  function renderSubredditOverrides(overrides) {
    const list = document.getElementById("subredditList");
    list.innerHTML = "";

    Object.entries(overrides).forEach(function ([name, colors]) {
      addSubredditEntry(name, colors);
    });
  }

  function addSubredditEntry(name, colors) {
    const list = document.getElementById("subredditList");
    const entry = document.createElement("div");
    entry.className = "subreddit-entry";

    const nameInput = document.createElement("input");
    nameInput.type = "text";
    nameInput.placeholder = "subreddit";
    nameInput.value = name || "";

    const bgInput = document.createElement("input");
    bgInput.type = "color";
    bgInput.value = colorToHex(colors?.bg);
    bgInput.title = "Background";

    const borderInput = document.createElement("input");
    borderInput.type = "color";
    borderInput.value = colorToHex(colors?.border);
    borderInput.title = "Border";

    const textInput = document.createElement("input");
    textInput.type = "color";
    textInput.value = colorToHex(colors?.text);
    textInput.title = "Text";

    const removeBtn = document.createElement("button");
    removeBtn.className = "btn-remove";
    removeBtn.textContent = "×";
    removeBtn.addEventListener("click", function () {
      entry.remove();
      saveFromControls();
    });

    [nameInput, bgInput, borderInput, textInput].forEach(function (input) {
      input.addEventListener("change", saveFromControls);
    });

    entry.appendChild(nameInput);
    entry.appendChild(bgInput);
    entry.appendChild(borderInput);
    entry.appendChild(textInput);
    entry.appendChild(removeBtn);
    list.appendChild(entry);
  }

  function collectSubredditOverrides() {
    const overrides = {};
    const entries = document.querySelectorAll(".subreddit-entry");
    entries.forEach(function (entry) {
      const inputs = entry.querySelectorAll("input");
      const name = inputs[0].value.trim().replace(/^r\//, "");
      if (name) {
        overrides[name] = {
          bg: inputs[1].value,
          border: inputs[2].value,
          text: inputs[3].value,
        };
      }
    });
    return overrides;
  }

  function saveFromControls() {
    const settings = {
      enabled: document.getElementById("enabled").checked,
      darkMode: document.getElementById("darkMode").value,
      subredditColors: collectSubredditOverrides(),
    };

    COLOR_KEYS.forEach(function (key) {
      const el = document.getElementById(key);
      if (el) settings[key] = el.value;
    });

    BG_KEYS.forEach(function (key) {
      const el = document.getElementById(key);
      if (el) {
        settings[key] = el.value.trim() || "transparent";
      }
    });

    window.RedditTweaks.saveSettings(settings);
  }

  async function init() {
    const settings = await window.RedditTweaks.loadSettings();
    populateControls(settings);

    document.getElementById("enabled").addEventListener("change", saveFromControls);
    document.getElementById("darkMode").addEventListener("change", saveFromControls);

    COLOR_KEYS.forEach(function (key) {
      const el = document.getElementById(key);
      if (el) el.addEventListener("input", saveFromControls);
    });

    BG_KEYS.forEach(function (key) {
      const el = document.getElementById(key);
      if (el) el.addEventListener("input", saveFromControls);
    });

    document.getElementById("addSubreddit").addEventListener("click", function () {
      addSubredditEntry("", {});
    });

    document.getElementById("resetLight").addEventListener("click", async function () {
      const settings = await window.RedditTweaks.loadSettings();
      const DEFAULTS = window.RedditTweaks.DEFAULTS;
      Object.keys(DEFAULTS).forEach(function (key) {
        if (key.startsWith("light.")) settings[key] = DEFAULTS[key];
      });
      await window.RedditTweaks.saveSettings(settings);
      populateControls(settings);
    });

    document.getElementById("resetDark").addEventListener("click", async function () {
      const settings = await window.RedditTweaks.loadSettings();
      const DEFAULTS = window.RedditTweaks.DEFAULTS;
      Object.keys(DEFAULTS).forEach(function (key) {
        if (key.startsWith("dark.")) settings[key] = DEFAULTS[key];
      });
      await window.RedditTweaks.saveSettings(settings);
      populateControls(settings);
    });

    document.getElementById("resetAll").addEventListener("click", async function () {
      if (confirm("Reset all settings to defaults?")) {
        await window.RedditTweaks.resetSettings();
        const settings = await window.RedditTweaks.loadSettings();
        populateControls(settings);
      }
    });
  }

  init();
})();