From 5510197cf4fe14a9d6313148ebcc342124357481 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Wed, 8 Jul 2026 20:51:01 +0200
Subject: [PATCH] fix: add element/weekend color controls to CSS Variables
 panel, color-first layout

Today Highlight, Past Days, Saturday and Sunday now also appear as their
own groups in the CSS Variables panel, bound to the same profile fields
as the existing Element/Weekend Colors controls so both stay in sync.
Every row now shows the color swatch before its label.

v1.113.1
---
 CHANGELOG.md                       |  8 +++
 package.json                       |  2 +-
 src/components/SettingsSidebar.tsx | 97 +++++++++++++++++++-----------
 3 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c91f5bd..13ac3d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to this project are documented in this file.
 
+## [1.113.1] - 2026-07-08
+
+### Changed
+- CSS Variables panel: added the existing "Today Highlight", "Past Days", "Saturday" and
+  "Sunday" color controls as their own groups (bound to the same profile fields as the
+  standalone Element/Weekend Colors sections, so both stay in sync).
+- CSS Variables panel: every row now shows the color swatch before its label.
+
 ## [1.113.0] - 2026-07-08
 
 ### Added
diff --git a/package.json b/package.json
index 461dded..99b69bc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.113.0",
+  "version": "1.113.1",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {
diff --git a/src/components/SettingsSidebar.tsx b/src/components/SettingsSidebar.tsx
index 6650794..5ebc4a2 100644
--- a/src/components/SettingsSidebar.tsx
+++ b/src/components/SettingsSidebar.tsx
@@ -147,8 +147,25 @@ function ExtraTimezonesEditor({
 
 // All customizable color custom-properties defined in globals.css :root, grouped for the
 // "Styling" tab's CSS Variables editor. Overrides are stored as a flat { "--var-name": "#hex" }
-// map in profile.customCssVars and applied on top of containerStyle in WeeklyView.
-const CSS_VARIABLE_GROUPS: { title: string; vars: { name: string; label: string; default: string }[] }[] = [
+// map in profile.customCssVars and applied on top of containerStyle in WeeklyView. Entries with
+// a `profileKey` instead read/write that scalar profile field directly (same fields the
+// "Element Colors" / "Weekend Highlight Colors" controls elsewhere in this tab use), so both
+// controls for the same setting always stay in sync.
+const CSS_VARIABLE_GROUPS: { title: string; vars: { name: string; label: string; default: string; profileKey?: string }[] }[] = [
+    {
+        title: "Element Colors",
+        vars: [
+            { name: "todayHighlightColor", label: "Today Highlight", default: "#f0fafa", profileKey: "todayHighlightColor" },
+            { name: "pastDayColor", label: "Past Days", default: "#a6a6a7", profileKey: "pastDayColor" },
+        ],
+    },
+    {
+        title: "Weekend Highlight Colors",
+        vars: [
+            { name: "weekendColorSat", label: "Saturday", default: "#666666", profileKey: "weekendColorSat" },
+            { name: "weekendColorSun", label: "Sunday", default: "#dc2626", profileKey: "weekendColorSun" },
+        ],
+    },
     {
         title: "Base Colors",
         vars: [
@@ -256,6 +273,7 @@ function CssVariablesEditor({
     const de = profile.language === "de";
     const vars: Record<string, string> = profile.customCssVars || {};
     const debounceTimer = useRef<NodeJS.Timeout | null>(null);
+    const fieldDebounceTimers = useRef<Record<string, NodeJS.Timeout>>({});
 
     const setVar = (name: string, value: string) => {
         const next = { ...(profile.customCssVars || {}), [name]: value };
@@ -264,6 +282,12 @@ function CssVariablesEditor({
         debounceTimer.current = setTimeout(() => saveSetting("customCssVars", next), 500);
     };
 
+    const setProfileField = (key: string, value: string) => {
+        setProfile((p: any) => ({ ...p, [key]: value }));
+        if (fieldDebounceTimers.current[key]) clearTimeout(fieldDebounceTimers.current[key]);
+        fieldDebounceTimers.current[key] = setTimeout(() => saveSetting(key, value), 500);
+    };
+
     const reset = () => {
         setProfile((p: any) => ({ ...p, customCssVars: {} }));
         saveSetting("customCssVars", {});
@@ -318,39 +342,44 @@ function CssVariablesEditor({
                         {group.title}
                     </div>
                     <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px 12px" }}>
-                        {group.vars.map((v) => (
-                            <div
-                                key={v.name}
-                                title={v.name}
-                                style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }}
-                            >
-                                <span
-                                    style={{
-                                        fontSize: "0.72rem",
-                                        color: "var(--weekly-settings-label)",
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                    }}
+                        {group.vars.map((v) => {
+                            const value = v.profileKey ? (profile[v.profileKey] || v.default) : (vars[v.name] || v.default);
+                            const onChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+                                v.profileKey ? setProfileField(v.profileKey, e.target.value) : setVar(v.name, e.target.value);
+                            return (
+                                <div
+                                    key={v.name}
+                                    title={v.name}
+                                    style={{ display: "flex", alignItems: "center", gap: "8px" }}
                                 >
-                                    {v.label}
-                                </span>
-                                <input
-                                    type="color"
-                                    value={vars[v.name] || v.default}
-                                    onChange={(e) => setVar(v.name, e.target.value)}
-                                    style={{
-                                        width: "32px",
-                                        height: "22px",
-                                        cursor: "pointer",
-                                        border: "1px solid var(--weekly-settings-input-border)",
-                                        borderRadius: "4px",
-                                        background: "transparent",
-                                        flexShrink: 0,
-                                    }}
-                                />
-                            </div>
-                        ))}
+                                    <input
+                                        type="color"
+                                        value={value}
+                                        onChange={onChange}
+                                        style={{
+                                            width: "32px",
+                                            height: "22px",
+                                            cursor: "pointer",
+                                            border: "1px solid var(--weekly-settings-input-border)",
+                                            borderRadius: "4px",
+                                            background: "transparent",
+                                            flexShrink: 0,
+                                        }}
+                                    />
+                                    <span
+                                        style={{
+                                            fontSize: "0.72rem",
+                                            color: "var(--weekly-settings-label)",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap",
+                                        }}
+                                    >
+                                        {v.label}
+                                    </span>
+                                </div>
+                            );
+                        })}
                     </div>
                 </div>
             ))}