feat: add animations

frontend/src/app/workspace/chats/[thread_id]/page.tsx

@@ -162,25 +162,27 @@ export default function ChatPage() {
                       <Welcome />
                     </div>
                   )}
+                  <div className="absolute -top-4 right-0 left-0 z-0">
+                    <div className="absolute right-0 bottom-0 left-0 px-4">
+                      <TodoList
+                        className="bg-background/5"
+                        todos={thread.values.todos ?? []}
+                        collapsed={todoListCollapsed}
+                        hidden={
+                          !thread.values.todos ||
+                          thread.values.todos.length === 0
+                        }
+                        onToggle={() =>
+                          setTodoListCollapsed(!todoListCollapsed)
+                        }
+                      />
+                    </div>
+                  </div>
                   <InputBox
                     className={cn("bg-background/5 w-full -translate-y-4")}
                     autoFocus={isNewThread}
                     status={thread.isLoading ? "streaming" : "ready"}
                     context={settings.context}
-                    extraHeader={
-                      thread.values.todos?.length ? (
-                        <div className="mx-4">
-                          <TodoList
-                            className="bg-background/5"
-                            todos={thread.values.todos ?? []}
-                            collapsed={todoListCollapsed}
-                            onToggle={() =>
-                              setTodoListCollapsed(!todoListCollapsed)
-                            }
-                          />
-                        </div>
-                      ) : null
-                    }
                     onContextChange={(context) =>
                       setSettings("context", context)
                     }

frontend/src/components/workspace/input-box.tsx

@@ -35,7 +35,6 @@ export function InputBox({
   autoFocus,
   status = "ready",
   context,
-  extraHeader,
   onContextChange,
   onSubmit,
   onStop,
@@ -104,12 +103,7 @@ export function InputBox({
       onSubmit={handleSubmit}
       {...props}
     >
-      {extraHeader && (
+      <PromptInputBody className="absolute top-0 right-0 left-0 z-3">
-        <div className="absolute top-0 right-0 left-0 z-100">
-          <div className="absolute right-0 bottom-0 left-0">{extraHeader}</div>
-        </div>
-      )}
-      <PromptInputBody>
         <PromptInputTextarea
           className={cn("size-full")}
           placeholder={t.inputBox.placeholder}

frontend/src/components/workspace/todo-list.tsx

@@ -14,22 +14,25 @@ export function TodoList({
   className,
   todos,
   collapsed = false,
+  hidden = false,
   onToggle,
 }: {
   className?: string;
   todos: Todo[];
   collapsed?: boolean;
+  hidden?: boolean;
   onToggle?: () => void;
 }) {
   return (
     <div
       className={cn(
-        "flex h-fit w-full flex-col overflow-hidden rounded-t-xl border bg-white backdrop-blur-sm",
+        "flex h-fit w-full origin-bottom flex-col overflow-hidden rounded-t-xl border border-b-0 bg-white backdrop-blur-sm transition-all duration-200 ease-out",
+        hidden ? "pointer-events-none translate-y-8 opacity-0" : "",
         className,
       )}
     >
       <header
-        className="bg-accent flex min-h-8 shrink-0 cursor-pointer items-center justify-between px-4 text-sm"
+        className="bg-accent flex min-h-8 shrink-0 cursor-pointer items-center justify-between px-4 text-sm transition-all duration-300 ease-out"
         onClick={() => {
           onToggle?.();
         }}