create new task ui

web/components/routes/task/TaskForm.tsx

@@ -6,6 +6,8 @@ import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { LaIcon } from "@/components/custom/la-icon"
+import { Checkbox } from "@/components/ui/checkbox"
+import { format } from "date-fns"
 
 interface TaskFormProps {}
 
@@ -17,8 +19,6 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
 
 	const handleSubmit = (e: React.FormEvent) => {
 		e.preventDefault()
-		console.log(title.trim())
-		console.log(me, "me")
 		if (title.trim()) {
 			if (me?.root?.tasks === undefined) {
 				if (!me) return
@@ -30,8 +30,8 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
 					title,
 					description: "",
 					status: "todo",
-					createdAt: new Date(),
-					updatedAt: new Date()
+					createdAt: new Date()
+					// updatedAt: new Date()
 				},
 				{ owner: me._owner }
 			)
@@ -48,6 +48,8 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		if (e.key === "Escape") {
 			resetForm()
+		} else if (e.key === "Backspace" && title.trim() === "") {
+			resetForm()
 		}
 	}
 
@@ -57,8 +59,10 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
 		}
 	}, [inputVisible])
 
+	const formattedDate = format(new Date(), "EEE, MMMM do, yyyy")
+
 	return (
-		<div className="flex items-center space-x-2 p-4">
+		<div className="flex items-center space-x-2">
 			<AnimatePresence mode="wait">
 				{!inputVisible ? (
 					<motion.div
@@ -68,7 +72,12 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
 						exit={{ opacity: 0, width: 0 }}
 						transition={{ duration: 0.3 }}
 					>
-						<Button onClick={() => setInputVisible(true)} variant="outline">
+						<Button
+							className="flex flex-row items-center gap-1"
+							onClick={() => setInputVisible(true)}
+							variant="outline"
+						>
+							<LaIcon name="Plus" />
 							Add task
 						</Button>
 					</motion.div>
@@ -76,24 +85,27 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
 					<motion.form
 						key="input-form"
 						initial={{ width: 0, opacity: 0 }}
-						animate={{ width: "60%", opacity: 1 }}
+						animate={{ width: "100%", opacity: 1 }}
 						exit={{ width: 0, opacity: 0 }}
 						transition={{ duration: 0.3 }}
 						onSubmit={handleSubmit}
-						className="flex items-center space-x-2"
+						className="bg-result flex w-full items-center justify-between rounded-lg p-2 px-3"
 					>
-						<Input
-							autoFocus
-							ref={inputRef}
-							value={title}
-							className="flex-grow"
-							onChange={e => setTitle(e.target.value)}
-							onKeyDown={handleKeyDown}
-							placeholder="Enter task title"
-						/>
-						<Button type="button" variant="ghost" size="icon" onClick={resetForm}>
-							<LaIcon name="X" className="h-4 w-4" />
-						</Button>
+						<div className="flex flex-row items-center gap-3">
+							<Checkbox checked={false} onCheckedChange={() => {}} />
+							<Input
+								autoFocus
+								ref={inputRef}
+								value={title}
+								className="flex-grow border-none bg-transparent p-0 focus-visible:ring-0"
+								onChange={e => setTitle(e.target.value)}
+								onKeyDown={handleKeyDown}
+								// placeholder="Task title"
+							/>
+						</div>
+						<div className="flex items-center space-x-2">
+							<span className="text-muted-foreground text-xs">{formattedDate}</span>
+						</div>
 					</motion.form>
 				)}
 			</AnimatePresence>

web/components/routes/task/TaskItem.tsx

@@ -1,6 +1,6 @@
-import React from "react"
 import { Task } from "@/lib/schema/tasks"
 import { Checkbox } from "@/components/ui/checkbox"
+import { format } from "date-fns"
 
 interface TaskItemProps {
 	task: Task
@@ -12,10 +12,15 @@ export const TaskItem: React.FC<TaskItemProps> = ({ task, onUpdateTask }) => {
 		onUpdateTask(task.id, { status: checked ? "done" : "todo" })
 	}
 
+	const formattedDate = format(new Date(task.createdAt), "EEE, MMMM do, yyyy")
+
 	return (
-		<li className="flex items-center space-x-2">
-			<Checkbox checked={task.status === "done"} onCheckedChange={statusChange} />
-			<span className={task.status === "done" ? "text-foreground line-through" : ""}>{task.title}</span>
+		<li className="bg-result transitiion-opacity flex items-center justify-between rounded-lg p-2 px-3 hover:opacity-60">
+			<div className="flex flex-row items-center gap-3">
+				<Checkbox checked={task.status === "done"} onCheckedChange={statusChange} />
+				<p className={task.status === "done" ? "text-foreground line-through" : ""}>{task.title}</p>
+			</div>
+			<span className="text-muted-foreground text-xs">{formattedDate}</span>
 		</li>
 	)
 }

web/components/routes/task/TaskList.tsx

@@ -9,8 +9,15 @@ interface TaskListProps {
 
 export const TaskList: React.FC<TaskListProps> = ({ tasks, onUpdateTask }) => {
 	return (
-		<ul className="space-y-2">
-			{tasks?.map(task => task?.id && <TaskItem key={task.id} task={task} onUpdateTask={onUpdateTask} />)}
+		<ul className="flex flex-col gap-y-2">
+			{tasks?.map(
+				task =>
+					task?.id && (
+						<li key={task.id}>
+							<TaskItem task={task} onUpdateTask={onUpdateTask} />
+						</li>
+					)
+			)}
 		</ul>
 	)
 }

web/components/routes/task/TaskRoute.tsx

@@ -4,6 +4,7 @@ import { useAccount } from "@/lib/providers/jazz-provider"
 import { Task } from "@/lib/schema/tasks"
 import { TaskList } from "./TaskList"
 import { TaskForm } from "./TaskForm"
+import { LaIcon } from "@/components/custom/la-icon"
 
 export const TaskRoute: React.FC = () => {
 	const { me } = useAccount({ root: { tasks: [] } })
@@ -21,7 +22,10 @@ export const TaskRoute: React.FC = () => {
 
 	return (
 		<div className="flex flex-col space-y-4 p-4">
-			<h1 className="text-2xl font-bold">Tasks</h1>
+			<div className="flex flex-row items-center gap-1">
+				<LaIcon name="ListTodo" className="size-6" />
+				<h1 className="text-xl font-bold">Current Tasks</h1>
+			</div>
 			<TaskForm />
 			<TaskList tasks={tasks} onUpdateTask={updateTask} />
 		</div>

web/lib/schema/tasks.ts

@@ -5,7 +5,7 @@ export class Task extends CoMap {
 	description = co.optional.string
 	status = co.literal("todo", "in_progress", "done")
 	createdAt = co.encoded(Encoders.Date)
-	updatedAt = co.encoded(Encoders.Date)
+	// updatedAt = co.encoded(Encoders.Date)
 	completedAt = co.optional.encoded(Encoders.Date)
 }