chore: remove stray file with invalid filename

v1.113.1

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

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": {

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.
+// map in profile.customCssVars and applied on top of containerStyle in WeeklyView. Entries with
-const CSS_VARIABLE_GROUPS: { title: string; vars: { name: string; label: string; default: string }[] }[] = [
+// 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,12 +342,30 @@ 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", justifyContent: "space-between", gap: "8px" }}
+                                    style={{ display: "flex", alignItems: "center", 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",
@@ -335,22 +377,9 @@ 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>
             ))}