From 85982f06a5f86df282dbc643fbb0120176fbdc16 Mon Sep 17 00:00:00 2001 From: mARTin Date: Tue, 17 Mar 2026 10:41:12 +0100 Subject: [PATCH] feat: fix iPhone Today button, add all settings to sidebar, fix layout - Fix goToToday landing on yesterday in single-day view (skip startDayOffset) - Add quick actions panel to settings sidebar for all screen sizes (not just mobile) - Add view style switcher, visible hours, search, and new project to sidebar - Change weekly-container to height:100vh for proper flex layout - Someday/all-day sections use flex-shrink:0 for stable resize behavior - Collapse uses height:30px!important to override inline styles v1.40.0 Co-Authored-By: Claude Opus 4.6 --- package.json | 2 +- src/app/globals.css | 12 +++- src/components/WeeklyView.tsx | 111 +++++++++++++++++++++++++++++++--- 3 files changed, 112 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 3a75bc8..7ca9ec1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "my-weekly-todo-list", - "version": "1.39.4", + "version": "1.40.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": { diff --git a/src/app/globals.css b/src/app/globals.css index c531b77..d08370a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -478,11 +478,12 @@ h3 { /* Weekly Main Container */ .weekly-container { - min-height: 100vh; + height: 100vh; background: var(--weekly-bg); font-family: var(--weekly-font); display: flex; flex-direction: column; + overflow: hidden; } /* Weekly Header */ @@ -497,6 +498,7 @@ h3 { align-items: center; justify-content: space-between; position: relative; + flex-shrink: 0; } .weekly-logo { flex-shrink: 0; @@ -1179,11 +1181,11 @@ h3 { /* Someday Section */ .weekly-someday { - background-color: #f9f9f9; + background-color: #f9f9f9; width: 100%; padding: 0 1rem; - transition: max-height 0.3s ease; position: relative; + flex-shrink: 0; } .weekly-container.dark-mode .weekly-someday { @@ -1191,6 +1193,8 @@ h3 { } .weekly-someday.collapsed { + height: 30px !important; + min-height: 30px; max-height: 30px; overflow: hidden; } @@ -2652,6 +2656,7 @@ h3 { border-top: 1px solid var(--weekly-border); padding: 2px 0; position: relative; + flex-shrink: 0; } /* Resize handle for draggable section borders */ @@ -2665,6 +2670,7 @@ h3 { touch-action: none; position: relative; z-index: 10; + flex-shrink: 0; border-top: 1px solid var(--weekly-border, #e5e7eb); border-bottom: 1px solid var(--weekly-border, #e5e7eb); } diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx index c24b0fa..0d403a8 100644 --- a/src/components/WeeklyView.tsx +++ b/src/components/WeeklyView.tsx @@ -1641,6 +1641,7 @@ export default function WeeklyView() { const startResize = useCallback((e: React.MouseEvent | React.TouchEvent, target: 'someday' | 'allday') => { e.preventDefault(); + e.stopPropagation(); const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY; const section = target === 'someday' ? somedaySectionRef.current : (document.querySelector('.all-day-events-section') as HTMLElement); if (!section) return; @@ -3589,7 +3590,10 @@ export default function WeeklyView() { const goToToday = () => { const d = new Date(); d.setHours(0, 0, 0, 0); - d.setDate(d.getDate() + (profile?.startDayOffset || 0)); + // Only apply startDayOffset for multi-day views; on single-day view, go directly to today + if (viewDays > 1) { + d.setDate(d.getDate() + (profile?.startDayOffset || 0)); + } setCurrentWeekStart(d); }; @@ -6395,9 +6399,9 @@ export default function WeeklyView() { })()} {/* Main Grid with Time Column */} - {viewStyle !== "kanban" &&
+ {viewStyle !== "kanban" &&
{/* Time Column */} {showTimeGrid && ( @@ -8279,7 +8283,7 @@ export default function WeeklyView() { profile={profile} setProfile={setProfile} isMobile={isMobile} - mobileActions={isMobile ? { + mobileActions={{ goToPrevWeek, goToPrevDay, goToToday, @@ -8290,10 +8294,12 @@ export default function WeeklyView() { const now = new Date(); setCalendarEventModal({ isOpen: true, event: undefined, initialDate: now, initialStartTime: `${String(now.getHours()).padStart(2, "0")}:00` }); }, + onAddProject: () => { setShowSettings(true); setActiveTab("general"); }, onRecurringTasks: () => setIsRecurringTasksOpen(true), onToggleNextTask: () => { const newVal = !showNextTask; setShowNextTask(newVal); saveSetting("showNextTask", newVal); }, onFocusMode: () => setShowFocusMode(true), onToggleDarkMode: () => setDarkMode(!darkMode), + onSearch: () => setIsSearchOpen(true), onUndo: handleUndo, onRedo: handleRedo, onRefresh: () => { fetchCalendarEvents(true); fetchTasks(); }, @@ -8306,7 +8312,13 @@ export default function WeeklyView() { showTimeGrid, cellDuration, onCellDurationChange: (d: CellDuration) => { setCellDuration(d); saveSetting("cellDuration", d); }, - } : undefined} + viewStyle, + onViewStyleChange: (s: string) => { setViewStyle(s as any); saveSetting("viewStyle", s); }, + startHour, + endHour, + onStartHourChange: (h: number) => { setStartHour(h); saveSetting("startHour", h); }, + onEndHourChange: (h: number) => { setEndHour(h); saveSetting("endHour", h); }, + }} /> ) } @@ -9583,7 +9595,7 @@ interface SettingsSidebarProps { onProjectsChanged: () => void; kanbanStages: KanbanStage[]; saveKanbanStages: (stages: KanbanStage[]) => Promise; - // Mobile quick actions + // Quick actions isMobile?: boolean; mobileActions?: { goToPrevWeek: () => void; @@ -9593,10 +9605,12 @@ interface SettingsSidebarProps { goToNextWeek: () => void; onJumpToDate: () => void; onAddCalendarEvent: () => void; + onAddProject: () => void; onRecurringTasks: () => void; onToggleNextTask: () => void; onFocusMode: () => void; onToggleDarkMode: () => void; + onSearch: () => void; onUndo: () => void; onRedo: () => void; onRefresh: () => void; @@ -9609,6 +9623,12 @@ interface SettingsSidebarProps { showTimeGrid: boolean; cellDuration: CellDuration; onCellDurationChange: (d: CellDuration) => void; + viewStyle: string; + onViewStyleChange: (style: string) => void; + startHour: number; + endHour: number; + onStartHourChange: (h: number) => void; + onEndHourChange: (h: number) => void; }; } // Notes Sidebar Component @@ -10294,8 +10314,8 @@ function SettingsSidebar({ - {/* Mobile Quick Actions Panel */} - {isMobileSidebar && mobileActions && ( + {/* Quick Actions Panel */} + {mobileActions && (
+ + @@ -10347,8 +10373,36 @@ function SettingsSidebar({
- {/* View Controls */} + {/* View Style */}
+
+ {t.view || "View"} +
+ {[ + { key: "simple", icon: , label: "Simple" }, + { key: "calendar", icon: , label: "Calendar" }, + { key: "list", icon: , label: "List" }, + { key: "kanban", icon: , label: "Kanban" }, + ].map((v) => ( + + ))} +
+
+ + {/* Days */}
{t.days || "Days"}
@@ -10368,6 +10422,8 @@ function SettingsSidebar({ ))}
+ + {/* Slot Duration */} {mobileActions.showTimeGrid && (
{t.slot || "Slot"} @@ -10389,6 +10445,43 @@ function SettingsSidebar({
)} + + {/* Visible Hours */} + {mobileActions.showTimeGrid && ( +
+ + + +
+ mobileActions.onStartHourChange(Math.max(0, Math.min(23, parseInt(e.target.value) || 0)))} + style={{ + width: "48px", padding: "4px 6px", borderRadius: "6px", border: "1px solid var(--weekly-border, #e5e7eb)", + background: "var(--weekly-settings-toggle-bg, #f3f4f6)", color: "var(--weekly-text, #333)", + fontSize: "0.8rem", textAlign: "center", outline: "none", + }} + /> + – + mobileActions.onEndHourChange(Math.max(1, Math.min(24, parseInt(e.target.value) || 24)))} + style={{ + width: "48px", padding: "4px 6px", borderRadius: "6px", border: "1px solid var(--weekly-border, #e5e7eb)", + background: "var(--weekly-settings-toggle-bg, #f3f4f6)", color: "var(--weekly-text, #333)", + fontSize: "0.8rem", textAlign: "center", outline: "none", + }} + /> + h +
+
+ )}
{/* Utility Row */}