diff --git a/frontend/src/components/Routine/WeeklyGrid.jsx b/frontend/src/components/Routine/WeeklyGrid.jsx index 4fc8c361..bece3fc8 100644 --- a/frontend/src/components/Routine/WeeklyGrid.jsx +++ b/frontend/src/components/Routine/WeeklyGrid.jsx @@ -80,10 +80,22 @@ function DroppableCell({ day, time, tasks, onDeleteTask }) { } /* ---------------- Weekly Grid ---------------- */ -export default function WeeklyGrid({ scheduledTasks, onSaveDay, onDeleteTask, innerRef }) { +export default function WeeklyGrid({ scheduledTasks, onSaveDay, onDeleteTask, innerRef, highlight }) { return ( -
-

Weekly Schedule

+
+

Weekly Schedule

+ {highlight ? ( +

+ Drag a task from your library onto the grid to start building a routine +

+ ) : ( +
+ )}
{ + setHighlightGrid(true); + setTimeout(() => setHighlightGrid(false), 1600); + }, 0); + + const handleStartRoutine = useCallback(() => { + if (tasks?.length > 0) { + pulseGrid(); + } else { + handleOpenModal(); + } + }, [tasks, pulseGrid, handleOpenModal]); + const handleSubmit = async (data) => { try { await addTask({ ...data, status: "Due" }); @@ -294,6 +316,7 @@ export default function RoutineBuilder() { onSaveDay={openSaveRoutineModal} onDeleteTask={removeScheduledTask} innerRef={gridRef} + highlight={highlightGrid} />
@@ -308,13 +331,14 @@ export default function RoutineBuilder() {

Loading routines…

) : savedRoutines.length === 0 ? ( /* - * EmptyState is deep in the page — clicking "Create Your First - * Routine" here triggers handleOpenModal, which scrolls to the - * top first, then opens the modal once the scroll settles. + * EmptyState is deep in the page. Clicking "Create Your First + * Routine" should guide the user toward the actual routine flow + * (drag a task onto the weekly grid), not open the Task form — + * that form belongs to the Task Library's own empty state. */ ) : (
@@ -434,4 +458,4 @@ export default function RoutineBuilder() {
); -} \ No newline at end of file +}