fix(scheduled-tasks): address review — midnight rollover, stub feedback, smooth Today scroll

emir-karabeg · emir-karabeg · commit 2e52a5da455e · 2026-06-11T14:15:07.000-07:00
- useCalendar: today was frozen at mount, so after midnight the isToday
  column highlight and the current-time indicator stayed on the previous
  day. today is now state refreshed by a sleep-resilient minute poll
  that only re-renders when the calendar day actually changes
- CreateTaskModal: the stub submit closed silently, reading as false
  success; it now shows an info toast that the task was not created
- ScheduleCalendar: Today presses scroll smoothly as an orientation
  cue; mount and scope switches keep instant positioning
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-task-modal/create-task-modal.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-task-modal/create-task-modal.tsx
@@ -12,6 +12,7 @@ import {
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  toast,
 } from '@/components/emcn'
 import type { CalendarSlot } from '@/app/workspace/[workspaceId]/scheduled-tasks/hooks/use-calendar'
 
@@ -68,8 +69,12 @@ export function CreateTaskModal({ open, onOpenChange, slot, onSubmit }: CreateTa
       launchTime,
       timezone: DEFAULT_TIMEZONE,
     }
-    if (onSubmit) onSubmit(draft)
-    else logger.info('Scheduled task draft captured (not persisted this phase)', draft)
+    if (onSubmit) {
+      onSubmit(draft)
+    } else {
+      logger.info('Scheduled task draft captured (not persisted this phase)', draft)
+      toast.info('Scheduling is not available yet — this task was not created')
+    }
     close()
   }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/schedule-calendar/schedule-calendar.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/schedule-calendar/schedule-calendar.tsx
@@ -37,7 +37,9 @@ interface ScheduleCalendarProps {
  *
  * Scroll behavior: entering week/day scope, and "Today" presses (signaled via an
  * internal `scrollSignal`), center the current time in the viewport; month scope
- * resets to the top. Plain prev/next navigation never re-centers. Centering is
+ * resets to the top. Plain prev/next navigation never re-centers. Today presses
+ * scroll smoothly as an orientation cue; mount and scope switches position
+ * instantly (animating initial placement would read as a glitch). Centering is
  * computed from the time-grid header height plus {@link timeToOffset} rather than
  * the now-line element, so it works even on first paint before the line mounts.
  *
@@ -57,6 +59,7 @@ export function ScheduleCalendar({
   eventsByHour,
 }: ScheduleCalendarProps) {
   const scrollRef = useRef<HTMLDivElement>(null)
+  const lastScrollSignalRef = useRef(0)
   const [scrollSignal, setScrollSignal] = useState(0)
 
   const grid = useMemo(() => buildCalendarGrid(scope, anchor, today), [scope, anchor, today])
@@ -70,14 +73,17 @@ export function ScheduleCalendar({
   useEffect(() => {
     const region = scrollRef.current
     if (!region) return
+    const behavior: ScrollBehavior =
+      scrollSignal !== lastScrollSignalRef.current ? 'smooth' : 'auto'
+    lastScrollSignalRef.current = scrollSignal
     if (scope === 'month') {
-      region.scrollTo({ top: 0 })
+      region.scrollTo({ top: 0, behavior })
       return
     }
     const header = region.querySelector('[data-time-grid-header]')
     const headerHeight = header ? header.getBoundingClientRect().height : 0
     const target = headerHeight + timeToOffset(new Date()) - region.clientHeight / 2
-    region.scrollTo({ top: Math.max(0, target) })
+    region.scrollTo({ top: Math.max(0, target), behavior })
   }, [scope, scrollSignal])
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/hooks/use-calendar.ts b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/hooks/use-calendar.ts
@@ -1,11 +1,15 @@
 'use client'
 
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { isSameDay } from 'date-fns'
 import {
   advanceAnchor,
   type CalendarScope,
 } from '@/app/workspace/[workspaceId]/scheduled-tasks/utils/calendar-grid'
 
+/** How often to check whether the calendar day has rolled over. */
+const DAY_ROLLOVER_POLL_MS = 60_000
+
 /** A clicked calendar position: a day, optionally narrowed to an hour slot. */
 export interface CalendarSlot {
   date: Date
@@ -17,7 +21,7 @@ export interface UseCalendarReturn {
   scope: CalendarScope
   /** The focused day; week/month ranges derive from it. */
   anchor: Date
-  /** Stable "now" for the calendar's lifetime, shared by every view. */
+  /** The current calendar day, shared by every view; refreshes at midnight. */
   today: Date
   selectedSlot: CalendarSlot | null
   isCreateOpen: boolean
@@ -32,16 +36,26 @@ export interface UseCalendarReturn {
 
 /**
  * Owns the calendar's ephemeral view state (scope, anchor, selected slot, and
- * create-modal open state). Pure UI state — `useState`, not a store. All
- * mutations are event-driven; there are no effects. Opens on the `week` scope.
+ * create-modal open state). Pure UI state — `useState`, not a store. Opens on
+ * the `week` scope. `today` is polled so the today highlight and current-time
+ * column survive midnight without a remount; the poll only re-renders when the
+ * day actually changes (the interval is resilient to device sleep, unlike a
+ * one-shot timeout aimed at midnight).
  */
 export function useCalendar(): UseCalendarReturn {
-  const today = useMemo(() => new Date(), [])
+  const [today, setToday] = useState<Date>(() => new Date())
   const [scope, setScope] = useState<CalendarScope>('week')
   const [anchor, setAnchor] = useState<Date>(() => new Date())
   const [selectedSlot, setSelectedSlot] = useState<CalendarSlot | null>(null)
   const [isCreateOpen, setIsCreateOpen] = useState(false)
 
+  useEffect(() => {
+    const id = setInterval(() => {
+      setToday((current) => (isSameDay(current, new Date()) ? current : new Date()))
+    }, DAY_ROLLOVER_POLL_MS)
+    return () => clearInterval(id)
+  }, [])
+
   const next = useCallback(() => setAnchor((current) => advanceAnchor(current, scope, 1)), [scope])
   const prev = useCallback(() => setAnchor((current) => advanceAnchor(current, scope, -1)), [scope])
   const goToday = useCallback(() => setAnchor(new Date()), [])
