fix: save font size per-device in cookie instead of DB

Font size (S/M/L) is now stored in the browser cookie
'setting_fontSize' alongside the other per-device settings
(viewDays, cellDuration, startHour, endHour).

This means mobile and desktop can each keep their own preferred font
size — changing it on your phone no longer overwrites the setting on
your desktop monitor and vice versa.

The cookie is read immediately at component init (before the DB load),
so there is no flash of the wrong size on page load. The DB value is
still written so that the setting has a reasonable default on new
devices before a local preference is set.

v1.93.1
This commit is contained in:
mARTin 2026-04-07 09:58:46 +02:00
parent 9485e78dab
commit 36744d0e09
2 changed files with 8 additions and 3 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.93.0", "version": "1.93.1",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

View File

@ -110,7 +110,7 @@ const RichTextEditor = dynamic(() => import("./RichTextEditor"), { ssr: false })
const PriorityView = dynamic(() => import("./PriorityView"), { ssr: false }); const PriorityView = dynamic(() => import("./PriorityView"), { ssr: false });
// Cookie helpers for per-device settings // Cookie helpers for per-device settings
const DEVICE_SETTINGS_KEYS = ["viewDays", "cellDuration", "startHour", "endHour"]; const DEVICE_SETTINGS_KEYS = ["viewDays", "cellDuration", "startHour", "endHour", "fontSize"];
function getCookie(name: string): string | null { function getCookie(name: string): string | null {
if (typeof document === "undefined") return null; if (typeof document === "undefined") return null;
@ -1155,7 +1155,10 @@ export default function WeeklyView() {
const [showProjectsSidebar, setShowProjectsSidebar] = useState(false); const [showProjectsSidebar, setShowProjectsSidebar] = useState(false);
const [focusTimerDuration, setFocusTimerDuration] = useState(25); const [focusTimerDuration, setFocusTimerDuration] = useState(25);
const [fontSize, setFontSize] = useState<"S" | "M" | "L">("M"); const [fontSize, setFontSize] = useState<"S" | "M" | "L">(() => {
const c = getCookie("setting_fontSize");
return (c as "S" | "M" | "L") || "M";
});
const [headlineFont, setHeadlineFont] = useState("Inter"); const [headlineFont, setHeadlineFont] = useState("Inter");
const [headlineFontSize, setHeadlineFontSize] = useState("1.25rem"); const [headlineFontSize, setHeadlineFontSize] = useState("1.25rem");
const [headlineFontWeight, setHeadlineFontWeight] = useState("900"); const [headlineFontWeight, setHeadlineFontWeight] = useState("900");
@ -2346,6 +2349,8 @@ export default function WeeklyView() {
if (cookieStartHour) setStartHour(Number(cookieStartHour)); if (cookieStartHour) setStartHour(Number(cookieStartHour));
const cookieEndHour = getCookie("setting_endHour"); const cookieEndHour = getCookie("setting_endHour");
if (cookieEndHour) setEndHour(Number(cookieEndHour)); if (cookieEndHour) setEndHour(Number(cookieEndHour));
const cookieFontSize = getCookie("setting_fontSize");
if (cookieFontSize) setFontSize(cookieFontSize as "S" | "M" | "L");
setShowNextTask(data.user.showNextTask || false); setShowNextTask(data.user.showNextTask || false);
setCalendarEditMode(data.user.calendarEditMode || false); setCalendarEditMode(data.user.calendarEditMode || false);
if (data.user.fontSize) if (data.user.fontSize)