pco-plan: edge-to-edge headers, tile colors for headers / current item / key, gradient switch

Section headers lose the bracket look (no accent bar, no rounded corners)
and span the full tile width, with text still aligned to the other rows.
A "Colors" group in the gear menu holds swatch pickers for the song key,
section headers and the current item, a switch for fading the header color
to the right (on by default), and the item-type tint. Colors apply as CSS
custom properties on the tile.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Waters Church
2026-09-10 16:31:46 -04:00
co-authored by Claude Fable 5.1
parent a71b14d755
commit d567f5459a
3 changed files with 41 additions and 28 deletions
+8 -2
View File
@@ -526,8 +526,14 @@ export default function create({ root, moduleApi }) {
function render() {
wrap.classList.toggle('is-offline', feedOffline);
wrap.classList.toggle('tint-types', Boolean(cfg().tintByType));
const keyColor = String(cfg().keyColor || '').trim();
wrap.style.setProperty('--pp-key', /^[#a-zA-Z0-9(),.%\s-]+$/.test(keyColor) ? keyColor : '#4ea1ff');
wrap.classList.toggle('header-gradient', cfg().headerGradient !== false);
const color = (value, fallback) => {
const s = String(value || '').trim();
return /^[#a-zA-Z0-9(),.%\s-]+$/.test(s) && s ? s : fallback;
};
wrap.style.setProperty('--pp-key', color(cfg().keyColor, '#4ea1ff'));
wrap.style.setProperty('--pp-header', color(cfg().headerColor, '#2ee59a'));
wrap.style.setProperty('--pp-current', color(cfg().currentColor, '#2ee59a'));
renderStatus();
if (!state) {
headEl.hidden = true;