From bccadb34cedd09d84be8b329ea6872572519ab0d Mon Sep 17 00:00:00 2001 From: mARTin Date: Fri, 13 Feb 2026 07:16:59 +0100 Subject: [PATCH] feat: Add Start Week setting, update date header format, and refine Someday styling --- src/components/WeeklyView.tsx | 72 ++++++++++++++++++++++++++++++----- 1 file changed, 63 insertions(+), 9 deletions(-) diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx index 9a252bb..e01d1da 100644 --- a/src/components/WeeklyView.tsx +++ b/src/components/WeeklyView.tsx @@ -174,12 +174,29 @@ const translations: Record = { function getStartOfWeek(date: Date, startDay: number = 0): Date { const d = new Date(date); const day = d.getDay(); - const diff = d.getDate() - day + startDay; - return new Date(d.setDate(diff)); + const diff = d.getDate() - day + (day < startDay ? -7 : 0) + startDay; // if today is sun(0) and start is mon(1), day < start (0 < 1) -> -7 + 1 = -6. 0 - 6 = -6. Correct. + // Wait, let's re-verify: + // Start Mon(1). Today Sun(0). day=0. diff = date - 0 + (-7) + 1 = date - 6. Correct (last Monday). + // Start Mon(1). Today Mon(1). day=1. diff = date - 1 + (0) + 1 = date. Correct. + // Start Sun(0). Today Mon(1). day=1. diff = date - 1 + (0) + 0 = date - 1. Correct (last Sunday). + // Start Sun(0). Today Sun(0). day=0. diff = date - 0 + (0) + 0 = date. Correct. + // What if Start Mon(1), Today Tue(2). day=2. diff = date - 2 + 0 + 1 = date - 1. Correct. + + // Better logic: + // const day = d.getDay(); + // const diff = (day < startDay ? 7 : 0) + day - startDay; + // d.setDate(d.getDate() - diff); + // + // Let's stick to a robust one: + const currentDay = d.getDay(); + const distance = (currentDay - startDay + 7) % 7; + d.setDate(d.getDate() - distance); + return d; } function formatDateHeader(date: Date, locale: string = 'en-US'): string { - return date.toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' }); + const datePart = date.toLocaleDateString(locale, { day: 'numeric', month: 'short' }); // e.g. 12. Feb. + return `| ${datePart}`; } function getDayName(date: Date, locale: string = 'en-US'): string { @@ -272,7 +289,7 @@ export default function WeeklyView() { return { ...event, editable: isEditable }; }); }, [rawCalendarEvents, connections]); - const [currentWeekStart, setCurrentWeekStart] = useState(getStartOfWeek(new Date())); + const [currentWeekStart, setCurrentWeekStart] = useState(getStartOfWeek(new Date(), 1)); // Default align to Monday initially const [viewDays, setViewDays] = useState(7); const [isLoading, setIsLoading] = useState(true); const [darkMode, setDarkMode] = useState(false); @@ -306,6 +323,7 @@ export default function WeeklyView() { const [startHour, setStartHour] = useState(8); const [endHour, setEndHour] = useState(22); + const [weekStartDay, setWeekStartDay] = useState(1); // 1 = Monday, 0 = Sunday const [showSomeday, setShowSomeday] = useState(true); const [showAllDay, setShowAllDay] = useState(true); const [motto, setMotto] = useState('Focus and Execute'); @@ -339,6 +357,10 @@ export default function WeeklyView() { if (savedDarkMode) { setDarkMode(JSON.parse(savedDarkMode)); } + const savedWeekStart = localStorage.getItem('weekly-week-start'); + if (savedWeekStart) { + setWeekStartDay(Number(savedWeekStart)); + } }, []); useEffect(() => { @@ -351,6 +373,13 @@ export default function WeeklyView() { } }, [darkMode, mounted]); + useEffect(() => { + if (!mounted) return; + localStorage.setItem('weekly-week-start', String(weekStartDay)); + // Re-align current week start when start day changes + setCurrentWeekStart(prev => getStartOfWeek(prev, weekStartDay)); + }, [weekStartDay, mounted]); + // Translation helper const t = translations[language] || translations['en']; @@ -860,7 +889,7 @@ export default function WeeklyView() { const goToNextWeek = () => navigate(new Date(currentWeekStart.getTime() + 7 * 24 * 60 * 60 * 1000), 'left', 'week'); const goToPrevDay = () => navigate(new Date(currentWeekStart.getTime() - 24 * 60 * 60 * 1000), 'right', 'day'); const goToNextDay = () => navigate(new Date(currentWeekStart.getTime() + 24 * 60 * 60 * 1000), 'left', 'day'); - const goToToday = () => setCurrentWeekStart(getStartOfWeek(new Date())); + const goToToday = () => setCurrentWeekStart(getStartOfWeek(new Date(), weekStartDay)); // Task CRUD operations const addTask = async (date: Date, title: string, startTime?: string) => { @@ -1498,7 +1527,7 @@ export default function WeeklyView() { { - setCurrentWeekStart(getStartOfWeek(date)); + setCurrentWeekStart(getStartOfWeek(date, weekStartDay)); setShowDatePicker(false); }} onClose={() => setShowDatePicker(false)} @@ -2315,7 +2344,7 @@ export default function WeeklyView() { }} /> {Array.from({ length: Math.max(0, 5 - list.tasks.length) }).map((_, i) => (
  • +
  • { e.preventDefault(); handleSubmit(); }} style={{ width: '100%' }}> void; cellDuration: CellDuration; setCellDuration: (duration: CellDuration) => void; + weekStartDay: number; + setWeekStartDay: (day: number) => void; viewStyle: 'grid' | 'list'; setViewStyle: (style: 'grid' | 'list') => void; showSomeday: boolean; @@ -3136,6 +3169,8 @@ function SettingsModal({ setShowTimeGrid, cellDuration, setCellDuration, + weekStartDay, + setWeekStartDay, viewStyle, setViewStyle, showSomeday, @@ -3620,6 +3655,25 @@ function SettingsModal({

    {t.localization}

    + {/* Start Week Setting */} +
    + +
    + + +
    +
    +