feat: integrate tabbed color picker into inline popover

Co-authored-by: Cursor <cursoragent@cursor.com>

content/styles/badges.css

@@ -182,13 +182,14 @@ html.rt-enabled .thing.link .flat-list li:has(> .comments) {
   gap: 4px;
 }
 
-.rt-popover-row input[type="color"] {
+.rt-popover-row .rt-color-swatch {
   width: 28px;
   height: 20px;
   border: 1px solid #ccc;
   border-radius: 3px;
-  padding: 1px;
   cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .rt-popover-row input[type="text"] {
@@ -298,7 +299,7 @@ html.rt-enabled .thing.link .flat-list li:has(> .comments) {
   color: #e0e0e0;
 }
 
-.rt-color-popover.rt-dark .rt-popover-row input[type="color"] {
+.rt-color-popover.rt-dark .rt-popover-row .rt-color-swatch {
   border-color: #555;
 }
 

content/tweaks/color-popover.js

@@ -8,6 +8,8 @@
   var selectedMode = "light";
   var dirtyModes = { light: false, dark: false };
   var hadOverride = { light: false, dark: false };
+  var picker = null;
+  var activeProp = null;
 
   var els = {};
 
@@ -46,21 +48,21 @@
       '  <div class="rt-popover-row" data-prop="bg">',
       '    <span class="rt-popover-row-label">Background</span>',
       '    <div class="rt-popover-row-inputs">',
-      '      <input type="color" class="rt-color-swatch">',
+      '      <div class="rt-color-swatch"></div>',
       '      <input type="text" class="rt-color-hex" maxlength="7">',
       "    </div>",
       "  </div>",
       '  <div class="rt-popover-row" data-prop="border">',
       '    <span class="rt-popover-row-label">Border</span>',
       '    <div class="rt-popover-row-inputs">',
-      '      <input type="color" class="rt-color-swatch">',
+      '      <div class="rt-color-swatch"></div>',
       '      <input type="text" class="rt-color-hex" maxlength="7">',
       "    </div>",
       "  </div>",
       '  <div class="rt-popover-row" data-prop="text">',
       '    <span class="rt-popover-row-label">Text</span>',
       '    <div class="rt-popover-row-inputs">',
-      '      <input type="color" class="rt-color-swatch">',
+      '      <div class="rt-color-swatch"></div>',
       '      <input type="text" class="rt-color-hex" maxlength="7">',
       "    </div>",
       "  </div>",
@@ -99,6 +101,10 @@
       };
     }
 
+    picker = window.RedditTweaks.colorPicker.create();
+    var previewSection = el.querySelector(".rt-popover-preview");
+    el.insertBefore(picker.el, previewSection);
+
     els.closeBtn.addEventListener("click", close);
     els.cancelBtn.addEventListener("click", close);
     els.saveBtn.addEventListener("click", save);
@@ -108,6 +114,7 @@
       markModeDirty(selectedMode);
       storeCurrentEdits();
       selectedMode = els.modeSelect.value;
+      closePicker();
       loadModeIntoInputs();
       updatePreview();
     });
@@ -116,17 +123,17 @@
     for (var p = 0; p < props.length; p++) {
       (function (prop) {
         var row = els.rows[prop];
-        row.swatch.addEventListener("input", function () {
-          markModeDirty(selectedMode);
-          row.hex.value = row.swatch.value;
-          row.hex.classList.remove("rt-input-error");
-          updatePreview();
+        row.swatch.addEventListener("click", function () {
+          onSwatchClick(prop);
         });
         row.hex.addEventListener("input", function () {
           markModeDirty(selectedMode);
           if (hexValid(row.hex.value)) {
-            row.swatch.value = row.hex.value;
+            row.swatch.style.backgroundColor = row.hex.value;
             row.hex.classList.remove("rt-input-error");
+            if (picker.isOpen() && activeProp === prop) {
+              picker.setColor(row.hex.value);
+            }
             updatePreview();
           } else {
             row.hex.classList.add("rt-input-error");
@@ -139,13 +146,31 @@
     document.addEventListener("keydown", onDocumentKeyDown, true);
   }
 
+  function onSwatchClick(prop) {
+    if (picker.isOpen() && activeProp === prop) {
+      closePicker();
+      return;
+    }
+    closePicker();
+    activeProp = prop;
+    var row = els.rows[prop];
+    picker.open(row.hex.value, function (hex) {
+      markModeDirty(selectedMode);
+      row.swatch.style.backgroundColor = hex;
+      row.hex.value = hex;
+      row.hex.classList.remove("rt-input-error");
+      updatePreview();
+    });
+  }
+
+  function closePicker() {
+    if (picker && picker.isOpen()) picker.close();
+    activeProp = null;
+  }
+
   function onDocumentMouseDown(e) {
     if (!popoverEl || !popoverEl.classList.contains("rt-popover-visible")) return;
     if (popoverEl.contains(e.target)) return;
-
-    var active = document.activeElement;
-    if (active && active.type === "color" && popoverEl.contains(active)) return;
-
     close();
   }
 
@@ -182,9 +207,9 @@
 
   function storeCurrentEdits() {
     editState[selectedMode] = {
-      bg: els.rows.bg.swatch.value,
-      border: els.rows.border.swatch.value,
-      text: els.rows.text.swatch.value,
+      bg: els.rows.bg.hex.value,
+      border: els.rows.border.hex.value,
+      text: els.rows.text.hex.value,
     };
   }
 
@@ -194,16 +219,16 @@
     for (var i = 0; i < props.length; i++) {
       var prop = props[i];
       var val = colorToHex(colors[prop]);
-      els.rows[prop].swatch.value = val;
+      els.rows[prop].swatch.style.backgroundColor = val;
       els.rows[prop].hex.value = val;
       els.rows[prop].hex.classList.remove("rt-input-error");
     }
   }
 
   function updatePreview() {
-    var bg = els.rows.bg.swatch.value;
-    var border = els.rows.border.swatch.value;
-    var text = els.rows.text.swatch.value;
+    var bg = els.rows.bg.hex.value;
+    var border = els.rows.border.hex.value;
+    var text = els.rows.text.hex.value;
     els.preview.style.background = bg;
     els.preview.style.borderColor = border;
     els.preview.style.color = text;
@@ -268,6 +293,7 @@
     els.modeSelect.value = selectedMode;
     els.preview.textContent = "r/" + subredditName;
 
+    closePicker();
     applyDarkModeToPopover(settings);
     loadModeIntoInputs();
     updatePreview();
@@ -276,6 +302,7 @@
 
   function close() {
     if (!popoverEl) return;
+    closePicker();
     popoverEl.classList.remove("rt-popover-visible");
     currentSubreddit = null;
     currentAnchor = null;
@@ -317,6 +344,7 @@
     resetTracking();
     editState.light = getDefaultsForMode(settings, "light");
     editState.dark = getDefaultsForMode(settings, "dark");
+    closePicker();
     loadModeIntoInputs();
     updatePreview();
   }