feat (tasks): tasks frontend animations

Author: itsskofficial

src/client/app/tasks/page.js

@@ -284,10 +284,10 @@ function TasksPageContent() {
 							<AnimatePresence mode="wait">
 								<motion.div
 									key={view}
-									initial={{ opacity: 0, y: 20 }}
-									animate={{ opacity: 1, y: 0 }}
-									exit={{ opacity: 0, y: -20 }}
-									transition={{ duration: 0.2 }}
+									initial={{ opacity: 0 }}
+									animate={{ opacity: 1 }}
+									exit={{ opacity: 0 }}
+									transition={{ duration: 0.3 }}
 									className="h-full"
 								>
 									{view === "list" ? (

src/client/components/tasks/CalendarView.js

@@ -23,6 +23,11 @@ import {
 import { cn } from "@utils/cn"
 import TaskCardCalendar from "./TaskCardCalendar"
 
+const cellVariants = {
+	hidden: { opacity: 0, y: -20, scale: 0.95 },
+	visible: { opacity: 1, y: 0, scale: 1 }
+}
+
 const CalendarDayCell = ({
 	day,
 	tasks,
@@ -37,15 +42,16 @@ const CalendarDayCell = ({
 	const hasMoreTasks = tasks.length > 1
 
 	return (
-		<div
+		<motion.div
 			onMouseEnter={() => setIsHovered(true)}
 			onMouseLeave={() => setIsHovered(false)}
 			onClick={() => onDayClick(day)}
+			variants={cellVariants}
 			className={cn(
 				"border-r border-b border-neutral-800 p-2 flex flex-col gap-1 overflow-hidden relative min-h-[120px] rounded-lg",
 				!isCurrentMonth && "bg-brand-black text-neutral-600",
 				isSelected
-					? "bg-brand-orange text-brand-black font-bold hover:bg-brand-orange"
+					? "bg-brand-orange/90 text-brand-black font-bold hover:bg-brand-orange"
 					: "hover:bg-neutral-800/70"
 			)}
 		>
@@ -99,7 +105,7 @@ const CalendarDayCell = ({
 					</div>
 				)}
 			</div>
-		</div>
+		</motion.div>
 	)
 }
 
@@ -122,6 +128,14 @@ const CalendarView = ({ tasks, onSelectTask, onDayClick, onShowMoreClick }) => {
 		onDayClick(day)
 	}
 
+	const containerVariants = {
+		hidden: { opacity: 1 },
+		visible: {
+			opacity: 1,
+			transition: { staggerChildren: 0.02, delayChildren: 0.1 }
+		}
+	}
+
 	return (
 		<div className="p-4 h-full flex flex-col bg-brand-black/50 backdrop-blur-sm rounded-xl border border-zinc-700/50">
 			<header className="flex items-center justify-between mb-4">
@@ -150,7 +164,12 @@ const CalendarView = ({ tasks, onSelectTask, onDayClick, onShowMoreClick }) => {
 					)
 				)}
 			</div>
-			<div className="grid grid-cols-7 grid-rows-5 flex-1">
+			<motion.div
+				className="grid grid-cols-7 grid-rows-5 flex-1"
+				variants={containerVariants}
+				initial="hidden"
+				animate="visible"
+			>
 				{daysInGrid.map((day) => {
 					const tasksForDay = tasks.filter((task) =>
 						isSameDay(task.scheduled_date, day)
@@ -168,7 +187,7 @@ const CalendarView = ({ tasks, onSelectTask, onDayClick, onShowMoreClick }) => {
 						/>
 					)
 				})}
-			</div>
+			</motion.div>
 		</div>
 	)
 }

src/client/components/tasks/CreateTaskInput.js

@@ -14,8 +14,7 @@ const CreateTaskInput = ({ onTaskAdded, prompt, setPrompt }) => {
 		const textarea = textareaRef.current
 		if (textarea) {
 			textarea.style.height = "auto"
-			const scrollHeight = textarea.scrollHeight
-			textarea.style.height = `${Math.min(Math.max(scrollHeight, 20), 100)}px`
+			textarea.style.height = `${Math.min(textarea.scrollHeight, 100)}px`
 		}
 	}, [prompt])
 
@@ -48,13 +47,13 @@ const CreateTaskInput = ({ onTaskAdded, prompt, setPrompt }) => {
 		<div className="p-4 flex-shrink-0 bg-transparent">
 			<div
 				className={cn(
-					"relative flex items-end bg-brand-black rounded-full p-1 transition-all overflow-hidden"
+					"relative flex bg-brand-black rounded-full p-1 transition-all overflow-hidden min-h-[50px]"
 				)}
 			>
 				<BorderTrail size={100} className="bg-brand-orange px-4" />
 				<div
 					className={cn(
-						"relative flex gap-2 items-end bg-transparent p-1 transition-all w-full"
+						"relative flex gap-2 items-stretch bg-transparent p-1 transition-all w-full"
 					)}
 				>
 					<textarea
@@ -68,7 +67,7 @@ const CreateTaskInput = ({ onTaskAdded, prompt, setPrompt }) => {
 							}
 						}}
 						placeholder=" "
-						className="w-full rounded-l-full bg-transparent text-white placeholder-transparent border-1 border-brand-orange focus:ring-0 focus:ring-brand-black text-sm z-10 overflow-y-auto"
+						className="w-full rounded-l-full bg-transparent text-white placeholder-transparent border-1 border-brand-orange focus:ring-0 focus:ring-brand-black text-sm z-10 overflow-y-auto self-stretch py-2"
 					/>
 					{!prompt && (
 						<div className="absolute top-1/2 left-4 -translate-y-1/2 text-neutral-500 pointer-events-none z-0">
@@ -89,7 +88,7 @@ const CreateTaskInput = ({ onTaskAdded, prompt, setPrompt }) => {
 					<button
 						onClick={handleAddTask}
 						disabled={isSaving || !prompt.trim()}
-						className="p-3 bg-brand-orange rounded-r-full h-12 text-brand-black disabled:opacity-50 hover:bg-opacity-80 transition-colors z-10 flex-shrink-0"
+						className="p-3 bg-brand-orange rounded-r-full h-full text-brand-black disabled:opacity-50 hover:bg-opacity-80 transition-colors z-10 flex-shrink-0"
 					>
 						{isSaving ? (
 							<IconLoader size={18} className="animate-spin" />

src/client/components/tasks/ListView.js

@@ -1,6 +1,6 @@
 "use client"
 import React, { useMemo } from "react"
-import { AnimatePresence } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
 import { IconSearch, IconChevronDown } from "@tabler/icons-react"
 import { groupTasksByDate } from "@utils/taskUtils"
 import TaskCardList from "./TaskCardList"
@@ -16,6 +16,14 @@ const ListView = ({
 }) => {
 	const { today, tomorrow, future } = groupTasksByDate(oneTimeTasks)
 
+	const containerVariants = {
+		hidden: { opacity: 1 }, // Let the parent control opacity
+		visible: {
+			opacity: 1,
+			transition: { staggerChildren: 0.07 }
+		}
+	}
+
 	const sections = [
 		{ title: "Today", tasks: today },
 		{ title: "Tomorrow", tasks: tomorrow },
@@ -70,15 +78,20 @@ const ListView = ({
 							title={`Active Workflows (${recurringTasks.length})`}
 							defaultOpen={true}
 						>
-							<div className="space-y-3 pt-2">
+							<motion.div
+								className="space-y-3 pt-2"
+								variants={containerVariants}
+								initial="hidden"
+								animate="visible"
+							>
 								{recurringTasks.map((task) => (
 									<TaskCardList
 										key={task.task_id}
 										task={task}
 										onSelectTask={onSelectTask}
 									/>
 								))}
-							</div>
+							</motion.div>
 						</CollapsibleSection>
 					)}
 
@@ -90,15 +103,20 @@ const ListView = ({
 									title={`${section.title} (${section.tasks.length})`}
 									defaultOpen={true}
 								>
-									<div className="space-y-3 pt-2">
+									<motion.div
+										className="space-y-3 pt-2"
+										variants={containerVariants}
+										initial="hidden"
+										animate="visible"
+									>
 										{section.tasks.map((task) => (
 											<TaskCardList
 												key={task.instance_id}
 												task={task}
 												onSelectTask={onSelectTask}
 											/>
 										))}
-									</div>
+									</motion.div>
 								</CollapsibleSection>
 							)
 					)}

src/client/components/tasks/TaskCardCalendar.js

@@ -19,7 +19,7 @@ const TaskCardCalendar = ({ task, onSelectTask }) => {
 			}}
 			className={cn(
 				"w-full p-2 rounded-md text-xs font-medium text-white cursor-pointer truncate",
-				"bg-neutral-700 hover:bg-neutral-600"
+				"bg-brand-gray/20 hover:bg-brand-gray/80"
 			)}
 		>
 			<div className="flex items-center gap-2">

src/client/components/tasks/TaskCardList.js

@@ -40,12 +40,16 @@ const TaskCardList = ({ task, onSelectTask }) => {
 		"clarification_answered"
 	].includes(task.status)
 
+	const cardVariants = {
+		hidden: { opacity: 0, y: -20, scale: 0.95 },
+		visible: { opacity: 1, y: 0, scale: 1 }
+	}
+
 	const cardContent = (
 		<motion.div
 			layout
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1 }}
-			exit={{ opacity: 0 }}
+			variants={cardVariants}
+			exit={{ opacity: 0, transition: { duration: 0.1 } }}
 			onClick={() => onSelectTask(task)}
 			className="bg-brand-black p-4 rounded-lg border border-zinc-700 hover:border-brand-orange transition-all cursor-pointer relative"
 		>