task input

web/components/routes/task/TaskForm.tsx

@@ -1,8 +1,9 @@
 "use client"
-
-import React, { useState } from "react"
+import { useState, useEffect, useRef } from "react"
+import { motion, AnimatePresence } from "framer-motion"
 import { Task } from "@/lib/schema/tasks"
 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"
 
@@ -12,7 +13,9 @@ interface TaskFormProps {
 
 export const TaskForm: React.FC<TaskFormProps> = ({ onAddTask }) => {
 	const [title, setTitle] = useState("")
+	const [inputVisible, setInputVisible] = useState(false)
 	const { me } = useAccount()
+	const inputRef = useRef<HTMLInputElement>(null)
 
 	const handleSubmit = (e: React.FormEvent) => {
 		e.preventDefault()
@@ -28,16 +31,67 @@ export const TaskForm: React.FC<TaskFormProps> = ({ onAddTask }) => {
 				{ owner: me._owner }
 			)
 			onAddTask(newTask)
-			setTitle("")
+			resetForm()
 		}
 	}
 
+	const resetForm = () => {
+		setTitle("")
+		setInputVisible(false)
+	}
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Escape") {
+			resetForm()
+		}
+	}
+
+	useEffect(() => {
+		if (inputVisible && inputRef.current) {
+			inputRef.current.focus()
+		}
+	}, [inputVisible])
+
 	return (
-		<form onSubmit={handleSubmit} className="flex space-x-2">
-			<Input value={title} className="w-[50%]" onChange={e => setTitle(e.target.value)} placeholder="Add new task" />
-			<button className="bg-inherit" type="submit">
-				<LaIcon name="CirclePlus" className="size-6" />
-			</button>
-		</form>
+		<div className="flex items-center space-x-2 p-4">
+			<AnimatePresence mode="wait">
+				{!inputVisible ? (
+					<motion.div
+						key="add-button"
+						initial={{ opacity: 0, width: 0 }}
+						animate={{ opacity: 1, width: "auto" }}
+						exit={{ opacity: 0, width: 0 }}
+						transition={{ duration: 0.3 }}
+					>
+						<Button onClick={() => setInputVisible(true)} variant="outline">
+							Add task
+						</Button>
+					</motion.div>
+				) : (
+					<motion.form
+						key="input-form"
+						initial={{ width: 0, opacity: 0 }}
+						animate={{ width: "60%", opacity: 1 }}
+						exit={{ width: 0, opacity: 0 }}
+						transition={{ duration: 0.3 }}
+						onSubmit={handleSubmit}
+						className="flex items-center space-x-2"
+					>
+						<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>
+					</motion.form>
+				)}
+			</AnimatePresence>
+		</div>
 	)
 }