reddit-tweaks-ffe/popup/popup.js

(function () {
  "use strict";

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

  function colorToHex(val) {
    if (!val) 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]);
    });

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

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

    Object.entries(overrides).forEach(function (pair) {
      addSubredditEntry(pair[0], pair[1]);
    });
  }

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

    var header = document.createElement("div");
    header.className = "subreddit-entry-header";

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

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

    header.appendChild(nameInput);
    header.appendChild(removeBtn);

    var modeRow = document.createElement("div");
    modeRow.className = "subreddit-entry-mode";

    var modeSelect = document.createElement("select");
    modeSelect.innerHTML = '<option value="light">Light</option><option value="dark">Dark</option>';
    modeSelect.value = "light";
    modeRow.appendChild(modeSelect);

    var colorsDiv = document.createElement("div");
    colorsDiv.className = "subreddit-entry-colors";

    var lightColors = modeColors && modeColors.light ? modeColors.light : {};
    var darkColors = modeColors && modeColors.dark ? modeColors.dark : {};

    var bgInput = document.createElement("input");
    bgInput.type = "color";
    bgInput.value = colorToHex(lightColors.bg);
    bgInput.title = "Background";

    var borderInput = document.createElement("input");
    borderInput.type = "color";
    borderInput.value = colorToHex(lightColors.border);
    borderInput.title = "Border";

    var textInput = document.createElement("input");
    textInput.type = "color";
    textInput.value = colorToHex(lightColors.text);
    textInput.title = "Text";

    colorsDiv.appendChild(bgInput);
    colorsDiv.appendChild(borderInput);
    colorsDiv.appendChild(textInput);

    entry._colorState = {
      light: { bg: bgInput.value, border: borderInput.value, text: textInput.value },
      dark: { bg: colorToHex(darkColors.bg), border: colorToHex(darkColors.border), text: colorToHex(darkColors.text) },
    };

    modeSelect.addEventListener("change", function () {
      var prev = modeSelect.value === "dark" ? "light" : "dark";
      entry._colorState[prev] = { bg: bgInput.value, border: borderInput.value, text: textInput.value };
      var next = entry._colorState[modeSelect.value];
      bgInput.value = next.bg;
      borderInput.value = next.border;
      textInput.value = next.text;
    });

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

    entry.appendChild(header);
    entry.appendChild(modeRow);
    entry.appendChild(colorsDiv);

    entry._nameInput = nameInput;
    entry._bgInput = bgInput;
    entry._borderInput = borderInput;
    entry._textInput = textInput;
    entry._modeSelect = modeSelect;

    list.appendChild(entry);
  }

  function collectSubredditOverrides() {
    var overrides = {};
    var entries = document.querySelectorAll(".subreddit-entry");
    entries.forEach(function (entry) {
      var name = entry._nameInput.value.trim().replace(/^r\//, "");
      if (!name) return;

      var currentMode = entry._modeSelect.value;
      entry._colorState[currentMode] = {
        bg: entry._bgInput.value,
        border: entry._borderInput.value,
        text: entry._textInput.value,
      };

      overrides[name] = {
        light: entry._colorState.light,
        dark: entry._colorState.dark,
      };
    });
    return overrides;
  }

  async 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;
    });

    try {
      await window.RedditTweaks.saveSettings(settings);
    } catch (err) {
      console.error("Reddit Tweaks: failed to save settings", err);
    }
  }

  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);
    });

    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();
})();