refactor: decompose CSS, unify dark mode, extract shared modules

Structural cleanup based on thermo-nuclear code quality review:
- Extract shared color-picker.css and color-popover.css from badges.css (611→85 lines)
- Extract shared lib/presets.js for preset CRUD used by popup and popover
- Unify dark mode to single applyDarkModeClass on <html>, removing 4 scattered functions
- Fix stale closure in startPostObserver, data-driven reload key check
- Remove dead exports, getHelpers wrapper, duplicated colorToHex
- Replace DOM expando properties with state array in popup.js

Net: -318 lines of duplication, no file over 401 lines.
Co-authored-by: Cursor <cursoragent@cursor.com>

content/tweaks/badges.js

@@ -6,12 +6,6 @@
   function applyColorsToContainer(container, settings, subredditName) {
     const prefix = window.RedditTweaks.getColorPrefix(settings);
 
-    if (window.RedditTweaks.isDarkMode(settings)) {
-      container.classList.add("rt-dark");
-    } else {
-      container.classList.remove("rt-dark");
-    }
-
     const entry = subredditName && settings.subredditColors[subredditName];
     const overrides = entry && entry[prefix];
 
@@ -98,10 +92,6 @@
       const subredditName = container.getAttribute("data-rt-subreddit");
       applyColorsToContainer(container, settings, subredditName);
     });
-
-    if (window.RedditTweaks.colorPopover && window.RedditTweaks.colorPopover.refreshTheme) {
-      window.RedditTweaks.colorPopover.refreshTheme(settings);
-    }
   }
 
   function apply(settings) {
@@ -113,8 +103,6 @@
   window.RedditTweaks.badgeTweak = {
     apply: apply,
     updateColors: updateColors,
-    isDarkMode: window.RedditTweaks.isDarkMode,
-    getColorPrefix: window.RedditTweaks.getColorPrefix,
     processNewPosts: processPosts,
   };
 })();

content/tweaks/cards.js

@@ -19,14 +19,6 @@
     }
   }
 
