feat: add color presets + fix badge hover effect

- Add global color presets: save/apply/delete sets of {bg, border, text}
  colors as reusable presets, shown as mini badges in their own colors.
- Popover: preset badges under preview with + to save, click to apply,
  × on hover to delete.
- Popup: dedicated Color Presets section with same functionality,
  applying to light subreddit badge colors.
- Storage: colorPresets array added to settings defaults.
- Fix badge hover: change brightness(0.9) to brightness(1.1) so hover
  brightens (activates) instead of dimming.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-08-26 18:00:54 -04:00
parent fb0c03d46a
commit 48db2fc70e
9 changed files with 2053 additions and 23 deletions

View File

@@ -220,6 +220,63 @@
return overrides;
}
function renderPopupPresets(presets) {
var list = document.getElementById("presetList");
list.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 to light subreddit colors";
badge.addEventListener("click", function () {
setColorValue(document.getElementById("light.subredditBgColor"), p.bg);
setColorValue(document.getElementById("light.subredditBorderColor"), p.border);
setColorValue(document.getElementById("light.subredditTextColor"), p.text);
closePicker();
saveFromControls();
});
var del = document.createElement("span");
del.className = "rt-preset-delete";
del.textContent = "\u00d7";
del.addEventListener("click", function (e) {
e.stopPropagation();
deletePopupPreset(index);
});
badge.appendChild(del);
list.appendChild(badge);
})(i);
}
}
async function addPopupPreset() {
var preset = {
bg: getColorValue(document.getElementById("light.subredditBgColor")),
border: getColorValue(document.getElementById("light.subredditBorderColor")),
text: getColorValue(document.getElementById("light.subredditTextColor")),
};
var settings = await window.RedditTweaks.loadSettings();
var presets = settings.colorPresets || [];
presets.push(preset);
settings.colorPresets = presets;
await window.RedditTweaks.saveSettings(settings);
renderPopupPresets(presets);
}
async function deletePopupPreset(index) {
var settings = await window.RedditTweaks.loadSettings();
var presets = settings.colorPresets || [];
presets.splice(index, 1);
settings.colorPresets = presets;
await window.RedditTweaks.saveSettings(settings);
renderPopupPresets(presets);
}
async function saveFromControls() {
var settings = {
enabled: document.getElementById("enabled").checked,
@@ -255,6 +312,9 @@
}
});
renderPopupPresets(settings.colorPresets || []);
document.getElementById("addPreset").addEventListener("click", addPopupPreset);
document.getElementById("addSubreddit").addEventListener("click", function () {
closePicker();
addSubredditEntry("", {});