feat: settings popup with color pickers, dark mode, and subreddit overrides

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-26 15:02:46 -04:00
parent 6cedae7a2c
commit 46d008d339
3 changed files with 424 additions and 0 deletions
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -0,0 +1,191 @@
+(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();
+})();