cottongin/reddit-tweaks-ffe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: popup per-subreddit overrides with mode-aware light/dark toggle

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cottongin
2026-08-26 16:07:07 -04:00
parent 4385cc1c28
commit 565f039bc5
3 changed files with 132 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
popup/popup.css
View File

@@ -157,3 +157,46 @@ fieldset input[type="text"] {
.subreddit-entry .btn-remove:hover {
color: #d9534f;
}
.section-hint {
font-size: 11px;
color: #888;
margin-bottom: 8px;
}
.subreddit-entry-header {
display: flex;
gap: 4px;
align-items: center;
margin-bottom: 4px;
}
.subreddit-entry-header input[type="text"] {
flex: 1;
min-width: 0;
padding: 2px 6px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 12px;
font-family: monospace;
}
.subreddit-entry-mode {
display: flex;
gap: 4px;
align-items: center;
margin-bottom: 4px;
}
.subreddit-entry-mode select {
width: auto;
padding: 2px 6px;
font-size: 11px;
margin-top: 0;
}
.subreddit-entry-colors {
display: flex;
gap: 4px;
align-items: center;
}

1
popup/popup.html
View File

@@ -60,6 +60,7 @@
<div class="section">
<h2>Per-Subreddit Overrides</h2>
<p class="section-hint">Set custom subreddit badge colors per mode.</p>
<div id="subredditList"></div>
<button id="addSubreddit" class="btn-secondary">+ Add Subreddit</button>
</div>

128
popup/popup.js
View File

@@ -34,72 +34,120 @@
}
function renderSubredditOverrides(overrides) {
const list = document.getElementById("subredditList");
var list = document.getElementById("subredditList");
list.innerHTML = "";
Object.entries(overrides).forEach(function ([name, colors]) {
addSubredditEntry(name, colors);
Object.entries(overrides).forEach(function (pair) {
addSubredditEntry(pair[0], pair[1]);
});
}
function addSubredditEntry(name, colors) {
const list = document.getElementById("subredditList");
const entry = document.createElement("div");
function addSubredditEntry(name, modeColors) {
var list = document.getElementById("subredditList");
var entry = document.createElement("div");
entry.className = "subreddit-entry";
const nameInput = document.createElement("input");
var header = document.createElement("div");
header.className = "subreddit-entry-header";
var 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");
var removeBtn = document.createElement("button");
removeBtn.className = "btn-remove";
removeBtn.textContent = "×";
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(nameInput);
entry.appendChild(bgInput);
entry.appendChild(borderInput);
entry.appendChild(textInput);
entry.appendChild(removeBtn);
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() {
const overrides = {};
const entries = document.querySelectorAll(".subreddit-entry");
var overrides = {};
var 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,
};
}
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;
}