CHANGELOG.md

@@ -2,14 +2,6 @@
 
 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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.113.1",
+  "version": "1.113.0",
   "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": {

src/components/SettingsSidebar.tsx

@@ -147,25 +147,8 @@ 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. Entries with
+// map in profile.customCssVars and applied on top of containerStyle in WeeklyView.
-// a `profileKey` instead read/write that scalar profile field directly (same fields the
+const CSS_VARIABLE_GROUPS: { title: string; vars: { name: string; label: string; default: string }[] }[] = [
-// "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: [
@@ -273,7 +256,6 @@ 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 };
@@ -282,12 +264,6 @@ 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", {});
@@ -342,30 +318,12 @@ function CssVariablesEditor({
                         {group.title}
                     </div>
                     <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px 12px" }}>
-                        {group.vars.map((v) => {
+                        {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" }}
+                                style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }}
                             >
-                                    <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",
@@ -377,9 +335,22 @@ function CssVariablesEditor({
                                 >
                                     {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>
-                            );
+                        ))}
-                        })}
                     </div>
                 </div>
             ))}