-  function applyDarkMode(settings) {
-    if (window.RedditTweaks.isDarkMode(settings)) {
-      document.documentElement.classList.add("rt-dark");
-    } else {
-      document.documentElement.classList.remove("rt-dark");
-    }
-  }
-
   function applyBackground(settings) {
     if (settings.cardBackground === "shadcn") {
       document.documentElement.classList.add("rt-card-bg-shadcn");
@@ -68,7 +60,6 @@
 
   function apply(settings) {
     document.documentElement.classList.add("rt-card-enabled");
-    applyDarkMode(settings);
     applyBackground(settings);
     applyDensity(settings);
     applyGap(settings);
@@ -77,7 +68,6 @@
   }
 
   function updateSettings(settings) {
-    applyDarkMode(settings);
     applyBackground(settings);
     applyDensity(settings);
     applyGap(settings);

content/tweaks/color-popover.js

@@ -13,22 +13,10 @@
 
   var els = {};
 
-  function getHelpers() {
-    return {
-      isDarkMode: window.RedditTweaks.isDarkMode,
-      getColorPrefix: window.RedditTweaks.getColorPrefix,
-    };
-  }
-
   function hexValid(val) {
     return /^#[0-9a-f]{6}$/i.test(val);
   }
 
-  function colorToHex(val) {
-    if (!val) return "#ffffff";
-    return val;
-  }
-
   function createPopover() {
     var el = document.createElement("div");
     el.className = "rt-color-popover";
@@ -233,7 +221,7 @@
     var props = ["bg", "border", "text"];
     for (var i = 0; i < props.length; i++) {
       var prop = props[i];
-      var val = colorToHex(colors[prop]);
+      var val = colors[prop] || "#ffffff";
       els.rows[prop].swatch.style.backgroundColor = val;
       els.rows[prop].hex.value = val;
       els.rows[prop].hex.classList.remove("rt-input-error");
@@ -250,32 +238,14 @@
   }
 
   function renderPresets(presets) {
-    els.presetList.innerHTML = "";
-    for (var i = 0; i < presets.length; i++) {
-      (function (index) {
-        var p = presets[index];
-        var badge = document.createElement("span");
-        badge.className = "rt-preset-badge";
-        badge.style.background = p.bg;
-        badge.style.borderColor = p.border;
-        badge.style.color = p.text;
-        badge.textContent = "Aa";
-        badge.title = "Click to apply";
-        badge.addEventListener("click", function () {
-          applyPreset(p);
-        });
-
-        var del = document.createElement("span");
-        del.className = "rt-preset-delete";
-        del.textContent = "\u00d7";
-        del.addEventListener("click", function (e) {
-          e.stopPropagation();
-          removePreset(index);
-        });
-        badge.appendChild(del);
-        els.presetList.appendChild(badge);
-      })(i);
-    }
+    window.RedditTweaks.presets.render(
+      els.presetList,
+      presets,
+      applyPreset,
+      function (index) {
+        window.RedditTweaks.presets.delete(index, renderPresets);
+      }
+    );
   }
 
   function applyPreset(p) {
@@ -293,27 +263,15 @@
     }
   }
 
-  async function saveAsPreset() {
-    var preset = {
-      bg: els.rows.bg.hex.value,
-      border: els.rows.border.hex.value,
-      text: els.rows.text.hex.value,
-    };
-    var settings = await window.RedditTweaks.loadSettings();
-    var presets = settings.colorPresets || [];
-    presets.push(preset);
-    settings.colorPresets = presets;
-    await window.RedditTweaks.saveSettings(settings);
-    renderPresets(presets);
-  }
-
-  async function removePreset(index) {
-    var settings = await window.RedditTweaks.loadSettings();
-    var presets = settings.colorPresets || [];
-    presets.splice(index, 1);
-    settings.colorPresets = presets;
-    await window.RedditTweaks.saveSettings(settings);
-    renderPresets(presets);
+  function saveAsPreset() {
+    window.RedditTweaks.presets.save(
+      {
+        bg: els.rows.bg.hex.value,
+        border: els.rows.border.hex.value,
+        text: els.rows.text.hex.value,
+      },
+      renderPresets
+    );
   }
 
   function positionPopover(anchorEl) {
@@ -354,15 +312,6 @@
     popoverEl.style.visibility = "";
   }
 
-  function applyDarkModeToPopover(settings) {
-    var helpers = getHelpers();
-    if (helpers.isDarkMode(settings)) {
-      popoverEl.classList.add("rt-dark");
-    } else {
-      popoverEl.classList.remove("rt-dark");
-    }
-  }
-
   function open(badgeEl, subredditName, settings) {
     if (!popoverEl) createPopover();
 
@@ -379,8 +328,7 @@
     hadOverride.light = !!(existingEntry && existingEntry.light);
     hadOverride.dark = !!(existingEntry && existingEntry.dark);
 
-    var helpers = getHelpers();
-    selectedMode = helpers.getColorPrefix(settings);
+    selectedMode = window.RedditTweaks.getColorPrefix(settings);
 
     editState.light = getColorsForMode(settings, subredditName, "light");
     editState.dark = getColorsForMode(settings, subredditName, "dark");
@@ -390,7 +338,6 @@
     els.preview.textContent = "r/" + subredditName;
 
     closePicker();
-    applyDarkModeToPopover(settings);
     loadModeIntoInputs();
     updatePreview();
     renderPresets(settings.colorPresets || []);
@@ -446,15 +393,9 @@
     updatePreview();
   }
 
-  function refreshTheme(settings) {
-    if (!popoverEl || !popoverEl.classList.contains("rt-popover-visible")) return;
-    applyDarkModeToPopover(settings);
-  }
-
   window.RedditTweaks = window.RedditTweaks || {};
   window.RedditTweaks.colorPopover = {
     open: open,
     close: close,
-    refreshTheme: refreshTheme,
   };
 })();